switch: Add hover styles

Same as checkboxes.

Closes https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/6455

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2717>
This commit is contained in:
Alice Mikhaylenko 2024-06-18 21:39:06 +04:00 committed by Florian Müllner
parent 259eaa9bbb
commit cca34af31e
2 changed files with 14 additions and 0 deletions

View File

@ -11,8 +11,16 @@ $switch_handle_size: 20px;
@if $contrast == 'high' { @if $contrast == 'high' {
background: transparentize(if($variant == 'light', black, white), .7); background: transparentize(if($variant == 'light', black, white), .7);
&:hover {
background: transparentize(if($variant == 'light', black, white), .6);
}
} @else { } @else {
background: transparentize(if($variant == 'light', black, white), .85); background: transparentize(if($variant == 'light', black, white), .85);
&:hover {
background: transparentize(if($variant == 'light', black, white), .8);
}
} }
StIcon { StIcon {
@ -33,6 +41,11 @@ $switch_handle_size: 20px;
background: $selected_bg_color; background: $selected_bg_color;
color: $selected_fg_color; color: $selected_fg_color;
&:hover {
background-color: lighten($selected_bg_color, 5%);
color: lighten($selected_fg_color, 5%);
}
.handle { .handle {
background: white; background: white;
} }

View File

@ -343,6 +343,7 @@ export const Switch = GObject.registerClass({
super._init({ super._init({
style_class: 'toggle-switch', style_class: 'toggle-switch',
accessible_role: Atk.Role.CHECK_BOX, accessible_role: Atk.Role.CHECK_BOX,
track_hover: true,
}); });
const box = new St.BoxLayout({ const box = new St.BoxLayout({