Merge branch 'cleanup_old_nav_stuff' into 'master'

Remove old navigation CSS

See merge request gitlab-org/gitlab-ce!14573

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'));

app/assets/stylesheets/framework.scss

@@ -30,10 +30,9 @@
 @import "framework/media_object";
 @import "framework/mobile";
 @import "framework/modal";
-@import "framework/nav";
-@import "framework/new-nav";
 @import "framework/pagination";
 @import "framework/panels";
+@import "framework/secondary-navigation-elements";
 @import "framework/selects";
 @import "framework/sidebar";
 @import "framework/new-sidebar";

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

app/assets/stylesheets/framework/blocks.scss

@@ -207,6 +207,16 @@
   &.user-cover-block {
     padding: 24px 0 0;
+
+    .nav-links {
+      justify-content: center;
+      width: 100%;
+      float: none;
+
+      &.scrolling-tabs {
+        float: none;
+      }
+    }
   }
   .group-info {

app/assets/stylesheets/framework/dropdowns.scss

@@ -749,7 +749,7 @@
       margin-bottom: $dropdown-vertical-offset;
     }
-    li {
+    li:not(.dropdown-bold-header) {
       display: block;
       padding: 0 1px;
@@ -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;
 }

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 {
+  .navbar-gitlab {
     background-color: $color-900;
     .navbar-collapse {
@@ -200,9 +200,9 @@ 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 {
+    .navbar-gitlab {
       background-color: $theme-gray-100;
-      box-shadow: 0 2px 0 0 $border-color;
+      box-shadow: 0 1px 0 0 $border-color;
       .logo-text svg {
         fill: $theme-gray-900;

app/assets/stylesheets/framework/header.scss

-/*
- *  Application Header
- *
- */
-header {
+.content-wrapper.page-with-new-nav {
+  margin-top: $header-height;
+}
+.navbar-gitlab {
   @include new-style-dropdown;
-  transition: padding $sidebar-transition-duration;
-
-  &.navbar-empty {
-    height: $header-height;
-    background: $white-light;
-    border-bottom: 1px solid $white-normal;
-
-    .center-logo {
-      margin: 8px 0;
-      text-align: center;
-
-      .tanuki-logo,
-      img {
-        height: 36px;
-      }
-    }
-  }
-
   &.navbar-gitlab {
     padding: 0 16px;
     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;
-      .navbar-border {
-        height: 1px;
-        position: absolute;
-        right: 0;
-        left: 0;
-        bottom: -1px;
-        background-color: $border-color;
-        opacity: 0;
+    .logo-text {
+      line-height: initial;
+      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;
@@ -114,81 +39,117 @@ header {
       }
       .navbar-toggle {
-        color: $nav-toggle-gray;
-        margin: 5px 0;
-        border-radius: 0;
         right: -10px;
-        padding: 6px 10px;
-        &:hover {
-          background-color: $white-normal;
+        border-radius: 0;
+        min-width: 45px;
+        padding: 0;
+        margin-right: -7px;
+        font-size: 14px;
+        text-align: center;
+        color: currentColor;
+        &:hover,
+        &:focus,
+        &.active {
+          color: currentColor;
+          background-color: transparent;
         }
-        &.active {
-          color: $gl-text-color-secondary;
+        .more-icon,
+        .close-icon {
+          fill: $white-light;
+          margin: auto;
         }
       }
     }
   }
-  &.navbar-gitlab-new {
-    .close-icon {
+  .close-icon {
+    display: none;
+  }
+
+  .menu-expanded {
+    .more-icon {
       display: none;
     }
-    .menu-expanded {
-      .more-icon {
-        display: none;
-      }
-
-      .close-icon {
-        display: block;
-      }
+    .close-icon {
+      display: block;
     }
   }
-  .global-dropdown {
-    position: absolute;
-    left: -10px;
-    .badge {
-      font-size: 11px;
+  .header-content {
+    display: -webkit-flex;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    min-height: $header-height;
+    padding-left: 0;
+    .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;
     }
-    li {
-      &.active a {
-        font-weight: $gl-font-weight-bold;
+    .title {
+      padding-right: 0;
+      color: currentColor;
+      display: -webkit-flex;
+      display: flex;
+      position: relative;
+      margin: 0;
+      font-size: 18px;
+      vertical-align: top;
+      white-space: nowrap;
+
+      img {
+        height: 28px;
+        margin-right: 8px;
       }
-    }
-  }
-  .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;
+      &.wrap {
+        white-space: normal;
+      }
+      &.initializing {
+        opacity: 0;
+      }
+
+      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;
+          }
+        }
+      }
+
+      .project-item-select {
+        right: auto;
+        left: 0;
+      }
     }
-  }
-  .header-content {
-    display: flex;
-    justify-content: space-between;
-    position: relative;
-    min-height: $header-height;
-    padding-left: 30px;
+    .dropdown.open {
+      > a {
+        border-bottom-color: $white-light;
+      }
+    }
     &.menu-expanded {
       @media (max-width: $screen-xs-max) {
-        .header-logo,
         .title-container {
           display: none;
         }
@@ -198,111 +159,180 @@ header {
         }
       }
     }
-    .dropdown-menu {
-      margin-top: -5px;
-    }
-    .header-logo {
-      display: inline-block;
-      margin: 0 12px 0 2px;
-      position: relative;
-      top: 10px;
-      transition-duration: .3s;
-      svg,
-      img {
-        height: 28px;
-      }
-      &:hover {
-        cursor: pointer;
+  }
+  .dropdown-bold-header {
+    color: $gl-text-color-secondary;
+    font-size: 12px;
+  }
+  .navbar-collapse {
+    flex: 0 0 auto;
+    border-top: none;
+    padding: 0;
+    @media (max-width: $screen-xs-max) {
+      flex: 1 1 auto;
+    }
+    .nav {
+      > li:not(.hidden-xs) a {
+        @media (max-width: $screen-xs-max) {
+          margin-left: 0;
+          min-width: 100%;
+        }
       }
     }
-    .group-name-toggle {
-      margin: 3px 5px;
-    }
-    .group-title {
-      &.is-hidden {
-        .hidable:not(:last-of-type) {
-          display: none;
+  }
+  .container-fluid {
+    .navbar-nav {
+      @media (max-width: $screen-xs-max) {
+        display: -webkit-flex;
+        display: flex;
+        padding-right: 10px;
+      }
+
+      li {
+        .badge {
+          box-shadow: none;
+          font-weight: $gl-font-weight-bold;
         }
       }
     }
-    .title-container {
-      display: flex;
-      align-items: flex-start;
-      flex: 1 1 auto;
-      padding-top: 14px;
-      overflow: hidden;
-    }
-    .title {
-      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;
-      &.wrap {
-        white-space: normal;
+    .nav > li {
+      &.header-user {
+        @media (max-width: $screen-xs-max) {
+          padding-left: 10px;
+        }
+      }
+      > a {
+        will-change: color;
+        margin: 4px 2px;
+        padding: 6px 8px;
+        height: 32px;
+        @media (max-width: $screen-xs-max) {
+          padding: 0;
+        }
+
+        &.header-user-dropdown-toggle {
+          margin-left: 2px;
+
+          .header-user-avatar {
+            margin-right: 0;
+          }
+        }
+
+        &:hover,
+        &:focus {
+          text-decoration: none;
+          outline: 0;
+          opacity: 1;
+          color: $white-light;
+
+          svg {
+            fill: currentColor;
+          }
+
+          &.header-user-dropdown-toggle {
+            .header-user-avatar {
+              border-color: $white-light;
+            }
+          }
+        }
       }
-      &.initializing {
-        opacity: 0;
+      .header-new-dropdown-toggle {
+        margin-right: 0;
       }
-      a {
-        color: currentColor;
-        &:hover {
-          text-decoration: underline;
-          color: $gl-header-nav-hover-color;
+      .impersonated-user,
+      .impersonated-user:hover {
+        margin-right: 1px;
+        background-color: $white-light;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+      .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;
         }
       }
-      .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;
+      &.active > a,
+      &.dropdown.open > a {
+        svg {
+          fill: currentColor;
         }
       }
-      .project-item-select {
-        right: auto;
-        left: 0;
+    }
+  }
+}
+.navbar-sub-nav,
+.navbar-nav {
+  > li {
+    > a:hover,
+    > a:focus {
+      text-decoration: none;
+      outline: 0;
+      color: $white-light;
+
+      svg {
+        fill: currentColor;
       }
     }
-    .navbar-collapse {
-      flex: 0 0 auto;
-      border-top: none;
-      padding: 0;
-
-      @media (max-width: $screen-xs-max) {
-        flex: 1 1 auto;
+    > a {
+      display: -webkit-flex;
+      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 {
+      margin: 8px;
+    }
+  }
+}
+
+.navbar-sub-nav {
+  display: -webkit-flex;
+  display: flex;
+  margin: 0 0 0 6px;
+
+  .projects-dropdown-menu {
+    padding: 0;
+  }
+
+  .dropdown-chevron {
+    position: relative;
+    top: -1px;
+    font-size: 10px;
   }
   .project-item-select-holder {
@@ -314,8 +344,123 @@ header {
   }
 }
-.with-performance-bar header.navbar-gitlab {
-  top: $performance-bar-height;
+.caret-down {
+  height: 11px;
+  width: 11px;
+  margin-left: 4px;
+  fill: currentColor;
+}
+
+.header-user .dropdown-menu-nav,
+.header-new .dropdown-menu-nav {
+  margin-top: $dropdown-vertical-offset;
+}
+
+.breadcrumbs {
+  display: -webkit-flex;
+  display: flex;
+  min-height: 48px;
+  color: $gl-text-color;
+}
+
+.breadcrumbs-container {
+  display: -webkit-flex;
+  display: flex;
+  width: 100%;
+  position: relative;
+  padding-top: $gl-padding / 2;
+  padding-bottom: $gl-padding / 2;
+  align-items: center;
+  border-bottom: 1px solid $border-color;
+}
+
+.breadcrumbs-links {
+  -webkit-flex: 1;
+  flex: 1;
+  min-width: 0;
+  align-self: center;
+  color: $gl-text-color-secondary;
+
+  .avatar-tile {
+    margin-right: 4px;
+    border: 1px solid $border-color;
+    border-radius: 50%;
+    vertical-align: sub;
+  }
+
+  .text-expander {
+    margin-left: 0;
+    margin-right: 2px;
+
+    > i {
+      position: relative;
+      top: 1px;
+    }
+  }
+}
+
+.breadcrumbs-list {
+  display: -webkit-flex;
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 0;
+  line-height: 16px;
+
+  > li {
+    display: flex;
+    align-items: center;
+    position: relative;
+    padding: 2px 0;
+
+    &:not(:last-child) {
+      margin-right: 20px;
+    }
+
+    > a {
+      font-size: 12px;
+      color: currentColor;
+    }
+  }
+}
+
+.breadcrumb-item-text {
+  @include str-truncated(128px);
+  text-decoration: inherit;
+}
+
+.breadcrumbs-list-angle {
+  position: absolute;
+  right: -12px;
+  top: 50%;
+  color: $gl-text-color-tertiary;
+  transform: translateY(-50%);
+}
+
+.breadcrumbs-extra {
+  display: -webkit-flex;
+  display: flex;
+  flex: 0 0 auto;
+  margin-left: auto;
+}
+
+.breadcrumbs-sub-title {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 16px;
+
+  a {
+    color: $gl-text-color;
+  }
+}
+
+.btn-sign-in {
+  margin-top: 3px;
+  font-weight: $gl-font-weight-bold;
+
+  &:hover {
+    background-color: $white-light;
+  }
 }
 .navbar-nav {
@@ -347,11 +492,10 @@ header {
 }
 @media (max-width: $screen-xs-max) {
-  header .container-fluid {
+  .navbar-gitlab .container-fluid {
     font-size: 18px;
     .navbar-nav {
-      display: table;
       table-layout: fixed;
       width: 100%;
       margin: 0;
@@ -359,7 +503,8 @@ header {
     }
     .navbar-collapse {
-      padding-left: 5px;
+      margin-left: -8px;
+      margin-right: -10px;
       .nav > li:not(.hidden-xs) {
         display: table-cell !important;
@@ -385,11 +530,11 @@ header {
   .dropdown-menu-nav {
     width: auto;
     min-width: 140px;
-    margin-top: -5px;
+    margin-top: 4px;
     color: $gl-text-color;
     left: auto;
-    .current-user {
+    li.current-user {
       padding: 5px 18px;
       .user-name {
@@ -405,3 +550,23 @@ header {
   border-radius: 50%;
   border: 1px solid $avatar-border;
 }
+
+.with-performance-bar .navbar-gitlab {
+  top: $performance-bar-height;
+}
+
+.navbar-empty {
+  height: $header-height;
+  background: $white-light;
+  border-bottom: 1px solid $white-normal;
+
+  .center-logo {
+    margin: 8px 0;
+    text-align: center;
+
+    .tanuki-logo,
+    img {
+      height: 36px;
+    }
+  }
+}

app/assets/stylesheets/framework/images.scss

@@ -28,6 +28,7 @@
 svg {
   &.s8 { @include svg-size(8px); }
+  &.s12 { @include svg-size(12px); }
   &.s16 { @include svg-size(16px); }
   &.s18 { @include svg-size(18px); }
   &.s24 { @include svg-size(24px); }

app/assets/stylesheets/framework/layout.scss

@@ -25,10 +25,6 @@ body {
 .content-wrapper {
   padding-bottom: 100px;
-
-  &:not(.page-with-layout-nav) {
-    margin-top: $header-height;
-  }
 }
 .container {

app/assets/stylesheets/framework/new-nav.scss

-@import "framework/variables";
-@import 'framework/tw_bootstrap_variables';
-@import "bootstrap/variables";
-@import "framework/mixins";
-
-.content-wrapper.page-with-new-nav {
-  margin-top: $new-navbar-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-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;
-      }
-    }
-
-    .dropdown-menu {
-      margin-top: 4px;
-      min-width: 130px;
-
-      @media (max-width: $screen-xs-max) {
-        left: auto;
-        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 {
-    padding-left: 0;
-    box-shadow: 0;
-
-    @media (max-width: $screen-xs-max) {
-      margin-left: -8px;
-      margin-right: -10px;
-    }
-
-    .nav {
-      > li:not(.hidden-xs) a {
-        @media (max-width: $screen-xs-max) {
-          margin-left: 0;
-          min-width: 100%;
-        }
-      }
-    }
-  }
-
-  .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) {
-        display: flex;
-        padding-right: 10px;
-      }
-
-      li {
-        .badge {
-          box-shadow: none;
-          font-weight: $gl-font-weight-bold;
-        }
-      }
-    }
-
-    .nav > li {
-      &.header-user {
-        @media (max-width: $screen-xs-max) {
-          padding-left: 10px;
-        }
-      }
-
-      > a {
-        will-change: color;
-        margin: 4px 2px;
-        padding: 6px 8px;
-        height: 32px;
-
-        @media (max-width: $screen-xs-max) {
-          padding: 0;
-        }
-
-        &.header-user-dropdown-toggle {
-          margin-left: 2px;
-
-          .header-user-avatar {
-            margin-right: 0;
-          }
-        }
-
-        &:hover,
-        &:focus {
-          text-decoration: none;
-          outline: 0;
-          opacity: 1;
-          color: $white-light;
-
-          svg {
-            fill: currentColor;
-          }
-
-          &.header-user-dropdown-toggle {
-            .header-user-avatar {
-              border-color: $white-light;
-            }
-          }
-        }
-      }
-
-      .header-new-dropdown-toggle {
-        margin-right: 0;
-      }
-
-      .impersonated-user,
-      .impersonated-user:hover {
-        margin-right: 1px;
-        background-color: $white-light;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-
-      .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 {
-
-        svg {
-          fill: currentColor;
-        }
-      }
-    }
-  }
-}
-
-.navbar-sub-nav {
-  display: -webkit-flex;
-  display: flex;
-  margin: 0 0 0 6px;
-
-  .dropdown-chevron {
-    position: relative;
-    top: -1px;
-    font-size: 10px;
-  }
-}
-
-.navbar-gitlab-new {
-  .navbar-sub-nav,
-  .navbar-nav {
-    > li {
-      > a:hover,
-      > a:focus {
-        text-decoration: none;
-        outline: 0;
-        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 {
-        margin: 8px;
-      }
-    }
-  }
-}
-
-.caret-down {
-  height: 11px;
-  width: 11px;
-  margin-left: 4px;
-  fill: currentColor;
-}
-
-.header-user .dropdown-menu-nav,
-.header-new .dropdown-menu-nav {
-  margin-top: $dropdown-vertical-offset;
-}
-
-.breadcrumbs {
-  display: flex;
-  min-height: 48px;
-  color: $gl-text-color;
-}
-
-.breadcrumbs-container {
-  display: -webkit-flex;
-  display: flex;
-  width: 100%;
-  position: relative;
-  padding-top: $gl-padding / 2;
-  padding-bottom: $gl-padding / 2;
-  align-items: center;
-  border-bottom: 1px solid $border-color;
-}
-
-.breadcrumbs-links {
-  -webkit-flex: 1;
-  flex: 1;
-  min-width: 0;
-  align-self: center;
-  color: $gl-text-color-secondary;
-
-  .avatar-tile {
-    margin-right: 4px;
-    border: 1px solid $border-color;
-    border-radius: 50%;
-    vertical-align: sub;
-  }
-
-  .text-expander {
-    margin-left: 0;
-    margin-right: 2px;
-
-    > i {
-      position: relative;
-      top: 1px;
-    }
-  }
-}
-
-.breadcrumbs-list {
-  display: -webkit-flex;
-  display: flex;
-  flex-wrap: wrap;
-  margin-bottom: 0;
-  line-height: 16px;
-
-  > li {
-    display: flex;
-    align-items: center;
-    position: relative;
-    padding: 2px 0;
-
-    &:not(:last-child) {
-      margin-right: 20px;
-    }
-
-    > a {
-      font-size: 12px;
-      color: currentColor;
-    }
-  }
-}
-
-.breadcrumb-item-text {
-  @include str-truncated(128px);
-  text-decoration: inherit;
-}
-
-.breadcrumbs-list-angle {
-  position: absolute;
-  right: -12px;
-  top: 50%;
-  color: $gl-text-color-tertiary;
-  transform: translateY(-50%);
-}
-
-.breadcrumbs-extra {
-  display: flex;
-  flex: 0 0 auto;
-  margin-left: auto;
-}
-
-.breadcrumbs-sub-title {
-  margin: 0;
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 16px;
-
-  a {
-    color: $gl-text-color;
-  }
-}
-
-.btn-sign-in {
-  margin-top: 3px;
-  font-weight: $gl-font-weight-bold;
-
-  &:hover {
-    background-color: $white-light;
-  }
-}

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

app/assets/stylesheets/framework/nav.scss → app/assets/stylesheets/framework/secondary-navigation-elements.scss

-
-
+// For tabbed navigation links, scrolling tabs, etc. For all top/main navigation,
+// please check nav.scss
 .nav-links {
   display: flex;
   padding: 0;
   margin: 0;
   list-style: none;
   height: auto;
-  border-bottom: 1px solid $border-color;
   li {
     display: flex;
@@ -24,7 +23,6 @@
       &:active,
       &:focus {
         text-decoration: none;
-        border-bottom: 2px solid $gray-darkest;
         color: $black;
         .badge {
@@ -34,7 +32,6 @@
     }
     &.active a {
-      border-bottom: 2px solid $link-underline-blue;
       color: $black;
       font-weight: $gl-font-weight-bold;
@@ -43,35 +40,6 @@
       }
     }
   }
-
-  &.sub-nav {
-    text-align: center;
-    background-color: $gray-normal;
-
-    .container-fluid {
-      background-color: $gray-normal;
-      margin-bottom: 0;
-      display: flex;
-    }
-
-    li {
-      &.active a {
-        border-bottom: none;
-        color: $link-underline-blue;
-      }
-
-      a {
-        margin: 0;
-        padding: 11px 10px 9px;
-
-        &:hover,
-        &:active,
-        &:focus {
-          border-color: transparent;
-        }
-      }
-    }
-  }
 }
 .top-area {
@@ -91,17 +59,6 @@
     }
   }
-  .nav-search {
-    display: inline-block;
-    width: 100%;
-    padding: 11px 0;
-
-    /* Small devices (phones, tablets, 768px and lower) */
-    @media (min-width: $screen-sm-min) {
-      width: 50%;
-    }
-  }
-
   .nav-links {
     margin-bottom: 0;
     border-bottom: none;
@@ -150,12 +107,6 @@
       }
     }
-    &.nav-controls-new-nav {
-      > .dropdown {
-        margin-right: 0;
-      }
-    }
-
     > .btn-grouped {
       float: none;
     }
@@ -248,114 +199,43 @@
   pre {
     width: 100%;
   }
-}
-
-.project-item-select-holder.btn-group {
-  display: flex;
-  max-width: 350px;
-  overflow: hidden;
-  float: right;
-
-  .new-project-item-link {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .new-project-item-select-button {
-    width: 32px;
-  }
-}
-
-.empty-state .project-item-select-holder.btn-group {
-  float: none;
-  display: inline-block;
-
-  .btn {
-    // overrides styles applied to plain `.empty-state .btn`
-    margin: 10px 0;
-    max-width: 300px;
-    width: auto;
-
-    @media(max-width: $screen-xs-max) {
-      max-width: 250px;
-    }
-
-  }
-}
-.new-project-item-select-button .fa-caret-down {
-  margin-left: 2px;
-}
-
-.layout-nav {
-  width: 100%;
-  background: $gray-light;
-  border-bottom: 1px solid $border-color;
-  transition: padding $sidebar-transition-duration;
-  text-align: center;
-  margin-top: $new-navbar-height;
-  .container-fluid {
-    position: relative;
-    .nav-control {
-      @media (max-width: $screen-sm-max) {
-        margin-right: 2px;
+  @media (max-width: $screen-xs-max) {
+    flex-flow: row wrap;
+    .nav-controls {
+      $controls-margin: $btn-xs-side-margin - 2px;
+      flex: 0 0 100%;
+      &.controls-flex {
+        display: flex;
+        flex-flow: row wrap;
+        align-items: center;
+        justify-content: center;
+        padding: 0 0 $gl-padding-top;
       }
-    }
-  }
-
-  .controls {
-    float: right;
-    padding: 7px 0 0;
-
-    i {
-      color: $layout-link-gray;
-    }
-
-    .fa-rss,
-    .fa-cog {
-      font-size: 16px;
-    }
-    .fa-caret-down {
-      margin-left: 5px;
-      color: $gl-text-color-secondary;
-    }
-
-    .dropdown {
-      position: absolute;
-      top: 7px;
-      right: 15px;
-      z-index: 300;
-      li.active {
-        font-weight: $gl-font-weight-bold;
+      .controls-item,
+      .controls-item-full,
+      .controls-item:last-child {
+        flex: 1 1 35%;
+        display: block;
+        width: 100%;
+        margin: $controls-margin;
+        .btn,
+        .dropdown {
+          margin: 0;
+        }
       }
-    }
-  }
-  .nav-links {
-    border-bottom: none;
-    height: 51px;
-
-    @media (min-width: $screen-sm-min) {
-      justify-content: center;
-    }
-
-    li {
-      a {
-        padding-top: 10px;
+      .controls-item-full {
+        flex: 1 1 100%;
       }
     }
   }
 }
-.with-performance-bar .layout-nav {
-  margin-top: $header-height + $performance-bar-height;
-}
-
 .scrolling-tabs-container {
   position: relative;
@@ -385,25 +265,41 @@
       left: -7px;
     }
   }
-  &.sub-nav-scroll {
-    .fade-right {
-      @include fade(left, $gray-normal);
-      right: 0;
-      .fa {
-        right: -23px;
-      }
+}
+.inner-page-scroll-tabs {
+  position: relative;
+  .fade-right {
+    @include fade(left, $white-light);
+    right: 0;
+    text-align: right;
+    .fa {
+      right: 5px;
     }
-    .fade-left {
-      @include fade(right, $gray-normal);
-      left: 0;
-      .fa {
-        left: 10px;
-      }
+  }
+  .fade-left {
+    @include fade(right, $white-light);
+    left: 0;
+    text-align: left;
+    .fa {
+      left: 5px;
+    }
+  }
+
+  .fade-right,
+  .fade-left {
+    top: 16px;
+    bottom: auto;
+  }
+
+  &.is-smaller {
+    .fade-right,
+    .fade-left {
+      top: 11px;
     }
   }
 }
@@ -432,41 +328,7 @@
       }
     }
   }
-}
-
-.page-with-layout-nav {
-  .right-sidebar {
-    top: ($header-height + 1) * 2;
-  }
-
-  &.page-with-sub-nav {
-    .right-sidebar {
-      top: ($header-height + 1) * 3;
-
-      &.affix {
-        top: $header-height;
-      }
-    }
-  }
-}
-
-.with-performance-bar .page-with-layout-nav {
-  .right-sidebar {
-    top: ($header-height + 1) * 2 + $performance-bar-height;
-  }
-
-  &.page-with-sub-nav {
-    .right-sidebar {
-      top: ($header-height + 1) * 3 + $performance-bar-height;
-
-      &.affix {
-        top: $header-height + $performance-bar-height;
-      }
-    }
-  }
-}
-.nav-block {
   &.activities {
     border-bottom: 1px solid $border-color;
@@ -476,76 +338,39 @@
   }
 }
-@media (max-width: $screen-xs-max) {
-  .top-area {
-    flex-flow: row wrap;
-
-    .nav-controls {
-      $controls-margin: $btn-xs-side-margin - 2px;
-      flex: 0 0 100%;
-
-      &.controls-flex {
-        display: flex;
-        flex-flow: row wrap;
-        align-items: center;
-        justify-content: center;
-        padding: 0 0 $gl-padding-top;
-      }
-
-      .controls-item,
-      .controls-item-full,
-      .controls-item:last-child {
-        flex: 1 1 35%;
-        display: block;
-        width: 100%;
-        margin: $controls-margin;
-        .btn,
-        .dropdown {
-          margin: 0;
-        }
-      }
-      .controls-item-full {
-        flex: 1 1 100%;
-      }
-    }
+.project-item-select-holder.btn-group {
+  display: flex;
+  max-width: 350px;
+  overflow: hidden;
+  float: right;
+  .new-project-item-link {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .new-project-item-select-button {
+    width: 32px;
   }
 }
-.inner-page-scroll-tabs {
-  position: relative;
-
-  .fade-right {
-    @include fade(left, $white-light);
-    right: 0;
-    text-align: right;
-
-    .fa {
-      right: 5px;
-    }
-  }
-  .fade-left {
-    @include fade(right, $white-light);
-    left: 0;
-    text-align: left;
-    .fa {
-      left: 5px;
+.empty-state .project-item-select-holder.btn-group {
+  float: none;
+  display: inline-block;
+  .btn {
+    // overrides styles applied to plain `.empty-state .btn`
+    margin: 10px 0;
+    max-width: 300px;
+    width: auto;
+    @media(max-width: $screen-xs-max) {
+      max-width: 250px;
     }
   }
-  .fade-right,
-  .fade-left {
-    top: 16px;
-    bottom: auto;
-  }
-
-  &.is-smaller {
-    .fade-right,
-    .fade-left {
-      top: 11px;
-    }
-  }
+}
+.new-project-item-select-button .fa-caret-down {
+  margin-left: 2px;
 }

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 {

app/assets/stylesheets/framework/variables.scss

@@ -225,8 +225,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;

app/assets/stylesheets/pages/boards.scss

@@ -414,7 +414,6 @@
   margin: 5px;
 }
-.page-with-layout-nav.page-with-sub-nav .issue-boards-sidebar,
 .page-with-new-sidebar.page-with-sidebar .issue-boards-sidebar {
   .issuable-sidebar-header {
     position: relative;

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

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

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 {