[gnome-themes-standard/wip/sass] fist test of mixins
- From: Jakub Steiner <jimmac src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-themes-standard/wip/sass] fist test of mixins
- Date: Mon, 12 May 2014 15:15:01 +0000 (UTC)
commit 19854061ec5af2ee62ce968bf7f9d09609102966
Author: Jakub Steiner <jimmac gmail com>
Date: Mon May 12 17:14:32 2014 +0200
fist test of mixins
themes/Adwaita/gtk-3.0/_common.scss | 13 +++++++++++++
themes/Adwaita/gtk-3.0/_drawing.scss | 8 ++++++++
themes/Adwaita/gtk-3.0/gtk-dark.css | 30 ++++++++++++++++++++----------
themes/Adwaita/gtk-3.0/gtk.css | 12 +++++++++++-
themes/Adwaita/gtk-3.0/gtk.scss | 2 +-
5 files changed, 53 insertions(+), 12 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_common.scss b/themes/Adwaita/gtk-3.0/_common.scss
index 80a4750..eddaba9 100644
--- a/themes/Adwaita/gtk-3.0/_common.scss
+++ b/themes/Adwaita/gtk-3.0/_common.scss
@@ -140,3 +140,16 @@ GtkGrid:insensitive {
// spinner animation
@import 'spinner';
+
+/****************
+ * Text Entries *
+ ****************/
+
+ .entry {
+ padding: 4px;
+ color: $theme_fg_color;
+ @include draw_border($borders);
+ @include draw_solid_bg($theme_base_color);
+ transition: all 200ms ease-out;
+}
+
diff --git a/themes/Adwaita/gtk-3.0/_drawing.scss b/themes/Adwaita/gtk-3.0/_drawing.scss
index 52dd642..b67f257 100644
--- a/themes/Adwaita/gtk-3.0/_drawing.scss
+++ b/themes/Adwaita/gtk-3.0/_drawing.scss
@@ -1 +1,9 @@
// Drawing mixins
+
+ mixin draw_border($c) {
+ border: 1px solid $c;
+}
+
+ mixin draw_solid_bg($c) {
+ border: 1px solid $c;
+}
diff --git a/themes/Adwaita/gtk-3.0/gtk-dark.css b/themes/Adwaita/gtk-3.0/gtk-dark.css
index 581d22b..4cba007 100644
--- a/themes/Adwaita/gtk-3.0/gtk-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-dark.css
@@ -111,31 +111,31 @@ GtkGrid:insensitive {
*****************/
@keyframes spinner {
0.00% {
- background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(parsedalpha(currentColor,0.875)), to(transparent)), -gtk-gradient(radial, center center, 0, center center,
0.5, to(parsedalpha(currentColor,0.75)), to(transparent)), -gtk-gradient(radial, center center, 0, center
center, 0.5, to(parsedalpha(currentColor,0.625)), to(transparent)), -gtk-gradient(radial, center center, 0,
center center, 0.5, to(parsedalpha(currentColor,0.5)), to(transparent)), -gtk-gradient(radial, center center,
0, center center, 0.5, to(parsedalpha(currentColor,0.375)), to(transparent)), -gtk-gradient(radial, center
center, 0, center center, 0.5, to(parsedalpha(currentColor,0.25)), to(transparent)), -gtk-gradient(radial,
center center, 0, center center, 0.5, to(parsedalpha(currentColor,0.125)), to(transparent)); }
+ background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.875)),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.75)),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.625)),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.5)),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.375)),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.25)),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.125)),
to(transparent)); }
12.5% {
- background-image: -gtk-gradient(radial, center center, 0, center center, 0.5,
to(parsedalpha(currentColor,0.875)), to(transparent)), -gtk-gradient(radial, center center, 0, center center,
0.5, to(parsedalpha(currentColor,0.75)), to(transparent)), -gtk-gradient(radial, center center, 0, center
center, 0.5, to(parsedalpha(currentColor,0.625)), to(transparent)), -gtk-gradient(radial, center center, 0,
center center, 0.5, to(parsedalpha(currentColor,0.5)), to(transparent)), -gtk-gradient(radial, center center,
0, center center, 0.5, to(parsedalpha(currentColor,0.375)), to(transparent)), -gtk-gradient(radial, center
center, 0, center center, 0.5, to(parsedalpha(currentColor,0.25)), to(transparent)), -gtk-gradient(radial,
center center, 0, center center, 0.5, to(parsedalpha(currentColor,0.125)), to(transparent)),
-gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)); }
+ background-image: -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.875)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.75)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.625)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.5)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.375)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.25)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.125)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(currentColor), to(transparent)); }
25.0% {
- background-image: -gtk-gradient(radial, center center, 0, center center, 0.5,
to(parsedalpha(currentColor,0.75)), to(transparent)), -gtk-gradient(radial, center center, 0, center center,
0.5, to(parsedalpha(currentColor,0.625)), to(transparent)), -gtk-gradient(radial, center center, 0, center
center, 0.5, to(parsedalpha(currentColor,0.5)), to(transparent)), -gtk-gradient(radial, center center, 0,
center center, 0.5, to(parsedalpha(currentColor,0.375)), to(transparent)), -gtk-gradient(radial, center
center, 0, center center, 0.5, to(parsedalpha(currentColor,0.25)), to(transparent)), -gtk-gradient(radial,
center center, 0, center center, 0.5, to(parsedalpha(currentColor,0.125)), to(transparent)),
-gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent)),
-gtk-gradient(radial, center center, 0, center center, 0.5, to(parsedalpha(currentColor,0.875)),
to(transparent)); }
+ background-image: -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.75)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.625)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.5)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.375)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.25)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.125)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(currentColor), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.875)), to(transparent)); }
37.5% {
- background-image: -gtk-gradient(radial, center center, 0, center center, 0.5,
to(parsedalpha(currentColor,0.625)), to(transparent)), -gtk-gradient(radial, center center, 0, center center,
0.5, to(parsedalpha(currentColor,0.5)), to(transparent)), -gtk-gradient(radial, center center, 0, center
center, 0.5, to(parsedalpha(currentColor,0.375)), to(transparent)), -gtk-gradient(radial, center center, 0,
center center, 0.5, to(parsedalpha(currentColor,0.25)), to(transparent)), -gtk-gradient(radial, center
center, 0, center center, 0.5, to(parsedalpha(currentColor,0.125)), to(transparent)), -gtk-gradient(radial,
center center, 0, center center, 0.5, to(currentColor), to(transparent)), -gtk-gradient(radial, center
center, 0, center center, 0.5, to(parsedalpha(currentColor,0.875)), to(transparent)), -gtk-gradient(radial,
center center, 0, center center, 0.5, to(parsedalpha(currentColor,0.75)), to(transparent)); }
+ background-image: -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.625)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.5)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.375)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.25)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.125)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(currentColor), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.875)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.75)), to(transparent)); }
50.0% {
- background-image: -gtk-gradient(radial, center center, 0, center center, 0.5,
to(parsedalpha(currentColor,0.5)), to(transparent)), -gtk-gradient(radial, center center, 0, center center,
0.5, to(parsedalpha(currentColor,0.375)), to(transparent)), -gtk-gradient(radial, center center, 0, center
center, 0.5, to(parsedalpha(currentColor,0.25)), to(transparent)), -gtk-gradient(radial, center center, 0,
center center, 0.5, to(parsedalpha(currentColor,0.125)), to(transparent)), -gtk-gradient(radial, center
center, 0, center center, 0.5, to(currentColor), to(transparent)), -gtk-gradient(radial, center center, 0,
center center, 0.5, to(parsedalpha(currentColor,0.875)), to(transparent)), -gtk-gradient(radial, center
center, 0, center center, 0.5, to(parsedalpha(currentColor,0.75)), to(transparent)), -gtk-gradient(radial,
center center, 0, center center, 0.5, to(parsedalpha(currentColor,0.625)), to(transparent)); }
+ background-image: -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.5)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.375)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.25)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.125)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(currentColor), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.875)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.75)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.625)), to(transparent)); }
62.5% {
- background-image: -gtk-gradient(radial, center center, 0, center center, 0.5,
to(parsedalpha(currentColor,0.375)), to(transparent)), -gtk-gradient(radial, center center, 0, center center,
0.5, to(parsedalpha(currentColor,0.25)), to(transparent)), -gtk-gradient(radial, center center, 0, center
center, 0.5, to(parsedalpha(currentColor,0.125)), to(transparent)), -gtk-gradient(radial, center center, 0,
center center, 0.5, to(currentColor), to(transparent)), -gtk-gradient(radial, center center, 0, center
center, 0.5, to(parsedalpha(currentColor,0.875)), to(transparent)), -gtk-gradient(radial, center center, 0,
center center, 0.5, to(parsedalpha(currentColor,0.75)), to(transparent)), -gtk-gradient(radial, center
center, 0, center center, 0.5, to(parsedalpha(currentColor,0.625)), to(transparent)), -gtk-gradient(radial,
center center, 0, center center, 0.5, to(parsedalpha(currentColor,0.5)), to(transparent)); }
+ background-image: -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.375)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.25)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.125)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(currentColor), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.875)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.75)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.625)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.5)), to(transparent)); }
75.0% {
- background-image: -gtk-gradient(radial, center center, 0, center center, 0.5,
to(parsedalpha(currentColor,0.25)), to(transparent)), -gtk-gradient(radial, center center, 0, center center,
0.5, to(parsedalpha(currentColor,0.125)), to(transparent)), -gtk-gradient(radial, center center, 0, center
center, 0.5, to(currentColor), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(parsedalpha(currentColor,0.875)), to(transparent)), -gtk-gradient(radial, center center, 0, center center,
0.5, to(parsedalpha(currentColor,0.75)), to(transparent)), -gtk-gradient(radial, center center, 0, center
center, 0.5, to(parsedalpha(currentColor,0.625)), to(transparent)), -gtk-gradient(radial, center center, 0,
center center, 0.5, to(parsedalpha(currentColor,0.5)), to(transparent)), -gtk-gradient(radial, center center,
0, center center, 0.5, to(parsedalpha(currentColor,0.375)), to(transparent)); }
+ background-image: -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.25)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.125)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(currentColor), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.875)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.75)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.625)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.5)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.375)), to(transparent)); }
87.5% {
- background-image: -gtk-gradient(radial, center center, 0, center center, 0.5,
to(parsedalpha(currentColor,0.125)), to(transparent)), -gtk-gradient(radial, center center, 0, center center,
0.5, to(currentColor), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(parsedalpha(currentColor,0.875)), to(transparent)), -gtk-gradient(radial, center center, 0, center center,
0.5, to(parsedalpha(currentColor,0.75)), to(transparent)), -gtk-gradient(radial, center center, 0, center
center, 0.5, to(parsedalpha(currentColor,0.625)), to(transparent)), -gtk-gradient(radial, center center, 0,
center center, 0.5, to(parsedalpha(currentColor,0.5)), to(transparent)), -gtk-gradient(radial, center center,
0, center center, 0.5, to(parsedalpha(currentColor,0.375)), to(transparent)), -gtk-gradient(radial, center
center, 0, center center, 0.5, to(parsedalpha(currentColor,0.25)), to(transparent)); }
+ background-image: -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.125)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(currentColor), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.875)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.75)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.625)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.5)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.375)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.25)), to(transparent)); }
100% {
- background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(parsedalpha(currentColor,0.875)), to(transparent)), -gtk-gradient(radial, center center, 0, center center,
0.5, to(parsedalpha(currentColor,0.75)), to(transparent)), -gtk-gradient(radial, center center, 0, center
center, 0.5, to(parsedalpha(currentColor,0.625)), to(transparent)), -gtk-gradient(radial, center center, 0,
center center, 0.5, to(parsedalpha(currentColor,0.5)), to(transparent)), -gtk-gradient(radial, center center,
0, center center, 0.5, to(parsedalpha(currentColor,0.375)), to(transparent)), -gtk-gradient(radial, center
center, 0, center center, 0.5, to(parsedalpha(currentColor,0.25)), to(transparent)), -gtk-gradient(radial,
center center, 0, center center, 0.5, to(parsedalpha(currentColor,0.125)), to(transparent)); } }
+ background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.875)),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.75)),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.625)),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.5)),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.375)),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.25)),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(alpha(currentColor,0.125)),
to(transparent)); } }
.spinner {
background-color: transparent;
@@ -145,8 +145,18 @@ GtkGrid:insensitive {
background-repeat: no-repeat; }
.spinner:active {
- background-image: -gtk-gradient(radial, center center, 0, center center, 0.5,
to(parsedalpha(currentColor,0.875)), to(transparent)), -gtk-gradient(radial, center center, 0, center center,
0.5, to(parsedalpha(currentColor,0.75)), to(transparent)), -gtk-gradient(radial, center center, 0, center
center, 0.5, to(parsedalpha(currentColor,0.625)), to(transparent)), -gtk-gradient(radial, center center, 0,
center center, 0.5, to(parsedalpha(currentColor,0.5)), to(transparent)), -gtk-gradient(radial, center center,
0, center center, 0.5, to(parsedalpha(currentColor,0.375)), to(transparent)), -gtk-gradient(radial, center
center, 0, center center, 0.5, to(parsedalpha(currentColor,0.25)), to(transparent)), -gtk-gradient(radial,
center center, 0, center center, 0.5, to(parsedalpha(currentColor,0.125)), to(transparent)),
-gtk-gradient(radial, center center, 0, center center, 0.5, to(currentColor), to(transparent));
+ background-image: -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.875)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.75)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.625)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.5)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.375)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.25)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(alpha(currentColor,0.125)), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5,
to(currentColor), to(transparent));
animation: spinner 1s infinite linear; }
.button .spinner:active {
color: #eeeeec; }
+
+/****************
+ * Text Entries *
+ ****************/
+.entry {
+ padding: 4px;
+ color: #eeeeec;
+ border: 1px solid black;
+ border: 1px solid #333333;
+ transition: all 200ms ease-out; }
diff --git a/themes/Adwaita/gtk-3.0/gtk.css b/themes/Adwaita/gtk-3.0/gtk.css
index b7d26f0..5fe237f 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: #a1a1a1; }
+ border-color: #171b1c; }
*:insensitive:backdrop {
/* I want everything nice and flat in the unfocused window */
@@ -150,3 +150,13 @@ GtkGrid:insensitive {
.button .spinner:active {
color: #2e3436; }
+
+/****************
+ * Text Entries *
+ ****************/
+.entry {
+ padding: 4px;
+ color: #2e3436;
+ border: 1px solid black;
+ border: 1px solid white;
+ transition: all 200ms ease-out; }
diff --git a/themes/Adwaita/gtk-3.0/gtk.scss b/themes/Adwaita/gtk-3.0/gtk.scss
index 06a02f1..e495ca9 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_bg_color,40%);
+$borders: darken($theme_fg_color,40%);
$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]