style: CSS follow ups for quicksettings

- some padding adjustments
- add proper focus style for :checked buttons
- popover radii adjustments

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2401>

3 files changed, 13 insertions, 9 deletions

diff --git a/_drawing.scss b/_drawing.scss
index 217aac9..bdb2fb2 100644
--- a/_drawing.scss
+++ b/_drawing.scss
@@ -200,7 +200,7 @@
     background-color: $selected_bg_color;
     color: $selected_fg_color;
     &:focus {
-      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
+      box-shadow: inset 0 0 0 2px lighten($selected_bg_color, 10%);
     }
     &:hover, &:focus { 
       background-color: lighten($selected_bg_color, 5%);
diff --git a/widgets/_popovers.scss b/widgets/_popovers.scss
index 4a86dd3..3b1d5ed 100644
--- a/widgets/_popovers.scss
+++ b/widgets/_popovers.scss
@@ -19,7 +19,7 @@
 // popover content
 .popup-menu-content {
   padding: $base_padding;
-  border-radius: $modal_radius - 2px;
+  border-radius: $modal_radius*1.25;
   border: 1px solid $borders_edge;
   box-shadow: 0 2px 4px 0 $shadow_color;
   background-color: $bg_color;
@@ -28,7 +28,7 @@
 // menu items
 .popup-menu-item {
   padding: $base_padding*1.5 $base_padding*2;
-  border-radius: $base_border_radius;
+  border-radius: $base_border_radius*1.5;
   spacing: $base_padding;
   transition-duration: 100ms;
   background-color: transparent;
diff --git a/widgets/_quick-settings.scss b/widgets/_quick-settings.scss
index 53325fa..1324865 100644
--- a/widgets/_quick-settings.scss
+++ b/widgets/_quick-settings.scss
@@ -11,7 +11,7 @@
   border-radius: 99px;
   min-width: 11.5em;
   max-width: 11.5em;
-  min-height: 48px;
+  min-height: 44px;
 
   &:checked { @include button(default); }
 
@@ -40,7 +40,9 @@
 }
 
 .quick-slider {
-  padding: $base_padding;
+  padding: 0 $base_padding;
+
+  & > StBoxLayout { spacing: $base_padding; }
 
   .slider-bin {
     &:focus {@include button(focus);}
@@ -53,16 +55,18 @@
 }
 
 .quick-toggle-menu {
-  @include card();
-  padding: 1.5 * $base_padding;
+  background-color: $card_bg_color;
+  border-radius: $base_border_radius*2.75;
+  padding: $base_padding*2.75;
+  margin: 0 $base_padding*2.75;
 
   & .header {
     spacing-rows: 0.5 * $base_padding;
-    spacing-columns: $base_padding;
+    spacing-columns: $base_padding*2;
     padding-bottom: 2 * $base_padding;
 
     & .icon {
-      icon-size: $large_icon_size;
+      icon-size: $base_icon_size*1.5; // a non-standard symbolic size but ok
       border-radius: 999px;
       padding: 1.5 * $base_padding;
       background-color: lighten($bg_color, 10%);