major usability improvements

app/assets/stylesheets/supplier/foundation1/_ember_dropdown.sass

@@ -11,7 +11,7 @@
       @extend .fa-lg
       @extend .fa-caret-left
       margin-right: 6px
-    
+
   .dropdown-list-container
     $border-size: 1px
     $arrow-size: 7px
@@ -63,6 +63,9 @@
         padding: 4px 7px
         &:hover
           background-color: #ddd
+        &.active
+          color: $current-color
+          background-color: #444
     span.section-add-tables-icon
       @extend .fa
       @extend .fa-plus-square
@@ -77,17 +80,9 @@
       @extend .fa, .fa-trash-o
       span
         padding-left: 7px
-    span.section-add-section-element-icon
-      @extend .fa, .fa-image
-      span
-        padding-left: 7px
-    span.section-add-section-area-icon
-      @extend .fa, .fa-square
-      span
-        padding-left: 7px
-    span.settings-icon
-      @extend .fa, .fa-gear
+    span.icon
       span
+        // translation span
         padding-left: 7px
     span.sign-out-icon
       @extend .fa, .fa-sign-out

app/assets/stylesheets/supplier/foundation1/_qicons.sass

@@ -1,43 +1,48 @@
-@import font-awesome
 span.icon
   @extend .fa
-  @extend .fa-lg
+  //@extend .fa-lg
+  &.dashboard
+    @extend .fa-list-alt
+  &.menu
+    @extend .fa-coffee
   &.needs-help
     @extend .fa-bell
   &.needs-payment
     @extend .fa-money
+  &.sections
+    @extend .fa-th-large
+  &.tables
+    //@extend .fa-pause
+    width: 16px
+    height: 16px
+    background-image: image-url("icons/table-white.svg")
+  &.lists
+    @extend .fa-sticky-note-o
+  &.employees
+    @extend .fa-users
+  &.schedule
+    @extend .fa-calendar
+  &.settings
+    @extend .fa-gears
+
+  &.section-areas
+    @extend .fa-object-group
+  &.section-elements
+    @extend .fa-image
+// CUSTOM ICONS
+.top-menu
+  .icon.tables
+    background-image: image-url("icons/table-green.svg")
+.active
+  span.icon
+    &.tables
+      background-image: image-url("icons/table-current.svg")
+.side-menu
+  .icon
+// STACK FIXES
 .fa-stack
   .revoke
     color: #b94a48
-
-.button-icon
-  display: inline-block
-  width: 2em
-  height: 2em
-  line-height: 2em
-  vertical-align: middle
-  background-repeat: no-repeat
-  background-position: center center
-.mark-order-active .button-icon
-  background-image: image-url('supplier/order-check.png')
-.mark-order-delivered .button-icon
-  background-image: image-url('supplier/order-doublecheck.png')
-
-//.fa-shifted-stack
-  @extend .fa-stack
-//.fa-shifted-stack
-  position: relative
-  display: inline-block
-  width: 2.5em
-  height: 2em
-  //line-height: 2em
-  vertical-align: middle
-  .fa
-    position: absolute
-    width: 100%
-    left: 20%
-    &:first-child
-      left: -10%
 .fa-shifted-stack .fa-shifted:last-child
   margin-left: -1.15rem
 button, .button

app/assets/stylesheets/supplier/foundation1/application.sass

@@ -2,7 +2,9 @@
 //= require_directory ../base1-shared
 //= require pickdate
 //= require fullcalendar
+// bourbon for animation
 @import bourbon
+@import font-awesome
 @import ./qconstants
 @import ./foundation_and_overrides
 @import ./mixins

app/assets/stylesheets/supplier/foundation1/components/_nav_main.sass

@@ -21,33 +21,40 @@ header.top-menu
         float: left
         @media #{$medium-up}
           padding-left: 14px
+          a
+            span.icon
+              display: none
+        @media #{$large-up}
+          a
+            span.icon
+              display: inline-block
+              margin-right: 4px
         a
           padding-left: 16px
-  .menu-list-item
-    margin-left: 20px
-    cursor: pointer
-    border: 0.08em solid #eee
-    padding: 5px
-    border-radius: 0.1em
-    display: inline-block
-    line-height: 1em
-    margin-top: 10px
-    color: #999
-    &.active
-      color: yellow
-      border-color: yellow
-      &.callout
-        color: #f70
-        border-color: #f70
-    @media #{$medium-only}
-      margin-left: 8px
-    @media #{$small-only}
-      margin-left: 5px
-  .supplier-is-closed-indication
-    float: right
-    margin-right: 8px
-    &.is-open
-      line-height: 60px
+          &.active
+            text-decoration: underline
+            font-weight: bold
+            color: $current-color
+          @media #{$small-only}
+            span
+              display: none
+              &.icon
+                display: inline-block
+            &.active
+              span.icon
+                color: $current-color
+        .top-menu-root
+          display: inline-block
+          line-height: normal
+          padding: 4px
+          //margin-left: 14px
+          border-radius: 4px
+          &.active
+            background-color: $current-color
+          img
+            display: inline-block
+            margin: 0
+            padding: 0
   .supplier-name
     display: inline-block
     float: right

app/assets/stylesheets/supplier/foundation1/components/_nav_side.sass

@@ -23,9 +23,8 @@
     .title
       border-bottom: 1px solid #aaa
       margin-bottom: 4px
-  .settings-icon
+  .icon.settings
     margin-right: 18px
-    @extend .fa, .fa-gears
   .about-mozo-icon
     margin-right: 18px
     @extend .fa, .fa-info-circle
@@ -34,6 +33,8 @@
     margin-right: 18px
   .fa
     margin-right: 18px
+  a.active
+    color: $current-color
 .supplier-close-shop
   +alert($bg: $alert-color, $radius: true)
   padding: 3px