Add hover state to navigation rows24149-nav-hover

1 files changed, 18 insertions, 33 deletions

diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index ce864c2de5e..a2787ede53c 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -51,19 +51,26 @@
       margin-bottom: -1px;
       font-size: 15px;
       line-height: 28px;
-      color: #959494;
+      color: $note-toolbar-color;
       border-bottom: 2px solid transparent;
 
       &:hover,
       &:active,
       &:focus {
         text-decoration: none;
+        border-bottom: 2px solid $gray-darkest;
+        color: $black;
+
+        .badge {
+          color: $black;
+        }
       }
     }
 
     &.active a {
       border-bottom: 2px solid $link-underline-blue;
       color: $black;
+      font-weight: 600;
     }
 
     .badge {
@@ -85,14 +92,20 @@
 
     li {
 
+      &.active a {
+        border-bottom: none;
+      }
+
       a {
         margin: 0;
         padding: 11px 10px 9px;
-      }
 
-      &.active a {
-        border-bottom: none;
-        color: $link-underline-blue;
+        &:hover,
+        &:active,
+        &:focus {
+          color: $black;
+          border-bottom: none;
+        }
       }
     }
   }
@@ -310,37 +323,9 @@
     height: 51px;
 
     li {
-
       a {
         padding-top: 10px;
       }
-
-      a,
-      i {
-        color: $layout-link-gray;
-      }
-
-      &.active {
-
-        a,
-        i {
-          color: $black;
-        }
-
-        svg {
-          path,
-          polygon {
-            fill: $black;
-          }
-        }
-      }
-
-      &:hover {
-        a,
-        i {
-          color: $black;
-        }
-      }
     }
   }
 }