Merge branch 'master' into breadcrumbs-improvements

8 files changed, 238 insertions, 88 deletions

diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index dada7a274f3..5f397f08936 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -766,6 +766,7 @@
         box-shadow: none;
         padding: 8px 16px;
         text-align: left;
+        white-space: normal;
         width: 100%;
 
         // make sure the text color is not overriden
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 35bd97980e2..b00a2d053e2 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -105,12 +105,11 @@ header {
           top: -3px;
           font-size: 10px;
         }
+      }
 
+      .user-counter {
         svg {
-          position: relative;
-          top: 2px;
-          height: 17px;
-          // hack to get SVG to line up with FA icons
+          height: 16px;
           width: 23px;
           fill: currentColor;
         }
@@ -325,12 +324,12 @@ header {
   li {
     .badge {
       position: inherit;
-      top: -8px;
       font-weight: $gl-font-weight-normal;
-      margin-left: -11px;
+      margin-left: -6px;
       font-size: 11px;
       color: $white-light;
-      padding: 1px 5px 2px;
+      padding: 0 5px;
+      line-height: 12px;
       border-radius: 7px;
       box-shadow: 0 1px 0 rgba($gl-header-color, .2);
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 01fffa717e9..88b08998dfd 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -177,13 +177,14 @@ $row-hover: $blue-25;
 $row-hover-border: $blue-100;
 $progress-color: #c0392b;
 $header-height: 50px;
+$new-navbar-height: 40px;
 $fixed-layout-width: 1280px;
 $limited-layout-width: 990px;
 $limited-layout-width-sm: 790px;
 $container-text-max-width: 540px;
 $gl-avatar-size: 40px;
 $error-exclamation-point: $red-500;
-$border-radius-default: 3px;
+$border-radius-default: 4px;
 $settings-icon-size: 18px;
 $provider-btn-not-active-color: $blue-500;
 $link-underline-blue: $blue-500;
diff --git a/app/assets/stylesheets/new_nav.scss b/app/assets/stylesheets/new_nav.scss
index 3ea67c76503..e4b52ab480d 100644
--- a/app/assets/stylesheets/new_nav.scss
+++ b/app/assets/stylesheets/new_nav.scss
@@ -3,15 +3,21 @@
 @import "bootstrap/variables";
 @import "framework/mixins";
 
+.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;
@@ -39,20 +45,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;
           }
         }
 
@@ -61,7 +60,7 @@ header.navbar-gitlab-new {
 
           svg {
             width: 55px;
-            height: 15px;
+            height: 14px;
             margin: 0;
             fill: $white-light;
           }
@@ -69,9 +68,7 @@ header.navbar-gitlab-new {
 
         &:hover,
         &:focus {
-          .logo-text svg {
-            fill: $tanuki-yellow;
-          }
+          background-color: rgba($indigo-200, .2);
         }
       }
     }
@@ -91,6 +88,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 {
@@ -99,14 +110,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) {
@@ -120,7 +127,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;
@@ -157,31 +164,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;
+        }
+      }
     }
   }
 }
@@ -189,45 +255,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,
@@ -236,10 +333,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);
@@ -248,31 +349,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 {
@@ -284,8 +404,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 {
@@ -403,3 +524,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;
+  }
+}
diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss
index e21d52b7db6..55e0343d0dc 100644
--- a/app/assets/stylesheets/new_sidebar.scss
+++ b/app/assets/stylesheets/new_sidebar.scss
@@ -26,7 +26,7 @@ $new-sidebar-collapsed-width: 50px;
   // Override position: absolute
   .right-sidebar {
     position: fixed;
-    height: calc(100% - #{$header-height});
+    height: calc(100% - #{$new-navbar-height});
   }
 
   .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header {
@@ -92,7 +92,7 @@ $new-sidebar-collapsed-width: 50px;
   z-index: 400;
   width: $new-sidebar-width;
   transition: left $sidebar-transition-duration;
-  top: $header-height;
+  top: $new-navbar-height;
   bottom: 0;
   left: 0;
   background-color: $gray-normal;
@@ -188,7 +188,7 @@ $new-sidebar-collapsed-width: 50px;
 }
 
 .with-performance-bar .nav-sidebar {
-  top: $header-height + $performance-bar-height;
+  top: $new-navbar-height + $performance-bar-height;
 }
 
 .sidebar-sub-level-items {
@@ -452,7 +452,7 @@ $new-sidebar-collapsed-width: 50px;
 // Make issue boards full-height now that sub-nav is gone
 
 .boards-list {
-  height: calc(100vh - #{$header-height});
+  height: calc(100vh - #{$new-navbar-height});
 
   @media (min-width: $screen-sm-min) {
     height: 475px; // Needed for PhantomJS
@@ -463,7 +463,7 @@ $new-sidebar-collapsed-width: 50px;
 }
 
 .with-performance-bar .boards-list {
-  height: calc(100vh - #{$header-height} - #{$performance-bar-height});
+  height: calc(100vh - #{$new-navbar-height} - #{$performance-bar-height});
 }
 
 
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 0f3074076ce..314dd2d1a21 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -440,6 +440,7 @@
   &.right-sidebar {
     top: 0;
     bottom: 0;
+    height: 100%;
   }
 
   .issuable-sidebar-header {
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index a52ac0d53e7..9362d80d4e6 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -227,6 +227,26 @@
   margin-top: 20px;
 }
 
+.prometheus-graph-group {
+  display: flex;
+  flex-wrap: wrap;
+  padding: $gl-padding / 2;
+}
+
+.prometheus-graph {
+  flex: 1 0 auto;
+  min-width: 450px;
+  padding: $gl-padding / 2;
+
+  h5 {
+    font-size: 16px;
+  }
+
+  @media (max-width: $screen-sm-max) {
+    min-width: 100%;
+  }
+}
+
 .prometheus-svg-container {
   position: relative;
   height: 0;
@@ -297,9 +317,3 @@
     }
   }
 }
-
-.prometheus-row {
-  h5 {
-    font-size: 16px;
-  }
-}
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 8d73246223d..615020ca856 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -190,6 +190,8 @@ input[type="checkbox"]:hover {
 }
 
 .search-holder {
+  @include new-style-dropdown;
+
   @media (min-width: $screen-sm-min) {
     display: -webkit-flex;
     display: flex;