[gnome-themes-standard/wip/sass] embrace nesting syntax. bring back vertical spinbuttons

[Jakub Steiner <jimmac src gnome org>]

commit 7fddd0a8c22c0991d96760d6acbfe4ab53f203aa
Author: Jakub Steiner <jimmac gmail com>
Date:   Fri May 23 11:43:12 2014 +0200

    embrace nesting syntax. bring back vertical spinbuttons

 themes/Adwaita/gtk-3.0/_common.scss           |  146 ++++++++------------
 themes/Adwaita/gtk-3.0/gtk-contained-dark.css |  176 ++++++++++++++-----------
 themes/Adwaita/gtk-3.0/gtk-contained.css      |  176 ++++++++++++++-----------
 3 files changed, 255 insertions(+), 243 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_common.scss b/themes/Adwaita/gtk-3.0/_common.scss
index bdfe9d2..d8b3dad 100644
--- a/themes/Adwaita/gtk-3.0/_common.scss
+++ b/themes/Adwaita/gtk-3.0/_common.scss
@@ -342,54 +342,42 @@ GtkColorButton.button { // Uniform padding on the GtkColorButton.button
  * GtkSpinButton *
  *****************/
 
-.spinbutton .button {
-  background-image: none;
-  border-width: 0 0 0 1px;
-  border-color: transparentize($borders_color,0.7);
-  border-radius: 0;
-  box-shadow: none;
-//  padding-left: 6px;
-//  padding-right: 6px;
-  &:insensitive {
-    color: transparentize($_insensitive_fg_color,0.7);
-  }
-  &:active {
-    box-shadow: inset 0 2px 3px -1px transparentize(black,0.8); 
-  }
-  &:backdrop {
-    border-color: transparentize($_backdrop_borders_color,0.7);
-  }
-  &:backdrop:insensitive {
-    border-width: 0 0 0 1px;
-    color: transparentize($_backdrop_insensitive_color,0.7);
-  }
-}
-
-
-/*
 .spinbutton {
   .button {
-    background-color: transparent;
     background-image: none;
-    border-radius: 0;
     border-width: 0 0 0 1px;
     border-color: transparentize($borders_color,0.7);
-    padding: 2px 6px;
+    border-radius: 0;
+    box-shadow: none;
+  //  padding-left: 6px;
+  //  padding-right: 6px;
+    &:insensitive {
+      color: transparentize($_insensitive_fg_color,0.7);
+    }
     &:active {
-      @include button(active, lighten($theme_bg_color, 20%));
+      box-shadow: inset 0 2px 3px -1px transparentize(black,0.8); 
+    }
+    &:backdrop {
+      border-color: transparentize($_backdrop_borders_color,0.7);
+    }
+    &:backdrop:insensitive {
+      border-width: 0 0 0 1px;
+      color: transparentize($_backdrop_insensitive_color,0.7);
     }
   }
   &.vertical {
     .button {
-      // derives from normal button
+      @include button(normal);
       &:first-child { border-radius: 3px 3px 0 0; }
       &:last-child { border-radius: 0 0 3px 3px; }
+      &:active { @include button(active); }
+      &:insensitive { @include button(insensitive); }
+      &:backdrop { @include button(backdrop); }
+      &:hover { @include button(hover); }
     }
     &.entry { border-radius: 0; border-width: 0 1px 0 1px;}
   }
 }
-*/
-
 
 /**************
  * ComboBoxes *
@@ -557,61 +545,45 @@ GtkPopover {
   -GtkWidget-focus-padding: 0;
   -GtkWidget-focus-line-width: 0;
   transition: all 200ms ease-out;
-}
-
-.notebook.frame {
-  border-width: 1px;
-}
-
-.notebook.header {
-  background-color: darken($theme_bg_color,5%);
-  box-shadow: inset 0 6px 3px -5px transparentize($theme_shade,0.35); //I want just a top shadow 
-                                                                     //so negative spread
-  border-width: 0px;
-}
-
-.notebook.header.frame {
-  border: 1px solid $borders_color;
-  &.top { border-bottom: none; };
-  &.bottom { border-top: none; };
-  &.right { border-left: none; };
-  &.left { border-right: none; }; 
-}
-
-.notebook tab { //tab sizing
-  border-width: 0;
-  background-color: transparent;
-  &.top, &.bottom { padding: 8px 20px; }; //horizontal tab sizing
-  &.left, &.right { padding: 5px 20px; }; //vertical tab sizing
-}
-
-.notebook tab GtkLabel { //tab text
-  font-weight: bold;
-  color: lighten($theme_fg_color,30%); //FIXME
-  &.active-page { color: $theme_fg_color; } //active tab text
-  &.prelight-page { color: lighten($theme_fg_color,15%); } //prelight tab text
-}
-
-.notebook tab GtkLabel.active-page {
-  color: $theme_fg_color;
-}
-
-.notebook tab { //tab indicator
-
-  $tab_indicator_size: 2px;
-  $active_tab_indicator: $selected_bg_color;
-  $prelight_tab_indicator: $borders_color;
-
-  &.top:hover { box-shadow: inset 0 (-$tab_indicator_size) $prelight_tab_indicator; };
-  &.top:active { box-shadow: inset 0 (-$tab_indicator_size) $active_tab_indicator; };
-  &.bottom:hover { box-shadow: inset 0 $tab_indicator_size $prelight_tab_indicator; };
-  &.bottom:active { box-shadow: inset 0 $tab_indicator_size $active_tab_indicator; };
-  &.right:hover { box-shadow: inset $tab_indicator_size 0 $prelight_tab_indicator; };
-  &.right:active { box-shadow: inset $tab_indicator_size 0 $active_tab_indicator; };
-  &.left:hover { box-shadow: inset (-$tab_indicator_size) 0 $prelight_tab_indicator; };
-  &.left:active { box-shadow: inset (-$tab_indicator_size) 0 $active_tab_indicator; };
-  //with backdrop in the mix this will explode we need smarter code
-
+  &.frame { border-width: 1px; }
+  &.header {
+    background-color: darken($theme_bg_color,5%);
+    box-shadow: inset 0 6px 3px -5px transparentize($theme_shade,0.35); //I want just a top shadow 
+                                                                       //so negative spread
+    border-width: 0px;
+    &.frame {
+      border: 1px solid $borders_color;
+      &.top { border-bottom: none; };
+      &.bottom { border-top: none; };
+      &.right { border-left: none; };
+      &.left { border-right: none; }; 
+    }
+  }
+  tab {
+    border-width: 0;
+    background-color: transparent;
+    $tab_indicator_size: 2px;
+    $active_tab_indicator: $selected_bg_color;
+    $prelight_tab_indicator: $borders_color;
+    &.top, &.bottom { padding: 8px 20px; }; //horizontal tab sizing
+    &.left, &.right { padding: 5px 20px; }; //vertical tab sizing
+    &.top:hover { box-shadow: inset 0 (-$tab_indicator_size) $prelight_tab_indicator; };
+    &.top:active { box-shadow: inset 0 (-$tab_indicator_size) $active_tab_indicator; };
+    &.bottom:hover { box-shadow: inset 0 $tab_indicator_size $prelight_tab_indicator; };
+    &.bottom:active { box-shadow: inset 0 $tab_indicator_size $active_tab_indicator; };
+    &.right:hover { box-shadow: inset $tab_indicator_size 0 $prelight_tab_indicator; };
+    &.right:active { box-shadow: inset $tab_indicator_size 0 $active_tab_indicator; };
+    &.left:hover { box-shadow: inset (-$tab_indicator_size) 0 $prelight_tab_indicator; };
+    &.left:active { box-shadow: inset (-$tab_indicator_size) 0 $active_tab_indicator; };
+    //with backdrop in the mix this will explode we need smarter code
+
+    GtkLabel { //tab text
+      font-weight: bold;
+      color: lighten($theme_fg_color,30%); //FIXME
+      &.active-page { color: $theme_fg_color; } //active tab text
+      &.prelight-page { color: lighten($theme_fg_color,15%); } //prelight tab text
+    }
+  }
 }
 
 /**************
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
index 4133e88..d968a98 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
@@ -388,30 +388,59 @@ GtkColorButton.button {
   .spinbutton .button:backdrop:insensitive {
     border-width: 0 0 0 1px;
     color: rgba(255, 255, 255, 0.3); }
-
-/*
-.spinbutton {
-  .button {
-    background-color: transparent;
+.spinbutton.vertical .button {
+  border-width: 1px;
+  border-style: solid;
+  color: #eeeeec;
+  background-image: linear-gradient(to bottom, #454c4c, #393f3f 40%, #2d3232);
+  border-color: #1c1f1f;
+  text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
+  icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
+  box-shadow: inset 0 1px rgba(238, 238, 236, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
+  .spinbutton.vertical .button:first-child {
+    border-radius: 3px 3px 0 0; }
+  .spinbutton.vertical .button:last-child {
+    border-radius: 0 0 3px 3px; }
+  .spinbutton.vertical .button:active {
+    border-width: 1px;
+    border-style: solid;
+    color: #eeeeec;
+    border-color: #1c1f1f;
+    background-image: linear-gradient(to bottom, #212424, #2d3232 3%);
+    text-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
+    icon-shadow: 0 -1px rgba(0, 0, 0, 0.89176);
+    box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px rgba(238, 238, 236, 0.1); }
+  .spinbutton.vertical .button:insensitive {
+    border-width: 1px;
+    border-style: solid;
+    color: white;
+    border-color: #1c1f1f;
     background-image: none;
-    border-radius: 0;
-    border-width: 0 0 0 1px;
-    border-color: transparentize($borders_color,0.7);
-    padding: 2px 6px;
-    &:active {
-      @include button(active, lighten($theme_bg_color, 20%));
-    }
-  }
-  &.vertical {
-    .button {
-      // derives from normal button
-      &:first-child { border-radius: 3px 3px 0 0; }
-      &:last-child { border-radius: 0 0 3px 3px; }
-    }
-    &.entry { border-radius: 0; border-width: 0 1px 0 1px;}
-  }
-}
-*/
+    text-shadow: none;
+    icon-shadow: none;
+    box-shadow: 0 1px rgba(238, 238, 236, 0.1); }
+  .spinbutton.vertical .button:backdrop {
+    border-width: 1px;
+    border-style: solid;
+    color: #eeeeec;
+    border-color: #1c1f1f;
+    background-image: none;
+    text-shadow: none;
+    icon-shadow: none;
+    box-shadow: none; }
+  .spinbutton.vertical .button:hover {
+    border-width: 1px;
+    border-style: solid;
+    color: #eeeeec;
+    border-color: #212424;
+    background-image: linear-gradient(to bottom, #5b6464, #434a4a 40%, #393f3f);
+    text-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
+    icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
+    box-shadow: inset 0 1px rgba(238, 238, 236, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
+.spinbutton.vertical.entry {
+  border-radius: 0;
+  border-width: 0 1px 0 1px; }
+
 /**************
  * ComboBoxes *
  **************/
@@ -530,61 +559,52 @@ GtkPopover {
   -GtkWidget-focus-padding: 0;
   -GtkWidget-focus-line-width: 0;
   transition: all 200ms ease-out; }
-
-.notebook.frame {
-  border-width: 1px; }
-
-.notebook.header {
-  background-color: #2d3232;
-  box-shadow: inset 0 6px 3px -5px rgba(0, 0, 0, 0.25);
-  border-width: 0px; }
-
-.notebook.header.frame {
-  border: 1px solid #1c1f1f; }
-  .notebook.header.frame.top {
-    border-bottom: none; }
-  .notebook.header.frame.bottom {
-    border-top: none; }
-  .notebook.header.frame.right {
-    border-left: none; }
-  .notebook.header.frame.left {
-    border-right: none; }
-
-.notebook tab {
-  border-width: 0;
-  background-color: transparent; }
-  .notebook tab.top, .notebook tab.bottom {
-    padding: 8px 20px; }
-  .notebook tab.left, .notebook tab.right {
-    padding: 5px 20px; }
-
-.notebook tab GtkLabel {
-  font-weight: bold;
-  color: white; }
-  .notebook tab GtkLabel.active-page {
-    color: #eeeeec; }
-  .notebook tab GtkLabel.prelight-page {
-    color: white; }
-
-.notebook tab GtkLabel.active-page {
-  color: #eeeeec; }
-
-.notebook tab.top:hover {
-  box-shadow: inset 0 -2px #1c1f1f; }
-.notebook tab.top:active {
-  box-shadow: inset 0 -2px #2a76c6; }
-.notebook tab.bottom:hover {
-  box-shadow: inset 0 2px #1c1f1f; }
-.notebook tab.bottom:active {
-  box-shadow: inset 0 2px #2a76c6; }
-.notebook tab.right:hover {
-  box-shadow: inset 2px 0 #1c1f1f; }
-.notebook tab.right:active {
-  box-shadow: inset 2px 0 #2a76c6; }
-.notebook tab.left:hover {
-  box-shadow: inset -2px 0 #1c1f1f; }
-.notebook tab.left:active {
-  box-shadow: inset -2px 0 #2a76c6; }
+  .notebook.frame {
+    border-width: 1px; }
+  .notebook.header {
+    background-color: #2d3232;
+    box-shadow: inset 0 6px 3px -5px rgba(0, 0, 0, 0.25);
+    border-width: 0px; }
+    .notebook.header.frame {
+      border: 1px solid #1c1f1f; }
+      .notebook.header.frame.top {
+        border-bottom: none; }
+      .notebook.header.frame.bottom {
+        border-top: none; }
+      .notebook.header.frame.right {
+        border-left: none; }
+      .notebook.header.frame.left {
+        border-right: none; }
+  .notebook tab {
+    border-width: 0;
+    background-color: transparent; }
+    .notebook tab.top, .notebook tab.bottom {
+      padding: 8px 20px; }
+    .notebook tab.left, .notebook tab.right {
+      padding: 5px 20px; }
+    .notebook tab.top:hover {
+      box-shadow: inset 0 -2px #1c1f1f; }
+    .notebook tab.top:active {
+      box-shadow: inset 0 -2px #2a76c6; }
+    .notebook tab.bottom:hover {
+      box-shadow: inset 0 2px #1c1f1f; }
+    .notebook tab.bottom:active {
+      box-shadow: inset 0 2px #2a76c6; }
+    .notebook tab.right:hover {
+      box-shadow: inset 2px 0 #1c1f1f; }
+    .notebook tab.right:active {
+      box-shadow: inset 2px 0 #2a76c6; }
+    .notebook tab.left:hover {
+      box-shadow: inset -2px 0 #1c1f1f; }
+    .notebook tab.left:active {
+      box-shadow: inset -2px 0 #2a76c6; }
+    .notebook tab GtkLabel {
+      font-weight: bold;
+      color: white; }
+      .notebook tab GtkLabel.active-page {
+        color: #eeeeec; }
+      .notebook tab GtkLabel.prelight-page {
+        color: white; }
 
 /**************
  * Scrollbars *
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.css b/themes/Adwaita/gtk-3.0/gtk-contained.css
index 093e4a5..d85e923 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.css
@@ -388,30 +388,59 @@ GtkColorButton.button {
   .spinbutton .button:backdrop:insensitive {
     border-width: 0 0 0 1px;
     color: rgba(199, 199, 199, 0.3); }
-
-/*
-.spinbutton {
-  .button {
-    background-color: transparent;
+.spinbutton.vertical .button {
+  border-width: 1px;
+  border-style: solid;
+  color: #2e3436;
+  background-image: linear-gradient(to bottom, white, #ededed 40%, lightgray);
+  border-color: #a1a1a1;
+  text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+  icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05); }
+  .spinbutton.vertical .button:first-child {
+    border-radius: 3px 3px 0 0; }
+  .spinbutton.vertical .button:last-child {
+    border-radius: 0 0 3px 3px; }
+  .spinbutton.vertical .button:active {
+    border-width: 1px;
+    border-style: solid;
+    color: #2e3436;
+    border-color: #a1a1a1;
+    background-image: linear-gradient(to bottom, #c7c7c7, #d1d1d1 3%, lightgray);
+    text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+    icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+    box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.05); }
+  .spinbutton.vertical .button:insensitive {
+    border-width: 1px;
+    border-style: solid;
+    color: #748489;
+    border-color: #a1a1a1;
     background-image: none;
-    border-radius: 0;
-    border-width: 0 0 0 1px;
-    border-color: transparentize($borders_color,0.7);
-    padding: 2px 6px;
-    &:active {
-      @include button(active, lighten($theme_bg_color, 20%));
-    }
-  }
-  &.vertical {
-    .button {
-      // derives from normal button
-      &:first-child { border-radius: 3px 3px 0 0; }
-      &:last-child { border-radius: 0 0 3px 3px; }
-    }
-    &.entry { border-radius: 0; border-width: 0 1px 0 1px;}
-  }
-}
-*/
+    text-shadow: none;
+    icon-shadow: none;
+    box-shadow: 0 1px rgba(255, 255, 255, 0.05); }
+  .spinbutton.vertical .button:backdrop {
+    border-width: 1px;
+    border-style: solid;
+    color: #454f52;
+    border-color: #a1a1a1;
+    background-image: none;
+    text-shadow: none;
+    icon-shadow: none;
+    box-shadow: none; }
+  .spinbutton.vertical .button:hover {
+    border-width: 1px;
+    border-style: solid;
+    color: #2e3436;
+    border-color: #a1a1a1;
+    background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed);
+    text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+    icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 1px rgba(255, 255, 255, 0.05); }
+.spinbutton.vertical.entry {
+  border-radius: 0;
+  border-width: 0 1px 0 1px; }
+
 /**************
  * ComboBoxes *
  **************/
@@ -530,61 +559,52 @@ GtkPopover {
   -GtkWidget-focus-padding: 0;
   -GtkWidget-focus-line-width: 0;
   transition: all 200ms ease-out; }
-
-.notebook.frame {
-  border-width: 1px; }
-
-.notebook.header {
-  background-color: #e0e0e0;
-  box-shadow: inset 0 6px 3px -5px rgba(0, 0, 0, 0.15);
-  border-width: 0px; }
-
-.notebook.header.frame {
-  border: 1px solid #a1a1a1; }
-  .notebook.header.frame.top {
-    border-bottom: none; }
-  .notebook.header.frame.bottom {
-    border-top: none; }
-  .notebook.header.frame.right {
-    border-left: none; }
-  .notebook.header.frame.left {
-    border-right: none; }
-
-.notebook tab {
-  border-width: 0;
-  background-color: transparent; }
-  .notebook tab.top, .notebook tab.bottom {
-    padding: 8px 20px; }
-  .notebook tab.left, .notebook tab.right {
-    padding: 5px 20px; }
-
-.notebook tab GtkLabel {
-  font-weight: bold;
-  color: #748489; }
-  .notebook tab GtkLabel.active-page {
-    color: #2e3436; }
-  .notebook tab GtkLabel.prelight-page {
-    color: #515c5f; }
-
-.notebook tab GtkLabel.active-page {
-  color: #2e3436; }
-
-.notebook tab.top:hover {
-  box-shadow: inset 0 -2px #a1a1a1; }
-.notebook tab.top:active {
-  box-shadow: inset 0 -2px #729fcf; }
-.notebook tab.bottom:hover {
-  box-shadow: inset 0 2px #a1a1a1; }
-.notebook tab.bottom:active {
-  box-shadow: inset 0 2px #729fcf; }
-.notebook tab.right:hover {
-  box-shadow: inset 2px 0 #a1a1a1; }
-.notebook tab.right:active {
-  box-shadow: inset 2px 0 #729fcf; }
-.notebook tab.left:hover {
-  box-shadow: inset -2px 0 #a1a1a1; }
-.notebook tab.left:active {
-  box-shadow: inset -2px 0 #729fcf; }
+  .notebook.frame {
+    border-width: 1px; }
+  .notebook.header {
+    background-color: #e0e0e0;
+    box-shadow: inset 0 6px 3px -5px rgba(0, 0, 0, 0.15);
+    border-width: 0px; }
+    .notebook.header.frame {
+      border: 1px solid #a1a1a1; }
+      .notebook.header.frame.top {
+        border-bottom: none; }
+      .notebook.header.frame.bottom {
+        border-top: none; }
+      .notebook.header.frame.right {
+        border-left: none; }
+      .notebook.header.frame.left {
+        border-right: none; }
+  .notebook tab {
+    border-width: 0;
+    background-color: transparent; }
+    .notebook tab.top, .notebook tab.bottom {
+      padding: 8px 20px; }
+    .notebook tab.left, .notebook tab.right {
+      padding: 5px 20px; }
+    .notebook tab.top:hover {
+      box-shadow: inset 0 -2px #a1a1a1; }
+    .notebook tab.top:active {
+      box-shadow: inset 0 -2px #729fcf; }
+    .notebook tab.bottom:hover {
+      box-shadow: inset 0 2px #a1a1a1; }
+    .notebook tab.bottom:active {
+      box-shadow: inset 0 2px #729fcf; }
+    .notebook tab.right:hover {
+      box-shadow: inset 2px 0 #a1a1a1; }
+    .notebook tab.right:active {
+      box-shadow: inset 2px 0 #729fcf; }
+    .notebook tab.left:hover {
+      box-shadow: inset -2px 0 #a1a1a1; }
+    .notebook tab.left:active {
+      box-shadow: inset -2px 0 #729fcf; }
+    .notebook tab GtkLabel {
+      font-weight: bold;
+      color: #748489; }
+      .notebook tab GtkLabel.active-page {
+        color: #2e3436; }
+      .notebook tab GtkLabel.prelight-page {
+        color: #515c5f; }
 
 /**************
  * Scrollbars *