[libadwaita/wip/exalm/stylesheet2: 62/97] stylesheet: Split spin button styles into a separate file

[Alexander Mikhaylenko <alexm src gnome org>]

commit 256648198212ca7aedf53ccfa54abb224020970f
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Fri Apr 9 12:47:25 2021 +0500

    stylesheet: Split spin button styles into a separate file

 src/stylesheet/_common.scss              | 168 -------------------------------
 src/stylesheet/_widgets.scss             |   1 +
 src/stylesheet/meson.build               |   1 +
 src/stylesheet/widgets/_spin-button.scss | 163 ++++++++++++++++++++++++++++++
 4 files changed, 165 insertions(+), 168 deletions(-)
---
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index 2e0e4d7..13df56e 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -233,174 +233,6 @@ editablelabel > stack > text {
   @include entry(normal);
 }
 
-/*****************
- * GtkSpinButton *
- *****************/
-spinbutton {
-  &:not(.vertical) {
-    // in this horizontal configuration, the whole spinbutton
-    // behaves as the entry, so we extend the entry styling
-    // and nuke the style on the internal entry
-    @extend %entry;
-
-    padding: 0;
-    border-spacing: 0;
-
-    > text {
-      min-width: 28px;
-      padding: 6px;
-    }
-
-    /* :not here just to bump specificity above that of the list button styling */
-    > button.image-button.up:not(.flat),
-    > button.image-button.down:not(.flat) {
-      min-height: 16px;
-      margin: 0;
-      padding-bottom: 0;
-      padding-top: 0;
-      color: mix($fg_color, $base_color, 90%);
-      background-image: none;
-      border-style: none none none solid;
-      border-color: transparentize($borders_color, 0.7);
-      border-radius: 0;
-      box-shadow: none;
-
-      &:dir(rtl) { border-style: none solid none none; }
-
-      &:hover {
-        color: $fg_color;
-        background-color: darken($bg_color,5%);
-      }
-
-      &:disabled {
-        color: transparentize($insensitive_fg_color, 0.7);
-        background-color: transparent;
-      }
-
-      &:active {
-        background-color: transparentize(black, 0.9);
-        box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8);
-      }
-
-      &:dir(ltr):last-child { border-radius: 0 $button_radius $button_radius 0; }
-
-      &:dir(rtl):first-child { border-radius: $button_radius 0 0 $button_radius; }
-    }
-
-    .osd {
-      > button.image-button.up:not(.flat),
-      > button.image-button.down:not(.flat) {
-        @include button(undecorated);
-
-        color: $osd_fg_color;
-        border-style: none none none solid;
-        border-color: transparentize($osd_borders_color, 0.3);
-        border-radius: 0;
-        box-shadow: none;
-
-        &:dir(rtl) { border-style: none solid none none; }
-
-        &:hover {
-          @include button(undecorated);
-
-          color: $osd_fg_color;
-          border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
-          background-color: darken($osd_bg_color,10%);
-          box-shadow: none;
-        }
-
-        &:disabled {
-          @include button(undecorated);
-
-          color: $osd_insensitive_fg_color;
-          border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
-          box-shadow: none;
-        }
-
-        &:dir(ltr):last-child { border-radius: 0 $button_radius $button_radius 0; }
-
-        &:dir(rtl):first-child { border-radius: $button_radius 0 0 $button_radius; }
-      }
-    }
-  }
-
-  // Vertical
-  &.vertical {
-    // in the vertical configuration, we treat the spinbutton
-    // as a box, and tweak the style of the entry in the middle
-    // so that it's linked
-
-    // FIXME: this should not be set at all, but otherwise it gets the wrong
-    // color
-    &:disabled { color: $insensitive_fg_color; }
-
-    &:drop(active) {
-      border-color: transparent;
-      box-shadow: none;
-    }
-
-    > text {
-      @extend %entry;
-
-      min-height: 32px;
-      min-width: 32px;
-      padding: 0;
-      border-radius: 0;
-
-      > selection { @extend %selected_items; }
-      > block-cursor { @include entry(block_cursor); }
-    }
-
-    > button {
-      min-height: 32px;
-      min-width: 32px;
-      padding: 0;
-
-      &.up { @extend %top_button; }
-
-      &.down { @extend %bottom_button; }
-    }
-
-    %top_button {
-      border-bottom-style: none;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    %bottom_button {
-      border-top-style: none;
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-    }
-  }
-
-  // OSD vertical
-  .osd &.vertical > button:first-child {
-    @include button(osd);
-
-    &:hover { @include button(osd-hover);}
-
-    &:active { @include button(osd-active); }
-
-    &:disabled { @include button(osd-insensitive); }
-  }
-
-  // Misc
-  treeview &:not(.vertical) {
-    min-height: 0;
-    border-style: none;
-    border-radius: 0;
-
-    > text {
-      min-height: 0;
-      padding: 1px 2px;
-    }
-  }
-
-  font-feature-settings: "tnum";
-}
-
-
 /**************
  * ComboBoxes *
  **************/
diff --git a/src/stylesheet/_widgets.scss b/src/stylesheet/_widgets.scss
index 52fbeef..f4db69e 100644
--- a/src/stylesheet/_widgets.scss
+++ b/src/stylesheet/_widgets.scss
@@ -2,3 +2,4 @@
 @import 'widgets/entries';
 @import 'widgets/links';
 @import 'widgets/spinner';
+@import 'widgets/spin-button';
diff --git a/src/stylesheet/meson.build b/src/stylesheet/meson.build
index bc1098c..e3e5e4e 100644
--- a/src/stylesheet/meson.build
+++ b/src/stylesheet/meson.build
@@ -24,6 +24,7 @@ if not fs.exists('Adwaita-light.css')
       'widgets/_entries.scss',
       'widgets/_links.scss',
       'widgets/_spinner.scss',
+      'widgets/_spin-button.scss',
     ])
 
     theme_variants = [
diff --git a/src/stylesheet/widgets/_spin-button.scss b/src/stylesheet/widgets/_spin-button.scss
new file mode 100644
index 0000000..578217c
--- /dev/null
+++ b/src/stylesheet/widgets/_spin-button.scss
@@ -0,0 +1,163 @@
+spinbutton {
+  &:not(.vertical) {
+    // in this horizontal configuration, the whole spinbutton
+    // behaves as the entry, so we extend the entry styling
+    // and nuke the style on the internal entry
+    @extend %entry;
+
+    padding: 0;
+    border-spacing: 0;
+
+    > text {
+      min-width: 28px;
+      padding: 6px;
+    }
+
+    /* :not here just to bump specificity above that of the list button styling */
+    > button.image-button.up:not(.flat),
+    > button.image-button.down:not(.flat) {
+      min-height: 16px;
+      margin: 0;
+      padding-bottom: 0;
+      padding-top: 0;
+      color: mix($fg_color, $base_color, 90%);
+      background-image: none;
+      border-style: none none none solid;
+      border-color: transparentize($borders_color, 0.7);
+      border-radius: 0;
+      box-shadow: none;
+
+      &:dir(rtl) { border-style: none solid none none; }
+
+      &:hover {
+        color: $fg_color;
+        background-color: darken($bg_color,5%);
+      }
+
+      &:disabled {
+        color: transparentize($insensitive_fg_color, 0.7);
+        background-color: transparent;
+      }
+
+      &:active {
+        background-color: transparentize(black, 0.9);
+        box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8);
+      }
+
+      &:dir(ltr):last-child { border-radius: 0 $button_radius $button_radius 0; }
+
+      &:dir(rtl):first-child { border-radius: $button_radius 0 0 $button_radius; }
+    }
+
+    .osd {
+      > button.image-button.up:not(.flat),
+      > button.image-button.down:not(.flat) {
+        @include button(undecorated);
+
+        color: $osd_fg_color;
+        border-style: none none none solid;
+        border-color: transparentize($osd_borders_color, 0.3);
+        border-radius: 0;
+        box-shadow: none;
+
+        &:dir(rtl) { border-style: none solid none none; }
+
+        &:hover {
+          @include button(undecorated);
+
+          color: $osd_fg_color;
+          border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
+          background-color: darken($osd_bg_color,10%);
+          box-shadow: none;
+        }
+
+        &:disabled {
+          @include button(undecorated);
+
+          color: $osd_insensitive_fg_color;
+          border-color: transparentize(opacify($osd_borders_color, 1), 0.5);
+          box-shadow: none;
+        }
+
+        &:dir(ltr):last-child { border-radius: 0 $button_radius $button_radius 0; }
+
+        &:dir(rtl):first-child { border-radius: $button_radius 0 0 $button_radius; }
+      }
+    }
+  }
+
+  // Vertical
+  &.vertical {
+    // in the vertical configuration, we treat the spinbutton
+    // as a box, and tweak the style of the entry in the middle
+    // so that it's linked
+
+    // FIXME: this should not be set at all, but otherwise it gets the wrong
+    // color
+    &:disabled { color: $insensitive_fg_color; }
+
+    &:drop(active) {
+      border-color: transparent;
+      box-shadow: none;
+    }
+
+    > text {
+      @extend %entry;
+
+      min-height: 32px;
+      min-width: 32px;
+      padding: 0;
+      border-radius: 0;
+
+      > selection { @extend %selected_items; }
+      > block-cursor { @include entry(block_cursor); }
+    }
+
+    > button {
+      min-height: 32px;
+      min-width: 32px;
+      padding: 0;
+
+      &.up { @extend %top_button; }
+
+      &.down { @extend %bottom_button; }
+    }
+
+    %top_button {
+      border-bottom-style: none;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    %bottom_button {
+      border-top-style: none;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+  }
+
+  // OSD vertical
+  .osd &.vertical > button:first-child {
+    @include button(osd);
+
+    &:hover { @include button(osd-hover);}
+
+    &:active { @include button(osd-active); }
+
+    &:disabled { @include button(osd-insensitive); }
+  }
+
+  // Misc
+  treeview &:not(.vertical) {
+    min-height: 0;
+    border-style: none;
+    border-radius: 0;
+
+    > text {
+      min-height: 0;
+      padding: 1px 2px;
+    }
+  }
+
+  font-feature-settings: "tnum";
+}