Add horizontal scrolling to all sub-navs on mobile viewports

CHANGELOG

@@ -11,6 +11,7 @@ v 8.12.0 (unreleased)
   - Add Sentry logging to API calls
   - Automatically expand hidden discussions when accessed by a permalink !5585 (Mike Greiling)
   - Fix groups sort dropdown alignment (ClemMakesApps)
+  - Add horizontal scrolling to all sub-navs on mobile viewports (ClemMakesApps)
   - Added tests for diff notes
   - Add delimiter to project stars and forks count (ClemMakesApps)
   - Fix badge count alignment (ClemMakesApps)

app/assets/stylesheets/framework/nav.scss

-@mixin fade($gradient-direction, $rgba, $gradient-color) {
+@mixin fade($gradient-direction, $gradient-color) {
   visibility: hidden;
   opacity: 0;
   z-index: 2;
@@ -8,10 +8,10 @@
   height: 30px;
   transition-duration: .3s;
   -webkit-transform: translateZ(0);
-  background: -webkit-linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
-  background: -o-linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
-  background: -moz-linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
-  background: linear-gradient($gradient-direction, $rgba, $gradient-color 45%);
+  background: -webkit-linear-gradient($gradient-direction, rgba($gradient-color, 0.4), $gradient-color 45%);
+  background: -o-linear-gradient($gradient-direction, rgba($gradient-color, 0.4), $gradient-color 45%);
+  background: -moz-linear-gradient($gradient-direction, rgba($gradient-color, 0.4), $gradient-color 45%);
+  background: linear-gradient($gradient-direction, rgba($gradient-color, 0.4), $gradient-color 45%);
 
   &.scrolling {
     visibility: visible;
@@ -356,7 +356,7 @@
   }
 
   .fade-right {
-    @include fade(left, rgba(255, 255, 255, 0.4), $background-color);
+    @include fade(left, $background-color);
     right: -5px;
 
     .fa {
@@ -365,7 +365,7 @@
   }
 
   .fade-left {
-    @include fade(right, rgba(255, 255, 255, 0.4), $background-color);
+    @include fade(right, $background-color);
     left: -5px;
 
     .fa {
@@ -376,6 +376,7 @@
   &.sub-nav-scroll {
 
     .fade-right {
+      @include fade(left, $dark-background-color);
       right: 0;
 
       .fa {
@@ -384,6 +385,7 @@
     }
 
     .fade-left {
+      @include fade(right, $dark-background-color);
       left: 0;
 
       .fa {
@@ -400,7 +402,7 @@
     @include scrolling-links();
 
     .fade-right {
-      @include fade(left, rgba(255, 255, 255, 0.4), $white-light);
+      @include fade(left, $white-light);
       right: -5px;
 
       .fa {
@@ -409,7 +411,7 @@
     }
 
     .fade-left {
-      @include fade(right, rgba(255, 255, 255, 0.4), $white-light);
+      @include fade(right, $white-light);
       left: -5px;
 
       .fa {

app/views/admin/background_jobs/_head.html.haml

-.nav-links.sub-nav
+.scrolling-tabs-container.sub-nav-scroll
+  = render 'shared/nav_scroll'
+  .nav-links.sub-nav.scrolling-tabs
     %ul{ class: (container_class) }
       = nav_link(controller: :system_info) do
         = link_to admin_system_info_path, title: 'System Info' do

app/views/admin/dashboard/_head.html.haml

-.nav-links.sub-nav
+.scrolling-tabs-container.sub-nav-scroll
+  = render 'shared/nav_scroll'
+  .nav-links.sub-nav.scrolling-tabs
     %ul{ class: (container_class) }
       = nav_link(controller: :dashboard, html_options: {class: 'home'}) do
         = link_to admin_root_path, title: 'Overview' do

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

 .scrolling-tabs-container.sub-nav-scroll
-  .fade-left
-    = icon('angle-left')
-  .fade-right
-    = icon('angle-right')
+  = render 'shared/nav_scroll'
   .nav-links.sub-nav.scrolling-tabs
     %ul{ class: (container_class) }
       = nav_link(controller: %w(tree blob blame edit_tree new_tree find_file)) do

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

-.nav-links.sub-nav
+.scrolling-tabs-container.sub-nav-scroll
+  = render 'shared/nav_scroll'
+  .nav-links.sub-nav.scrolling-tabs
     %ul{ class: (container_class) }
 
       - content_for :page_specific_javascripts do

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

-.nav-links.sub-nav
+.scrolling-tabs-container.sub-nav-scroll
+  = render 'shared/nav_scroll'
+  .nav-links.sub-nav.scrolling-tabs
     %ul{ class: (container_class) }
       - if project_nav_tab?(:issues) && !current_controller?(:merge_requests)
         = nav_link(controller: :issues) do

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

-.nav-links.sub-nav
+.scrolling-tabs-container.sub-nav-scroll
+  = render 'shared/nav_scroll'
+  .nav-links.sub-nav.scrolling-tabs
     %ul{ class: (container_class) }
       - if project_nav_tab? :pipelines
         = nav_link(controller: :pipelines) do

app/views/projects/wikis/_nav.html.haml

-.nav-links.sub-nav
+.scrolling-tabs-container.sub-nav-scroll
+  = render 'shared/nav_scroll'
+  .nav-links.sub-nav.scrolling-tabs
     %ul{ class: (container_class) }
       = nav_link(html_options: {class: params[:id] == 'home' ? 'active' : '' }) do
         = link_to 'Home', namespace_project_wiki_path(@project.namespace, @project, :home)

app/views/shared/_nav_scroll.html.haml

+.fade-left
+  = icon('angle-left')
+.fade-right
+  = icon('angle-right')
\ No newline at end of file