From e03e412f40a8d83df4c79fdcfc12c7a0f76bdf6b Mon Sep 17 00:00:00 2001 From: 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 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 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; } }