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:"") {
transition-duration: 150ms;
border: 3px solid transparent;
margin: 3px;
border: 1px solid transparent;
border-radius: $forced_circular_radius;
font-weight: bold;
@ -417,49 +418,65 @@
box-shadow: none;
&:active, &:focus, &:checked {
box-shadow: inset 0 0 0 100px transparentize($fg, 0.75);
background-color: transparentize($fg, 0.75);
&:hover {
box-shadow: inset 0 0 0 100px transparentize($fg, 0.65);
background-color: transparentize($fg, 0.65);
}
}
&:hover {
box-shadow: inset 0 0 0 100px transparentize($fg, 0.8);
background-color: transparentize($fg, 0.8);
}
} @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 {
box-shadow: inset 0 0 0 100px $bg;
background-color: $bg;
&:hover {
box-shadow: inset 0 0 0 100px transparentize($bg, 0.05);
background-color: transparentize($bg, 0.05);
}
}
&: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
@if $highlighted_child {
box-shadow: none !important;
background: none !important;
border: none !important;
#{$child_class} {
transition-duration: 150ms;
border: 3px solid transparent;
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;
#{$child_class} {
box-shadow: inset 0 0 0 100px transparentize($fg, 0.75);
background-color: transparentize($fg, 0.75);
&: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 {
box-shadow: none !important;
#{$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
.system-status-icon {
icon-size: $scalable_icon_size;
padding: $base_padding;
padding: 0 $base_padding;
margin: 0 $base_margin;
}