1 files changed, 134 insertions, 0 deletions
diff --git a/Redcore-daylight/gtk-3.20/scss/widgets/_scrollbar.scss b/Redcore-daylight/gtk-3.20/scss/widgets/_scrollbar.scss
new file mode 100644
index 0000000..beff309
--- /dev/null
+++ b/Redcore-daylight/gtk-3.20/scss/widgets/_scrollbar.scss
@@ -0,0 +1,134 @@
+/***********
+ ! Scrollbar
+************/
+
+@include exports("scrollbar") {
+    scrollbar {
+        $_slider_min_length: 40px;
+        $_slider_normal_width: 7px;
+        $_slider_small_width: 4px;
+
+        // disable steppers
+        @at-root * {
+            -GtkScrollbar-has-backward-stepper: false;
+            -GtkScrollbar-has-forward-stepper: false;
+        }
+
+        background-color: $scrollbar_bg_color;
+        transition: 300ms ease-out;
+
+        // scrollbar border on the content side
+        &.top { border-bottom: 1px solid $borders_color; }
+        &.bottom { border-top: 1px solid $borders_color; }
+        &.left { border-right: 1px solid $borders_color; }
+        &.right { border-left: 1px solid $borders_color; }
+
+        &:backdrop {
+            background-color: $backdrop_scrollbar_bg_color;
+            border-color: $backdrop_borders_color;
+            transition: 400ms ease-in;
+        }
+
+        slider {
+            min-width: $_slider_normal_width;
+            min-height: $_slider_normal_width;
+            border: 1px solid transparent;
+            border-radius: $roundness;
+            background-clip: padding-box;
+            background-color: $scrollbar_slider_color;
+
+            &:hover { background-color: $scrollbar_slider_hover_color; }
+            &:hover:active { background-color: $scrollbar_slider_active_color; }
+            &:backdrop { background-color: $backdrop_scrollbar_slider_color; }
+            &:disabled { background-color: transparent; }
+        }
+
+        &.horizontal slider { min-width: $_slider_min_length; }
+        &.vertical slider { min-height: $_slider_min_length; }
+
+        &.fine-tune slider:active {
+            background-color: lighten($scrollbar_slider_active_color, 10%);
+        }
+
+        &.overlay-indicator {
+            opacity: .8;
+
+            &:not(.dragging):not(.hovering) {
+                border-color: transparent;
+                opacity: .4;
+                background-color: transparent;
+
+                slider {
+                    min-width: $_slider_small_width;
+                    min-height: $_slider_small_width;
+                    background-color: $fg_color;
+                    border: 1px solid if($variant == 'light', $white, $black);
+                }
+
+                // hide steppers
+                button {
+                    min-width: $_slider_small_width;
+                    min-height: $_slider_small_width;
+                    border-color: transparent;
+                    -gtk-icon-source: none;
+                }
+
+                &.horizontal {
+                    slider { min-width: $_slider_min_length; }
+                    button { min-width: $_slider_normal_width; }
+                }
+
+                &.vertical {
+                    slider { min-height: $_slider_min_length; }
+                    button { min-height: $_slider_normal_width; }
+                }
+            }
+        }
+
+        // stepper styling
+        button {
+            min-width: $_slider_normal_width;
+            min-height: $_slider_normal_width;
+            padding: 0;
+            border: 0;
+            border-radius: 0;
+            border-color: $borders_color; // FIXME overwritten by global button definition
+            background-color: transparent;
+            box-shadow: none;
+            color: $scrollbar_slider_color;
+
+            &:hover { color: $scrollbar_slider_hover_color; }
+            &:active, &:checked { color: $scrollbar_slider_active_color; }
+            &:backdrop { color: $backdrop_scrollbar_slider_color; }
+        }
+
+        // button icons
+        &.vertical {
+            button {
+                &.down {
+                    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
+                    border-top: 1px solid $borders_color;
+                }
+
+                &.up {
+                    -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
+                    border-bottom: 1px solid $borders_color;
+                }
+            }
+        }
+
+        &.horizontal {
+            button {
+                &.down {
+                    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
+                    border-left: 1px solid $borders_color;
+                }
+
+                &.up {
+                    -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
+                    border-right: 1px solid $borders_color;
+                }
+            }
+        }
+    }
+}