1 files changed, 46 insertions, 65 deletions

diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 0281b06d3ba..6e5f216c894 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -1,6 +1,6 @@
 @mixin fade($gradient-direction, $rgba, $gradient-color) {
-  visibility: visible;
-  opacity: 1;
+  visibility: hidden;
+  opacity: 0;
   z-index: 2;
   position: absolute;
   bottom: 12px;
@@ -13,17 +13,16 @@
   background: -moz-linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
   background: linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
 
-  &.end-scroll {
-    visibility: hidden;
-    opacity: 0;
+  &.scrolling {
+    visibility: visible;
+    opacity: 1;
     transition-duration: .3s;
   }
 
   .fa {
     position: relative;
-    top: 3px;
-    font-size: 13px;
-    color: $btn-placeholder-gray;
+    top: 5px;
+    font-size: 18px;
   }
 }
 
@@ -32,6 +31,7 @@
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
+
   &::-webkit-scrollbar {
     display: none;
   }
@@ -272,7 +272,7 @@
     float: right;
     padding: 7px 0 0;
 
-    @media (max-width: $screen-xs-max) {
+    @media (max-width: $screen-sm-max) {
       display: none;
     }
 
@@ -303,41 +303,9 @@
   }
 
   .nav-links {
-    @include scrolling-links();
     border-bottom: none;
     height: 51px;
 
-    svg {
-      position: relative;
-      top: 2px;
-      margin-right: 2px;
-      height: 15px;
-      width: auto;
-
-      path,
-      polygon {
-        fill: $layout-link-gray;
-      }
-    }
-
-    .fade-right {
-      @include fade(left, rgba(250, 250, 250, 0.4), $background-color);
-      right: 0;
-
-      .fa {
-        right: -7px;
-      }
-    }
-
-    .fade-left {
-      @include fade(right, rgba(250, 250, 250, 0.4), $background-color);
-      left: 0;
-
-      .fa {
-        left: -7px;
-      }
-    }
-
     li {
 
       a {
@@ -373,18 +341,6 @@
       }
     }
   }
-
-  .nav-control {
-
-    .fade-right {
-      @media (min-width: $screen-xs-max) {
-        right: 68px;
-      }
-      @media (max-width: $screen-xs-min) {
-        right: 0;
-      }
-    }
-  }
 }
 
 .scrolling-tabs-container {
@@ -392,15 +348,42 @@
 
   .nav-links {
     @include scrolling-links();
+  }
+
+  .fade-right {
+    @include fade(left, rgba(255, 255, 255, 0.4), $background-color);
+    right: -5px;
+
+    .fa {
+      right: -7px;
+    }
+  }
+
+  .fade-left {
+    @include fade(right, rgba(255, 255, 255, 0.4), $background-color);
+    left: -5px;
+
+    .fa {
+      left: -7px;
+    }
+  }
+
+  &.sub-nav-scroll {
 
     .fade-right {
-      @include fade(left, rgba(255, 255, 255, 0.4), $background-color);
       right: 0;
+
+      .fa {
+        right: -23px;
+      }
     }
 
     .fade-left {
-      @include fade(right, rgba(255, 255, 255, 0.4), $background-color);
       left: 0;
+
+      .fa {
+        left: 10px;
+      }
     }
   }
 }
@@ -413,21 +396,19 @@
 
     .fade-right {
       @include fade(left, rgba(255, 255, 255, 0.4), $white-light);
-      right: 0;
+      right: -5px;
+
+      .fa {
+        right: -7px;
+      }
     }
 
     .fade-left {
       @include fade(right, rgba(255, 255, 255, 0.4), $white-light);
-      left: 0;
-    }
-
-    &.event-filter {
-      .fade-right {
-        visibility: hidden;
+      left: -5px;
 
-        @media (max-width: $screen-xs-max) {
-          visibility: visible;
-        }
+      .fa {
+        left: -7px;
       }
     }
   }