Added navbar 'up' flyouts

diff --git a/marketing/docs/forms.php b/marketing/docs/forms.php
index fba271386e1b8fed4d68466bc8d5836827078494..edec7d8a225bdd3199fdaef61044d6b63cfa33fc 100644 (file)
--- a/marketing/docs/forms.php
+++ b/marketing/docs/forms.php
@@ -47,7 +47,7 @@
           <form>
             <div class="row">
               <div class="two mobile-one columns">
-                <label class="right">Address Name:</label>
+                <label class="right inline">Address Name:</label>
               </div>
               <div class="ten mobile-three columns">
                 <input type="text" placeholder="e.g. Home" class="eight" />
@@ -55,7 +55,7 @@
             </div>
             <div class="row">
               <div class="two mobile-one columns">
-                <label class="right">City:</label>
+                <label class="right inline">City:</label>
               </div>
               <div class="ten mobile-three columns">
                 <input type="text" class="eight" />
@@ -63,7 +63,7 @@
             </div>
             <div class="row">
               <div class="two mobile-one columns">
-                <label class="right">ZIP:</label>
+                <label class="right inline">ZIP:</label>
               </div>
               <div class="ten mobile-three columns">
                 <input type="text" class="three" />

diff --git a/marketing/docs/navigation.php b/marketing/docs/navigation.php
index 41545e1192b7a858325dcf993e1053bab5b8c53d..159ad0f2b0683d0ca2cee8e52a7a85059c01a77a 100644 (file)
--- a/marketing/docs/navigation.php
+++ b/marketing/docs/navigation.php
@@ -74,7 +74,8 @@
           <script src="https://gist.github.com/2980479.js?file=f3-navbar-content.html"></script>
 
           <h5>Flyout Direction</h5>
-          <p>Flyouts are pinned left by default, but you can pin them right in instances where they may run off the page or over other content by adding <code>.right</code> to the <code>div.flyout</code> element.
+          <p>Flyouts are pinned left by default, but you can pin them right in instances where they may run off the page or over other content by adding <code>.right</code> to the <code>div.flyout</code> element.</p>
+          <p>Flyouts also go down by default, but if your nav bar is on the bottom you can have the flyouts expand up by adding a class of <code>.up</code> to the <code>.flyout</code> element.</p>
 
           <script src="https://gist.github.com/2980485.js?file=f3-navbar-right.html"></script>
 

diff --git a/marketing/stylesheets/docs/presentation.css b/marketing/stylesheets/docs/presentation.css
index 0d95fa70845ff7005f30f6405a2451eb5e5ef752..bc7d99e757cb958689e22ef3540d987c76fdccfd 100644 (file)
--- a/marketing/stylesheets/docs/presentation.css
+++ b/marketing/stylesheets/docs/presentation.css
@@ -673,6 +673,7 @@ ul.tabs-content.contained.vertical > li { border-width: 1px 1px 1px 1px; }
 .flyout.small { width: 166.667px; }
 .flyout.large { width: 437.5px; }
 .flyout.right { left: auto; right: -2px; }
+.flyout.up { top: auto; bottom: 39px; }
 
 ul.flyout, .nav-bar li ul { padding: 0; list-style: none; }
 ul.flyout li, .nav-bar li ul li { border-left: solid 3px #CCC; }

diff --git a/marketing/stylesheets/index.css b/marketing/stylesheets/index.css
index c82b5ccba65b9601700d2fc910b11f2d1d41ec30..c0d19f5e7ca8633549dae210030f26e595f93bea 100644 (file)
--- a/marketing/stylesheets/index.css
+++ b/marketing/stylesheets/index.css
@@ -673,6 +673,7 @@ ul.tabs-content.contained.vertical > li { border-width: 1px 1px 1px 1px; }
 .flyout.small { width: 166.667px; }
 .flyout.large { width: 437.5px; }
 .flyout.right { left: auto; right: -2px; }
+.flyout.up { top: auto; bottom: 39px; }
 
 ul.flyout, .nav-bar li ul { padding: 0; list-style: none; }
 ul.flyout li, .nav-bar li ul li { border-left: solid 3px #CCC; }

diff --git a/marketing/stylesheets/presentation.css b/marketing/stylesheets/presentation.css
index f64316d15a0ab640c6a218fe86514121778119fa..a55018147765c902fe6c17af676ef6e12dc209f2 100644 (file)
--- a/marketing/stylesheets/presentation.css
+++ b/marketing/stylesheets/presentation.css
@@ -673,6 +673,7 @@ ul.tabs-content.contained.vertical > li { border-width: 1px 1px 1px 1px; }
 .flyout.small { width: 166.667px; }
 .flyout.large { width: 437.5px; }
 .flyout.right { left: auto; right: -2px; }
+.flyout.up { top: auto; bottom: 39px; }
 
 ul.flyout, .nav-bar li ul { padding: 0; list-style: none; }
 ul.flyout li, .nav-bar li ul li { border-left: solid 3px #CCC; }

diff --git a/stylesheets/foundation/navbar.scss b/stylesheets/foundation/navbar.scss
index 2568511a86caf14964483987a7f18af1acf64fae..fb61ad5be357568903ba7a92f0f7cc6748eeefed 100644 (file)
--- a/stylesheets/foundation/navbar.scss
+++ b/stylesheets/foundation/navbar.scss
@@ -56,7 +56,9 @@
 
     &.small { width: $navFlyoutBaseWidth / 1.5; }
     &.large { width: $navFlyoutBaseWidth * 1.75; }
+    
     &.right { left: auto; right: -2px; }
+    &.up { top: auto; bottom: $navBarHeight - 1; }
 
   }