Merge pull request #161 from progandy/sass

Basic support for checkboxes and radio buttons
pull/224/head
Satyajit Sahoo 2014-10-20 23:57:52 +05:30
commit 868b8e490e
6 changed files with 61 additions and 8 deletions

10
Makefile 100644
View File

@ -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 :

View File

@ -62,7 +62,7 @@
&:selected { @extend %selected_items; } &:selected { @extend %selected_items; }
&:insensitive, &: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; } &:insensitive { -gtk-image-effect: dim; }
@ -103,7 +103,7 @@
&:insensitive { &:insensitive {
background-color: shade(shade($bg_color, 0.95), 1.05); 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; } &:selected { @extend %selected_items; }
@ -122,7 +122,7 @@ GtkLabel {
&:selected { @extend %selected_items; } &:selected { @extend %selected_items; }
&:insensitive { color: mix($fg_color, $bg_color, 50%); } &:insensitive { color: mix($fg_color, $bg_color, 0.50); }
} }
.dim-label { .dim-label {
@ -156,7 +156,7 @@ GtkAssistant {
GtkLabel { GtkLabel {
padding: $spacing ($spacing * 2); 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 { GtkTextView {
/* this will get overridden by .view, needed by gedit line numbers */ /* 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);
} }

View File

@ -88,9 +88,11 @@
box-shadow: 0 1px 3px -1px alpha($dark_shadow, .5); box-shadow: 0 1px 3px -1px alpha($dark_shadow, .5);
} }
&:active { &:checked, &:active {
@include linear-gradient(shade($bg, .95)); @include linear-gradient(shade($bg, .95));
}
&:active {
box-shadow: inset 1px 0 alpha($dark_shadow, .07), box-shadow: inset 1px 0 alpha($dark_shadow, .07),
inset 0 1px alpha($dark_shadow, .08), inset 0 1px alpha($dark_shadow, .08),
inset -1px 0 alpha($dark_shadow, .07), inset -1px 0 alpha($dark_shadow, .07),

View File

@ -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);
}

View File

@ -83,7 +83,7 @@
padding: $spacing; padding: $spacing;
border: none; border: none;
background: 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 { &:hover, &:hover:focus {
background: none; background: none;
@ -98,7 +98,7 @@
&:backdrop { &:backdrop {
background-image: none; 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; icon-shadow: none;
} }
} }

View File

@ -1,6 +1,7 @@
@import "colors"; @import "colors";
@import "base"; @import "base";
@import "button"; @import "button";
@import "toggle";
@import "entry"; @import "entry";
@import "menu"; @import "menu";
@import "toolbar"; @import "toolbar";