1 files changed, 201 insertions, 69 deletions

diff --git a/app/assets/stylesheets/new_nav.scss b/app/assets/stylesheets/new_nav.scss
index b711bd12c73..4deb7431284 100644
--- a/app/assets/stylesheets/new_nav.scss
+++ b/app/assets/stylesheets/new_nav.scss
@@ -2,15 +2,21 @@
 @import 'framework/tw_bootstrap_variables';
 @import "bootstrap/variables";
 
+.content-wrapper.page-with-new-nav {
+  margin-top: $new-navbar-height;
+}
+
 header.navbar-gitlab-new {
   color: $white-light;
   background: linear-gradient(to right, $indigo-900, $indigo-800);
   border-bottom: 0;
+  min-height: $new-navbar-height;
 
   .header-content {
     display: -webkit-flex;
     display: flex;
     padding-left: 0;
+    min-height: $new-navbar-height;
 
     .title-container {
       display: -webkit-flex;
@@ -38,20 +44,13 @@ header.navbar-gitlab-new {
         display: -webkit-flex;
         display: flex;
         align-items: center;
-        padding-right: $gl-padding;
-        padding-left: $gl-padding;
-        margin-left: -$gl-padding;
-
-        @media (min-width: $screen-sm-min) {
-          padding-right: $gl-padding;
-          padding-left: $gl-padding;
-        }
+        padding: 2px 8px;
+        margin: 5px 2px 5px -8px;
+        border-radius: $border-radius-default;
 
         svg {
-          margin-top: -3px;
-
           @media (min-width: $screen-sm-min) {
-            margin-right: 10px;
+            margin-right: 8px;
           }
         }
 
@@ -60,7 +59,7 @@ header.navbar-gitlab-new {
 
           svg {
             width: 55px;
-            height: 15px;
+            height: 14px;
             margin: 0;
             fill: $white-light;
           }
@@ -68,9 +67,7 @@ header.navbar-gitlab-new {
 
         &:hover,
         &:focus {
-          .logo-text svg {
-            fill: $tanuki-yellow;
-          }
+          background-color: rgba($indigo-200, .2);
         }
       }
     }
@@ -90,6 +87,20 @@ header.navbar-gitlab-new {
         right: 0;
       }
     }
+
+    &.menu-expanded {
+      @media (max-width: $screen-xs-max) {
+        .title-container,
+        .header-logo, {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .dropdown-bold-header {
+    color: $gl-text-color-secondary;
+    font-size: 12px;
   }
 
   .navbar-collapse {
@@ -98,14 +109,10 @@ header.navbar-gitlab-new {
     box-shadow: 0;
 
     @media (max-width: $screen-xs-max) {
-      margin-left: -$gl-padding;
+      margin-left: -8px;
       margin-right: -10px;
     }
 
-    .dropdown-bold-header {
-      color: initial;
-    }
-
     .nav {
       > li:not(.hidden-xs) a {
         @media (max-width: $screen-xs-max) {
@@ -119,7 +126,7 @@ header.navbar-gitlab-new {
   .container-fluid {
     .navbar-toggle {
       min-width: 45px;
-      padding: 6px $gl-padding;
+      padding: 4px $gl-padding;
       margin-right: -7px;
       font-size: 14px;
       text-align: center;
@@ -156,31 +163,90 @@ header.navbar-gitlab-new {
       }
 
       > a {
-        background: none;
         will-change: color;
+        margin: 4px 2px;
+        padding: 6px 8px;
+        color: $indigo-200;
+        height: 32px;
+
+        @media (max-width: $screen-xs-max) {
+          padding: 0;
+        }
+
+        svg {
+          fill: $indigo-200;
+        }
 
         &.header-user-dropdown-toggle {
+          margin-left: 2px;
+
           .header-user-avatar {
             border-color: $indigo-200;
+            margin-right: 0;
           }
         }
+      }
 
-        &:hover,
-        &:focus {
-          color: $white-light;
-          opacity: 1;
+      .header-new-dropdown-toggle {
+        margin-right: 0;
+      }
 
-          > svg {
-            fill: $white-light;
-          }
+      > a:hover,
+      > a:focus {
+        text-decoration: none;
+        outline: 0;
+        opacity: 1;
+        color: $white-light;
+
+        @media (min-width: $screen-sm-min) {
+          background-color: rgba($indigo-200, .2);
+        }
+
+        svg {
+          fill: currentColor;
+        }
 
-          &.header-user-dropdown-toggle {
-            .header-user-avatar {
-              border-color: $white-light;
-            }
+        &.header-user-dropdown-toggle {
+          .header-user-avatar {
+            border-color: $white-light;
           }
         }
       }
+
+      .impersonated-user,
+      .impersonated-user:hover {
+        margin-right: 1px;
+        background-color: $white-light;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+
+        svg {
+          fill: $indigo-900;
+        }
+      }
+
+      .impersonation-btn,
+      .impersonation-btn:hover {
+        background-color: $white-light;
+        margin-left: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+
+        i {
+          color: $orange-500;
+          font-size: 20px;
+        }
+      }
+
+      &.active > a,
+      &.dropdown.open > a {
+        color: $indigo-900;
+        background-color: $white-light;
+
+        svg {
+          fill: currentColor;
+        }
+      }
     }
   }
 }
@@ -188,45 +254,76 @@ header.navbar-gitlab-new {
 .navbar-sub-nav {
   display: -webkit-flex;
   display: flex;
-  margin-bottom: 0;
+  margin: 0 0 0 6px;
   color: $indigo-200;
 
-  > li {
-    > a:hover,
-    > a:focus {
-      box-shadow: inset 0 -3px 0 rgba($indigo-200, .4);
-      text-decoration: none;
-      outline: 0;
-      color: $white-light;
-    }
+  .dropdown-chevron {
+    position: relative;
+    top: -1px;
+    font-size: 10px;
+  }
+}
 
-    &.active > a {
-      box-shadow: inset 0 -3px 0 $indigo-500;
-      color: $white-light;
-      font-weight: $gl-font-weight-bold;
-    }
+.navbar-gitlab-new {
+  .navbar-sub-nav,
+  .navbar-nav {
+    > li {
+      > a:hover,
+      > a:focus {
+        text-decoration: none;
+        outline: 0;
+        color: $white-light;
+        background-color: rgba($indigo-200, .2);
 
-    > a {
-      display: block;
-      padding: 16px 10px;
-      font-size: 13px;
-      color: currentColor;
-      box-shadow: inset 0 0 0 transparent;
-      will-change: box-shadow;
-      transition: box-shadow 0.15s;
+        svg {
+          fill: currentColor;
+        }
+      }
 
-      @media (min-width: $screen-sm-min) {
-        padding: 15px $gl-padding;
-        font-size: 14px;
+      &.active > a,
+      &.dropdown.open > a {
+        color: $indigo-900;
+        background-color: $white-light;
+
+        svg {
+          fill: currentColor;
+        }
+      }
+
+      > a {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 6px 8px;
+        margin: 4px 2px;
+        font-size: 12px;
+        color: currentColor;
+        border-radius: $border-radius-default;
+        height: 32px;
+        font-weight: $gl-font-weight-bold;
+
+        svg {
+          fill: currentColor;
+        }
+      }
+
+      &.line-separator {
+        border-left: 1px solid rgba($indigo-200, .2);
+        margin: 8px;
       }
     }
   }
+}
 
-  .dropdown-chevron {
-    position: relative;
-    top: -1px;
-    font-size: 10px;
-  }
+.admin-icon i {
+  font-size: 18px;
+}
+
+.caret-down {
+  height: 11px;
+  width: 11px;
+  margin-left: 4px;
+  fill: currentColor;
 }
 
 .header-user .dropdown-menu-nav,
@@ -235,10 +332,14 @@ header.navbar-gitlab-new {
 }
 
 .search {
+  margin: 4px 8px 0;
+
   form {
+    height: 32px;
     border: 0;
+    border-radius: $border-radius-default;
     background-color: rgba($indigo-200, .2);
-    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, background-color ease-in-out 0.15s;
+    transition: border-color ease-in-out 0.15s, background-color ease-in-out 0.15s;
 
     &:hover {
       background-color: rgba($indigo-200, .3);
@@ -247,31 +348,50 @@ header.navbar-gitlab-new {
   }
 
   &.search-active form {
-    background-color: rgba($indigo-200, .3);
+    background-color: $white-light;
     box-shadow: none;
+
+    .search-input {
+      color: $gl-text-color;
+      transition: color ease-in-out 0.15s;
+    }
+
+    .search-input::placeholder {
+      color: $gl-text-color-tertiary;
+    }
+
+    .search-input-wrap {
+      .search-icon,
+      .clear-icon {
+        color: $gl-text-color-tertiary;
+        transition: color ease-in-out 0.15s;
+      }
+    }
   }
 
   .search-input {
     color: $white-light;
     background: none;
+    transition: color ease-in-out 0.15s;
   }
 
   .search-input::placeholder {
     color: rgba($indigo-200, .8);
+    transition: color ease-in-out 0.15s;
   }
 
   .location-badge {
     font-size: 12px;
     color: $indigo-100;
     background-color: rgba($indigo-200, .1);
-    transition: color 0.15s;
     will-change: color;
     margin: -4px 4px -4px -4px;
     line-height: 25px;
     padding: 4px 8px;
     border-radius: 2px 0 0 2px;
     border-right: 1px solid $indigo-800;
-    height: 34px;
+    height: 32px;
+    transition: border-color ease-in-out 0.15s;
   }
 
   .search-input-wrap {
@@ -283,8 +403,9 @@ header.navbar-gitlab-new {
 
   &.search-active {
     .location-badge {
-      color: $white-light;
-      background-color: rgba($indigo-200, .2);
+      color: $gl-text-color;
+      background-color: $nav-badge-bg;
+      border-color: $border-color;
     }
 
     .search-input-wrap {
@@ -458,3 +579,14 @@ header.navbar-gitlab-new {
     }
   }
 }
+
+.btn-sign-in {
+  margin-top: 3px;
+  background-color: $indigo-100;
+  color: $indigo-900;
+  font-weight: $gl-font-weight-bold;
+
+  &:hover {
+    background-color: $white-light;
+  }
+}