Add navbar-tabs component

docs/_includes/subnav-columns.html

@@ -1,6 +1,6 @@
 <nav class="navbar has-shadow">
   <div class="container">
-    <div class="navbar-brand">
+    <div class="navbar-tabs">
       <a class="navbar-item is-tab {% if page.doc-subtab == 'basics' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/basics/">
         Basics
       </a>

docs/_includes/subnav-components.html

@@ -1,6 +1,6 @@
 <nav class="navbar has-shadow">
   <div class="container">
-    <div class="navbar-brand">
+    <div class="navbar-tabs">
       <a class="navbar-item is-tab {% if page.doc-subtab == 'breadcrumb' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/breadcrumb/">
         Breadcrumb
       </a>

docs/_includes/subnav-elements.html

@@ -1,6 +1,6 @@
 <nav class="navbar has-shadow">
   <div class="container">
-    <div class="navbar-brand">
+    <div class="navbar-tabs">
       <a class="navbar-item is-tab {% if page.doc-subtab == 'box' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/box/">
         Box
       </a>

docs/_includes/subnav-form.html

@@ -1,6 +1,6 @@
 <nav class="navbar has-shadow">
   <div class="container">
-    <div class="navbar-brand">
+    <div class="navbar-tabs">
       <a class="navbar-item is-tab {% if page.doc-subtab == 'general' %}is-active{% endif %}" href="{{ site.url }}/documentation/form/general/">
         General
       </a>

docs/_includes/subnav-grid.html

@@ -1,6 +1,6 @@
 <nav class="navbar has-shadow">
   <div class="container">
-    <div class="navbar-brand">
+    <div class="navbar-tabs">
       <a class="navbar-item is-tab {% if page.doc-subtab == 'columns' %}is-active{% endif %}" href="{{ site.url }}/documentation/grid/columns/">
         Columns
       </a>

docs/_includes/subnav-layout.html

@@ -1,6 +1,6 @@
 <nav class="navbar has-shadow">
   <div class="container">
-    <div class="navbar-brand">
+    <div class="navbar-tabs">
       <a class="navbar-item is-tab {% if page.doc-subtab == 'container' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/container/">
         Container
       </a>

docs/_includes/subnav-modifiers.html

@@ -1,6 +1,6 @@
 <nav class="navbar has-shadow">
   <div class="container">
-    <div class="navbar-brand">
+    <div class="navbar-tabs">
       <a class="navbar-item is-tab {% if page.doc-subtab == 'syntax' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/syntax/">
         Syntax
       </a>

docs/_includes/subnav-overview.html

@@ -1,6 +1,6 @@
 <nav class="navbar has-shadow">
   <div class="container">
-    <div class="navbar-brand">
+    <div class="navbar-tabs">
       <a class="navbar-item is-tab {% if page.doc-subtab == 'start' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/start/">
         Start
       </a>

sass/components/navbar.sass

@@ -45,13 +45,16 @@ $navbar-divider-background-color: $border !default
   &.has-shadow
     box-shadow: 0 2px 3px rgba($black, 0.1)
 
-.navbar-brand
+.navbar-brand,
-  +overflow-touch
+.navbar-tabs
   align-items: stretch
   display: flex
   flex-shrink: 0
-  max-width: 100vw
   min-height: $navbar-height
+
+.navbar-tabs
+  +overflow-touch
+  max-width: 100vw
   overflow-x: auto
   overflow-y: hidden
 
@@ -124,7 +127,8 @@ a.navbar-item,
 +touch
   .navbar > .container
     display: block
-  .navbar-brand
+  .navbar-brand,
+  .navbar-tabs
     .navbar-item
       align-items: center
       display: flex
@@ -235,8 +239,10 @@ a.navbar-item,
   .navbar-divider
     display: block
   .container > .navbar
-    margin-left: -1rem
+    .navbar-brand
-    margin-right: -1rem
+      margin-left: -1rem
+    .navbar-menu
+      margin-right: -1rem
   // Hover/Active states
   a.navbar-item,
   .navbar-link

sass/elements/container.sass

@@ -1,9 +1,7 @@
-$container-offset: 60px !default
-
 .container
   margin: 0 auto
   position: relative
-  +from($desktop + $container-offset)
+  +from($desktop)
     max-width: $desktop - (2 * $gap)
     width: $desktop - (2 * $gap)
     &.is-fluid
@@ -11,17 +9,17 @@ $container-offset: 60px !default
       margin-right: $gap
       max-width: none
       width: auto
-  +until($widescreen + $container-offset)
+  +until($widescreen)
     &.is-widescreen
       max-width: $widescreen - (2 * $gap)
       width: auto
-  +until($fullhd + $container-offset)
+  +until($fullhd)
     &.is-fullhd
       max-width: $fullhd - (2 * $gap)
       width: auto
-  +from($widescreen + $container-offset)
+  +from($widescreen)
     max-width: $widescreen - (2 * $gap)
     width: $widescreen - (2 * $gap)
-  +from($fullhd + $container-offset)
+  +from($fullhd)
     max-width: $fullhd - (2 * $gap)
     width: $fullhd - (2 * $gap)

sass/utilities/initial-variables.sass

@@ -44,8 +44,8 @@ $weight-bold: 700 !default
 
 // Responsiveness
 
-// The container gap, which acts as the offset for breakpoints
+// The container horizontal gap, which acts as the offset for breakpoints
-$gap: 24px !default
+$gap: 32px !default
 // 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
 $tablet: 769px !default
 // 960px container + 3rem