GTK 3.20 :: Optimized spinbutton (#454)

* * Optimized spinbutton.

* * Removed top and left border not used code.

* * Fixed: Missing name of pseudo-class.

gtk-3.20/scss/_functions.scss

@@ -93,12 +93,3 @@ $modules: () !default;
         @return transparentize(black, $_lbg * .8);
     }
 }
-
-// entries
-@function entry_focus_border($fc:$selected_bg_color) {
-    @if $variant == 'light' {
-        @return $fc;
-    } @else {
-        @return if($fc == $selected_bg_color, $selected_borders_color, shade($fc, .65));
-    }
-}

gtk-3.20/scss/widgets/_button.scss

@@ -379,21 +379,60 @@
 
             &:active, &:checked, &:hover { color: $text_color; }
 
-            &:disabled { color: mix($text_color, $base_color, .7); }
+            &:disabled { color: alpha($insensitive_fg_color, .8); }
+
+            &:backdrop { color: mix($backdrop_base_color, $backdrop_fg_color, .9); }
+
+            &:backdrop:disabled { color: alpha($backdrop_insensitive_color, .8); }
         }
 
         &:not(.vertical) {
+            @extend %entry;
+            @include linear-gradient($base_color, to top);
+            @include border($base_color);
+
+            padding: 0;
+
+            color: $text_color;
+            caret-color: $text_color;
+
+            &:focus, &:active { border-color: border_focus($borders_color); }
+
+            &:disabled {
+                @include linear-gradient(shade($base_color, .9), to top);
+
+                color: mix($base_color, $text_color, .5);
+            }
+
             entry {
                 // reset all the other props since the spinbutton node is styled here
+                border: 0;
                 border-radius: 0;
+                box-shadow: none;
             }
 
             button {
-                @extend %linked_middle;
+                border-radius: 0;
+                border-color: alpha($borders_color, .8);
+                border-style: none none none solid;
+                background-image: none;
+                box-shadow: none;
 
-                &:first-child { border-radius: $roundness 0 0 $roundness; }
+                &:dir(rtl) { border-style: none solid none none; }
 
-                &:last-child { border-radius: 0 $roundness $roundness 0; }
+                &:active { box-shadow: inset 0 2px 3px -1px transparentize($black, .8); }
+
+                &:backdrop { border-color: alpha($backdrop_borders_color, .8); }
+
+                &:backdrop:disabled {
+                    border-style: none none none solid; // It is needed or it gets overridden
+
+                    &:dir(rtl) { border-style: none solid none none; }
+                }
+
+                &:dir(rtl):first-child { border-radius: $roundness 0 0 $roundness; }
+
+                &:dir(ltr):last-child { border-radius: 0 $roundness $roundness 0; }
             }
         }
 
@@ -404,20 +443,14 @@
             }
 
             button {
-                @extend %linked_vertical_entry;
+                &.up {
-
+                    border-style: solid solid none solid;
-                &:first-child {
+                    border-radius: $roundness $roundness 0 0;
-                    border-width: 1px;
-                    border-bottom-width: 0;
-                    border-bottom-right-radius: 0;
-                    border-bottom-left-radius: 0;
                 }
 
-                &:last-child {
+                &.down {
-                    border-width: 1px;
+                    border-style: none solid solid solid;
-                    border-top-width: 0;
+                    border-radius: 0 0 $roundness $roundness; 
-                    border-top-left-radius: 0;
-                    border-top-right-radius: 0;
                 }
             }
         }

gtk-3.20/scss/widgets/_entry.scss

@@ -87,7 +87,6 @@
 }
 
 %entry {
-    padding: $spacing;
     border-width: 1px;
     border-style: solid;
     border-radius: $roundness;
@@ -124,6 +123,8 @@
     @include linear-gradient($bg, to top);
     @include border($bg);
 
+    padding: $spacing;
+
     color: $fg;
     caret-color: $fg;
 
@@ -141,47 +142,7 @@
         @include entry($base_color, $text_color);
 
         .linked:not(.vertical) > & { @extend %linked_entry; }
-        .linked:not(.vertical) > &:focus + &,
-        .linked:not(.vertical) > &:focus + button,
-        .linked:not(.vertical) > &:focus + combobox > box > button.combo { border-left-color: entry_focus_border(); }
 
-        .linked:not(.vertical) > &:drop(active) + &,
+        .linked.vertical > & { @extend %linked_vertical_entry; }
-        .linked:not(.vertical) > &:drop(active) + button,
-        .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; }
-
-
-        .linked.vertical > & {
-            @extend %linked_vertical_entry;
-
-            // brighter border between linked entries
-            &:not(:disabled) + entry:not(:disabled) {
-                border-top-color: mix($borders_color, $base_color, .3);
-
-                &:backdrop { border-top-color: mix($backdrop_borders_color, $backdrop_base_color, .3); }
-            }
-
-            // brighter border between linked insensitive entries
-            &:disabled + entry:disabled { border-top-color: mix($borders_color, $base_color, .3); }
-
-            // color back the top border of a linked focused entry following another entry.
-            // :not(:only-child) is a specificity bump hack.
-            + entry:focus:not(:only-child) { border-top-color: entry_focus_border(); }
-
-            + entry:drop(active):not(:only-child) { border-top-color: $drop_target_color; }
-
-            // this takes care of coloring the top border of the focused entry subsequent widget.
-            // :not(:only-child) is a specificity bump hack.
-            &:focus:not(:only-child) {
-                + entry,
-                + button,
-                + combobox > box > button.combo { border-top-color: entry_focus_border(); }
-            }
-
-            &:drop(active):not(:only-child) {
-                + entry,
-                + button,
-                + combobox > box > button.combo { border-top-color: $drop_target_color; }
-            }
-        }
     }
 }