zurb-foundation 4.3.1 → 4.3.2

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

@@ -4,14 +4,14 @@
 $include-html-alert-classes: $include-html-classes !default;
 
 // We use this to control alert padding.
-$alert-padding-top: emCalc(11) !default;
+$alert-padding-top: em-calc(11) !default;
 $alert-padding-default-float: $alert-padding-top !default;
-$alert-padding-opposite-direction: $alert-padding-top + emCalc(10) !default;
-$alert-padding-bottom: $alert-padding-top + emCalc(1) !default;
+$alert-padding-opposite-direction: $alert-padding-top + em-calc(10) !default;
+$alert-padding-bottom: $alert-padding-top + em-calc(1) !default;
 
 // We use these to control text style.
 $alert-font-weight: bold !default;
-$alert-font-size: emCalc(14) !default;
+$alert-font-size: em-calc(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(20) !default;
+$alert-bottom-margin: em-calc(20) !default;
 
 // We use these to style the close buttons
 $alert-close-color: #333 !default;
-$alert-close-position: emCalc(5) !default;
-$alert-close-font-size: emCalc(22) !default;
+$alert-close-position: em-calc(5) !default;
+$alert-close-font-size: em-calc(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(2);
+  top: $alert-close-position + em-calc(2);
   #{$opposite-direction}: $alert-close-position;
   color: $alert-close-color;
   opacity: $alert-close-opacity;

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(20) !default;
+$block-grid-default-spacing: em-calc(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(9, 14, 9) !default;
-$crumb-side-padding: emCalc(12) !default;
+$crumb-padding: em-calc(9 14 9) !default;
+$crumb-side-padding: em-calc(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(11) !default;
+$crumb-font-size: em-calc(11) !default;
 $crumb-font-color: $primary-color !default;
 $crumb-font-color-current: #333 !default;
 $crumb-font-color-unavailable: #999 !default;

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(10) !default;
+$button-bar-margin-opposite: em-calc(10) !default;
 
 //
 // Button Group Mixins
@@ -29,7 +29,7 @@ $button-bar-margin-opposite: emCalc(10) !default;
 
   // We use this to control the flow, or remove those styles completely.
   @if $float {
-    margin: 0 0 0 -1px;
+    margin: 0 0 0 (-$button-border-width);
     float: $float;
     // Make sure the first child doesn't get the negative margin.
     &:first-child { margin-#{$default-float}: 0; }

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(12) !default;
-$button-tny: emCalc(7) !default;
-$button-sml: emCalc(9) !default;
-$button-lrg: emCalc(16) !default;
+$button-med: em-calc(12) !default;
+$button-tny: em-calc(7) !default;
+$button-sml: em-calc(9) !default;
+$button-lrg: em-calc(16) !default;
 
 // We use this to control the display property.
 $button-display: inline-block !default;
-$button-margin-bottom: emCalc(20) !default;
+$button-margin-bottom: em-calc(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(16) !default;
-$button-font-tny: emCalc(11) !default;
-$button-font-sml: emCalc(13) !default;
-$button-font-lrg: emCalc(20) !default;
+$button-font-med: em-calc(16) !default;
+$button-font-tny: em-calc(11) !default;
+$button-font-sml: em-calc(13) !default;
+$button-font-lrg: em-calc(20) !default;
 $button-font-weight: bold !default;
 $button-font-align: center !default;
 
@@ -51,7 +51,7 @@ $button-disabled-opacity: 0.6 !default;
     cursor: $cursor-pointer-value;
     font-family: $button-font-family;
     font-weight: $button-font-weight;
-    line-height: 1;
+    line-height: normal;
     margin: 0 0 $button-margin-bottom;
     position: relative;
     text-decoration: none;
@@ -68,7 +68,7 @@ $button-disabled-opacity: 0.6 !default;
   @if $padding {
     padding-top: $padding;
     padding-#{$opposite-direction}: $padding * 2;
-    padding-bottom: $padding + emCalc(1);
+    padding-bottom: $padding + em-calc(1);
     padding-#{$default-float}: $padding * 2;
 
     // We control the font-size based on mixin input.
@@ -76,7 +76,7 @@ $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(2); }
+    @else                            { font-size: $padding - em-calc(2); }
   }
 
   // We can set $full-width:true to remove side padding extend width.
@@ -84,24 +84,24 @@ $button-disabled-opacity: 0.6 !default;
     // We still need to check if $padding is set.
     @if $padding {
     padding-top: $padding;
-    padding-bottom: $padding + emCalc(1);
+    padding-bottom: $padding + em-calc(1);
     } @else if $padding == false {
       padding-top:0;
       padding-bottom:0;
     }
-    padding-right: 0px;
-    padding-left: 0px;
+    padding-right: 0;
+    padding-left: 0;
     width: 100%;
   }
 
   // <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(.5);
-    padding-bottom: $is-input + emCalc(.5);
+    padding-top: $is-input + em-calc(.5);
+    padding-bottom: $is-input + em-calc(.5);
     -webkit-appearance: none;
   }
   @else if $is-input {
-    padding-top: $is-input + emCalc(1);
+    padding-top: $is-input + em-calc(1);
     padding-bottom: $is-input;
     -webkit-appearance: none;
   }
@@ -182,8 +182,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(12); }
-    &.right-align { text-align: right; padding-right: emCalc(12); }
+    &.left-align  { text-align: left; text-indent: em-calc(12); }
+    &.right-align { text-align: right; padding-right: em-calc(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

@@ -12,7 +12,7 @@ $custom-form-input-size: 16px !default;
 $custom-form-check-color: #222 !default;
 $custom-form-check-size: 16px !default;
 $custom-form-radio-size: 8px !default;
-$custom-form-checkbox-radius: 0px !default;
+$custom-form-checkbox-radius: 0 !default;
 
 // We use these to style the custom select form element.
 $custom-select-bg: #fff !default;
@@ -20,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(13) + ($form-spacing * 1.5) !default;
-$custom-select-margin-bottom: emCalc(20) !default;
+$custom-select-height: em-calc(13) + ($form-spacing * 1.5) !default;
+$custom-select-margin-bottom: em-calc(20) !default;
 $custom-select-font-color-selected: #141414 !default;
 $custom-select-disabled-color: #888 !default;
 
@@ -32,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(14) !default;
+$custom-dropdown-font-size: em-calc(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-shadow: 0 2px 2px 0 rgba(0,0,0,0.1) !default;
 $custom-dropdown-offset-top: auto !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-list-padding: em-calc(4) !default;
+$custom-dropdown-default-float-padding: em-calc(6) !default;
+$custom-dropdown-opposite-padding: em-calc(38) !default;
+$custom-dropdown-list-item-min-height: em-calc(24) !default;
 $custom-dropdown-width-small: 134px !default;
 $custom-dropdown-width-medium: 254px !default;
 $custom-dropdown-width-large: 434px !default;
@@ -50,7 +50,12 @@ $custom-dropdown-width-large: 434px !default;
 // We may look at updating this in the future.
 @mixin custom-form-input($radius:0px, $mark-size:0px) {
   @include radius($radius);
-  padding: (($custom-form-input-size - $mark-size) / 2) - $custom-form-border-size;
+  $custom-form-input-padding: (($custom-form-input-size - $mark-size) / 2) - $custom-form-border-size;
+  @if $custom-form-input-padding >= 0 {
+    padding: $custom-form-input-padding;
+  } @else {
+    padding: 0;
+  }
 }
 
 // Only include these classes if the variable is true, otherwise they'll be left out.
@@ -126,8 +131,8 @@ $custom-dropdown-width-large: 434px !default;
       top: 0;
       height: $custom-select-height;
       margin-bottom: $custom-select-margin-bottom;
-      margin-top: 0px;
-      padding: 0px;
+      margin-top: 0;
+      padding: 0;
       width: 100%;
       background: $custom-dropdown-bg;
       @if $experimental {
@@ -148,7 +153,7 @@ $custom-dropdown-width-large: 434px !default;
       .current {
         cursor:default;
         white-space: nowrap;
-        line-height: $custom-select-height - emCalc(1);
+        line-height: $custom-select-height - em-calc(1);
         color: $input-font-color;
         text-decoration: none;
         overflow: hidden;
@@ -170,7 +175,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(5);
+          #{$default-float}: ($form-spacing * 2.5) / 2 - em-calc(5);
           top: 50%;
           margin-top: -3px;
         }

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(1) !default;
+$dropdown-button-pip-top-tny: -$button-tny / 2 + em-calc(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(1) !default;
+$dropdown-button-pip-top-sml: -$button-sml / 2 + em-calc(1) !default;
 
 // We use these to style medium dropdown buttons
-$dropdown-button-padding-med: $button-med * 4 + emCalc(3) !default;
-$dropdown-button-pip-size-med: $button-med - emCalc(3) !default;
+$dropdown-button-padding-med: $button-med * 4 + em-calc(3) !default;
+$dropdown-button-pip-size-med: $button-med - em-calc(3) !default;
 $dropdown-button-pip-opposite-med: $button-med * 2 !default;
-$dropdown-button-pip-top-med: -$button-med / 2 + emCalc(2) !default;
+$dropdown-button-pip-top-med: -$button-med / 2 + em-calc(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(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-pip-size-lrg: $button-lrg - em-calc(6) !default;
+$dropdown-button-pip-opposite-lrg: $button-lrg + em-calc(12) !default;
+$dropdown-button-pip-top-lrg: -$button-lrg / 2 + em-calc(3) !default;
 
 //
 // Dropdown Button Mixin

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(14) !default;
-$f-dropdown-list-padding: emCalc(5, 10) !default;
-$f-dropdown-line-height: emCalc(18) !default;
+$f-dropdown-font-size: em-calc(14) !default;
+$f-dropdown-list-padding: em-calc(5, 10) !default;
+$f-dropdown-line-height: em-calc(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(20) !default;
+$f-dropdown-content-padding: em-calc(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(25) !default;
+$flex-video-padding-top: em-calc(25) !default;
 $flex-video-padding-bottom: 67.5% !default;
-$flex-video-margin-bottom: emCalc(16) !default;
+$flex-video-margin-bottom: em-calc(16) !default;
 
 // We use this to control widescreen bottom padding
 $flex-video-widescreen-padding-bottom: 57.25% !default;

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(16) !default;
+$form-spacing: em-calc(16) !default;
 
 // We use these to style the labels in different ways
 $form-label-pointer: pointer !default;
-$form-label-font-size: emCalc(14) !default;
+$form-label-font-size: em-calc(14) !default;
 $form-label-font-weight: 500 !default;
 $form-label-font-color: lighten(#000, 30%) !default;
-$form-label-bottom-margin: emCalc(3) !default;
+$form-label-bottom-margin: em-calc(3) !default;
 $input-font-family: inherit !default;
 $input-font-color: rgba(0,0,0,0.75) !default;
-$input-font-size: emCalc(14) !default;
+$input-font-size: em-calc(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(20) !default;
-$fieldset-margin: emCalc(18, 0) !default;
+$fieldset-padding: em-calc(20) !default;
+$fieldset-margin: em-calc(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: emCalc(0, 3) !default;
+$legend-padding: em-calc(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(6, 4) !default;
-$input-error-message-top: -($form-spacing) - emCalc(5) !default;
-$input-error-message-font-size: emCalc(12) !default;
+$input-error-message-padding: em-calc(6 4) !default;
+$input-error-message-top: 0;
+$input-error-message-font-size: em-calc(12) !default;
 $input-error-message-font-weight: bold !default;
 $input-error-message-font-color: #fff !default;
 $input-error-message-font-color-alt: #333 !default;
@@ -74,6 +74,12 @@ $glowing-effect-color: $input-focus-border-color !default;
 
       .column,
       .columns { padding: 0; }
+      input { 
+        -moz-border-radius-bottom#{$opposite-direction}: 0;
+        -moz-border-radius-top#{$opposite-direction}: 0;
+        -webkit-border-bottom-#{$opposite-direction}-radius: 0;
+        -webkit-border-top-#{$opposite-direction}-radius: 0;
+      }
 
     }
   }
@@ -97,7 +103,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: ($input-font-size + ($form-spacing * 1.5) - emCalc(1));
+  height: ($input-font-size + ($form-spacing * 1.5) - em-calc(1));
   width: 100%;
   @include box-sizing(border-box);
   @if $input-include-glowing-effect {
@@ -134,7 +140,7 @@ $glowing-effect-color: $input-focus-border-color !default;
   }
   @else if $alignment == inline {
     margin: 0 0 $form-spacing 0;
-    padding: $form-spacing / 2 + emCalc($input-border-width * 2) 0;
+    padding: $form-spacing / 2 + em-calc($input-border-width * 2) 0;
   }
 }
 
@@ -151,8 +157,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(1));
-  line-height: ($form-label-font-size + ($form-spacing * 1.5) - emCalc(1));
+  height: ($form-label-font-size + ($form-spacing * 1.5) - em-calc(1));
+  line-height: ($form-label-font-size + ($form-spacing * 1.5) - em-calc(1));
 }
 
 // We use this mixin to create prefix label styles
@@ -175,7 +181,7 @@ $glowing-effect-color: $input-focus-border-color !default;
     padding-top: 0;
     padding-bottom: 0;
     text-align: center;
-    line-height: emCalc(34);
+    line-height: em-calc(34);
   }
 
 }
@@ -200,7 +206,7 @@ $glowing-effect-color: $input-focus-border-color !default;
     padding-top: 0;
     padding-bottom: 0;
     text-align: center;
-    line-height: emCalc(34);
+    line-height: em-calc(34);
   }
 
 }
@@ -217,7 +223,7 @@ $glowing-effect-color: $input-focus-border-color !default;
     background: $legend-bg;
     padding: $legend-padding;
     margin: 0;
-    margin-#{$default-float}: emCalc(-3);
+    margin-#{$default-float}: em-calc(-3);
   }
 }
 
@@ -327,6 +333,9 @@ $glowing-effect-color: $input-focus-border-color !default;
   input[type="time"],
   input[type="url"],
   textarea {
+    -webkit-appearance: none;
+    -webkit-border-radius: 0;
+    border-radius: 0;
     @include form-element;
     @if not $input-include-glowing-effect {
         @include single-transition(all, 0.15s, linear);
@@ -356,7 +365,6 @@ $glowing-effect-color: $input-focus-border-color !default;
   [data-abide] {
     .error small.error, span.error, small.error {
       @include form-error-message;
-      margin-top: 0;
     }
     span.error, small.error { display: none; }
   }
@@ -376,6 +384,7 @@ $glowing-effect-color: $input-focus-border-color !default;
       @include form-label-error-color;
     }
 
+    > small,
     small.error {
       @include form-error-message;
     }
@@ -388,6 +397,7 @@ $glowing-effect-color: $input-focus-border-color !default;
   input.error,
   textarea.error {
     @include form-error-color;
+    margin-bottom: 0;
   }
 
   .error select {