Merge branch '24149-nav-hover' into 'master'

Add hover state to navigation rows

## What does this MR do?
Adds hover states to navigations rows

## Screenshots (if relevant)
![Screen_Recording_2016-11-28_at_09.21_AM](/uploads/5d273f8bc53f46f9b55590f56f2287d8/Screen_Recording_2016-11-28_at_09.21_AM.gif)

## Does this MR meet the acceptance criteria?

- [ ] [Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [ ] Added for this feature/bug
  - [ ] All builds are passing
- [ ] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [ ] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [ ] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [ ] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?
Closes #24149

See merge request !7584

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;
-        }
-      }
     }
   }
 }