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.
This commit is contained in:
progandy
2014-10-20 10:22:07 +02:00
parent 5be0567230
commit e03e412f40
3 changed files with 44 additions and 1 deletions
+40
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);
}