From e03e412f40a8d83df4c79fdcfc12c7a0f76bdf6b Mon Sep 17 00:00:00 2001
From: progandy <code@progandy>
Date: Mon, 20 Oct 2014 10:22:07 +0200
Subject: [PATCH 1/3] Essential support for radio and checkbox
Supports sticky button, indeterminate radio and indeterminate checkbox.
This requires the following icons in your icon theme.
* checkbox-checked-symbolic.svg
* checkbox-mixed-symbolic.svg
* checkbox-symbolic.svg
* radio-checked-symbolic.svg
* radio-mixed-symbolic.svg
* radio-symbolic.svg
Fallback icons are available in the Adwaita icon theme.
---
gtk-3.0/scss/_button.scss | 4 +++-
gtk-3.0/scss/_toggle.scss | 40 +++++++++++++++++++++++++++++++++++++++
gtk-3.0/scss/widgets.scss | 1 +
3 files changed, 44 insertions(+), 1 deletion(-)
create mode 100644 gtk-3.0/scss/_toggle.scss
diff --git a/gtk-3.0/scss/_button.scss b/gtk-3.0/scss/_button.scss
index fe017a6..8efdfdc 100644
--- a/gtk-3.0/scss/_button.scss
+++ b/gtk-3.0/scss/_button.scss
@@ -88,9 +88,11 @@
box-shadow: 0 1px 3px -1px alpha($dark_shadow, .5);
}
- &:active {
+ &:checked, &:active {
@include linear-gradient(shade($bg, .95));
+ }
+ &:active {
box-shadow: inset 1px 0 alpha($dark_shadow, .07),
inset 0 1px alpha($dark_shadow, .08),
inset -1px 0 alpha($dark_shadow, .07),
diff --git a/gtk-3.0/scss/_toggle.scss b/gtk-3.0/scss/_toggle.scss
new file mode 100644
index 0000000..a3af16a
--- /dev/null
+++ b/gtk-3.0/scss/_toggle.scss
@@ -0,0 +1,40 @@
+/*************************
+ * Check and Radio items *
+ *************************/
+@mixin toggle($type, $bg, $fg) {
+ color: $fg;
+ background-image: none;
+ -gtk-icon-source: -gtk-icontheme('#{$type}-symbolic');
+
+ &:checked, &:active {
+ -gtk-icon-source: -gtk-icontheme('#{$type}-checked-symbolic');
+ }
+
+ &:inconsistent {
+ -gtk-icon-source: -gtk-icontheme('#{$type}-mixed-symbolic');
+ }
+
+ &:focus, &:hover {
+ color: shade($fg, 1.2);
+ }
+
+ &:active {
+ color: shade($fg, 0.8);
+ }
+
+ &:insensitive {
+ color: mix($bg, $fg, .5);
+ }
+
+ &:active *:insensitive {
+ color: mix($bg, $fg, .8);
+ }
+
+}
+
+.radio {
+ @include toggle("radio", $bg_color, $fg_color);
+}
+.check {
+ @include toggle("checkbox", $bg_color, $fg_color);
+}
diff --git a/gtk-3.0/scss/widgets.scss b/gtk-3.0/scss/widgets.scss
index 09c5ce7..1780fbc 100644
--- a/gtk-3.0/scss/widgets.scss
+++ b/gtk-3.0/scss/widgets.scss
@@ -1,6 +1,7 @@
@import "colors";
@import "base";
@import "button";
+@import "toggle";
@import "entry";
@import "menu";
@import "toolbar";
From cd54212f23f1d3d1e654a12aa75c12bff5965b44 Mon Sep 17 00:00:00 2001
From: progandy <code@progandy>
Date: Mon, 20 Oct 2014 10:23:51 +0200
Subject: [PATCH 2/3] Simplistic Makefile to call sass
---
Makefile | 10 ++++++++++
1 file changed, 10 insertions(+)
create mode 100644 Makefile
diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..e5f44c6
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,10 @@
+SASS=sass
+
+css:
+ $(SASS) --update gtk-3.0/scss:gtk-3.0/gen
+
+all: css
+
+
+.PHONY: css
+# vim: set ts=4 sw=4 tw=0 noet :
From bc367f6471751b68dd68292daf7d4a89fd6d217b Mon Sep 17 00:00:00 2001
From: progandy <code@progandy>
Date: Mon, 20 Oct 2014 10:40:41 +0200
Subject: [PATCH 3/3] The mix command doesn't accept percent
---
gtk-3.0/scss/_base.scss | 10 +++++-----
gtk-3.0/scss/_toolbar.scss | 4 ++--
2 files changed, 7 insertions(+), 7 deletions(-)
diff --git a/gtk-3.0/scss/_base.scss b/gtk-3.0/scss/_base.scss
index 224814b..521af8f 100644
--- a/gtk-3.0/scss/_base.scss
+++ b/gtk-3.0/scss/_base.scss
@@ -62,7 +62,7 @@
&:selected { @extend %selected_items; }
&:insensitive,
- &:insensitive:insensitive { color: mix($fg_color, $bg_color, 50%); }
+ &:insensitive:insensitive { color: mix($fg_color, $bg_color, 0.50); }
&:insensitive { -gtk-image-effect: dim; }
@@ -103,7 +103,7 @@
&:insensitive {
background-color: shade(shade($bg_color, 0.95), 1.05);
- color: mix($fg_color, $bg_color, 50%);
+ color: mix($fg_color, $bg_color, 0.50);
}
&:selected { @extend %selected_items; }
@@ -122,7 +122,7 @@ GtkLabel {
&:selected { @extend %selected_items; }
- &:insensitive { color: mix($fg_color, $bg_color, 50%); }
+ &:insensitive { color: mix($fg_color, $bg_color, 0.50); }
}
.dim-label {
@@ -156,7 +156,7 @@ GtkAssistant {
GtkLabel {
padding: $spacing ($spacing * 2);
- &.highlight { background-color: mix($bg_color, $fg_color, 80%); }
+ &.highlight { background-color: mix($bg_color, $fg_color, 0.80); }
}
}
@@ -165,7 +165,7 @@ GtkAssistant {
GtkTextView {
/* this will get overridden by .view, needed by gedit line numbers */
- background-color: mix($bg_color, $base_color, 50%);
+ background-color: mix($bg_color, $base_color, 0.50);
}
diff --git a/gtk-3.0/scss/_toolbar.scss b/gtk-3.0/scss/_toolbar.scss
index fd96a69..491a507 100644
--- a/gtk-3.0/scss/_toolbar.scss
+++ b/gtk-3.0/scss/_toolbar.scss
@@ -83,7 +83,7 @@
padding: $spacing;
border: none;
background: none;
- color: mix($titlebar_fg_color, $titlebar_bg_color, 90%);
+ color: mix($titlebar_fg_color, $titlebar_bg_color, 0.90);
&:hover, &:hover:focus {
background: none;
@@ -98,7 +98,7 @@
&:backdrop {
background-image: none;
- color: mix($titlebar_fg_color, $titlebar_bg_color, 60%);
+ color: mix($titlebar_fg_color, $titlebar_bg_color, 0.60);
icon-shadow: none;
}
}