[gtk+] HighContrast: insensitive backdrop list rows have a border

[Jakub Steiner <jimmac src gnome org>]

commit 26e8037cf901313c959d4f6795dd138dc7b051a1
Author: Jakub Steiner <jimmac gmail com>
Date:   Fri Apr 10 15:13:12 2015 +0200

    HighContrast: insensitive backdrop list rows have a border
    
    https://bugzilla.gnome.org/show_bug.cgi?id=747288

 gtk/theme/HighContrast/_common.scss |   87 +++++++++++++++++++++----
 gtk/theme/HighContrast/gtk.css      |  124 ++++++++++++++++++++++++++++++++---
 2 files changed, 190 insertions(+), 21 deletions(-)
---
diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index 81b608d..f040a9f 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -2,6 +2,8 @@
   @return unquote("alpha(#{$c},#{$a})");
 }
 
+$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+
 * {
   padding: 0;
   -GtkToolButton-icon-spacing: 4;
@@ -570,7 +572,6 @@ $_dot_color: $selected_bg_color;
   border-color: transparent;
   background-color: transparent;
   background-image: none;
-  box-shadow: inset 0 1px transparentize(white,1);
   text-shadow: none;
   icon-shadow: none;
 }
@@ -1466,7 +1467,7 @@ GtkSwitch {
                     inset 0 -2px transparentize($bg_color,0.4),
                     inset 0 -1px mix($bg_color,$borders_color,50%);
       }
-      &:active { border: 1px solid $selected_borders_color; }
+      &:active { border-color: $selected_borders_color; }
       &:insensitive { @include button(insensitive, $edge: none); }
       &:backdrop { @include button(backdrop);
         &:active{ border-color: $selected_bg_color; }
@@ -1804,6 +1805,24 @@ GtkScrolledWindow {
   padding: 2px;
 }
 
+.list-row.button,
+.list-row.button:backdrop,
+.list-row.button:backdrop:active,
+.list-row.button:backdrop:checked,
+.list-row.button:backdrop:insensitive,
+.list-row.button:backdrop:insensitive:active,
+.list-row.button:backdrop:insensitive:checked,
+.list-row.button:insensitive:active,
+.list-row.button:insensitive:checked {
+  // reset button inherited stuff
+  @extend %undecorated_button;
+  background-color: transparentize($base_color,1); // for the transition
+  border-style: none; // I need no borders here
+  border-radius: 0;   // and no rounded corners
+  box-shadow: none;   // and no box-shadow
+
+}
+
 .list-row.button {
   @extend %undecorated_button;
   background-color: transparentize($base_color,1); // for the transition
@@ -1811,28 +1830,72 @@ GtkScrolledWindow {
   border-radius: 0;   // and no rounded corners
   box-shadow: none;   // and no box-shadow
   &:hover {
-    background-color: mix(black, $base_color, 5%);
+    background-color: mix($fg_color, $base_color, 5%);
   }
   &:active {
-    box-shadow: inset 0 2px 2px -2px transparentize(black,0.8);
+    box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8);
   }
   &:selected {
-    &:active { box-shadow: inset 0 2px 3px -1px transparentize(black,0.5); }
+    &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
     &:hover {
-      background-color: mix(black, $selected_bg_color, 10%);
+      background-color: mix($fg_color, $selected_bg_color, 10%);
     }
-  }
-  &:backdrop:hover {
-    @extend %undecorated_button;
+    &:backdrop { background-color: $selected_bg_color; }
   }
 }
 
 .list-row:selected {
-  background-color: $selected_bg_color;
-  color: $selected_fg_color;
-  &:backdrop { color: $backdrop_base_color;}
+  @extend %selected_items;
+  .button {
+    @include button(normal, $edge:none);
+    border-color: $selected_borders_color;
+    &.flat {
+      @include button(undecorated, $edge:none);
+      color: $selected_fg_color;
+    }
+    &:hover {
+      @include button(hover, $edge:none);
+      border-color: $selected_borders_color;
+    }
+    &:active, &:checked {
+      @include button(active, $edge:none);
+      border-color: $selected_borders_color;
+    }
+    &:backdrop, &.flat:backdrop {
+      @include button(backdrop, $edge:none);
+      border-color: $selected_borders_color;
+      &:active, &:checked {
+        @include button(backdrop-active, $edge:none);
+        border-color: $selected_borders_color;
+      }
+      &:insensitive {
+        @include button(backdrop-insensitive, $edge:none);
+        border-color: $selected_borders_color;
+        &:active, &:checked {
+          @include button(backdrop-insensitive-active, $edge:none);
+          border-color: $selected_borders_color;
+        }
+      }
+    }
+    &.flat:backdrop {
+      @include button(undecorated);
+      color: $backdrop_base_color;
+    }
+    &:insensitive {
+      @include button(insensitive, $edge:none);
+      border-color: $selected_borders_color;
+      &:active, &:checked { @include button(insensitive-active, $edge:none); }
+    }
+  }
+}
+
+// transition
+.list-row, list-row.button {
+  transition: all 300ms $ease-out-quad;
+  &:hover { transition: none; }
 }
 
+
 /*********************
  * App Notifications *
  *********************/
diff --git a/gtk/theme/HighContrast/gtk.css b/gtk/theme/HighContrast/gtk.css
index 43241e7..56118d1 100644
--- a/gtk/theme/HighContrast/gtk.css
+++ b/gtk/theme/HighContrast/gtk.css
@@ -766,11 +766,18 @@
   border-radius: 3px;
   border-style: solid; }
 
-.button.flat, .button.flat:backdrop, .button.flat:insensitive:backdrop, .menuitem.button.flat, 
.menuitem.button.flat:backdrop, .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 {
+.button.flat, .button.flat:backdrop, .button.flat:insensitive:backdrop, .menuitem.button.flat, 
.menuitem.button.flat:backdrop, .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,
+.list-row.button:backdrop:active,
+.list-row.button:backdrop:checked,
+.list-row.button:backdrop:insensitive,
+.list-row.button:backdrop:insensitive:active,
+.list-row.button:backdrop:insensitive:checked,
+.list-row.button:insensitive:active,
+.list-row.button:insensitive:checked, GtkCalendar.button, GtkCalendar.button:hover, 
GtkCalendar.button:backdrop, GtkCalendar.button:backdrop:hover {
   border-color: transparent;
   background-color: transparent;
   background-image: none;
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0);
   text-shadow: none;
   icon-shadow: none; }
 
@@ -1665,7 +1672,7 @@ GtkSwitch {
       background-image: none;
       box-shadow: inset 0 1px white, inset 0 -2px rgba(255, 255, 255, 0.6), inset 0 -1px #bfbfbf; }
     GtkSwitch.slider:active {
-      border: 1px solid #000; }
+      border-color: #000; }
     GtkSwitch.slider:insensitive {
       border-width: 2px;
       border-style: solid;
@@ -1975,11 +1982,11 @@ GtkLevelBar.vertical {
     .level-bar.fill-block.empty-fill-block:backdrop {
       border-color: rgba(0, 0, 0, 0.15); }
 
-.view:selected, GtkCalendar:selected, .view:selected:focus, GtkCalendar:focus:selected, 
.view:selected:hover, GtkCalendar:hover:selected, .label:selected, .label:selected:focus, 
.label:selected:hover, .label:backdrop:selected, .entry:selected, .entry:selected:focus, 
.menuitem.button.flat:hover, .menuitem.button.flat:selected, .sidebar:selected, GtkPlacesSidebar.sidebar 
.view:selected, GtkPlacesSidebar.sidebar GtkCalendar:selected {
+.view:selected, GtkCalendar:selected, .view:selected:focus, GtkCalendar:focus:selected, 
.view:selected:hover, GtkCalendar:hover:selected, .label:selected, .label:selected:focus, 
.label:selected:hover, .label:backdrop:selected, .entry:selected, .entry:selected:focus, 
.menuitem.button.flat:hover, .menuitem.button.flat:selected, .list-row:selected, .sidebar:selected, 
GtkPlacesSidebar.sidebar .view:selected, GtkPlacesSidebar.sidebar GtkCalendar:selected {
   background-color: #000;
   color: #fff;
   outline-color: rgba(255, 255, 255, 0.3); }
-  .view:backdrop:selected, GtkCalendar:backdrop:selected, GtkCalendar:backdrop:focus:selected, 
GtkCalendar:backdrop:hover:selected, .label:backdrop:selected, .entry:backdrop:selected, 
.menuitem.button.flat:backdrop:hover, .menuitem.button.flat:backdrop:selected, .sidebar:backdrop:selected, 
GtkPlacesSidebar.sidebar .view:backdrop:selected, GtkPlacesSidebar.sidebar GtkCalendar:backdrop:selected {
+  .view:backdrop:selected, GtkCalendar:backdrop:selected, GtkCalendar:backdrop:focus:selected, 
GtkCalendar:backdrop:hover:selected, .label:backdrop:selected, .entry:backdrop:selected, 
.menuitem.button.flat:backdrop:hover, .menuitem.button.flat:backdrop:selected, .list-row:backdrop:selected, 
.sidebar:backdrop:selected, GtkPlacesSidebar.sidebar .view:backdrop:selected, GtkPlacesSidebar.sidebar 
GtkCalendar:backdrop:selected {
     background-color: #7f7f7f;
     color: #fff; }
 
@@ -2022,6 +2029,20 @@ GtkPlacesSidebar.sidebar .view .separator:backdrop {
 .grid-child {
   padding: 2px; }
 
+.list-row.button,
+.list-row.button:backdrop,
+.list-row.button:backdrop:active,
+.list-row.button:backdrop:checked,
+.list-row.button:backdrop:insensitive,
+.list-row.button:backdrop:insensitive:active,
+.list-row.button:backdrop:insensitive:checked,
+.list-row.button:insensitive:active,
+.list-row.button:insensitive:checked {
+  background-color: rgba(255, 255, 255, 0);
+  border-style: none;
+  border-radius: 0;
+  box-shadow: none; }
+
 .list-row.button {
   background-color: rgba(255, 255, 255, 0);
   border-style: none;
@@ -2035,12 +2056,97 @@ GtkPlacesSidebar.sidebar .view .separator:backdrop {
     box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); }
   .list-row.button:selected:hover {
     background-color: black; }
+  .list-row.button:selected:backdrop {
+    background-color: #000; }
 
-.list-row:selected {
-  background-color: #000;
-  color: #fff; }
-  .list-row:selected:backdrop {
+.list-row:selected .button {
+  border-width: 2px;
+  border-style: solid;
+  color: #000;
+  background-image: none;
+  background-color: #fff;
+  border-color: #7f7f7f;
+  border-color: #000; }
+  .list-row:selected .button.flat {
+    border-width: 2px;
+    border-style: solid;
+    color: #fff; }
+  .list-row:selected .button:hover {
+    border-width: 2px;
+    border-style: solid;
+    color: #000;
+    background-color: #fff;
+    border-color: #7f7f7f;
+    background-image: none;
+    border-color: #000; }
+  .list-row:selected .button:active, .list-row:selected .button:checked {
+    border-width: 2px;
+    border-style: solid;
+    background-image: none;
+    color: white;
+    background-color: black;
+    border-color: #7f7f7f;
+    border-color: #000; }
+  .list-row:selected .button:backdrop, .list-row:selected .button.flat:backdrop {
+    border-width: 2px;
+    border-style: solid;
+    color: #000;
+    background-color: #fff;
+    border-color: #8b8b8b;
+    background-image: none;
+    text-shadow: none;
+    icon-shadow: none;
+    border-color: #000; }
+    .list-row:selected .button:backdrop:active, .list-row:selected .button:backdrop:checked, 
.list-row:selected .button.flat:backdrop:active, .list-row:selected .button.flat:backdrop:checked {
+      border-width: 2px;
+      border-style: solid;
+      color: white;
+      background-color: #8b8b8b;
+      border-color: #8b8b8b;
+      background-image: none;
+      border-color: #000; }
+    .list-row:selected .button:backdrop:insensitive, .list-row:selected .button.flat:backdrop:insensitive {
+      border-width: 2px;
+      border-style: solid;
+      color: #7f7f7f;
+      background-color: white;
+      border-color: #8b8b8b;
+      background-image: none;
+      border-color: #000; }
+      .list-row:selected .button:backdrop:insensitive:active, .list-row:selected 
.button:backdrop:insensitive:checked, .list-row:selected .button.flat:backdrop:insensitive:active, 
.list-row:selected .button.flat:backdrop:insensitive:checked {
+        border-width: 2px;
+        border-style: solid;
+        color: #7f7f7f;
+        border-color: #8b8b8b;
+        background-image: none;
+        background-color: whitesmoke;
+        border-color: #000; }
+  .list-row:selected .button.flat:backdrop {
+    border-width: 2px;
+    border-style: solid;
     color: #fff; }
+  .list-row:selected .button:insensitive {
+    border-width: 2px;
+    border-style: solid;
+    color: #7f7f7f;
+    background-color: white;
+    border-color: #7f7f7f;
+    background-image: none;
+    text-shadow: none;
+    icon-shadow: none;
+    border-color: #000; }
+    .list-row:selected .button:insensitive:active, .list-row:selected .button:insensitive:checked {
+      border-width: 2px;
+      border-style: solid;
+      color: #7f7f7f;
+      border-color: #7f7f7f;
+      background-image: none;
+      background-color: white; }
+
+.list-row, list-row.button {
+  transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
+  .list-row:hover, list-row.button:hover {
+    transition: none; }
 
 /*********************
  * App Notifications *