Added actionbar styles

gtk-3.0/scss/gtk.scss

@@ -6,6 +6,7 @@
 @import "widgets/base";
 @import "widgets/button";
 @import "widgets/entry";
+@import "widgets/actionbar";
 @import "widgets/calendar";
 @import "widgets/choosers";
 @import "widgets/grid";
@@ -29,227 +30,3 @@
 @import "apps/nemo";
 @import "apps/panel";
 @import "apps/synaptic";
-
-
-/**************
-* action-bar *
-**************/
-.action-bar {
-    padding: 4px;
-    border-width: 1px 0 0 0;
-    border-style: solid;
-    border-color: shade($bg_color, 0.8);
-    background-color: $bg_color;
-    background-image: none;
-    color: $fg_color;
-}
-
-.action-bar .button.text-button {
-    padding: 4px;
-}
-
-.action-bar .button.image-button {
-    padding: 6px;
-}
-
-.action-bar .title {
-    font: bold;
-    padding: 0 12px;
-}
-
-.action-bar .subtitle {
-    font: smaller;
-    padding: 0 12px;
-}
-
-/***************
-* search bars *
-***************/
-.search-bar {
-    border-width: 0 0 1px 0;
-    border-style: solid;
-    border-color: shade($bg_color, 0.8);
-    background-color: shade($bg_color, 0.98);
-}
-
-.search-bar .button.close-button {
-    padding: 4px;
-}
-
-
-
-/******************************
-* destructive action buttons *
-******************************/
-.destructive-action.button {
-    border-width: 1px;
-    border-style: solid;
-    border-color: shade($error_color, 0.8);
-    border-radius: 2px;
-    background-color: $error_color;
-    background-image: none;
-    color: mix($selected_fg_color, $error_color, 0.1);
-}
-
-.destructive-action.button:hover {
-    border-color: shade($error_color, 0.7);
-    background-color: shade($error_color, 1.12);
-    background-image: none;
-}
-
-.destructive-action.button:active {
-    border-color: shade($error_color, 0.8);
-    background-color: shade($error_color, 0.87);
-    background-image: none;
-}
-
-.destructive-action.button:hover:active {
-    border-color: shade($error_color, 0.7);
-}
-
-/******************************
-* suggested action buttons *
-******************************/
-.suggested-action.button {
-    border-width: 1px;
-    border-style: solid;
-    border-color: shade($selected_bg_color, 0.9);
-    border-radius: 2px;
-    background-color: shade($selected_bg_color, 1.18);
-    background-image: none;
-    color: mix($selected_fg_color, $selected_bg_color, 0.1);
-}
-
-.suggested-action.button:hover {
-    border-color: shade($selected_bg_color, 0.8);
-    background-color: shade($selected_bg_color, 1.20);
-    background-image: none;
-}
-
-.suggested-action.button:active {
-    border-color: shade($selected_bg_color, 0.9);
-    background-color: shade($selected_bg_color, 1.05);
-    background-image: none;
-}
-
-.suggested-action.button:hover:active {
-    border-color: shade($selected_bg_color, 0.8);
-}
-
-/******************
-* selection mode *
-******************/
-.selection-mode.header-bar,
-.selection-mode.toolbar {
-    border-style: solid;
-    border-color: $selected_bg_color;
-    background-color: shade($selected_bg_color, 1.6);
-    background-image: none;
-    color: $selected_bg_color;
-}
-
-.selection-mode.header-bar {
-    border-top-color: shade($selected_bg_color, 1.6);
-    border-bottom-color: $selected_bg_color;
-}
-
-.selection-mode.toolbar {
-    padding: 4px;
-}
-
-/* regular button */
-.selection-mode.header-bar .button,
-.selection-mode.toolbar .button,
-.selection-mode.toolbar GtkToolButton .button {
-    border-width: 1px;
-    border-style: solid;
-    border-color: $selected_bg_color;
-    border-radius: 2px;
-    background-color: shade($selected_bg_color, 1.68);
-    background-image: none;
-    color: shade($selected_bg_color, 0.8);
-}
-
-.selection-mode.header-bar .button:hover,
-.selection-mode.toolbar .button:hover,
-.selection-mode.toolbar GtkToolButton .button:hover {
-    border-color: shade($selected_bg_color, 0.9);
-    background-color: shade($selected_bg_color, 1.70);
-    background-image: none;
-}
-
-.selection-mode.header-bar .button:active,
-.selection-mode.toolbar .button:active,
-.selection-mode.toolbar GtkToolButton .button:active {
-    border-color: shade($selected_bg_color, 0.9);
-    background-color: shade($selected_bg_color, 1.55);
-    background-image: none;
-}
-
-.selection-mode.header-bar .button:hover:active,
-.selection-mode.toolbar .button:hover:active,
-.selection-mode.toolbar GtkToolButton .button:hover:active {
-    border-color: shade($selected_bg_color, 0.8);
-}
-
-/* suggested button */
-.selection-mode.header-bar .suggested-action.button,
-.selection-mode.toolbar .suggested-action.button,
-.selection-mode.toolbar GtkToolButton.suggested-action .button {
-    border-width: 1px;
-    border-style: solid;
-    border-color: shade($selected_bg_color, 0.9);
-    border-radius: 2px;
-    background-color: shade($selected_bg_color, 1.18);
-    background-image: none;
-    color: mix($selected_fg_color, $selected_bg_color, 0.1);
-}
-
-.selection-mode.header-bar .suggested-action.button:hover,
-.selection-mode.toolbar .suggested-action.button:hover,
-.selection-mode.toolbar GtkToolButton.suggested-action .button:hover {
-    border-color: shade($selected_bg_color, 0.8);
-    background-color: shade($selected_bg_color, 1.20);
-    background-image: none;
-}
-
-.selection-mode.header-bar .suggested-action.button:active,
-.selection-mode.toolbar .suggested-action.button:active,
-.selection-mode.toolbar GtkToolButton.suggested-action:active {
-    border-color: shade($selected_bg_color, 0.9);
-    background-color: shade($selected_bg_color, 1.05);
-    background-image: none;
-}
-
-.selection-mode.header-bar .suggested-action.button:hover:active,
-.selection-mode.toolbar .suggested-action.button:hover:active,
-.selection-mode.toolbar GtkToolButton.suggested-action .button:hover:active {
-    border-color: shade($selected_bg_color, 0.8);
-}
-
-/* menu button */
-.selection-mode.header-bar .selection-menu.button,
-.selection-mode.toolbar .selection-menu.button {
-    border-style: none;
-    background-color: transparent;
-    background-image: none;
-    color: shade($selected_bg_color, 0.8);
-}
-
-.selection-mode.toolbar .dim-label,
-.selection-mode.toolbar .selection-menu.button .dim-label {
-    color: shade($selected_bg_color, 0.7);
-}
-
-.selection-mode.header-bar .selection-menu.button:hover,
-.selection-mode.toolbar .dim-label:hover,
-.selection-mode.toolbar .selection-menu.button:hover,
-.selection-mode.toolbar .selection-menu.button .dim-label:hover {
-    color: shade($selected_bg_color, 0.7);
-}
-
-.selection-mode.header-bar .selection-menu.button:active,
-.selection-mode.toolbar .selection-menu.button:active {
-    color: shade($selected_bg_color, 0.8);
-    box-shadow: none;
-}

gtk-3.0/scss/widgets/_actionbar.scss

@@ -0,0 +1,106 @@
+@import "button";
+@import "toolbar";
+
+/**************
+ ! Action-bar *
+***************/
+
+@include exports("actionbar") {
+    .action-bar {
+        @include linear-gradient($bg_color);
+
+        padding: $spacing;
+        border-width: 1px 0 0 0;
+        border-style: solid;
+        border-color: border_normal($bg_color);
+        color: $fg_color;
+
+        .button {
+            &.text-button { padding: $spacing - 1px; }
+
+            &.image-button { padding: $spacing + 1px; }
+        }
+
+        .title {
+            font: bold;
+            padding: 0 ($spacing * 2);
+        }
+
+        .subtitle {
+            font: smaller;
+            padding: 0 ($spacing * 2);
+        }
+    }
+}
+
+
+/***************
+ ! Search bars *
+****************/
+
+@include exports("searchbar") {
+    .search-bar {
+        @include linear-gradient(shade($bg_color, 0.98));
+
+        border-width: 0 0 1px 0;
+        border-style: solid;
+        border-color: border_normal($bg_color);
+        color: $fg_color;
+
+        .button.close-button { padding: $spacing; }
+    }
+}
+
+
+/******************
+ ! Action buttons *
+*******************/
+
+@include exports("actionbuttons") {
+    $types: (
+        suggested: $selected_bg_color,
+        destructive: $error-color
+    );
+
+    @each $type, $color in $types {
+        .#{$type}-action.button {
+            @include button($color, $selected_fg_color);
+        }
+    }
+}
+
+
+/******************
+* selection mode *
+******************/
+
+@include exports("selectionmode") {
+    .selection-mode {
+        &.header-bar, &.toolbar {
+            @include toolbar($selected_bg_color, $selected_fg_color);
+
+            .button {
+                @include button(shade($selected_bg_color, 1.68), shade($selected_bg_color, 0.8));
+
+                &.suggested-action { @extend .suggested-action.button; }
+            }
+
+            .selection-menu.button {
+                border: none;
+                background-color: transparent;
+                background-image: none;
+                color: shade($selected_bg_color, $contrast);
+
+                &:hover { color: shade($selected_bg_color, ($contrast - .1)); }
+
+                &:active { color: shade($selected_bg_color, ($contrast - .05)); }
+            }
+
+            .dim-label, {
+                &, .selection-menu.button & { color: shade($selected_bg_color, ($contrast - .1)); }
+            }
+        }
+
+        &.toolbar { padding: $spacing; }
+    }
+}

gtk-3.0/scss/widgets/_entry.scss

@@ -1,8 +1,8 @@
-/*******
+/*********
- ! Entry
+ ! Entry *
-********/
+**********/
 
-@mixin linked_entry($bg) {
+%linked_entry {
 	border-width: 1px;
 	border-radius: 0;
 	border-right-width: 0;
@@ -70,7 +70,11 @@
 }
 
 @include exports("entry") {
-	.entry { @include entry($base_color, $text_color); }
+	.entry {
+		@include entry($base_color, $text_color);
+
+		&.linked, .linked & { @extend %linked_entry; }
+	}
 }