[gnome-themes-standard/wip/sass] switch: initial implementation

[Jakub Steiner <jimmac src gnome org>]

commit 99c72046c9eb239fbd45000b5d54231aa6b411f7
Author: Jakub Steiner <jimmac gmail com>
Date:   Tue May 27 19:44:37 2014 +0200

    switch: initial implementation

 themes/Adwaita/gtk-3.0/_common.scss           |   30 +++++++++
 themes/Adwaita/gtk-3.0/_drawing.scss          |   17 +++++
 themes/Adwaita/gtk-3.0/gtk-contained-dark.css |   88 ++++++++++++++++++++++++-
 themes/Adwaita/gtk-3.0/gtk-contained.css      |   88 ++++++++++++++++++++++++-
 4 files changed, 219 insertions(+), 4 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_common.scss b/themes/Adwaita/gtk-3.0/_common.scss
index 6c7c124..9ef49b3 100644
--- a/themes/Adwaita/gtk-3.0/_common.scss
+++ b/themes/Adwaita/gtk-3.0/_common.scss
@@ -723,6 +723,36 @@ GtkPopover {
 }
 
 /**********
+ * Switch *
+ **********/
+
+GtkSwitch {
+    font: bold condensed 9;
+    outline-offset: -4px;
+    padding: 2px;
+    
+    &.trough {
+      border-width: 1px;
+      border-style: solid;
+      border-radius: 3px;
+      padding: 1px;
+      @include trough();
+      &:active { @include trough($c:$selected_bg_color, $tc:$selected_fg_color, $noedge:true); }
+      &:insensitive { include trough($flat:true);}
+      &:backdrop { include trough($flat:true, $c:darken($bg_color, 10%));}
+      &:backdrop:insensitive { include trough($flat:true, $c:$bg_color);}
+    }
+    &.slider { 
+      border-radius: 2px;
+        @include button(normal, $noedge:true);
+        &:active { border: 1px solid darken($selected_bg_color, 20%); }
+        &:insensitive { @include button(insensitive); }
+        &:backdrop { @include button(backdrop); }
+        &:backdrop:insensitive { @include button(backdrop-insensitive); }
+    }
+}
+
+/**********
  * Frames *
  **********/
 .frame {
diff --git a/themes/Adwaita/gtk-3.0/_drawing.scss b/themes/Adwaita/gtk-3.0/_drawing.scss
index 9fdf048..1bb8fca 100644
--- a/themes/Adwaita/gtk-3.0/_drawing.scss
+++ b/themes/Adwaita/gtk-3.0/_drawing.scss
@@ -137,6 +137,7 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
     color: $insensitive_fg_color;
     border-color: $insensitive_borders_color;
     background-image: none;
+    background-color: $c;
     text-shadow: none;
     icon-shadow: none;
     @if $noedge {
@@ -173,6 +174,7 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
     color: $backdrop_fg_color;
     border-color: $backdrop_borders_color;
     background-image: none;
+    background-color: $c;
     text-shadow: none;
     icon-shadow: none;
     @include _shadows(inset 0 1px transparentize(white,1),
@@ -204,3 +206,18 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
                       0 1px transparentize(white,1));
   }
 }
+
+ mixin trough($flat:false, $c:$bg_color, $tc:$fg_color, $noedge:false) {
+  color: $tc;
+  @if $flat { background-image: linear-gradient(to bottom,$c); }
+  @else {
+    background-image: linear-gradient(to bottom,
+                                  mix(black,$c,20%),
+                                  mix(black,$c,15%) 40%,
+                                  mix(black,$c,5%)
+                                  );
+  }
+
+  @if $c!=$bg_color { @include _button_border_color($c); }
+  @else { border-color: $borders_color; }
+}
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
index 4478db0..30c534e 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
@@ -193,6 +193,7 @@ GtkGrid:insensitive {
     color: #eeeeec;
     border-color: #1c1f1f;
     background-image: none;
+    background-color: #393f3f;
     text-shadow: none;
     icon-shadow: none;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
@@ -222,6 +223,7 @@ GtkGrid:insensitive {
     color: white;
     border-color: #1c1f1f;
     background-image: none;
+    background-color: #393f3f;
     text-shadow: none;
     icon-shadow: none;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); }
@@ -265,6 +267,7 @@ GtkGrid:insensitive {
       color: #eeeeec;
       border-color: #1c1f1f;
       background-image: none;
+      background-color: #2a76c6;
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
@@ -280,6 +283,7 @@ GtkGrid:insensitive {
       color: white;
       border-color: #1c1f1f;
       background-image: none;
+      background-color: #393f3f;
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); }
@@ -316,6 +320,7 @@ GtkGrid:insensitive {
       color: #eeeeec;
       border-color: #1c1f1f;
       background-image: none;
+      background-color: #d51010;
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
@@ -331,6 +336,7 @@ GtkGrid:insensitive {
       color: white;
       border-color: #1c1f1f;
       background-image: none;
+      background-color: #393f3f;
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); }
@@ -418,6 +424,7 @@ GtkColorButton.button {
       color: white;
       border-color: #1c1f1f;
       background-image: none;
+      background-color: #393f3f;
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
@@ -436,6 +443,7 @@ GtkColorButton.button {
       color: #eeeeec;
       border-color: #1c1f1f;
       background-image: none;
+      background-color: #393f3f;
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
@@ -470,6 +478,7 @@ GtkColorButton.button {
       color: white;
       border-color: #1c1f1f;
       background-image: none;
+      background-color: #393f3f;
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); }
@@ -488,6 +497,7 @@ GtkColorButton.button {
       color: #eeeeec;
       border-color: #1c1f1f;
       background-image: none;
+      background-color: #393f3f;
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
@@ -497,9 +507,12 @@ GtkColorButton.button {
       color: white;
       border-color: #1c1f1f;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+  .spinbutton.vertical .button.button.button.button:first-child {
+    border-bottom-width: 0; }
+  .spinbutton.vertical .button.button.button.button:last-child {
+    border-top-width: 0; }
   .spinbutton.vertical.entry {
-    border-radius: 0;
-    border-width: 0 1px 0 1px; }
+    border-radius: 0; }
 
 /**************
  * ComboBoxes *
@@ -749,6 +762,76 @@ GtkPopover {
         background-color: #2a76c6; }
 
 /**********
+ * Switch *
+ **********/
+GtkSwitch {
+  font: bold condensed 9;
+  outline-offset: -4px;
+  padding: 2px; }
+  GtkSwitch.trough {
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 3px;
+    padding: 1px;
+    color: #eeeeec;
+    background-image: linear-gradient(to bottom, #2d3232, #303535 40%, #363b3b);
+    border-color: #1c1f1f; }
+    GtkSwitch.trough:active {
+      color: white;
+      background-image: linear-gradient(to bottom, #215e9e, #2364a8 40%, #2770bc);
+      border-color: #215d9c; }
+    GtkSwitch.trough:insensitive {
+      color: #eeeeec;
+      background-image: linear-gradient(to bottom, #393f3f);
+      border-color: #1c1f1f; }
+    GtkSwitch.trough:backdrop {
+      color: #eeeeec;
+      background-image: linear-gradient(to bottom, #212424);
+      border-color: #090909; }
+    GtkSwitch.trough:backdrop:insensitive {
+      color: #eeeeec;
+      background-image: linear-gradient(to bottom, #393f3f);
+      border-color: #1c1f1f; }
+  GtkSwitch.slider {
+    border-radius: 2px;
+    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(255, 255, 255, 0.1); }
+    GtkSwitch.slider:active {
+      border: 1px solid #184472; }
+    GtkSwitch.slider:insensitive {
+      border-width: 1px;
+      border-style: solid;
+      color: white;
+      border-color: #1c1f1f;
+      background-image: none;
+      background-color: #393f3f;
+      text-shadow: none;
+      icon-shadow: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); }
+    GtkSwitch.slider:backdrop {
+      border-width: 1px;
+      border-style: solid;
+      color: #eeeeec;
+      border-color: #1c1f1f;
+      background-image: none;
+      background-color: #393f3f;
+      text-shadow: none;
+      icon-shadow: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
+    GtkSwitch.slider:backdrop:insensitive {
+      border-width: 1px;
+      border-style: solid;
+      color: white;
+      border-color: #1c1f1f;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+
+/**********
  * Frames *
  **********/
 .frame {
@@ -809,6 +892,7 @@ GtkScrolledWindow GtkViewport.frame {
     color: #eeeeec;
     border-color: #1c1f1f;
     background-image: none;
+    background-color: #393f3f;
     text-shadow: none;
     icon-shadow: none;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.css b/themes/Adwaita/gtk-3.0/gtk-contained.css
index 4e09593..779c1fc 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.css
@@ -193,6 +193,7 @@ GtkGrid:insensitive {
     color: #454f52;
     border-color: #a1a1a1;
     background-image: none;
+    background-color: #ededed;
     text-shadow: none;
     icon-shadow: none;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
@@ -222,6 +223,7 @@ GtkGrid:insensitive {
     color: #748489;
     border-color: #a1a1a1;
     background-image: none;
+    background-color: #ededed;
     text-shadow: none;
     icon-shadow: none;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; }
@@ -265,6 +267,7 @@ GtkGrid:insensitive {
       color: #454f52;
       border-color: #a1a1a1;
       background-image: none;
+      background-color: #4a90d9;
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
@@ -280,6 +283,7 @@ GtkGrid:insensitive {
       color: #748489;
       border-color: #a1a1a1;
       background-image: none;
+      background-color: #ededed;
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; }
@@ -316,6 +320,7 @@ GtkGrid:insensitive {
       color: #454f52;
       border-color: #a1a1a1;
       background-image: none;
+      background-color: #ef2929;
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
@@ -331,6 +336,7 @@ GtkGrid:insensitive {
       color: #748489;
       border-color: #a1a1a1;
       background-image: none;
+      background-color: #ededed;
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; }
@@ -418,6 +424,7 @@ GtkColorButton.button {
       color: #748489;
       border-color: #a1a1a1;
       background-image: none;
+      background-color: #ededed;
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
@@ -436,6 +443,7 @@ GtkColorButton.button {
       color: #454f52;
       border-color: #a1a1a1;
       background-image: none;
+      background-color: #ededed;
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
@@ -470,6 +478,7 @@ GtkColorButton.button {
       color: #748489;
       border-color: #a1a1a1;
       background-image: none;
+      background-color: #ededed;
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; }
@@ -488,6 +497,7 @@ GtkColorButton.button {
       color: #454f52;
       border-color: #a1a1a1;
       background-image: none;
+      background-color: #ededed;
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
@@ -497,9 +507,12 @@ GtkColorButton.button {
       color: #c7c7c7;
       border-color: #a1a1a1;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+  .spinbutton.vertical .button.button.button.button:first-child {
+    border-bottom-width: 0; }
+  .spinbutton.vertical .button.button.button.button:last-child {
+    border-top-width: 0; }
   .spinbutton.vertical.entry {
-    border-radius: 0;
-    border-width: 0 1px 0 1px; }
+    border-radius: 0; }
 
 /**************
  * ComboBoxes *
@@ -749,6 +762,76 @@ GtkPopover {
         background-color: #4a90d9; }
 
 /**********
+ * Switch *
+ **********/
+GtkSwitch {
+  font: bold condensed 9;
+  outline-offset: -4px;
+  padding: 2px; }
+  GtkSwitch.trough {
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 3px;
+    padding: 1px;
+    color: #2e3436;
+    background-image: linear-gradient(to bottom, #bdbdbd, #c9c9c9 40%, #e1e1e1);
+    border-color: #a1a1a1; }
+    GtkSwitch.trough:active {
+      color: white;
+      background-image: linear-gradient(to bottom, #3b73ad, #3e7ab8 40%, #4688ce);
+      border-color: #184472; }
+    GtkSwitch.trough:insensitive {
+      color: #2e3436;
+      background-image: linear-gradient(to bottom, #ededed);
+      border-color: #a1a1a1; }
+    GtkSwitch.trough:backdrop {
+      color: #2e3436;
+      background-image: linear-gradient(to bottom, lightgray);
+      border-color: #878787; }
+    GtkSwitch.trough:backdrop:insensitive {
+      color: #2e3436;
+      background-image: linear-gradient(to bottom, #ededed);
+      border-color: #a1a1a1; }
+  GtkSwitch.slider {
+    border-radius: 2px;
+    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 white; }
+    GtkSwitch.slider:active {
+      border: 1px solid #215d9c; }
+    GtkSwitch.slider:insensitive {
+      border-width: 1px;
+      border-style: solid;
+      color: #748489;
+      border-color: #a1a1a1;
+      background-image: none;
+      background-color: #ededed;
+      text-shadow: none;
+      icon-shadow: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; }
+    GtkSwitch.slider:backdrop {
+      border-width: 1px;
+      border-style: solid;
+      color: #454f52;
+      border-color: #a1a1a1;
+      background-image: none;
+      background-color: #ededed;
+      text-shadow: none;
+      icon-shadow: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
+    GtkSwitch.slider:backdrop:insensitive {
+      border-width: 1px;
+      border-style: solid;
+      color: #c7c7c7;
+      border-color: #a1a1a1;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+
+/**********
  * Frames *
  **********/
 .frame {
@@ -809,6 +892,7 @@ GtkScrolledWindow GtkViewport.frame {
     color: #454f52;
     border-color: #a1a1a1;
     background-image: none;
+    background-color: #ededed;
     text-shadow: none;
     icon-shadow: none;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);