zurb-foundation 4.2.3 → 4.3.0

data/scss/foundation/components/_alert-boxes.scss

@@ -1,17 +1,17 @@
 //
-// Alert Variables
+// Alert Box Variables
 //
 $include-html-alert-classes: $include-html-classes !default;
 
 // We use this to control alert padding.
-$alert-padding-top: emCalc(11px) !default;
+$alert-padding-top: emCalc(11) !default;
 $alert-padding-default-float: $alert-padding-top !default;
-$alert-padding-opposite-direction: $alert-padding-top + emCalc(10px) !default;
-$alert-padding-bottom: $alert-padding-top + emCalc(1px) !default;
+$alert-padding-opposite-direction: $alert-padding-top + emCalc(10) !default;
+$alert-padding-bottom: $alert-padding-top + emCalc(1) !default;
 
 // We use these to control text style.
 $alert-font-weight: bold !default;
-$alert-font-size: emCalc(14px) !default;
+$alert-font-size: emCalc(14) !default;
 $alert-font-color: #fff !default;
 $alert-font-color-alt: darken($secondary-color, 60%) !default;
 
@@ -22,12 +22,12 @@ $alert-function-factor: 10% !default;
 $alert-border-style: solid !default;
 $alert-border-width: 1px !default;
 $alert-border-color: darken($primary-color, $alert-function-factor) !default;
-$alert-bottom-margin: emCalc(20px) !default;
+$alert-bottom-margin: emCalc(20) !default;
 
 // We use these to style the close buttons
 $alert-close-color: #333 !default;
-$alert-close-position: emCalc(5px) !default;
-$alert-close-font-size: emCalc(22px) !default;
+$alert-close-position: emCalc(5) !default;
+$alert-close-font-size: emCalc(22) !default;
 $alert-close-opacity: 0.3 !default;
 $alert-close-opacity-hover: 0.5 !default;
 $alert-close-padding: 5px 4px 4px !default;
@@ -73,7 +73,7 @@ $alert-radius: $global-radius !default;
   padding: $alert-close-padding;
   line-height: 0;
   position: absolute;
-  top: $alert-close-position + emCalc(2px);
+  top: $alert-close-position + emCalc(2);
   #{$opposite-direction}: $alert-close-position;
   color: $alert-close-color;
   opacity: $alert-close-opacity;
@@ -104,4 +104,4 @@ $alert-radius: $global-radius !default;
     &.secondary { @include alert-style($secondary-color); }
   }
 
-}
+}

data/scss/foundation/components/_block-grid.scss

@@ -5,7 +5,7 @@ $include-html-grid-classes: $include-html-classes !default;
 
 // We use this to control the maximum number of block grid elements per row
 $block-grid-elements: 12 !default;
-$block-grid-default-spacing: emCalc(20px) !default;
+$block-grid-default-spacing: emCalc(20) !default;
 
 // Enables media queries for block-grid classes. Set to false if writing semantic HTML.
 $block-grid-media-queries: true !default;

data/scss/foundation/components/_breadcrumbs.scss

@@ -7,8 +7,8 @@ $include-html-nav-classes: $include-html-classes !default;
 $crumb-bg: lighten($secondary-color, 5%) !default;
 
 // We use these to set the padding around the breadcrumbs.
-$crumb-padding: emCalc(9px) emCalc(14px) emCalc(9px) !default;
-$crumb-side-padding: emCalc(12px) !default;
+$crumb-padding: emCalc(9, 14, 9) !default;
+$crumb-side-padding: emCalc(12) !default;
 
 // We use these to control border styles.
 $crumb-function-factor: 10% !default;
@@ -18,7 +18,7 @@ $crumb-border-color: darken($crumb-bg, $crumb-function-factor) !default;
 $crumb-radius: $global-radius !default;
 
 // We use these to set various text styles for breadcrumbs.
-$crumb-font-size: emCalc(11px) !default;
+$crumb-font-size: emCalc(11) !default;
 $crumb-font-color: $primary-color !default;
 $crumb-font-color-current: #333 !default;
 $crumb-font-color-unavailable: #999 !default;
@@ -67,8 +67,8 @@ $crumb-slash: "/" !default;
 
   // Current is for the link of the current page
   &.current {
-  	cursor: $cursor-default-value;
-  	color: $crumb-font-color-current;
+    cursor: $cursor-default-value;
+    color: $crumb-font-color-current;
     a {
       cursor: $cursor-default-value;
       color: $crumb-font-color-current;
@@ -80,7 +80,7 @@ $crumb-slash: "/" !default;
 
   // Unavailable removed color and link styles so it looks inactive.
   &.unavailable {
-  	color: $crumb-font-color-unavailable;
+    color: $crumb-font-color-unavailable;
     a { color: $crumb-font-color-unavailable; }
 
     &:hover,
@@ -102,8 +102,8 @@ $crumb-slash: "/" !default;
   }
 
   &:first-child:before {
-	  content: " ";
-	  margin: 0;
+    content: " ";
+    margin: 0;
   }
 
 }

data/scss/foundation/components/_button-groups.scss

@@ -4,7 +4,7 @@
 $include-html-button-classes: $include-html-classes !default;
 
 // Sets the margin for the right side by default, and the left margin if right-to-left direction is used
-$button-bar-margin-opposite: emCalc(10px) !default;
+$button-bar-margin-opposite: emCalc(10) !default;
 
 //
 // Button Group Mixins
@@ -86,4 +86,4 @@ $button-bar-margin-opposite: emCalc(10px) !default;
     .button-group { @include button-group-container($styles:false,$float:true); }
   }
 
-}
+}

data/scss/foundation/components/_buttons.scss

@@ -4,23 +4,23 @@
 $include-html-button-classes: $include-html-classes !default;
 
 // We use these to build padding for buttons.
-$button-med: emCalc(12px) !default;
-$button-tny: emCalc(7px) !default;
-$button-sml: emCalc(9px) !default;
-$button-lrg: emCalc(16px) !default;
+$button-med: emCalc(12) !default;
+$button-tny: emCalc(7) !default;
+$button-sml: emCalc(9) !default;
+$button-lrg: emCalc(16) !default;
 
 // We use this to control the display property.
 $button-display: inline-block !default;
-$button-margin-bottom: emCalc(20px) !default;
+$button-margin-bottom: emCalc(20) !default;
 
 // We use these to control button text styles.
 $button-font-family: inherit !default;
 $button-font-color: #fff !default;
 $button-font-color-alt: #333 !default;
-$button-font-med: emCalc(16px) !default;
-$button-font-tny: emCalc(11px) !default;
-$button-font-sml: emCalc(13px) !default;
-$button-font-lrg: emCalc(20px) !default;
+$button-font-med: emCalc(16) !default;
+$button-font-tny: emCalc(11) !default;
+$button-font-sml: emCalc(13) !default;
+$button-font-lrg: emCalc(20) !default;
 $button-font-weight: bold !default;
 $button-font-align: center !default;
 
@@ -69,7 +69,7 @@ $button-disabled-opacity: 0.6 !default;
   @if $padding {
     padding-top: $padding;
     padding-#{$opposite-direction}: $padding * 2;
-    padding-bottom: $padding + emCalc(1px);
+    padding-bottom: $padding + emCalc(1);
     padding-#{$default-float}: $padding * 2;
 
     // We control the font-size based on mixin input.
@@ -77,15 +77,15 @@ $button-disabled-opacity: 0.6 !default;
     @else if $padding == $button-tny { font-size: $button-font-tny; }
     @else if $padding == $button-sml { font-size: $button-font-sml; }
     @else if $padding == $button-lrg { font-size: $button-font-lrg; }
-    @else                     { font-size: $padding - emCalc(2px); }
+    @else                            { font-size: $padding - emCalc(2); }
   }
 
   // We can set $full-width:true to remove side padding extend width.
   @if $full-width {
     // We still need to check if $padding is set.
     @if $padding {
-	  padding-top: $padding;
-	  padding-bottom: $padding + emCalc(1px);
+    padding-top: $padding;
+    padding-bottom: $padding + emCalc(1);
     } @else if $padding == false {
       padding-top:0;
       padding-bottom:0;
@@ -97,12 +97,12 @@ $button-disabled-opacity: 0.6 !default;
 
   // <input>'s and <button>'s take on strange padding. We added this to help fix that.
   @if $is-input == $button-lrg {
-    padding-top: $is-input + emCalc(.5px);
-    padding-bottom: $is-input + emCalc(.5px);
+    padding-top: $is-input + emCalc(.5);
+    padding-bottom: $is-input + emCalc(.5);
     -webkit-appearance: none;
   }
   @else if $is-input {
-    padding-top: $is-input + emCalc(1px);
+    padding-top: $is-input + emCalc(1);
     padding-bottom: $is-input;
     -webkit-appearance: none;
   }
@@ -183,8 +183,8 @@ $button-disabled-opacity: 0.6 !default;
     &.tiny   { @include button-size($padding:$button-tny); }
     &.expand { @include button-size($padding:null,$full-width:true); }
 
-    &.left-align  { text-align: left; text-indent: emCalc(12px); }
-    &.right-align { text-align: right; padding-right: emCalc(12px); }
+    &.left-align  { text-align: left; text-indent: emCalc(12); }
+    &.right-align { text-align: right; padding-right: emCalc(12); }
 
     &.disabled, &[disabled] { @include button-style($bg:$primary-color, $disabled:true);
       &.secondary { @include button-style($bg:$secondary-color, $disabled:true); }

data/scss/foundation/components/_custom-forms.scss

@@ -1,8 +1,3 @@
-//
-// FIX THE "X" ON CUSTOM FORMS
-//
-
-
 //
 // Custom Form Variables
 //
@@ -25,8 +20,8 @@ $custom-select-fade-to-color: #f3f3f3 !default;
 $custom-select-border-color: #ddd !default;
 $custom-select-triangle-color: #aaa !default;
 $custom-select-triangle-color-open: #222 !default;
-$custom-select-height: emCalc(13px) + ($form-spacing * 1.5) !default;
-$custom-select-margin-bottom: emCalc(20px) !default;
+$custom-select-height: emCalc(13) + ($form-spacing * 1.5) !default;
+$custom-select-margin-bottom: emCalc(20) !default;
 $custom-select-font-color-selected: #141414 !default;
 $custom-select-disabled-color: #888 !default;
 
@@ -37,15 +32,15 @@ $custom-dropdown-border-color: darken(#fff, 20%) !default;
 $custom-dropdown-border-width: 1px !default;
 $custom-dropdown-border-style: solid !default;
 $custom-dropdown-font-color: #555 !default;
-$custom-dropdown-font-size: emCalc(14px) !default;
+$custom-dropdown-font-size: emCalc(14) !default;
 $custom-dropdown-color-selected: #eeeeee !default;
 $custom-dropdown-font-color-selected: #000 !default;
 $custom-dropdown-shadow: 0 2px 2px 0px rgba(0,0,0,0.1) !default;
 $custom-dropdown-offset-top: auto !default;
-$custom-dropdown-list-padding: emCalc(4px) !default;
-$custom-dropdown-default-float-padding: emCalc(6px) !default;
-$custom-dropdown-opposite-padding: emCalc(38px) !default;
-$custom-dropdown-list-item-min-height: emCalc(24px) !default;
+$custom-dropdown-list-padding: emCalc(4) !default;
+$custom-dropdown-default-float-padding: emCalc(6) !default;
+$custom-dropdown-opposite-padding: emCalc(38) !default;
+$custom-dropdown-list-item-min-height: emCalc(24) !default;
 $custom-dropdown-width-small: 134px !default;
 $custom-dropdown-width-medium: 254px !default;
 $custom-dropdown-width-large: 434px !default;
@@ -75,6 +70,7 @@ $custom-dropdown-width-large: 434px !default;
       width: $custom-form-input-size;
       height: $custom-form-input-size;
       position: relative;
+      top:-1px; /* fix centering issue */
       vertical-align: middle;
       border: solid $custom-form-border-size $custom-form-border-color;
       background: $custom-form-bg;
@@ -152,7 +148,7 @@ $custom-dropdown-width-large: 434px !default;
       .current {
         cursor:default;
         white-space: nowrap;
-        line-height: $custom-select-height - emCalc(1px);
+        line-height: $custom-select-height - emCalc(1);
         color: $input-font-color;
         text-decoration: none;
         overflow: hidden;
@@ -174,7 +170,7 @@ $custom-dropdown-width-large: 434px !default;
           display: block;
           @include css-triangle(5px, $custom-select-triangle-color, top);
           position: absolute;
-          #{$default-float}: ($form-spacing * 2.5) / 2 - emCalc(5px);
+          #{$default-float}: ($form-spacing * 2.5) / 2 - emCalc(5);
           top: 50%;
           margin-top: -3px;
         }
@@ -212,6 +208,16 @@ $custom-dropdown-width-large: 434px !default;
       &.open.large ul { min-width: $custom-dropdown-width-large; @include box-sizing(border-box); }
     }
 
+    .error .custom.dropdown {
+      @include form-error-color;
+      background: rgba($alert-color, 0.1);
+      margin-bottom: 0;
+    }
+
+    .error .custom.dropdown + small.error {
+      margin-top: 0;
+    }
+
     .custom.dropdown ul {
       position: absolute;
       width: auto;

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

@@ -11,25 +11,25 @@ $dropdown-button-pip-color-alt: #333 !default;
 $dropdown-button-padding-tny: $button-tny * 5 !default;
 $dropdown-button-pip-size-tny: $button-tny !default;
 $dropdown-button-pip-opposite-tny: $button-tny * 2 !default;
-$dropdown-button-pip-top-tny: -$button-tny / 2 + emCalc(1px) !default;
+$dropdown-button-pip-top-tny: -$button-tny / 2 + emCalc(1) !default;
 
 // We use these to style small dropdown buttons
 $dropdown-button-padding-sml: $button-sml * 5 !default;
 $dropdown-button-pip-size-sml: $button-sml !default;
 $dropdown-button-pip-opposite-sml: $button-sml * 2 !default;
-$dropdown-button-pip-top-sml: -$button-sml / 2 + emCalc(1px) !default;
+$dropdown-button-pip-top-sml: -$button-sml / 2 + emCalc(1) !default;
 
 // We use these to style medium dropdown buttons
-$dropdown-button-padding-med: $button-med * 4 + emCalc(3px) !default;
-$dropdown-button-pip-size-med: $button-med - emCalc(3px) !default;
+$dropdown-button-padding-med: $button-med * 4 + emCalc(3) !default;
+$dropdown-button-pip-size-med: $button-med - emCalc(3) !default;
 $dropdown-button-pip-opposite-med: $button-med * 2 !default;
-$dropdown-button-pip-top-med: -$button-med / 2 + emCalc(2px) !default;
+$dropdown-button-pip-top-med: -$button-med / 2 + emCalc(2) !default;
 
 // We use these to style large dropdown buttons
 $dropdown-button-padding-lrg: $button-lrg * 4 !default;
-$dropdown-button-pip-size-lrg: $button-lrg - emCalc(6px) !default;
-$dropdown-button-pip-opposite-lrg: $button-lrg + emCalc(12px) !default;
-$dropdown-button-pip-top-lrg: -$button-lrg / 2 + emCalc(3px) !default;
+$dropdown-button-pip-size-lrg: $button-lrg - emCalc(6) !default;
+$dropdown-button-pip-opposite-lrg: $button-lrg + emCalc(12) !default;
+$dropdown-button-pip-top-lrg: -$button-lrg / 2 + emCalc(3) !default;
 
 //
 // Dropdown Button Mixin
@@ -112,4 +112,4 @@ $dropdown-button-pip-top-lrg: -$button-lrg / 2 + emCalc(3px) !default;
     &.secondary:before { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; }
   }
 
-}
+}

data/scss/foundation/components/_dropdown.scss

@@ -25,14 +25,14 @@ $f-dropdown-triangle-side-offset: 10px !default;
 // We use these to control styles for the list elements.
 $f-dropdown-list-style: none !default;
 $f-dropdown-font-color: #555 !default;
-$f-dropdown-font-size: emCalc(14px) !default;
-$f-dropdown-list-padding: emCalc(5px) emCalc(10px) !default;
-$f-dropdown-line-height: emCalc(18px) !default;
+$f-dropdown-font-size: emCalc(14) !default;
+$f-dropdown-list-padding: emCalc(5, 10) !default;
+$f-dropdown-line-height: emCalc(18) !default;
 $f-dropdown-list-hover-bg: #eeeeee !default;
 $dropdown-mobile-default-float: 0 !default;
 
 // We use this to control the styles for when the dropdown has custom content.
-$f-dropdown-content-padding: emCalc(20px) !default;
+$f-dropdown-content-padding: emCalc(20) !default;
 
 //
 // Dropdown Mixins

data/scss/foundation/components/_flex-video.scss

@@ -4,9 +4,9 @@
 $include-html-media-classes: $include-html-classes !default;
 
 // We use these to control video container padding and margins
-$flex-video-padding-top: emCalc(25px) !default;
+$flex-video-padding-top: emCalc(25) !default;
 $flex-video-padding-bottom: 67.5% !default;
-$flex-video-margin-bottom: emCalc(16px) !default;
+$flex-video-margin-bottom: emCalc(16) !default;
 
 // We use this to control widescreen bottom padding
 $flex-video-widescreen-padding-bottom: 57.25% !default;
@@ -43,4 +43,4 @@ $flex-video-widescreen-padding-bottom: 57.25% !default;
   /* Flex Video */
   .flex-video { @include flex-video-container; }
 
-}
+}

data/scss/foundation/components/_forms.scss

@@ -4,17 +4,17 @@
 $include-html-form-classes: $include-html-classes !default;
 
 // We use this to set the base for lots of form spacing and positioning styles
-$form-spacing: emCalc(16px) !default;
+$form-spacing: emCalc(16) !default;
 
 // We use these to style the labels in different ways
 $form-label-pointer: pointer !default;
-$form-label-font-size: emCalc(14px) !default;
+$form-label-font-size: emCalc(14) !default;
 $form-label-font-weight: 500 !default;
 $form-label-font-color: lighten(#000, 30%) !default;
-$form-label-bottom-margin: emCalc(3px) !default;
+$form-label-bottom-margin: emCalc(3) !default;
 $input-font-family: inherit !default;
 $input-font-color: rgba(0,0,0,0.75) !default;
-$input-font-size: emCalc(14px) !default;
+$input-font-size: emCalc(14) !default;
 $input-bg-color: #fff !default;
 $input-focus-bg-color: darken(#fff, 2%) !default;
 $input-border-color: darken(#fff, 20%) !default;
@@ -29,13 +29,13 @@ $input-include-glowing-effect: true !default;
 $fieldset-border-style: solid !default;
 $fieldset-border-width: 1px !default;
 $fieldset-border-color: #ddd !default;
-$fieldset-padding: emCalc(20px) !default;
-$fieldset-margin: emCalc(18px) 0 !default;
+$fieldset-padding: emCalc(20) !default;
+$fieldset-margin: emCalc(18, 0) !default;
 
 // We use these to style the legends when you use them
 $legend-bg: #fff !default;
 $legend-font-weight: bold !default;
-$legend-padding: 0 emCalc(3px) !default;
+$legend-padding: emCalc(0, 3) !default;
 
 // We use these to style the prefix and postfix input elements
 $input-prefix-bg: darken(#fff, 5%) !default;
@@ -47,9 +47,9 @@ $input-prefix-font-color: #333 !default;
 $input-prefix-font-color-alt: #fff !default;
 
 // We use these to style the error states for inputs and labels
-$input-error-message-padding: emCalc(6px) emCalc(4px) !default;
-$input-error-message-top: -($form-spacing) - emCalc(5px) !default;
-$input-error-message-font-size: emCalc(12px) !default;
+$input-error-message-padding: emCalc(6, 4) !default;
+$input-error-message-top: 0 !default;
+$input-error-message-font-size: emCalc(12) !default;
 $input-error-message-font-weight: bold !default;
 $input-error-message-font-color: #fff !default;
 $input-error-message-font-color-alt: #333 !default;
@@ -97,7 +97,7 @@ $glowing-effect-color: $input-focus-border-color !default;
   font-size: $input-font-size;
   margin: 0 0 $form-spacing 0;
   padding: $form-spacing / 2;
-  height: emCalc(13px) + ($form-spacing * 1.5);
+  height: emCalc(13) + ($form-spacing * 1.5);
   width: 100%;
   @include box-sizing(border-box);
   @if $input-include-glowing-effect {
@@ -151,8 +151,8 @@ $glowing-effect-color: $input-focus-border-color !default;
   border-width: $input-prefix-border-size;
   overflow: $input-prefix-overflow;
   font-size: $form-label-font-size;
-  height: ($form-label-font-size + ($form-spacing * 1.5) - emCalc(1px));
-  line-height: ($form-label-font-size + ($form-spacing * 1.5) - emCalc(1px));
+  height: ($form-label-font-size + ($form-spacing * 1.5) - emCalc(1));
+  line-height: ($form-label-font-size + ($form-spacing * 1.5) - emCalc(1));
 }
 
 // We use this mixin to create prefix label styles
@@ -175,7 +175,7 @@ $glowing-effect-color: $input-focus-border-color !default;
     padding-top: 0;
     padding-bottom: 0;
     text-align: center;
-    line-height: emCalc(34px);
+    line-height: emCalc(34);
   }
 
 }
@@ -200,7 +200,7 @@ $glowing-effect-color: $input-focus-border-color !default;
     padding-top: 0;
     padding-bottom: 0;
     text-align: center;
-    line-height: emCalc(34px);
+    line-height: emCalc(34);
   }
 
 }
@@ -217,7 +217,7 @@ $glowing-effect-color: $input-focus-border-color !default;
     background: $legend-bg;
     padding: $legend-padding;
     margin: 0;
-    margin-#{$default-float}: emCalc(-3px);
+    margin-#{$default-float}: emCalc(-3);
   }
 }
 
@@ -254,7 +254,7 @@ $glowing-effect-color: $input-focus-border-color !default;
 
 // Only include these classes if the variable is true, otherwise they'll be left out.
 @if $include-html-form-classes != false {
-	/* Standard Forms */
+  /* Standard Forms */
   form { margin: 0 0 $form-spacing; }
 
   /* Using forms within rows, we need to set some defaults */
@@ -264,6 +264,11 @@ $glowing-effect-color: $input-focus-border-color !default;
   label { @include form-label;
     &.right { @include form-label(right,false); }
     &.inline { @include form-label(inline,false); }
+    /* Styles for required inputs */
+    small {
+      text-transform: capitalize;
+      color: lighten($form-label-font-color, 10%);
+    }
   }
 
   /* Attach elements to the beginning or end of an input */
@@ -347,18 +352,43 @@ $glowing-effect-color: $input-focus-border-color !default;
   }
 
   /* Error Handling */
-  .error input,
+
+  span.error, small.error {
+    @include form-error-message;
+    display: none;
+  }
+
+  .error {
+    input,
+    textarea,
+    select {
+      @include form-error-color;
+      margin-bottom: 0;
+    }
+
+    label,
+    label.error {
+      @include form-label-error-color;
+    }
+
+    small.error {
+      @include form-error-message;
+    }
+
+    span.error-message {
+      display: block;
+    }
+  }
+
   input.error,
-  .error textarea,
   textarea.error {
     @include form-error-color;
   }
 
-  .error label,
+  .error select {
+    @include form-error-color;
+  }
+
   label.error { @include form-label-error-color; }
 
-  .error small,
-  small.error {
-    @include form-error-message;
-  }
 }