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

[Jakub Steiner <jimmac src gnome org>]

commit 374b42063b4d6636c62800e22043f4625f7a5d47
Author: Jakub Steiner <jimmac gmail com>
Date:   Wed May 28 13:28:52 2014 +0200

    scale: initial implementation

 themes/Adwaita/gtk-3.0/_common.scss           |   35 +++++++++++
 themes/Adwaita/gtk-3.0/_drawing.scss          |   10 +++
 themes/Adwaita/gtk-3.0/gtk-contained-dark.css |   76 +++++++++++++++++++++++-
 themes/Adwaita/gtk-3.0/gtk-contained.css      |   76 +++++++++++++++++++++++-
 4 files changed, 189 insertions(+), 8 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_common.scss b/themes/Adwaita/gtk-3.0/_common.scss
index fcf71c9..a20cf6b 100644
--- a/themes/Adwaita/gtk-3.0/_common.scss
+++ b/themes/Adwaita/gtk-3.0/_common.scss
@@ -736,6 +736,41 @@ GtkSwitch {
     }
 }
 
+/************
+ * GtkScale *
+ ************/
+.scale { // FIXME: vertical, bottom edge, fine-mode
+  -GtkScale-slider-length: 20;
+  -GtkRange-slider-width: 20;
+  -GtkRange-trough-border: 2;
+  outline-offset: -9px;
+  margin: 10px;
+  &.slider {
+    @include button(normal,$noedge:true);
+    border-radius: 50%;
+    &:insensitive { @include button(insensitive); }
+    &:backdrop { @include button(backdrop); }
+    &:backdrop:insensitive { @include button(backdrop-insensitive); }
+    &:active { }
+    
+    &.fine-tune:active {
+      -GtkScale-slider-length: 8;
+      -GtkRange-slider-width: 8;
+    }
+  }
+  &.trough {
+    @include trough();
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 3px;
+    &.highlight {
+      @include trough($c:$selected_bg_color);
+    }
+    &:backdrop { }
+    &:insensitive { @include trough($flat:true, $c:$insensitive_bg_color, $noedge:true); }
+  }
+}
+
 /**********
  * Frames *
  **********/
diff --git a/themes/Adwaita/gtk-3.0/_drawing.scss b/themes/Adwaita/gtk-3.0/_drawing.scss
index d239c99..c97dfe1 100644
--- a/themes/Adwaita/gtk-3.0/_drawing.scss
+++ b/themes/Adwaita/gtk-3.0/_drawing.scss
@@ -289,4 +289,14 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on
 
   @if $c!=$bg_color { @include _button_border_color($c); }
   @else { border-color: $borders_color; }
+  
+  @if $noedge==false { 
+    @if lightness($c) > 60% {
+      box-shadow: inset 0 -1px 0 $borders_edge;
+    }
+    @else {
+      box-shadow: inset 0 -1px 0 transparentize($borders_edge,0.5);
+    }
+  }
+
 }
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
index 83b44c4..c2a3e1c 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
@@ -799,7 +799,8 @@ GtkSwitch {
     border-radius: 3px;
     color: #c9cbc9;
     background-image: linear-gradient(to bottom, #303535 5%, #333838 20%, #333838 90%, #393f3f);
-    border-color: #1c1f1f; }
+    border-color: #1c1f1f;
+    box-shadow: inset 0 -1px 0 rgba(238, 238, 236, 0); }
     GtkSwitch.trough:active {
       color: #d7d8d8;
       background-image: linear-gradient(to bottom, #2364a8 5%, #256ab2 20%, #256ab2 90%, #2a76c6);
@@ -807,15 +808,18 @@ GtkSwitch {
     GtkSwitch.trough:insensitive {
       color: #c9cbc9;
       background-image: linear-gradient(to bottom, #393f3f);
-      border-color: #1c1f1f; }
+      border-color: #1c1f1f;
+      box-shadow: inset 0 -1px 0 rgba(238, 238, 236, 0); }
     GtkSwitch.trough:backdrop {
       color: #c9cbc9;
       background-image: linear-gradient(to bottom, #212424);
-      border-color: #090909; }
+      border-color: #090909;
+      box-shadow: inset 0 -1px 0 rgba(238, 238, 236, 0); }
     GtkSwitch.trough:backdrop:insensitive {
       color: #c9cbc9;
       background-image: linear-gradient(to bottom, #393f3f);
-      border-color: #1c1f1f; }
+      border-color: #1c1f1f;
+      box-shadow: inset 0 -1px 0 rgba(238, 238, 236, 0); }
   GtkSwitch.slider {
     border-radius: 3px;
     border-width: 1px;
@@ -853,6 +857,70 @@ GtkSwitch {
       border-color: #1c1f1f;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
+/************
+ * GtkScale *
+ ************/
+.scale {
+  -GtkScale-slider-length: 20;
+  -GtkRange-slider-width: 20;
+  -GtkRange-trough-border: 2;
+  outline-offset: -9px;
+  margin: 10px; }
+  .scale.slider {
+    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);
+    border-radius: 50%; }
+    .scale.slider:insensitive {
+      border-width: 1px;
+      border-style: solid;
+      color: white;
+      border-color: #1c1f1f;
+      background-image: linear-gradient(to bottom, #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); }
+    .scale.slider:backdrop {
+      border-width: 1px;
+      border-style: solid;
+      color: #eeeeec;
+      border-color: #1c1f1f;
+      background-image: linear-gradient(to bottom, #393f3f);
+      text-shadow: none;
+      icon-shadow: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
+    .scale.slider:backdrop:insensitive {
+      border-width: 1px;
+      border-style: solid;
+      color: white;
+      border-color: #1c1f1f;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+    .scale.slider.fine-tune:active {
+      -GtkScale-slider-length: 8;
+      -GtkRange-slider-width: 8; }
+  .scale.trough {
+    color: #c9cbc9;
+    background-image: linear-gradient(to bottom, #303535 5%, #333838 20%, #333838 90%, #393f3f);
+    border-color: #1c1f1f;
+    box-shadow: inset 0 -1px 0 rgba(238, 238, 236, 0);
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 3px; }
+    .scale.trough.highlight {
+      color: #c9cbc9;
+      background-image: linear-gradient(to bottom, #2364a8 5%, #256ab2 20%, #256ab2 90%, #2a76c6);
+      border-color: #215d9c;
+      box-shadow: inset 0 -1px 0 rgba(238, 238, 236, 0); }
+    .scale.trough:insensitive {
+      color: #c9cbc9;
+      background-image: linear-gradient(to bottom, #393f3f);
+      border-color: #1c1f1f; }
+
 /**********
  * Frames *
  **********/
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.css b/themes/Adwaita/gtk-3.0/gtk-contained.css
index 2bc8673..49fb1e6 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.css
@@ -799,7 +799,8 @@ GtkSwitch {
     border-radius: 3px;
     color: #54595a;
     background-image: linear-gradient(to bottom, #c9c9c9 5%, #d5d5d5 20%, #d5d5d5 90%, #ededed);
-    border-color: #a1a1a1; }
+    border-color: #a1a1a1;
+    box-shadow: inset 0 -1px 0 white; }
     GtkSwitch.trough:active {
       color: #fbfbfb;
       background-image: linear-gradient(to bottom, #3e7ab8 5%, #4281c3 20%, #4281c3 90%, #4a90d9);
@@ -807,15 +808,18 @@ GtkSwitch {
     GtkSwitch.trough:insensitive {
       color: #54595a;
       background-image: linear-gradient(to bottom, #ededed);
-      border-color: #a1a1a1; }
+      border-color: #a1a1a1;
+      box-shadow: inset 0 -1px 0 white; }
     GtkSwitch.trough:backdrop {
       color: #54595a;
       background-image: linear-gradient(to bottom, lightgray);
-      border-color: #878787; }
+      border-color: #878787;
+      box-shadow: inset 0 -1px 0 white; }
     GtkSwitch.trough:backdrop:insensitive {
       color: #54595a;
       background-image: linear-gradient(to bottom, #ededed);
-      border-color: #a1a1a1; }
+      border-color: #a1a1a1;
+      box-shadow: inset 0 -1px 0 white; }
   GtkSwitch.slider {
     border-radius: 3px;
     border-width: 1px;
@@ -853,6 +857,70 @@ GtkSwitch {
       border-color: #a1a1a1;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
+/************
+ * GtkScale *
+ ************/
+.scale {
+  -GtkScale-slider-length: 20;
+  -GtkRange-slider-width: 20;
+  -GtkRange-trough-border: 2;
+  outline-offset: -9px;
+  margin: 10px; }
+  .scale.slider {
+    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;
+    border-radius: 50%; }
+    .scale.slider:insensitive {
+      border-width: 1px;
+      border-style: solid;
+      color: #748489;
+      border-color: #a1a1a1;
+      background-image: linear-gradient(to bottom, #ededed);
+      text-shadow: none;
+      icon-shadow: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; }
+    .scale.slider:backdrop {
+      border-width: 1px;
+      border-style: solid;
+      color: #454f52;
+      border-color: #a1a1a1;
+      background-image: linear-gradient(to bottom, #ededed);
+      text-shadow: none;
+      icon-shadow: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
+    .scale.slider:backdrop:insensitive {
+      border-width: 1px;
+      border-style: solid;
+      color: #c7c7c7;
+      border-color: #a1a1a1;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+    .scale.slider.fine-tune:active {
+      -GtkScale-slider-length: 8;
+      -GtkRange-slider-width: 8; }
+  .scale.trough {
+    color: #54595a;
+    background-image: linear-gradient(to bottom, #c9c9c9 5%, #d5d5d5 20%, #d5d5d5 90%, #ededed);
+    border-color: #a1a1a1;
+    box-shadow: inset 0 -1px 0 white;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 3px; }
+    .scale.trough.highlight {
+      color: #54595a;
+      background-image: linear-gradient(to bottom, #3e7ab8 5%, #4281c3 20%, #4281c3 90%, #4a90d9);
+      border-color: #184472;
+      box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5); }
+    .scale.trough:insensitive {
+      color: #54595a;
+      background-image: linear-gradient(to bottom, #ededed);
+      border-color: #a1a1a1; }
+
 /**********
  * Frames *
  **********/