From 0163f1997a9ca3a33dcf61950a6b03c1231a26c9 Mon Sep 17 00:00:00 2001
From: Satyajit Sahoo <satyajit.happy@gmail.com>
Date: Tue, 9 Dec 2014 01:05:19 +0530
Subject: [PATCH] Wrap modules in exports mixin so they are included only once

---
 gtk-3.0/scss/_button.scss    |  42 ++--
 gtk-3.0/scss/_calendar.scss  |  25 +--
 gtk-3.0/scss/_entry.scss     |  31 +--
 gtk-3.0/scss/_grid.scss      |   2 +-
 gtk-3.0/scss/_infobar.scss   |  40 ++--
 gtk-3.0/scss/_menu.scss      | 340 ++++++++++++++++----------------
 gtk-3.0/scss/_notebook.scss  | 227 ++++++++++-----------
 gtk-3.0/scss/_progress.scss  | 320 +++++++++++++++---------------
 gtk-3.0/scss/_scrollbar.scss |  88 +++++----
 gtk-3.0/scss/_sidebar.scss   | 183 ++++++++---------
 gtk-3.0/scss/_spinner.scss   |  26 +--
 gtk-3.0/scss/_toggle.scss    |  78 ++++----
 gtk-3.0/scss/_toolbar.scss   | 104 +++++-----
 gtk-3.0/scss/_view.scss      | 369 ++++++++++++++++++-----------------
 gtk-3.0/scss/_window.scss    |  56 +++---
 gtk-3.0/scss/widgets.scss    |  72 -------
 16 files changed, 988 insertions(+), 1015 deletions(-)

diff --git a/gtk-3.0/scss/_button.scss b/gtk-3.0/scss/_button.scss
index 4baaf0f..44cbcd2 100755
--- a/gtk-3.0/scss/_button.scss
+++ b/gtk-3.0/scss/_button.scss
@@ -145,29 +145,31 @@
 	.linked & { @include linked_button($bg, $dark_shadow); }
 }
 
-%close_button {
-	border: 1px solid transparent;
-	background-color: transparent;
-	background-image: none;
-	box-shadow: none;
-
-	&:focus, &:hover {
-		border: 1px solid alpha(black, 0.3);
-		background-color: alpha(white, 0.2);
+@include exports("button") {
+	%close_button {
+		border: 1px solid transparent;
+		background-color: transparent;
 		background-image: none;
 		box-shadow: none;
+
+		&:focus, &:hover {
+			border: 1px solid alpha(black, 0.3);
+			background-color: alpha(white, 0.2);
+			background-image: none;
+			box-shadow: none;
+		}
+
+		&:active, &:checked, &:active:hover, &:checked:hover  {
+			border: 1px solid alpha(black, 0.3);
+			background-color: alpha(black, 0.1);
+			background-image: none;
+			box-shadow: none;
+		}
 	}
 
-	&:active, &:checked, &:active:hover, &:checked:hover  {
-		border: 1px solid alpha(black, 0.3);
-		background-color: alpha(black, 0.1);
-		background-image: none;
-		box-shadow: none;
+	.button {
+		@include button($bg_color, $fg_color);
+
+		&.default { @include button($selected_bg_color, $selected_fg_color); }
 	}
 }
-
-.button {
-	@include button($bg_color, $fg_color);
-
-	&.default { @include button($selected_bg_color, $selected_fg_color); }
-}
diff --git a/gtk-3.0/scss/_calendar.scss b/gtk-3.0/scss/_calendar.scss
index a1be572..6eacde0 100644
--- a/gtk-3.0/scss/_calendar.scss
+++ b/gtk-3.0/scss/_calendar.scss
@@ -6,19 +6,22 @@
  ! Calendar
 ***********/
 
-GtkCalendar {
-	padding: $spacing;
-	outline-offset: -1px;
+@include exports("calendar") {
+	GtkCalendar {
+		padding: $spacing;
+		outline-offset: -1px;
 
-	&:inconsistent { color: mix($fg_color, $bg_color, 0.5); }
+		&:inconsistent { color: mix($fg_color, $bg_color, 0.5); }
 
-	&.view, &.highlight, &.header, &.button {
-		&, &:hover, &:insensitive {
-			border: none;
-			background-color: transparent;
-			background-image: none;
+		&.view, &.highlight, &.header, &.button {
+			&, &:hover, &:insensitive {
+				border: none;
+				background-color: transparent;
+				background-image: none;
+			}
 		}
-	}
 
-	&.highlight { color: $selected_bg_color; }
+		&.highlight { color: $selected_bg_color; }
+	}
 }
+
diff --git a/gtk-3.0/scss/_entry.scss b/gtk-3.0/scss/_entry.scss
index d099aff..7720308 100755
--- a/gtk-3.0/scss/_entry.scss
+++ b/gtk-3.0/scss/_entry.scss
@@ -72,27 +72,32 @@
 	&.image.left { padding-right: $spacing; }
 }
 
-.entry { @include entry($base_color, $text_color); }
+@include exports("entry") {
+	.entry { @include entry($base_color, $text_color); }
+}
 
 
 /******************
  ! Combobox entry *
 *******************/
 
-GtkComboBox.combobox-entry {
-	.entry {
-		&, &:hover, &:focus, &:active, &:insensitive {
-			border-width: 1px 0 1px 1px;
-			border-top-right-radius: 0;
-			border-bottom-right-radius: 0;
+@include exports("comboboxentry") {
+	GtkComboBox.combobox-entry {
+		.entry {
+			&, &:hover, &:focus, &:active, &:insensitive {
+				border-width: 1px 0 1px 1px;
+				border-top-right-radius: 0;
+				border-bottom-right-radius: 0;
+			}
 		}
-	}
 
-	.button {
-		&, &:hover, &:focus, &:active, &:insensitive {
-			border-width: 1px 1px 1px 1px;
-			border-bottom-left-radius: 0;
-			border-top-left-radius: 0;
+		.button {
+			&, &:hover, &:focus, &:active, &:insensitive {
+				border-width: 1px 1px 1px 1px;
+				border-bottom-left-radius: 0;
+				border-top-left-radius: 0;
+			}
 		}
 	}
 }
+
diff --git a/gtk-3.0/scss/_grid.scss b/gtk-3.0/scss/_grid.scss
index 1f60beb..a92ba9a 100644
--- a/gtk-3.0/scss/_grid.scss
+++ b/gtk-3.0/scss/_grid.scss
@@ -13,7 +13,7 @@
     &-row {
         border: none;
         border-radius: 0;
-        padding: 3px;
+        padding: $spacing;
         background-image: none;
         background-color: transparent;
 
diff --git a/gtk-3.0/scss/_infobar.scss b/gtk-3.0/scss/_infobar.scss
index 29a096b..848c247 100644
--- a/gtk-3.0/scss/_infobar.scss
+++ b/gtk-3.0/scss/_infobar.scss
@@ -7,31 +7,33 @@
  ! Infobar
 **********/
 
-GtkInfoBar {
-	border: none;
+@include exports("infobar") {
+	GtkInfoBar {
+		border: none;
 
-	$types: (
-		info: ( $info_fg_color, $info_bg_color ),
-		warning: ( $warning_fg_color, $warning_bg_color ),
-		question: ( $question_fg_color, $question_bg_color ),
-		error: ( $error_fg_color, $error_bg_color ),
-	);
+		$types: (
+			info: ( $info_fg_color, $info_bg_color ),
+			warning: ( $warning_fg_color, $warning_bg_color ),
+			question: ( $question_fg_color, $question_bg_color ),
+			error: ( $error_fg_color, $error_bg_color ),
+		);
 
 
-	@each $type, $colors in $types {
-		$fg_color: nth($colors, 1);
-		$bg_color: nth($colors, 2);
+		@each $type, $colors in $types {
+			$fg_color: nth($colors, 1);
+			$bg_color: nth($colors, 2);
 
-		&.#{$type} {
-			border: 1px solid shade($bg_color, 0.8);
-			background-color: $bg_color;
-			background-image: none;
-			color: $fg_color;
+			&.#{$type} {
+				border: 1px solid shade($bg_color, 0.8);
+				background-color: $bg_color;
+				background-image: none;
+				color: $fg_color;
 
-			.button {
-				@include button($bg_color, $fg_color);
+				.button {
+					@include button($bg_color, $fg_color);
 
-				&.close { @extend %close_button; }
+					&.close { @extend %close_button; }
+				}
 			}
 		}
 	}
diff --git a/gtk-3.0/scss/_menu.scss b/gtk-3.0/scss/_menu.scss
index 44fd1bf..6fa1a44 100755
--- a/gtk-3.0/scss/_menu.scss
+++ b/gtk-3.0/scss/_menu.scss
@@ -7,30 +7,32 @@
  ! Menubar
 **********/
 
-.menubar {
-    -GtkWidget-window-dragging: true;
+@include exports("menubar") {
+    .menubar {
+        -GtkWidget-window-dragging: true;
 
-    border: none;
-    background-color: $menubar_bg_color;
-    background-image: none;
-    color: $menubar_fg_color;
-
-
-    &.menuitem, .menuitem {
-        padding: $spacing ($spacing * 2);
-        border: 1px solid transparent;
-        background-color: transparent;
+        border: none;
+        background-color: $menubar_bg_color;
         background-image: none;
         color: $menubar_fg_color;
 
-        &:hover {
-            border-color: mix($menubar_bg_color, $menubar_fg_color, 0.21);
-            background-color: mix($menubar_bg_color, $menubar_fg_color, 0.21);
-            background-image: none;
-            color: shade($menubar_fg_color, 1.08);
-        }
 
-        & *:hover { color: shade($menubar_fg_color, 1.08); }
+        &.menuitem, .menuitem {
+            padding: $spacing ($spacing * 2);
+            border: 1px solid transparent;
+            background-color: transparent;
+            background-image: none;
+            color: $menubar_fg_color;
+
+            &:hover {
+                border-color: mix($menubar_bg_color, $menubar_fg_color, 0.21);
+                background-color: mix($menubar_bg_color, $menubar_fg_color, 0.21);
+                background-image: none;
+                color: shade($menubar_fg_color, 1.08);
+            }
+
+            & *:hover { color: shade($menubar_fg_color, 1.08); }
+        }
     }
 }
 
@@ -39,185 +41,189 @@
  ! Menu
 *******/
 
-GtkTreeMenu, GtkMenuToolButton, GtkComboBox {
-    &.menu, .menu {
-        background-color: $menu_bg_color;
-        margin: $spacing;
-    }
-}
-
-#toolbar-popup, .menu {
-    padding: 0;
-    border-radius: 0;
-    border-style: none;
-    background-color: $menu_bg_color;
-    color: $menu_fg_color;
-
-    &:selected { background-color: $selected_bg_color; }
-
-    .button {
-        &, &:hover, &:active, &:active *:insensitive, &:insensitive {
-            border-width: 0;
-            background-color: transparent;
-            background-image: none;
+@include exports("menu") {
+    GtkTreeMenu, GtkMenuToolButton, GtkComboBox {
+        &.menu, .menu {
+            background-color: $menu_bg_color;
+            margin: $spacing;
         }
     }
-}
 
-.context-menu { font: initial; }
-
-.menuitem {
-    GtkTreeMenu & {
+    #toolbar-popup, .menu {
         padding: 0;
-        border-width: 0;
-    }
-
-    &, .menu & {
-        margin: $spacing;
-        padding: $spacing;
-        border: none;
         border-radius: 0;
-        background-color: transparent;
-        background-image: none;
-
-        -GtkMenuItem-arrow-scaling: 0.5;
-
-        &:active, &:hover {
-            border: none;
-            background-color: $selected_bg_color;
-            background-image: none;
-            color: $selected_fg_color;
-        }
-
-        & *:active, & *:hover { color: $selected_fg_color; }
-
-        &:insensitive, & *:insensitive { color: mix($menu_fg_color, $menu_bg_color, .5); }
-    }
-
-    &.check, &.radio {
-        &, &:focus, &:hover, &:insensitive { background-image: none; }
-
-        &, &:focus, &:hover, &:active, &:insensitive {
-            border-style: none;
-            background-color: transparent;
-        }
-    }
-
-    &.separator {
-        -GtkMenuItem-horizontal-padding: 0;
-        -GtkWidget-separator-height: 1;
-
         border-style: none;
-        color: shade($menu_bg_color, .9);
-    }
+        background-color: $menu_bg_color;
+        color: $menu_fg_color;
 
-    &.button {
-        &, &:focus, &:active, &:insensitive, &:active:insensitive {
-            background-color: transparent;
-            background-image: none;
-            border-color: transparent;
-            border-style: none;
-            box-shadow: none;
-            color: currentColor;
-        }
-
-        &:hover, &:focus:hover, &:active:hover, &:selected {
-            background-color: $selected_bg_color;
-            background-image: none;
-            color: $selected_fg_color;
-        }
-    }
-
-    GtkCalendar {
-        &:inconsistent { color: mix($menu_fg_color, $menu_bg_color, .5); }
+        &:selected { background-color: $selected_bg_color; }
 
         .button {
-            border-style: none;
-            background-color: transparent;
-            background-image: none;
+            &, &:hover, &:active, &:active *:insensitive, &:insensitive {
+                border-width: 0;
+                background-color: transparent;
+                background-image: none;
+            }
         }
     }
 
-    .accelerator {
-        color: alpha($menu_fg_color, .6);
+    .context-menu { font: initial; }
 
-        &:hover { color: alpha($selected_fg_color, .8); }
+    .menuitem {
+        GtkTreeMenu & {
+            padding: 0;
+            border-width: 0;
+        }
 
-        &:insensitive { color: alpha(mix($menu_fg_color, $menu_bg_color, .5), .4); }
+        &, .menu & {
+            margin: $spacing;
+            padding: $spacing;
+            border: none;
+            border-radius: 0;
+            background-color: transparent;
+            background-image: none;
+
+            -GtkMenuItem-arrow-scaling: 0.5;
+
+            &:active, &:hover {
+                border: none;
+                background-color: $selected_bg_color;
+                background-image: none;
+                color: $selected_fg_color;
+            }
+
+            & *:active, & *:hover { color: $selected_fg_color; }
+
+            &:insensitive, & *:insensitive { color: mix($menu_fg_color, $menu_bg_color, .5); }
+        }
+
+        &.check, &.radio {
+            &, &:focus, &:hover, &:insensitive { background-image: none; }
+
+            &, &:focus, &:hover, &:active, &:insensitive {
+                border-style: none;
+                background-color: transparent;
+            }
+        }
+
+        &.separator {
+            -GtkMenuItem-horizontal-padding: 0;
+            -GtkWidget-separator-height: 1;
+
+            border-style: none;
+            color: shade($menu_bg_color, .9);
+        }
+
+        &.button {
+            &, &:focus, &:active, &:insensitive, &:active:insensitive {
+                background-color: transparent;
+                background-image: none;
+                border-color: transparent;
+                border-style: none;
+                box-shadow: none;
+                color: currentColor;
+            }
+
+            &:hover, &:focus:hover, &:active:hover, &:selected {
+                background-color: $selected_bg_color;
+                background-image: none;
+                color: $selected_fg_color;
+            }
+        }
+
+        GtkCalendar {
+            &:inconsistent { color: mix($menu_fg_color, $menu_bg_color, .5); }
+
+            .button {
+                border-style: none;
+                background-color: transparent;
+                background-image: none;
+            }
+        }
+
+        .accelerator {
+            color: alpha($menu_fg_color, .6);
+
+            &:hover { color: alpha($selected_fg_color, .8); }
+
+            &:insensitive { color: alpha(mix($menu_fg_color, $menu_bg_color, .5), .4); }
+        }
+
+        .entry { @include entry($menu_bg_color, $menu_fg_color); }
     }
 
-    .entry { @include entry($menu_bg_color, $menu_fg_color); }
+    GtkModelMenuItem GtkBox GtkImage { padding-right: $spacing; }
 }
 
-GtkModelMenuItem GtkBox GtkImage { padding-right: $spacing; }
-
 
 /*********
  ! Popover
 **********/
 
-GtkPopover {
-	@include border($menu_bg_color);
+@include exports("popover") {
+    GtkPopover {
+        @include border($menu_bg_color);
 
-    margin: 10px;
-    padding: $spacing;
-    border-radius: $roundness;
-    border-width: 1px;
-    border-style: solid;
-    background-clip: border-box;
-    background-color: $menu_bg_color;
-    background-image: none;
-    color: $menu_fg_color;
-    box-shadow: 0 2px 3px alpha(black, .5);
-
-    &.background {
-        background-image: none;
+        margin: 10px;
+        padding: $spacing;
+        border-radius: $roundness;
+        border-width: 1px;
+        border-style: solid;
+        background-clip: border-box;
         background-color: $menu_bg_color;
+        background-image: none;
         color: $menu_fg_color;
-    }
+        box-shadow: 0 2px 3px alpha(black, .5);
 
-    &:backdrop { box-shadow: none; }
-
-    &.osd {
-        box-shadow: 0 2px 7px 3px alpha(black, .5);
-
-        > .toolbar .button {
-            border-radius: 0;
-            border-width: 0;
+        &.background {
             background-image: none;
-            background-color: transparent;
-        }
-    }
-
-    > .list, > .view, > .toolbar { background-color: transparent; }
-
-    .separator {
-        border: 0;
-        background-color: transparent;
-        color: alpha($menu_bg_color, .5);
-        font-size: 80%;
-        font-weight: bold;
-    }
-}
-
-GtkModelButton.button {
-    &, &:focus, &:active, &:insensitive, &:active:insensitive {
-        &, &:backdrop {
-            background-color: transparent;
-            background-image: none;
-            border-color: transparent;
-            border-image: none;
-            border-style: none;
-            box-shadow: none;
+            background-color: $menu_bg_color;
             color: $menu_fg_color;
         }
+
+        &:backdrop { box-shadow: none; }
+
+        &.osd {
+            box-shadow: 0 2px 7px 3px alpha(black, .5);
+
+            > .toolbar .button {
+                border-radius: 0;
+                border-width: 0;
+                background-image: none;
+                background-color: transparent;
+            }
+        }
+
+        > .list, > .view, > .toolbar { background-color: transparent; }
+
+        .separator {
+            border: 0;
+            background-color: transparent;
+            color: alpha($menu_bg_color, .5);
+            font-size: 80%;
+            font-weight: bold;
+        }
     }
 
-    &:focus:hover, &:active:hover, &:hover, &:selected {
-        background-image: none;
-        background-color: $selected_bg_color;
-        color: $selected_fg_color;
-        border: none;
-        border-radius: 2px;
+    GtkModelButton.button {
+        &, &:focus, &:active, &:insensitive, &:active:insensitive {
+            &, &:backdrop {
+                background-color: transparent;
+                background-image: none;
+                border-color: transparent;
+                border-image: none;
+                border-style: none;
+                box-shadow: none;
+                color: $menu_fg_color;
+            }
+        }
+
+        &:focus:hover, &:active:hover, &:hover, &:selected {
+            background-image: none;
+            background-color: $selected_bg_color;
+            color: $selected_fg_color;
+            border: none;
+            border-radius: 2px;
+        }
     }
 }
diff --git a/gtk-3.0/scss/_notebook.scss b/gtk-3.0/scss/_notebook.scss
index b16b0d6..defac44 100644
--- a/gtk-3.0/scss/_notebook.scss
+++ b/gtk-3.0/scss/_notebook.scss
@@ -1,134 +1,137 @@
 @import "functions";
 @import "global";
 
+
 /**********
  ! Notebook
 ***********/
 
-.notebook {
-	padding: 0;
-	border-width: 1px 0 0 0;
-	border-style: solid;
-	border-color: border_normal($base_color);
-	border-radius: 0;
-	background-color: $base_color;
-	background-image: none;
-	background-clip: border-box;
-	color: $text_color;
-
-	-GtkNotebook-initial-gap: 0;
-	-GtkNotebook-arrow-spacing: 5;
-	-GtkNotebook-tab-curvature: 0;
-	-GtkNotebook-tab-overlap: 1;
-	-GtkNotebook-has-tab-gap: false;
-
-	&.frame { border-width: 1px; }
-
-	&.header {
-		border-width: 0;
-		background-color: shade($base_color, 0.85);
-
-		&.frame {
-			border-color: shade($base_color, 0.75);
-
-			&.top { border-width: 1px 1px 0 1px; }
-
-			&.right { border-width: 1px 1px 1px 0; }
-
-			&.bottom { border-width: 0 1px 1px 1px; }
-
-			&.left { border-width: 1px 0 1px 1px; }
-		}
-	}
-
-	GtkViewport {
-		border-width: 0;
+@include exports("notebook") {
+	.notebook {
+		padding: 0;
+		border-width: 1px 0 0 0;
+		border-style: solid;
+		border-color: border_normal($base_color);
+		border-radius: 0;
 		background-color: $base_color;
-		color: $text_color;
-	}
-
-	tab {
-		padding: $spacing ($spacing * 2);
-		border: 1px solid transparent;
-		background-color: transparent;
 		background-image: none;
+		background-clip: border-box;
+		color: $text_color;
 
-		&:active {
+		-GtkNotebook-initial-gap: 0;
+		-GtkNotebook-arrow-spacing: 5;
+		-GtkNotebook-tab-curvature: 0;
+		-GtkNotebook-tab-overlap: 1;
+		-GtkNotebook-has-tab-gap: false;
+
+		&.frame { border-width: 1px; }
+
+		&.header {
+			border-width: 0;
+			background-color: shade($base_color, 0.85);
+
+			&.frame {
+				border-color: shade($base_color, 0.75);
+
+				&.top { border-width: 1px 1px 0 1px; }
+
+				&.right { border-width: 1px 1px 1px 0; }
+
+				&.bottom { border-width: 0 1px 1px 1px; }
+
+				&.left { border-width: 1px 0 1px 1px; }
+			}
+		}
+
+		GtkViewport {
+			border-width: 0;
+			background-color: $base_color;
+			color: $text_color;
+		}
+
+		tab {
+			padding: $spacing ($spacing * 2);
+			border: 1px solid transparent;
 			background-color: transparent;
 			background-image: none;
+
+			&:active {
+				background-color: transparent;
+				background-image: none;
+			}
+
+			&.top {
+				border-bottom-width: 2px;
+				border-bottom-right-radius: 0;
+				border-bottom-left-radius: 0;
+
+				&:hover { border-bottom-color: alpha($selected_bg_color, 0.3); }
+
+				&:active { border-bottom-color: $selected_bg_color; }
+			}
+
+			&.right {
+				border-left-width: 2px;
+				border-bottom-left-radius: 0;
+				border-top-left-radius: 0;
+
+				&:hover { border-left-color: alpha($selected_bg_color, 0.3); }
+
+				&:active { border-left-color: $selected_bg_color; }
+			}
+
+
+			&.bottom {
+				border-top-width: 2px;
+				border-top-right-radius: 0;
+				border-top-left-radius: 0;
+
+				&:hover { border-top-color: alpha($selected_bg_color, 0.3); }
+
+				&:active { border-top-color: $selected_bg_color; }
+			}
+
+			&.left {
+				border-right-width: 2px;
+				border-top-right-radius: 0;
+				border-bottom-right-radius: 0;
+
+				&:hover { border-right-color: alpha($selected_bg_color, 0.3); }
+
+				&:active { border-right-color: $selected_bg_color; }
+			}
+
+			GtkLabel { color: mix($text_color, $base_color, 0.3); }
+
+			/* close button styling */
+			.button { @extend %close_button; }
 		}
 
-		&.top {
-			border-bottom-width: 2px;
-			border-bottom-right-radius: 0;
-			border-bottom-left-radius: 0;
-
-			&:hover { border-bottom-color: alpha($selected_bg_color, 0.3); }
-
-			&:active { border-bottom-color: $selected_bg_color; }
+		.prelight-page {
+			&, GtkLabel { color: mix($text_color, $base_color, 0.15); }
 		}
 
-		&.right {
-			border-left-width: 2px;
-			border-bottom-left-radius: 0;
-			border-top-left-radius: 0;
-
-			&:hover { border-left-color: alpha($selected_bg_color, 0.3); }
-
-			&:active { border-left-color: $selected_bg_color; }
+		.active-page {
+			&, GtkLabel { color: $text_color; }
 		}
 
+		.reorderable-page {
+			&:hover {
+				background-color: shade($base_color, 0.85);
+				border-left: 0;
+				border-right: 0;
+				/* using box shadows instead of borders due to slanted edges */
+				box-shadow: inset 0 3px alpha(black, 0.03), inset 0 2px alpha(black, 0.03), inset 0 1px alpha(black, 0.03),
+							inset 1px 0 shade($base_color, 0.7), inset -1px 0 shade($base_color, 0.7);
+			}
 
-		&.bottom {
-			border-top-width: 2px;
-			border-top-right-radius: 0;
-			border-top-left-radius: 0;
-
-			&:hover { border-top-color: alpha($selected_bg_color, 0.3); }
-
-			&:active { border-top-color: $selected_bg_color; }
-		}
-
-		&.left {
-			border-right-width: 2px;
-			border-top-right-radius: 0;
-			border-bottom-right-radius: 0;
-
-			&:hover { border-right-color: alpha($selected_bg_color, 0.3); }
-
-			&:active { border-right-color: $selected_bg_color; }
-		}
-
-		GtkLabel { color: mix($text_color, $base_color, 0.3); }
-
-		/* close button styling */
-		.button { @extend %close_button; }
-	}
-
-	.prelight-page {
-		&, GtkLabel { color: mix($text_color, $base_color, 0.15); }
-	}
-
-	.active-page {
-		&, GtkLabel { color: $text_color; }
-	}
-
-	.reorderable-page {
-		&:hover {
-			background-color: shade($base_color, 0.85);
-			border-left: 0;
-			border-right: 0;
-			/* using box shadows instead of borders due to slanted edges */
-			box-shadow: inset 0 3px alpha(black, 0.03), inset 0 2px alpha(black, 0.03), inset 0 1px alpha(black, 0.03),
-						inset 1px 0 shade($base_color, 0.7), inset -1px 0 shade($base_color, 0.7);
-		}
-
-		&:active {
-			background-color: shade($base_color, 0.90);
-			border-left: 0;
-			border-right: 0;
-			box-shadow: inset 0 3px alpha(black, 0.03), inset 0 2px alpha(black, 0.03), inset 0 1px alpha(black, 0.03),
-						inset 1px 0 shade($base_color, 0.75), inset -1px 0 shade($base_color, 0.75);
+			&:active {
+				background-color: shade($base_color, 0.90);
+				border-left: 0;
+				border-right: 0;
+				box-shadow: inset 0 3px alpha(black, 0.03), inset 0 2px alpha(black, 0.03), inset 0 1px alpha(black, 0.03),
+							inset 1px 0 shade($base_color, 0.75), inset -1px 0 shade($base_color, 0.75);
+			}
 		}
 	}
 }
diff --git a/gtk-3.0/scss/_progress.scss b/gtk-3.0/scss/_progress.scss
index f648f95..b5ccb30 100644
--- a/gtk-3.0/scss/_progress.scss
+++ b/gtk-3.0/scss/_progress.scss
@@ -6,189 +6,191 @@
  ! Progress bars *
 ******************/
 
-GtkProgressBar {
-	padding: 0;
-	border-radius: $roundness;
-	font-size: smaller;
-	color: alpha($fg_color, 0.6);
+@include exports("progressbar") {
+	GtkProgressBar {
+		padding: 0;
+		border-radius: $roundness;
+		font-size: smaller;
+		color: alpha($fg_color, 0.6);
 
-	-GtkProgressBar-min-horizontal-bar-height: 12;
-	-GtkProgressBar-min-vertical-bar-width: 12;
+		-GtkProgressBar-min-horizontal-bar-height: 12;
+		-GtkProgressBar-min-vertical-bar-width: 12;
 
-	&.osd {
-		-GtkProgressBar-xspacing: 0;
-		-GtkProgressBar-yspacing: 0;
-		-GtkProgressBar-min-horizontal-bar-height: 3;
+		&.osd {
+			-GtkProgressBar-xspacing: 0;
+			-GtkProgressBar-yspacing: 0;
+			-GtkProgressBar-min-horizontal-bar-height: 3;
+		}
+
+		&.trough {
+			border: 1px solid alpha(border_normal($bg_color), 0.5);
+			background-color: shade($bg_color, 1.08);
+			background-image: none;
+		}
 	}
 
-	&.trough {
-		border: 1px solid alpha(border_normal($bg_color), 0.5);
-		background-color: shade($bg_color, 1.08);
-		background-image: none;
-	}
-}
-
-.progressbar {
-	background-image: none;
-	background-color: $selected_bg_color;
-	border-radius: 0;
-	box-shadow: none;
-
-	&.left {
-		border-top-left-radius: $roundness;
-		border-bottom-left-radius: $roundness;
-	}
-
-	&.right {
-		border-top-right-radius: $roundness;
-		border-bottom-right-radius: $roundness;
-	}
-
-	&.left.right { box-shadow: none; }
-
-	&.vertical {
+	.progressbar {
 		background-image: none;
 		background-color: $selected_bg_color;
+		border-radius: 0;
+		box-shadow: none;
 
-		&.bottom {
+		&.left {
+			border-top-left-radius: $roundness;
 			border-bottom-left-radius: $roundness;
+		}
+
+		&.right {
+			border-top-right-radius: $roundness;
 			border-bottom-right-radius: $roundness;
 		}
 
-		&.top {
-			border-top-left-radius: $roundness;
-			border-top-right-radius: $roundness;
-		}
-	}
-}
+		&.left.right { box-shadow: none; }
 
-GtkLevelBar {
-	-GtkLevelBar-min-block-width: 34;
-	-GtkLevelBar-min-block-height: 3;
-
-	&.vertical {
-		-GtkLevelBar-min-block-width: 3;
-		-GtkLevelBar-min-block-height: 34;
-	}
-}
-
-.level-bar {
-	&.trough {
-		border: 1px solid alpha(border_normal($bg_color), 0.5);
-		background-color: shade($bg_color, 1.08);
-		background-image: none;
-		border-radius: $roundness;
-	}
-
-	&.fill-block {
-		// FIXME: it would be nice to set make fill blocks bigger, but we'd need
-		// :nth-child working on discrete indicators
-		background-color: $selected_bg_color;
-		border-color: transparent;
-		border-radius: 0;
-
-		&.indicator-discrete {
-			&.horizontal { margin-right: 1px; }
-			&.vertical { margin-bottom: 1px; }
-		}
-
-		&.level-high {
-			background-color: $success_color;
-			border-color: transparent;
-		}
-
-		&.level-low {
-			background-color: $warning_color;
-			border-color: transparent;
-		}
-
-		&.empty-fill-block {
-			background-color: transparent;
-			border-color: transparent;
-			box-shadow: none;
-		}
-	}
-}
-
-.scale {
-	-GtkRange-slider-width: 16;
-	-GtkRange-trough-border: 1;
-	-GtkScale-slider-length: 16;
-
-	padding: 0;
-	border-width: 1px;
-	border-radius: $roundness;
-	outline-offset: -1px;
-
-
-	&.slider {
-		border-radius: 8px;
-		background-color: shade($bg_color, 1.08);
-		background-image: none;
-		/* we will draw the border using box shadow for now */
-		box-shadow: inset 1px 0 border_normal($bg_color),
-					inset 0 1px border_normal($bg_color),
-					inset -1px 0 border_normal($bg_color),
-					inset 0 -1px border_normal($bg_color);
-
-		&:hover, &:focus {
-			box-shadow: inset 1px 0 border_focus($bg_color),
-						inset 0 1px border_focus($bg_color),
-						inset -1px 0 border_focus($bg_color),
-						inset 0 -1px border_focus($bg_color);
-		}
-
-		&:active {
-			box-shadow: inset 1px 0 border_active($bg_color),
-						inset 0 1px border_active($bg_color),
-						inset -1px 0 border_active($bg_color),
-						inset 0 -1px border_active($bg_color);
-		}
-
-		&:insensitive {
-			background-color: shade($bg_color, 0.9);
+		&.vertical {
 			background-image: none;
-			box-shadow: inset 1px 0 border_insensitive($bg_color),
-						inset 0 1px border_insensitive($bg_color),
-						inset -1px 0 border_insensitive($bg_color),
-						inset 0 -1px border_insensitive($bg_color);
-		}
-	}
+			background-color: $selected_bg_color;
 
-	&.fine-tune {
-		&, &.horizontal {
-			&:active, &:active:hover {
-				background-size: 50%;
-				background-repeat: no-repeat;
-				background-position: center;
+			&.bottom {
+				border-bottom-left-radius: $roundness;
+				border-bottom-right-radius: $roundness;
+			}
+
+			&.top {
+				border-top-left-radius: $roundness;
+				border-top-right-radius: $roundness;
 			}
 		}
 	}
 
-	&.mark { border-color: alpha(border_normal($bg_color), 0.5); }
+	GtkLevelBar {
+		-GtkLevelBar-min-block-width: 34;
+		-GtkLevelBar-min-block-height: 3;
 
-
-	&.trough {
-		margin: 7px 0;
-		border: 1px solid alpha(border_normal($bg_color), 0.5);
-		border-radius: $roundness;
-		background-color: shade($bg_color, 1.08);
-		background-image: none;
-
-		&:insensitive { background-color: shade($bg_color, 0.9); }
-
-		&.vertical { margin: 0 7px; }
+		&.vertical {
+			-GtkLevelBar-min-block-width: 3;
+			-GtkLevelBar-min-block-height: 34;
+		}
 	}
 
-	&.highlight {
-		&, &.left, &.bottom {
-			border-color: $selected_bg_color;
-			background-color: $selected_bg_color;
+	.level-bar {
+		&.trough {
+			border: 1px solid alpha(border_normal($bg_color), 0.5);
+			background-color: shade($bg_color, 1.08);
 			background-image: none;
+			border-radius: $roundness;
+		}
+
+		&.fill-block {
+			// FIXME: it would be nice to set make fill blocks bigger, but we'd need
+			// :nth-child working on discrete indicators
+			background-color: $selected_bg_color;
+			border-color: transparent;
+			border-radius: 0;
+
+			&.indicator-discrete {
+				&.horizontal { margin-right: 1px; }
+				&.vertical { margin-bottom: 1px; }
+			}
+
+			&.level-high {
+				background-color: $success_color;
+				border-color: transparent;
+			}
+
+			&.level-low {
+				background-color: $warning_color;
+				border-color: transparent;
+			}
+
+			&.empty-fill-block {
+				background-color: transparent;
+				border-color: transparent;
+				box-shadow: none;
+			}
+		}
+	}
+
+	.scale {
+		-GtkRange-slider-width: 16;
+		-GtkRange-trough-border: 1;
+		-GtkScale-slider-length: 16;
+
+		padding: 0;
+		border-width: 1px;
+		border-radius: $roundness;
+		outline-offset: -1px;
+
+
+		&.slider {
+			border-radius: 8px;
+			background-color: shade($bg_color, 1.08);
+			background-image: none;
+			/* we will draw the border using box shadow for now */
+			box-shadow: inset 1px 0 border_normal($bg_color),
+						inset 0 1px border_normal($bg_color),
+						inset -1px 0 border_normal($bg_color),
+						inset 0 -1px border_normal($bg_color);
+
+			&:hover, &:focus {
+				box-shadow: inset 1px 0 border_focus($bg_color),
+							inset 0 1px border_focus($bg_color),
+							inset -1px 0 border_focus($bg_color),
+							inset 0 -1px border_focus($bg_color);
+			}
+
+			&:active {
+				box-shadow: inset 1px 0 border_active($bg_color),
+							inset 0 1px border_active($bg_color),
+							inset -1px 0 border_active($bg_color),
+							inset 0 -1px border_active($bg_color);
+			}
 
 			&:insensitive {
-				border-color: shade($bg_color, 0.7);
-				background-color: shade($bg_color, 0.8);
+				background-color: shade($bg_color, 0.9);
+				background-image: none;
+				box-shadow: inset 1px 0 border_insensitive($bg_color),
+							inset 0 1px border_insensitive($bg_color),
+							inset -1px 0 border_insensitive($bg_color),
+							inset 0 -1px border_insensitive($bg_color);
+			}
+		}
+
+		&.fine-tune {
+			&, &.horizontal {
+				&:active, &:active:hover {
+					background-size: 50%;
+					background-repeat: no-repeat;
+					background-position: center;
+				}
+			}
+		}
+
+		&.mark { border-color: alpha(border_normal($bg_color), 0.5); }
+
+
+		&.trough {
+			margin: 7px 0;
+			border: 1px solid alpha(border_normal($bg_color), 0.5);
+			border-radius: $roundness;
+			background-color: shade($bg_color, 1.08);
+			background-image: none;
+
+			&:insensitive { background-color: shade($bg_color, 0.9); }
+
+			&.vertical { margin: 0 7px; }
+		}
+
+		&.highlight {
+			&, &.left, &.bottom {
+				border-color: $selected_bg_color;
+				background-color: $selected_bg_color;
+				background-image: none;
+
+				&:insensitive {
+					border-color: shade($bg_color, 0.7);
+					background-color: shade($bg_color, 0.8);
+				}
 			}
 		}
 	}
diff --git a/gtk-3.0/scss/_scrollbar.scss b/gtk-3.0/scss/_scrollbar.scss
index 8412d5d..7777280 100644
--- a/gtk-3.0/scss/_scrollbar.scss
+++ b/gtk-3.0/scss/_scrollbar.scss
@@ -5,57 +5,59 @@
  ! Scrollbar
 ************/
 
-.scrollbar {
-	border: none;
-	padding: 0;
+@include exports("scrollbar") {
+	.scrollbar {
+		border: none;
+		padding: 0;
 
-	&.button {
-		&, &:active, &:active:hover {
-			border-width: 0;
+		&.button {
+			&, &:active, &:active:hover {
+				border-width: 0;
+				border-radius: 0;
+				background-color: transparent;
+				background-image: none;
+				color: shade($bg_color, 0.6);
+			}
+		}
+
+		&.slider, &.slider.vertical {
+			border: 1px solid mix(shade($bg_color, 0.87), $fg_color, 0.21);
 			border-radius: 0;
-			background-color: transparent;
-			background-image: none;
-			color: shade($bg_color, 0.6);
+			background-color: mix($bg_color, $fg_color, 0.21);
+
+			&:hover {
+				border-color: mix(shade($bg_color, 0.87), $fg_color, 0.31);
+				background-color: mix($bg_color, $fg_color, 0.31);
+			}
+
+			&:active {
+				border-color: shade($selected_bg_color, 0.9);
+				background-color: $selected_bg_color;
+			}
+
+			&.fine-tune:prelight:active {
+				border-width: 2px;
+				border-color: transparent;
+			}
 		}
 	}
 
-	&.slider, &.slider.vertical {
-		border: 1px solid mix(shade($bg_color, 0.87), $fg_color, 0.21);
+	.scrollbars-junction,
+	.scrollbar.trough {
+		border: none;
 		border-radius: 0;
-		background-color: mix($bg_color, $fg_color, 0.21);
+		background-color: $bg_color;
+		background-image: none;
+	}
 
-		&:hover {
-			border-color: mix(shade($bg_color, 0.87), $fg_color, 0.31);
-			background-color: mix($bg_color, $fg_color, 0.31);
-		}
+	/* overlay scrollbar */
+	OsThumb, OsScrollbar {
+		color: shade($bg_color, 0.7);
 
-		&:active {
-			border-color: shade($selected_bg_color, 0.9);
-			background-color: $selected_bg_color;
-		}
+		&:selected { background-color: $selected_bg_color; }
 
-		&.fine-tune:prelight:active {
-			border-width: 2px;
-			border-color: transparent;
-		}
+		&:active { background-color: $selected_bg_color; }
+
+		&:insensitive { background-color: shade($bg_color, 0.9); }
 	}
 }
-
-.scrollbars-junction,
-.scrollbar.trough {
-	border: none;
-	border-radius: 0;
-	background-color: $bg_color;
-	background-image: none;
-}
-
-/* overlay scrollbar */
-OsThumb, OsScrollbar {
-	color: shade($bg_color, 0.7);
-
-	&:selected { background-color: $selected_bg_color; }
-
-	&:active { background-color: $selected_bg_color; }
-
-	&:insensitive { background-color: shade($bg_color, 0.9); }
-}
diff --git a/gtk-3.0/scss/_sidebar.scss b/gtk-3.0/scss/_sidebar.scss
index b6658a9..78e1b89 100755
--- a/gtk-3.0/scss/_sidebar.scss
+++ b/gtk-3.0/scss/_sidebar.scss
@@ -6,69 +6,71 @@
  ! Sidebar
 **********/
 
-.sidebar {
-    &, &.view, & .view, & GtkScrolledWindow {
-        background-color: $bg_color;
-        color: mix($fg_color, $bg_color, 0.1);
+@include exports("sidebar") {
+    .sidebar {
+        &, &.view, & .view, & GtkScrolledWindow {
+            background-color: $bg_color;
+            color: mix($fg_color, $bg_color, 0.1);
 
-        &.separator {
-            &, &:hover, &:focus {
-                border-width: 1px;
-                border-style: solid;
-                border-color: shade($bg_color, 0.9);
-                color: shade($bg_color, 0.9);
+            &.separator {
+                &, &:hover, &:focus {
+                    border-width: 1px;
+                    border-style: solid;
+                    border-color: shade($bg_color, 0.9);
+                    color: shade($bg_color, 0.9);
+                }
             }
         }
-    }
 
-    row, .view row {
-       &:selected {
-           &, &:hover, &:focus {
-               border: none;
-               background-image: none;
-               background-color: $selected_bg_color;
-               color: $selected_fg_color;
+        row, .view row {
+           &:selected {
+               &, &:hover, &:focus {
+                   border: none;
+                   background-image: none;
+                   background-color: $selected_bg_color;
+                   color: $selected_fg_color;
+               }
+
+               &:prelight {
+                   border: none;
+                   background-image: none;
+                   background-color: shade($selected_bg_color, 1.05);
+                   color: $selected_fg_color;
+               }
            }
 
-           &:prelight {
-               border: none;
-               background-image: none;
-               background-color: shade($selected_bg_color, 1.05);
-               color: $selected_fg_color;
-           }
-       }
-
-        &:prelight {
-            border: none;
-            background-image: none;
-            background-color: shade($bg_color, 0.95);
-            color: $fg_color;
-        }
-    }
-
-    .frame { border-width: 0; }
-
-    GtkAssistant & {
-        padding: 4px;
-        border-width: 0 1px 0 0;
-        border-style: solid;
-        border-right-color: border_normal($bg_color);
-        border-radius: 0;
-        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); }
+            &:prelight {
+                border: none;
+                background-image: none;
+                background-color: shade($bg_color, 0.95);
+                color: $fg_color;
+            }
         }
 
-        &.csd .sidebar { border-top-style: none; }
+        .frame { border-width: 0; }
 
-        .highlight { font: bold; }
+        GtkAssistant & {
+            padding: 4px;
+            border-width: 0 1px 0 0;
+            border-style: solid;
+            border-right-color: border_normal($bg_color);
+            border-radius: 0;
+            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; }
+        }
     }
 }
 
@@ -77,42 +79,47 @@
 ! Pane separator
 ****************/
 
-.pane-separator {
-    &, &.horizontal {
-        background-image: linear-gradient(to bottom,
-                            shade($bg_color, 0.8) 0%,
-                            shade($bg_color, 0.8) 20%,
-                            transparent 20%,
-                            transparent 45%,
-                            shade($bg_color, 0.8) 45%,
-                            shade($bg_color, 0.8) 55%,
-                            transparent 55%,
-                            transparent 80%,
-                            shade($bg_color, 0.8) 80%,
-                            shade($bg_color, 0.8)
-                        );
+@include exports("paneseparator") {
+    .pane-separator {
+        background-color: $bg_color;
+        color: transparent;
 
-        background-size: 4px 10px;
-        background-repeat: no-repeat;
-        background-position: center center;
-    }
+        &, &.horizontal {
+            background-image: linear-gradient(to bottom,
+                                shade($bg_color, 0.8) 0%,
+                                shade($bg_color, 0.8) 20%,
+                                transparent 20%,
+                                transparent 45%,
+                                shade($bg_color, 0.8) 45%,
+                                shade($bg_color, 0.8) 55%,
+                                transparent 55%,
+                                transparent 80%,
+                                shade($bg_color, 0.8) 80%,
+                                shade($bg_color, 0.8)
+                            );
 
-    &.vertical {
-        background-image: linear-gradient(to right,
-                            shade($bg_color, 0.8) 0%,
-                            shade($bg_color, 0.8) 20%,
-                            transparent 20%,
-                            transparent 45%,
-                            shade($bg_color, 0.8) 45%,
-                            shade($bg_color, 0.8) 55%,
-                            transparent 55%,
-                            transparent 80%,
-                            shade($bg_color, 0.8) 80%,
-                            shade($bg_color, 0.8)
-                        );
+            background-size: 4px 10px;
+            background-repeat: no-repeat;
+            background-position: center center;
+        }
 
-        background-size: 10px 4px;
-        background-repeat: no-repeat;
-        background-position: center center;
+        &.vertical {
+            background-image: linear-gradient(to right,
+                                shade($bg_color, 0.8) 0%,
+                                shade($bg_color, 0.8) 20%,
+                                transparent 20%,
+                                transparent 45%,
+                                shade($bg_color, 0.8) 45%,
+                                shade($bg_color, 0.8) 55%,
+                                transparent 55%,
+                                transparent 80%,
+                                shade($bg_color, 0.8) 80%,
+                                shade($bg_color, 0.8)
+                            );
+
+            background-size: 10px 4px;
+            background-repeat: no-repeat;
+            background-position: center center;
+        }
     }
 }
diff --git a/gtk-3.0/scss/_spinner.scss b/gtk-3.0/scss/_spinner.scss
index f8b00e7..ee50103 100644
--- a/gtk-3.0/scss/_spinner.scss
+++ b/gtk-3.0/scss/_spinner.scss
@@ -6,21 +6,23 @@
  ! Spinner animation
 ********************/
 
-@keyframes spin {
-    to { -gtk-icon-transform: rotate(1turn); }
-}
+@include exports("spinner") {
+    @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
+    .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");
+        -gtk-icon-source: -gtk-icontheme("process-working-symbolic");
 
-    &:active {
-        opacity: 1;
-        animation: spin 1s linear infinite;
+        &:active {
+            opacity: 1;
+            animation: spin 1s linear infinite;
 
-        &:insensitive { opacity: 0.5; }
+            &:insensitive { opacity: 0.5; }
+        }
     }
 }
diff --git a/gtk-3.0/scss/_toggle.scss b/gtk-3.0/scss/_toggle.scss
index 43e0fc1..4e0199a 100755
--- a/gtk-3.0/scss/_toggle.scss
+++ b/gtk-3.0/scss/_toggle.scss
@@ -6,11 +6,6 @@
  ! Check and Radio items
 ************************/
 
-* {
-	-GtkCheckButton-indicator-size: 16;
-	-GtkCheckMenuItem-indicator-size: 14;
-}
-
 @mixin toggle($type) {
 	background-image: none;
 
@@ -53,14 +48,21 @@
 	}
 }
 
-.radio { @include toggle("radio"); }
+@include exports("checkradio") {
+	* {
+		-GtkCheckButton-indicator-size: 16;
+		-GtkCheckMenuItem-indicator-size: 14;
+	}
 
-.check { @include toggle("checkbox"); }
+	.radio { @include toggle("radio"); }
 
-GtkIconView.content-view.cell.check {
-	-gtk-icon-source: url("assets/grid-selection-unchecked.svg");
+	.check { @include toggle("checkbox"); }
 
-	&:active { -gtk-icon-source: url("assets/grid-selection-checked.svg"); }
+	GtkIconView.content-view.cell.check {
+		-gtk-icon-source: url("assets/grid-selection-unchecked.svg");
+
+		&:active { -gtk-icon-source: url("assets/grid-selection-checked.svg"); }
+	}
 }
 
 
@@ -68,37 +70,39 @@ GtkIconView.content-view.cell.check {
  ! Switch
 *********/
 
-GtkSwitch {
-	padding: 0;
-	border-radius: $roundness;
-	font: bold condensed;
-	outline-offset: -4px;
+@include exports("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);
+		&.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);
+			}
 		}
 
-		&:insensitive {
-			border-color: shade($bg_color, 0.85);
-			background-color: shade($bg_color, 0.9);
-			color: mix($fg_color, $bg_color, 0.5);
+		&.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);
+			}
 		}
 	}
 }
diff --git a/gtk-3.0/scss/_toolbar.scss b/gtk-3.0/scss/_toolbar.scss
index 4721a6d..79ca6c1 100755
--- a/gtk-3.0/scss/_toolbar.scss
+++ b/gtk-3.0/scss/_toolbar.scss
@@ -49,67 +49,69 @@
     .menubar { -GtkToolbar-button-relief: normal; }
 }
 
-.toolbar {
-    @include toolbar($bg_color, $fg_color);
+@include exports("toolbar") {
+    .toolbar {
+        @include toolbar($bg_color, $fg_color);
 
-    border-style: none;
-}
+        border-style: none;
+    }
 
-.header-bar {
-    @include toolbar($titlebar_bg_color, $titlebar_fg_color);
+    .header-bar {
+        @include toolbar($titlebar_bg_color, $titlebar_fg_color);
 
-    border-width: 0 0 1px 0;
-    border-style: solid;
-}
+        border-width: 0 0 1px 0;
+        border-style: solid;
+    }
 
-.titlebar {
-    @include linear-gradient($titlebar_bg_color);
-
-    border-radius: $roundness $roundness 0 0;
-    color: mix($titlebar_fg_color, $titlebar_bg_color, .1);
-
-    &:backdrop {
+    .titlebar {
         @include linear-gradient($titlebar_bg_color);
 
-        color: mix($titlebar_fg_color, $titlebar_bg_color, .6);
-        text-shadow: none;
-    }
-
-    &.default-decoration {
-        border: none;
-        box-shadow: none;
-    }
-
-    .tiled &, .maximized & { border-radius: 0; }
-
-    .title { font: bold; }
-
-    .titlebutton {
-        padding: $spacing;
-        border: none;
-        background-image: none;
-        background-color: transparent;
+        border-radius: $roundness $roundness 0 0;
         color: mix($titlebar_fg_color, $titlebar_bg_color, .1);
-        box-shadow: none;
-
-        &:hover, &:hover:focus {
-            background-image: none;
-            background-color: transparent;
-            color: $selected_bg_color;
-            box-shadow: none;
-        }
-
-        &:active, &:active:hover {
-            background-image: none;
-            background-color: transparent;
-            color: darken($selected_bg_color, 10%);
-            box-shadow: none;
-        }
 
         &:backdrop {
-            background: none;
+            @include linear-gradient($titlebar_bg_color);
+
             color: mix($titlebar_fg_color, $titlebar_bg_color, .6);
-            icon-shadow: none;
+            text-shadow: none;
+        }
+
+        &.default-decoration {
+            border: none;
+            box-shadow: none;
+        }
+
+        .tiled &, .maximized & { border-radius: 0; }
+
+        .title { font: bold; }
+
+        .titlebutton {
+            padding: $spacing;
+            border: none;
+            background-image: none;
+            background-color: transparent;
+            color: mix($titlebar_fg_color, $titlebar_bg_color, .1);
+            box-shadow: none;
+
+            &:hover, &:hover:focus {
+                background-image: none;
+                background-color: transparent;
+                color: $selected_bg_color;
+                box-shadow: none;
+            }
+
+            &:active, &:active:hover {
+                background-image: none;
+                background-color: transparent;
+                color: darken($selected_bg_color, 10%);
+                box-shadow: none;
+            }
+
+            &:backdrop {
+                background: none;
+                color: mix($titlebar_fg_color, $titlebar_bg_color, .6);
+                icon-shadow: none;
+            }
         }
     }
 }
diff --git a/gtk-3.0/scss/_view.scss b/gtk-3.0/scss/_view.scss
index e7c0155..cf5e5d9 100644
--- a/gtk-3.0/scss/_view.scss
+++ b/gtk-3.0/scss/_view.scss
@@ -6,125 +6,128 @@
  ! Generic views
 ****************/
 
-.view {
-    color: $text_color;
-    background-color: $base_color;
-
-    &:insensitive, &:insensitive:insensitive {
-        background-color: shade($base_color, 0.9);
-        color: mix($text_color, $base_color, 0.5);
-    }
-
-    &:selected, &:selected:focus { @extend %selected_items; }
-}
-
-.cell {
-    border-width: 0;
-    border-radius: 0;
-
-    &:selected, &:selected:focus {
-        background-color: $selected_bg_color;
-        color: $selected_fg_color;
-    }
-}
-
-row {
-    &:selected {
-        &, &:hover, &:focus {
-            -GtkWidget-focus-padding: 1;
-            -GtkWidget-focus-line-width: 0;
-
-            border: none;
-            background-color: $selected_bg_color;
-            background-image: none;
-            color: $selected_fg_color;
-        }
-    }
-}
-
-.content-view {
-    &.view {
+@include exports("view") {
+    .view {
+        color: $text_color;
         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; }
+        &:insensitive, &:insensitive:insensitive {
+            background-color: shade($base_color, 0.9);
+            color: mix($text_color, $base_color, 0.5);
         }
+
+        &:selected, &:selected:focus { @extend %selected_items; }
     }
 
-    .subtitle {
-        font: smaller;
-        padding: 0 12px;
-    }
-}
+    .cell {
+        border-width: 0;
+        border-radius: 0;
 
-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;
         }
     }
-}
 
-.dim-label {
-    &, &.view { color: alpha(currentColor, 0.5); }
-}
+    row {
+        &:selected {
+            &, &:hover, &:focus {
+                -GtkWidget-focus-padding: 1;
+                -GtkWidget-focus-line-width: 0;
 
-.dnd { border: 1px solid $selected_bg_color; }
+                border: none;
+                background-color: $selected_bg_color;
+                background-image: none;
+                color: $selected_fg_color;
+            }
+        }
+    }
 
-.grip { background-color: transparent; }
+    .content-view {
+        &.view {
+            background-color: $base_color;
 
-.arrow { color: alpha(currentColor, 0.7); }
+            &:prelight { background-color: alpha($selected_bg_color, 0.6); }
 
-.rubberband {
-    &, &.view, &.content-view.view {
-        border: 1px solid $selected_bg_color;
-        border-radius: 0;
-        background-color: alpha($selected_bg_color, 0.3);
+            &: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;
+            }
+        }
+    }
+
+    .dim-label {
+        &, &.view { color: alpha(currentColor, 0.5); }
+    }
+
+    .dnd { border: 1px solid $selected_bg_color; }
+
+    .grip { background-color: transparent; }
+
+    .arrow { color: alpha(currentColor, 0.7); }
+
+    .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); }
     }
 }
 
-/* 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); }
-}
-
-
 /************
  ! Treeview *
 *************/
 
-GtkTreeView {
-    -GtkTreeView-vertical-separator: 0;
+@include exports("treeview") {
+    GtkTreeView {
+        -GtkTreeView-vertical-separator: 0;
 
-    outline-offset: -1px;
+        outline-offset: -1px;
 
-    &.dnd { border: 1px solid $selected_bg_color; }
+        &.dnd { border: 1px solid $selected_bg_color; }
 
-    .entry {
-        border-radius: 0;
-        background-color: $base_color;
-        background-image: none;
+        .entry {
+            border-radius: 0;
+            background-color: $base_color;
+            background-image: none;
+        }
     }
 }
 
@@ -133,28 +136,30 @@ GtkTreeView {
  ! Column view headers
 **********************/
 
-column-header {
-    .button {
-        &, &:active {
-            border-width: 0 1px 1px 0;
-            border-radius: 0;
-        }
+@include exports("columnheader") {
+    column-header {
+        .button {
+            &, &:active {
+                border-width: 0 1px 1px 0;
+                border-radius: 0;
+            }
 
-        &, &:active, &:focus, &:active:focus {
-            border-color: shade($base_color, 0.9);
-            border-bottom-color: shade($base_color, 0.8);
-            background-color: shade($base_color, 0.97);
-            background-image: none;
-        }
+            &, &:active, &:focus, &:active:focus {
+                border-color: shade($base_color, 0.9);
+                border-bottom-color: shade($base_color, 0.8);
+                background-color: shade($base_color, 0.97);
+                background-image: none;
+            }
 
-        &:hover, &:active:hover, &:hover:focus, &:active:hover:focus {
-            border-color: shade($base_color, 0.9);
-            border-bottom-color: shade($base_color, 0.8);
-            background-color: shade($base_color, 0.99);
-            background-image: none;
-        }
+            &:hover, &:active:hover, &:hover:focus, &:active:hover:focus {
+                border-color: shade($base_color, 0.9);
+                border-bottom-color: shade($base_color, 0.8);
+                background-color: shade($base_color, 0.99);
+                background-image: none;
+            }
 
-        &:last-child .button { border-width: 0 0 1px 0; }
+            &:last-child .button { border-width: 0 0 1px 0; }
+        }
     }
 }
 
@@ -163,13 +168,15 @@ column-header {
  ! Frames *
 ***********/
 
-.frame { border: none; }
+@include exports("frame") {
+    .frame { border: none; }
 
-GtkScrolledWindow {
-    &.frame { border: 1px solid border_normal($bg_color); }
+    GtkScrolledWindow {
+        &.frame { border: 1px solid border_normal($bg_color); }
 
-    /* avoid double borders when a viewport is packed into a GtkScrolledWindow */
-    GtkViewport.frame { border: none; }
+        /* avoid double borders when a viewport is packed into a GtkScrolledWindow */
+        GtkViewport.frame { border: none; }
+    }
 }
 
 
@@ -177,23 +184,25 @@ GtkScrolledWindow {
  ! Expanders *
 **************/
 
-GtkExpander {
-    padding: $spacing;
-    outline-offset: 1px;
-}
-
-.expander {
-    color: alpha(currentColor, 0.7);
-    border: alpha(currentColor, 0.7);
-
-    &:hover {
-        color: alpha(currentColor, 0.8);
-        border-color: alpha(currentColor, 0.8);
+@include exports("expander") {
+    GtkExpander {
+        padding: $spacing;
+        outline-offset: 1px;
     }
 
-    &:active {
-        color: alpha(currentColor, 0.9);
-        border-color: alpha(currentColor, 0.9);
+    .expander {
+        color: alpha(currentColor, 0.7);
+        border: alpha(currentColor, 0.7);
+
+        &:hover {
+            color: alpha(currentColor, 0.8);
+            border-color: alpha(currentColor, 0.8);
+        }
+
+        &:active {
+            color: alpha(currentColor, 0.9);
+            border-color: alpha(currentColor, 0.9);
+        }
     }
 }
 
@@ -202,22 +211,14 @@ GtkExpander {
  ! Symbolic images *
 ********************/
 
-.image {
-    color: alpha(currentColor, 0.5);
+@include exports("symbolicimage") {
+    .image {
+        color: alpha(currentColor, 0.5);
 
-    &:hover { color: alpha(currentColor, 0.9); }
+        &:hover { color: alpha(currentColor, 0.9); }
 
-    &:selected, &:selected:hover { color: $selected_fg_color; }
-}
-
-
-/******************
- ! Pane separator *
-*******************/
-
-.pane-separator {
-    background-color: $bg_color;
-    color: transparent;
+        &:selected, &:selected:hover { color: $selected_fg_color; }
+    }
 }
 
 
@@ -225,43 +226,45 @@ GtkExpander {
  ! Floating bar *
 *****************/
 
-.floating-bar {
-    border: 1px solid border_normal($bg_color);
-    border-radius: $roundness;
-    background-color: $bg_color;
-    background-image: none;
-    color: $fg_color;
-
-    &.top {
-        border-top-width: 0;
-        border-top-right-radius: 0;
-        border-top-left-radius: 0;
-    }
-
-    &.right {
-        border-right-width: 0;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    &.bottom {
-        border-bottom-width: 0;
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-
-    &.left {
-        border-left-width: 0;
-        border-bottom-left-radius: 0;
-        border-top-left-radius: 0;
-    }
-
-    .button {
-        -GtkButton-image-spacing: 0;
-        -GtkButton-inner-border: 0;
-
-        border: none;
-        background-color: transparent;
+@include exports("floatingbar") {
+    .floating-bar {
+        border: 1px solid border_normal($bg_color);
+        border-radius: $roundness;
+        background-color: $bg_color;
         background-image: none;
+        color: $fg_color;
+
+        &.top {
+            border-top-width: 0;
+            border-top-right-radius: 0;
+            border-top-left-radius: 0;
+        }
+
+        &.right {
+            border-right-width: 0;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        &.bottom {
+            border-bottom-width: 0;
+            border-bottom-right-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+
+        &.left {
+            border-left-width: 0;
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+        }
+
+        .button {
+            -GtkButton-image-spacing: 0;
+            -GtkButton-inner-border: 0;
+
+            border: none;
+            background-color: transparent;
+            background-image: none;
+        }
     }
 }
diff --git a/gtk-3.0/scss/_window.scss b/gtk-3.0/scss/_window.scss
index fc31783..0be7a63 100755
--- a/gtk-3.0/scss/_window.scss
+++ b/gtk-3.0/scss/_window.scss
@@ -6,38 +6,40 @@
  ! Window frame
 ***************/
 
-.window-frame {
-	border: none;
-	border-radius: $roundness $roundness 0 0;
-	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23),
-				0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21);
+@include exports("window") {
+	.window-frame {
+		border: none;
+		border-radius: $roundness $roundness 0 0;
+		box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23),
+					0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21);
 
-	/* this is used for the resize cursor area */
-	margin: $spacing * 3;
+		/* this is used for the resize cursor area */
+		margin: $spacing * 3;
 
-	&:backdrop {
-		box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24),
-					0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.12);
-	}
-
-	&.tiled { border-radius: 0; }
-
-	&.csd {
-		&.popup {
-			border-radius: 0;
-			box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23),
-						0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21);
+		&:backdrop {
+			box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24),
+						0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.12);
 		}
 
-		&.tooltip {
-			border-radius: $roundness;
-			box-shadow: none;
-		}
+		&.tiled { border-radius: 0; }
 
-		&.message-dialog {
-			border-radius: $roundness;
-			box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23),
-						0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21);
+		&.csd {
+			&.popup {
+				border-radius: 0;
+				box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23),
+							0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21);
+			}
+
+			&.tooltip {
+				border-radius: $roundness;
+				box-shadow: none;
+			}
+
+			&.message-dialog {
+				border-radius: $roundness;
+				box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23),
+							0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21);
+			}
 		}
 	}
 }
diff --git a/gtk-3.0/scss/widgets.scss b/gtk-3.0/scss/widgets.scss
index c74514b..81844c9 100755
--- a/gtk-3.0/scss/widgets.scss
+++ b/gtk-3.0/scss/widgets.scss
@@ -17,78 +17,6 @@
 @import "notebook";
 @import "scrollbar";
 
-
-/*************
-* scrollbar *
-*************/
-.scrollbar {
-    border-width: 1px;
-    border-style: solid;
-    padding: 0;
-}
-
-.scrollbars-junction,
-.scrollbar.trough {
-    border-width: 0;
-    border-radius: 0;
-    background-color: $bg_color;
-    background-image: none;
-}
-
-.scrollbar.button,
-.scrollbar.button:active,
-.scrollbar.button:active:hover {
-    border-width: 0;
-    border-radius: 0;
-    background-color: transparent;
-    background-image: none;
-    color: shade($bg_color, 0.6);
-}
-
-.scrollbar.slider {
-    border-width: 1px;
-    border-color: mix(shade($bg_color, 0.87), $fg_color, 0.21);
-    border-radius: 0;
-    background-color: mix($bg_color, $fg_color, 0.21);
-}
-
-.scrollbar.slider:hover,
-.scrollbar.slider.vertical:hover {
-    border-color: mix(shade($bg_color, 0.87), $fg_color, 0.31);
-    background-color: mix($bg_color, $fg_color, 0.31);
-}
-
-.scrollbar.slider:active,
-.scrollbar.slider.vertical:active {
-    border-color: shade($selected_bg_color, 0.9);
-    background-color: $selected_bg_color;
-}
-
-.scrollbar.slider.fine-tune:prelight:active {
-    border-width: 2px;
-    border-color: transparent;
-}
-
-/* overlay scrollbar */
-OsThumb {
-    color: shade($bg_color, 0.7);
-}
-
-OsThumb:selected,
-OsScrollbar:selected {
-    background-color: $selected_bg_color;
-}
-
-OsThumb:active,
-OsScrollbar:active {
-    background-color: $selected_bg_color;
-}
-
-OsThumb:insensitive,
-OsScrollbar:insensitive {
-    background-color: shade($bg_color, 0.9);
-}
-
 /*************
 * separator *
 *************/