[gnome-shell/wip/sass: 59/98] theme: symbolic icons for App menu

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

commit a0df7aa2b800a2f4a71bcf208e9480d7f21500e0
Author: Jakub Steiner <jimmac gmail com>
Date:   Wed Jan 14 15:34:04 2015 +0100

    theme: symbolic icons for App menu
    
    - possibly too early as only core apps come with
      symbolic icon installed by default.

 data/theme/_common.scss                  |    6 ++-
 data/theme/gnome-shell-high-contrast.css |   67 +++++++++++++++---------------
 data/theme/gnome-shell.css               |    2 +
 js/ui/panel.js                           |    2 +-
 4 files changed, 41 insertions(+), 36 deletions(-)
---
diff --git a/data/theme/_common.scss b/data/theme/_common.scss
index 7f77347..9152846 100644
--- a/data/theme/_common.scss
+++ b/data/theme/_common.scss
@@ -482,7 +482,11 @@ StScrollBar {
     color: #ccc;
     transition-duration: 100ms;
 
-    &:hover { 
+    .app-menu-icon {
+      -st-icon-style: symbolic;
+    }
+
+    &:hover {
       color: lighten($fg_color, 10%);
       text-shadow: black 0 2px 2px;
     }
diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index 8b03015..c36f88d 100644
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -949,14 +949,13 @@ StScrollBar {
       -panel-corner-background-color: transparent;
       -panel-corner-border-color: transparent; }
   #panel .panel-button {
-    padding: 0px 12px;
+    -natural-hpadding: 12px;
+    -minimum-hpadding: 6px;
     font-weight: bold;
     color: #ccc;
     transition-duration: 100ms; }
-    #panel .panel-button #appMenuIcon {
-      app-icon-bottom-clip: 1px; }
-      .panel-button:active #panel .panel-button #appMenuIcon, .panel-button:overview #panel .panel-button 
#appMenuIcon, .panel-button:focus #panel .panel-button #appMenuIcon, .panel-button:checked #panel 
.panel-button #appMenuIcon {
-        app-icon-bottom-clip: 2px; }
+    #panel .panel-button .app-menu-icon {
+      -st-icon-style: symbolic; }
     #panel .panel-button:hover {
       color: white;
       text-shadow: black 0 2px 2px; }
@@ -1378,33 +1377,33 @@ StScrollBar {
   background-color: rgba(255, 255, 255, 0.1);
   transition-duration: 200ms; }
 
-.app-well-app.running > .overview-icon,
-.app-well-app.app-folder.running > .overview-icon,
-.show-apps.running > .overview-icon,
-.grid-search-result.running > .overview-icon {
+.app-well-app.running .overview-icon,
+.app-well-app.app-folder.running .overview-icon,
+.show-apps.running .overview-icon,
+.grid-search-result.running .overview-icon {
   text-shadow: black 0px 2px 2px; }
-.app-well-app:active > .overview-icon, .app-well-app:checked > .overview-icon,
-.app-well-app.app-folder:active > .overview-icon,
-.app-well-app.app-folder:checked > .overview-icon,
-.show-apps:active > .overview-icon,
-.show-apps:checked > .overview-icon,
-.grid-search-result:active > .overview-icon,
-.grid-search-result:checked > .overview-icon {
-  background-color: rgba(0, 0, 0, 0.9);
+.app-well-app:active .overview-icon, .app-well-app:checked .overview-icon,
+.app-well-app.app-folder:active .overview-icon,
+.app-well-app.app-folder:checked .overview-icon,
+.show-apps:active .overview-icon,
+.show-apps:checked .overview-icon,
+.grid-search-result:active .overview-icon,
+.grid-search-result:checked .overview-icon {
+  background-color: rgba(23, 25, 26, 0.9);
   box-shadow: inset 0 1px 2px black; }
-.app-well-app:hover > .overview-icon, .app-well-app.running:hover > .overview-icon, .app-well-app:focus > 
.overview-icon, .app-well-app:selected > .overview-icon,
-.app-well-app.app-folder:hover > .overview-icon,
-.app-well-app.app-folder.running:hover > .overview-icon,
-.app-well-app.app-folder:focus > .overview-icon,
-.app-well-app.app-folder:selected > .overview-icon,
-.show-apps:hover > .overview-icon,
-.show-apps.running:hover > .overview-icon,
-.show-apps:focus > .overview-icon,
-.show-apps:selected > .overview-icon,
-.grid-search-result:hover > .overview-icon,
-.grid-search-result.running:hover > .overview-icon,
-.grid-search-result:focus > .overview-icon,
-.grid-search-result:selected > .overview-icon {
+.app-well-app:hover .overview-icon, .app-well-app.running:hover .overview-icon, .app-well-app:focus 
.overview-icon, .app-well-app:selected .overview-icon,
+.app-well-app.app-folder:hover .overview-icon,
+.app-well-app.app-folder.running:hover .overview-icon,
+.app-well-app.app-folder:focus .overview-icon,
+.app-well-app.app-folder:selected .overview-icon,
+.show-apps:hover .overview-icon,
+.show-apps.running:hover .overview-icon,
+.show-apps:focus .overview-icon,
+.show-apps:selected .overview-icon,
+.grid-search-result:hover .overview-icon,
+.grid-search-result.running:hover .overview-icon,
+.grid-search-result:focus .overview-icon,
+.grid-search-result:selected .overview-icon {
   background-color: rgba(255, 255, 255, 0.1);
   transition-duration: 0ms;
   border-image: none;
@@ -1417,10 +1416,10 @@ StScrollBar {
   margin-bottom: 2px; }
 
 .search-provider-icon,
-.list-search-result, .app-well-app > .overview-icon,
-.app-well-app.app-folder > .overview-icon,
-.show-apps > .overview-icon,
-.grid-search-result > .overview-icon {
+.list-search-result, .app-well-app .overview-icon,
+.app-well-app.app-folder .overview-icon,
+.show-apps .overview-icon,
+.grid-search-result .overview-icon {
   border-radius: 4px;
   padding: 6px;
   border: 1px solid transparent;
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index b8e7564..a7be3f1 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -954,6 +954,8 @@ StScrollBar {
     font-weight: bold;
     color: #ccc;
     transition-duration: 100ms; }
+    #panel .panel-button .app-menu-icon {
+      -st-icon-style: symbolic; }
     #panel .panel-button:hover {
       color: white;
       text-shadow: black 0 2px 2px; }
diff --git a/js/ui/panel.js b/js/ui/panel.js
index 4f312d6..eadf399 100644
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -114,7 +114,7 @@ const AppMenuButton = new Lang.Class({
         textureCache.connect('icon-theme-changed',
                              Lang.bind(this, this._onIconThemeChanged));
 
-        this._iconBox = new St.Bin();
+        this._iconBox = new St.Bin({ style_class: 'app-menu-icon' });
         this._container.add_actor(this._iconBox);
 
         this._label = new St.Label();