Merge pull request #325 from nikolaswise/master

document thirdnac

CHANGELOG.md

@@ -14,6 +14,7 @@
 
 ### Added
 - `fade-in` class for fading in elements on page load
+- Responsive Javascript for the third nav.
 
 ## 0.11.3
 

docs/source/patterns/_third-nav.md

@@ -1 +1,5 @@
 Tertiary navigation is necessary only when the information architecture of the site requires three levels of hierarchy within pages. A breadcrumb component can also be used in this pattern.
+
+The third nav has a set of of Javascript bindings responsible for responsive behavior when the content of the third nav is greater than it's container.
+
+Only a single third nav can be on a page.

docs/source/patterns/sample-code/_third-nav.html

@@ -1,11 +1,13 @@
 <header class="third-nav">
+  <a href="#" class="icon-ui-left js-overflow-left nav-overflow-left"></a>
   <div class="grid-container">
-    <nav class="column-24" role="navigation" aria-labelledby="thirdnav">
+    <nav class="column-24 third-nav-container js-nav-overflow" role="navigation" aria-labelledby="thirdnav">
       <a class="third-nav-link is-active" href="#">Alpine</a>
       <a class="third-nav-link" href="#">Coastal</a>
       <a class="third-nav-link" href="#">Wetland</a>
       <a class="third-nav-link" href="#">Grassland</a>
       <a class="third-nav-link" href="#">Praire</a>
     </nav>
   </div>
-</header>
+  <a href="#" class="icon-ui-right js-overflow-right nav-overflow-right"></a>
+</header>

lib/sass/calcite-web/patterns/_third-nav.scss

@@ -25,7 +25,7 @@
     padding: 11px 6px;
     top: 0;
     margin: 0;
-    background-color: rgba(255,255,255,.8);
+    background-color: rgba($white, .8);
     display: none;
     &:before {
       padding-right: 0;