zurb-foundation 4.0.9 → 4.1.1

data/scss/foundation/components/_joyride.scss

@@ -53,8 +53,8 @@ $joyride-screenfill:          rgba(0,0,0,0.5) !default;
 
 .lt-ie9 .joyride-tip-guide {
   max-width:800px;
-  left: 50%;
-  margin-left:-400px;
+  #{$default-float}: 50%;
+  margin-#{$default-float}:-400px;
 }
 
 .joyride-content-wrapper {
@@ -79,7 +79,7 @@ $joyride-screenfill:          rgba(0,0,0,0.5) !default;
       border-color: $joyride-tip-bg;
       border-top-color: transparent !important;
       border-#{$default-float}-color: transparent !important;
-      border-#{$default-opposite}-color: transparent !important;
+      border-#{$opposite-direction}-color: transparent !important;
       top: -($joyride-tip-nub-size*2);
       bottom: none;
     }
@@ -87,7 +87,7 @@ $joyride-screenfill:          rgba(0,0,0,0.5) !default;
       border-color: $joyride-tip-bg !important;
       border-bottom-color: transparent !important;
       border-#{$default-float}-color: transparent !important;
-      border-#{$default-opposite}-color: transparent !important;
+      border-#{$opposite-direction}-color: transparent !important;
       bottom: -($joyride-tip-nub-size*2);
       bottom: none;
     }
@@ -120,7 +120,7 @@ $joyride-screenfill:          rgba(0,0,0,0.5) !default;
   height: $joyride-tip-timer-height;
   border: $joyride-tip-border;
   position: absolute;
-  #{$default-opposite}: emCalc(17px);
+  #{$opposite-direction}: emCalc(17px);
   bottom: emCalc(16px);
 }
 .joyride-timer-indicator {
@@ -132,7 +132,7 @@ $joyride-screenfill:          rgba(0,0,0,0.5) !default;
 
 .joyride-close-tip {
   position: absolute;
-  #{$default-opposite}: 12px;
+  #{$opposite-direction}: 12px;
   top: 10px;
   color: $joyride-tip-close-color !important;
   text-decoration: none;
@@ -160,13 +160,13 @@ $joyride-screenfill:          rgba(0,0,0,0.5) !default;
 
 /* Styles for screens that are atleast 768px; */
 @media #{$small} {
-  .joyride-tip-guide { width: $joyride-tip-default-width; #{$default-float}: 0;
+  .joyride-tip-guide { width: $joyride-tip-default-width; #{$default-float}: inherit;
     .joyride-nub {
       &.bottom {
         border-color: $joyride-tip-bg !important;
         border-bottom-color: transparent !important;
         border-#{$default-float}-color: transparent !important;
-        border-#{$default-opposite}-color: transparent !important;
+        border-#{$opposite-direction}-color: transparent !important;
         bottom: -($joyride-tip-nub-size*2);
         bottom: none;
       }

data/scss/foundation/components/_magellan.scss

@@ -2,14 +2,15 @@
 // Magellan Variables
 //
 $magellan-bg: #fff !default;
+$magellan-padding: 10px !default;
 
 @if $include-html-magellan-classes {
 
   [data-magellan-expedition] {
     background: $magellan-bg;
-    z-index: 997;
+    z-index: 50;
     min-width: 100%;
-    padding: 10px;
+    padding: $magellan-padding;
 
     .sub-nav {
       margin-bottom: 0;

data/scss/foundation/components/_orbit.scss

@@ -44,7 +44,7 @@ $stack-on-small-margin-bottom: emCalc(20px) !default;
 
     &>* {
       position: relative;
-      float: left;
+      float: $default-float;
       height: 100%;
 
       .orbit-caption {
@@ -65,7 +65,7 @@ $stack-on-small-margin-bottom: emCalc(20px) !default;
   .orbit-slide-number {
     position: absolute;
     top: 10px;
-    left: 10px;
+    #{$default-float}: 10px;
     font-size: 12px;
     span { font-weight: 700; }
   }
@@ -73,7 +73,7 @@ $stack-on-small-margin-bottom: emCalc(20px) !default;
   .orbit-timer {
     position: absolute;
     top: 10px;
-    right: 10px;
+    #{$opposite-direction}: 10px;
     height: 6px;
     width: 100px;
     .orbit-progress {
@@ -88,7 +88,7 @@ $stack-on-small-margin-bottom: emCalc(20px) !default;
       display: none;
       position: absolute;
       top: 10px;
-      right: 0px;
+      #{$opposite-direction}: 0px;
       width: 11px;
       height: 14px;
       border: solid 4px #000;
@@ -98,7 +98,7 @@ $stack-on-small-margin-bottom: emCalc(20px) !default;
 
     &.paused {
       & > span {
-        right: -6px;
+        #{$opposite-direction}: -6px;
         top: 9px;
         width: 11px;
         height: 14px;
@@ -134,17 +134,25 @@ $stack-on-small-margin-bottom: emCalc(20px) !default;
       border: solid 16px;
     }
   }
-  .orbit-prev { left: 0;
-    & > span { border-color: transparent #fff transparent transparent; }
-    &:hover > span { border-color: transparent #ccc transparent transparent; }
+  .orbit-prev { #{$default-float}: 0;
+    & > span { 
+      border-color: transparent;
+      border-#{$opposite-direction}-color: #fff;
+    }
+    &:hover > span {
+      border-#{$opposite-direction}-color: #ccc;
+    }
   }
-  .orbit-next { right: 0;
+  .orbit-next { #{$opposite-direction}: 0;
     & > span {
-      border-color: transparent transparent transparent #fff;
-      left: 50%;
-      margin-left: -8px;
+      border-color: transparent;
+      border-#{$default-float}-color: #fff;
+      #{$default-float}: 50%;
+      margin-#{$default-float}: -8px;
+    }
+    &:hover > span {
+      border-#{$default-float}-color: #ccc;
     }
-    &:hover > span { border-color: transparent transparent transparent #ccc; }
   }
 }
 
@@ -159,8 +167,8 @@ $stack-on-small-margin-bottom: emCalc(20px) !default;
     width: 18px;
     height: 18px;
     background: #fff;
-    float: left;
-    margin-right: 6px;
+    float: $default-float;
+    margin-#{$opposite-direction}: 6px;
     border: solid 2px #000;
     @include radius(1000px);
 
@@ -168,7 +176,7 @@ $stack-on-small-margin-bottom: emCalc(20px) !default;
       background: #000;
     }
 
-    &:last-child { margin-right: 0; }
+    &:last-child { margin-#{$opposite-direction}: 0; }
   }
 }
 

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

@@ -54,7 +54,7 @@ $price-cta-padding:         emCalc(20px) emCalc(20px) 0 !default;
 // We use this to create the container element for the pricing tables
 @mixin pricing-table-container {
   border: $price-table-border;
-  margin-left: 0;
+  margin-#{$default-float}: 0;
   margin-bottom: $price-table-margin-bottom;
 
   & * {

data/scss/foundation/components/_reveal.scss

@@ -41,7 +41,7 @@ $reveal-border-color:    #666 !default;
   z-index: 98;
   display: none;
   top: 0;
-  left: 0;
+  #{$default-float}: 0;
 }
 
 // We use this mixin to create the structure of a reveal modal
@@ -93,7 +93,7 @@ $reveal-border-color:    #666 !default;
   line-height: 1;
   position: absolute;
   top: $reveal-close-top;
-  #{$default-opposite}: $reveal-close-side;
+  #{$opposite-direction}: $reveal-close-side;
   color: $color;
   font-weight: $reveal-close-weight;
   cursor: pointer;

data/scss/foundation/components/_section.scss

@@ -117,14 +117,14 @@ $section-bottom-margin:          emCalc(20px) !default;
     .title {
       width: auto;
       border: $section-border-size $section-border-style $section-border-color;
-      border-right: 0;
+      border-#{$opposite-direction}: 0;
       border-bottom: 0;
       position: absolute;
       z-index: 1;
 
       a { width: 100%; }
     }
-    &:last-child .title { border-right: $section-border-size $section-border-style $section-border-color; }
+    &:last-child .title { border-#{$opposite-direction}: $section-border-size $section-border-style $section-border-color; }
 
     .content {
       border: $section-border-size $section-border-style $section-border-color;
@@ -157,7 +157,7 @@ $section-bottom-margin:          emCalc(20px) !default;
       .content {
         display: block;
         position: absolute;
-        left: 100%;
+        #{$default-float}: 100%;
         top: -1px;
         z-index: 999;
         min-width: $section-vertical-nav-min-width;
@@ -175,7 +175,7 @@ $section-bottom-margin:          emCalc(20px) !default;
     .title {
       width: auto;
       border: $section-border-size $section-border-style $section-border-color;
-      border-left: 0;
+      border-#{$default-float}: 0;
       top: -1px;
       position: absolute;
       z-index: 1;
@@ -190,7 +190,7 @@ $section-bottom-margin:          emCalc(20px) !default;
         display: block;
         position: absolute;
         z-index: 999;
-        left: 0;
+        #{$default-float}: 0;
         top: -2px;
         min-width: $section-vertical-nav-min-width;
         border: $section-border-size $section-border-style $section-border-color;

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

@@ -13,28 +13,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-left-tny:    emCalc(-5px) !default;
+$split-button-pip-default-float-tny:    emCalc(-5px) !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-left-sml:    emCalc(-9px) !default;
+$split-button-pip-default-float-sml:    emCalc(-9px) !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(3px) !default;
 $split-button-pip-top-med:     $button-med * 1.5 !default;
-$split-button-pip-left-med:    emCalc(-9px) !default;
+$split-button-pip-default-float-med:    emCalc(-9px) !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(6px) !default;
 $split-button-pip-top-lrg:     $button-lrg + emCalc(5px) !default;
-$split-button-pip-left-lrg:    emCalc(-9px) !default;
+$split-button-pip-default-float-lrg:    emCalc(-9px) !default;
 
 
 //
@@ -53,9 +53,9 @@ $split-button-pip-left-lrg:    emCalc(-9px) !default;
       display: block;
       height: 100%;
       position: absolute;
-      #{$default-opposite}: 0;
+      #{$opposite-direction}: 0;
       top: 0;
-      border-left: solid 1px;
+      border-#{$default-float}: solid 1px;
 
       // Building the triangle pip indicator
       &:before {
@@ -66,7 +66,7 @@ $split-button-pip-left-lrg:    emCalc(-9px) !default;
         display: block;
         border-style: solid;
 
-        left: 50%;
+        #{$default-float}: 50%;
       }
 
       &:active { background-color: $split-button-active-bg-tint; }
@@ -75,57 +75,57 @@ $split-button-pip-left-lrg:    emCalc(-9px) !default;
 
   // Control the border color for the span area of the split button
   @if $span-border {
-    span { border-left-color: darken($span-border, $split-button-function-factor); }
+    span { border-#{$default-float}-color: darken($span-border, $split-button-function-factor); }
   }
 
   // Style of the button and clickable area for tiny sizes
   @if $padding == tiny {
-    padding-#{$default-opposite}: $split-button-padding-tny;
+    padding-#{$opposite-direction}: $split-button-padding-tny;
 
     span { width: $split-button-span-width-tny;
       &:before {
         border-width: $split-button-pip-size-tny;
         top: $split-button-pip-top-tny;
-        margin-left: $split-button-pip-left-tny;
+        margin-#{$default-float}: $split-button-pip-default-float-tny;
       }
     }
   }
 
   // Style of the button and clickable area for small sizes
   @else if $padding == small {
-    padding-#{$default-opposite}: $split-button-padding-sml;
+    padding-#{$opposite-direction}: $split-button-padding-sml;
 
     span { width: $split-button-span-width-sml;
       &:before {
         border-width: $split-button-pip-size-sml;
         top: $split-button-pip-top-sml;
-        margin-left: $split-button-pip-left-sml;
+        margin-#{$default-float}: $split-button-pip-default-float-sml;
       }
     }
   }
 
   // Style of the button and clickable area for default (medium) sizes
   @else if $padding == medium {
-    padding-#{$default-opposite}: $split-button-padding-med;
+    padding-#{$opposite-direction}: $split-button-padding-med;
 
     span { width: $split-button-span-width-med;
       &:before {
         border-width: $split-button-pip-size-med;
         top: $split-button-pip-top-med;
-        margin-left: $split-button-pip-left-med;
+        margin-#{$default-float}: $split-button-pip-default-float-med;
       }
     }
   }
 
   // Style of the button and clickable area for large sizes
   @else if $padding == large {
-    padding-#{$default-opposite}: $split-button-padding-lrg;
+    padding-#{$opposite-direction}: $split-button-padding-lrg;
 
     span { width: $split-button-span-width-lrg;
       &:before {
         border-width: $split-button-pip-size-lrg;
         top: $split-button-pip-top-lrg;
-        margin-left: $split-button-pip-left-lrg;
+        margin-#{$default-float}: $split-button-pip-default-float-lrg;
       }
     }
   }
@@ -152,8 +152,8 @@ $split-button-pip-left-lrg:    emCalc(-9px) !default;
 
     &.secondary { @include split-button(false, $split-button-pip-color-alt, false, false); }
 
-    &.radius span { @include side-radius(right, $global-radius); }
-    &.round span { @include side-radius(right, 1000px); }
+    &.radius span { @include side-radius($opposite-direction, $global-radius); }
+    &.round span { @include side-radius($opposite-direction, 1000px); }
   }
 
 }

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

@@ -30,7 +30,7 @@ $sub-nav-active-cursor:      default !default;
   overflow: hidden;
   margin: $sub-nav-list-margin;
   padding-top: $sub-nav-list-padding-top;
-  margin-#{$default-opposite}: 0;
+  margin-#{$opposite-direction}: 0;
   margin-#{$default-float}: emCalc(-9px);
 
   dt,

data/scss/foundation/components/_switch.scss

@@ -57,15 +57,14 @@ $switch-label-outline:            1px dotted #888 !default;
   // Default label styles for type and transition
   label {
     position: relative;
-    left: 0;
+    #{$default-float}: 0;
     z-index: 2;
-    float: left;
+    float: $default-float;
     width: 50%;
     height: 100%;
     margin: 0;
-    text-align: right;
     font-weight: bold;
-    text-align: left;
+    text-align: $default-float;
 
     // Transition for the switch label to follow paddle
     @include single-transition(all, $transition-speed, $transition-ease);
@@ -91,7 +90,7 @@ $switch-label-outline:            1px dotted #888 !default;
   & > span {
     position: absolute;
     top: -1px;
-    left: -1px;
+    #{$default-float}: -1px;
     z-index: 1;
     display: block;
     padding: 0;
@@ -107,19 +106,19 @@ $switch-label-outline:            1px dotted #888 !default;
 
   // Controlling the position of the labels as they are toggled.
   input:checked { display: none !important; }
-  input { left: 0; display: block !important; }
+  input { #{$default-float}: 0; display: block !important; }
 
   // Left Label alignment and position changes, including fixes for while inside a custom form
   input:first-of-type + label,
-  input:first-of-type + span + label { left: -50%; }
+  input:first-of-type + span + label { #{$default-float}: -50%; }
   input:first-of-type:checked + label,
-  input:first-of-type:checked + span + label { left: 0%; }
+  input:first-of-type:checked + span + label { #{$default-float}: 0%; }
 
   // Right Label alignment and position changes, including fixes for while inside a custom form
   input:last-of-type + label,
-  input:last-of-type + span + label { right: -50%; left: auto; text-align: right; }
+  input:last-of-type + span + label {#{$opposite-direction}: -50%; #{$default-float}: auto; text-align: $opposite-direction; }
   input:last-of-type:checked + label,
-  input:last-of-type:checked + span + label { right: 0%; left: auto; }
+  input:last-of-type:checked + span + label { #{$opposite-direction}: 0%; #{$default-float}: auto; }
 
   // Hiding custom form spans since we auto-create them
   span.custom { display: none !important; }
@@ -144,8 +143,8 @@ $switch-label-outline:            1px dotted #888 !default;
   input {
     // Move the paddle to the right position
     &:first-of-type:checked ~ span {
-      left: 100%;
-      margin-left: emCalc(-$height + 1px);
+      #{$default-float}: 100%;
+      margin-#{$default-float}: emCalc(-$height + 1px);
     }
   }