Added actionbar styles

2026-07-10 12:18:49 -07:00 · 2014-12-20 16:42:58 +05:30
parent 249f86d864
commit 7dccf6b479
3 changed files with 116 additions and 229 deletions
@@ -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; }
+    }
+}