[libadwaita/wip/exalm/buttons-5: 3/18] stylesheet: Unify spinbutton styles

[Alexander Mikhaylenko <alexm src gnome org>]

commit 649058ef7e35be9faf911cc6150e4adba55257f9
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Thu Jun 10 22:03:44 2021 +0500

    stylesheet: Unify spinbutton styles
    
    Remove the special vertical style and use the same style as horizontal.

 src/stylesheet/widgets/_spin-button.scss | 113 ++++++++++++-------------------
 1 file changed, 44 insertions(+), 69 deletions(-)
---
diff --git a/src/stylesheet/widgets/_spin-button.scss b/src/stylesheet/widgets/_spin-button.scss
index f0492b47..1af5659a 100644
--- a/src/stylesheet/widgets/_spin-button.scss
+++ b/src/stylesheet/widgets/_spin-button.scss
@@ -1,13 +1,37 @@
 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;
+  @extend %entry;
+
+  padding: 0;
+  border-spacing: 0;
+
+  /* :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) {
+    margin: 0;
+    color: mix($fg_color, $base_color, 90%);
+    background-image: none;
+    border-style: solid;
+    border-color: transparentize($borders_color, 0.7);
+    border-radius: 0;
+    box-shadow: none;
+
+    &:hover {
+      color: $fg_color;
+      background-color: darken($bg_color,5%);
+    }
 
-    padding: 0;
-    border-spacing: 0;
+    &: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);
+    }
+  }
 
+  &:not(.vertical) {
     > text {
       min-width: 28px;
       padding: 6px;
@@ -17,32 +41,11 @@ spinbutton {
     > 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;
-      }
+      border-width: 0 0 0 1px;
 
-      &:active {
-        background-color: transparentize(black, 0.9);
-        box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8);
-      }
+      &:dir(rtl) { border-width: 0 1px 0 0; }
 
       &:dir(ltr):last-child { border-radius: 0 $button_radius $button_radius 0; }
 
@@ -50,52 +53,24 @@ spinbutton {
     }
   }
 
-  // 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;
-
-      > 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;
-    }
+    /* :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) {
+      &:last-child {
+        border-width: 1px 0 0 0;
+        border-radius: 0 0 $button_radius $button_radius;
+      }
 
-    %bottom_button {
-      border-top-style: none;
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
+      &:first-child {
+        border-width: 0 0 1px 0;
+        border-radius: $button_radius $button_radius 0 0;
+      }
     }
   }