aboutsummaryrefslogtreecommitdiff
path: root/common/gtk-3.0/3.20/sass/_common.scss
diff options
context:
space:
mode:
Diffstat (limited to 'common/gtk-3.0/3.20/sass/_common.scss')
-rw-r--r--common/gtk-3.0/3.20/sass/_common.scss294
1 files changed, 86 insertions, 208 deletions
diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss
index 393f206..05b7bf9 100644
--- a/common/gtk-3.0/3.20/sass/_common.scss
+++ b/common/gtk-3.0/3.20/sass/_common.scss
@@ -271,6 +271,12 @@ entry {
&:focus { @include entry(osd-focus); }
&:disabled { @include entry(osd-insensitive); }
}
+
+ .linked:not(.vertical) > &,
+ .linked:not(.vertical) > &:focus { @extend %linked; }
+
+ .linked.vertical > &,
+ .linked.vertical > &:focus { @extend %linked_vertical; }
}
//
@@ -388,6 +394,9 @@ button {
&:active, &:checked { @include button(osd-active); }
}
}
+ .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) {
@@ -493,7 +502,6 @@ button {
.linked:not(.vertical) > &:active,
.linked:not(.vertical) > &:checked {
@extend %linked;
- @extend %linked_button;
}
.linked.vertical > &,
@@ -501,7 +509,6 @@ button {
.linked.vertical > &:active,
.linked.vertical > &:checked {
@extend %linked_vertical;
- @extend %linked_vertical_button;
}
}
@@ -527,131 +534,73 @@ toolbar.inline-toolbar toolbutton {
}
// 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));}
+ $_border: if($vert=='false', left, top);
+ @if $entry_rules=='true' {
+ > entry + entry { border-#{$_border}-color: transparentize($e_border, $a); }
- > 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); }
-
- > entry + entry.error:focus:not(:last-child),
- > entry + entry.error:focus:last-child { border-left-color: if($variant=='light', $error_color, $entry_border); }
-
+ > 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:disabled { 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) + combobox > button.combo { 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) + combobox > button.combo { 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) + combobox > button.combo { border-left-color: if($variant=='light', $error_color, $entry_border); }
+ > entry#{$e_type}:focus:not(:only-child) {
+ + entry,
+ + button,
+ + combobox > button.combo { 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):not(:only-child):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):not(:only-child):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:disabled { border-top-style: solid; }
-
-
- > entry:focus:not(:only-child) + entry,
- > entry:focus:not(:only-child) + button,
- > entry:focus:not(:only-child) + combobox > button.combo { 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) + combobox > button.combo { 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) + combobox > button.combo { 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;
@@ -696,16 +645,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;
@@ -1229,6 +1168,8 @@ headerbar {
}
// 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,
@@ -1236,89 +1177,35 @@ headerbar {
.linked:not(.vertical):not(.path-bar) > button:disabled {
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); }
- &:disabled { 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:disabled,
- .linked:not(.vertical).path-bar > button:disabled {
- @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); }
+ &:disabled { 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, &:disabled { @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) + combobox > button.combo { 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) + combobox > button.combo { 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) + button.combo > button.combo { 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
@@ -3028,9 +2915,7 @@ headerbar,
&:active, &:checked {
@include button(header-active);
}
-
&.close, &.maximize, &.minimize {
-
color: transparent;
background-color: transparent;
background-position: center;
@@ -3039,21 +2924,14 @@ headerbar,
&:backdrop { opacity: 1; }
}
+ // Load png assets for each button
+ @each $k in ('close','maximize', 'minimize') {
+ @each $l, $m in ('',''), (':backdrop','-backdrop'), (':hover','-hover'), (':active','-active') {
- &.close { background-image: -gtk-scaled(url('assets/titlebutton-close#{$darker_asset_suffix}.png'),url('assets/titlebutton-close#{$darker_asset_suffix}@2.png')); }
- &.close:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-close-backdrop#{$darker_asset_suffix}.png'),url('assets/titlebutton-close-backdrop#{$darker_asset_suffix}@2.png')); }
- &.close:hover { background-image: -gtk-scaled(url('assets/titlebutton-close-hover#{$darker_asset_suffix}.png'),url('assets/titlebutton-close-hover#{$darker_asset_suffix}@2.png')); }
- &.close:active { background-image: -gtk-scaled(url('assets/titlebutton-close-active#{$darker_asset_suffix}.png'),url('assets/titlebutton-close-active#{$darker_asset_suffix}@2.png')); }
-
- &.maximize { background-image: -gtk-scaled(url('assets/titlebutton-max#{$darker_asset_suffix}.png'),url('assets/titlebutton-max#{$darker_asset_suffix}@2.png')); }
- &.maximize:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-max-backdrop#{$darker_asset_suffix}.png'),url('assets/titlebutton-max-backdrop#{$darker_asset_suffix}@2.png')); }
- &.maximize:hover { background-image: -gtk-scaled(url('assets/titlebutton-max-hover#{$darker_asset_suffix}.png'),url('assets/titlebutton-max-hover#{$darker_asset_suffix}@2.png')); }
- &.maximize:active { background-image: -gtk-scaled(url('assets/titlebutton-max-active#{$darker_asset_suffix}.png'),url('assets/titlebutton-max-active#{$darker_asset_suffix}@2.png')); }
-
- &.minimize { background-image: -gtk-scaled(url('assets/titlebutton-min#{$darker_asset_suffix}.png'),url('assets/titlebutton-min#{$darker_asset_suffix}@2.png')); }
- &.minimize:backdrop { background-image: -gtk-scaled(url('assets/titlebutton-min-backdrop#{$darker_asset_suffix}.png'),url('assets/titlebutton-min-backdrop#{$darker_asset_suffix}@2.png')); }
- &.minimize:hover { background-image: -gtk-scaled(url('assets/titlebutton-min-hover#{$darker_asset_suffix}.png'),url('assets/titlebutton-min-hover#{$darker_asset_suffix}@2.png')); }
- &.minimize:active { background-image: -gtk-scaled(url('assets/titlebutton-min-active#{$darker_asset_suffix}.png'),url('assets/titlebutton-min-active#{$darker_asset_suffix}@2.png')); }
+ &.#{$k}#{$l} { background-image: -gtk-scaled(url('assets/titlebutton-#{$k}#{$m}#{$darker_asset_suffix}.png'),
+ url('assets/titlebutton-#{$k}#{$m}#{$darker_asset_suffix}@2.png')); }
+ }
+ }
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-29 06:37:24 +0000