refactor nav icons

app/assets/javascripts/app/views/navigation.jst.eco

@@ -15,7 +15,9 @@
 <% for item in @navbar_left: %>
   <% if item.child: %>
   <li class="dropdown <%= item.class %> <% if @open_tab[item.target] : %>open<% end %>">
-    <a href="<%= item.target %>" class="dropdown-toggle" data-toggle="dropdown"><%- @T( item.name ) %> <b class="caret"></b></a>
+    <a href="<%= item.target %>" class="dropdown-toggle" data-toggle="dropdown">
+      <%- @T( item.name ) %> <b class="caret"></b>
+    </a>
     <ul class="dropdown-menu">
       <% for item in item.child: %>
         <% if item.divider: %>
@@ -29,11 +31,29 @@
     </ul>
   </li>
   <% else: %>
-    <li class="<%= item.class %> <% if @active_tab[item.target] : %>active<% end %>"><a href="<%= item.target %>"><%- @T( item.name ) %></a></li>
+    <li class="<%= item.class %> <% if @active_tab[item.target] : %>active<% end %>">
+      <a class="horizontal center" href="<%= item.target %>">
+        <span class="nav-item-icon">
+          <span class="<%= item.class %> icon"></span>
+        </span>
+        <span class="nav-item-name flex">
+          <%- @T( item.name ) %>
+        </span>
+      </a>
+    </li>
   <% end %>
 <% end %>
 
-  <li class="customers"><a href="#to_somewhere">Customers</a></li>
+  <li class="customers">
+    <a class="horizontal center" href="#to_somewhere">
+      <span class="nav-item-icon">
+        <span class="customers icon"></span>
+      </span>
+      <span class="nav-item-name flex">
+        Customers
+      </span>
+    </a>
+  </li>
 
 </ul>
 

app/assets/stylesheets/zzz.css.erb

@@ -835,6 +835,42 @@ ol.tabs li {
   background-position: 20px 20px; /* make icon empty */
 }
 
+  .dashboard.icon,
+  .overviews.icon,
+  .customers.icon,
+  .group.icon,
+  .message.icon,
+  .tools.icon,
+  .person.icon {
+    width: 24px;
+    height: 25px;
+  }
+
+  .dashboard.icon {
+    background-position: 0 0;
+  }
+
+  .overviews.icon {
+    background-position: -24px 0;
+  }
+
+  .group.icon,
+  .customers.icon {
+    background-position: -48px 0;
+  }
+
+  .message.icon {
+    background-position: -72px 0;
+  }
+
+  .tools.icon {
+    background-position: -96px 0;
+  }
+
+  .person.icon {
+    background-position: -120px 0;
+  }
+
   .light.cog.icon {
     background-position: 0 -56px;
   }
@@ -964,6 +1000,7 @@ ol.tabs li {
     width: 14px;
     background-position: -28px -115px;
   }
+
   .icon-switch:hover .note.icon,
   .task.active .note.icon {
     background-position: -28px -128px;
@@ -974,6 +1011,7 @@ ol.tabs li {
     width: 14px;
     background-position: -42px -115px;
   }
+
   .icon-switch:hover .pen.icon,
   .task.active .pen.icon {
     background-position: -42px -128px;
@@ -1533,14 +1571,9 @@ footer {
     color: #F0FAFF;
   }
 
-  .navigation .nav > li.active > a:before,
-  .navigation .nav > li > a:hover:before,
-  .navigation .nav > li > a:focus:before {
-    opacity: 1;
-  }
-
   .navbar-nav > li > a {
-    padding: 11px 15px;
+    padding: 0 15px;
+    height: 48px;
     color: rgba(240, 250, 255, .25);
     border-bottom: 1px solid rgba(240, 250, 255, .05);
   }
@@ -1549,35 +1582,16 @@ footer {
     background: #389ed9;
   }
 
-  li.dashboard a:before,
+  .navigation .nav-item-icon .icon {
-  li.overviews a:before,
-  li.message a:before,
-  li.tools a:before,
-  li.customers a:before {
-    content: '';
-    width: 24px;
-    height: 25px;
     margin-right: 15px;
-    display: inline-block;
+    opacity: 0.25;
-    background: url(<%= asset_path "sprite.svg" %>) no-repeat;
     vertical-align: bottom;
-    opacity: .25;
   }
 
-  li.overviews a:before {
+  .navigation .nav > li.active > .icon,
-    background-position: -24px 0;
+  .navigation .nav > li > a:hover .icon,
-  }
+  .navigation .nav > li > a:focus .icon {
-
+    opacity: 1;
-  li.customers a:before {
-    background-position: -48px 0;
-  }
-
-  li.message a:before {
-    background-position: -72px 0;
-  }
-
-  li.tools a:before {
-    background-position: -96px 0;
   }
 
 .tasks {