[libadwaita/wip/exalm/stylesheet2: 71/97] stylesheet: Split scrolling styles into a separate file

[Alexander Mikhaylenko <alexm src gnome org>]

commit 59acc312efabf41a2d9e7ce6ca246182ac1d8127
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Fri Apr 9 13:21:47 2021 +0500

    stylesheet: Split scrolling styles into a separate file

 src/stylesheet/_common.scss            | 121 ---------------------------------
 src/stylesheet/_widgets.scss           |   1 +
 src/stylesheet/meson.build             |   1 +
 src/stylesheet/widgets/_scrolling.scss | 116 +++++++++++++++++++++++++++++++
 4 files changed, 118 insertions(+), 121 deletions(-)
---
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index c113806..db07d32 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -237,127 +237,6 @@ editablelabel > stack > text {
 }
 
 
-/*************
- * Scrolling *
- *************/
-
-scrollbar {
-  $_slider_min_length: 40px;
-  $_slider_width: 8px;
-  $_scrollbar_transition: all 300ms $ease-out-quad;
-  $_fine-tune_slider_border: $_slider_width - 3; //#3672
-
-  background-color: $scrollbar_bg_color;
-  transition: $_scrollbar_transition;
-
-  // scrollbar border
-  &.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; }
-
-  > range > trough > slider {
-    min-width: $_slider_width;
-    min-height: $_slider_width;
-    margin: -1px;
-    border: 4px solid transparent;
-    border-radius: 10px;
-    background-clip: padding-box;
-    background-color: $scrollbar_slider_color;
-    transition: $_scrollbar_transition;
-
-    &:hover { background-color: $scrollbar_slider_hover_color; }
-
-    &:hover:active { background-color: $scrollbar_slider_active_color; }
-
-    &:disabled { background-color: transparent; }
-  }
-
-  > range.fine-tune {
-    > trough > slider {
-      transition: none;
-      min-width: $_fine-tune_slider_border+1;
-      min-height: $_fine-tune_slider_border+1;
-    }
-
-    &.horizontal > trough > slider { border-width: $_fine-tune_slider_border 4px; }
-    &.vertical > trough > slider { border-width: 4px $_fine-tune_slider_border; }
-  }
-
-  &.overlay-indicator {
-    &:not(.dragging):not(.hovering) {
-      border-color: transparent;
-      opacity: 0.4;
-      background-color: transparent;
-
-      > range > trough > slider {
-        margin: 0;
-        min-width: 3px;
-        min-height: 3px;
-        background-color: $fg_color;
-        border: 1px solid if($variant == 'light', white, black);
-      }
-
-      &.horizontal {
-        > range > trough > slider {
-          margin: 0 2px;
-          min-width: $_slider_min_length;
-        }
-      }
-
-      &.vertical {
-        > range > trough > slider {
-          margin: 2px 0;
-          min-height: $_slider_min_length;
-        }
-      }
-    }
-
-    &.dragging,
-    &.hovering { opacity: 0.8; }
-  }
-
-  &.horizontal > range > trough > slider { min-width: $_slider_min_length; }
-  &.vertical > range > trough > slider { min-height: $_slider_min_length; }
-}
-
-scrolledwindow {
-  // This is used when content is touch-dragged past boundaries.
-  // draws a box on top of the content, the size changes programmatically.
-  > overshoot {
-    &.top {
-      @include overshoot(top);
-    }
-
-    &.bottom {
-      @include overshoot(bottom);
-    }
-
-    &.left {
-      @include overshoot(left);
-    }
-
-    &.right {
-      @include overshoot(right);
-    }
-  }
-
-  > junction { // the small square between two scrollbars
-    // Only color the top-left (or top right in RTL) pixel, to visually connect
-    // the borders of the two scrollbars.
-
-    background: $borders_color,
-                linear-gradient(to bottom, transparent 1px, $scrollbar_bg_color 1px),
-                linear-gradient(to right, transparent 1px, $scrollbar_bg_color 1px);
-
-    &:dir(rtl) {
-      background: $borders_color,
-                  linear-gradient(to bottom, transparent 1px, $scrollbar_bg_color 1px),
-                  linear-gradient(to left, transparent 1px, $scrollbar_bg_color 1px);
-    }
-  }
-}
-
 /**********
  * Switch *
  **********/
diff --git a/src/stylesheet/_widgets.scss b/src/stylesheet/_widgets.scss
index 822a612..554f125 100644
--- a/src/stylesheet/_widgets.scss
+++ b/src/stylesheet/_widgets.scss
@@ -6,6 +6,7 @@
 @import 'widgets/menus';
 @import 'widgets/notebook';
 @import 'widgets/popovers';
+@import 'widgets/scrolling';
 @import 'widgets/spinner';
 @import 'widgets/spin-button';
 @import 'widgets/toolbars';
diff --git a/src/stylesheet/meson.build b/src/stylesheet/meson.build
index e66c5cc..4213eb1 100644
--- a/src/stylesheet/meson.build
+++ b/src/stylesheet/meson.build
@@ -28,6 +28,7 @@ if not fs.exists('Adwaita-light.css')
       'widgets/_menus.scss',
       'widgets/_notebook.scss',
       'widgets/_popovers.scss',
+      'widgets/_scrolling.scss',
       'widgets/_spinner.scss',
       'widgets/_spin-button.scss',
       'widgets/_toolbars.scss',
diff --git a/src/stylesheet/widgets/_scrolling.scss b/src/stylesheet/widgets/_scrolling.scss
new file mode 100644
index 0000000..8d18e64
--- /dev/null
+++ b/src/stylesheet/widgets/_scrolling.scss
@@ -0,0 +1,116 @@
+scrollbar {
+  $_slider_min_length: 40px;
+  $_slider_width: 8px;
+  $_scrollbar_transition: all 300ms $ease-out-quad;
+  $_fine-tune_slider_border: $_slider_width - 3; //#3672
+
+  background-color: $scrollbar_bg_color;
+  transition: $_scrollbar_transition;
+
+  // scrollbar border
+  &.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; }
+
+  > range > trough > slider {
+    min-width: $_slider_width;
+    min-height: $_slider_width;
+    margin: -1px;
+    border: 4px solid transparent;
+    border-radius: 10px;
+    background-clip: padding-box;
+    background-color: $scrollbar_slider_color;
+    transition: $_scrollbar_transition;
+
+    &:hover { background-color: $scrollbar_slider_hover_color; }
+
+    &:hover:active { background-color: $scrollbar_slider_active_color; }
+
+    &:disabled { background-color: transparent; }
+  }
+
+  > range.fine-tune {
+    > trough > slider {
+      transition: none;
+      min-width: $_fine-tune_slider_border+1;
+      min-height: $_fine-tune_slider_border+1;
+    }
+
+    &.horizontal > trough > slider { border-width: $_fine-tune_slider_border 4px; }
+    &.vertical > trough > slider { border-width: 4px $_fine-tune_slider_border; }
+  }
+
+  &.overlay-indicator {
+    &:not(.dragging):not(.hovering) {
+      border-color: transparent;
+      opacity: 0.4;
+      background-color: transparent;
+
+      > range > trough > slider {
+        margin: 0;
+        min-width: 3px;
+        min-height: 3px;
+        background-color: $fg_color;
+        border: 1px solid if($variant == 'light', white, black);
+      }
+
+      &.horizontal {
+        > range > trough > slider {
+          margin: 0 2px;
+          min-width: $_slider_min_length;
+        }
+      }
+
+      &.vertical {
+        > range > trough > slider {
+          margin: 2px 0;
+          min-height: $_slider_min_length;
+        }
+      }
+    }
+
+    &.dragging,
+    &.hovering { opacity: 0.8; }
+  }
+
+  &.horizontal > range > trough > slider { min-width: $_slider_min_length; }
+  &.vertical > range > trough > slider { min-height: $_slider_min_length; }
+}
+
+scrolledwindow {
+  // This is used when content is touch-dragged past boundaries.
+  // draws a box on top of the content, the size changes programmatically.
+  > overshoot {
+    &.top {
+      @include overshoot(top);
+    }
+
+    &.bottom {
+      @include overshoot(bottom);
+    }
+
+    &.left {
+      @include overshoot(left);
+    }
+
+    &.right {
+      @include overshoot(right);
+    }
+  }
+
+  > junction { // the small square between two scrollbars
+    // Only color the top-left (or top right in RTL) pixel, to visually connect
+    // the borders of the two scrollbars.
+
+    background: $borders_color,
+                linear-gradient(to bottom, transparent 1px, $scrollbar_bg_color 1px),
+                linear-gradient(to right, transparent 1px, $scrollbar_bg_color 1px);
+
+    &:dir(rtl) {
+      background: $borders_color,
+                  linear-gradient(to bottom, transparent 1px, $scrollbar_bg_color 1px),
+                  linear-gradient(to left, transparent 1px, $scrollbar_bg_color 1px);
+    }
+  }
+}