[gnome-themes-standard/wip/sass] buttons mixin testbed
- From: Jakub Steiner <jimmac src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-themes-standard/wip/sass] buttons mixin testbed
- Date: Mon, 12 May 2014 19:42:26 +0000 (UTC)
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;
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]