Merge branch 'master' into 'badge-color-on-white-bg'

# Conflicts:
#   app/assets/stylesheets/framework/nav.scss
#   app/assets/stylesheets/pages/environments.scss
#   app/views/layouts/nav/_group.html.haml
#   app/views/layouts/nav/_project.html.haml

1 files changed, 25 insertions, 11 deletions

diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index cd285c54781..bbf9de06630 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -49,9 +49,9 @@
       padding: $gl-btn-padding;
       padding-bottom: 11px;
       margin-bottom: -1px;
-      font-size: 15px;
+      font-size: 14px;
       line-height: 28px;
-      color: $note-toolbar-color;
+      color: $gl-gray-light;
       border-bottom: 2px solid transparent;
 
       &:hover,
@@ -71,15 +71,19 @@
       border-bottom: 2px solid $link-underline-blue;
       color: $black;
       font-weight: 600;
+
+      .badge {
+        color: $black;
+      }
     }
   }
 
   &.sub-nav {
     text-align: center;
-    background-color: $dark-background-color;
+    background-color: $gray-normal;
 
     .container-fluid {
-      background-color: $dark-background-color;
+      background-color: $gray-normal;
       margin-bottom: 0;
     }
 
@@ -106,7 +110,7 @@
 
 .top-area {
   @include clearfix;
-  border-bottom: 1px solid $btn-gray-hover;
+  border-bottom: 1px solid $white-normal;
 
   .nav-text {
     padding-top: 16px;
@@ -261,6 +265,16 @@
       width: auto;
     }
   }
+
+  &.multi-line {
+    .nav-text {
+      line-height: 20px;
+    }
+
+    .nav-controls {
+      padding: 17px 0;
+    }
+  }
 }
 
 .layout-nav {
@@ -268,7 +282,7 @@
   top: $header-height;
   width: 100%;
   z-index: 11;
-  background: $background-color;
+  background: $gray-light;
   border-bottom: 1px solid $border-color;
   transition: padding $sidebar-transition-duration;
   text-align: center;
@@ -296,7 +310,7 @@
 
     .fa-caret-down {
       margin-left: 5px;
-      color: $gl-icon-color;
+      color: $gl-gray-light;
     }
 
     .dropdown {
@@ -331,7 +345,7 @@
   }
 
   .fade-right {
-    @include fade(left, $background-color);
+    @include fade(left, $gray-light);
     right: -5px;
 
     .fa {
@@ -340,7 +354,7 @@
   }
 
   .fade-left {
-    @include fade(right, $background-color);
+    @include fade(right, $gray-light);
     left: -5px;
 
     .fa {
@@ -351,7 +365,7 @@
   &.sub-nav-scroll {
 
     .fade-right {
-      @include fade(left, $dark-background-color);
+      @include fade(left, $gray-normal);
       right: 0;
 
       .fa {
@@ -360,7 +374,7 @@
     }
 
     .fade-left {
-      @include fade(right, $dark-background-color);
+      @include fade(right, $gray-normal);
       left: 0;
 
       .fa {