1 files changed, 63 insertions, 12 deletions

diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 401c2d0f6ee..e6d808717f3 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -138,7 +138,6 @@
 
   .nav-links {
     display: inline-block;
-    width: 50%;
     margin-bottom: 0;
     border-bottom: none;
 
@@ -147,6 +146,10 @@
       display: block;
     }
 
+    &.scrolling-tabs {
+      float: left;
+    }
+
     li a {
       padding: 16px 15px 11px;
     }
@@ -283,10 +286,7 @@
 }
 
 .layout-nav {
-  position: fixed;
-  top: $header-height;
   width: 100%;
-  z-index: 11;
   background: $gray-light;
   border-bottom: 1px solid $border-color;
   transition: padding $sidebar-transition-duration;
@@ -294,16 +294,18 @@
 
   .container-fluid {
     position: relative;
+
+    .nav-control {
+      @media (max-width: $screen-sm-max) {
+        margin-right: 2px;
+      }
+    }
   }
 
   .controls {
     float: right;
     padding: 7px 0 0;
 
-    @media (max-width: $screen-sm-max) {
-      display: none;
-    }
-
     i {
       color: $layout-link-gray;
     }
@@ -361,6 +363,7 @@
   .fade-left {
     @include fade(right, $gray-light);
     left: -5px;
+    text-align: center;
 
     .fa {
       left: -7px;
@@ -416,15 +419,22 @@
 }
 
 .page-with-layout-nav {
-  margin-top: $header-height + 2;
-
   .right-sidebar {
-    top: ($header-height * 2) + 2;
+    top: ($header-height + 1) * 2;
+  }
+
+  &.page-with-sub-nav {
+    .right-sidebar {
+      top: ($header-height + 1) * 3;
+
+      &.affix {
+        top: 0;
+      }
+    }
   }
 }
 
 .activities {
-
   .nav-block {
     border-bottom: 1px solid $border-color;
 
@@ -470,3 +480,44 @@
     }
   }
 }
+
+.inner-page-scroll-tabs {
+  position: relative;
+
+  .nav-links {
+    padding-bottom: 1px;
+  }
+
+  .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;
+    }
+  }
+}