From ec6bc815a78f4949fb51570df06cf9920da427f8 Mon Sep 17 00:00:00 2001 From: Alex P Date: Wed, 29 Mar 2017 16:02:38 -0700 Subject: [PATCH] Add 2nd kind of scrollbar mixin Square corners vs round, good for dropdowns --- ui/src/style/mixins/mixins.scss | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/ui/src/style/mixins/mixins.scss b/ui/src/style/mixins/mixins.scss index 4d3646f72d..5bc20a2681 100644 --- a/ui/src/style/mixins/mixins.scss +++ b/ui/src/style/mixins/mixins.scss @@ -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 {