zurb-foundation 4.2.1 → 4.2.2

data/docs/components/grid.html.erb

@@ -347,7 +347,7 @@ $float: left
 
         <h5>Default SCSS Variables</h5>
 <%= code_example '
-$row-width:     emCalc(1000px) !default;
+$row-width: emCalc(1000px) !default;
 $column-gutter: emCalc(30px) !default;
 $total-columns: 12 !default;
 ', :css %>

data/docs/components/inline-lists.html.erb

@@ -65,15 +65,15 @@
 
 <%= code_example '
 /* We use this to control the margins and padding of the inline list. */
-$inline-list-margin-bottom:    emCalc(17px) emCalc(-22px );
-$inline-list-margin:           0 0;
-$inline-list-padding:          0;
+$inline-list-margin-bottom: emCalc(17px) emCalc(-22px );
+$inline-list-margin: 0 0;
+$inline-list-padding: 0;
 
 /* We use this to control the overflow of the inline list. */
-$inline-list-overflow:         hidden;
+$inline-list-overflow: hidden;
 
 /* We use this to control the list items */
-$inline-list-display:          block;
+$inline-list-display: block;
 
 /* We use this to control any elements within list items */
 $inline-list-children-display: block;', :css %>

data/docs/components/joyride.html.erb

@@ -1,6 +1,6 @@
 
-<% 
-  @side_nav = "js" 
+<%
+  @side_nav = "js"
   @joyride = true
 %>
 <div class="row">
@@ -66,33 +66,33 @@
 
 <%= code_example '
 /* Controlling default Joyride styles */
-$joyride-tip-bg:              rgb(0,0,0);
-$joyride-tip-default-width:   300px;
-$joyride-tip-padding:         emCalc(18px) emCalc(20px) emCalc(24px);
-$joyride-tip-border:          solid 1px #555;
-$joyride-tip-radius:          4px;
+$joyride-tip-bg: rgb(0,0,0);
+$joyride-tip-default-width: 300px;
+$joyride-tip-padding: emCalc(18px) emCalc(20px) emCalc(24px);
+$joyride-tip-border: solid 1px #555;
+$joyride-tip-radius: 4px;
 $joyride-tip-position-offset: 22px;
 
 /* Here, we are setting the tip dont styles */
-$joyride-tip-font-color:      #fff;
-$joyride-tip-font-size:       emCalc(14px);
-$joyride-tip-header-weight:   bold;
+$joyride-tip-font-color: #fff;
+$joyride-tip-font-size: emCalc(14px);
+$joyride-tip-header-weight: bold;
 
 /* This changes the nub size */
-$joyride-tip-nub-size:        14px;
+$joyride-tip-nub-size: 14px;
 
 /* This adjusts the styles for the timer when its enabled */
-$joyride-tip-timer-width:     50px;
-$joyride-tip-timer-height:    3px;
-$joyride-tip-timer-color:     #666;
+$joyride-tip-timer-width: 50px;
+$joyride-tip-timer-height: 3px;
+$joyride-tip-timer-color: #666;
 
 /* This changes up the styles for the close button */
-$joyride-tip-close-color:     #777;
-$joyride-tip-close-size:      30px;
-$joyride-tip-close-weight:    normal;
+$joyride-tip-close-color: #777;
+$joyride-tip-close-size: 30px;
+$joyride-tip-close-weight: normal;
 
 /* When Joyride is filling the screen, we use this style for the bg */
-$joyride-screenfill:          rgba(0,0,0,0.5);
+$joyride-screenfill: rgba(0,0,0,0.5);
 ', :css %>
 
         <hr>

data/docs/components/keystrokes.html.erb

@@ -49,21 +49,21 @@ $bg: $keystroke-bg', :css %>
 
 <%= code_example '
 /* We use these to control text styles. */
-$keystroke-font:            "Consolas", "Menlo", "Courier", monospace;
-$keystroke-font-size:       emCalc(15px);
-$keystroke-font-color:      #222;
-$keystroke-font-color-alt:  #fff;
+$keystroke-font: "Consolas", "Menlo", "Courier", monospace;
+$keystroke-font-size: emCalc(15px);
+$keystroke-font-color: #222;
+$keystroke-font-color-alt: #fff;
 $keystroke-function-factor: 7%;
 
 /* We use this to control keystroke padding. */
-$keystroke-padding:         emCalc(2px) emCalc(4px) emCalc(0px);
+$keystroke-padding: emCalc(2px) emCalc(4px) emCalc(0px);
 
 /* We use these to control background and border styles. */
-$keystroke-bg:              darken(#fff, $keystroke-function-factor);
-$keystroke-border-style:    solid;
-$keystroke-border-width:    1px;
-$keystroke-border-color:    darken($keystroke-bg, $keystroke-function-factor);
-$keystroke-radius:          $global-radius;', :css %>
+$keystroke-bg: darken(#fff, $keystroke-function-factor);
+$keystroke-border-style: solid;
+$keystroke-border-width: 1px;
+$keystroke-border-color: darken($keystroke-bg, $keystroke-function-factor);
+$keystroke-radius: $global-radius;', :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/kitchen-sink.html.erb

@@ -673,7 +673,7 @@
 
                             <ul class="dropdown">
                               <li><label>Level Four</label></li>
-                              <li><a href="#">Sub-item 1</a></li>
+                              <li><a href="http://zurb.com">Sub-item 1</a></li>
                             </ul>
                           </li>
                           <li><a href="#">Sub-item 2</a></li>

data/docs/components/labels.html.erb

@@ -81,8 +81,8 @@ $radius: false
 
 <%= code_example '
 /* We use these to style the labels */
-$label-padding:     emCalc(3px) emCalc(6px) emCalc(4px);
-$label-radius:      $global-radius;
+$label-padding: emCalc(3px) emCalc(6px) emCalc(4px);
+$label-radius: $global-radius;
 
 /* We use these to style the label text */
 $label-font-sizing: emCalc(14px);

data/docs/components/pagination.html.erb

@@ -145,32 +145,32 @@ $base-style: true
 
 <%= code_example '
 /* We use these to control the pagination container */
-$pagination-height:                      emCalc(24px);
-$pagination-margin:                      emCalc(-5px);
+$pagination-height: emCalc(24px);
+$pagination-margin: emCalc(-5px);
 
 /* We use these to set the list-item properties */
-$pagination-li-float:                    $default-float;
-$pagination-li-height:                   emCalc(24px);
-$pagination-li-font-color:               #222;
-$pagination-li-font-size:                emCalc(14px);
-$pagination-li-margin:                   emCalc(5px);
+$pagination-li-float: $default-float;
+$pagination-li-height: emCalc(24px);
+$pagination-li-font-color: #222;
+$pagination-li-font-size: emCalc(14px);
+$pagination-li-margin: emCalc(5px);
 
 /* We use these for the pagination anchor links */
-$pagination-link-pad:                    emCalc(1px) emCalc(7px) emCalc(1px);
-$pagination-link-font-color:             #999;
-$pagination-link-active-bg:              darken(#fff, 10%);
+$pagination-link-pad: emCalc(1px) emCalc(7px) emCalc(1px);
+$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: $cursor-default-value;
 $pagination-link-unavailable-font-color: #999;
-$pagination-link-unavailable-bg-active:  transparent;
+$pagination-link-unavailable-bg-active: transparent;
 
 /* We use these for currently selected anchor links */
-$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-active-bg:      $primary-color;', :css %>
+$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-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

@@ -75,16 +75,19 @@
           Panel content goes here...
         </div>
 
-        <p>You also have <strong>two options</strong> available to customize the panel within the mixin. These control the background color (which also effect border and font color) and the interior padding of the panel itself.</p>
+        <p>You also have <strong>three options</strong> available to customize the panel within the mixin. These control the background color (which also effect border and font color) and the interior padding of the panel itself.</p>
 
 <%= code_example '
-.your-class-name { @include panel($bg, $padding); }
+.your-class-name { @include panel($bg, $padding, $adjust); }
 
 /* This controls the background color, border color and type color based on brightness of the bg. */
 $bg: $secondary-color
 
 /* This controls the interior padding */
 $padding: $panel-padding
+
+/* Control whether panel mixin adjusts header styles */
+$adjust: true
 ', :css %>
 
         <div class="panel-custom">
@@ -95,21 +98,21 @@ $padding: $panel-padding
 
 <%= code_example '
 /* We use these to control the background and border styles */
-$panel-bg:              darken(#fff, 5%);
-$panel-border-style:    solid;
-$panel-border-size:     1px;
+$panel-bg: darken(#fff, 5%);
+$panel-border-style: solid;
+$panel-border-size: 1px;
 
 /* We use this % to control how much we darken things on hover */
 $panel-function-factor: 10%;
-$panel-border-color:    darken($panel-bg, $panel-function-factor);
+$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(20px);
+$panel-padding: emCalc(20px);
 
 /* We use these to set default font colors */
-$panel-font-color:      #333;
-$panel-font-color-alt:  #fff;', :css %>
+$panel-font-color: #333;
+$panel-font-color-alt: #fff;', :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

@@ -101,49 +101,49 @@
 
 <%= code_example '
 /* We use this to control the border color */
-$price-table-border:        solid 1px #ddd;
+$price-table-border: solid 1px #ddd;
 
 /* We use this to control the bottom margin of the pricing table */
 $price-table-margin-bottom: emCalc(20px);
 
 /* We use these to control the title styles */
-$price-title-bg:            #ddd;
-$price-title-padding:       emCalc(15px) emCalc(20px);
-$price-title-align:         center;
-$price-title-color:         #333;
-$price-title-weight:        bold;
-$price-title-size:          emCalc(16px);
+$price-title-bg: #ddd;
+$price-title-padding: emCalc(15px) emCalc(20px);
+$price-title-align: center;
+$price-title-color: #333;
+$price-title-weight: bold;
+$price-title-size: emCalc(16px);
 
 /* We use these to control the price styles */
-$price-money-bg:            #eee;
-$price-money-padding:       emCalc(15px) emCalc(20px);
-$price-money-align:         center;
-$price-money-color:         #333;
-$price-money-weight:        normal;
-$price-money-size:          emCalc(20px);
+$price-money-bg: #eee;
+$price-money-padding: emCalc(15px) emCalc(20px);
+$price-money-align: center;
+$price-money-color: #333;
+$price-money-weight: normal;
+$price-money-size: emCalc(20px);
 
 /* We use these to control the description styles */
-$price-bg:                  #fff;
-$price-desc-color:          #777;
-$price-desc-padding:        emCalc(15px);
-$price-desc-align:          center;
-$price-desc-font-size:      emCalc(12px);
-$price-desc-weight:         normal;
-$price-desc-line-height:    1.4;
-$price-desc-bottom-border:  dotted 1px #ddd;
+$price-bg: #fff;
+$price-desc-color: #777;
+$price-desc-padding: emCalc(15px);
+$price-desc-align: center;
+$price-desc-font-size: emCalc(12px);
+$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-align:          center;
-$price-item-font-size:      emCalc(14px);
-$price-item-weight:         normal;
-$price-item-bottom-border:  dotted 1px #ddd;
+$price-item-color: #333;
+$price-item-padding: emCalc(15px);
+$price-item-align: center;
+$price-item-font-size: emCalc(14px);
+$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-bg: #f5f5f5;
+$price-cta-align: center;
+$price-cta-padding: emCalc(20px) emCalc(20px) 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/reveal.html.erb

@@ -182,27 +182,27 @@ $color: $reveal-close-color;
 
     <%= code_example '
 /* We use these to control the style of the reveal overlay. */
-$reveal-overlay-bg:      rgba(#000, .45);
-$reveal-overlay-bg-old:  #000;
+$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-default-width:   80%;
-$reveal-modal-padding:   emCalc(20px);
-$reveal-box-shadow:      0 0 10px rgba(#000,.4);
+$reveal-modal-bg: #fff;
+$reveal-position-top: emCalc(15px);
+$reveal-default-width: 80%;
+$reveal-modal-padding: emCalc(20px);
+$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-color:     #aaa;
-$reveal-close-weight:    bold;
+$reveal-close-top: emCalc(8px);
+$reveal-close-side: emCalc(11px);
+$reveal-close-color: #aaa;
+$reveal-close-weight: bold;
 
 /* We use these to control the modal border */
-$reveal-border-style:    solid;
-$reveal-border-width:    1px;
-$reveal-border-color:    #666;
+$reveal-border-style: solid;
+$reveal-border-width: 1px;
+$reveal-border-color: #666;
 
 $reveal-modal-class: "reveal-modal";
 $close-reveal-modal-class: "close-reveal-modal";', :css %>

data/docs/components/section.html.erb

@@ -965,30 +965,30 @@ $section-border-color: $section-border-color', :css %>
 $include-html-section-classes: $include-html-classes !default;
 
 /* We use these to set padding and hover factor */
-$section-title-padding:             emCalc(15px);
-$section-content-padding:           emCalc(15px);
-$section-function-factor:           10%;
+$section-title-padding: emCalc(15px);
+$section-content-padding: emCalc(15px);
+$section-function-factor: 10%;
 
 /* These style the titles */
-$section-title-color:               #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-color: #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);
 
 /* Want to control border size, here ya go! */
-$section-border-size:               1px;
-$section-border-style:              solid;
-$section-border-color:              #ccc;
+$section-border-size: 1px;
+$section-border-style: solid;
+$section-border-color: #ccc;
 
 /* Font controls */
-$section-font-size:                 emCalc(14px);
+$section-font-size: emCalc(14px);
 
 /* Control the color of the background and some size options */
-$section-content-bg:                #fff;
-$section-vertical-nav-min-width:    emCalc(200px);
+$section-content-bg: #fff;
+$section-vertical-nav-min-width: emCalc(200px);
 $section-vertical-tabs-title-width: emCalc(200px);
-$section-bottom-margin:             emCalc(20px);
+$section-bottom-margin: emCalc(20px);
 
 $title-selector: ".title";
 $content-selector: ".content";

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

@@ -95,23 +95,23 @@ $link-color: $side-nav-link-color
 
 <%= code_example '
 /* We use this to control padding. */
-$side-nav-padding:           emCalc(14px) 0;
+$side-nav-padding: emCalc(14px) 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-type: none;
+$side-nav-list-position: inside;
+$side-nav-list-margin: 0 0 emCalc(7px) 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-weight:       bold;
+$side-nav-font-size: emCalc(14px);
+$side-nav-font-weight: bold;
 
 /* We use these to control border styles */
-$side-nav-divider-size:      1px;
-$side-nav-divider-style:     solid;
-$side-nav-divider-color:     darken(#fff, 10%);', :css %>
+$side-nav-divider-size: 1px;
+$side-nav-divider-style: solid;
+$side-nav-divider-color: darken(#fff, 10%);', :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>