[gnome-shell-sass] workspaceSwitcherPopup: Implement new OSD design

[Florian Müllner <fmuellner src gnome org>]

commit bd35ecba01a54e4e4d61945eac50b390b7ae3c2d
Author: Florian Müllner <fmuellner gnome org>
Date:   Wed Jan 26 01:33:21 2022 +0100

    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>

 widgets/_workspace-switcher.scss | 38 ++++++++++++--------------------------
 1 file 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;
   }
 }