[gtk+] HC: vertical linked buttons,entries & combos

[Jakub Steiner <jimmac src gnome org>]

commit 3eaaf12c049cc3b2d3ec2bd5dac787ca1f199906
Author: Jakub Steiner <jimmac gmail com>
Date:   Mon Dec 1 17:45:26 2014 +0100

    HC: vertical linked buttons,entries & combos
    
    https://bugzilla.gnome.org/show_bug.cgi?id=740860

 gtk/theme/HighContrast/_common.scss |  104 ++++++++++++++++++++++++-
 gtk/theme/HighContrast/gtk.css      |  143 ++++++++++++++++++++++++++++++++++-
 2 files changed, 242 insertions(+), 5 deletions(-)
---
diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index 173cf3c..9400929 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -225,6 +225,80 @@ GtkLabel {
       &:dir(rtl) { border-left-style: solid; }
     }
   }
+  .linked.vertical & { //FIXME comment stuff and make the whole thing smarter.
+    @include entry(normal);
+    background-image: linear-gradient(to bottom, $base_color);
+    border-bottom-color: mix($borders_color, $base_color, 30%);
+    box-shadow: none;
+    @extend %linked_vertical;
+    &:focus {
+      border-color: entry_focus_border($selected_bg_color);
+      box-shadow: entry_focus_glow($selected_bg_color),
+                  0 -1px 0 0 entry_focus_border($selected_bg_color);
+      @extend %linked_vertical;
+    }
+    &:insensitive {
+      @include entry(insensitive);
+      border-bottom-color: mix($borders_color, $base_color, 30%);
+      @extend %linked_vertical;
+      &:backdrop {
+        @include entry(backdrop-insensitive);
+        border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
+        @extend %linked_vertical;
+      }
+    }
+    &:backdrop {
+      @include entry(backdrop);
+      border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
+      @extend %linked_vertical;
+    }
+    &:first-child {
+      @include entry(normal);
+      border-bottom-color: mix($borders_color, $base_color, 30%);
+      &:focus { @include entry(focus); }
+      &:insensitive {
+        @include entry(insensitive);
+        border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
+        @extend %linked_vertical:first-child;
+        &:backdrop {
+          @include entry(backdrop-insensitive);
+          border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
+          border-top-style: solid;
+        }
+      }
+      &:backdrop {
+        @include entry(backdrop);
+        border-bottom-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
+        @extend %linked_vertical:first-child;
+      }
+    }
+    &:last-child {
+      @include entry(normal);
+      border-top-width: 0;
+      background-image: linear-gradient(to bottom, $base_color);
+      box-shadow: none;
+      &:focus {
+        border-color: entry_focus_border($selected_bg_color);
+        box-shadow: entry_focus_glow($selected_bg_color),
+                    0 -1px 0 0 entry_focus_border($selected_bg_color),
+                    _widget_edge();
+        @extend %linked_vertical:last-child;
+      }
+      &:insensitive {
+        @include entry(insensitive);
+        @extend %linked_vertical:last-child;
+        &:backdrop {
+          @include entry(backdrop-insensitive);
+          @extend %linked_vertical:last-child;
+        }
+      }
+      &:backdrop {
+        @include entry(backdrop);
+        @extend %linked_vertical:last-child;
+      }
+    }
+  }
+  
   &.error {
     color: $error_color;
     border-color: $error_color;
@@ -348,9 +422,17 @@ GtkLabel {
 //    -GtkWidget-wide-separators: true;
 //    -GtkWidget-horizontal-separator: 0;
 //   }
-  .linked &, .linked &:backdrop {
-    @extend %linked;
-  }
+  .linked &,
+  .linked &:hover,
+  .linked &:active,
+  .linked &:checked,
+  .linked &:backdrop { @extend %linked; }
+
+  .linked.vertical &,
+  .linked.vertical &:hover,
+  .linked.vertical &:active,
+  .linked.vertical &:checked,
+  .linked.vertical &:backdrop { @extend %linked_vertical; }
 }
 
 // all the following is for the +|- buttons on inline toolbars, that way
@@ -419,9 +501,14 @@ GtkLabel {
   }
 }
 
-%linked_vertical{
+%linked_vertical_middle {
   border-left-style: solid;
   border-top-style: none;
+  border-radius: 0;
+}
+
+%linked_vertical{
+  @extend %linked_vertical_middle;
   &:first-child {
     border-style: solid;
     border-radius: 3px 3px 0 0;
@@ -668,6 +755,15 @@ GtkComboBox {
   @extend %linked:only-child;
 }
 
+.linked.vertical > GtkComboBoxText > .button,
+.linked.vertical > GtkComboBox > .button { @extend %linked_vertical_middle; }
+.linked.vertical > GtkComboBoxText:first-child > .button,
+.linked.vertical > GtkComboBox:first-child > .button { @extend %linked_vertical:first-child; }
+.linked.vertical > GtkComboBoxText:last-child > .button,
+.linked.vertical > GtkComboBox:last-child > .button { @extend %linked_vertical:last-child; }
+.linked.vertical > GtkComboBoxText:only-child > .button,
+.linked.vertical > GtkComboBox:only-child > .button { @extend %linked_vertical:only-child; }
+
 /************
  * Toolbars *
  ************/
diff --git a/gtk/theme/HighContrast/gtk.css b/gtk/theme/HighContrast/gtk.css
index ca6cf68..3abb40f 100644
--- a/gtk/theme/HighContrast/gtk.css
+++ b/gtk/theme/HighContrast/gtk.css
@@ -271,6 +271,129 @@
     border-left-style: none; }
     .linked .entry:last-child:dir(rtl) {
       border-left-style: solid; }
+  .linked.vertical .entry {
+    background-color: transparent;
+    border-style: solid;
+    border-width: 1px;
+    background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
+    border-color: #7f7f7f;
+    box-shadow: inset 0 2px 2px -2px #7f7f7f, 0 1px #fff;
+    background-image: linear-gradient(to bottom, #fff);
+    border-bottom-color: #d8d8d8;
+    box-shadow: none; }
+    .linked.vertical .entry:focus {
+      border-color: entry_focus_border(#000);
+      box-shadow: entry_focus_glow(#000), 0 -1px 0 0 entry_focus_border(#000); }
+    .linked.vertical .entry:insensitive {
+      background-color: transparent;
+      border-style: solid;
+      border-width: 1px;
+      background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
+      color: #7f7f7f;
+      border-color: #7f7f7f;
+      background-image: linear-gradient(to bottom, white);
+      box-shadow: 0 1px #fff;
+      border-bottom-color: #d8d8d8; }
+      .linked.vertical .entry:insensitive:backdrop {
+        background-color: transparent;
+        border-style: solid;
+        border-width: 1px;
+        background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
+        color: #7f7f7f;
+        background-image: linear-gradient(to bottom, #fff);
+        box-shadow: 0 1px rgba(255, 255, 255, 0);
+        border-bottom-color: gainsboro; }
+    .linked.vertical .entry:backdrop {
+      background-color: transparent;
+      border-style: solid;
+      border-width: 1px;
+      background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
+      color: #000;
+      background-image: linear-gradient(to bottom, #fff);
+      box-shadow: 0 1px rgba(255, 255, 255, 0);
+      border-bottom-color: gainsboro; }
+    .linked.vertical .entry:first-child {
+      background-color: transparent;
+      border-style: solid;
+      border-width: 1px;
+      background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
+      border-color: #7f7f7f;
+      box-shadow: inset 0 2px 2px -2px #7f7f7f, 0 1px #fff;
+      border-bottom-color: #d8d8d8; }
+      .linked.vertical .entry:first-child:focus {
+        background-color: transparent;
+        border-style: solid;
+        border-width: 1px;
+        background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
+        border-color: #000;
+        box-shadow: inset 0 2px 2px -2px #7f7f7f, inset 0 0 2px 1px #cccccc, 0 1px #fff; }
+      .linked.vertical .entry:first-child:insensitive {
+        background-color: transparent;
+        border-style: solid;
+        border-width: 1px;
+        background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
+        color: #7f7f7f;
+        border-color: #7f7f7f;
+        background-image: linear-gradient(to bottom, white);
+        box-shadow: 0 1px #fff;
+        border-bottom-color: gainsboro; }
+        .linked.vertical .entry:first-child:insensitive:backdrop {
+          background-color: transparent;
+          border-style: solid;
+          border-width: 1px;
+          background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
+          color: #7f7f7f;
+          background-image: linear-gradient(to bottom, #fff);
+          box-shadow: 0 1px rgba(255, 255, 255, 0);
+          border-bottom-color: gainsboro;
+          border-top-style: solid; }
+      .linked.vertical .entry:first-child:backdrop {
+        background-color: transparent;
+        border-style: solid;
+        border-width: 1px;
+        background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
+        color: #000;
+        background-image: linear-gradient(to bottom, #fff);
+        box-shadow: 0 1px rgba(255, 255, 255, 0);
+        border-bottom-color: gainsboro; }
+    .linked.vertical .entry:last-child {
+      background-color: transparent;
+      border-style: solid;
+      border-width: 1px;
+      background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
+      border-color: #7f7f7f;
+      box-shadow: inset 0 2px 2px -2px #7f7f7f, 0 1px #fff;
+      border-top-width: 0;
+      background-image: linear-gradient(to bottom, #fff);
+      box-shadow: none; }
+      .linked.vertical .entry:last-child:focus {
+        border-color: entry_focus_border(#000);
+        box-shadow: entry_focus_glow(#000), 0 -1px 0 0 entry_focus_border(#000), _widget_edge(); }
+      .linked.vertical .entry:last-child:insensitive {
+        background-color: transparent;
+        border-style: solid;
+        border-width: 1px;
+        background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
+        color: #7f7f7f;
+        border-color: #7f7f7f;
+        background-image: linear-gradient(to bottom, white);
+        box-shadow: 0 1px #fff; }
+        .linked.vertical .entry:last-child:insensitive:backdrop {
+          background-color: transparent;
+          border-style: solid;
+          border-width: 1px;
+          background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
+          color: #7f7f7f;
+          background-image: linear-gradient(to bottom, #fff);
+          box-shadow: 0 1px rgba(255, 255, 255, 0); }
+      .linked.vertical .entry:last-child:backdrop {
+        background-color: transparent;
+        border-style: solid;
+        border-width: 1px;
+        background-image: linear-gradient(to bottom, #f7f7f7, #fff 90%);
+        color: #000;
+        background-image: linear-gradient(to bottom, #fff);
+        box-shadow: 0 1px rgba(255, 255, 255, 0); }
   .entry.error {
     color: #cc0000;
     border-color: #cc0000; }
@@ -554,7 +677,7 @@
   border-radius: 3px;
   border-style: solid; }
 
-.osd .button, .osd .button:hover, .osd .button:active, .osd .button:checked, .osd .button:insensitive, .osd 
.button:backdrop, .inline-toolbar .button, .inline-toolbar .button:backdrop, .linked .button, .linked 
.button:backdrop, .linked > GtkComboBox > .button:dir(ltr) {
+.osd .button, .osd .button:hover, .osd .button:active, .osd .button:checked, .osd .button:insensitive, .osd 
.button:backdrop, .inline-toolbar .button, .inline-toolbar .button:backdrop, .linked .button, .linked 
.button:hover, .linked .button:active, .linked .button:checked, .linked .button:backdrop, .linked > 
GtkComboBox > .button:dir(ltr) {
   border-radius: 0;
   border-left-style: none; }
   .osd .button:dir(rtl), .inline-toolbar .button:dir(rtl), .linked .button:dir(rtl), .linked > GtkComboBox > 
.button:dir(rtl) {
@@ -573,6 +696,24 @@
   border-radius: 3px;
   border-style: solid; }
 
+.linked.vertical .entry, .linked.vertical .entry:focus, .linked.vertical .entry:insensitive, 
.linked.vertical .entry:insensitive:backdrop, .linked.vertical .entry:backdrop, .linked.vertical .button, 
.linked.vertical .button:hover, .linked.vertical .button:active, .linked.vertical .button:checked, 
.linked.vertical .button:backdrop, .linked.vertical > GtkComboBoxText > .button,
+.linked.vertical > GtkComboBox > .button {
+  border-left-style: solid;
+  border-top-style: none;
+  border-radius: 0; }
+
+.linked.vertical .entry:first-child, .linked.vertical .button:first-child, .linked.vertical > 
GtkComboBoxText:first-child > .button,
+.linked.vertical > GtkComboBox:first-child > .button {
+  border-style: solid;
+  border-radius: 3px 3px 0 0; }
+.linked.vertical .entry:last-child, .linked.vertical .button:last-child, .linked.vertical > 
GtkComboBoxText:last-child > .button,
+.linked.vertical > GtkComboBox:last-child > .button {
+  border-radius: 0 0 3px 3px; }
+.linked.vertical .entry:only-child, .linked.vertical .button:only-child, .linked.vertical > 
GtkComboBoxText:only-child > .button,
+.linked.vertical > GtkComboBox:only-child > .button {
+  border-radius: 3px;
+  border-style: solid; }
+
 .button.flat, .button.flat:backdrop, .menuitem.button.flat, .menuitem.button.flat:backdrop, 
.menuitem.button.flat:backdrop:hover, .button:link, .button:visited, .button:link:hover, .button:link:active, 
.button:visited:hover, .button:visited:active, .button:link:backdrop, .button:visited:backdrop, .notebook tab 
.button, .list-row.button, .list-row.button:backdrop:hover, GtkCalendar.button, GtkCalendar.button:hover, 
GtkCalendar.button:backdrop, GtkCalendar.button:backdrop:hover {
   border-color: transparent;
   background-color: transparent;