diff options
| author | Florian Müllner <fmuellner@gnome.org> | 2022-08-23 01:29:10 +0200 |
|---|---|---|
| committer | Florian Müllner <fmuellner@gnome.org> | 2023-02-14 17:11:24 +0100 |
| commit | 5cae16bed5c6ada8f490ef89ae5cff619d5a7412 (patch) | |
| tree | 2261635a687b8f92e3c5ed654b69179fce8f2f15 | |
| parent | 3ad94c5164cda84425007860e22bfa352b9e5e6f (diff) | |
| download | gnome-shell-sass-5cae16bed5c6ada8f490ef89ae5cff619d5a7412.tar.gz | |
quickSettings: Split menu toggle
Menu toggles are currently regular toggles with an additional
arrow button. This allows for a simpler implementation, but
has downsides with regards to keyboard navigation and hover
feedback.
To make it more obvious that the two parts of the menu toggle
perform different actions, change the overall structure of the
toggle to *contain* a regular toggle and the menu button.
That way each element uses its own hover effect, and shows up
in the keynav focus chain.
https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/5964
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2632>
| -rw-r--r-- | widgets/_quick-settings.scss | 22 |
1 files changed, 17 insertions, 5 deletions
diff --git a/widgets/_quick-settings.scss b/widgets/_quick-settings.scss index 494289d..8702856 100644 --- a/widgets/_quick-settings.scss +++ b/widgets/_quick-settings.scss @@ -12,13 +12,15 @@ spacing-columns: $base_padding*2; } -.quick-toggle { +.quick-toggle, .quick-menu-toggle { border-radius: 99px; min-width: 12em; max-width: 12em; min-height: 48px; border:none; +} +.quick-toggle { &:checked { @include button(default, $c:$selected_bg_color); } & > StBoxLayout { spacing: $base_padding*1.5; } @@ -37,16 +39,26 @@ font-size: 12px; } - .quick-toggle-icon, .quick-toggle-arrow { icon-size: $base_icon_size; } + .quick-toggle-icon { icon-size: $base_icon_size; } } .quick-menu-toggle { - &:ltr > StBoxLayout { padding-right: 0; } - &:rtl > StBoxLayout { padding-left: 0; } + & .quick-toggle { + min-width: auto; + max-width: auto; + + &:ltr { border-radius: 99px 0 0 99px; } + &:rtl { border-radius: 0 99px 99px 0; } + + &:ltr:last-child { border-radius: 99px; } + &:rtl:last-child { border-radius: 99px; } + } & .quick-toggle-arrow { - background-color: transparentize($fg_color, 0.9); padding: $base_padding $base_padding*1.75; + border: none; + + &:checked { @include button(default, $c:$selected_bg_color); } &:ltr { border-radius: 0 99px 99px 0; } &:rtl { border-radius: 99px 0 0 99px; } |