[libadwaita/wip/exalm/no-assets: 1/4] stylesheet: Replace scale assets with transforms

[Alexander Mikhaylenko <alexm src gnome org>]

commit 143adee9ebd1780d580c79b418680985e7096fb9
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Wed May 5 12:38:50 2021 +0500

    stylesheet: Replace scale assets with transforms

 src/stylesheet/widgets/_scale.scss | 109 ++++++++-----------------------------
 1 file changed, 24 insertions(+), 85 deletions(-)
---
diff --git a/src/stylesheet/widgets/_scale.scss b/src/stylesheet/widgets/_scale.scss
index 055141e..0af58cf 100644
--- a/src/stylesheet/widgets/_scale.scss
+++ b/src/stylesheet/widgets/_scale.scss
@@ -168,6 +168,17 @@ scale {
     font-feature-settings: "tnum";
   }
 
+  &.marks-before, &.marks-after {
+    > trough > slider {
+      // Adjust box-shadow for the 45deg rotation, for 0 1px we ideally want
+      // 1/√2px 1/√2px, round that to 1px 1px
+      $_button_shadow: 1px 1px 2px transparentize($shadow_color, 0.03);
+
+      box-shadow: $_button_shadow;
+      transform: rotate(45deg);
+    }
+  }
+
   &.horizontal {
     > marks {
       color: gtkalpha(currentColor, 0.55);
@@ -190,6 +201,14 @@ scale {
 
       indicator { min-height: ($_marks_length - 3px); }
     }
+
+    &.marks-before > trough > slider {
+      border-top-left-radius: 0;
+    }
+
+    &.marks-after > trough > slider {
+      border-bottom-right-radius: 0;
+    }
   }
 
   &.vertical {
@@ -214,93 +233,13 @@ scale {
 
       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; }
+    &.marks-before > trough > slider {
+      border-bottom-left-radius: 0;
+    }
 
-              @else { margin-right: -11px; }
-            }
-          }
-        }
-      }
+    &.marks-after > trough > slider {
+      border-top-right-radius: 0;
     }
   }