mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2024-12-05 02:01:32 +00:00
Code Issues Releases Wiki Activity

Fix scrollbars

Browse Source
This commit is contained in:
balazs 2019-03-12 16:12:41 +01:00 committed by Kristóf Tóth
parent 857a7ed892
commit e58d394f37
4 changed files with 38 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,7 @@
@import "../../assets/scss/variables.scss";
@import "../../assets/scss/mixins/layout.scss";
@import "../../assets/scss/mixins/scrollbar";
@mixin set-tfw-web($layouts-key) {
.tfw-web {
@ -71,6 +72,8 @@
background-color: $tao-gray-50;
}
@include set-scrollbar-style('dark', '.tfw-messages');
.tfw-messages {
padding: $space;
padding-top: $hair;

4
src/app/terminal/terminal.component.scss
View File

@ -5,6 +5,10 @@
@import "../../app/dashboard/dashboard.component.scss";
::ng-deep .xterm .xterm-viewport {
overflow-y: auto;
}
.tfw-xterm {
max-height: 100%;
height: 100%;

41
src/assets/scss/mixins/_scrollbar.scss
View File

@ -1,17 +1,36 @@
@mixin set-scrollbar-style() {
::-webkit-scrollbar-track
{
background-color: #F5F5F5;
@mixin set-scrollbar-style($style, $selctor) {
::-webkit-scrollbar {
width: 3px !important;
}
::-webkit-scrollbar
{
width: 4px;
background-color: #F5F5F5;
#{$selctor}::-webkit-scrollbar-track {
border-radius: 10px !important;
width: 3px !important;
@if ($style == 'light') {
background: #8a8a8a !important;
} @else if ($style == 'dark') {
background: white !important;
};
}
::-webkit-scrollbar-thumb
{
background-color: gray;
#{$selctor}::-webkit-scrollbar-thumb {
@if ($style == 'dark') {
background: #8a8a8a !important;
} @else if ($style == 'light') {
background: white !important;
};
border-radius: 10px !important;
}
#{$selctor}::-webkit-scrollbar-thumb:hover {
@if ($style == 'dark') {
background: #424242 !important;
} @else if ($style == 'light') {
background: #9d9d9d !important;
};
cursor: pointer !important;
}
}

1
src/styles.scss
View File

@ -8,4 +8,5 @@ body, html {
height: 100vh;
width: 100vw;
overflow: hidden;
@include set-scrollbar-style('light', '');
}