[gtk+] Adwaita: places sidebar selected button fix and refactor

[Lapo Calamandrei <lapo src gnome org>]

commit bbced9a0cf3b7e8690cfb6ff4debf46d7c47e54d
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Mon Mar 14 17:22:31 2016 +0100

    Adwaita: places sidebar selected button fix and refactor

 gtk/theme/Adwaita/_common.scss           |   62 ++++++++++++++++--------------
 gtk/theme/Adwaita/gtk-contained-dark.css |   54 +++++++++-----------------
 gtk/theme/Adwaita/gtk-contained.css      |   58 ++++++++++------------------
 3 files changed, 73 insertions(+), 101 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 64b0a5a..a732394 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -504,6 +504,20 @@ button {
     }
   }
 
+  @at-root %button_selected, & {
+    row:selected & {
+      @if $variant == 'light' { border-color: $selected_borders_color; }
+
+      &.flat:not(:active):not(:checked):not(:hover):not(disabled) {
+        color: $selected_fg_color;
+        border-color: transparent;
+
+        &:backdrop { color: if($variant=='light', $backdrop_base_color, $backdrop_fg_color); }
+      }
+    }
+  }
+
+
   // big standalone buttons like in Documents pager
   &.osd {
     &.image-button {
@@ -3251,11 +3265,11 @@ actionbar > revealer >  box {
   &:backdrop { border-color: $backdrop_borders_color; }
 }
 
-placessidebar,
 scrolledwindow {
   viewport.frame { // avoid double borders when viewport inside scrolled window
     border-style: none;
   }
+
   // This is used when content is touch-dragged past boundaries.
   // draws a box on top of the content, the size changes programmatically.
   overshoot {
@@ -3335,45 +3349,31 @@ list {
   row { padding: 2px; }
 }
 
-row.activatable {
-  &.has-open-popup, // this is for indicathing which row generated a popover see 
https://bugzilla.gnome.org/show_bug.cgi?id=754411
-
-  &:hover { background-color: if(variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 
0.95)); }
-
-  &:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); }
+row {
+  transition: all 150ms $ease-out-quad;
 
-  &:backdrop:hover { background-color: transparent; }
+  &:hover { transition: none; }
 
-  &:selected {
-    &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
+  &.activatable {
+    &.has-open-popup, // this is for indicathing which row generated a popover see 
https://bugzilla.gnome.org/show_bug.cgi?id=754411
 
-    &.has-open-popup,
-    &:hover { background-color: mix($fg_color, $selected_bg_color, 10%); }
+    &:hover { background-color: if(variant == light, transparentize($fg_color, 0.9), 
transparentize($fg_color, 0.95)); }
 
-    &:backdrop { background-color: $selected_bg_color; }
-  }
-}
+    &:active { box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8); }
 
-row:selected {
-  @extend %selected_items;
+    &:backdrop:hover { background-color: transparent; }
 
-  button {
-    @if $variant == 'light' { border-color: $selected_borders_color; }
+    &:selected {
+      &:active { box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5); }
 
-    &.flat:not(:active):not(:checked):not(:hover):not(disabled) {
-      color: $selected_fg_color;
-      border-color: transparent;
+      &.has-open-popup,
+      &:hover { background-color: mix($fg_color, $selected_bg_color, 10%); }
 
-      &:backdrop { color: if($variant=='light', $backdrop_base_color, $backdrop_fg_color); }
+      &:backdrop { background-color: $selected_bg_color; }
     }
   }
-}
 
-// transition
-row {
-  transition: all 150ms $ease-out-quad;
-
-  &:hover { transition: none; }
+  &:selected { @extend %selected_items; }
 }
 
 
@@ -3604,6 +3604,8 @@ stacksidebar {
 $_placesidebar_icons_opacity: 0.7;
 
 placessidebar {
+  > viewport.frame { border-style: none; }
+
   row {
     // Needs overriding of the GtkListBoxRow padding
     min-height: 36px;
@@ -3630,6 +3632,8 @@ placessidebar {
     @at-root button.sidebar-button {
       @extend %button_basic.flat;
 
+      @extend %button_selected.flat;
+
       min-height: 26px;
       min-width: 26px;
       margin-top: 3px;
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index b4da29c..cf16f91 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -528,6 +528,11 @@ notebook > header > tabs > arrow, headerbar button.titlebutton,
   .titlebar button.titlebutton:drop(active), button:drop(active) {
     border-color: black;
     box-shadow: inset 0 0 0 1px black; }
+row:selected button.sidebar-button:not(:active):not(:checked):not(:hover):not(disabled), row:selected 
button.flat:not(:active):not(:checked):not(:hover):not(disabled) {
+  color: #ffffff;
+  border-color: transparent; }
+  row:selected button.sidebar-button:not(:active):not(:checked):not(:hover):not(disabled):backdrop, 
row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop {
+    color: #949796; }
 button.osd {
   color: #eeeeec;
   border-radius: 5px;
@@ -3380,10 +3385,8 @@ actionbar > revealer > box {
   actionbar > revealer > box:backdrop {
     border-color: #1f2222; }
 
-placessidebar viewport.frame,
 scrolledwindow viewport.frame {
   border-style: none; }
-placessidebar overshoot.top,
 scrolledwindow overshoot.top {
   background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#040404), to(rgba(4, 4, 4, 
0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(238, 238, 236, 0.07)), to(rgba(238, 
238, 236, 0)));
   background-size: 100% 5%, 100% 100%;
@@ -3392,7 +3395,6 @@ scrolledwindow overshoot.top {
   background-color: transparent;
   border: none;
   box-shadow: none; }
-  placessidebar overshoot.top:backdrop,
   scrolledwindow overshoot.top:backdrop {
     background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#1f2222), to(rgba(31, 34, 34, 
0)));
     background-size: 100% 5%;
@@ -3401,7 +3403,6 @@ scrolledwindow overshoot.top {
     background-color: transparent;
     border: none;
     box-shadow: none; }
-placessidebar overshoot.bottom,
 scrolledwindow overshoot.bottom {
   background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#040404), to(rgba(4, 4, 
4, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(238, 238, 236, 0.07)), 
to(rgba(238, 238, 236, 0)));
   background-size: 100% 5%, 100% 100%;
@@ -3410,7 +3411,6 @@ scrolledwindow overshoot.bottom {
   background-color: transparent;
   border: none;
   box-shadow: none; }
-  placessidebar overshoot.bottom:backdrop,
   scrolledwindow overshoot.bottom:backdrop {
     background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#1f2222), to(rgba(31, 
34, 34, 0)));
     background-size: 100% 5%;
@@ -3419,7 +3419,6 @@ scrolledwindow overshoot.bottom {
     background-color: transparent;
     border: none;
     box-shadow: none; }
-placessidebar overshoot.left,
 scrolledwindow overshoot.left {
   background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#040404), to(rgba(4, 4, 4, 
0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(238, 238, 236, 0.07)), to(rgba(238, 
238, 236, 0)));
   background-size: 5% 100%, 100% 100%;
@@ -3428,7 +3427,6 @@ scrolledwindow overshoot.left {
   background-color: transparent;
   border: none;
   box-shadow: none; }
-  placessidebar overshoot.left:backdrop,
   scrolledwindow overshoot.left:backdrop {
     background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#1f2222), to(rgba(31, 34, 
34, 0)));
     background-size: 5% 100%;
@@ -3437,7 +3435,6 @@ scrolledwindow overshoot.left {
     background-color: transparent;
     border: none;
     box-shadow: none; }
-placessidebar overshoot.right,
 scrolledwindow overshoot.right {
   background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#040404), to(rgba(4, 4, 4, 
0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(238, 238, 236, 0.07)), to(rgba(238, 
238, 236, 0)));
   background-size: 5% 100%, 100% 100%;
@@ -3446,7 +3443,6 @@ scrolledwindow overshoot.right {
   background-color: transparent;
   border: none;
   box-shadow: none; }
-  placessidebar overshoot.right:backdrop,
   scrolledwindow overshoot.right:backdrop {
     background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#1f2222), to(rgba(31, 34, 
34, 0)));
     background-size: 5% 100%;
@@ -3455,7 +3451,6 @@ scrolledwindow overshoot.right {
     background-color: transparent;
     border: none;
     box-shadow: none; }
-placessidebar undershoot.top,
 scrolledwindow undershoot.top {
   background-color: transparent;
   background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
@@ -3466,7 +3461,6 @@ scrolledwindow undershoot.top {
   background-position: center top;
   border: none;
   box-shadow: none; }
-placessidebar undershoot.bottom,
 scrolledwindow undershoot.bottom {
   background-color: transparent;
   background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
@@ -3477,7 +3471,6 @@ scrolledwindow undershoot.bottom {
   background-position: center bottom;
   border: none;
   box-shadow: none; }
-placessidebar undershoot.left,
 scrolledwindow undershoot.left {
   background-color: transparent;
   background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
@@ -3488,7 +3481,6 @@ scrolledwindow undershoot.left {
   background-position: left center;
   border: none;
   box-shadow: none; }
-placessidebar undershoot.right,
 scrolledwindow undershoot.right {
   background-color: transparent;
   background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
@@ -3499,15 +3491,12 @@ scrolledwindow undershoot.right {
   background-position: right center;
   border: none;
   box-shadow: none; }
-placessidebar junction,
 scrolledwindow junction {
   border-color: transparent;
   border-image: linear-gradient(to bottom, #1c1f1f 1px, transparent 1px) 0 0 0 1/0 1px stretch;
   background-color: #313434; }
-  placessidebar junction:dir(rtl),
   scrolledwindow junction:dir(rtl) {
     border-image-slice: 0 1 0 0; }
-  placessidebar junction:backdrop,
   scrolledwindow junction:backdrop {
     border-image-source: linear-gradient(to bottom, #1f2222 1px, transparent 1px);
     background-color: #323737; }
@@ -3530,29 +3519,22 @@ list {
   list row {
     padding: 2px; }
 
-row.activatable.has-open-popup, row.activatable:hover {
-  background-color: rgba(238, 238, 236, 0.05); }
-row.activatable:active {
-  box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); }
-row.activatable:backdrop:hover {
-  background-color: transparent; }
-row.activatable:selected:active {
-  box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); }
-row.activatable:selected.has-open-popup, row.activatable:selected:hover {
-  background-color: #366ca4; }
-row.activatable:selected:backdrop {
-  background-color: #215d9c; }
-
-row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled) {
-  color: #ffffff;
-  border-color: transparent; }
-  row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop {
-    color: #949796; }
-
 row {
   transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
   row:hover {
     transition: none; }
+  row.activatable.has-open-popup, row.activatable:hover {
+    background-color: rgba(238, 238, 236, 0.05); }
+  row.activatable:active {
+    box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); }
+  row.activatable:backdrop:hover {
+    background-color: transparent; }
+  row.activatable:selected:active {
+    box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); }
+  row.activatable:selected.has-open-popup, row.activatable:selected:hover {
+    background-color: #366ca4; }
+  row.activatable:selected:backdrop {
+    background-color: #215d9c; }
 
 /*********************
  * App Notifications *
@@ -3686,6 +3668,8 @@ stacksidebar row {
 /****************
  * File chooser *
  ****************/
+placessidebar > viewport.frame {
+  border-style: none; }
 placessidebar row {
   min-height: 36px;
   padding: 0px; }
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index b493091..8ed73e7 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -528,6 +528,13 @@ notebook > header > tabs > arrow, headerbar button.titlebutton,
   .titlebar button.titlebutton:drop(active), button:drop(active) {
     border-color: black;
     box-shadow: inset 0 0 0 1px black; }
+row:selected button {
+  border-color: #184472; }
+  row:selected button.sidebar-button:not(:active):not(:checked):not(:hover):not(disabled), row:selected 
button.flat:not(:active):not(:checked):not(:hover):not(disabled) {
+    color: #ffffff;
+    border-color: transparent; }
+    row:selected button.sidebar-button:not(:active):not(:checked):not(:hover):not(disabled):backdrop, 
row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop {
+      color: white; }
 button.osd {
   color: #eeeeec;
   border-radius: 5px;
@@ -3411,10 +3418,8 @@ actionbar > revealer > box {
   actionbar > revealer > box:backdrop {
     border-color: #a5a5a1; }
 
-placessidebar viewport.frame,
 scrolledwindow viewport.frame {
   border-style: none; }
-placessidebar overshoot.top,
 scrolledwindow overshoot.top {
   background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#84847f), to(rgba(132, 132, 
127, 0))), -gtk-gradient(radial, center top, 0, center top, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 
52, 54, 0)));
   background-size: 100% 5%, 100% 100%;
@@ -3423,7 +3428,6 @@ scrolledwindow overshoot.top {
   background-color: transparent;
   border: none;
   box-shadow: none; }
-  placessidebar overshoot.top:backdrop,
   scrolledwindow overshoot.top:backdrop {
     background-image: -gtk-gradient(radial, center top, 0, center top, 0.5, to(#a5a5a1), to(rgba(165, 165, 
161, 0)));
     background-size: 100% 5%;
@@ -3432,7 +3436,6 @@ scrolledwindow overshoot.top {
     background-color: transparent;
     border: none;
     box-shadow: none; }
-placessidebar overshoot.bottom,
 scrolledwindow overshoot.bottom {
   background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#84847f), to(rgba(132, 
132, 127, 0))), -gtk-gradient(radial, center bottom, 0, center bottom, 0.6, from(rgba(46, 52, 54, 0.07)), 
to(rgba(46, 52, 54, 0)));
   background-size: 100% 5%, 100% 100%;
@@ -3441,7 +3444,6 @@ scrolledwindow overshoot.bottom {
   background-color: transparent;
   border: none;
   box-shadow: none; }
-  placessidebar overshoot.bottom:backdrop,
   scrolledwindow overshoot.bottom:backdrop {
     background-image: -gtk-gradient(radial, center bottom, 0, center bottom, 0.5, to(#a5a5a1), to(rgba(165, 
165, 161, 0)));
     background-size: 100% 5%;
@@ -3450,7 +3452,6 @@ scrolledwindow overshoot.bottom {
     background-color: transparent;
     border: none;
     box-shadow: none; }
-placessidebar overshoot.left,
 scrolledwindow overshoot.left {
   background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#84847f), to(rgba(132, 132, 
127, 0))), -gtk-gradient(radial, left center, 0, left center, 0.6, from(rgba(46, 52, 54, 0.07)), to(rgba(46, 
52, 54, 0)));
   background-size: 5% 100%, 100% 100%;
@@ -3459,7 +3460,6 @@ scrolledwindow overshoot.left {
   background-color: transparent;
   border: none;
   box-shadow: none; }
-  placessidebar overshoot.left:backdrop,
   scrolledwindow overshoot.left:backdrop {
     background-image: -gtk-gradient(radial, left center, 0, left center, 0.5, to(#a5a5a1), to(rgba(165, 165, 
161, 0)));
     background-size: 5% 100%;
@@ -3468,7 +3468,6 @@ scrolledwindow overshoot.left {
     background-color: transparent;
     border: none;
     box-shadow: none; }
-placessidebar overshoot.right,
 scrolledwindow overshoot.right {
   background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#84847f), to(rgba(132, 132, 
127, 0))), -gtk-gradient(radial, right center, 0, right center, 0.6, from(rgba(46, 52, 54, 0.07)), 
to(rgba(46, 52, 54, 0)));
   background-size: 5% 100%, 100% 100%;
@@ -3477,7 +3476,6 @@ scrolledwindow overshoot.right {
   background-color: transparent;
   border: none;
   box-shadow: none; }
-  placessidebar overshoot.right:backdrop,
   scrolledwindow overshoot.right:backdrop {
     background-image: -gtk-gradient(radial, right center, 0, right center, 0.5, to(#a5a5a1), to(rgba(165, 
165, 161, 0)));
     background-size: 5% 100%;
@@ -3486,7 +3484,6 @@ scrolledwindow overshoot.right {
     background-color: transparent;
     border: none;
     box-shadow: none; }
-placessidebar undershoot.top,
 scrolledwindow undershoot.top {
   background-color: transparent;
   background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
@@ -3497,7 +3494,6 @@ scrolledwindow undershoot.top {
   background-position: center top;
   border: none;
   box-shadow: none; }
-placessidebar undershoot.bottom,
 scrolledwindow undershoot.bottom {
   background-color: transparent;
   background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
@@ -3508,7 +3504,6 @@ scrolledwindow undershoot.bottom {
   background-position: center bottom;
   border: none;
   box-shadow: none; }
-placessidebar undershoot.left,
 scrolledwindow undershoot.left {
   background-color: transparent;
   background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
@@ -3519,7 +3514,6 @@ scrolledwindow undershoot.left {
   background-position: left center;
   border: none;
   box-shadow: none; }
-placessidebar undershoot.right,
 scrolledwindow undershoot.right {
   background-color: transparent;
   background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
@@ -3530,15 +3524,12 @@ scrolledwindow undershoot.right {
   background-position: right center;
   border: none;
   box-shadow: none; }
-placessidebar junction,
 scrolledwindow junction {
   border-color: transparent;
   border-image: linear-gradient(to bottom, #9d9d99 1px, transparent 1px) 0 0 0 1/0 1px stretch;
   background-color: #c3c4c4; }
-  placessidebar junction:dir(rtl),
   scrolledwindow junction:dir(rtl) {
     border-image-slice: 0 1 0 0; }
-  placessidebar junction:backdrop,
   scrolledwindow junction:backdrop {
     border-image-source: linear-gradient(to bottom, #a5a5a1 1px, transparent 1px);
     background-color: #e1e1df; }
@@ -3561,31 +3552,22 @@ list {
   list row {
     padding: 2px; }
 
-row.activatable.has-open-popup, row.activatable:hover {
-  background-color: rgba(46, 52, 54, 0.05); }
-row.activatable:active {
-  box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); }
-row.activatable:backdrop:hover {
-  background-color: transparent; }
-row.activatable:selected:active {
-  box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); }
-row.activatable:selected.has-open-popup, row.activatable:selected:hover {
-  background-color: #4787c9; }
-row.activatable:selected:backdrop {
-  background-color: #4a90d9; }
-
-row:selected button {
-  border-color: #184472; }
-  row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled) {
-    color: #ffffff;
-    border-color: transparent; }
-    row:selected button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop {
-      color: white; }
-
 row {
   transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
   row:hover {
     transition: none; }
+  row.activatable.has-open-popup, row.activatable:hover {
+    background-color: rgba(46, 52, 54, 0.05); }
+  row.activatable:active {
+    box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.2); }
+  row.activatable:backdrop:hover {
+    background-color: transparent; }
+  row.activatable:selected:active {
+    box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); }
+  row.activatable:selected.has-open-popup, row.activatable:selected:hover {
+    background-color: #4787c9; }
+  row.activatable:selected:backdrop {
+    background-color: #4a90d9; }
 
 /*********************
  * App Notifications *
@@ -3719,6 +3701,8 @@ stacksidebar row {
 /****************
  * File chooser *
  ****************/
+placessidebar > viewport.frame {
+  border-style: none; }
 placessidebar row {
   min-height: 36px;
   padding: 0px; }