Finish combining nav styles

5 files changed, 412 insertions, 477 deletions

diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 09a29d41823..c7be94e2c8e 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -30,8 +30,6 @@
 @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";
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index cd71d3c1dd9..4693b4a18d7 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -1,7 +1,6 @@
-/*
- *  Application Header
- *
- */
+.content-wrapper.page-with-new-nav {
+  margin-top: $header-height;
+}
 
 header {
   @include new-style-dropdown;
@@ -56,8 +55,10 @@ header {
       }
 
       .navbar-toggle {
+        right: -10px;
+        border-radius: 0;
         min-width: 45px;
-        padding: 0 $gl-padding;
+        padding: 0;
         margin-right: -7px;
         font-size: 14px;
         text-align: center;
@@ -69,6 +70,12 @@ header {
           color: currentColor;
           background-color: transparent;
         }
+
+        .more-icon,
+        .close-icon {
+          fill: $white-light;
+          margin: auto;
+        }
       }
     }
   }
@@ -87,62 +94,14 @@ header {
     }
   }
 
-  .global-dropdown {
-    position: absolute;
-    left: -10px;
-
-    .badge {
-      font-size: 11px;
-    }
-
-    li {
-      &.active a {
-        font-weight: $gl-font-weight-bold;
-      }
-    }
-  }
-
   .header-content {
     display: -webkit-flex;
     display: flex;
+    justify-content: space-between;
     position: relative;
     min-height: $header-height;
     padding-left: 0;
 
-    &.menu-expanded {
-      @media (max-width: $screen-xs-max) {
-        .header-logo,
-        .title-container {
-          display: none;
-        }
-
-        .navbar-collapse {
-          display: block;
-        }
-      }
-    }
-
-    .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;
-      }
-    }
-
     .title-container {
       display: -webkit-flex;
       display: flex;
@@ -199,15 +158,197 @@ header {
       }
     }
 
-    .navbar-collapse {
-      flex: 0 0 auto;
-      border-top: none;
-      padding: 0;
+    .dropdown.open {
+      > a {
+        border-bottom-color: $white-light;
+      }
+    }
+
+    &.menu-expanded {
+      @media (max-width: $screen-xs-max) {
+        .title-container {
+          display: none;
+        }
+
+        .navbar-collapse {
+          display: block;
+        }
+      }
+    }
+  }
+
+  .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%;
+        }
+      }
+    }
+  }
+
+  .container-fluid {
 
+    .navbar-nav {
       @media (max-width: $screen-xs-max) {
-        flex: 1 1 auto;
+        display: -webkit-flex;
+        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,
+.navbar-nav {
+  > li {
+    > a:hover,
+    > a:focus {
+      text-decoration: none;
+      outline: 0;
+      color: $white-light;
+
+      svg {
+        fill: currentColor;
+      }
+    }
+
+    > 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 {
@@ -218,3 +359,214 @@ header {
     color: $red-500;
   }
 }
+
+.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 {
+  li {
+    .badge {
+      position: inherit;
+      font-weight: $gl-font-weight-normal;
+      margin-left: -6px;
+      font-size: 11px;
+      color: $white-light;
+      padding: 0 5px;
+      line-height: 12px;
+      border-radius: 7px;
+      box-shadow: 0 1px 0 rgba($gl-header-color, .2);
+
+      &.issues-count {
+        background-color: $green-500;
+      }
+
+      &.merge-requests-count {
+        background-color: $orange-600;
+      }
+
+      &.todos-count {
+        background-color: $blue-500;
+      }
+    }
+  }
+}
+
+@media (max-width: $screen-xs-max) {
+  header .container-fluid {
+    font-size: 18px;
+
+    .navbar-nav {
+      table-layout: fixed;
+      width: 100%;
+      margin: 0;
+      text-align: right;
+    }
+
+    .navbar-collapse {
+      margin-left: -8px;
+      margin-right: -10px;
+
+      .nav > li:not(.hidden-xs) {
+        display: table-cell !important;
+        width: 25%;
+
+        a {
+          margin-right: 8px;
+        }
+      }
+    }
+  }
+
+  .header-user-dropdown-toggle {
+    text-align: center;
+  }
+
+  .header-user-avatar {
+    float: none;
+  }
+}
+
+.header-user {
+  .dropdown-menu-nav {
+    width: auto;
+    min-width: 140px;
+    margin-top: 4px;
+    color: $gl-text-color;
+    left: auto;
+
+    .current-user {
+      padding: 5px 18px;
+
+      .user-name {
+        display: block;
+      }
+    }
+  }
+}
+
+.header-user-avatar {
+  float: left;
+  margin-right: 5px;
+  border-radius: 50%;
+  border: 1px solid $avatar-border;
+}
+
+.with-performance-bar header.navbar-gitlab {
+  top: $performance-bar-height;
+}
diff --git a/app/assets/stylesheets/framework/images.scss b/app/assets/stylesheets/framework/images.scss
index 59bfc5a8d77..6819fd88b7f 100644
--- a/app/assets/stylesheets/framework/images.scss
+++ b/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); }
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
deleted file mode 100644
index 8b137891791..00000000000
--- a/app/assets/stylesheets/framework/nav.scss
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/app/assets/stylesheets/framework/new-nav.scss b/app/assets/stylesheets/framework/new-nav.scss
index a8fe8b31a6b..e69de29bb2d 100644
--- a/app/assets/stylesheets/framework/new-nav.scss
+++ b/app/assets/stylesheets/framework/new-nav.scss
@@ -1,415 +0,0 @@
-.content-wrapper.page-with-new-nav {
-  margin-top: $header-height;
-}
-
-header {
-  .header-content {
-    .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-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;
-        }
-      }
-    }
-
-    .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;
-  }
-}
-
-header {
-  .navbar-sub-nav,
-  .navbar-nav {
-    > li {
-      > a:hover,
-      > a:focus {
-        text-decoration: none;
-        outline: 0;
-        color: $white-light;
-
-        svg {
-          fill: currentColor;
-        }
-      }
-
-      > 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;
-      }
-    }
-  }
-}
-
-.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 {
-  li {
-    .badge {
-      position: inherit;
-      font-weight: $gl-font-weight-normal;
-      margin-left: -6px;
-      font-size: 11px;
-      color: $white-light;
-      padding: 0 5px;
-      line-height: 12px;
-      border-radius: 7px;
-      box-shadow: 0 1px 0 rgba($gl-header-color, .2);
-
-      &.issues-count {
-        background-color: $green-500;
-      }
-
-      &.merge-requests-count {
-        background-color: $orange-600;
-      }
-
-      &.todos-count {
-        background-color: $blue-500;
-      }
-    }
-  }
-}
-
-@media (max-width: $screen-xs-max) {
-  header .container-fluid {
-    font-size: 18px;
-
-    .navbar-nav {
-      display: table;
-      table-layout: fixed;
-      width: 100%;
-      margin: 0;
-      text-align: right;
-    }
-
-    .navbar-collapse {
-      padding-left: 5px;
-
-      .nav > li:not(.hidden-xs) {
-        display: table-cell !important;
-        width: 25%;
-
-        a {
-          margin-right: 8px;
-        }
-      }
-    }
-  }
-
-  .header-user-dropdown-toggle {
-    text-align: center;
-  }
-
-  .header-user-avatar {
-    float: none;
-  }
-}
-
-.header-user {
-  .dropdown-menu-nav {
-    width: auto;
-    min-width: 140px;
-    margin-top: -5px;
-    color: $gl-text-color;
-    left: auto;
-
-    .current-user {
-      padding: 5px 18px;
-
-      .user-name {
-        display: block;
-      }
-    }
-  }
-}
-
-.header-user-avatar {
-  float: left;
-  margin-right: 5px;
-  border-radius: 50%;
-  border: 1px solid $avatar-border;
-}
-
-.with-performance-bar header.navbar-gitlab {
-  top: $performance-bar-height;
-}