Move fade divs out of every scrolling container; remove unneeded scrolling CSS

app/assets/stylesheets/framework/nav.scss

@@ -304,41 +304,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: -5px;
-
-      .fa {
-        right: -7px;
-      }
-    }
-
-    .fade-left {
-      @include fade(right, rgba(250, 250, 250, 0.4), $background-color);
-      left: -5px;
-
-      .fa {
-        left: -7px;
-      }
-    }
-
     li {
 
       a {
@@ -374,16 +342,6 @@
       }
     }
   }
-
-  .nav-control {
-
-    .fade-right {
-
-      @media (max-width: $screen-xs-min) {
-        right: -5px;
-      }
-    }
-  }
 }
 
 .scrolling-tabs-container {
@@ -435,16 +393,6 @@
         left: -7px;
       }
     }
-
-    &.event-filter {
-      .fade-right {
-        visibility: hidden;
-
-        @media (max-width: $screen-xs-max) {
-          visibility: visible;
-        }
-      }
-    }
   }
 }
 

app/views/layouts/nav/_admin.html.haml

-%div{ class: nav_control_class }
+.scrolling-tabs-container{ class: nav_control_class }
   = render 'layouts/nav/admin_settings'
-
-  %ul.nav-links.scrolling-tabs
-    %li.fade-left
+  .fade-left
     = icon('arrow-left')
+  .fade-right
+    = icon('arrow-right')
+  %ul.nav-links.scrolling-tabs
     = nav_link(controller: %w(dashboard admin projects users groups builds runners), html_options: {class: 'home'}) do
       = link_to admin_root_path, title: 'Overview', class: 'shortcuts-tree' do
         %span
@@ -37,5 +38,3 @@
         = link_to admin_spam_logs_path, title: "Spam Logs" do
           %span
             Spam Logs
-    %li.fade-right
-      = icon('arrow-right')

app/views/layouts/nav/_group.html.haml

-%div{ class: nav_control_class }
+.scrolling-tabs-container{ class: nav_control_class }
   = render 'layouts/nav/group_settings'
-
-  %ul.nav-links.scrolling-tabs
-    %li.fade-left
+  .fade-left
     = icon('arrow-left')
+  .fade-right
+    = icon('arrow-right')
+  %ul.nav-links.scrolling-tabs
     = nav_link(path: 'groups#show', html_options: {class: 'home'}) do
       = link_to group_path(@group), title: 'Home' do
         %span
@@ -32,5 +33,3 @@
       = link_to group_group_members_path(@group), title: 'Members' do
         %span
           Members
-    %li.fade-right
-      = icon('arrow-right')

app/views/layouts/nav/_profile.html.haml

-%ul.nav-links.scrolling-tabs
-  %li.fade-left
+.scrolling-tabs-container
+  .fade-left
     = icon('arrow-left')
+  .fade-right
+    = icon('arrow-right')
+  %ul.nav-links.scrolling-tabs
     = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
       = link_to profile_path, title: 'Profile Settings' do
         %span
@@ -44,5 +47,3 @@
       = link_to audit_log_profile_path, title: 'Audit Log' do
         %span
           Audit Log
-  %li.fade-right
-    = icon('arrow-right')

app/views/projects/commits/_head.html.haml

 .scrolling-tabs-container
+  .fade-left
+    = icon('arrow-left')
+  .fade-right
+    = icon('arrow-right')
   .nav-links.sub-nav.scrolling-tabs
     %ul{ class: (container_class) }
-      %li.fade-left
-        = icon('arrow-left')
       = nav_link(controller: %w(tree blob blame edit_tree new_tree find_file)) do
         = link_to project_files_path(@project) do
           Files
@@ -26,5 +28,3 @@
       = nav_link(controller: [:tags, :releases]) do
         = link_to namespace_project_tags_path(@project.namespace, @project) do
           Tags
-      %li.fade-right
-        = icon('arrow-right')