aboutsummaryrefslogtreecommitdiff
path: root/common/gtk-3.0/3.18/sass
diff options
context:
space:
mode:
authorHorst31802016-01-23 22:09:56 +0100
committerHorst31802016-01-23 22:09:56 +0100
commit57903e5e02d0aaecc5711aa0e3484401b36286a8 (patch)
tree567c84b50950072f1541f0a3ee5a349d60bbf1c2 /common/gtk-3.0/3.18/sass
parent2e1723803c673c32cc9f7a3924ccf4ee19a2e788 (diff)
downloadsolarc-theme-57903e5e02d0aaecc5711aa0e3484401b36286a8.tar.gz
solarc-theme-57903e5e02d0aaecc5711aa0e3484401b36286a8.tar.xz
solarc-theme-57903e5e02d0aaecc5711aa0e3484401b36286a8.zip
clean up linked widget styling
Diffstat (limited to 'common/gtk-3.0/3.18/sass')
-rw-r--r--common/gtk-3.0/3.18/sass/_common.scss327
1 files changed, 85 insertions, 242 deletions
diff --git a/common/gtk-3.0/3.18/sass/_common.scss b/common/gtk-3.0/3.18/sass/_common.scss
index 7b3c53a..d1efaa8 100644
--- a/common/gtk-3.0/3.18/sass/_common.scss
+++ b/common/gtk-3.0/3.18/sass/_common.scss
@@ -200,6 +200,8 @@ $vert_padding: 5px;
@include entry(normal);
&.image { // icons inside the entry
+ color: mix($fg_color,$base_color,80%);
+
&.left { padding-left: 0; }
&.right { padding-right: 0; }
}
@@ -254,15 +256,17 @@ $vert_padding: 5px;
}
}
- &.image { // entry icons colors
- color: mix($fg_color,$base_color,80%);
- }
-
.osd & {
@include entry(osd);
&:focus { @include entry(osd-focus); }
&:insensitive { @include entry(osd-insensitive); }
}
+
+ .linked:not(.vertical) > &,
+ .linked:not(.vertical) > &:focus { @extend %linked; }
+
+ .linked.vertical > &,
+ .linked.vertical > &:focus { @extend %linked_vertical; }
}
GtkSearchEntry.entry { border-radius: 20px; }
@@ -356,48 +360,15 @@ $_dot_color: $selected_bg_color;
//overlay / OSD style
.osd & {
@include button(osd);
- // there's a problem with sass which prevents it to extend the linked
- // placeholder as expected, it should just be "@extend %linked;", the
- // placeholder is basically replicated here
- //
- // Workaround START
- border-radius: 0;
- border-left-style: none;
- border-right-style: none;
-
- &:dir(rtl) {
- border-radius: 0;
- border-right-style: none;
- border-left-style: none
- }
- &:first-child {
- border-radius: 3px 0 0 3px;
- border-left-style: solid;
- }
- &:last-child {
- border-radius: 0 3px 3px 0;
- border-right-style: solid;
- &:dir(rtl) { border-left-style: solid; }
- }
- &:only-child {
- border-radius: 3px;
- border-style: solid;
- }
- // Workaround END
- &:hover {
- @include button(osd-hover);
- @extend %linked;
- }
+ &:hover { @include button(osd-hover); }
&:active, &:checked {
background-clip: padding-box;
@include button(osd-active);
- @extend %linked;
- }
- &:insensitive {
- @include button(osd-insensitive);
- @extend %linked;
}
+ &:insensitive { @include button(osd-insensitive); }
+
+ &, &:hover, &:active, &:checked, &:insensitive { @extend %linked; }
&.flat {
@include button(undecorated);
@@ -414,6 +385,9 @@ $_dot_color: $selected_bg_color;
}
}
}
+ .osd .linked:not(.vertical):not(.path-bar) > &:hover:not(:checked):not(:active):not(:only-child),
+ .osd .linked:not(.vertical):not(.path-bar) > &:hover:not(:checked):not(:active) + &:not(:checked):not(:active) { box-shadow: none; }
+
// Suggested and Destructive Action buttons
@each $b_type, $b_color in (suggested-action, $suggested_color),
(destructive-action, $destructive_color) {
@@ -519,7 +493,6 @@ $_dot_color: $selected_bg_color;
.linked:not(.vertical) > &:active,
.linked:not(.vertical) > &:checked {
@extend %linked;
- @extend %linked_button;
}
.linked.vertical > &,
@@ -527,7 +500,6 @@ $_dot_color: $selected_bg_color;
.linked.vertical > &:active,
.linked.vertical > &:checked {
@extend %linked_vertical;
- @extend %linked_vertical_button;
}
}
@@ -553,137 +525,73 @@ $_dot_color: $selected_bg_color;
}
// Some crazy linking stuff
+@mixin linking_rules($a:0.7, $var:$variant, $vert:'false', $entry_rules:'true', $button_rules:'true',
+ $e_border:$entry_border, $b_border:$button_border) {
-// horizontal
-.linked:not(.vertical):not(.pathbar) {
- > .entry { @extend %linked; }
-
-
- > .entry + .entry { border-left-color: transparentize($entry_border, 0.7); }
-
- > .entry.error + .entry,
- > .entry + .entry.error { border-left-color: if($variant=='light', $error_color, transparentize($entry_border, 0.7)); }
-
- > .entry.warning + .entry,
- > .entry + .entry.warning { border-left-color: if($variant=='light', $warning_color, transparentize($entry_border, 0.7)); }
-
- > .entry.error + .entry.warning { border-left-color: if($variant=='light', $error_color, transparentize($entry_border, 0.7));}
-
-
- > .entry + .entry:focus:not(:last-child),
- > .entry + .entry:focus:last-child { border-left-color: if($variant=='light', $selected_bg_color, $entry_border); }
-
- > .entry + .entry.warning:focus:not(:last-child),
- > .entry + .entry.warning:focus:last-child { border-left-color: if($variant=='light', $warning_color, $entry_border); }
+ $_border: if($vert=='false', left, top);
- > .entry + .entry.error:focus:not(:last-child),
- > .entry + .entry.error:focus:last-child { border-left-color: if($variant=='light', $error_color, $entry_border); }
+ @if $entry_rules=='true' {
+ > .entry + .entry { border-#{$_border}-color: transparentize($e_border, $a); }
+ > .entry.error + .entry,
+ > .entry + .entry.error { border-#{$_border}-color: if($var=='light', $error_color, transparentize($e_border, $a)); }
- > .entry + .button,
- > .entry + .button:hover,
- > .entry + .button:active,
- > .entry + .button:checked,
- > .entry + .button:insensitive { border-left-style: solid; }
+ > .entry.warning + .entry,
+ > .entry + .entry.warning { border-#{$_border}-color: if($var=='light', $warning_color, transparentize($e_border, $a)); }
+ > .entry.error + .entry.warning { border-#{$_border}-color: if($var=='light', $error_color, transparentize($e_border, $a));}
- > .entry:focus:not(:only-child) + .entry,
- > .entry:focus:not(:only-child) + .button,
- > .entry:focus:not(:only-child) + GtkComboBox > .the-button-in-the-combobox,
- > .entry:focus:not(:only-child) + GtkComboBoxText > .the-button-in-the-combobox { border-left-color: if($variant=='light', $selected_bg_color, $entry_border); }
+ @each $e_type, $e_color in ('',$selected_bg_color),
+ ('.warning', $warning_color),
+ ('.error', $error_color) {
- > .entry.warning:focus:not(:only-child) + .entry,
- > .entry.warning:focus:not(:only-child) + .button,
- > .entry.warning:focus:not(:only-child) + GtkComboBox > .the-button-in-the-combobox,
- > .entry.warning:focus:not(:only-child) + GtkComboBoxText > .the-button-in-the-combobox { border-left-color: if($variant=='light', $warning_color, $entry_border); }
+ > .entry + .entry#{$e_type}:focus:not(:last-child),
+ > .entry + .entry#{$e_type}:focus:last-child { border-#{$_border}-color: if($var=='light', $e_color, $e_border); }
- > .entry.error:focus:not(:only-child) + .entry,
- > .entry.error:focus:not(:only-child) + .button,
- > .entry.error:focus:not(:only-child) + GtkComboBox > .the-button-in-the-combobox,
- > .entry.error:focus:not(:only-child) + GtkComboBoxText > .the-button-in-the-combobox { border-left-color: if($variant=='light', $error_color, $entry_border); }
+ > .entry#{$e_type}:focus:not(:only-child) {
+ + .entry, + .button,
+ + GtkComboBox > .the-button-in-the-combobox,
+ + GtkComboBoxText > .the-button-in-the-combobox { border-#{$_border}-color: if($var=='light', $e_color, $e_border); }
+ }
+ }
+ > .button:checked + .entry { border-#{$_border}-color: if($var=='light', $selected_bg_color, $e_border); }
+ }
+ @if $button_rules=='true' {
+ > .button + .button { border-#{$_border}-style: none; }
+ > .button:hover:not(:checked):not(:active):not(:only-child),
+ > .button:hover:not(:checked):not(:active) + .button:not(:checked):not(:active) { box-shadow: inset if($vert=='false', 1px 0, 0 1px) $b_border; }
- > .button:hover:not(:checked):not(:active):not(:only-child),
- > .button:hover:not(:checked):not(:active) + .button:not(:checked):not(:active) { box-shadow: -1px 0 $button_border; }
- > .button:first-child:hover:not(:checked):not(:active) { box-shadow: none; }
- > .button:checked + .button:not(:checked):not(:active):hover { box-shadow: none; }
- > .button:checked + .entry { border-left-color: if($variant=='light', $selected_bg_color, $entry_border); }
- > .entry + .button:not(:checked):not(:active):hover { box-shadow: none; }
+ > .button:first-child:hover:not(:checked):not(:active),
+ > .button:checked + .button:not(:checked):not(:active):hover,
+ > .entry + .button:not(:checked):not(:active):hover { box-shadow: none; }
+ }
}
-// special case for path-bars
-.linked:not(.vertical).path-bar {
+// special case, because path-bars are bugged
+@mixin pathbar_linking_rules($sep_color:if($variant=='light', transparentize($button_border, 0.6), transparentize($button_border, 0.5))) {
-$_linked_separator_color: if($variant=='light', transparentize($button_border, 0.6), transparentize($button_border, 0.5));
+ > .button + .button { border-left-style: none; }
- > .button:hover:not(:checked):not(:active):not(:only-child) {
+ > .button:hover:not(:checked):not(:active):not(:only-child) {
- &:hover {
- box-shadow: inset 1px 0 $_linked_separator_color,
- inset -1px 0 $_linked_separator_color;
+ &:hover {
+ box-shadow: inset 1px 0 $sep_color,
+ inset -1px 0 $sep_color;
+ }
+ &:first-child:hover { box-shadow: inset -1px 0 $sep_color; }
+ &:last-child:hover { box-shadow: inset 1px 0 $sep_color; }
}
- &:first-child:hover { box-shadow: inset -1px 0 $_linked_separator_color; }
- &:last-child:hover { box-shadow: inset 1px 0 $_linked_separator_color; }
- }
}
-// vertical
-.linked.vertical {
- > .entry { @extend %linked_vertical; }
-
-
- > .entry + .entry { border-top-color: transparentize($entry_border, 0.7); }
-
- > .entry.error + .entry,
- > .entry + .entry.error { border-top-color: if($variant=='light', $error_color, transparentize($entry_border, 0.7)); }
-
- > .entry.warning + .entry,
- > .entry + .entry.warning { border-top-color: if($variant=='light', $warning_color, transparentize($entry_border, 0.7)); }
-
- > .entry.error + .entry.warning { border-top-color: if($variant=='light', $error_color, transparentize($entry_border, 0.7));}
-
-
- > .entry + .entry:focus:not(:last-child),
- > .entry + .entry:focus:last-child { border-top-color: if($variant=='light', $selected_bg_color, $entry_border); }
-
- > .entry + .entry.warning:focus:not(:last-child),
- > .entry + .entry.warning:focus:last-child { border-top-color: if($variant=='light', $warning_color, $entry_border); }
-
- > .entry + .entry.error:focus:not(:last-child),
- > .entry + .entry.error:focus:last-child { border-top-color: if($variant=='light', $error_color, $entry_border); }
-
-
- > .entry + .button,
- > .entry + .button:hover,
- > .entry + .button:active,
- > .entry + .button:checked,
- > .entry + .button:insensitive { border-top-style: solid; }
-
-
- > .entry:focus:not(:only-child) + .entry,
- > .entry:focus:not(:only-child) + .button,
- > .entry:focus:not(:only-child) + GtkComboBox > .the-button-in-the-combobox,
- > .entry:focus:not(:only-child) + GtkComboBoxText > .the-button-in-the-combobox { border-top-color: if($variant=='light', $selected_bg_color, $entry_border); }
-
- > .entry.warning:focus:not(:only-child) + .entry,
- > .entry.warning:focus:not(:only-child) + .button,
- > .entry.warning:focus:not(:only-child) + GtkComboBox > .the-button-in-the-combobox,
- > .entry.warning:focus:not(:only-child) + GtkComboBoxText > .the-button-in-the-combobox { border-top-color: if($variant=='light', $warning_color, $entry_border); }
-
- > .entry.error:focus:not(:only-child) + .entry,
- > .entry.error:focus:not(:only-child) + .button,
- > .entry.error:focus:not(:only-child) + GtkComboBox > .the-button-in-the-combobox,
- > .entry.error:focus:not(:only-child) + GtkComboBoxText > .the-button-in-the-combobox { border-top-color: if($variant=='light', $error_color, $entry_border); }
-
-
- > .button:hover:not(:checked):not(:active):not(:only-child),
- > .button:hover:not(:checked):not(:active) + .button:not(:checked):not(:active) { box-shadow: 0 -1px $button_border; }
- > .button:first-child:hover:not(:checked):not(:active) { box-shadow: none; }
- > .button:checked + .button:not(:checked):not(:active):hover { box-shadow: none; }
- > .button:checked + .entry { border-top-color: if($variant=='light', $selected_bg_color, $entry_border); }
- > .entry + .button:not(:checked):not(:active):hover { box-shadow: none; }
+// Apply the rules defined above
+.linked:not(.vertical) {
+ &:not(.path-bar) { @include linking_rules(); }
+ &.path-bar { @include pathbar_linking_rules(); }
}
+.linked.vertical { @include linking_rules($vert:'true'); }
+
%linked_middle {
border-radius: 0;
border-right-style: none;
@@ -728,16 +636,6 @@ $_linked_separator_color: if($variant=='light', transparentize($button_border, 0
}
}
-%linked_button {
- border-left-style: none;
- &:first-child { border-left-style: solid; }
-}
-
-%linked_vertical_button {
- border-top-style: none;
- &:first-child { border-top-style: solid; }
-}
-
%undecorated_button {
border-color: transparent;
background-color: transparent;
@@ -1259,6 +1157,8 @@ GtkComboBox {
}
// Linking stuff
+
+ // Reset buttons
.linked:not(.vertical):not(.path-bar) > .button,
.linked:not(.vertical):not(.path-bar) > .button:hover,
.linked:not(.vertical):not(.path-bar) > .button:active,
@@ -1266,92 +1166,35 @@ GtkComboBox {
.linked:not(.vertical):not(.path-bar) > .button:insensitive {
border-radius: 3px;
border-style: solid;
-
}
- .linked:not(.vertical):not(.path-bar) > .button:hover:not(:checked):not(:active):not(:only-child),
- .linked:not(.vertical):not(.path-bar) > .button:hover:not(:checked):not(:active) + .button:not(:checked):not(:active),
- .linked:not(.vertical).path-bar > .button:hover:not(:checked):not(:active):not(:only-child),
- .linked:not(.vertical).path-bar > .button:hover:not(:checked):not(:active) + .button:not(:checked):not(:active) { box-shadow: none; }
-
- // special case for path-bars and stack-switchers
- .linked:not(.vertical):not(.path-bar).stack-switcher > .button,
- .linked:not(.vertical).path-bar > .button {
-
- @include button(header-hover);
-
- &:hover { background-color: lighten($header_button_bg, 15%); }
- &:active, &:checked { @include button(header-active); }
- &:insensitive { color: transparentize($header_fg, 0.4); }
- }
-
- .linked:not(.vertical):not(.path-bar).stack-switcher > .button,
- .linked:not(.vertical).path-bar > .button,
- .linked:not(.vertical):not(.path-bar).stack-switcher > .button:hover,
- .linked:not(.vertical).path-bar > .button:hover,
- .linked:not(.vertical):not(.path-bar).stack-switcher > .button:active,
- .linked:not(.vertical).path-bar > .button:active,
- .linked:not(.vertical):not(.path-bar).stack-switcher > .button:checked,
- .linked:not(.vertical).path-bar > .button:checked,
- .linked:not(.vertical):not(.path-bar).stack-switcher > .button:insensitive,
- .linked:not(.vertical).path-bar > .button:insensitive {
- @extend %linked;
- @extend %linked_button;
+ .linked:not(.vertical):not(.path-bar), .linked:not(.vertical).path-bar {
+ > .button:hover:not(:checked):not(:active):not(:only-child),
+ > .button:hover:not(:checked):not(:active) + .button:not(:checked):not(:active) { box-shadow: none; }
}
- .linked:not(.vertical).path-bar,
- .linked:not(.vertical):not(.path-bar).stack-switcher {
+ // special case for path-bars and stack-switchers
+ .linked:not(.vertical):not(.path-bar).stack-switcher,
+ .linked:not(.vertical).path-bar {
- $_linked_separator_color: $header_button_border;
+ > .button {
+ @include button(header-hover);
- > .button:hover:not(:checked):not(:active):not(:only-child) {
+ &:hover { background-color: lighten($header_button_bg, 15%); }
+ &:active, &:checked { @include button(header-active); }
+ &:insensitive { color: transparentize($header_fg, 0.4); }
- &:hover {
- box-shadow: inset 1px 0 $_linked_separator_color,
- inset -1px 0 $_linked_separator_color;
- }
- &:first-child:hover { box-shadow: inset -1px 0 $_linked_separator_color; }
- &:last-child:hover { box-shadow: inset 1px 0 $_linked_separator_color; }
+ &, &:hover, &:active, &:checked, &:insensitive { @extend %linked; }
}
- }
-
- .linked:not(.vertical):not(.pathbar) {
-
- > .entry + .entry { border-left-color: transparentize($header_entry_border, 0.5); }
-
- > .entry.error + .entry,
- > .entry + .entry.error { border-left-color: if($variant=='light', $error_color, transparentize($header_entry_border, 0.5)); }
-
- > .entry.warning + .entry,
- > .entry + .entry.warning { border-left-color: if($variant=='light', $warning_color, transparentize($header_entry_border, 0.5)); }
-
- > .entry.error + .entry.warning { border-left-color: if($variant=='light', $error_color, transparentize($header_entry_border, 0.5));}
-
-
- > .entry + .entry:focus:not(:last-child),
- > .entry + .entry:focus:last-child { border-left-color: if($darker=='false' and $variant=='light', $selected_bg_color, $header_entry_border); }
-
- > .entry + .entry.warning:focus:not(:last-child),
- > .entry + .entry.warning:focus:last-child { border-left-color: if($variant=='light', $warning_color, $header_entry_border); }
-
- > .entry + .entry.error:focus:not(:last-child),
- > .entry + .entry.error:focus:last-child { border-left-color: if($variant=='light', $error_color, $header_entry_border); }
-
-
- > .entry:focus:not(:only-child) + .entry,
- > .entry:focus:not(:only-child) + .button,
- > .entry:focus:not(:only-child) + GtkComboBox > .the-button-in-the-combobox,
- > .entry:focus:not(:only-child) + GtkComboBoxText > .the-button-in-the-combobox { border-left-color: if($darker=='false' and $variant=='light', $selected_bg_color, $header_entry_border); }
-
- > .entry.warning:focus:not(:only-child) + .entry,
- > .entry.warning:focus:not(:only-child) + .button,
- > .entry.warning:focus:not(:only-child) + GtkComboBox > .the-button-in-the-combobox,
- > .entry.warning:focus:not(:only-child) + GtkComboBoxText > .the-button-in-the-combobox { border-left-color: if($variant=='light', $warning_color, $header_entry_border); }
-
- > .entry.error:focus:not(:only-child) + .entry,
- > .entry.error:focus:not(:only-child) + .button,
- > .entry.error:focus:not(:only-child) + GtkComboBox > .the-button-in-the-combobox,
- > .entry.error:focus:not(:only-child) + GtkComboBoxText > .the-button-in-the-combobox { border-left-color: if($variant=='light', $error_color, $header_entry_border); }
+ @include pathbar_linking_rules($sep_color:$header_button_border);
+ }
+ // use linking rules for entries only
+ .linked:not(.vertical):not(.path-bar) {
+ @include linking_rules( $a:0.5,
+ $var:if($variant=='light' and $darker=='false', 'light', 'dark'),
+ $button_rules:'false',
+ $e_border:$header_entry_border,
+ $b_border:$header_button_border );
}
// Headerbar Suggested and Destructive Action buttons