style: Update panel_button mixin to have HighContrast support

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3076>
This commit is contained in:
Sam Hewitt 2023-12-22 17:54:49 -03:30 committed by Marge Bot
parent 21a6c22fc6
commit 5f9a626061
2 changed files with 32 additions and 15 deletions

View File

@ -406,7 +406,8 @@
@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $flat: true, $highlighted_child: false, $child_class:"") { @mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $flat: true, $highlighted_child: false, $child_class:"") {
transition-duration: 150ms; transition-duration: 150ms;
border: 3px solid transparent; margin: 3px;
border: 1px solid transparent;
border-radius: $forced_circular_radius; border-radius: $forced_circular_radius;
font-weight: bold; font-weight: bold;
@ -417,49 +418,65 @@
box-shadow: none; box-shadow: none;
&:active, &:focus, &:checked { &:active, &:focus, &:checked {
box-shadow: inset 0 0 0 100px transparentize($fg, 0.75); background-color: transparentize($fg, 0.75);
&:hover { &:hover {
box-shadow: inset 0 0 0 100px transparentize($fg, 0.65); background-color: transparentize($fg, 0.65);
} }
} }
&:hover { &:hover {
box-shadow: inset 0 0 0 100px transparentize($fg, 0.8); background-color: transparentize($fg, 0.8);
} }
} @else { } @else {
box-shadow: inset 0 0 0 100px transparentize($bg, 0.2); background-color: transparentize($bg, 0.2);
@if $is_highcontrast {
border-color: $hc_inset_color;
}
&:active, &:focus, &:checked { &:active, &:focus, &:checked {
box-shadow: inset 0 0 0 100px $bg; background-color: $bg;
&:hover { &:hover {
box-shadow: inset 0 0 0 100px transparentize($bg, 0.05); background-color: transparentize($bg, 0.05);
} }
} }
&:hover { &:hover {
box-shadow: inset 0 0 0 100px transparentize($bg, 0.1); background-color: transparentize($bg, 0.1);
}
}
@if $is_highcontrast {
&:hover, &:active, &:focus, &:checked {
border-color: $hc_inset_color;
} }
} }
// some overrides to style a child element // some overrides to style a child element
@if $highlighted_child { @if $highlighted_child {
box-shadow: none !important; background: none !important;
border: none !important;
#{$child_class} { #{$child_class} {
transition-duration: 150ms; transition-duration: 150ms;
border: 3px solid transparent;
border-radius: $forced_circular_radius; border-radius: $forced_circular_radius;
// use box-shadow instead of border
@if $is_highcontrast {
box-shadow: inset 0 0 0 1px $hc_inset_color;
}
} }
&:active, &:focus, &:checked { &:active, &:focus {
background: none;
box-shadow: none !important; box-shadow: none !important;
#{$child_class} { #{$child_class} {
box-shadow: inset 0 0 0 100px transparentize($fg, 0.75); background-color: transparentize($fg, 0.75);
&:hover { &:hover {
box-shadow: inset 0 0 0 100px transparentize($fg, 0.65) !important; background-color: transparentize($fg, 0.65) !important;
} }
} }
} }
@ -467,7 +484,7 @@
&:hover { &:hover {
box-shadow: none !important; box-shadow: none !important;
#{$child_class} { #{$child_class} {
box-shadow: inset 0 0 0 100px transparentize($fg, 0.8); background-color: transparentize($fg, 0.8);
} }
} }
} }

View File

@ -30,7 +30,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
// status area icons // status area icons
.system-status-icon { .system-status-icon {
icon-size: $scalable_icon_size; icon-size: $scalable_icon_size;
padding: $base_padding; padding: 0 $base_padding;
margin: 0 $base_margin; margin: 0 $base_margin;
} }