zurb-foundation 4.0.9 → 4.1.1

data/scss/foundation/components/_clearing.scss

@@ -86,7 +86,7 @@ $clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255) !default;
 
 .clearing-close {
   z-index: 999;
-  padding-left: 20px;
+  padding-#{$default-float}: 20px;
   padding-top: 10px;
   font-size: $clearing-close-size;
   line-height: 1;
@@ -104,8 +104,8 @@ $clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255) !default;
 
 // Large screen overrides
 @media #{$small} {
-  .clearing-main-left,
-  .clearing-main-right {
+  .clearing-main-prev,
+  .clearing-main-next {
     position: absolute;
     height: 100%;
     width: 40px;
@@ -119,22 +119,24 @@ $clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255) !default;
       border: solid $clearing-arrow-size;
     }
   }
-  .clearing-main-left {
-    left: 0;
+  .clearing-main-prev {
+    #{$default-float}: 0;
     & > span {
-      left: 5px;
-      border-color: transparent $clearing-arrow-color transparent transparent;
+      #{$default-float}: 5px;
+      border-color: transparent;
+      border-#{$opposite-direction}-color: $clearing-arrow-color;
     }
   }
-  .clearing-main-right {
-    right: 0;
+  .clearing-main-next {
+    #{$opposite-direction}: 0;
     & > span {
-      border-color: transparent transparent transparent $clearing-arrow-color;
+      border-color: transparent;
+      border-#{$default-float}-color: $clearing-arrow-color;
     }
   }
 
-  .clearing-main-left.disabled,
-  .clearing-main-right.disabled { opacity: 0.5; }
+  .clearing-main-prev.disabled,
+  .clearing-main-next.disabled { opacity: 0.5; }
 
   // If you want to show a lightbox, but only have a single image come through as the thumbnail
   .clearing-feature ~ li { display: none; }
@@ -151,7 +153,7 @@ $clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255) !default;
         z-index: 999;
         width: 200%;
         height: 100%;
-        margin-left: 0;
+        margin-#{$default-float}: 0;
         position: relative;
         #{$default-float}: 0;
 
@@ -162,7 +164,7 @@ $clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255) !default;
           padding: 0;
           float: $default-float;
           overflow: hidden;
-          margin-#{$default-opposite}: 1px;
+          margin-#{$opposite-direction}: 1px;
           position: relative;
           cursor: pointer;
           opacity: 0.4;
@@ -202,8 +204,8 @@ $clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255) !default;
   .clearing-close {
     position: absolute;
     top: 10px;
-    #{$default-opposite}: 20px;
-    padding-left: 0;
+    #{$opposite-direction}: 20px;
+    padding-#{$default-float}: 0;
     padding-top: 0;
   }
 }

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

@@ -32,8 +32,8 @@ $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-left-padding:          emCalc(6px) !default;
-$custom-dropdown-right-padding:         emCalc(38px) !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-width-small:           134px !default;
 $custom-dropdown-width-medium:          254px !default;
@@ -132,8 +132,8 @@ $custom-dropdown-width-large:           434px !default;
         text-decoration: none;
         overflow: hidden;
         display: block;
-        margin-left: $form-spacing / 2;
-        margin-right: $custom-select-height;
+        margin-#{$default-float}: $form-spacing / 2;
+        margin-#{$opposite-direction}: $custom-select-height;
       }
   
       .selector {
@@ -142,14 +142,14 @@ $custom-dropdown-width-large:           434px !default;
         width: $form-spacing * 2.5;
         height: $custom-select-height;
         display: block;
-        #{$default-opposite}: 0;
+        #{$opposite-direction}: 0;
         top: 0;
         &:after {
           content: "";
           display: block;
           @include css-triangle(5px, $custom-select-triangle-color, top);
           position: absolute;
-          left: ($form-spacing * 2.5) / 2 - emCalc(5px);
+          #{$default-float}: ($form-spacing * 2.5) / 2 - emCalc(5px);
           top: 50%;
           margin-top: -3px;
         }
@@ -208,8 +208,8 @@ $custom-dropdown-width-large:           434px !default;
         cursor: default;
         padding-top: $custom-dropdown-list-padding;
         padding-bottom: $custom-dropdown-list-padding;
-        padding-#{$default-float}: $custom-dropdown-left-padding;
-        padding-#{$default-opposite}: $custom-dropdown-right-padding;
+        padding-#{$default-float}: $custom-dropdown-default-float-padding;
+        padding-#{$opposite-direction}: $custom-dropdown-opposite-padding;
         min-height: $custom-dropdown-list-item-min-height;
         line-height: $custom-dropdown-list-item-min-height;
         margin: 0;

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

@@ -9,25 +9,25 @@ $dropdown-button-pip-color-alt: #333 !default;
 // We use these to style tiny dropdown buttons
 $dropdown-button-padding-tny:   $button-tny * 5 !default;
 $dropdown-button-pip-size-tny:  $button-tny !default;
-$dropdown-button-pip-right-tny: $button-tny * 2 !default;
+$dropdown-button-pip-opposite-tny: $button-tny * 2 !default;
 $dropdown-button-pip-top-tny:   -$button-tny / 2 + emCalc(1px) !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-right-sml: $button-sml * 2 !default;
+$dropdown-button-pip-opposite-sml: $button-sml * 2 !default;
 $dropdown-button-pip-top-sml:   -$button-sml / 2 + emCalc(1px) !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-pip-right-med: $button-med * 2 !default;
+$dropdown-button-pip-opposite-med: $button-med * 2 !default;
 $dropdown-button-pip-top-med:   -$button-med / 2 + emCalc(2px) !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-right-lrg: $button-lrg + emCalc(12px) !default;
+$dropdown-button-pip-opposite-lrg: $button-lrg + emCalc(12px) !default;
 $dropdown-button-pip-top-lrg:   -$button-lrg / 2 + emCalc(3px) !default;
 
 //
@@ -56,40 +56,40 @@ $dropdown-button-pip-top-lrg:   -$button-lrg / 2 + emCalc(3px) !default;
 
   // If we're dealing with tiny buttons, use these styles
   @if $padding == tiny {
-    padding-#{$default-opposite}: $dropdown-button-padding-tny;
+    padding-#{$opposite-direction}: $dropdown-button-padding-tny;
     &:before {
       border-width: $dropdown-button-pip-size-tny;
-      right: $dropdown-button-pip-right-tny;
+      #{$opposite-direction}: $dropdown-button-pip-opposite-tny;
       margin-top: $dropdown-button-pip-top-tny;
     }
   }
 
   // If we're dealing with small buttons, use these styles
   @if $padding == small {
-    padding-#{$default-opposite}: $dropdown-button-padding-sml;
+    padding-#{$opposite-direction}: $dropdown-button-padding-sml;
     &:before {
       border-width: $dropdown-button-pip-size-sml;
-      right: $dropdown-button-pip-right-sml;
+      #{$opposite-direction}: $dropdown-button-pip-opposite-sml;
       margin-top: $dropdown-button-pip-top-sml;
     }
   }
 
   // If we're dealing with default (medium) buttons, use these styles
   @if $padding == medium {
-    padding-#{$default-opposite}: $dropdown-button-padding-med;
+    padding-#{$opposite-direction}: $dropdown-button-padding-med;
     &:before {
       border-width: $dropdown-button-pip-size-med;
-      right: $dropdown-button-pip-right-med;
+      #{$opposite-direction}: $dropdown-button-pip-opposite-med;
       margin-top: $dropdown-button-pip-top-med;
     }
   }
 
   // If we're dealing with large buttons, use these styles
   @if $padding == large {
-    padding-#{$default-opposite}: $dropdown-button-padding-lrg;
+    padding-#{$opposite-direction}: $dropdown-button-padding-lrg;
     &:before {
       border-width: $dropdown-button-pip-size-lrg;
-      right: $dropdown-button-pip-right-lrg;
+      #{$opposite-direction}: $dropdown-button-pip-opposite-lrg;
       margin-top: $dropdown-button-pip-top-lrg;
     }
   }

data/scss/foundation/components/_dropdown.scss

@@ -28,7 +28,7 @@ $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-list-hover-bg:        #eeeeee !default;
-$dropdown-mobile-left:            0 !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;
@@ -42,7 +42,6 @@ $f-dropdown-content-padding:      emCalc(20px) !default;
 // We use this to style the dropdown container element.
 @mixin dropdown-container($content:list, $triangle:true, $max-width:$f-dropdown-max-width) {
   position: absolute;
-  left: -9999px;
   top: -9999px;
   list-style: $f-dropdown-list-style;
 
@@ -76,14 +75,14 @@ $f-dropdown-content-padding:      emCalc(20px) !default;
       @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, bottom);
       position: absolute;
       top: -($f-dropdown-triangle-size * 2);
-      left: $f-dropdown-triangle-side-offset;
+      #{$default-float}: $f-dropdown-triangle-side-offset;
       z-index: 99;
     }
     &:after {
       @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, bottom);
       position: absolute;
       top: -(($f-dropdown-triangle-size + 1) * 2);
-      left: $f-dropdown-triangle-side-offset - 1;
+      #{$default-float}: $f-dropdown-triangle-side-offset - 1;
       z-index: 98;
     }
 
@@ -122,13 +121,13 @@ $f-dropdown-content-padding:      emCalc(20px) !default;
   @media only screen and (max-width: 767px) {
     .f-dropdown {
       max-width: 100%;
-      left: $dropdown-mobile-left;
+      #{$default-float}: $dropdown-mobile-default-float;
     }
   }
 
   /* Foundation Dropdowns */
   .f-dropdown {
-    @include dropdown-container;
+    @include dropdown-container(content);
     // max-width: none;
 
     li { @include dropdown-style; }

data/scss/foundation/components/_forms.scss

@@ -73,7 +73,7 @@ $input-error-message-font-color-alt: #333 !default;
     }
   }
   input.column,
-  input.columns { padding-left: $form-spacing / 2; }
+  input.columns { padding-#{$default-float}: $form-spacing / 2; }
 }
 
 // We use this mixin to give all basic form elements their style
@@ -151,7 +151,7 @@ $input-error-message-font-color-alt: #333 !default;
     $bg-lightness: lightness($bg);
     background: $bg;
     border-color: darken($bg, 10%);
-    border-right: none;
+    border-#{$opposite-direction}: none;
 
     // Control the font color based on background brightness
     @if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; }
@@ -160,7 +160,7 @@ $input-error-message-font-color-alt: #333 !default;
 
   @if $is-button {
     padding-#{$default-float}: 0;
-    padding-#{$default-opposite}: 0;
+    padding-#{$opposite-direction}: 0;
     padding-top: 0;
     padding-bottom: 0;
     text-align: center;
@@ -176,7 +176,7 @@ $input-error-message-font-color-alt: #333 !default;
     $bg-lightness: lightness($bg);
     background: $bg;
     border-color: darken($bg, 15%);
-    border-left: none;
+    border-#{$default-float}: none;
 
     // Control the font color based on background brightness
     @if $bg-lightness > 70%  or $bg == yellow { color: $input-prefix-font-color; }
@@ -185,7 +185,7 @@ $input-error-message-font-color-alt: #333 !default;
 
   @if $is-button {
     padding-#{$default-float}: 0;
-    padding-#{$default-opposite}: 0;
+    padding-#{$opposite-direction}: 0;
     padding-top: 0;
     padding-bottom: 0;
     text-align: center;
@@ -262,35 +262,35 @@ $input-error-message-font-color-alt: #333 !default;
   /* Adjust padding, alignment and radius if pre/post element is a button */
   .postfix.button { @include button-size(false,false,false); @include postfix(false,true); }
   .prefix.button { @include button-size(false,false,false); @include prefix(false,true); }
-  .prefix.button.radius { @include side-radius(left, $global-radius); }
-  .postfix.button.radius { @include side-radius(right, $global-radius); }
-  .prefix.button.round { @include side-radius(left, 1000px); }
-  .postfix.button.round { @include side-radius(right, 1000px); }
+  .prefix.button.radius { @include side-radius($default-float, $global-radius); }
+  .postfix.button.radius { @include side-radius($opposite-direction, $global-radius); }
+  .prefix.button.round { @include side-radius($default-float, 1000px); }
+  .postfix.button.round { @include side-radius($opposite-direction, 1000px); }
 
   /* Separate prefix and postfix styles when on span so buttons keep their own */
   span.prefix { @include prefix();
-    &.radius { @include side-radius(left, $global-radius); }
+    &.radius { @include side-radius($default-float, $global-radius); }
   }
   span.postfix { @include postfix();
-    &.radius { @include side-radius(right, $global-radius); }
+    &.radius { @include side-radius($opposite-direction, $global-radius); }
   }
 
   /* Input groups will automatically style first and last elements of the group */
   .input-group {
     &.radius {
       &>*:first-child,  &>*:first-child * {
-        @include side-radius(left, $global-radius);
+        @include side-radius($default-float, $global-radius);
       }
       &>*:last-child, &>*:last-child * {
-        @include side-radius(right, $global-radius);
+        @include side-radius($opposite-direction, $global-radius);
       }
     }
     &.round {
       &>*:first-child,  &>*:first-child * {
-        @include side-radius(left, $button-round);
+        @include side-radius($default-float, $button-round);
       }
       &>*:last-child, &>*:last-child * {
-        @include side-radius(right, $button-round);
+        @include side-radius($opposite-direction, $button-round);
       }
     }
   }

data/scss/foundation/components/_grid.scss

@@ -15,8 +15,8 @@ $total-columns: 12 !default;
   // use @include grid-row(nest); to include a nested row
   @if $behavior == nest {
     width: auto;
-    margin-left: -($column-gutter/2);
-    margin-right: -($column-gutter/2);
+    margin-#{$default-float}: -($column-gutter/2);
+    margin-#{$opposite-direction}: -($column-gutter/2);
     margin-top: 0;
     margin-bottom: 0;
     max-width: none;
@@ -39,8 +39,8 @@ $total-columns: 12 !default;
   // use @include grid-row; to use a container row
   @else {
     width: 100%;
-    margin-left: auto;
-    margin-right: auto;
+    margin-#{$default-float}: auto;
+    margin-#{$opposite-direction}: auto;
     margin-top: 0;
     margin-bottom: 0;
     max-width: $row-width;
@@ -53,14 +53,14 @@ $total-columns: 12 !default;
 
 
 // For creating columns - @include these inside a media query to control small vs. large grid layouts
-@mixin grid-column($columns:false, $last-column:false, $center:false, $offset:false, $push:false, $pull:false, $collapse:false, $float:left) {
+@mixin grid-column($columns:false, $last-column:false, $center:false, $offset:false, $push:false, $pull:false, $collapse:false, $float:$default-float) {
 
   position: relative;
 
   // Gutter padding whenever a column isn't set to collapse
   @if $collapse == false {
-    padding-left: $column-gutter / 2;
-    padding-right: $column-gutter / 2;
+    padding-#{$default-float}: $column-gutter / 2;
+    padding-#{$opposite-direction}: $column-gutter / 2;
   }
 
   // If a column number is given, calculate width
@@ -68,32 +68,32 @@ $total-columns: 12 !default;
     width: gridCalc($columns, $total-columns);
 
     // If last column, float naturally instead of to the right
-    @if $last-column { float: $default-opposite; }
+    @if $last-column { float: $opposite-direction; }
 
     // if collapsed, get rid of gutter padding
-    @else if $collapse { padding-left: 0; padding-right: 0; }
+    @else if $collapse { padding-#{$default-float}: 0; padding-#{$opposite-direction}: 0; }
 
   }
 
-  @if $collapse { padding-left: 0; padding-right: 0; }
+  @if $collapse { padding-#{$default-float}: 0; padding-#{$opposite-direction}: 0; }
 
   // If offset, calculate appropriate margins
   @if $offset { margin-#{$default-float}: gridCalc($offset, $total-columns); }
 
   // Source Ordering, adds left/right depending on which you use.
-  @if $push { #{$default-float}: gridCalc($push, $total-columns); #{$default-opposite}: auto; }
-  @if $pull { #{$default-opposite}: gridCalc($pull, $total-columns); #{$default-float}: auto; }
+  @if $push { #{$default-float}: gridCalc($push, $total-columns); #{$opposite-direction}: auto; }
+  @if $pull { #{$opposite-direction}: gridCalc($pull, $total-columns); #{$default-float}: auto; }
 
   // If centered, get rid of float and add appropriate margins
   @if $center {
-    margin-left: auto;
-    margin-right: auto;
+    margin-#{$default-float}: auto;
+    margin-#{$opposite-direction}: auto;
     float: none !important;
   }
 
   @if $float {
     @if $float == left or true { float: $default-float; }
-    @else if $float == right { float: $default-opposite; }
+    @else if $float == right { float: $opposite-direction; }
     @else { float: none; }
   }
 
@@ -132,7 +132,7 @@ $total-columns: 12 !default;
       .row .small-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
     }
 
-    [class*="column"] + [class*="column"]:last-child { float: $default-opposite; }
+    [class*="column"] + [class*="column"]:last-child { float: $opposite-direction; }
     [class*="column"] + [class*="column"].end { float: $default-float; }
 
     .column.small-centered,
@@ -156,8 +156,8 @@ $total-columns: 12 !default;
     }
 
     @for $i from 2 through $total-columns - 2 {
-      .small-push#{-$i} { left: inherit; }
-      .small-pull#{-$i} { right: inherit; }
+      .small-push#{-$i} { #{$default-float}: inherit; }
+      .small-pull#{-$i} { #{$opposite-direction}: inherit; }
     }
 
     .column.large-centered,

data/scss/foundation/components/_inline-lists.scss

@@ -3,8 +3,11 @@
 //
 
 // We use this to control the margins and padding of the inline list.
-$inline-list-margin-bottom:    emCalc(17px) emCalc(-22px ) !default;
-$inline-list-margin:           0 0 !default;
+$inline-list-top-margin: 0 !default;
+$inline-list-opposite-margin: 0 !default;
+$inline-list-bottom-margin: emCalc(17px) !default;
+$inline-list-default-float-margin: emCalc(-22px) !default;
+
 $inline-list-padding:          0 !default;
 
 // We use this to control the overflow of the inline list.
@@ -22,7 +25,9 @@ $inline-list-children-display: block !default;
 
 // We use this mixin to create inline lists
 @mixin inline-list {
-  margin: $inline-list-margin $inline-list-margin-bottom;
+  margin: $inline-list-top-margin auto $inline-list-bottom-margin auto; 
+  margin-#{$default-float}: $inline-list-default-float-margin;
+  margin-#{$opposite-direction}: $inline-list-opposite-margin;
   padding: $inline-list-padding;
   list-style: none;
   overflow: $inline-list-overflow;