From 8f9401a78cd8be6dbcc01f509246c5c62d5717fb Mon Sep 17 00:00:00 2001
From: Paul Adam Davis <pauladamdavis@gmail.com>
Date: Thu, 11 Sep 2014 15:27:28 +0100
Subject: [PATCH] Add icons to settings nav menu

References #3810

- Re-adds the icons for each item of the settings nav and related styles

I've opted to go with adding `.icon-users` classes instead of setting them in the Sass.
---
 core/client/assets/sass/layouts/settings.scss | 54 +++++++++----------
 core/client/templates/settings.hbs            |  6 +--
 2 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/core/client/assets/sass/layouts/settings.scss b/core/client/assets/sass/layouts/settings.scss
index d36be64998..35599eb749 100644
--- a/core/client/assets/sass/layouts/settings.scss
+++ b/core/client/assets/sass/layouts/settings.scss
@@ -37,20 +37,39 @@
 
     li {
         border-top: #fff 1px solid;
+        position: relative;
         @media (max-width: 900px) {
             margin-right: 0;
             border-top: #edece4 1px solid;
         }
 
+        // The icon
+        &:before {
+            position: absolute;
+            top: 50%;
+            left: 30px;
+            transform: translateY(-50%);
+            
+            transition: color 0.1s;
+            color: $brown;
+
+            @media (max-width: 900px) {
+                left: 15px;
+            }
+        }
+        &:hover:before {
+            color: $darkgrey;
+        }
+
         a {
             display: block;
             border-bottom: $lightbrown 1px solid;
-            padding: 15px 15px 15px 40px;
+            padding: 15px 15px 15px 60px;
             border-bottom: none;
             color: $brown;
 
             @media (max-width: 900px) {
-                padding-left: 15px ;
+                padding-left: 45px;
                 @include icon-after($i-chevron) {
                     float: right;
                     margin-top: 5px;
@@ -77,6 +96,11 @@
             @media (min-width: 900px) {
                 // only apply active styles on larger devices
 
+                // The icon
+                &:before {
+                    color: $darkgrey;
+                }
+
                 margin-right: 0;
                 position: relative;
                 z-index: 300;
@@ -105,32 +129,6 @@
 
     } // li
 
-    // Add the icons for specific menu items
-    .about a {
-        @include icon($i-ghost);
-    }
-    .general a {
-        @include icon($i-settings);
-    }
-    .publishing a {
-        @include icon($i-content);
-    }
-    .services a {
-        @include icon($i-services);
-    }
-    .users a {
-        @include icon($i-users);
-    }
-    .appearance a {
-        @include icon($i-appearance);
-    }
-    .apps a {
-        @include icon($i-app);
-    }
-    .code a {
-        @include icon($i-code);
-    }
-
 } // .settings-menu
 
 
diff --git a/core/client/templates/settings.hbs b/core/client/templates/settings.hbs
index a7d8b4cc10..a7c42fae77 100644
--- a/core/client/templates/settings.hbs
+++ b/core/client/templates/settings.hbs
@@ -8,14 +8,14 @@
         <ul>
             {{#unless session.user.isAuthor}}
                 {{#unless session.user.isEditor}}
-                    {{gh-activating-list-item route="settings.general" title="General" classNames="settings-menu-general"}}
+                    {{gh-activating-list-item route="settings.general" title="General" classNames="settings-menu-general icon-settings"}}
                 {{/unless}}
 
-                {{gh-activating-list-item route="settings.users" title="Users" classNames="settings-menu-users"}}
+                {{gh-activating-list-item route="settings.users" title="Users" classNames="settings-menu-users icon-users"}}
 
             {{/unless}}
 
-            {{gh-activating-list-item route="settings.about" title="About" classNames="settings-menu-about"}}
+            {{gh-activating-list-item route="settings.about" title="About" classNames="settings-menu-about icon-ghost"}}
         </ul>
     </nav>