zurb-foundation 4.2.3 → 4.3.0

data/docs/components/pagination.html.erb

@@ -145,24 +145,26 @@ $base-style: true
         <h5>Default SCSS Variables</h5>
 
 <%= code_example '
+$include-html-nav-classes: $include-html-classes;
+
 /* We use these to control the pagination container */
-$pagination-height: emCalc(24px);
-$pagination-margin: emCalc(-5px);
+$pagination-height: emCalc(24);
+$pagination-margin: emCalc(-5);
 
 /* We use these to set the list-item properties */
 $pagination-li-float: $default-float;
-$pagination-li-height: emCalc(24px);
+$pagination-li-height: emCalc(24);
 $pagination-li-font-color: #222;
-$pagination-li-font-size: emCalc(14px);
-$pagination-li-margin: emCalc(5px);
+$pagination-li-font-size: emCalc(14);
+$pagination-li-margin: emCalc(5);
 
 /* We use these for the pagination anchor links */
-$pagination-link-pad: emCalc(1px) emCalc(7px) emCalc(1px);
+$pagination-link-pad: emCalc(1, 7, 1);
 $pagination-link-font-color: #999;
 $pagination-link-active-bg: darken(#fff, 10%);
 
 /* We use these for disabled anchor links */
-$pagination-link-unavailable-cursor: $cursor-default-value;
+$pagination-link-unavailable-cursor: default;
 $pagination-link-unavailable-font-color: #999;
 $pagination-link-unavailable-bg-active: transparent;
 
@@ -170,7 +172,7 @@ $pagination-link-unavailable-bg-active: transparent;
 $pagination-link-current-background: $primary-color;
 $pagination-link-current-font-color: #fff;
 $pagination-link-current-font-weight: bold;
-$pagination-link-current-cursor: $cursor-default-value;
+$pagination-link-current-cursor: default;
 $pagination-link-current-active-bg: $primary-color;', :css %>
 
         <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_variables.scss</strong>.</p>

data/docs/components/panels.html.erb

@@ -97,6 +97,8 @@ $adjust: true
         <h5>Default SCSS Variables</h5>
 
 <%= code_example '
+$include-html-panel-classes: $include-html-classes;
+
 /* We use these to control the background and border styles */
 $panel-bg: darken(#fff, 5%);
 $panel-border-style: solid;
@@ -107,12 +109,14 @@ $panel-function-factor: 10%;
 $panel-border-color: darken($panel-bg, $panel-function-factor);
 
 /* We use these to set default inner padding and bottom margin */
-$panel-margin-bottom: emCalc(20px);
-$panel-padding: emCalc(20px);
+$panel-margin-bottom: emCalc(20);
+$panel-padding: emCalc(20);
 
 /* We use these to set default font colors */
 $panel-font-color: #333;
-$panel-font-color-alt: #fff;', :css %>
+$panel-font-color-alt: #fff;
+
+$panel-header-adjust: true;', :css %>
 
         <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_variables.scss</strong>.</p>
 

data/docs/components/pricing-tables.html.erb

@@ -100,50 +100,52 @@
         <h5>Default SCSS Variables</h5>
 
 <%= code_example '
+$include-html-pricing-classes: $include-html-classes;
+
 /* We use this to control the border color */
 $price-table-border: solid 1px #ddd;
 
 /* We use this to control the bottom margin of the pricing table */
-$price-table-margin-bottom: emCalc(20px);
+$price-table-margin-bottom: emCalc(20);
 
 /* We use these to control the title styles */
 $price-title-bg: #ddd;
-$price-title-padding: emCalc(15px) emCalc(20px);
+$price-title-padding: emCalc(15, 20);
 $price-title-align: center;
 $price-title-color: #333;
 $price-title-weight: bold;
-$price-title-size: emCalc(16px);
+$price-title-size: emCalc(16);
 
 /* We use these to control the price styles */
 $price-money-bg: #eee;
-$price-money-padding: emCalc(15px) emCalc(20px);
+$price-money-padding: emCalc(15, 20);
 $price-money-align: center;
 $price-money-color: #333;
 $price-money-weight: normal;
-$price-money-size: emCalc(20px);
+$price-money-size: emCalc(20);
 
 /* We use these to control the description styles */
 $price-bg: #fff;
 $price-desc-color: #777;
-$price-desc-padding: emCalc(15px);
+$price-desc-padding: emCalc(15);
 $price-desc-align: center;
-$price-desc-font-size: emCalc(12px);
+$price-desc-font-size: emCalc(12);
 $price-desc-weight: normal;
 $price-desc-line-height: 1.4;
 $price-desc-bottom-border: dotted 1px #ddd;
 
 /* We use these to control the list item styles */
 $price-item-color: #333;
-$price-item-padding: emCalc(15px);
+$price-item-padding: emCalc(15);
 $price-item-align: center;
-$price-item-font-size: emCalc(14px);
+$price-item-font-size: emCalc(14);
 $price-item-weight: normal;
 $price-item-bottom-border: dotted 1px #ddd;
 
 /* We use these to control the CTA area styles */
 $price-cta-bg: #f5f5f5;
 $price-cta-align: center;
-$price-cta-padding: emCalc(20px) emCalc(20px) 0;', :css %>
+$price-cta-padding: emCalc(20, 20, 0);', :css %>
 
         <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_variables.scss</strong>.</p>
 

data/docs/components/progress-bars.html.erb

@@ -92,8 +92,11 @@ $bg: $primary-color
         <h5>Default SCSS Variables</h5>
 
 <%= code_example '
+$include-html-media-classes: $include-html-classes;
+
 /* We use this to se the prog bar height */
-$progress-bar-height: emCalc(25px);
+$progress-bar-height: emCalc(25);
+$progress-bar-color: transparent;
 
 /* We use these to control the border styles */
 $progress-bar-border-color: darken(#fff, 20%);
@@ -102,11 +105,10 @@ $progress-bar-border-style: solid;
 $progress-bar-border-radius: $global-radius;
 
 /* We use these to control the margin & padding */
-$progress-bar-pad: emCalc(2px);
-$progress-bar-margin-bottom: emCalc(10px);
+$progress-bar-pad: emCalc(2);
+$progress-bar-margin-bottom: emCalc(10);
 
 /* We use these to set the meter colors */
-$progress-bar-color: transparent;
 $progress-meter-color: $primary-color;
 $progress-meter-secondary-color: $secondary-color;
 $progress-meter-success-color: $success-color;

data/docs/components/reveal.html.erb

@@ -181,21 +181,23 @@ $color: $reveal-close-color;
         <h5>Default SCSS Variables</h5>
 
     <%= code_example '
+$include-html-reveal-classes: $include-html-classes;
+
 /* We use these to control the style of the reveal overlay. */
 $reveal-overlay-bg: rgba(#000, .45);
 $reveal-overlay-bg-old: #000;
 
 /* We use these to control the style of the modal itself. */
 $reveal-modal-bg: #fff;
-$reveal-position-top: emCalc(15px);
+$reveal-position-top: 50px;
 $reveal-default-width: 80%;
-$reveal-modal-padding: emCalc(20px);
+$reveal-modal-padding: emCalc(20);
 $reveal-box-shadow: 0 0 10px rgba(#000,.4);
 
 /* We use these to style the reveal close button */
-$reveal-close-font-size: emCalc(22px);
-$reveal-close-top: emCalc(8px);
-$reveal-close-side: emCalc(11px);
+$reveal-close-font-size: emCalc(22);
+$reveal-close-top: emCalc(8);
+$reveal-close-side: emCalc(11);
 $reveal-close-color: #aaa;
 $reveal-close-weight: bold;
 
@@ -256,26 +258,3 @@ $close-reveal-modal-class: "close-reveal-modal";', :css %>
   </div>
 </div>
 
-<div id="firstModal" class="reveal-modal">
-  <h2>This is a modal.</h2>
-  <p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
-  <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
-  <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal…</a></p>
-  <a class="close-reveal-modal">&#215;</a>
-</div>
-
-<div id="secondModal" class="reveal-modal">
-  <h2>This is a second modal.</h2>
-  <p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
-  <a class="close-reveal-modal">&#215;</a>
-</div>
-
-<div id="videoModal" class="reveal-modal large">
-  <h2>This modal has video</h2>
-  <div class="flex-video">
-    <iframe width="800" height="315" src="http://www.youtube.com/embed/IkOQw96cfyE" frameborder="0" allowfullscreen></iframe>
-  </div>
-
-  <a class="close-reveal-modal">&#215;</a>
-</div>
-

data/docs/components/section.html.erb

@@ -64,8 +64,8 @@
                 </div>
               </section>
             </div>
-            <div class="section-container auto" data-section data-options="deep_linking: true; one_up: false">
-              <section>
+            <div class="section-container auto" data-section data-options="deep_linking: true;">
+              <section class="active">
                 <p class="title" data-section-title><a href="#panel1">Section 1</a></p>
                 <div class="content" data-slug="panel1" data-section-content>
                   <p>Section 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
@@ -74,14 +74,14 @@
               <section>
                 <p class="title" data-section-title><a href="#panel2">Section 2</a></p>
                 <div class="content" data-slug="panel2" data-section-content>
-                  <div class="section-container auto" data-section data-options="deep_linking: true; one_up: false">
-                    <section>
+                  <div class="section-container auto" data-section data-options="deep_linking: true;">
+                    <section data-section-region>
                       <p class="title" data-section-title><a href="#panel2nested1">Section 1</a></p>
                       <div class="content" data-slug="nested1" data-section-content>
                         <p>Section 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                       </div>
                     </section>
-                    <section>
+                    <section data-section-region>
                       <p class="title" data-section-title><a href="#panel2nested2">Section 2</a></p>
                       <div class="content" data-slug="nested2" data-section-content>
                         <p>Section 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
@@ -962,19 +962,20 @@ $section-border-color: $section-border-color', :css %>
 
         <h5>Default SCSS Variables</h5>
 <%= code_example '
-$include-html-section-classes: $include-html-classes !default;
+$include-html-section-classes: $include-html-classes;
 
 /* We use these to set padding and hover factor */
-$section-title-padding: emCalc(15px);
-$section-content-padding: emCalc(15px);
+$section-title-padding: emCalc(15);
+$section-content-padding: emCalc(15);
 $section-function-factor: 10%;
 
 /* These style the titles */
 $section-title-color: #333;
+$section-title-color-active: #333;
 $section-title-bg: #efefef;
 $section-title-bg-active: darken($section-title-bg, $section-function-factor);
 $section-title-bg-active-tabs: #fff;
-$section-title-bg-hover: darken($section-title-bg, $section-function-factor/2);
+$section-title-bg-hover: darken($section-title-bg, $section-function-factor / 2);
 
 /* Want to control border size, here ya go! */
 $section-border-size: 1px;
@@ -982,16 +983,17 @@ $section-border-style: solid;
 $section-border-color: #ccc;
 
 /* Font controls */
-$section-font-size: emCalc(14px);
+$section-font-size: emCalc(14);
 
 /* Control the color of the background and some size options */
 $section-content-bg: #fff;
-$section-vertical-nav-min-width: emCalc(200px);
-$section-vertical-tabs-title-width: emCalc(200px);
-$section-bottom-margin: emCalc(20px);
+$section-vertical-nav-min-width: emCalc(200);
+$section-vertical-tabs-title-width: emCalc(200);
+$section-bottom-margin: emCalc(20);
 
 $title-selector: ".title";
 $content-selector: ".content";
+$active-region-selector: ".active";
 ', :css %>
 
     <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>.</p>

data/docs/components/side-nav.html.erb

@@ -94,18 +94,20 @@ $link-color: $side-nav-link-color
         <h5>Default SCSS Variables</h5>
 
 <%= code_example '
+$include-html-nav-classes: $include-html-classes;
+
 /* We use this to control padding. */
-$side-nav-padding: emCalc(14px) 0;
+$side-nav-padding: emCalc(14, 0);
 
 /* We use these to control list styles. */
 $side-nav-list-type: none;
 $side-nav-list-position: inside;
-$side-nav-list-margin: 0 0 emCalc(7px) 0;
+$side-nav-list-margin: emCalc(0, 0, 7, 0);
 
 /* We use these to control link styles. */
 $side-nav-link-color: $primary-color;
 $side-nav-link-color-active: lighten(#000, 30%);
-$side-nav-font-size: emCalc(14px);
+$side-nav-font-size: emCalc(14);
 $side-nav-font-weight: bold;
 
 /* We use these to control border styles */

data/docs/components/split-buttons.html.erb

@@ -15,9 +15,32 @@
       <div class="large-12 columns">
 
         <a href="#" class="tiny button split">Split Button <span data-dropdown="drop"></span></a><br>
+        <ul id="drop" class="f-dropdown" data-dropdown-content>
+          <li><a href="#">This is a link</a></li>
+          <li><a href="#">This is another</a></li>
+          <li><a href="#">Yet another</a></li>
+        </ul>
+        
         <a href="#" class="small secondary radius button split">Split Button <span data-dropdown="drop2"></span></a><br>
+        <ul id="drop2" class="f-dropdown" data-dropdown-content>
+          <li><a href="#">This is a link</a></li>
+          <li><a href="#">This is another</a></li>
+          <li><a href="#">Yet another</a></li>
+        </ul>
+
         <a href="#" class="button alert round split">Split Button <span data-dropdown="drop3"></span></a><br>
+        <ul id="drop3" class="f-dropdown" data-dropdown-content>
+          <li><a href="#">This is a link</a></li>
+          <li><a href="#">This is another</a></li>
+          <li><a href="#">Yet another</a></li>
+        </ul>
+    
         <a href="#" class="large success button split">Split Button <span data-dropdown="drop4"></span></a><br>
+        <ul id="drop4" class="f-dropdown" data-dropdown-content>
+          <li><a href="#">This is a link</a></li>
+          <li><a href="#">This is another</a></li>
+          <li><a href="#">Yet another</a></li>
+        </ul>
 
         <hr>
 
@@ -77,6 +100,11 @@
 ', :css %>
 
         <a href="" class="split button">Default Split Button<span data-dropdown="drop5"></span></a>
+        <ul id="drop5" class="f-dropdown" data-dropdown-content>
+          <li><a href="#">This is a link</a></li>
+          <li><a href="#">This is another</a></li>
+          <li><a href="#">Yet another</a></li>
+        </ul>
 
         <p>There are also <strong>four options</strong> you can customize on the fly when writing this mixin. These control things like: padding size, pip color, border color and base styles. Setting any of these options to <strong>false</strong> will not include the styles.</p>
 
@@ -103,6 +131,8 @@ $base-style: true
 
         <h5>Default SCSS Variables</h5>
 <%= code_example '
+$include-html-button-classes: $include-html-classes;
+
 /* We use these to control different shared styles for Split Buttons */
 $split-button-function-factor: 15%;
 $split-button-pip-color: #fff;
@@ -114,28 +144,28 @@ $split-button-padding-tny: $button-tny * 9;
 $split-button-span-width-tny: $button-tny * 6.5;
 $split-button-pip-size-tny: $button-tny;
 $split-button-pip-top-tny: $button-tny * 2;
-$split-button-pip-left-tny: emCalc(-5px);
+$split-button-pip-default-float-tny: emCalc(-5);
 
 /* We use these to control small split buttons */
 $split-button-padding-sml: $button-sml * 7;
 $split-button-span-width-sml: $button-sml * 5;
 $split-button-pip-size-sml: $button-sml;
 $split-button-pip-top-sml: $button-sml * 1.5;
-$split-button-pip-left-sml: emCalc(-9px);
+$split-button-pip-default-float-sml: emCalc(-9);
 
 /* We use these to control medium split buttons */
 $split-button-padding-med: $button-med * 6.4;
 $split-button-span-width-med: $button-med * 4;
-$split-button-pip-size-med: $button-med - emCalc(3px);
+$split-button-pip-size-med: $button-med - emCalc(3);
 $split-button-pip-top-med: $button-med * 1.5;
-$split-button-pip-left-med: emCalc(-9px);
+$split-button-pip-default-float-med: emCalc(-9);
 
 /* We use these to control large split buttons */
 $split-button-padding-lrg: $button-lrg * 6;
 $split-button-span-width-lrg: $button-lrg * 3.75;
-$split-button-pip-size-lrg: $button-lrg - emCalc(6px);
-$split-button-pip-top-lrg: $button-lrg + emCalc(5px);
-$split-button-pip-left-lrg: emCalc(-9px);
+$split-button-pip-size-lrg: $button-lrg - emCalc(6);
+$split-button-pip-top-lrg: $button-lrg + emCalc(5);
+$split-button-pip-default-float-lrg: emCalc(-9);
 ', :css %>
 
         <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_variables.scss</strong>.</p>
@@ -155,7 +185,6 @@ $split-button-pip-left-lrg: emCalc(-9px);
 
 <%= code_example '
 <a href="#" data-dropdown="drop1" class="button dropdown">Dropdown Button <span data-dropdown="drop1"></span></a><br>
-
 <ul id="drop1" class="f-dropdown" data-dropdown-content>
   <li><a href="#">This is a link</a></li>
   <li><a href="#">This is another</a></li>
@@ -163,7 +192,12 @@ $split-button-pip-left-lrg: emCalc(-9px);
 </ul>
 ', :html %>
 
-        <a href="#" class="button split">Dropdown Button <span data-dropdown="drop1"></span></a><br>
+        <a href="#" class="button split">Dropdown Button <span data-dropdown="drop6"></span></a><br>
+        <ul id="drop6" class="f-dropdown" data-dropdown-content>
+          <li><a href="#">This is a link</a></li>
+          <li><a href="#">This is another</a></li>
+          <li><a href="#">Yet another</a></li>
+        </ul>
 
         <p>You'll notice that <code>data-dropdown="drop1"</code> and <code>id="drop1"</code> have similar values. This is what tells the dropdown plugin where to look to find the position to attach the dropdown element to.</p>
 
@@ -171,11 +205,10 @@ $split-button-pip-left-lrg: emCalc(-9px);
 
         <p>Dropdown button options can only be passed in during initialization at this time.</p>
 
-<%= code_example "
-{
+<%= code_example "{ 
   // specify the class used for active sections
   activeClass: 'open'
-}", :json %>
+}", :js %>
 
       </div>
     </div>
@@ -186,35 +219,4 @@ $split-button-pip-left-lrg: emCalc(-9px);
   </div>
 </div>
 
-    <ul id="drop" class="f-dropdown" data-dropdown-content>
-      <li><a href="#">This is a link</a></li>
-      <li><a href="#">This is another</a></li>
-      <li><a href="#">Yet another</a></li>
-    </ul>
-    <ul id="drop1" class="f-dropdown" data-dropdown-content>
-      <li><a href="#">This is a link</a></li>
-      <li><a href="#">This is another</a></li>
-      <li><a href="#">Yet another</a></li>
-    </ul>
-    <ul id="drop2" class="f-dropdown" data-dropdown-content>
-      <li><a href="#">This is a link</a></li>
-      <li><a href="#">This is another</a></li>
-      <li><a href="#">Yet another</a></li>
-    </ul>
-    <ul id="drop3" class="f-dropdown" data-dropdown-content>
-      <li><a href="#">This is a link</a></li>
-      <li><a href="#">This is another</a></li>
-      <li><a href="#">Yet another</a></li>
-    </ul>
-    <ul id="drop4" class="f-dropdown" data-dropdown-content>
-      <li><a href="#">This is a link</a></li>
-      <li><a href="#">This is another</a></li>
-      <li><a href="#">Yet another</a></li>
-    </ul>
-    <ul id="drop5" class="f-dropdown" data-dropdown-content>
-      <li><a href="#">This is a link</a></li>
-      <li><a href="#">This is another</a></li>
-      <li><a href="#">Yet another</a></li>
-    </ul>
-