Fix linked buttons and other fixes

gtk-3.0/scss/_base.scss

@@ -1,6 +1,11 @@
 @import "functions";
 @import "global";
 
+
+/**************
+ ! GTK settings
+***************/
+
 * {
 	-GtkArrow-arrow-scaling: 0.5;
 	-GtkButton-child-displacement-x: 0;
@@ -11,8 +16,6 @@
 	-GtkButton-interior-focus: true;
 	-GtkButtonBox-child-min-height: 24;
 	-GtkButtonBox-child-internal-pad-y: 1;
-	-GtkCheckButton-indicator-size: 16;
-	-GtkCheckMenuItem-indicator-size: 14;
 	-GtkExpander-expander-size: 8;
 	-GtkMenu-horizontal-padding: 0;
 	-GtkMenu-vertical-padding: 0;
@@ -37,10 +40,6 @@
 	-GtkWindow-resize-grip-width: 0;
 	-WnckTasklist-fade-overlay-rect: 0;
 
-	/* legacy stuff */
-	-GtkWidget-focus-line-width: 1;
-	-GtkWidget-focus-padding: 0;
-
 	outline-color: alpha($selected_bg_color, 0.5);
 	outline-style: dashed;
 	outline-width: 1px;
@@ -48,9 +47,11 @@
 	outline-radius: 2px;
 }
 
-/***************
+
- * base states *
+/*************
- ***************/
+ ! Base states
+ *************/
+
 %selected_items {
 	&, &:focus {
 		background-color: $selected_bg_color;
@@ -88,7 +89,7 @@
 }
 
 .gtkstyle-fallback {
-	background-color: $bg_color;
+	background-color: alpha($bg_color, .5);
 	color: $fg_color;
 
 	&:prelight {
@@ -129,75 +130,3 @@ GtkLabel {
 	opacity: 0.5;
 	text-shadow: none;
 }
-
-.view {
-	color: $text_color;
-	background-color: $base_color;
-
-	&:selected { @extend %selected_items; }
-}
-
-.rubberband {
-	border: 1px solid $selected_bg_color;
-	background-color: alpha($selected_bg_color, 0.2);
-}
-
-/* used by GtkScrolledWindow, shown when content is touch-dragged past boundaries. */
-.overshoot { background-color: alpha($selected_bg_color, 0.2); }
-
-GtkAssistant {
-	.sidebar {
-		background-color: $base_color;
-		border-top: 1px solid border_normal($base_color);
-
-		&:dir(ltr) { border-right: 1px solid border_normal($base_color); }
-		&:dir(rtl) { border-left: 1px solid border_normal($base_color); }
-
-		GtkLabel {
-			padding: $spacing ($spacing * 2);
-
-			&.highlight { background-color: mix($bg_color, $fg_color, 0.80); }
-		}
-	}
-
-	&.csd .sidebar { border-top-style: none; }
-}
-
-GtkTextView {
-	/* this will get overridden by .view, needed by gedit line numbers */
-	background-color: mix($bg_color, $base_color, 0.50);
-}
-
-
-GtkFlowBox .grid-child {
-	padding: 3px;
-	border-radius: 3px;
-
-	&:selected {
-		@extend %selected_items;
-
-		outline-offset: -2px;
-	}
-}
-
-/*********************
- * spinner animation *
- *********************/
-@keyframes spin {
-	to { -gtk-icon-transform: rotate(1turn); }
-}
-
-.spinner {
-	background-image: none;
-	background-color: blue;
-	opacity: 0; // non spinning spinner makes no sense
-
-	-gtk-icon-source: -gtk-icontheme("process-working-symbolic");
-
-	&:active {
-		opacity: 1;
-		animation: spin 1s linear infinite;
-
-		&:insensitive { opacity: 0.5; }
-	}
-}

gtk-3.0/scss/_button.scss

@@ -1,4 +1,10 @@
 @import "functions";
+@import "global";
+
+
+/*********
+ ! Buttons
+**********/
 
 @mixin linked_button($bg, $shadow) {
 	border: 1px solid border_normal($bg);
@@ -47,7 +53,9 @@
 	}
 
 	&:active, &:active:hover,
-	&:active:focus, &:active:hover:focus {
+	&:active:focus, &:active:hover:focus,
+	&:checked, &:checked:hover,
+	&:checked:focus, &:checked:hover:focus {
 		box-shadow: inset -1px 0 border_active($bg),
 					inset 1px 0 alpha($shadow, .07),
 					inset 0 1px alpha($shadow, .08),
@@ -58,9 +66,11 @@
 
 	&:last-child, &:only-child,
 	&:insensitive:last-child, &:insensitive:only-child,
-	&:active *:insensitive:last-child, &:active *:insensitive:only-child { box-shadow: none; }
+	&:active *:insensitive:last-child, &:active *:insensitive:only-child,
+	&:checked *:insensitive:last-child, &:checked *:insensitive:only-child { box-shadow: none; }
 
-	&:active:last-child, &:active:only-child {
+	&:active:last-child, &:active:only-child,
+	&:checked:last-child, &:checked:only-child {
 		box-shadow: inset 1px 0 alpha($shadow, .07),
 					inset 0 1px alpha($shadow, .08),
 					inset -1px 0 alpha($shadow, .07);
@@ -90,9 +100,7 @@
 
 	&: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),
@@ -106,7 +114,8 @@
 		box-shadow: none;
 	}
 
-	&:active *:insensitive {
+	&:active *:insensitive,
+	&:checked *:insensitive {
 		@include linear-gradient(shade($bg, .8));
 
 		box-shadow: none;

gtk-3.0/scss/_entry.scss

@@ -1,4 +1,10 @@
 @import "functions";
+@import "global";
+
+
+/*******
+ ! Entry
+********/
 
 @mixin linked_entry($bg) {
 	border-width: 1px;

gtk-3.0/scss/_functions.scss

@@ -1,5 +1,14 @@
 @import "global";
 
+$modules: () !default;
+
+@mixin exports($name) {
+	@if (not index($modules, $name)) {
+		$modules: append($modules, $name) !global;
+		@content;
+	}
+}
+
 @function alpha($color, $amount) {
 	@if type-of($color) == "color" {
 		@return fade-out($color, (1 - $amount));

gtk-3.0/scss/_grid.scss

@@ -1,4 +1,10 @@
 @import "functions";
+@import "global";
+
+
+/******************
+ ! Grid and flowbox
+*******************/
 
 .list {
     background-color: shade($bg_color, 0.97);
@@ -26,4 +32,15 @@
     }
 }
 
-.grid-child { padding: $spacing; }
+.grid-child {
+    &, GtkFlowBox & {
+        padding: $spacing;
+        border-radius: $roundness;
+
+        &:selected {
+            @extend %selected_items;
+
+            outline-offset: -2px;
+        }
+    }
+}

gtk-3.0/scss/_menu.scss

@@ -1,6 +1,12 @@
 @import "functions";
+@import "global";
 @import "entry";
 
+
+/******
+ ! Menu
+*******/
+
 GtkTreeMenu, GtkMenuToolButton, GtkComboBox {
     &.menu, .menu {
         background-color: $menu_bg_color;
@@ -113,6 +119,11 @@ GtkTreeMenu, GtkMenuToolButton, GtkComboBox {
 
 GtkModelMenuItem GtkBox GtkImage { padding-right: $spacing; }
 
+
+/*********
+ ! Popover
+**********/
+
 GtkPopover {
 	@include border($menu_bg_color);
 

gtk-3.0/scss/_sidebar.scss

@@ -1,4 +1,10 @@
 @import "functions";
+@import "global";
+
+
+/*********
+ ! Sidebar
+**********/
 
 .sidebar {
     &, &.view, & .view, & GtkScrolledWindow {
@@ -51,6 +57,17 @@
         background-color: $bg_color;
         color: mix($fg_color, $bg_color, 0.1);
 
+        &:dir(ltr) { border-width: 0 1px 0 0; }
+        &:dir(rtl) { border-width: 0 0 0 1px; }
+
+        GtkLabel {
+            padding: $spacing ($spacing * 2);
+
+            &.highlight { background-color: mix($bg_color, $fg_color, 0.80); }
+        }
+
+        &.csd .sidebar { border-top-style: none; }
+
         .highlight { font: bold; }
     }
 }

gtk-3.0/scss/_spinner.scss

@@ -0,0 +1,26 @@
+@import "functions";
+@import "global";
+
+
+/*******************
+ ! Spinner animation
+********************/
+
+@keyframes spin {
+    to { -gtk-icon-transform: rotate(1turn); }
+}
+
+.spinner {
+    background-image: none;
+    background-color: $selected_bg_color;
+    opacity: 0; // non spinning spinner makes no sense
+
+    -gtk-icon-source: -gtk-icontheme("process-working-symbolic");
+
+    &:active {
+        opacity: 1;
+        animation: spin 1s linear infinite;
+
+        &:insensitive { opacity: 0.5; }
+    }
+}

gtk-3.0/scss/_toggle.scss

@@ -1,6 +1,16 @@
-/*************************
+@import "functions";
- * Check and Radio items *
+@import "global";
- *************************/
+
+
+/***********************
+ ! Check and Radio items
+************************/
+
+* {
+	-GtkCheckButton-indicator-size: 16;
+	-GtkCheckMenuItem-indicator-size: 14;
+}
+
 @mixin toggle($type, $bg, $fg) {
 	color: $fg;
 	background-image: none;
@@ -32,9 +42,46 @@
 
 }
 
-.radio {
+.radio { @include toggle("radio", $bg_color, $fg_color); }
-	@include toggle("radio", $bg_color, $fg_color);
+
+.check { @include toggle("checkbox", $bg_color, $fg_color); }
+
+
+/********
+ ! Switch
+*********/
+
+GtkSwitch {
+	padding: 0;
+	border-radius: $roundness;
+	font: bold condensed;
+	outline-offset: -4px;
+
+	&.slider {
+		border: 1px solid shade($bg_color, 0.8);
+		background-color: shade($bg_color, 1.08);
+
+		&:insensitive {
+			border-color: shade($bg_color, 0.85);
+			background-color: shade($bg_color, 0.9);
+		}
+	}
+
+	&.trough {
+		border-color: shade($bg_color, 0.8);
+		background-color: shade($bg_color, 0.95);
+		color: $fg_color;
+
+		&:active {
+			border-color: shade($selected_bg_color, 0.9);
+			background-color: $selected_bg_color;
+			color: $selected_fg_color;
+		}
+
+		&:insensitive {
+			border-color: shade($bg_color, 0.85);
+			background-color: shade($bg_color, 0.9);
+			color: mix($fg_color, $bg_color, 0.5);
+		}
 	}
-.check {
-	@include toggle("checkbox", $bg_color, $fg_color);
 }

gtk-3.0/scss/_toolbar.scss

@@ -1,6 +1,11 @@
 @import "functions";
+@import "global";
 @import "button";
 
+/*********
+ ! Toolbar
+**********/
+
 @mixin toolbar($bg, $fg) {
     @include linear-gradient($bg);
     @include border($bg);

gtk-3.0/scss/_view.scss

@@ -1,4 +1,17 @@
 @import "functions";
+@import "global";
+
+
+/***************
+ ! Generic views
+****************/
+
+.view {
+    color: $text_color;
+    background-color: $base_color;
+
+    &:selected { @extend %selected_items; }
+}
 
 .cell {
     border-width: 0;
@@ -24,6 +37,68 @@ row {
     }
 }
 
+.content-view {
+    &.view {
+        background-color: $base_color;
+
+        &:prelight { background-color: alpha($selected_bg_color, 0.6); }
+
+        &:selected, &:active { background-color: $selected_bg_color; }
+
+        &:insensitive { background-color: shade($base_color, 0.9); }
+
+        &.check {
+            &, &:active, &:prelight, &:insensitive, &:selected { background-color: transparent; }
+        }
+    }
+
+    .subtitle {
+        font: smaller;
+        padding: 0 12px;
+    }
+}
+
+GtkIconView {
+    &.content-view.check { @extend .content-view.check; }
+
+    &.view.cell {
+        &:selected, &:selected:focus {
+            border: none;
+            border-radius: 2px;
+            background-image: none;
+            background-color: $selected_bg_color;
+            color: $selected_fg_color;
+        }
+    }
+}
+
+.rubberband {
+    &, &.view, &.content-view.view {
+        border: 1px solid $selected_bg_color;
+        border-radius: 0;
+        background-color: alpha($selected_bg_color, 0.3);
+    }
+}
+
+/* used by GtkScrolledWindow, shown when content is touch-dragged past boundaries. */
+.overshoot { background-color: alpha($selected_bg_color, 0.3); }
+
+GdMainIconView.content-view { -GdMainIconView-icon-size: 40; }
+
+/* this will get overridden by .view, needed by gedit line numbers */
+GtkTextView { background-color: mix($bg_color, $base_color, 0.50); }
+
+GtkDrawingArea, GtkHTML {
+    @extend .view;
+
+    &:insensitive { background-color: shade($base_color, 0.9); }
+}
+
+
+/*********************
+ ! Column view headers
+**********************/
+
 column-header {
     .button {
         &, &:active {
@@ -48,52 +123,3 @@ column-header {
         &:last-child .button { border-width: 0 0 1px 0; }
     }
 }
-
-.content-view {
-    &.view {
-        background-color: $base_color;
-
-        &:prelight { background-color: alpha($selected_bg_color, 0.6); }
-
-        &:selected, &:active { background-color: $selected_bg_color; }
-
-        &:insensitive { background-color: shade($base_color, 0.9); }
-
-        &.check {
-            &, &:active, &:prelight, &:insensitive, &:selected { background-color: transparent; }
-        }
-    }
-
-    .subtitle {
-        font: smaller;
-        padding: 0 12px;
-    }
-}
-
-GtkIconView {
-    &.content-view.check {
-        &, &:active, &:prelight, &:insensitive, &:selected { background-color: transparent; }
-    }
-
-    &.view.cell {
-        &:selected, &:selected:focus {
-            border: none;
-            border-radius: 2px;
-            background-color: $selected_bg_color;
-            background-image: none;
-            color: $selected_fg_color;
-        }
-    }
-}
-
-.rubberband {
-    &, &.view, &.content-view.view {
-        border-width: 1px;
-        border-style: solid;
-        border-color: $selected_bg_color;
-        border-radius: 0;
-        background-color: alpha($selected_bg_color, 0.3);
-    }
-}
-
-GdMainIconView.content-view { -GdMainIconView-icon-size: 40; }

gtk-3.0/scss/_window.scss

@@ -1,3 +1,11 @@
+@import "functions";
+@import "global";
+
+
+/**************
+ ! Window frame
+***************/
+
 .window-frame {
 	border: none;
 	border-radius: $roundness $roundness 0 0;