1 files changed, 68 insertions, 17 deletions

diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 674d3bb45aa..e71bf04aec7 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -24,10 +24,10 @@
 }
 
 @mixin scrolling-links() {
-  white-space: nowrap;
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
+  display: flex;
 
   &::-webkit-scrollbar {
     display: none;
@@ -35,6 +35,7 @@
 }
 
 .nav-links {
+  display: flex;
   padding: 0;
   margin: 0;
   list-style: none;
@@ -42,17 +43,16 @@
   border-bottom: 1px solid $border-color;
 
   li {
-    display: inline-block;
+    display: flex;
 
     a {
-      display: inline-block;
       padding: $gl-btn-padding;
       padding-bottom: 11px;
-      margin-bottom: -1px;
       font-size: 14px;
       line-height: 28px;
       color: $gl-text-color-secondary;
       border-bottom: 2px solid transparent;
+      white-space: nowrap;
 
       &:hover,
       &:active,
@@ -85,10 +85,10 @@
     .container-fluid {
       background-color: $gray-normal;
       margin-bottom: 0;
+      display: flex;
     }
 
     li {
-
       &.active a {
         border-bottom: none;
         color: $link-underline-blue;
@@ -110,7 +110,7 @@
 
 .top-area {
   @include clearfix;
-  border-bottom: 1px solid $white-normal;
+  border-bottom: 1px solid $border-color;
 
   .nav-text {
     padding-top: 16px;
@@ -137,16 +137,19 @@
   }
 
   .nav-links {
-    display: inline-block;
-    width: 50%;
     margin-bottom: 0;
     border-bottom: none;
+    float: left;
 
     &.wide {
       width: 100%;
       display: block;
     }
 
+    &.scrolling-tabs {
+      float: left;
+    }
+
     li a {
       padding: 16px 15px 11px;
     }
@@ -288,13 +291,14 @@
   border-bottom: 1px solid $border-color;
   transition: padding $sidebar-transition-duration;
   text-align: center;
+  margin-top: $header-height;
 
   .container-fluid {
     position: relative;
 
     .nav-control {
       @media (max-width: $screen-sm-max) {
-        margin-right: 75px;
+        margin-right: 2px;
       }
     }
   }
@@ -321,7 +325,7 @@
       position: absolute;
       top: 7px;
       right: 15px;
-      z-index: 2;
+      z-index: 300;
 
       li.active {
         font-weight: bold;
@@ -333,6 +337,10 @@
     border-bottom: none;
     height: 51px;
 
+    @media (min-width: $screen-sm-min) {
+      justify-content: center;
+    }
+
     li {
       a {
         padding-top: 10px;
@@ -344,6 +352,10 @@
 .scrolling-tabs-container {
   position: relative;
 
+  .merge-request-tabs-container & {
+    overflow: hidden;
+  }
+
   .nav-links {
     @include scrolling-links();
   }
@@ -417,20 +429,22 @@
 
 .page-with-layout-nav {
   .right-sidebar {
-    top: ($header-height * 2) + 2;
+    top: ($header-height + 1) * 2;
   }
 
-  .build-sidebar {
-    top: ($header-height * 3) + 3;
+  &.page-with-sub-nav {
+    .right-sidebar {
+      top: ($header-height + 1) * 3;
 
-    &.affix {
-      top: 0;
+      &.affix {
+        top: $header-height;
+      }
     }
   }
 }
 
-.activities {
-  .nav-block {
+.nav-block {
+  &.activities {
     border-bottom: 1px solid $border-color;
 
     .nav-links {
@@ -475,3 +489,40 @@
     }
   }
 }
+
+.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;
+    }
+  }
+}