mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-04-03 10:12:41 +00:00
Code Issues Releases Wiki Activity

Merge branch 'fix-scrollbar'

Browse Source
This commit is contained in:
Kristóf Tóth 2018-05-17 14:24:54 +02:00
commit 4df50e165d
5 changed files with 22 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/app/dashboard/dashboard.component.scss
View File

@ -5,7 +5,6 @@
@import "../../assets/scss/mixins/layout.scss"; @import "../../assets/scss/mixins/layout.scss";
@mixin set-tfw-web($layouts-key) { @mixin set-tfw-web($layouts-key) {
.tfw-web { .tfw-web {
.iframe-container { .iframe-container {
display: flex; display: flex;
@ -22,26 +21,6 @@
} }
} }
@mixin set-scrollbar-style() {
::-webkit-scrollbar-track
{
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 4px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
background-color: gray;
}
}
.tfw-grid-main-components { .tfw-grid-main-components {
display: grid; display: grid;
width: 100vw; width: 100vw;
@ -53,7 +32,6 @@
.tfw-header, .tfw-header,
.tfw-messages { .tfw-messages {
// Check whether the layout contains a web component // Check whether the layout contains a web component
div[class*="web"] & { div[class*="web"] & {
border: 2px solid $tao-gray-100; border: 2px solid $tao-gray-100;
@ -78,32 +56,26 @@
div[class="terminal-ide-web"] & { div[class="terminal-ide-web"] & {
max-height: 55vmin; max-height: 55vmin;
} }
@include set-scrollbar-style();
} }
.tfw-ide { .tfw-ide {
background-color: $tao-plum-900; background-color: $tao-plum-900;
@include set-scrollbar-style();
} }
.tfw-sidebar { .tfw-sidebar {
background-color: $tao-gray-100; background-color: $tao-gray-50;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
padding-top: 5vh; padding-top: 5vh;
align-items: center; align-items: center;
box-shadow: -15px -5px 19px -11px rgba(0,0,0,0.75); border-left: 1px solid $tao-gray-400;
z-index: 999; z-index: 999;
} }
.tfw-terminal { .tfw-terminal {
overflow-y: hidden; overflow-y: hidden;
background-color: $tao-gray-800; background-color: $tao-gray-800;
@include set-scrollbar-style();
div[class*="web"] & { div[class*="web"] & {
border-top: 1px solid $tao-plum-100; border-top: 1px solid $tao-plum-100;

6
src/app/messages/messages.component.scss
View File

@ -4,21 +4,17 @@
@import "../../assets/scss/variables.scss"; @import "../../assets/scss/variables.scss";
.tfw-messages-main { .tfw-messages-main {
.tfw-grid-messages-header { .tfw-grid-messages-header {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
margin-bottom: $small; margin-bottom: $small;
span { span {
color: $tao-blue-500; color: $tao-blue-500;
font-weight: 500; font-weight: 500;
font-size: $font-size-h3; font-size: $font-size-h3;
} }
} }
} }
.tfw-grid-message { .tfw-grid-message {
@ -52,6 +48,4 @@
font-size: $font-size-tiny; font-size: $font-size-tiny;
opacity: 0.37; opacity: 0.37;
} }
} }

2
src/app/sidebar/sidebar.component.scss
View File

@ -5,7 +5,6 @@
@import "../../assets/scss/mixins/layout.scss"; @import "../../assets/scss/mixins/layout.scss";
.tfw-ide-pin { .tfw-ide-pin {
button { button {
background-color: white; background-color: white;
width: 50px; width: 50px;
@ -31,6 +30,5 @@
outline: none; outline: none;
width: 48px; width: 48px;
} }
} }
} }

7
src/assets/scss/_main.scss
View File

@ -5,9 +5,8 @@
'variables', 'variables',
'grid'; 'grid';
@import
'mixins/scrollbar';
@import @import
'shared/buttons'; 'shared/buttons';

17
src/assets/scss/mixins/_scrollbar.scss Normal file
View File

@ -0,0 +1,17 @@
@mixin set-scrollbar-style() {
::-webkit-scrollbar-track
{
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 4px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
background-color: gray;
}
}