mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-05-11 22:08:35 +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/variables.scss";
@import "../../assets/scss/mixins/layout.scss"; @import "../../assets/scss/mixins/layout.scss";
@import "../../assets/scss/mixins/scrollbar";
@mixin set-tfw-web($layouts-key) { @mixin set-tfw-web($layouts-key) {
.tfw-web { .tfw-web {
@ -71,6 +72,8 @@
background-color: $tao-gray-50; background-color: $tao-gray-50;
} }
@include set-scrollbar-style('dark', '.tfw-messages');
.tfw-messages { .tfw-messages {
padding: $space; padding: $space;
padding-top: $hair; padding-top: $hair;

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

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

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

@ -1,17 +1,36 @@
@mixin set-scrollbar-style() { @mixin set-scrollbar-style($style, $selctor) {
::-webkit-scrollbar-track ::-webkit-scrollbar {
{ width: 3px !important;
background-color: #F5F5F5;
} }
::-webkit-scrollbar #{$selctor}::-webkit-scrollbar-track {
{ border-radius: 10px !important;
width: 4px; width: 3px !important;
background-color: #F5F5F5; @if ($style == 'light') {
background: #8a8a8a !important;
} @else if ($style == 'dark') {
background: white !important;
};
} }
::-webkit-scrollbar-thumb #{$selctor}::-webkit-scrollbar-thumb {
{ @if ($style == 'dark') {
background-color: gray; 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; height: 100vh;
width: 100vw; width: 100vw;
overflow: hidden; overflow: hidden;
@include set-scrollbar-style('light', '');
} }