clean up linked widget styling

1 files changed, 85 insertions, 242 deletions

diff --git a/common/gtk-3.0/3.18/sass/_common.scss b/common/gtk-3.0/3.18/sass/_common.scss
index 7b3c53a..d1efaa8 100644
--- a/common/gtk-3.0/3.18/sass/_common.scss
+++ b/common/gtk-3.0/3.18/sass/_common.scss
@@ -200,6 +200,8 @@ $vert_padding: 5px;
   @include entry(normal);
 
   &.image { // icons inside the entry
+    color: mix($fg_color,$base_color,80%);
+
     &.left { padding-left: 0; }
     &.right { padding-right: 0; }
   }
@@ -254,15 +256,17 @@ $vert_padding: 5px;
     }
   }
 
-  &.image { // entry icons colors
-    color: mix($fg_color,$base_color,80%);
-  }
-
   .osd & {
     @include entry(osd);
     &:focus { @include entry(osd-focus); }
     &:insensitive { @include entry(osd-insensitive); }
   }
+
+  .linked:not(.vertical) > &,
+  .linked:not(.vertical) > &:focus { @extend %linked; }
+
+  .linked.vertical > &,
+  .linked.vertical > &:focus { @extend %linked_vertical; }
 }
 
 GtkSearchEntry.entry { border-radius: 20px; }
@@ -356,48 +360,15 @@ $_dot_color: $selected_bg_color;
   //overlay / OSD style
   .osd & {
     @include button(osd);
-    // there's a problem with sass which prevents it to extend the linked
-    // placeholder as expected, it should just be "@extend %linked;", the
-    // placeholder is basically replicated here
-    //
-    // Workaround START
-    border-radius: 0;
-    border-left-style: none;
-    border-right-style: none;
-
-    &:dir(rtl) {
-      border-radius: 0;
-      border-right-style: none;
-      border-left-style: none
-    }
-    &:first-child {
-      border-radius: 3px 0 0 3px;
-      border-left-style: solid;
-    }
-    &:last-child {
-      border-radius: 0 3px 3px 0;
-      border-right-style: solid;
 
-      &:dir(rtl) { border-left-style: solid; }
-    }
-    &:only-child {
-      border-radius: 3px;
-      border-style: solid;
-    }
-    // Workaround END
-    &:hover {
-      @include button(osd-hover);
-      @extend %linked;
-    }
+    &:hover { @include button(osd-hover); }
     &:active, &:checked {
       background-clip: padding-box;
       @include button(osd-active);
-      @extend %linked;
-    }
-    &:insensitive {
-      @include button(osd-insensitive);
-      @extend %linked;
     }
+    &:insensitive { @include button(osd-insensitive); }
+
+    &, &:hover, &:active, &:checked, &:insensitive { @extend %linked; }
 
     &.flat {
       @include button(undecorated);
@@ -414,6 +385,9 @@ $_dot_color: $selected_bg_color;
       }
     }
   }
+  .osd .linked:not(.vertical):not(.path-bar) > &:hover:not(:checked):not(:active):not(:only-child),
+  .osd .linked:not(.vertical):not(.path-bar) > &:hover:not(:checked):not(:active) + &:not(:checked):not(:active) { box-shadow: none; }
+
   // Suggested and Destructive Action buttons
   @each $b_type, $b_color in (suggested-action, $suggested_color),
                              (destructive-action, $destructive_color) {
@@ -519,7 +493,6 @@ $_dot_color: $selected_bg_color;
   .linked:not(.vertical) > &:active,
   .linked:not(.vertical) > &:checked {
     @extend %linked;
-    @extend %linked_button;
   }
 
   .linked.vertical > &,
@@ -527,7 +500,6 @@ $_dot_color: $selected_bg_color;
   .linked.vertical > &:active,
   .linked.vertical > &:checked {
     @extend %linked_vertical;
-    @extend %linked_vertical_button;
   }
 }
 
@@ -553,137 +525,73 @@ $_dot_color: $selected_bg_color;
 }
 
 // Some crazy linking stuff
+@mixin linking_rules($a:0.7, $var:$variant, $vert:'false', $entry_rules:'true', $button_rules:'true',
+                     $e_border:$entry_border, $b_border:$button_border) {
 
-// horizontal
-.linked:not(.vertical):not(.pathbar) {
-  > .entry { @extend %linked; }
-
-
-  > .entry + .entry { border-left-color: transparentize($entry_border, 0.7); }
-
-  > .entry.error + .entry,
-  > .entry + .entry.error { border-left-color: if($variant=='light', $error_color, transparentize($entry_border, 0.7)); }
-
-  > .entry.warning + .entry,
-  > .entry + .entry.warning { border-left-color: if($variant=='light', $warning_color, transparentize($entry_border, 0.7)); }
-
-  > .entry.error + .entry.warning { border-left-color: if($variant=='light', $error_color, transparentize($entry_border, 0.7));}
-
-
-  > .entry + .entry:focus:not(:last-child),
-  > .entry + .entry:focus:last-child { border-left-color: if($variant=='light', $selected_bg_color, $entry_border); }
-
-  > .entry + .entry.warning:focus:not(:last-child),
-  > .entry + .entry.warning:focus:last-child { border-left-color: if($variant=='light', $warning_color, $entry_border); }
+  $_border: if($vert=='false', left, top);
 
-  > .entry + .entry.error:focus:not(:last-child),
-  > .entry + .entry.error:focus:last-child { border-left-color: if($variant=='light', $error_color, $entry_border); }
+  @if $entry_rules=='true' {
+    > .entry + .entry { border-#{$_border}-color: transparentize($e_border, $a); }
 
+    > .entry.error + .entry,
+    > .entry + .entry.error { border-#{$_border}-color: if($var=='light', $error_color, transparentize($e_border, $a)); }
 
-  > .entry + .button,
-  > .entry + .button:hover,
-  > .entry + .button:active,
-  > .entry + .button:checked,
-  > .entry + .button:insensitive { border-left-style: solid; }
+    > .entry.warning + .entry,
+    > .entry + .entry.warning { border-#{$_border}-color: if($var=='light', $warning_color, transparentize($e_border, $a)); }
 
+    > .entry.error + .entry.warning { border-#{$_border}-color: if($var=='light', $error_color, transparentize($e_border, $a));}
 
-  > .entry:focus:not(:only-child) + .entry,
-  > .entry:focus:not(:only-child) + .button,
-  > .entry:focus:not(:only-child) + GtkComboBox > .the-button-in-the-combobox,
-  > .entry:focus:not(:only-child) + GtkComboBoxText > .the-button-in-the-combobox { border-left-color: if($variant=='light', $selected_bg_color, $entry_border); }
+    @each $e_type, $e_color in ('',$selected_bg_color),
+                               ('.warning', $warning_color),
+                               ('.error', $error_color) {
 
-  > .entry.warning:focus:not(:only-child) + .entry,
-  > .entry.warning:focus:not(:only-child) + .button,
-  > .entry.warning:focus:not(:only-child) + GtkComboBox > .the-button-in-the-combobox,
-  > .entry.warning:focus:not(:only-child) + GtkComboBoxText > .the-button-in-the-combobox { border-left-color: if($variant=='light', $warning_color, $entry_border); }
+      > .entry + .entry#{$e_type}:focus:not(:last-child),
+      > .entry + .entry#{$e_type}:focus:last-child { border-#{$_border}-color: if($var=='light', $e_color, $e_border); }
 
-  > .entry.error:focus:not(:only-child) + .entry,
-  > .entry.error:focus:not(:only-child) + .button,
-  > .entry.error:focus:not(:only-child) + GtkComboBox > .the-button-in-the-combobox,
-  > .entry.error:focus:not(:only-child) + GtkComboBoxText > .the-button-in-the-combobox { border-left-color: if($variant=='light', $error_color, $entry_border); }
+      > .entry#{$e_type}:focus:not(:only-child) {
+        + .entry, + .button,
+        + GtkComboBox > .the-button-in-the-combobox,
+        + GtkComboBoxText > .the-button-in-the-combobox { border-#{$_border}-color: if($var=='light', $e_color, $e_border); }
+      }
+    }
+    > .button:checked + .entry { border-#{$_border}-color: if($var=='light', $selected_bg_color, $e_border); }
+  }
+  @if $button_rules=='true' {
+    > .button + .button { border-#{$_border}-style: none; }
 
+    > .button:hover:not(:checked):not(:active):not(:only-child),
+    > .button:hover:not(:checked):not(:active) + .button:not(:checked):not(:active) { box-shadow: inset if($vert=='false', 1px 0, 0 1px) $b_border; }
 
-  > .button:hover:not(:checked):not(:active):not(:only-child),
-  > .button:hover:not(:checked):not(:active) + .button:not(:checked):not(:active) { box-shadow: -1px 0 $button_border; }
-  > .button:first-child:hover:not(:checked):not(:active) { box-shadow: none; }
-  > .button:checked + .button:not(:checked):not(:active):hover { box-shadow: none; }
-  > .button:checked + .entry { border-left-color: if($variant=='light', $selected_bg_color, $entry_border); }
-  > .entry + .button:not(:checked):not(:active):hover { box-shadow: none; }
+    > .button:first-child:hover:not(:checked):not(:active),
+    > .button:checked + .button:not(:checked):not(:active):hover,
+    > .entry + .button:not(:checked):not(:active):hover { box-shadow: none; }
+  }
 }
 
-// special case for path-bars
-.linked:not(.vertical).path-bar {
+// special case, because path-bars are bugged
+@mixin pathbar_linking_rules($sep_color:if($variant=='light', transparentize($button_border, 0.6), transparentize($button_border, 0.5))) {
 
-$_linked_separator_color: if($variant=='light', transparentize($button_border, 0.6), transparentize($button_border, 0.5));
+    > .button + .button { border-left-style: none; }
 
-  > .button:hover:not(:checked):not(:active):not(:only-child) {
+    > .button:hover:not(:checked):not(:active):not(:only-child) {
 
-    &:hover {
-      box-shadow: inset  1px 0 $_linked_separator_color,
-                  inset -1px 0 $_linked_separator_color;
+      &:hover {
+        box-shadow: inset  1px 0 $sep_color,
+                    inset -1px 0 $sep_color;
+      }
+      &:first-child:hover { box-shadow: inset -1px 0 $sep_color; }
+      &:last-child:hover { box-shadow: inset 1px 0 $sep_color; }
     }
-    &:first-child:hover { box-shadow: inset -1px 0 $_linked_separator_color; }
-    &:last-child:hover { box-shadow: inset 1px 0 $_linked_separator_color; }
-  }
 }
 
-// vertical
-.linked.vertical {
-  > .entry { @extend %linked_vertical; }
-
-
-  > .entry + .entry { border-top-color: transparentize($entry_border, 0.7); }
-
-  > .entry.error + .entry,
-  > .entry + .entry.error { border-top-color: if($variant=='light', $error_color, transparentize($entry_border, 0.7)); }
-
-  > .entry.warning + .entry,
-  > .entry + .entry.warning { border-top-color: if($variant=='light', $warning_color, transparentize($entry_border, 0.7)); }
-
-  > .entry.error + .entry.warning { border-top-color: if($variant=='light', $error_color, transparentize($entry_border, 0.7));}
-
-
-  > .entry + .entry:focus:not(:last-child),
-  > .entry + .entry:focus:last-child { border-top-color: if($variant=='light', $selected_bg_color, $entry_border); }
-
-  > .entry + .entry.warning:focus:not(:last-child),
-  > .entry + .entry.warning:focus:last-child { border-top-color: if($variant=='light', $warning_color, $entry_border); }
-
-  > .entry + .entry.error:focus:not(:last-child),
-  > .entry + .entry.error:focus:last-child { border-top-color: if($variant=='light', $error_color, $entry_border); }
-
-
-  > .entry + .button,
-  > .entry + .button:hover,
-  > .entry + .button:active,
-  > .entry + .button:checked,
-  > .entry + .button:insensitive { border-top-style: solid; }
-
-
-  > .entry:focus:not(:only-child) + .entry,
-  > .entry:focus:not(:only-child) + .button,
-  > .entry:focus:not(:only-child) + GtkComboBox > .the-button-in-the-combobox,
-  > .entry:focus:not(:only-child) + GtkComboBoxText > .the-button-in-the-combobox { border-top-color: if($variant=='light', $selected_bg_color, $entry_border); }
-
-  > .entry.warning:focus:not(:only-child) + .entry,
-  > .entry.warning:focus:not(:only-child) + .button,
-  > .entry.warning:focus:not(:only-child) + GtkComboBox > .the-button-in-the-combobox,
-  > .entry.warning:focus:not(:only-child) + GtkComboBoxText > .the-button-in-the-combobox { border-top-color: if($variant=='light', $warning_color, $entry_border); }
-
-  > .entry.error:focus:not(:only-child) + .entry,
-  > .entry.error:focus:not(:only-child) + .button,
-  > .entry.error:focus:not(:only-child) + GtkComboBox > .the-button-in-the-combobox,
-  > .entry.error:focus:not(:only-child) + GtkComboBoxText > .the-button-in-the-combobox { border-top-color: if($variant=='light', $error_color, $entry_border); }
-
-
-  > .button:hover:not(:checked):not(:active):not(:only-child),
-  > .button:hover:not(:checked):not(:active) + .button:not(:checked):not(:active) { box-shadow: 0 -1px $button_border; }
-  > .button:first-child:hover:not(:checked):not(:active) { box-shadow: none; }
-  > .button:checked + .button:not(:checked):not(:active):hover { box-shadow: none; }
-  > .button:checked + .entry { border-top-color: if($variant=='light', $selected_bg_color, $entry_border); }
-  > .entry + .button:not(:checked):not(:active):hover { box-shadow: none; }
+// Apply the rules defined above
+.linked:not(.vertical) {
+  &:not(.path-bar) { @include linking_rules(); }
+  &.path-bar { @include pathbar_linking_rules(); }
 }
 
+.linked.vertical { @include linking_rules($vert:'true'); }
+
 %linked_middle {
   border-radius: 0;
   border-right-style: none;
@@ -728,16 +636,6 @@ $_linked_separator_color: if($variant=='light', transparentize($button_border, 0
   }
 }
 
-%linked_button {
-  border-left-style: none;
-  &:first-child { border-left-style: solid; }
-}
-
-%linked_vertical_button {
-  border-top-style: none;
-  &:first-child { border-top-style: solid; }
-}
-
 %undecorated_button {
   border-color: transparent;
   background-color: transparent;
@@ -1259,6 +1157,8 @@ GtkComboBox {
   }
 
   // Linking stuff
+
+  // Reset buttons
   .linked:not(.vertical):not(.path-bar) > .button,
   .linked:not(.vertical):not(.path-bar) > .button:hover,
   .linked:not(.vertical):not(.path-bar) > .button:active,
@@ -1266,92 +1166,35 @@ GtkComboBox {
   .linked:not(.vertical):not(.path-bar) > .button:insensitive {
     border-radius: 3px;
     border-style: solid;
-    
   }
-  .linked:not(.vertical):not(.path-bar) > .button:hover:not(:checked):not(:active):not(:only-child),
-  .linked:not(.vertical):not(.path-bar) > .button:hover:not(:checked):not(:active) + .button:not(:checked):not(:active),
-  .linked:not(.vertical).path-bar > .button:hover:not(:checked):not(:active):not(:only-child),
-  .linked:not(.vertical).path-bar > .button:hover:not(:checked):not(:active) + .button:not(:checked):not(:active) { box-shadow: none; }
-
-  // special case for path-bars and stack-switchers
-  .linked:not(.vertical):not(.path-bar).stack-switcher > .button,
-  .linked:not(.vertical).path-bar > .button {
-
-    @include button(header-hover);
-
-    &:hover { background-color: lighten($header_button_bg, 15%); }
-    &:active, &:checked { @include button(header-active); }
-    &:insensitive { color: transparentize($header_fg, 0.4); }
-  }
-
-  .linked:not(.vertical):not(.path-bar).stack-switcher > .button,
-  .linked:not(.vertical).path-bar > .button,
-  .linked:not(.vertical):not(.path-bar).stack-switcher > .button:hover,
-  .linked:not(.vertical).path-bar > .button:hover,
-  .linked:not(.vertical):not(.path-bar).stack-switcher > .button:active,
-  .linked:not(.vertical).path-bar > .button:active,
-  .linked:not(.vertical):not(.path-bar).stack-switcher > .button:checked,
-  .linked:not(.vertical).path-bar > .button:checked,
-  .linked:not(.vertical):not(.path-bar).stack-switcher > .button:insensitive,
-  .linked:not(.vertical).path-bar > .button:insensitive {
-    @extend %linked;
-    @extend %linked_button;
+  .linked:not(.vertical):not(.path-bar), .linked:not(.vertical).path-bar {
+    > .button:hover:not(:checked):not(:active):not(:only-child),
+    > .button:hover:not(:checked):not(:active) + .button:not(:checked):not(:active) { box-shadow: none; }
   }
 
-  .linked:not(.vertical).path-bar,
-  .linked:not(.vertical):not(.path-bar).stack-switcher {
+  // special case for path-bars and stack-switchers
+  .linked:not(.vertical):not(.path-bar).stack-switcher,
+  .linked:not(.vertical).path-bar {
 
-    $_linked_separator_color: $header_button_border;
+    > .button {
+      @include button(header-hover);
 
-    > .button:hover:not(:checked):not(:active):not(:only-child) {
+      &:hover { background-color: lighten($header_button_bg, 15%); }
+      &:active, &:checked { @include button(header-active); }
+      &:insensitive { color: transparentize($header_fg, 0.4); }
 
-      &:hover {
-        box-shadow: inset  1px 0 $_linked_separator_color,
-                    inset -1px 0 $_linked_separator_color;
-      }
-      &:first-child:hover { box-shadow: inset -1px 0 $_linked_separator_color; }
-      &:last-child:hover { box-shadow: inset 1px 0 $_linked_separator_color; }
+      &, &:hover, &:active, &:checked, &:insensitive { @extend %linked; }
     }
-  }
-
-  .linked:not(.vertical):not(.pathbar) {
-
-    > .entry + .entry { border-left-color: transparentize($header_entry_border, 0.5); }
-
-    > .entry.error + .entry,
-    > .entry + .entry.error { border-left-color: if($variant=='light', $error_color, transparentize($header_entry_border, 0.5)); }
-
-    > .entry.warning + .entry,
-    > .entry + .entry.warning { border-left-color: if($variant=='light', $warning_color, transparentize($header_entry_border, 0.5)); }
-
-    > .entry.error + .entry.warning { border-left-color: if($variant=='light', $error_color, transparentize($header_entry_border, 0.5));}
-
-
-    > .entry + .entry:focus:not(:last-child),
-    > .entry + .entry:focus:last-child { border-left-color: if($darker=='false' and $variant=='light', $selected_bg_color, $header_entry_border); }
-
-    > .entry + .entry.warning:focus:not(:last-child),
-    > .entry + .entry.warning:focus:last-child { border-left-color: if($variant=='light', $warning_color, $header_entry_border); }
-
-    > .entry + .entry.error:focus:not(:last-child),
-    > .entry + .entry.error:focus:last-child { border-left-color: if($variant=='light', $error_color, $header_entry_border); }
-
-
-    > .entry:focus:not(:only-child) + .entry,
-    > .entry:focus:not(:only-child) + .button,
-    > .entry:focus:not(:only-child) + GtkComboBox > .the-button-in-the-combobox,
-    > .entry:focus:not(:only-child) + GtkComboBoxText > .the-button-in-the-combobox { border-left-color:  if($darker=='false' and $variant=='light', $selected_bg_color, $header_entry_border); }
-
-    > .entry.warning:focus:not(:only-child) + .entry,
-    > .entry.warning:focus:not(:only-child) + .button,
-    > .entry.warning:focus:not(:only-child) + GtkComboBox > .the-button-in-the-combobox,
-    > .entry.warning:focus:not(:only-child) + GtkComboBoxText > .the-button-in-the-combobox { border-left-color: if($variant=='light', $warning_color, $header_entry_border); }
-
-    > .entry.error:focus:not(:only-child) + .entry,
-    > .entry.error:focus:not(:only-child) + .button,
-    > .entry.error:focus:not(:only-child) + GtkComboBox > .the-button-in-the-combobox,
-    > .entry.error:focus:not(:only-child) + GtkComboBoxText > .the-button-in-the-combobox { border-left-color: if($variant=='light', $error_color, $header_entry_border); }
 
+    @include pathbar_linking_rules($sep_color:$header_button_border);
+  }
+  // use linking rules for entries only
+  .linked:not(.vertical):not(.path-bar) {
+    @include linking_rules( $a:0.5,
+                            $var:if($variant=='light' and $darker=='false', 'light', 'dark'),
+                            $button_rules:'false',
+                            $e_border:$header_entry_border,
+                            $b_border:$header_button_border );
   }
 
   // Headerbar Suggested and Destructive Action buttons