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.
pull/161/head
progandy 2014-10-20 10:22:07 +02:00
parent 5be0567230
commit e03e412f40
3 changed files with 44 additions and 1 deletions

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

@ -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";