[gnome-themes-standard/wip/sass] buttons mixin testbed

[Jakub Steiner <jimmac src gnome org>]

commit ea6220d926f2f3d521cd3b683850b212b2d24dc3
Author: Jakub Steiner <jimmac gmail com>
Date:   Mon May 12 21:41:34 2014 +0200

    buttons mixin testbed

 themes/Adwaita/gtk-3.0/_common.scss  |   37 +++++++++++++++++++++++--
 themes/Adwaita/gtk-3.0/_drawing.scss |   24 +++++++++++++---
 themes/Adwaita/gtk-3.0/gtk-dark.css  |   46 ++++++++++++++++++++++++++++++-
 themes/Adwaita/gtk-3.0/gtk.css       |   50 +++++++++++++++++++++++++++++++--
 themes/Adwaita/gtk-3.0/gtk.scss      |    2 +-
 5 files changed, 147 insertions(+), 12 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_common.scss b/themes/Adwaita/gtk-3.0/_common.scss
index eddaba9..a6a4bad 100644
--- a/themes/Adwaita/gtk-3.0/_common.scss
+++ b/themes/Adwaita/gtk-3.0/_common.scss
@@ -145,11 +145,42 @@ GtkGrid:insensitive {
  * Text Entries *
  ****************/
  
- .entry {
+.entry {
   padding: 4px;
   color: $theme_fg_color;
-  @include draw_border($borders);
-  @include draw_solid_bg($theme_base_color);
+  @include draw_entry($borders, $theme_base_color);
   transition: all 200ms ease-out;
 }
 
+/***********
+ * Buttons *
+ ***********/
+
+.button,
+.toolbar .button.raised,
+.toolbar .raised .button,
+.toolbar GtkComboBox .button,
+.spinbutton.vertical .button {
+  border-radius: 3px;
+  transition: all 200ms ease-out;
+  @include draw_button(null,null);
+  &:hover {
+    $fill: linear-gradient(to bottom,
+                                      lighten($theme_bg_color,15%),
+                                      lighten($theme_bg_color,10%),
+                                      $theme_bg_color);
+    @include draw_button(null,$fill);
+  }
+  &:active {
+    $fill: linear-gradient(to bottom,
+                                      darken($theme_bg_color,20%),
+                                      darken($theme_bg_color,10%),
+                                      darken($theme_bg_color,5%));
+    @include draw_button(null,$fill);
+  }
+  &:insensitive, &:backdrop:insensitive {
+    $fill: linear-gradient(to bottom, transparent);
+    color: $insensitive_fg_color;
+    @include draw_button(null,$fill);
+  }
+}
diff --git a/themes/Adwaita/gtk-3.0/_drawing.scss b/themes/Adwaita/gtk-3.0/_drawing.scss
index b67f257..d557f31 100644
--- a/themes/Adwaita/gtk-3.0/_drawing.scss
+++ b/themes/Adwaita/gtk-3.0/_drawing.scss
@@ -1,9 +1,25 @@
 // Drawing mixins
 
- mixin draw_border($c) {
-  border: 1px solid $c;
+ mixin draw_entry($border,$fill) {
+  @if length($border) == 0 {
+    $border: $borders;
+  }
+  @if length($fill) == 0 {
+    $border: $theme_base_color;
+  }  
+  border: 1px solid $border;
+  background-image: none;
+  background-color: $fill;
 }
 
- mixin draw_solid_bg($c) {
-  border: 1px solid $c;
+ mixin draw_button($border,$fill) {
+    $border: $borders !default;
+    $fill: linear-gradient(to bottom,
+                                      lighten($theme_bg_color,10%),
+                                      $theme_bg_color 40%,
+                                      darken($theme_bg_color,10%)
+                                      ) !default;
+  border: 1px solid $border;
+  background-image: $fill;
+  background-color: transparent;
 }
diff --git a/themes/Adwaita/gtk-3.0/gtk-dark.css b/themes/Adwaita/gtk-3.0/gtk-dark.css
index 4cba007..c53527a 100644
--- a/themes/Adwaita/gtk-3.0/gtk-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-dark.css
@@ -158,5 +158,49 @@ GtkGrid:insensitive {
   padding: 4px;
   color: #eeeeec;
   border: 1px solid black;
-  border: 1px solid #333333;
+  background-image: none;
+  background-color: #333333;
   transition: all 200ms ease-out; }
+
+/***********
+ * Buttons *
+ ***********/
+.button,
+.toolbar .button.raised,
+.toolbar .raised .button,
+.toolbar GtkComboBox .button,
+.spinbutton.vertical .button {
+  border-radius: 3px;
+  transition: all 200ms ease-out;
+  border: 1px solid black;
+  background-image: linear-gradient(to bottom, #515a5a, #393f3f 40%, #212424);
+  background-color: transparent; }
+  .button:hover,
+  .toolbar .button.raised:hover,
+  .toolbar .raised .button:hover,
+  .toolbar GtkComboBox .button:hover,
+  .spinbutton.vertical .button:hover {
+    border: 1px solid black;
+    background-image: linear-gradient(to bottom, #5d6767, #515a5a, #393f3f);
+    background-color: transparent; }
+  .button:active,
+  .toolbar .button.raised:active,
+  .toolbar .raised .button:active,
+  .toolbar GtkComboBox .button:active,
+  .spinbutton.vertical .button:active {
+    border: 1px solid black;
+    background-image: linear-gradient(to bottom, #090909, #212424, #2d3232);
+    background-color: transparent; }
+  .button:insensitive, .button:backdrop:insensitive,
+  .toolbar .button.raised:insensitive,
+  .toolbar .button.raised:backdrop:insensitive,
+  .toolbar .raised .button:insensitive,
+  .toolbar .raised .button:backdrop:insensitive,
+  .toolbar GtkComboBox .button:insensitive,
+  .toolbar GtkComboBox .button:backdrop:insensitive,
+  .spinbutton.vertical .button:insensitive,
+  .spinbutton.vertical .button:backdrop:insensitive {
+    color: white;
+    border: 1px solid black;
+    background-image: linear-gradient(to bottom, transparent);
+    background-color: transparent; }
diff --git a/themes/Adwaita/gtk-3.0/gtk.css b/themes/Adwaita/gtk-3.0/gtk.css
index 5fe237f..20b7fb5 100644
--- a/themes/Adwaita/gtk-3.0/gtk.css
+++ b/themes/Adwaita/gtk-3.0/gtk.css
@@ -58,7 +58,7 @@ debug {
 *:insensitive {
   background-color: white;
   color: #17191a;
-  border-color: #171b1c; }
+  border-color: #bababa; }
 
 *:insensitive:backdrop {
   /* I want everything nice and flat in the unfocused window */
@@ -157,6 +157,50 @@ GtkGrid:insensitive {
 .entry {
   padding: 4px;
   color: #2e3436;
-  border: 1px solid black;
-  border: 1px solid white;
+  border: 1px solid #a1a1a1;
+  background-image: none;
+  background-color: white;
   transition: all 200ms ease-out; }
+
+/***********
+ * Buttons *
+ ***********/
+.button,
+.toolbar .button.raised,
+.toolbar .raised .button,
+.toolbar GtkComboBox .button,
+.spinbutton.vertical .button {
+  border-radius: 3px;
+  transition: all 200ms ease-out;
+  border: 1px solid #a1a1a1;
+  background-image: linear-gradient(to bottom, white, #ededed 40%, lightgrey);
+  background-color: transparent; }
+  .button:hover,
+  .toolbar .button.raised:hover,
+  .toolbar .raised .button:hover,
+  .toolbar GtkComboBox .button:hover,
+  .spinbutton.vertical .button:hover {
+    border: 1px solid #a1a1a1;
+    background-image: linear-gradient(to bottom, white, white, #ededed);
+    background-color: transparent; }
+  .button:active,
+  .toolbar .button.raised:active,
+  .toolbar .raised .button:active,
+  .toolbar GtkComboBox .button:active,
+  .spinbutton.vertical .button:active {
+    border: 1px solid #a1a1a1;
+    background-image: linear-gradient(to bottom, #bababa, lightgrey, #e0e0e0);
+    background-color: transparent; }
+  .button:insensitive, .button:backdrop:insensitive,
+  .toolbar .button.raised:insensitive,
+  .toolbar .button.raised:backdrop:insensitive,
+  .toolbar .raised .button:insensitive,
+  .toolbar .raised .button:backdrop:insensitive,
+  .toolbar GtkComboBox .button:insensitive,
+  .toolbar GtkComboBox .button:backdrop:insensitive,
+  .spinbutton.vertical .button:insensitive,
+  .spinbutton.vertical .button:backdrop:insensitive {
+    color: #17191a;
+    border: 1px solid #a1a1a1;
+    background-image: linear-gradient(to bottom, transparent);
+    background-color: transparent; }
diff --git a/themes/Adwaita/gtk-3.0/gtk.scss b/themes/Adwaita/gtk-3.0/gtk.scss
index e495ca9..3a4b017 100644
--- a/themes/Adwaita/gtk-3.0/gtk.scss
+++ b/themes/Adwaita/gtk-3.0/gtk.scss
@@ -12,7 +12,7 @@ $theme_bg_color: #ededed;
 $theme_fg_color: #2e3436;
 $theme_selected_fg_color: #ffffff;
 $theme_selected_bg_color: #4a90d9;
-$borders: darken($theme_fg_color,40%);
+$borders: darken($theme_bg_color,30%);
 
 $link_color: lighten($theme_selected_bg_color,10%);
 $warning_color: #f57900;