zurb-foundation 4.3.1 → 4.3.2

data/scss/foundation/components/_pagination.scss

@@ -4,18 +4,18 @@
 $include-html-nav-classes: $include-html-classes !default;
 
 // We use these to control the pagination container
-$pagination-height: emCalc(24) !default;
-$pagination-margin: emCalc(-5) !default;
+$pagination-height: em-calc(24) !default;
+$pagination-margin: em-calc(-5) !default;
 
 // We use these to set the list-item properties
 $pagination-li-float: $default-float;
-$pagination-li-height: emCalc(24) !default;
+$pagination-li-height: em-calc(24) !default;
 $pagination-li-font-color: #222 !default;
-$pagination-li-font-size: emCalc(14) !default;
-$pagination-li-margin: emCalc(5) !default;
+$pagination-li-font-size: em-calc(14) !default;
+$pagination-li-margin: em-calc(5) !default;
 
 // We use these for the pagination anchor links
-$pagination-link-pad: emCalc(1, 7, 1) !default;
+$pagination-link-pad: em-calc(1 7 1) !default;
 $pagination-link-font-color: #999 !default;
 $pagination-link-active-bg: darken(#fff, 10%) !default;
 

data/scss/foundation/components/_panels.scss

@@ -13,15 +13,15 @@ $panel-function-factor: 10% !default;
 $panel-border-color: darken($panel-bg, $panel-function-factor) !default;
 
 // We use these to set default inner padding and bottom margin
-$panel-margin-bottom: emCalc(20) !default;
-$panel-padding: emCalc(20) !default;
+$panel-margin-bottom: em-calc(20) !default;
+$panel-padding: em-calc(20) !default;
 
 // We use these to set default font colors
 $panel-font-color: #333 !default;
 $panel-font-color-alt: #fff !default;
 
 $panel-header-adjust: true !default;
-
+$callout-panel-link-color: #fff !default;
 //
 // Panel Mixins
 //
@@ -52,7 +52,7 @@ $panel-header-adjust: true !default;
 
       // reset header line-heights for panels
       h1,h2,h3,h4,h5,h6 {
-        line-height: 1; margin-bottom: emCalc(20) / 2;
+        line-height: 1; margin-bottom: em-calc(20) / 2;
         &.subheader { line-height: 1.4; }
       }
     }
@@ -68,6 +68,9 @@ $panel-header-adjust: true !default;
     &.callout {
       @include panel($primary-color);
       @include inset-shadow($active:false);
+      a {
+        color: $callout-panel-link-color;
+      }
     }
 
     &.radius {

data/scss/foundation/components/_pricing-tables.scss

@@ -7,46 +7,46 @@ $include-html-pricing-classes: $include-html-classes !default;
 $price-table-border: solid 1px #ddd !default;
 
 // We use this to control the bottom margin of the pricing table
-$price-table-margin-bottom: emCalc(20) !default;
+$price-table-margin-bottom: em-calc(20) !default;
 
 // We use these to control the title styles
 $price-title-bg: #ddd !default;
-$price-title-padding: emCalc(15, 20) !default;
+$price-title-padding: em-calc(15 20) !default;
 $price-title-align: center !default;
 $price-title-color: #333 !default;
 $price-title-weight: bold !default;
-$price-title-size: emCalc(16) !default;
+$price-title-size: em-calc(16) !default;
 
 // We use these to control the price styles
 $price-money-bg: #eee !default;
-$price-money-padding: emCalc(15, 20) !default;
+$price-money-padding: em-calc(15 20) !default;
 $price-money-align: center !default;
 $price-money-color: #333 !default;
 $price-money-weight: normal !default;
-$price-money-size: emCalc(20) !default;
+$price-money-size: em-calc(20) !default;
 
 // We use these to control the description styles
 $price-bg: #fff !default;
 $price-desc-color: #777 !default;
-$price-desc-padding: emCalc(15) !default;
+$price-desc-padding: em-calc(15) !default;
 $price-desc-align: center !default;
-$price-desc-font-size: emCalc(12) !default;
+$price-desc-font-size: em-calc(12) !default;
 $price-desc-weight: normal !default;
 $price-desc-line-height: 1.4 !default;
 $price-desc-bottom-border: dotted 1px #ddd !default;
 
 // We use these to control the list item styles
 $price-item-color: #333 !default;
-$price-item-padding: emCalc(15) !default;
+$price-item-padding: em-calc(15) !default;
 $price-item-align: center !default;
-$price-item-font-size: emCalc(14) !default;
+$price-item-font-size: em-calc(14) !default;
 $price-item-weight: normal !default;
 $price-item-bottom-border: dotted 1px #ddd !default;
 
 // We use these to control the CTA area styles
 $price-cta-bg: #f5f5f5 !default;
 $price-cta-align: center !default;
-$price-cta-padding: emCalc(20, 20, 0) !default;
+$price-cta-padding: em-calc(20 20 0) !default;
 
 //
 // Pricing Table Mixins

data/scss/foundation/components/_progress-bars.scss

@@ -4,7 +4,7 @@
 $include-html-media-classes: $include-html-classes !default;
 
 // We use this to se the prog bar height
-$progress-bar-height: emCalc(25) !default;
+$progress-bar-height: em-calc(25) !default;
 $progress-bar-color: transparent !default;
 
 // We use these to control the border styles
@@ -14,8 +14,8 @@ $progress-bar-border-style: solid !default;
 $progress-bar-border-radius: $global-radius !default;
 
 // We use these to control the margin & padding
-$progress-bar-pad: emCalc(2) !default;
-$progress-bar-margin-bottom: emCalc(10) !default;
+$progress-bar-pad: em-calc(2) !default;
+$progress-bar-margin-bottom: em-calc(10) !default;
 
 // We use these to set the meter colors
 $progress-meter-color: $primary-color !default;

data/scss/foundation/components/_reveal.scss

@@ -12,13 +12,13 @@ $reveal-overlay-bg-old: #000 !default;
 $reveal-modal-bg: #fff !default;
 $reveal-position-top: 50px !default;
 $reveal-default-width: 80% !default;
-$reveal-modal-padding: emCalc(20) !default;
+$reveal-modal-padding: em-calc(20) !default;
 $reveal-box-shadow: 0 0 10px rgba(#000,.4) !default;
 
 // We use these to style the reveal close button
-$reveal-close-font-size: emCalc(22) !default;
-$reveal-close-top: emCalc(8) !default;
-$reveal-close-side: emCalc(11) !default;
+$reveal-close-font-size: em-calc(22) !default;
+$reveal-close-top: em-calc(8) !default;
+$reveal-close-side: em-calc(11) !default;
 $reveal-close-color: #aaa !default;
 $reveal-close-weight: bold !default;
 
@@ -119,7 +119,7 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
   @media #{$small} {
 
     .#{$reveal-modal-class} {
-      @include reveal-modal-style(false, emCalc(30), false, $box-shadow: false, $top-offset: emCalc(100));
+      @include reveal-modal-style(false, em-calc(30), false, $box-shadow: false, $top-offset: em-calc(100));
 
       &.tiny  { @include reveal-modal-base(false, 30%); }
       &.small { @include reveal-modal-base(false, 40%); }

data/scss/foundation/components/_section.scss

@@ -4,8 +4,8 @@
 $include-html-section-classes: $include-html-classes !default;
 
 // We use these to set padding and hover factor
-$section-title-padding: emCalc(15) !default;
-$section-content-padding: emCalc(15) !default;
+$section-title-padding: em-calc(15) !default;
+$section-content-padding: em-calc(15) !default;
 $section-function-factor: 10% !default;
 
 // These style the titles
@@ -22,13 +22,13 @@ $section-border-style: solid !default;
 $section-border-color: #ccc !default;
 
 // Font controls
-$section-font-size: emCalc(14) !default;
+$section-font-size: em-calc(14) !default;
 
 // Control the color of the background and some size options
 $section-content-bg: #fff !default;
-$section-vertical-nav-min-width: emCalc(200) !default;
-$section-vertical-tabs-title-width: emCalc(200) !default;
-$section-bottom-margin: emCalc(20) !default;
+$section-vertical-nav-min-width: em-calc(200) !default;
+$section-vertical-tabs-title-width: em-calc(200) !default;
+$section-bottom-margin: em-calc(20) !default;
 
 $title-selector: ".title" !default;
 $content-selector: ".content" !default;
@@ -50,12 +50,12 @@ $active-region-selector: ".active" !default;
       visibility: hidden;
     }
   }
-  
+
   @if $section-type != tabs {
   	&[data-section-small-style] {
       width: 100% !important; // override inline style
 
-	  & > [data-section-region], & > section, & > .section { 
+	  & > [data-section-region], & > section, & > .section {
         padding: 0 !important; // override inline style
         margin: 0 !important; // override inline style
         & > [data-section-title], & > #{$title-selector}{
@@ -113,7 +113,7 @@ $active-region-selector: ".active" !default;
   }
 
   &#{$active-region-selector} {
-    & > [data-section-content], & > #{$content-selector} { display: block; }    
+    & > [data-section-content], & > #{$content-selector} { display: block; }
   }
 
   &:not(#{$active-region-selector}) {
@@ -151,14 +151,14 @@ $active-region-selector: ".active" !default;
 	  padding-#{$default-float}: $section-vertical-tabs-title-width;
 
       & > [data-section-title], & > #{$title-selector} {
-        width: $section-vertical-tabs-title-width;     
+        width: $section-vertical-tabs-title-width;
       }
     }
   }
 
   // Styles for when Vertical Nav
   @else if $section-type == vertical-nav {
-	
+
 	position: relative;
     display: inline-block;
 
@@ -228,7 +228,7 @@ $active-region-selector: ".active" !default;
   }
 
   &#{$active-region-selector} {
-	& > #{$title-selector} { 
+	& > #{$title-selector} {
 	  background: $title-bg-active;
       a { color: $title-color-active; }
     }
@@ -255,10 +255,10 @@ $active-region-selector: ".active" !default;
   @else if $section-type == vertical-tabs {
 
     &#{$active-region-selector} {
-	  padding-#{$default-float}: $section-vertical-tabs-title-width - emCalc(1px);
+	  padding-#{$default-float}: $section-vertical-tabs-title-width - em-calc(1px);
 
       & > #{$title-selector} {
-        background-color: $title-bg-active;  
+        background-color: $title-bg-active;
       }
     }
   }
@@ -295,7 +295,7 @@ $active-region-selector: ".active" !default;
   .section-container.horizontal-nav,
   .section-container.accordion {
 	@include section-container-style(accordion);
-	& > section, & > .section { 
+	& > section, & > .section {
       @include section-style(accordion);
     }
   }
@@ -309,7 +309,7 @@ $active-region-selector: ".active" !default;
 
   .section-container.tabs {
 	@include section-container-style(tabs);
-	& > section, & > .section { 
+	& > section, & > .section {
       @include section-style(tabs, $title-bg-active: $section-title-bg-active-tabs);
     }
   }
@@ -325,7 +325,7 @@ $active-region-selector: ".active" !default;
 
 	.section-container.auto {
 	  @include section-container-style(tabs);
-	  & > section, & > .section { 
+	  & > section, & > .section {
         @include section-style(tabs, $title-bg-active: $section-title-bg-active-tabs);
       }
     }
@@ -339,7 +339,7 @@ $active-region-selector: ".active" !default;
 
 	.section-container.vertical-tabs {
 	  @include section-container-style(vertical-tabs);
-	  & > section, & > .section { 
+	  & > section, & > .section {
         @include section-style(vertical-tabs);
       }
     }
@@ -353,7 +353,7 @@ $active-region-selector: ".active" !default;
 
 	.section-container.vertical-nav {
 	  @include section-container-style(vertical-nav);
-	  & > section, & > .section { 
+	  & > section, & > .section {
         @include section-style(vertical-nav);
       }
     }
@@ -367,7 +367,7 @@ $active-region-selector: ".active" !default;
 
 	.section-container.horizontal-nav {
 	  @include section-container-style(horizontal-nav);
-	  & > section, & > .section { 
+	  & > section, & > .section {
         @include section-style(horizontal-nav);
       }
     }
@@ -383,7 +383,7 @@ $active-region-selector: ".active" !default;
     }
 	.section-container {
       @include section-container-style(accordion);
-	  & > section, & > .section { 
+	  & > section, & > .section {
         @include section-style(accordion);
       }
     }

data/scss/foundation/components/_side-nav.scss

@@ -4,17 +4,17 @@
 $include-html-nav-classes: $include-html-classes !default;
 
 // We use this to control padding.
-$side-nav-padding: emCalc(14, 0) !default;
+$side-nav-padding: em-calc(14 0) !default;
 
 // We use these to control list styles.
 $side-nav-list-type: none !default;
 $side-nav-list-position: inside !default;
-$side-nav-list-margin: emCalc(0, 0, 7, 0) !default;
+$side-nav-list-margin: em-calc(0 0 7 0) !default;
 
 // We use these to control link styles.
 $side-nav-link-color: $primary-color !default;
 $side-nav-link-color-active: lighten(#000, 30%) !default;
-$side-nav-font-size: emCalc(14) !default;
+$side-nav-font-size: em-calc(14) !default;
 $side-nav-font-weight: bold !default;
 
 // We use these to control border styles

data/scss/foundation/components/_split-buttons.scss

@@ -14,28 +14,28 @@ $split-button-padding-tny: $button-tny * 9 !default;
 $split-button-span-width-tny: $button-tny * 6.5 !default;
 $split-button-pip-size-tny: $button-tny !default;
 $split-button-pip-top-tny: $button-tny * 2 !default;
-$split-button-pip-default-float-tny: emCalc(-5) !default;
+$split-button-pip-default-float-tny: em-calc(-5) !default;
 
 // We use these to control small split buttons
 $split-button-padding-sml: $button-sml * 7 !default;
 $split-button-span-width-sml: $button-sml * 5 !default;
 $split-button-pip-size-sml: $button-sml !default;
 $split-button-pip-top-sml: $button-sml * 1.5 !default;
-$split-button-pip-default-float-sml: emCalc(-9) !default;
+$split-button-pip-default-float-sml: em-calc(-9) !default;
 
 // We use these to control medium split buttons
 $split-button-padding-med: $button-med * 6.4 !default;
 $split-button-span-width-med: $button-med * 4 !default;
-$split-button-pip-size-med: $button-med - emCalc(3) !default;
+$split-button-pip-size-med: $button-med - em-calc(3) !default;
 $split-button-pip-top-med: $button-med * 1.5 !default;
-$split-button-pip-default-float-med: emCalc(-9) !default;
+$split-button-pip-default-float-med: em-calc(-9) !default;
 
 // We use these to control large split buttons
 $split-button-padding-lrg: $button-lrg * 6 !default;
 $split-button-span-width-lrg: $button-lrg * 3.75 !default;
-$split-button-pip-size-lrg: $button-lrg - emCalc(6) !default;
-$split-button-pip-top-lrg: $button-lrg + emCalc(5) !default;
-$split-button-pip-default-float-lrg: emCalc(-9) !default;
+$split-button-pip-size-lrg: $button-lrg - em-calc(6) !default;
+$split-button-pip-top-lrg: $button-lrg + em-calc(5) !default;
+$split-button-pip-default-float-lrg: em-calc(-9) !default;
 
 
 //

data/scss/foundation/components/_sub-nav.scss

@@ -4,11 +4,11 @@
 $include-html-nav-classes: $include-html-classes !default;
 
 // We use these to control margin and padding
-$sub-nav-list-margin: emCalc(-4, 0, 18) !default;
-$sub-nav-list-padding-top: emCalc(4) !default;
+$sub-nav-list-margin: em-calc(-4 0 18) !default;
+$sub-nav-list-padding-top: em-calc(4) !default;
 
 // We use this to control the definition
-$sub-nav-font-size: emCalc(14) !default;
+$sub-nav-font-size: em-calc(14) !default;
 $sub-nav-font-color: #999 !default;
 $sub-nav-font-weight: normal !default;
 $sub-nav-text-decoration: none !default;
@@ -18,9 +18,12 @@ $sub-nav-border-radius: 1000px !default;
 $sub-nav-active-font-weight: bold !default;
 $sub-nav-active-bg: $primary-color !default;
 $sub-nav-active-color: #fff !default;
-$sub-nav-active-padding: emCalc(3, 9) !default;
+$sub-nav-active-padding: em-calc(3 9) !default;
 $sub-nav-active-cursor: default !default;
 
+$sub-nav-item-divider: "" !default;
+$sub-nav-item-divider-margin: emCalc(12) !default;
+
 //
 // Sub Nav Mixins
 //
@@ -32,14 +35,15 @@ $sub-nav-active-cursor: default !default;
   margin: $sub-nav-list-margin;
   padding-top: $sub-nav-list-padding-top;
   margin-#{$opposite-direction}: 0;
-  margin-#{$default-float}: emCalc(-9);
+  margin-#{$default-float}: em-calc(-9);
 
   dt,
-  dd {
+  dd,
+  li {
     float: $default-float;
     display: inline;
-    margin-#{$default-float}: emCalc(9);
-    margin-bottom: emCalc(10);
+    margin-#{$default-float}: em-calc(9);
+    margin-bottom: em-calc(10);
     font-weight: $sub-nav-font-weight;
     font-size: $font-size;
 
@@ -55,8 +59,20 @@ $sub-nav-active-cursor: default !default;
       cursor: $sub-nav-active-cursor;
       color: $sub-nav-active-color;
     }
-  }
+    @if $sub-nav-item-divider != "" {
+      margin-#{$default-float}: 0;
+
+      &:before {
+        content: "#{$sub-nav-item-divider}";
+        margin: 0 $sub-nav-item-divider-margin;
+      }
 
+      &:first-child:before {
+        content: "";
+        margin: 0;
+      }
+    }
+  }
 }
 
 
@@ -65,4 +81,4 @@ $sub-nav-active-cursor: default !default;
   /* Side Nav */
   .sub-nav { @include sub-nav; }
 
-}
+}