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:
parent
21a6c22fc6
commit
5f9a626061
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user