Adds tab overflow css.

Author: AMJones

composer.json

@@ -9,7 +9,7 @@
         "layout"
     ],
     "homepage": "https://www.github.com/strapless/layout",
-    "version": "1.0",
+    "version": "1.1",
     "authors": [
         {
             "name": "Aaron M Jones",

scss/_header.scss

@@ -203,4 +203,30 @@ header {
 
   @include header-navbar-theme(light, $navbar-light-bg, $navbar-light-color, $navbar-light-active-color, $navbar-light-hover-color, $navbar-light-disabled-color);
   @include header-navbar-theme(dark, $navbar-dark-bg, $navbar-dark-color, $navbar-dark-active-color, $navbar-dark-hover-color, $navbar-dark-disabled-color);
+}
+
+.nav-tabs[data-overflow] {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  flex: 1 0 auto;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  // Hide Scrollbar in Edge
+  -ms-overflow-style: none !important;
+  // Hide Scrollbar in Chrome, Safari
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  &::after {
+    display: inline-block;
+    content: ' ';
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    right: 0;
+    top: 50%;
+    margin-top: -4px;
+  }
 }

scss/_layout-mixins.scss

@@ -2,7 +2,7 @@
 
 // region //////////////////////////////////////////////// Header Mixins
 
-@mixin header-navbar-theme($theme, $bg, $color, $active, $hover, $disabled) {
+@mixin header-navbar-theme($theme, $bg, $color, $active, $hover, $disabled, $indicator) {
   &.header-#{$theme} {
     background-color: $bg;
     .navbar-brand {
@@ -59,6 +59,10 @@
         color: $disabled;
       }
     }
+
+    .nav-tabs[data-overflow]::after {
+      background: transparent inline-svg($indicator) center center / 8px 8px no-repeat;
+    }
   }
 }
 

scss/_layout-variables.scss

@@ -10,6 +10,9 @@ $header-navbar-padding-y: $navbar-padding-y !default;
 $header-navbar-height:    if(variable-exists(navbar-height),$navbar-height, 64px) !default;
 $navbar-dropdown-offset:  2px !default;
 
+$navbar-light-overflow-indicator: '<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"><path fill="#{$navbar-light-color}" d="M0 0v8l4-4-4-4z" transform="translate(2)" /></svg>' !default;
+$navbar-dark-overflow-indicator:  '<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"><path fill="#{$navbar-dark-color}" d="M0 0v8l4-4-4-4z" transform="translate(2)" /></svg>' !default;
+
 // endregion ///////////////////////////////////////////// End Header Variables
 
 // region //////////////////////////////////////////////// Footer Variables