From 7dccf6b479382b132ecb66052fd5ccc23e8b4c1d Mon Sep 17 00:00:00 2001
From: Satyajit Sahoo <satyajit.happy@gmail.com>
Date: Sat, 20 Dec 2014 16:42:58 +0530
Subject: [PATCH] Added actionbar styles
---
gtk-3.0/scss/gtk.scss | 225 +--------------------------
gtk-3.0/scss/widgets/_actionbar.scss | 106 +++++++++++++
gtk-3.0/scss/widgets/_entry.scss | 14 +-
3 files changed, 116 insertions(+), 229 deletions(-)
create mode 100644 gtk-3.0/scss/widgets/_actionbar.scss
diff --git a/gtk-3.0/scss/gtk.scss b/gtk-3.0/scss/gtk.scss
index 4b0d533..26eeaa5 100755
--- a/gtk-3.0/scss/gtk.scss
+++ b/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;
-}
diff --git a/gtk-3.0/scss/widgets/_actionbar.scss b/gtk-3.0/scss/widgets/_actionbar.scss
new file mode 100644
index 0000000..4f1280a
--- /dev/null
+++ b/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; }
+ }
+}
diff --git a/gtk-3.0/scss/widgets/_entry.scss b/gtk-3.0/scss/widgets/_entry.scss
index 184dac5..b3c4264 100755
--- a/gtk-3.0/scss/widgets/_entry.scss
+++ b/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; }
+ }
}