* Rewirte spinbutton and linked entry, button. Implement inline-toolbar button linked.

gtk-3.20/scss/_functions.scss

@@ -93,3 +93,12 @@ $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

@@ -367,90 +367,61 @@
         min-width: 24px;
         @include button(shade($bg_color, 1.2), $fg_color);
 
-        &.linked, .linked & { @include linked_button(shade($bg_color, 1.2)); }
+        .linked > & { @include linked_button(shade($bg_color, 1.2)); }
 
-        &.linked.vertical, .linked.vertical & { @include linked_vertical_button(shade($bg_color, 1.2)); }
+        .linked.vertical > & { @include linked_vertical_button(shade($bg_color, 1.2)); }
 
-        spinbutton & {
+        .inline-toolbar & { @extend %linked_button; }
+    }
+
+    spinbutton {
+        button {
             color: mix($text_color, $base_color, .4);
-            padding: $spacing ($spacing * 2);
-            border: 0;
-            border-radius: 0;
-            border-style: none;
-            background-color: transparent;
-            background-image: none;
-            box-shadow: inset 1px 0 shade($base_color, .9);
-
-            &:disabled {
-                color: mix($text_color, $base_color, .7);
-                box-shadow: inset 1px 0 shade($base_color, .85);
-            }
 
             &:active, &:checked, &:hover { color: $text_color; }
 
-            &:first-child {
+            &:disabled { color: mix($text_color, $base_color, .7); }
-                border-radius: $roundness 0 0 $roundness;
-                box-shadow: none;
-            }
-
-            &:last-child { border-radius: 0 $roundness $roundness 0; }
-
-            &:dir(rtl) { box-shadow: inset -1px 0 shade($base_color, .9); }
         }
 
-        spinbutton.vertical & {
+        &:not(.vertical) {
-            border: 1px solid shade($bg_color, .8);
+            entry {
-            border-radius: $roundness;
+                // reset all the other props since the spinbutton node is styled here
-            background-color: shade($bg_color, 1.08);
+                border-radius: 0;
-            background-image: none;
-            color: $fg_color;
-            box-shadow: none;
-
-            &:hover {
-                border-color: shade($bg_color, .7);
-                background-color: shade($bg_color, 1.1);
-                background-image: none;
             }
 
-            &:active, &:checked {
+            button {
-                border-color: shade($bg_color, .8);
+                @extend %linked_middle;
-                background-color: shade($bg_color, .95);
-                background-image: none;
-            }
 
-            &:active:hover, &:checked:hover {
+                &:first-child { border-radius: $roundness 0 0 $roundness; }
-                border-color: shade($bg_color, .7);
-            }
 
-            &:focus, &:hover:focus, &:active:focus, &:active:hover:focus { border-color: shade($bg_color, .7); }
+                &:last-child { border-radius: 0 $roundness $roundness 0; }
-
-            &:disabled {
-                border-color: shade($bg_color, .85);
-                background-color: shade($bg_color, .9);
-                background-image: none;
-            }
-
-            &:first-child {
-                border-width: 1px;
-                border-bottom-width: 0;
-                border-bottom-right-radius: 0;
-                border-bottom-left-radius: 0;
-            }
-
-            &:last-child {
-                border-width: 1px;
-                border-top-width: 0;
-                border-top-left-radius: 0;
-                border-top-right-radius: 0;
             }
         }
 
-        spinbutton.vertical entry {
+        &.vertical {
-            border-width: 1px;
+            entry {
-            border-style: solid;
+                // reset all the other props since the spinbutton node is styled here
-            border-radius: 0;
+                border-radius: 0;
-        }
+            }
 
+            button {
+                @extend %linked_vertical_entry;
+
+                &:first-child {
+                    border-width: 1px;
+                    border-bottom-width: 0;
+                    border-bottom-right-radius: 0;
+                    border-bottom-left-radius: 0;
+                }
+
+                &:last-child {
+                    border-width: 1px;
+                    border-top-width: 0;
+                    border-top-left-radius: 0;
+                    border-top-right-radius: 0;
+                }
+            }
+        }
     }
 }
 

gtk-3.20/scss/widgets/_entry.scss

@@ -14,6 +14,11 @@
         border-right-width: 0;
         border-bottom-right-radius: 0;
         border-top-right-radius: 0;
+
+        &:dir(rtl) {
+            border-left-width: 0;
+            border-right-width: 1px;
+        }
     }
 
     &:last-child {
@@ -22,10 +27,18 @@
         border-left-width: 0;
         border-bottom-left-radius: 0;
         border-top-left-radius: 0;
+
+        &:dir(rtl) {
+            border-left-width: 1px;
+            border-right-width: 0;
+        }
+    }
+
+    &:only-child, &:first-child:only-child {
+        border-width: 1px;
     }
 
     &:only-child {
-        border-width: 1px;
         border-radius: $roundness;
     }
 }
@@ -39,21 +52,36 @@
     &:first-child {
         border-width: 1px;
         border-radius: $roundness;
+        border-top-width: 1px;
         border-bottom-width: 0;
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
+
+        &:dir(rtl) {
+            border-top-width: 0;
+            border-bottom-width: 1px;
+        }
     }
 
     &:last-child {
         border-width: 1px;
         border-radius: $roundness;
         border-top-width: 0;
+        border-bottom-width: 1px;
         border-top-left-radius: 0;
         border-top-right-radius: 0;
+
+        &:dir(rtl) {
+            border-top-width: 1px;
+            border-bottom-width: 0;
+        }
+    }
+
+    &:only-child, &:first-child:only-child {
+        border-width: 1px;
     }
 
     &:only-child {
-        border-width: 1px;
         border-radius: $roundness;
     }
 }
@@ -112,8 +140,48 @@
     entry {
         @include entry($base_color, $text_color);
 
-        &.linked, .linked & { @extend %linked_entry; }
+        .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.vertical, .linked.vertical & { @extend %linked_vertical_entry; }
+        .linked:not(.vertical) > &:drop(active) + &,
+        .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; }
+            }
+        }
     }
 }