Start moving new nav styles into header.scss

12 files changed, 75 insertions, 267 deletions

diff --git a/app/assets/javascripts/shortcuts.js b/app/assets/javascripts/shortcuts.js
index e754f6c4460..f63b99ba1c5 100644
--- a/app/assets/javascripts/shortcuts.js
+++ b/app/assets/javascripts/shortcuts.js
@@ -18,23 +18,8 @@ import findAndFollowLink from './shortcuts_dashboard_navigation';
       Mousetrap.bind('f', (e => this.focusFilter(e)));
       Mousetrap.bind('p b', this.onTogglePerfBar);
 
-      const $globalDropdownMenu = $('.global-dropdown-menu');
-      const $globalDropdownToggle = $('.global-dropdown-toggle');
       const findFileURL = document.body.dataset.findFile;
 
-      $('.global-dropdown').on('hide.bs.dropdown', () => {
-        $globalDropdownMenu.removeClass('shortcuts');
-      });
-
-      Mousetrap.bind('n', () => {
-        $globalDropdownMenu.toggleClass('shortcuts');
-        $globalDropdownToggle.trigger('click');
-
-        if (!$globalDropdownMenu.is(':visible')) {
-          $globalDropdownToggle.blur();
-        }
-      });
-
       Mousetrap.bind('shift+t', () => findAndFollowLink('.shortcuts-todos'));
       Mousetrap.bind('shift+a', () => findAndFollowLink('.dashboard-shortcuts-activity'));
       Mousetrap.bind('shift+i', () => findAndFollowLink('.dashboard-shortcuts-issues'));
diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index 667b73e150d..f0e6b23757f 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -115,8 +115,7 @@
   @return $unfoldedTransition;
 }
 
-.btn,
-.global-dropdown-toggle {
+.btn {
   @include transition(background-color, border-color, color, box-shadow);
 }
 
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index fa92d4ccf4f..9dcf332eee2 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -889,7 +889,7 @@
 @include new-style-dropdown('.breadcrumbs-list .dropdown ');
 @include new-style-dropdown('.js-namespace-select + ');
 
-header.navbar-gitlab-new .header-content .dropdown-menu.projects-dropdown-menu {
+header.header-content .dropdown-menu.projects-dropdown-menu {
   padding: 0;
 }
 
diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss
index a6bdcf46aa7..45cf9b252a3 100644
--- a/app/assets/stylesheets/framework/gitlab-theme.scss
+++ b/app/assets/stylesheets/framework/gitlab-theme.scss
@@ -5,7 +5,7 @@
 @mixin gitlab-theme($color-100, $color-200, $color-500, $color-700, $color-800, $color-900, $color-alternate) {
   // Header
 
-  header.navbar-gitlab-new {
+  header {
     background-color: $color-900;
 
     .navbar-collapse {
@@ -200,7 +200,7 @@ body {
   &.ui_light {
     @include gitlab-theme($theme-gray-900, $theme-gray-700, $theme-gray-800, $theme-gray-700, $theme-gray-700, $theme-gray-100, $theme-gray-700);
 
-    header.navbar-gitlab-new {
+    header {
       background-color: $theme-gray-100;
       box-shadow: 0 2px 0 0 $border-color;
 
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 63eed636476..c10e3467bef 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -27,84 +27,28 @@ header {
     z-index: 1000;
     margin-bottom: 0;
     min-height: $header-height;
-    background-color: $gray-light;
     border: none;
     border-bottom: 1px solid $border-color;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
-    color: $gl-text-color-secondary;
     border-radius: 0;
 
-    @media (max-width: $screen-xs-min) {
-      padding: 0 16px;
-    }
-
-    &.with-horizontal-nav {
-      border-bottom: 0;
+    .logo-text {
+      line-height: initial;
 
-      .navbar-border {
-        height: 1px;
-        position: absolute;
-        right: 0;
-        left: 0;
-        bottom: -1px;
-        background-color: $border-color;
-        opacity: 0;
+      svg {
+        width: 55px;
+        height: 14px;
+        margin: 0;
+        fill: $white-light;
       }
     }
 
     .container-fluid {
-      width: 100% !important;
-      filter: none;
       padding: 0;
 
-      .nav > li > a {
-        color: currentColor;
-        font-size: 18px;
-        padding: 0;
-        margin: (($header-height - 28) / 2) 3px;
-        margin-left: 8px;
-        height: 28px;
-        min-width: 32px;
-        line-height: 28px;
-        text-align: center;
-
-        &.header-user-dropdown-toggle {
-          margin-left: 14px;
-
-          &:hover,
-          &:focus,
-          &:active {
-            .header-user-avatar {
-              border-color: rgba($avatar-border, .2);
-            }
-          }
-        }
-
-        &:hover,
-        &:focus,
-        &:active {
-          background-color: transparent;
-          color: $gl-text-color;
-
-          svg {
-            fill: $gl-text-color;
-          }
-        }
-
-        .fa-caret-down {
-          font-size: 14px;
-        }
-
-        .fa-chevron-down {
-          position: relative;
-          top: -3px;
-          font-size: 10px;
-        }
-      }
-
       .user-counter {
         svg {
           margin-right: 3px;
@@ -112,36 +56,34 @@ header {
       }
 
       .navbar-toggle {
-        color: $nav-toggle-gray;
-        margin: 5px 0;
-        border-radius: 0;
-        right: -10px;
-        padding: 6px 10px;
-
-        &:hover {
-          background-color: $white-normal;
-        }
+        min-width: 45px;
+        padding: 4px $gl-padding;
+        margin-right: -7px;
+        font-size: 14px;
+        text-align: center;
+        color: currentColor;
 
+        &:hover,
+        &:focus,
         &.active {
-          color: $gl-text-color-secondary;
+          color: currentColor;
+          background-color: transparent;
         }
       }
     }
   }
 
-  &.navbar-gitlab-new {
-    .close-icon {
+  .fa-times {
+    display: none;
+  }
+
+  .menu-expanded {
+    .fa-ellipsis-v {
       display: none;
     }
 
-    .menu-expanded {
-      .more-icon {
-        display: none;
-      }
-
-      .close-icon {
-        display: block;
-      }
+    .fa-times {
+      display: block;
     }
   }
 
@@ -160,29 +102,11 @@ header {
     }
   }
 
-  .global-dropdown-toggle {
-    margin: 7px 0;
-    font-size: 18px;
-    padding: 6px 10px;
-    border: none;
-    background-color: $gray-light;
-
-    &:hover {
-      background-color: $white-normal;
-    }
-
-    &:focus {
-      outline: none;
-      background-color: $white-normal;
-    }
-  }
-
   .header-content {
     display: flex;
-    justify-content: space-between;
     position: relative;
     min-height: $header-height;
-    padding-left: 30px;
+    padding-left: 0;
 
     &.menu-expanded {
       @media (max-width: $screen-xs-max) {
@@ -218,38 +142,32 @@ header {
       }
     }
 
-    .group-name-toggle {
-      margin: 3px 5px;
-    }
-
-    .group-title {
-      &.is-hidden {
-        .hidable:not(:last-of-type) {
-          display: none;
-        }
-      }
-    }
-
     .title-container {
       display: flex;
-      align-items: flex-start;
+      -webkit-align-items: stretch;
+      align-items: stretch;
+      -webkit-flex: 1 1 auto;
       flex: 1 1 auto;
-      padding-top: 14px;
-      overflow: hidden;
+      padding-top: 0;
+      overflow: visible;
     }
 
     .title {
+      padding-right: 0;
+      color: currentColor;
+      display: -webkit-flex;
+      display: flex;
       position: relative;
-      padding-right: 20px;
       margin: 0;
       font-size: 18px;
-      line-height: 22px;
-      display: inline-block;
-      font-weight: $gl-font-weight-normal;
-      color: $gl-text-color;
       vertical-align: top;
       white-space: nowrap;
 
+      img {
+        height: 28px;
+        margin-right: 8px;
+      }
+
       &.wrap {
         white-space: normal;
       }
@@ -259,30 +177,17 @@ header {
       }
 
       a {
-        color: currentColor;
+        display: -webkit-flex;
+        display: flex;
+        align-items: center;
+        padding: 2px 8px;
+        margin: 5px 2px 5px -8px;
+        border-radius: $border-radius-default;
 
-        &:hover {
-          text-decoration: underline;
-          color: $gl-header-nav-hover-color;
-        }
-      }
-
-      .dropdown-toggle-caret {
-        color: $gl-text-color;
-        border: transparent;
-        background: transparent;
-        position: absolute;
-        top: 2px;
-        right: 3px;
-        width: 12px;
-        line-height: 19px;
-        padding: 0;
-        font-size: 10px;
-        text-align: center;
-        cursor: pointer;
-
-        &:hover {
-          color: $gl-header-nav-hover-color;
+        svg {
+          @media (min-width: $screen-sm-min) {
+            margin-right: 8px;
+          }
         }
       }
 
diff --git a/app/assets/stylesheets/framework/new-nav.scss b/app/assets/stylesheets/framework/new-nav.scss
index 0ee07b18b1f..6120639f67f 100644
--- a/app/assets/stylesheets/framework/new-nav.scss
+++ b/app/assets/stylesheets/framework/new-nav.scss
@@ -1,67 +1,9 @@
 .content-wrapper.page-with-new-nav {
-  margin-top: $new-navbar-height;
+  margin-top: $header-height;
 }
 
-header.navbar-gitlab-new {
-  color: $white-light;
-  border-bottom: 0;
-  min-height: $new-navbar-height;
-
-  .logo-text {
-    line-height: initial;
-
-    svg {
-      width: 55px;
-      height: 14px;
-      margin: 0;
-      fill: $white-light;
-    }
-  }
-
+header {
   .header-content {
-    display: -webkit-flex;
-    display: flex;
-    padding-left: 0;
-    min-height: $new-navbar-height;
-
-    .title-container {
-      display: -webkit-flex;
-      display: flex;
-      -webkit-align-items: stretch;
-      align-items: stretch;
-      -webkit-flex: 1 1 auto;
-      flex: 1 1 auto;
-      padding-top: 0;
-      overflow: visible;
-    }
-
-    .title {
-      display: -webkit-flex;
-      display: flex;
-      padding-right: 0;
-      color: currentColor;
-
-      img {
-        height: 28px;
-        margin-right: 8px;
-      }
-
-      a {
-        display: -webkit-flex;
-        display: flex;
-        align-items: center;
-        padding: 2px 8px;
-        margin: 5px 2px 5px -8px;
-        border-radius: $border-radius-default;
-
-        svg {
-          @media (min-width: $screen-sm-min) {
-            margin-right: 8px;
-          }
-        }
-      }
-    }
-
     .dropdown.open {
       > a {
         border-bottom-color: $white-light;
@@ -113,28 +55,6 @@ header.navbar-gitlab-new {
   }
 
   .container-fluid {
-    .navbar-toggle {
-      min-width: 45px;
-      padding: 0 $gl-padding;
-      margin-right: -7px;
-      text-align: center;
-      color: currentColor;
-
-      svg {
-        fill: currentColor;
-      }
-
-      &:hover,
-      &:focus,
-      &.active {
-        color: currentColor;
-        background-color: transparent;
-
-        svg {
-          fill: currentColor;
-        }
-      }
-    }
 
     .navbar-nav {
       @media (max-width: $screen-xs-max) {
@@ -242,7 +162,7 @@ header.navbar-gitlab-new {
   }
 }
 
-.navbar-gitlab-new {
+header {
   .navbar-sub-nav,
   .navbar-nav {
     > li {
diff --git a/app/assets/stylesheets/framework/new-sidebar.scss b/app/assets/stylesheets/framework/new-sidebar.scss
index 8332cec2962..caf4c7a40b1 100644
--- a/app/assets/stylesheets/framework/new-sidebar.scss
+++ b/app/assets/stylesheets/framework/new-sidebar.scss
@@ -24,7 +24,7 @@ $new-sidebar-collapsed-width: 50px;
   // Override position: absolute
   .right-sidebar {
     position: fixed;
-    height: calc(100% - #{$new-navbar-height});
+    height: calc(100% - #{$header-height});
   }
 
   .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header {
@@ -87,7 +87,7 @@ $new-sidebar-collapsed-width: 50px;
   z-index: 400;
   width: $new-sidebar-width;
   transition: left $sidebar-transition-duration;
-  top: $new-navbar-height;
+  top: $header-height;
   bottom: 0;
   left: 0;
   background-color: $gray-normal;
@@ -197,7 +197,7 @@ $new-sidebar-collapsed-width: 50px;
 }
 
 .with-performance-bar .nav-sidebar {
-  top: $new-navbar-height + $performance-bar-height;
+  top: $header-height + $performance-bar-height;
 }
 
 .sidebar-sub-level-items {
@@ -495,7 +495,7 @@ $new-sidebar-collapsed-width: 50px;
 // Make issue boards full-height now that sub-nav is gone
 
 .boards-list {
-  height: calc(100vh - #{$new-navbar-height});
+  height: calc(100vh - #{$header-height});
 
   @media (min-width: $screen-sm-min) {
     height: 475px; // Needed for PhantomJS
@@ -506,5 +506,5 @@ $new-sidebar-collapsed-width: 50px;
 }
 
 .with-performance-bar .boards-list {
-  height: calc(100vh - #{$new-navbar-height} - #{$performance-bar-height});
+  height: calc(100vh - #{$header-height} - #{$performance-bar-height});
 }
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 48dc25d343b..ef58382ba41 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -78,16 +78,16 @@
 
 .right-sidebar {
   border-left: 1px solid $border-color;
-  height: calc(100% - #{$new-navbar-height});
+  height: calc(100% - #{$header-height});
 
   &.affix {
     position: fixed;
-    top: $new-navbar-height;
+    top: $header-height;
   }
 }
 
 .with-performance-bar .right-sidebar.affix {
-  top: $new-navbar-height + $performance-bar-height;
+  top: $header-height + $performance-bar-height;
 }
 
 @mixin maintain-sidebar-dimensions {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 5ab40947da9..dd3038c0252 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -224,8 +224,7 @@ $gl-sidebar-padding: 22px;
 $row-hover: $blue-50;
 $row-hover-border: $blue-200;
 $progress-color: #c0392b;
-$header-height: 50px;
-$new-navbar-height: 40px;
+$header-height: 40px;
 $fixed-layout-width: 1280px;
 $limited-layout-width: 990px;
 $limited-layout-width-sm: 790px;
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 359dd388d05..50ec5110bf1 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -64,10 +64,10 @@
     color: $gl-text-color;
     position: sticky;
     position: -webkit-sticky;
-    top: $new-navbar-height;
+    top: $header-height;
 
     &.affix {
-      top: $new-navbar-height;
+      top: $header-height;
     }
 
     // with sidebar
@@ -174,10 +174,10 @@
 
 .with-performance-bar .build-page {
   .top-bar {
-    top: $new-navbar-height + $performance-bar-height;
+    top: $header-height + $performance-bar-height;
 
     &.affix {
-      top: $new-navbar-height + $performance-bar-height;
+      top: $header-height + $performance-bar-height;
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index db3b7e89d7b..dae3ec7ac42 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -222,7 +222,7 @@
 
 .right-sidebar {
   position: absolute;
-  top: $new-navbar-height;
+  top: $header-height;
   bottom: 0;
   right: 0;
   transition: width $right-sidebar-transition-duration;
@@ -487,10 +487,10 @@
 }
 
 .with-performance-bar .right-sidebar {
-  top: $new-navbar-height + $performance-bar-height;
+  top: $header-height + $performance-bar-height;
 
   .issuable-sidebar {
-    height: calc(100% - #{$new-navbar-height} - #{$performance-bar-height});
+    height: calc(100% - #{$header-height} - #{$performance-bar-height});
   }
 }
 
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 09a14578dd3..d9fb3b44d29 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -649,7 +649,7 @@
 }
 
 .merge-request-tabs-holder {
-  top: $new-navbar-height;
+  top: $header-height;
   z-index: 200;
   background-color: $white-light;
   border-bottom: 1px solid $border-color;
@@ -679,7 +679,7 @@
 }
 
 .with-performance-bar .merge-request-tabs-holder {
-  top: $new-navbar-height + $performance-bar-height;
+  top: $header-height + $performance-bar-height;
 }
 
 .merge-request-tabs {