[libadwaita/wip/exalm/stylesheet2: 80/103] stylesheet: Split scale styles into a separate file

[Alexander Mikhaylenko <alexm src gnome org>]

commit 7f99b82588c2fc20abc720b366cf486342b05380
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Fri Apr 9 13:30:12 2021 +0500

    stylesheet: Split scale styles into a separate file

 src/stylesheet/_common.scss        | 427 -------------------------------------
 src/stylesheet/_widgets.scss       |   1 +
 src/stylesheet/meson.build         |   1 +
 src/stylesheet/widgets/_scale.scss | 422 ++++++++++++++++++++++++++++++++++++
 4 files changed, 424 insertions(+), 427 deletions(-)
---
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index cbb9d74..bc75985 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -237,433 +237,6 @@ editablelabel > stack > text {
 }
 
 
-/************
- * GtkScale *
- ************/
-%scale_trough {
-  border: 1px solid $dark_fill;
-  border-radius: 3px;
-  background-color: $dark_fill;
-
-  headerbar & { background-color: darken($dark_fill,8%); } //3504
-
-  &:disabled {
-   background-color: $insensitive_bg_color;
-   border-color: $insensitive_borders_color;
-  }
-
-  // ...on selected list rows
-  row:selected & {
-    &:disabled, & {
-      outline-color: $alt_focus_border_color;
-      border-color: $selected_borders_color;
-    }
-  }
-
-  // OSD
-  .osd & {
-    border-color: $osd_borders_color;
-    background-color: transparentize($osd_borders_color, 0.2);
-
-    &:disabled { background-color: $osd_insensitive_bg_color; }
-  }
-}
-
-%scale_highlight {
-  border: 1px solid $selected_bg_color;
-  border-radius: 3px;
-  background-color: $selected_bg_color;
-
-  &:disabled {
-    background-color: transparent;
-    border-color: transparent;
-  }
-
-  // ...on selected list rows
-  row:selected & { &:disabled, & { border-color: $selected_borders_color; }}
-
-  // OSD
-  .osd & {
-    border-color: $osd_borders_color;
-
-    &:disabled { border-color: transparent; }
-  }
-}
-
-scale {
-  // sizing
-  $_marks_length: 6px;
-  $_marks_distance: 6px;
-
-  min-height: 10px;
-  min-width: 10px;
-  padding: 12px;
-
-  @include focus-ring("> trough", $offset: 10px);
-
-  > trough {
-    transition: $focus_transition;
-    @extend %scale_trough;
-
-    // those are inside the trough node, I need them to show their own border over the trough one, so 
negative margin
-    > fill,
-    > highlight { margin: -1px; }
-
-    // the colored part of the backing bit
-    > highlight { @extend %scale_highlight; }
-
-    // this is another differently styled part of the backing bit, the most relevant use case is for example
-    // in media player to indicate how much video stream as been cached
-    > fill {
-      @extend %scale_trough;
-
-      &:disabled {
-        border-color: transparent;
-        background-color: transparent;
-      }
-
-      // OSD
-      .osd & {
-        background-color: mix($osd_fg_color, $osd_borders_color, 25%);
-
-        &:disabled {
-         border-color: transparent;
-         background-color: transparent;
-        }
-      }
-    }
-
-    > slider {
-      @include button(normal);
-      border-width: 1px;
-      border-style: solid;
-      border-radius: 100%;
-      transition: $button_transition;
-      transition-property: background, border, box-shadow;
-
-      // the slider is inside the trough, so to have make it bigger there's a negative margin
-      min-height: 18px;
-      min-width: 18px;
-      margin: -9px;
-
-      &:hover { @include button(hover); }
-
-      &:active { border-color: $selected_borders_color; }
-
-      &:disabled { @include button(insensitive); }
-
-      // ...on selected list rows
-      row:selected & { &:disabled, & { border-color: $selected_borders_color; } }
-
-      // OSD
-      .osd & {
-        @include button(osd);
-        border-color: darken($osd_borders_color, 3%);
-        background-color: opacify($osd_bg_color, 1); // solid background needed here
-
-        &:hover {
-          @include button(osd-hover);
-          background-color: opacify($osd_bg_color, 1); // solid background needed here
-        }
-
-        &:active {
-          @include button(osd-active);
-          background-color: opacify($osd_bg_color, 1); // solid background needed here
-        }
-
-        &:disabled {
-          @include button(osd-insensitive);
-          background-color: opacify($osd_bg_color, 1); // solid background needed here
-        }
-      }
-    }
-  }
-
-  // click-and-hold the slider to activate
-  &.fine-tune {
-    &.horizontal {
-      padding-top: 9px;
-      padding-bottom: 9px;
-      min-height: 16px;
-    }
-
-    &.vertical {
-      padding-left: 9px;
-      padding-right: 9px;
-      min-width: 16px;
-    }
-
-    > trough {
-      // to make the trough grow in fine-tune mode
-      > slider { margin: -6px; }
-
-      > fill,
-      > highlight,
-      & {
-        border-radius: 5px;
-      }
-    }
-  }
-
-  > value {
-    color: gtkalpha(currentColor, 0.55);
-    font-feature-settings: "tnum";
-  }
-
-  &.horizontal {
-    > marks {
-      color: gtkalpha(currentColor, 0.55);
-      &.top    { margin-bottom: $_marks_distance; }
-      &.bottom { margin-top: $_marks_distance; }
-
-      indicator {
-        background-color: currentColor;
-        min-height: $_marks_length;
-        min-width: 1px;
-      }
-    }
-
-    > value.left  { margin-right: 9px; }
-    > value.right { margin-left: 9px; }
-
-    &.fine-tune > marks {
-      &.top { margin-top: 3px; }
-      &.bottom { margin-bottom: 3px; }
-
-      indicator { min-height: ($_marks_length - 3px); }
-    }
-  }
-
-  &.vertical {
-    > marks {
-      color: gtkalpha(currentColor, 0.55);
-      &.top    { margin-right: $_marks_distance; }
-      &.bottom { margin-left: $_marks_distance; }
-
-      indicator {
-        background-color: currentColor;
-        min-height: 1px;
-        min-width: $_marks_length;
-      }
-    }
-
-    > value.top    { margin-bottom: 9px; }
-    > value.bottom { margin-top: 9px; }
-
-    &.fine-tune > marks {
-      &.top { margin-left: 3px; }
-      &.bottom { margin-right: 3px; }
-
-      indicator { min-height: ($_marks_length - 3px); }
-    }
-  }
-
-  // *WARNING* scale with marks madness following
-
-  // FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for 
those...
-  $suffix: if($variant == 'light', '', '-dark');
-
-  @each $dir_class, $dir_infix in ('horizontal', 'horz'),
-                                  ('vertical', 'vert') {
-    @each $marks_infix, $marks_class in ('scale-has-marks-above', 'marks-before:not(.marks-after)'),
-                                        ('scale-has-marks-below', 'marks-after:not(.marks-before)') {
-      @each $state, $state_infix in ('', ''),
-                                    (':hover', '-hover'),
-                                    (':active', '-active'),
-                                    (':disabled', '-insensitive') {
-        &.#{$dir_class}.#{$marks_class} {
-
-          > trough > slider {
-            &#{$state} {
-              // an asymmetric slider asset is used here, so the margins are uneven, the smaller
-              // margin is set on the point side.
-              margin: -10px;
-              $_scale_asset: '#{$assets}/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
-              border-style: none;
-              border-radius: 0;
-
-              background-color: transparent;
-              background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
-
-              $_scale_slider_bg_pos: bottom;
-
-              @if $dir_class == 'horizontal' {
-                min-height: 26px;
-                min-width: 22px;
-
-                @if $marks_infix == 'scale-has-marks-above' {
-                  margin-top: -14px;
-
-                  $_scale_slider_bg_pos: top;
-                }
-
-                @else { margin-bottom: -14px; }
-              }
-
-              @else {
-                min-height: 22px;
-                min-width: 26px;
-
-                @if $marks_infix == 'scale-has-marks-above' {
-                  margin-left: -14px;
-
-                  $_scale_slider_bg_pos: left bottom;
-                }
-
-                @else {
-                  margin-right: -14px;
-
-                  $_scale_slider_bg_pos: right bottom;
-                }
-              }
-
-              background-position: $_scale_slider_bg_pos;
-              background-repeat: no-repeat;
-              box-shadow: none;
-            }
-          }
-
-          &.fine-tune > trough > slider {
-            @if $dir_class == 'horizontal' {
-              // bigger negative margins to make the trough grow here as well
-              margin: -7px -10px;
-
-              @if $marks_infix == 'scale-has-marks-above' { margin-top: -11px; }
-
-              @else { margin-bottom: -11px; }
-            }
-
-            @else {
-              margin: -10px -7px;
-
-              @if $marks_infix == 'scale-has-marks-above' { margin-left: -11px; }
-
-              @else { margin-right: -11px; }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &.color {
-    min-height: 0;
-    min-width: 0;
-
-    > trough {
-      background-image: image($borders_color);
-      background-repeat: no-repeat;
-    }
-
-    &.horizontal {
-      padding: 0 0 15px 0;
-
-      > trough {
-        padding-bottom: 4px;
-        background-position: 0 -3px;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-
-        > slider {
-          &:dir(ltr), &:dir(rtl) { // specificity bump
-            &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
-              margin-bottom: -15px;
-              margin-top: 6px;
-            }
-          }
-        }
-      }
-    }
-
-    &.vertical {
-      &:dir(ltr) {
-        padding: 0 0 0 15px;
-
-        > trough {
-          padding-left: 4px;
-          background-position: 3px 0;
-          border-bottom-right-radius: 0;
-          border-top-right-radius: 0;
-
-          > slider {
-            &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
-              margin-left: -15px;
-              margin-right: 6px;
-            }
-          }
-        }
-      }
-
-      &:dir(rtl) {
-        padding: 0 15px 0 0;
-
-        > trough {
-          padding-right: 4px;
-          background-position: -3px 0;
-          border-bottom-left-radius: 0;
-          border-top-left-radius: 0;
-
-          > slider {
-            &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
-              margin-right: -15px;
-              margin-left: 6px;
-            }
-          }
-        }
-      }
-    }
-
-    &.fine-tune {
-      &.horizontal {
-        &:dir(ltr), &:dir(rtl) { // specificity bump
-          padding: 0 0 12px 0;
-
-          > trough {
-            padding-bottom: 7px;
-            background-position: 0 -6px;
-
-            > slider {
-              margin-bottom: -15px;
-              margin-top: 6px;
-            }
-          }
-        }
-      }
-
-      &.vertical {
-        &:dir(ltr) {
-          padding: 0 0 0 12px;
-
-          > trough {
-            padding-left: 7px;
-            background-position: 6px 0;
-
-            > slider {
-              margin-left: -15px;
-              margin-right: 6px;
-            }
-          }
-        }
-
-        &:dir(rtl) {
-          padding: 0 12px 0 0;
-
-          > trough {
-            padding-right: 7px;
-            background-position: -6px 0;
-
-            > slider {
-              margin-right: -15px;
-              margin-left: 6px;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-
 /*****************
  * Progress bars *
  *****************/
diff --git a/src/stylesheet/_widgets.scss b/src/stylesheet/_widgets.scss
index 595f8c4..a064161 100644
--- a/src/stylesheet/_widgets.scss
+++ b/src/stylesheet/_widgets.scss
@@ -7,6 +7,7 @@
 @import 'widgets/menus';
 @import 'widgets/notebook';
 @import 'widgets/popovers';
+@import 'widgets/scale';
 @import 'widgets/scrolling';
 @import 'widgets/spinner';
 @import 'widgets/spin-button';
diff --git a/src/stylesheet/meson.build b/src/stylesheet/meson.build
index ee98cdd..a5aa33e 100644
--- a/src/stylesheet/meson.build
+++ b/src/stylesheet/meson.build
@@ -29,6 +29,7 @@ if not fs.exists('Adwaita-light.css')
       'widgets/_menus.scss',
       'widgets/_notebook.scss',
       'widgets/_popovers.scss',
+      'widgets/_scale.scss',
       'widgets/_scrolling.scss',
       'widgets/_spinner.scss',
       'widgets/_spin-button.scss',
diff --git a/src/stylesheet/widgets/_scale.scss b/src/stylesheet/widgets/_scale.scss
new file mode 100644
index 0000000..67e4dfe
--- /dev/null
+++ b/src/stylesheet/widgets/_scale.scss
@@ -0,0 +1,422 @@
+%scale_trough {
+  border: 1px solid $dark_fill;
+  border-radius: 3px;
+  background-color: $dark_fill;
+
+  headerbar & { background-color: darken($dark_fill,8%); } //3504
+
+  &:disabled {
+   background-color: $insensitive_bg_color;
+   border-color: $insensitive_borders_color;
+  }
+
+  // ...on selected list rows
+  row:selected & {
+    &:disabled, & {
+      outline-color: $alt_focus_border_color;
+      border-color: $selected_borders_color;
+    }
+  }
+
+  // OSD
+  .osd & {
+    border-color: $osd_borders_color;
+    background-color: transparentize($osd_borders_color, 0.2);
+
+    &:disabled { background-color: $osd_insensitive_bg_color; }
+  }
+}
+
+%scale_highlight {
+  border: 1px solid $selected_bg_color;
+  border-radius: 3px;
+  background-color: $selected_bg_color;
+
+  &:disabled {
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  // ...on selected list rows
+  row:selected & { &:disabled, & { border-color: $selected_borders_color; }}
+
+  // OSD
+  .osd & {
+    border-color: $osd_borders_color;
+
+    &:disabled { border-color: transparent; }
+  }
+}
+
+scale {
+  // sizing
+  $_marks_length: 6px;
+  $_marks_distance: 6px;
+
+  min-height: 10px;
+  min-width: 10px;
+  padding: 12px;
+
+  @include focus-ring("> trough", $offset: 10px);
+
+  > trough {
+    transition: $focus_transition;
+    @extend %scale_trough;
+
+    // those are inside the trough node, I need them to show their own border over the trough one, so 
negative margin
+    > fill,
+    > highlight { margin: -1px; }
+
+    // the colored part of the backing bit
+    > highlight { @extend %scale_highlight; }
+
+    // this is another differently styled part of the backing bit, the most relevant use case is for example
+    // in media player to indicate how much video stream as been cached
+    > fill {
+      @extend %scale_trough;
+
+      &:disabled {
+        border-color: transparent;
+        background-color: transparent;
+      }
+
+      // OSD
+      .osd & {
+        background-color: mix($osd_fg_color, $osd_borders_color, 25%);
+
+        &:disabled {
+         border-color: transparent;
+         background-color: transparent;
+        }
+      }
+    }
+
+    > slider {
+      @include button(normal);
+      border-width: 1px;
+      border-style: solid;
+      border-radius: 100%;
+      transition: $button_transition;
+      transition-property: background, border, box-shadow;
+
+      // the slider is inside the trough, so to have make it bigger there's a negative margin
+      min-height: 18px;
+      min-width: 18px;
+      margin: -9px;
+
+      &:hover { @include button(hover); }
+
+      &:active { border-color: $selected_borders_color; }
+
+      &:disabled { @include button(insensitive); }
+
+      // ...on selected list rows
+      row:selected & { &:disabled, & { border-color: $selected_borders_color; } }
+
+      // OSD
+      .osd & {
+        @include button(osd);
+        border-color: darken($osd_borders_color, 3%);
+        background-color: opacify($osd_bg_color, 1); // solid background needed here
+
+        &:hover {
+          @include button(osd-hover);
+          background-color: opacify($osd_bg_color, 1); // solid background needed here
+        }
+
+        &:active {
+          @include button(osd-active);
+          background-color: opacify($osd_bg_color, 1); // solid background needed here
+        }
+
+        &:disabled {
+          @include button(osd-insensitive);
+          background-color: opacify($osd_bg_color, 1); // solid background needed here
+        }
+      }
+    }
+  }
+
+  // click-and-hold the slider to activate
+  &.fine-tune {
+    &.horizontal {
+      padding-top: 9px;
+      padding-bottom: 9px;
+      min-height: 16px;
+    }
+
+    &.vertical {
+      padding-left: 9px;
+      padding-right: 9px;
+      min-width: 16px;
+    }
+
+    > trough {
+      // to make the trough grow in fine-tune mode
+      > slider { margin: -6px; }
+
+      > fill,
+      > highlight,
+      & {
+        border-radius: 5px;
+      }
+    }
+  }
+
+  > value {
+    color: gtkalpha(currentColor, 0.55);
+    font-feature-settings: "tnum";
+  }
+
+  &.horizontal {
+    > marks {
+      color: gtkalpha(currentColor, 0.55);
+      &.top    { margin-bottom: $_marks_distance; }
+      &.bottom { margin-top: $_marks_distance; }
+
+      indicator {
+        background-color: currentColor;
+        min-height: $_marks_length;
+        min-width: 1px;
+      }
+    }
+
+    > value.left  { margin-right: 9px; }
+    > value.right { margin-left: 9px; }
+
+    &.fine-tune > marks {
+      &.top { margin-top: 3px; }
+      &.bottom { margin-bottom: 3px; }
+
+      indicator { min-height: ($_marks_length - 3px); }
+    }
+  }
+
+  &.vertical {
+    > marks {
+      color: gtkalpha(currentColor, 0.55);
+      &.top    { margin-right: $_marks_distance; }
+      &.bottom { margin-left: $_marks_distance; }
+
+      indicator {
+        background-color: currentColor;
+        min-height: 1px;
+        min-width: $_marks_length;
+      }
+    }
+
+    > value.top    { margin-bottom: 9px; }
+    > value.bottom { margin-top: 9px; }
+
+    &.fine-tune > marks {
+      &.top { margin-left: 3px; }
+      &.bottom { margin-right: 3px; }
+
+      indicator { min-height: ($_marks_length - 3px); }
+    }
+  }
+
+  // *WARNING* scale with marks madness following
+
+  // FIXME: OSD and selected list rows missing, I don't feel like adding the other 144 assets needed for 
those...
+  $suffix: if($variant == 'light', '', '-dark');
+
+  @each $dir_class, $dir_infix in ('horizontal', 'horz'),
+                                  ('vertical', 'vert') {
+    @each $marks_infix, $marks_class in ('scale-has-marks-above', 'marks-before:not(.marks-after)'),
+                                        ('scale-has-marks-below', 'marks-after:not(.marks-before)') {
+      @each $state, $state_infix in ('', ''),
+                                    (':hover', '-hover'),
+                                    (':active', '-active'),
+                                    (':disabled', '-insensitive') {
+        &.#{$dir_class}.#{$marks_class} {
+
+          > trough > slider {
+            &#{$state} {
+              // an asymmetric slider asset is used here, so the margins are uneven, the smaller
+              // margin is set on the point side.
+              margin: -10px;
+              $_scale_asset: '#{$assets}/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
+              border-style: none;
+              border-radius: 0;
+
+              background-color: transparent;
+              background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
+
+              $_scale_slider_bg_pos: bottom;
+
+              @if $dir_class == 'horizontal' {
+                min-height: 26px;
+                min-width: 22px;
+
+                @if $marks_infix == 'scale-has-marks-above' {
+                  margin-top: -14px;
+
+                  $_scale_slider_bg_pos: top;
+                }
+
+                @else { margin-bottom: -14px; }
+              }
+
+              @else {
+                min-height: 22px;
+                min-width: 26px;
+
+                @if $marks_infix == 'scale-has-marks-above' {
+                  margin-left: -14px;
+
+                  $_scale_slider_bg_pos: left bottom;
+                }
+
+                @else {
+                  margin-right: -14px;
+
+                  $_scale_slider_bg_pos: right bottom;
+                }
+              }
+
+              background-position: $_scale_slider_bg_pos;
+              background-repeat: no-repeat;
+              box-shadow: none;
+            }
+          }
+
+          &.fine-tune > trough > slider {
+            @if $dir_class == 'horizontal' {
+              // bigger negative margins to make the trough grow here as well
+              margin: -7px -10px;
+
+              @if $marks_infix == 'scale-has-marks-above' { margin-top: -11px; }
+
+              @else { margin-bottom: -11px; }
+            }
+
+            @else {
+              margin: -10px -7px;
+
+              @if $marks_infix == 'scale-has-marks-above' { margin-left: -11px; }
+
+              @else { margin-right: -11px; }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.color {
+    min-height: 0;
+    min-width: 0;
+
+    > trough {
+      background-image: image($borders_color);
+      background-repeat: no-repeat;
+    }
+
+    &.horizontal {
+      padding: 0 0 15px 0;
+
+      > trough {
+        padding-bottom: 4px;
+        background-position: 0 -3px;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+
+        > slider {
+          &:dir(ltr), &:dir(rtl) { // specificity bump
+            &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
+              margin-bottom: -15px;
+              margin-top: 6px;
+            }
+          }
+        }
+      }
+    }
+
+    &.vertical {
+      &:dir(ltr) {
+        padding: 0 0 0 15px;
+
+        > trough {
+          padding-left: 4px;
+          background-position: 3px 0;
+          border-bottom-right-radius: 0;
+          border-top-right-radius: 0;
+
+          > slider {
+            &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
+              margin-left: -15px;
+              margin-right: 6px;
+            }
+          }
+        }
+      }
+
+      &:dir(rtl) {
+        padding: 0 15px 0 0;
+
+        > trough {
+          padding-right: 4px;
+          background-position: -3px 0;
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+
+          > slider {
+            &:hover, &:backdrop, &:disabled, &:backdrop:disabled, & {
+              margin-right: -15px;
+              margin-left: 6px;
+            }
+          }
+        }
+      }
+    }
+
+    &.fine-tune {
+      &.horizontal {
+        &:dir(ltr), &:dir(rtl) { // specificity bump
+          padding: 0 0 12px 0;
+
+          > trough {
+            padding-bottom: 7px;
+            background-position: 0 -6px;
+
+            > slider {
+              margin-bottom: -15px;
+              margin-top: 6px;
+            }
+          }
+        }
+      }
+
+      &.vertical {
+        &:dir(ltr) {
+          padding: 0 0 0 12px;
+
+          > trough {
+            padding-left: 7px;
+            background-position: 6px 0;
+
+            > slider {
+              margin-left: -15px;
+              margin-right: 6px;
+            }
+          }
+        }
+
+        &:dir(rtl) {
+          padding: 0 12px 0 0;
+
+          > trough {
+            padding-right: 7px;
+            background-position: -6px 0;
+
+            > slider {
+              margin-right: -15px;
+              margin-left: 6px;
+            }
+          }
+        }
+      }
+    }
+  }
+}