diff options
author | Florian Müllner <fmuellner@gnome.org> | 2022-01-26 01:33:21 +0100 |
---|---|---|
committer | Florian Müllner <fmuellner@gnome.org> | 2022-02-14 23:46:52 +0100 |
commit | bd35ecba01a54e4e4d61945eac50b390b7ae3c2d (patch) | |
tree | 047a409d91ed4ac3c994a71adb69e3e8eaa38d54 | |
parent | 08a8c9d810602dd48524061c331ad00d562d1ca1 (diff) | |
download | gnome-shell-sass-bd35ecba01a54e4e4d61945eac50b390b7ae3c2d.tar.gz |
workspaceSwitcherPopup: Implement new OSD design
Move the popup to the bottom and represent workspaces as small dots
instead of as scaled down representations of the work area.
https://gitlab.gnome.org/Teams/Design/os-mockups/-/issues/152
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2127>
-rw-r--r-- | widgets/_workspace-switcher.scss | 38 |
1 files changed, 12 insertions, 26 deletions
diff --git a/widgets/_workspace-switcher.scss b/widgets/_workspace-switcher.scss index 3edacda..1996e09 100644 --- a/widgets/_workspace-switcher.scss +++ b/widgets/_workspace-switcher.scss @@ -1,38 +1,24 @@ /* Workspace Switcher */ -$ws_padding: $base_padding*2; -$ws_border_radius: $modal_radius + 8px; - -.workspace-switcher-group { - padding: $base_padding * 2; -} - -.workspace-switcher-container { - @extend %osd_panel; - padding: $ws_padding; - border-radius: $ws_border_radius; - box-shadow: 0 8px 8px 0 rgba(0,0,0,0.1); -} +$ws_indicator_height: $base_icon_size * 2; +$ws_dot_active: $ws_indicator_height / 3; +$ws_dot_inactive: $ws_indicator_height / 6; .workspace-switcher { - background: transparent; - border: none; - border-radius: 0; + @extend %osd_panel; + margin: 4em; spacing: $base_spacing * 2; } .ws-switcher-indicator { - background: transparent; - height: 50px; - background-size: 32px; - border: 1px solid transparentize($osd_fg_color,0.9); - border-radius: $base_border_radius + 3px; + background-color: transparentize($osd_fg_color,0.5); + padding: $ws_dot_inactive / 2; + margin: ($ws_indicator_height - $ws_dot_inactive) / 2; + border-radius: $ws_indicator_height; &:active { - height: 52px; - background-color: $selected_bg_color; - border: 1px solid if($variant=='light', darken($selected_bg_color, 8%), lighten($selected_bg_color, 5%)); - border-radius: $base_border_radius + 3px; - color: $selected_fg_color; + background-color: $osd_fg_color; + padding: $ws_dot_active / 2; + margin: ($ws_indicator_height - $ws_dot_active) / 2; } } |