Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - display scrollbar to avoid layout change

Browse Source
This commit is contained in:
Sam 2023-07-12 09:00:59 +02:00
parent 534af8218c
commit b0369fa3c9
3 changed files with 31 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
fittrackee_client/src/scss/base.scss
View File

@ -4,6 +4,28 @@
body { body {
margin: 0; margin: 0;
overflow-y: scroll;
scrollbar-gutter: stable both-edges;
&::-webkit-scrollbar {
width: $scrollbar-width;
height: $scrollbar-height;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: transparent;
border-radius: $scrollbar-radius;
}
&:hover {
&::-webkit-scrollbar-thumb {
background: var(--scroll-thumb-color);
}
&::-webkit-scrollbar-track {
background: transparent;
}
}
} }
#app { #app {

2
fittrackee_client/src/scss/colors.scss
View File

@ -76,4 +76,6 @@
--password-color-good: #acc578; --password-color-good: #acc578;
--password-color-strong: #57c255; --password-color-strong: #57c255;
--scroll-thumb-color: #b9bcbd;
} }

7
fittrackee_client/src/scss/vars.scss
View File

@ -19,3 +19,10 @@ $default-padding: 10px;
$default-margin: $default-padding; $default-margin: $default-padding;
$border-radius: 4px; $border-radius: 4px;
/*
* === SCROLLBAR ===
*/
$scrollbar-height : $default-padding * .5;
$scrollbar-width : $scrollbar-height;
$scrollbar-radius : $default-padding;