[gnome-shell-sass] theme: Simplify .overview-icon styling

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

commit 4c55fa5a748e42c975850ff302a48ff79761826c
Author: nana-4 <hnmaigo gmail com>
Date:   Sat Jan 25 17:53:17 2020 +0900

    theme: Simplify .overview-icon styling
    
    This reduces duplicate code by using overview-icon() and %app-well-app
    to improve maintainability.
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/957

 _common.scss                 |  6 +----
 _drawing.scss                | 35 +++++++++++++++++++++++++++++
 widgets/_app-grid.scss       | 52 +++++---------------------------------------
 widgets/_dash.scss           | 27 ++---------------------
 widgets/_search-results.scss | 28 +-----------------------
 5 files changed, 44 insertions(+), 104 deletions(-)
---
diff --git a/_common.scss b/_common.scss
index d218557..197b4fc 100644
--- a/_common.scss
+++ b/_common.scss
@@ -91,13 +91,9 @@ stage {
 
 // icon tiles
 %icon_tile {
-  background-color: transparent; // no background
-  color: $osd_fg_color;
   border-radius: $base_border_radius + 4px;
   padding: $base_padding;
-  border-width: 2px;
-  border-style: solid;
-  border-color: transparent;
+  border: 2px solid transparent;
   transition-duration: 100ms;
   text-align: center;
 }
diff --git a/_drawing.scss b/_drawing.scss
index 44323b3..4c0383e 100644
--- a/_drawing.scss
+++ b/_drawing.scss
@@ -194,3 +194,38 @@
     icon-shadow: none;
   }
 }
+
+// overview icons
+@mixin overview-icon($color) {
+  .overview-icon {
+    @extend %icon_tile;
+    color: $color;
+  }
+
+  &:hover,
+  &:selected {
+    .overview-icon {
+      background-color: transparentize($color, .9);
+    }
+  }
+
+  &:focus {
+    .overview-icon {
+      background-color: transparentize($color, .7);
+      // border-color: $selected_bg_color;
+    }
+  }
+
+  &:drop {
+    .overview-icon {
+      background-color: transparentize($selected_bg_color, .15);
+    }
+  }
+
+  &:active,
+  &:checked {
+    .overview-icon {
+      background-color: transparentize(darken($osd_bg_color, 10%), .5);
+    }
+  }
+}
diff --git a/widgets/_app-grid.scss b/widgets/_app-grid.scss
index e3e289d..cc2b7a7 100644
--- a/widgets/_app-grid.scss
+++ b/widgets/_app-grid.scss
@@ -33,55 +33,18 @@ $app_grid_fg_color: #fff;
 
 // Icon tiles in the app grid
 .app-well-app,
-.app-folder {
-
-  .overview-icon {
-    @extend %icon_tile;
-    color: $app_grid_fg_color;
-  }
+%app-well-app {
+  @include overview-icon($app_grid_fg_color);
 
-  &:selected {
-    .overview-icon {
-      background-color: transparentize($osd_bg_color,0.7);
-      color: $app_grid_fg_color;
-    }
-  }
-
-  &:hover,
-  &:focus,
-  &:selected {
-    .overview-icon {
-      background-color: transparentize($osd_fg_color,0.9);
-      color: $osd_fg_color;
-    }
-  }
-
-  &:focus {
-    .overview-icon {
-      background-color: transparentize($osd_fg_color,0.7);
-      // border-color: $selected_bg_color;
-      color: $app_grid_fg_color;
-    }
-  }
-
-  &:drop {
-    .overview-icon {
-      background-color: transparentize($selected_bg_color,.15);
-    }
-  }
-
-  &:active,
-  &:checked {
-    .overview-icon {
-      background-color: transparentize(darken($osd_bg_color,10%), 0.5);
-    }
+  > .overview-icon.overview-icon-with-label {
+    padding: 10px 8px 5px 8px;
+    spacing: $base_spacing;
   }
 }
 
 /* App Folders */
 .app-folder {
   .overview-icon {
-    @extend %icon_tile;
   }
 }
 
@@ -178,11 +141,6 @@ $app_grid_fg_color: #fff;
   padding: 0px 88px 10px 88px;
 }
 
-.app-well-app > .overview-icon.overview-icon-with-label {
-  padding: 10px 8px 5px 8px;
-  spacing: $base_spacing;
-}
-
 // Label when no frequent apps
 .no-frequent-applications-label { @extend %status_text; }
 
diff --git a/widgets/_dash.scss b/widgets/_dash.scss
index 8de114b..c639fad 100644
--- a/widgets/_dash.scss
+++ b/widgets/_dash.scss
@@ -48,36 +48,13 @@ $dash_border_radius: $modal_radius * 1.5;
 
 // Show apps button
 .show-apps {
-  color: $osd_fg_color;
-
-  & .overview-icon {
-    @extend %icon_tile;
-    color: $osd_fg_color;
-  }
+  @include overview-icon($osd_fg_color);
 
-  &:hover,
   &:focus,
-  &:selected {
-    .overview-icon {
-      background-color: transparentize($osd_fg_color,0.9);
-      color: $osd_fg_color;
-    }
-  }
-
-  &:drop .overview-icon {
-    background-color: transparentize($selected_bg_color,.15);
-  }
-
-  &:active, &:checked {
+  &:checked {
     .overview-icon {
       background-color: darken($osd_bg_color,10%);
-    }
-  }
-
-  &:checked, &:focus {
-     .show-apps-icon {
       color: $fg_color;
-      transition-duration: 100ms;
     }
   }
 }
diff --git a/widgets/_search-results.scss b/widgets/_search-results.scss
index 600aa83..1c53abf 100644
--- a/widgets/_search-results.scss
+++ b/widgets/_search-results.scss
@@ -41,33 +41,7 @@
 
 // Search results with icons
 .grid-search-result {
-  > .overview-icon {
-    @extend %icon_tile;
-    color: $osd_fg_color;
-  }
-
-  > .overview-icon.overview-icon-with-label {
-    padding: 10px 8px 5px 8px;
-    spacing: $base_spacing;
-  }
-
-  &:hover,
-  &:focus,
-  &:selected {
-    .overview-icon {
-      background-color: transparentize($osd_bg_color,0.8);
-      color: $osd_fg_color;
-    }
-  }
-
-  &:drop .overview-icon {
-    background-color: transparentize($selected_bg_color,.15);
-  }
-
-  &:active .overview-icon,
-  &:checked .overview-icon {
-    background-color: transparentize(darken($osd_bg_color,10%), 0.5);
-  }
+  @extend %app-well-app;
 }
 
 // search result provider