Remove nav images; remove old nav styles; create new file for other navigation elements

7 files changed, 342 insertions, 525 deletions

diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index e8037c77aab..09a29d41823 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -34,6 +34,7 @@
 @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";
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index 1d72a70f0f5..d63145771c9 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -207,6 +207,10 @@
 
   &.user-cover-block {
     padding: 24px 0 0;
+
+    .nav-links {
+      justify-content: center;
+    }
   }
 
   .group-info {
diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index bd521028c44..69d19ea2962 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index f8777d1fd9d..ca206ce818f 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -1,255 +1,3 @@
-
-
-.nav-links {
-  display: flex;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  height: auto;
-  border-bottom: 1px solid $border-color;
-
-  li {
-    display: flex;
-
-    a {
-      padding: $gl-btn-padding;
-      padding-bottom: 11px;
-      font-size: 14px;
-      line-height: 28px;
-      color: $gl-text-color-secondary;
-      border-bottom: 2px solid transparent;
-      white-space: nowrap;
-
-      &:hover,
-      &:active,
-      &:focus {
-        text-decoration: none;
-        border-bottom: 2px solid $gray-darkest;
-        color: $black;
-
-        .badge {
-          color: $black;
-        }
-      }
-    }
-
-    &.active a {
-      border-bottom: 2px solid $link-underline-blue;
-      color: $black;
-      font-weight: $gl-font-weight-bold;
-
-      .badge {
-        color: $black;
-      }
-    }
-  }
-
-  &.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 {
-  @include clearfix;
-  border-bottom: 1px solid $border-color;
-
-  .nav-text {
-    padding-top: 16px;
-    padding-bottom: 11px;
-    display: inline-block;
-    line-height: 28px;
-    white-space: normal;
-
-    /* Small devices (phones, tablets, 768px and lower) */
-    @media (max-width: $screen-xs-max) {
-      width: 100%;
-    }
-  }
-
-  .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;
-    float: left;
-
-    &.wide {
-      width: 100%;
-      display: block;
-    }
-
-    &.scrolling-tabs {
-      float: left;
-    }
-
-    li a {
-      padding: 16px 15px 11px;
-    }
-
-    /* Small devices (phones, tablets, 768px and lower) */
-    @media (max-width: $screen-xs-max) {
-      width: 100%;
-    }
-  }
-
-  .nav-controls {
-    @include new-style-dropdown;
-
-    display: inline-block;
-    float: right;
-    text-align: right;
-    padding: 11px 0;
-    margin-bottom: 0;
-
-    > .btn,
-    > .btn-container,
-    > .dropdown,
-    > input,
-    > form {
-      margin-right: $gl-padding-top;
-      display: inline-block;
-      vertical-align: top;
-
-      &:last-child {
-        margin-right: 0;
-        float: right;
-      }
-    }
-
-    &.nav-controls-new-nav {
-      > .dropdown {
-        margin-right: 0;
-      }
-    }
-
-    > .btn-grouped {
-      float: none;
-    }
-
-    .icon-label {
-      display: none;
-    }
-
-    input {
-      display: inline-block;
-      position: relative;
-
-      /* Medium devices (desktops, 992px and up) */
-      @media (min-width: $screen-md-min) { width: 200px; }
-
-      /* Large devices (large desktops, 1200px and up) */
-      @media (min-width: $screen-lg-min) { width: 250px; }
-
-      &.input-short {
-        /* Medium devices (desktops, 992px and up) */
-        @media (min-width: $screen-md-min) { width: 170px; }
-
-        /* Large devices (large desktops, 1200px and up) */
-        @media (min-width: $screen-lg-min) { width: 210px; }
-      }
-    }
-
-    @media (max-width: $screen-xs-max) {
-      padding-bottom: 0;
-      width: 100%;
-
-      .btn,
-      form,
-      .dropdown,
-      .dropdown-toggle,
-      .dropdown-menu-toggle,
-      .form-control {
-        margin: 0 0 10px;
-        display: block;
-        width: 100%;
-      }
-
-      form {
-        display: block;
-        height: auto;
-        margin-bottom: 14px;
-
-        input {
-          width: 100%;
-          margin: 0 0 10px;
-        }
-      }
-
-      .input-short {
-        width: 100%;
-      }
-
-      .icon-label {
-        display: inline-block;
-      }
-
-      // Applies on /dashboard/issues
-      .project-item-select-holder {
-        margin: 0;
-      }
-    }
-  }
-
-  &.adjust {
-    .nav-text,
-    .nav-controls {
-      width: auto;
-
-      @media (max-width: $screen-xs-max) {
-        width: 100%;
-      }
-    }
-  }
-
-  &.multi-line {
-    .nav-text {
-      line-height: 20px;
-    }
-
-    .nav-controls {
-      padding: 17px 0;
-    }
-  }
-
-  pre {
-    width: 100%;
-  }
-}
-
 .project-item-select-holder.btn-group {
   display: flex;
   max-width: 350px;
@@ -280,272 +28,9 @@
     @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;
-      }
-    }
-  }
-
-  .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;
-      }
-    }
-  }
-
-  .nav-links {
-    border-bottom: none;
-    height: 51px;
-
-    @media (min-width: $screen-sm-min) {
-      justify-content: center;
-    }
-
-    li {
-      a {
-        padding-top: 10px;
-      }
-    }
-  }
-}
-
-.with-performance-bar .layout-nav {
-  margin-top: $header-height + $performance-bar-height;
-}
-
-.scrolling-tabs-container {
-  position: relative;
-
-  .merge-request-tabs-container & {
-    overflow: hidden;
-  }
-
-  .nav-links {
-    @include scrolling-links();
-  }
-
-  .fade-right {
-    @include fade(left, $gray-light);
-    right: -5px;
-
-    .fa {
-      right: -7px;
-    }
-  }
-
-  .fade-left {
-    @include fade(right, $gray-light);
-    left: -5px;
-    text-align: center;
-
-    .fa {
-      left: -7px;
-    }
-  }
-
-  &.sub-nav-scroll {
-
-    .fade-right {
-      @include fade(left, $gray-normal);
-      right: 0;
-
-      .fa {
-        right: -23px;
-      }
-    }
-
-    .fade-left {
-      @include fade(right, $gray-normal);
-      left: 0;
-
-      .fa {
-        left: 10px;
-      }
-    }
-  }
-}
-
-.nav-block {
-  position: relative;
-
-  .nav-links {
-    @include scrolling-links();
-
-    .fade-right {
-      @include fade(left, $white-light);
-      right: -5px;
-
-      .fa {
-        right: -7px;
-      }
-    }
-
-    .fade-left {
-      @include fade(right, $white-light);
-      left: -5px;
-
-      .fa {
-        left: -7px;
-      }
-    }
-  }
-}
-
-.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;
-
-    .nav-links {
-      border-bottom: none;
-    }
-  }
-}
-
-@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%;
-      }
-    }
-  }
-}
-
-.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;
-    }
-  }
-
-  .fade-right,
-  .fade-left {
-    top: 16px;
-    bottom: auto;
-  }
-
-  &.is-smaller {
-    .fade-right,
-    .fade-left {
-      top: 11px;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/framework/new-nav.scss b/app/assets/stylesheets/framework/new-nav.scss
index 7899be2c2d3..3663ebf3039 100644
--- a/app/assets/stylesheets/framework/new-nav.scss
+++ b/app/assets/stylesheets/framework/new-nav.scss
@@ -1,8 +1,3 @@
-@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;
 }
diff --git a/app/assets/stylesheets/framework/secondary-navigation-elements.scss b/app/assets/stylesheets/framework/secondary-navigation-elements.scss
new file mode 100644
index 00000000000..1b9a26512b4
--- /dev/null
+++ b/app/assets/stylesheets/framework/secondary-navigation-elements.scss
@@ -0,0 +1,337 @@
+// 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;
+
+  li {
+    display: flex;
+
+    a {
+      font-size: 14px;
+      line-height: 28px;
+      color: $gl-text-color-secondary;
+      border-bottom: 2px solid transparent;
+      white-space: nowrap;
+
+      &:hover,
+      &:active,
+      &:focus {
+        text-decoration: none;
+        color: $black;
+
+        .badge {
+          color: $black;
+        }
+      }
+    }
+
+    &.active a {
+      color: $black;
+      font-weight: $gl-font-weight-bold;
+
+      .badge {
+        color: $black;
+      }
+    }
+  }
+}
+
+.top-area {
+  @include clearfix;
+  border-bottom: 1px solid $border-color;
+
+  .nav-text {
+    padding-top: 16px;
+    padding-bottom: 11px;
+    display: inline-block;
+    line-height: 28px;
+    white-space: normal;
+
+    /* Small devices (phones, tablets, 768px and lower) */
+    @media (max-width: $screen-xs-max) {
+      width: 100%;
+    }
+  }
+
+  .nav-links {
+    margin-bottom: 0;
+    border-bottom: none;
+    float: left;
+
+    &.wide {
+      width: 100%;
+      display: block;
+    }
+
+    &.scrolling-tabs {
+      float: left;
+    }
+
+    li a {
+      padding: 16px 15px 11px;
+    }
+
+    /* Small devices (phones, tablets, 768px and lower) */
+    @media (max-width: $screen-xs-max) {
+      width: 100%;
+    }
+  }
+
+  .nav-controls {
+    @include new-style-dropdown;
+
+    display: inline-block;
+    float: right;
+    text-align: right;
+    padding: 11px 0;
+    margin-bottom: 0;
+
+    > .btn,
+    > .btn-container,
+    > .dropdown,
+    > input,
+    > form {
+      margin-right: $gl-padding-top;
+      display: inline-block;
+      vertical-align: top;
+
+      &:last-child {
+        margin-right: 0;
+        float: right;
+      }
+    }
+
+    > .btn-grouped {
+      float: none;
+    }
+
+    .icon-label {
+      display: none;
+    }
+
+    input {
+      display: inline-block;
+      position: relative;
+
+      /* Medium devices (desktops, 992px and up) */
+      @media (min-width: $screen-md-min) { width: 200px; }
+
+      /* Large devices (large desktops, 1200px and up) */
+      @media (min-width: $screen-lg-min) { width: 250px; }
+
+      &.input-short {
+        /* Medium devices (desktops, 992px and up) */
+        @media (min-width: $screen-md-min) { width: 170px; }
+
+        /* Large devices (large desktops, 1200px and up) */
+        @media (min-width: $screen-lg-min) { width: 210px; }
+      }
+    }
+
+    @media (max-width: $screen-xs-max) {
+      padding-bottom: 0;
+      width: 100%;
+
+      .btn,
+      form,
+      .dropdown,
+      .dropdown-toggle,
+      .dropdown-menu-toggle,
+      .form-control {
+        margin: 0 0 10px;
+        display: block;
+        width: 100%;
+      }
+
+      form {
+        display: block;
+        height: auto;
+        margin-bottom: 14px;
+
+        input {
+          width: 100%;
+          margin: 0 0 10px;
+        }
+      }
+
+      .input-short {
+        width: 100%;
+      }
+
+      .icon-label {
+        display: inline-block;
+      }
+
+      // Applies on /dashboard/issues
+      .project-item-select-holder {
+        margin: 0;
+      }
+    }
+  }
+
+  &.adjust {
+    .nav-text,
+    .nav-controls {
+      width: auto;
+
+      @media (max-width: $screen-xs-max) {
+        width: 100%;
+      }
+    }
+  }
+
+  &.multi-line {
+    .nav-text {
+      line-height: 20px;
+    }
+
+    .nav-controls {
+      padding: 17px 0;
+    }
+  }
+
+  pre {
+    width: 100%;
+  }
+
+  @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-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%;
+      }
+    }
+  }
+}
+
+.scrolling-tabs-container {
+  position: relative;
+
+  .merge-request-tabs-container & {
+    overflow: hidden;
+  }
+
+  .nav-links {
+    @include scrolling-links();
+  }
+
+  .fade-right {
+    @include fade(left, $gray-light);
+    right: -5px;
+
+    .fa {
+      right: -7px;
+    }
+  }
+
+  .fade-left {
+    @include fade(right, $gray-light);
+    left: -5px;
+    text-align: center;
+
+    .fa {
+      left: -7px;
+    }
+  }
+}
+
+.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;
+    }
+  }
+
+  .fade-right,
+  .fade-left {
+    top: 16px;
+    bottom: auto;
+  }
+
+  &.is-smaller {
+    .fade-right,
+    .fade-left {
+      top: 11px;
+    }
+  }
+}
+
+.nav-block {
+  position: relative;
+
+  .nav-links {
+    @include scrolling-links();
+
+    .fade-right {
+      @include fade(left, $white-light);
+      right: -5px;
+
+      .fa {
+        right: -7px;
+      }
+    }
+
+    .fade-left {
+      @include fade(right, $white-light);
+      left: -5px;
+
+      .fa {
+        left: -7px;
+      }
+    }
+  }
+
+  &.activities {
+    border-bottom: 1px solid $border-color;
+
+    .nav-links {
+      border-bottom: none;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 3305a482a0d..ca61f7a30c3 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/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;