[gnome-shell/wip/snwh/theme-refactor: 22/34] theme: app-grid, refine the padding, fix the tabs

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

commit fb3e5a4495604d191a531994ddee96cff38a686e
Author: Sam Hewitt <sam snwh org>
Date:   Thu Dec 19 13:05:28 2019 -0500

    theme: app-grid, refine the padding, fix the tabs
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/904

 data/theme/gnome-shell-sass/_common.scss           |  5 +++--
 data/theme/gnome-shell-sass/widgets/_app-grid.scss | 25 +++++++++++++---------
 2 files changed, 18 insertions(+), 12 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index 60afa54406..6824d93782 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -39,7 +39,6 @@ $modal_radius:$base_border_radius * 2;
 $bubble_borders_color: lighten($borders_color, if($variant=='light', 0%, 5%));
 // $bubble_borders_color: if($variant == 'light', rgba(255,255,255,0.1), rgba(0,0,0,0.3));
 
-
 // hover
 $hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 5%));
 $hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 5%));
@@ -131,7 +130,9 @@ stage {
   color: $osd_fg_color;
   border-radius: $base_border_radius + 4px;
   padding: $base_padding;
-  border: 2px solid transparent;
+  border-width: 2px;
+  border-style: solid;
+  border-color: transparent;
   transition-duration: 100ms;
   text-align: center;
 }
diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss 
b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
index ee43775e00..7926445a13 100644
--- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss
+++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
@@ -1,16 +1,17 @@
 /* App Grid */
 
 $app_icon_size: 96px;
-$app_icon_padding: 20px;
+$app_icon_padding: 24px;
 
 // app icons
 .icon-grid {
-  spacing: 30px;
   -shell-grid-horizontal-item-size: $app_icon_size + $app_icon_padding * 2;
   -shell-grid-vertical-item-size: $app_icon_size + $app_icon_padding * 2;
+  spacing: $base_spacing * 6;
 
   .overview-icon {
     icon-size: $app_icon_size;
+    StIcon { margin-bottom: $base_margin; } // margin on icon so label isn't close
   }
 }
 
@@ -83,7 +84,7 @@ $app_grid_fg_color: #fff;
   }
 }
 
-//expanded folder
+// expanded folder
 .app-folder-popup {
   -arrow-border-radius: 8px;
   -arrow-background-color: transparentize(darken($osd_bg_color,10%), 0.5);
@@ -92,6 +93,7 @@ $app_grid_fg_color: #fff;
 }
 
 .app-folder-popup-bin { padding: 5px; }
+
 .app-folder-icon {
   padding: $base_padding;
   spacing-rows: $base_spacing;
@@ -173,7 +175,7 @@ $app_grid_fg_color: #fff;
 
 // buttons
 .app-view-control { 
-  padding: 4px 32px;
+  padding: $base_padding $base_padding*5;
   margin: 0;
   background-color: transparentize($osd_bg_color, 0.5);
   border-width: 1px;
@@ -186,16 +188,19 @@ $app_grid_fg_color: #fff;
   }
 
   &:active {
-    box-shadow: inset 0 -2px 0 0 $osd_fg_color;
-    background-color: transparentize($selected_bg_color, 0.5) !important;
-    font-weight: bold;
+    box-shadow: none;
+    background-color: $selected_bg_color !important;
+    &:hover {
+      background-color: lighten($selected_bg_color, 11%) !important;
+    }
   }
 
   &:checked {
-    background-color: transparentize(lighten($osd_bg_color, 20%), 0.5);
-    color: $osd_fg_color;
+    background-color: $selected_bg_color !important;
+    color: $selected_fg_color;
     box-shadow: none;
-    font-weight: bold;
+    &:active { background-color: darken($selected_bg_color, 4%) !important; }
+    &:hover { background-color: lighten($selected_bg_color, 7%) !important; }
   }
 
   &:first-child {