Merge pull request #161 from progandy/sass

Basic support for checkboxes and radio buttons

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 :

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

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),

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

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

gtk-3.0/scss/widgets.scss

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