Add 2nd kind of scrollbar mixin

Square corners vs round, good for dropdowns
pull/10616/head
Alex P 2017-03-29 16:02:38 -07:00 committed by Andrew Watkins
parent 6783248eb0
commit ec6bc815a7
1 changed files with 30 additions and 0 deletions

View File

@ -41,6 +41,35 @@ $scrollbar-offset: 3px;
@mixin custom-scrollbar($trackColor, $handleColor) {
&::-webkit-scrollbar {
width: $scrollbar-width;
&-button {
background-color: $trackColor;
}
&-track {
background-color: $trackColor;
}
&-track-piece {
background-color: $trackColor;
border: $scrollbar-offset solid $trackColor;
border-radius: ($scrollbar-width / 2);
}
&-thumb {
background-color: $handleColor;
border: $scrollbar-offset solid $trackColor;
border-radius: ($scrollbar-width / 2);
}
&-corner {
background-color: $trackColor;
}
}
&::-webkit-resizer {
background-color: $trackColor;
}
}
@mixin custom-scrollbar-round($trackColor, $handleColor) {
&::-webkit-scrollbar {
width: $scrollbar-width;
border-top-right-radius: $radius;
border-bottom-right-radius: $radius;
&-button {
@ -48,6 +77,7 @@ $scrollbar-offset: 3px;
}
&-track {
background-color: $trackColor;
border-top-right-radius: $radius;
border-bottom-right-radius: $radius;
}
&-track-piece {