zurb-foundation 3.0.9 → 3.1.0.rc1

data/lib/foundation/version.rb

@@ -1,3 +1,3 @@
 module Foundation
-  VERSION = "3.0.9"
+  VERSION = "3.1.0.rc1"
 end

data/scss/foundation/_settings.scss

@@ -7,6 +7,20 @@ $columnGutter: 30px !default;
 $totalColumns: 12 !default;
 $mobileTotalColumns: 4 !default;
 
+// Text Direction Settings
+
+$textDirection: ltr !default; // Controls default global text direction, 'rtl' or 'ltr'
+$defaultFloat: left !default; // Change this to 'right' for right-to-left languages
+$defaultOpposite: right !default; // Change this to 'left' for right-to-left languages
+
+@if $textDirection == ltr {
+  $defaultFloat: left;
+  $defaultOpposite: right;
+} @else {
+  $defaultFloat: right;
+  $defaultOpposite: left;
+}
+
 // Colors Settings
 
 $mainColor: #2ba6cb !default;
@@ -21,12 +35,13 @@ $shinyEdge: rgba(#fff, .5) !default;
 $darkEdge: rgba(#000, .2) !default;
 
 // Font Settings
+
 $headerFontFamily: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
 $headerFontWeight: bold !default;
 $headerFontColor: #222 !default;
 $bodyFontFamily: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
 $bodyFontWeight: normal !default;
-$bodyFontColor: #222 !default;
+$bodyFontColor: $txtColor !default;
 
 // Button Settings
 
@@ -50,6 +65,15 @@ $tabHeight: 40px !default;
 $navBarHeight: 40px !default;
 $navFlyoutBaseWidth: 250px !default;
 
+// UI Settings
+
+$thumbRadius: 3px !default;
+
+$progBarHeight: 25px !default;
+$progBarBorderColor: darken($white, 20%) !default;
+$progBarBorderSize: 1px !default;
+$progBarPad: 2px !default;
+
 // Off Canvas Width Settings
 
 $mainWidth: 80% !default;
@@ -82,6 +106,21 @@ $tapToCloseFontColor: #888 !default;
 $tooltipFontSizeScreenSmall: 14 !default;
 $tooltipBackgroundOpacityScreenSmall: 0.85 !default;
 
+// Top Bar Settings
+
+$topBarBgColor: #222 !default;
+$topBarHeight: 45px !default;
+$topBarBtmMargin: 30px !default;
+$topBarTitleWeight: bold !default;
+$topBarTitleSize: ms(1) !default;
+$topBarLinkColor: #fff !default;
+$topBarLinkWeight: bold !default;
+$topBarLinkSize: ms(0) - 1 !default;
+$topBarDropToggleSize: 5px !default;
+$topBarSearchWidth: 200px !default;
+$topBarBreakPoint: 940px !default; // Change to 9999px for always mobile layout
+$topBarNavToggleSize: 8px !default;
+
 // Media Queries
 
 $screenSmall: 768px !default;

data/scss/foundation/common/_forms.scss

@@ -25,13 +25,13 @@
   }
 
   .prefix, .postfix { display: block; position: relative; z-index: 2; text-align: center; width: 100%; padding-top: 0; padding-bottom: 0; height: (ms(0) + ($formSpacing * 1.5)); line-height: (ms(0) + ($formSpacing * 1.5)) - 1; }
-  a.button.prefix, a.button.postfix { padding-left: 0; padding-right: 0; text-align: center; }
+  a.button.prefix, a.button.postfix { padding-#{$defaultFloat}: 0; padding-#{$defaultOpposite}: 0; text-align: center; }
   span.prefix, span.postfix { background: darken($white, 5%); border: 1px solid darken($white, 20%); }
 
-  .prefix { left: 2px; @include border-corner-radius(top, left, 2px); @include border-corner-radius(bottom, left, 2px); }
-  .postfix { right: 2px; @include border-corner-radius(top, right, 2px); @include border-corner-radius(bottom, right, 2px); }
+  .prefix { #{$defaultFloat}: 2px; @include border-corner-radius(top, $defaultFloat, 2px); @include border-corner-radius(bottom, $defaultFloat, 2px); overflow:hidden; }
+  .postfix { #{$defaultOpposite}: 2px; @include border-corner-radius(top, $defaultOpposite, 2px); @include border-corner-radius(bottom, $defaultOpposite, 2px); }
 
-  input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea { border: 1px solid darken($white, 20%); @include border-radius(2px); @include box-shadow(inset 0 1px 2px rgba(0,0,0,0.1)); color: rgba(0,0,0,0.75); display: block; font-size: ms(0); margin: 0 0 $formSpacing 0; padding: ($formSpacing / 2); height: (ms(0) + ($formSpacing * 1.5)); width: 100%; @include transition(all 0.15s linear);
+  input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea { font-family: $bodyFontFamily; border: 1px solid darken($white, 20%); @include border-radius(2px); @include box-shadow(inset 0 1px 2px rgba(0,0,0,0.1)); color: rgba(0,0,0,0.75); display: block; font-size: ms(0); margin: 0 0 $formSpacing 0; padding: ($formSpacing / 2); height: (ms(0) + ($formSpacing * 1.5)); width: 100%; @include transition(all 0.15s linear);
 
     &.oversize { font-size: ms(1); padding: (($formSpacing - 4) / 2) ($formSpacing / 2); }
 
@@ -46,13 +46,13 @@
   /* Fieldsets */
   fieldset { border: solid 1px #ddd; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; padding: 12px 12px 0; margin: 18px 0;
 
-    legend { font-weight: bold; background: $white; padding: 0 3px; margin: 0 0 0 -3px; }
+    legend { font-weight: bold; background: $white; padding: 0 3px; margin: 0; margin-#{$defaultFloat}: -3px; }
   }
 
   /* Errors */
   .error input, input.error, .error textarea, textarea.error { border-color: $alertColor; background-color: rgba($alertColor, 0.1); }
   .error label, label.error { color: $alertColor; }
-  .error small, small.error { display: block; padding: 6px 4px; margin-top: -($formSpacing) - 1; margin-bottom: $formSpacing; background: $alertColor; color: #fff; @include font-size(12); font-weight: bold; @include border-bottom-left-radius(2px); @include border-bottom-right-radius(2px); }
+  .error small, small.error { display: block; padding: 6px 4px; margin-top: -($formSpacing) - 1; margin-bottom: $formSpacing; background: $alertColor; color: #fff; @include font-size(12); font-weight: bold; @include border-corner-radius(bottom, $defaultFloat, 2px); @include border-corner-radius(bottom, $defaultOpposite, 2px); }
 
   @media only screen and (max-width: $screenSmall - 1) {
     @for $i from 1 through $totalColumns {
@@ -68,10 +68,10 @@
 
       &.radio { @include border-radius(100px); }
       &.checkbox {
-        &:before { content: ""; display: block; line-height: 0.8; height: 14px; width: 14px; text-align: center; position: absolute; top: 0; left: 0; font-size: 14px; color: #fff; }
+        &:before { content: ""; display: block; line-height: 0.8; height: 14px; width: 14px; text-align: center; position: absolute; top: 0; #{$defaultFloat}: 0; font-size: 14px; color: #fff; }
       }
       &.radio.checked {
-        &:before { content: ""; display: block; width: 8px; height: 8px; @include border-radius(100px); background: #222; position: relative; top: 3px; left: 3px; }
+        &:before { content: ""; display: block; width: 8px; height: 8px; @include border-radius(100px); background: #222; position: relative; top: 3px; #{$defaultFloat}: 3px; }
       }
       &.checkbox.checked {
         &:before { content: "\00d7"; color: #222; }
@@ -79,9 +79,9 @@
     }
     div.custom.dropdown { display: block; position: relative; width: auto; height: 28px; margin-bottom: 9px; margin-top: 2px;
 
-      a.current { display: block; width: auto; line-height: 26px; min-height: 28px; padding: 0 38px 0 6px; border: solid 1px #ddd; color: #141414; background-color: #fff; white-space: nowrap; }
-      a.selector { position: absolute; width: 27px; height: 28px; display: block; right: 0; top: 0; border: solid 1px #ddd;
-        &:after { content: ""; display: block; @include cssTriangle(5px, #aaa, top); position: absolute; left: 50%; top: 50%; margin-top: -2px; margin-left: -5px;  }
+      a.current { display: block; width: auto; line-height: 26px; min-height: 28px; padding: 0; padding-#{$defaultFloat}: 6px; padding-#{$defaultOpposite}: 38px; border: solid 1px #ddd; color: #141414; background-color: #fff; white-space: nowrap; }
+      a.selector { position: absolute; width: 27px; height: 28px; display: block; #{$defaultOpposite}: 0; top: 0; border: solid 1px #ddd;
+        &:after { content: ""; display: block; @include cssTriangle(5px, #aaa, top); position: absolute; #{$defaultFloat}: 50%; top: 50%; margin-top: -2px; margin-#{$defaultFloat}: -5px;  }
       }
       &:hover, &.open {
         a.selector { &:after { @include cssTriangle(5px, #222, top); } }
@@ -100,14 +100,14 @@
       &.open.expand ul { width: 100% !important; }
     }
 
-    div.custom.dropdown ul { position: absolute; width: auto; display: none; margin: 0; left: 0; top: 27px; margin: 0; padding: 0; background: #fff; background: rgba(#fff,0.95); border: solid 1px darken($white, 20%);
+    div.custom.dropdown ul { position: absolute; width: auto; display: none; margin: 0; #{$defaultFloat}: 0; top: 27px; margin: 0; padding: 0; background: #fff; background: rgba(#fff,0.95); border: solid 1px darken($white, 20%);
 
-      li { color: #555; font-size: ms(0) - 1; cursor: pointer; padding: 3px 38px 3px 6px; min-height: 18px; line-height: 18px; margin: 0; white-space: nowrap; list-style: none; }
+      li { color: #555; font-size: ms(0) - 1; cursor: pointer; padding: 3px; padding-#{$defaultFloat}: 6px; padding-#{$defaultOpposite}: 38px; min-height: 18px; line-height: 18px; margin: 0; white-space: nowrap; list-style: none; }
       li.selected { background: lighten($mainColor, 40%); color: #000;
-        &:after { content: "\2013"; position: absolute; right: 10px; }
+        &:after { content: "\2013"; position: absolute; #{$defaultOpposite}: 10px; }
       }
       li:hover { background-color: lighten($mainColor, 45%); color: #222;
-        &:after { content: "\2013"; position: absolute; right: 10px; color: lighten($mainColor, 25%); }
+        &:after { content: "\2013"; position: absolute; #{$defaultOpposite}: 10px; color: lighten($mainColor, 25%); }
       }
       li.selected:hover { background: lighten($mainColor, 40%); cursor: default; color: #000;
         &:after { color: #000; }

data/scss/foundation/common/_globals.scss

@@ -15,8 +15,12 @@
 
 /* Misc ---------------------- */
 
-  .left        { float: left; }
-  .right       { float: right; }
+  .left        { float: left;
+    @include respondTo(smallScreen) { float: none; }
+  }
+  .right       { float: right;
+    @include respondTo(smallScreen) { float: none; }
+  }
   .text-left   { text-align: left; }
   .text-right  { text-align: right; }
   .text-center { text-align: center; }

data/scss/foundation/common/_typography.scss

@@ -1,9 +1,10 @@
   /* Base Type Styles Using Modular Scale ---------------------- */
 
-  body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td {
+  body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,th,td {
     margin:0;
     padding:0;
     font-size: ms(0);
+    direction: $textDirection;
   }
 
   p { font-family: $bodyFontFamily; font-weight: $bodyFontWeight; font-size: ms(0); line-height: 1.6; margin-bottom: ms(1);
@@ -14,6 +15,7 @@
   h1, h2, h3, h4, h5, h6 {
     font-family: $headerFontFamily;
     font-weight: $headerFontWeight;
+    color: $headerFontColor;
     text-rendering: optimizeLegibility;
     line-height: 1.1;
     margin-bottom: ms(0);
@@ -41,9 +43,9 @@
   ul, ol { font-size: ms(0); line-height: 1.6; margin-bottom: ms(1); list-style-position: inside; }
   ul {
     li {
-      ul, ol { margin-left: 20px; margin-bottom: 0; }
+      ul, ol { margin-#{$defaultFloat}: 20px; margin-bottom: 0; }
     }
-    &.square, &.circle, &.disc { margin-left: ms(1); }
+    &.square, &.circle, &.disc { margin-#{$defaultFloat}: ms(1); }
     &.square { list-style-type: square;
       li ul { list-style: inherit; }
     }
@@ -58,13 +60,13 @@
   }
   ol {
     li {
-      ul, ol { margin-left: 20px; margin-bottom: 0; }
+      ul, ol { margin-#{$defaultFloat}: 20px; margin-bottom: 0; }
     }
   }
 
   /* Blockquotes ---------------------- */
   blockquote, blockquote p { line-height: 1.5; color: lighten($headerFontColor, 30%); }
-  blockquote { margin: 0 0 ms(1); padding: 9px 20px 0 19px; border-left: 1px solid #ddd;
+  blockquote { margin: 0 0 ms(1); padding: 9px 20px 0 19px; border-#{$defaultFloat}: 1px solid #ddd;
     cite { display: block; font-size: ms(0) - 1; color: lighten($headerFontColor, 20%);
       &:before { content: "\2014 \0020"; }
       a, a:visited { color: lighten($headerFontColor, 20%); }

data/scss/foundation/components/_grid.scss

@@ -11,12 +11,12 @@
     }
   }
 
-  .column, .columns { float: left; min-height: 1px; padding: 0 ($columnGutter/2); position: relative;
+  .column, .columns { float: $defaultFloat; min-height: 1px; padding: 0 ($columnGutter/2); position: relative;
     &.centered { float: none; margin: 0 auto; }
   }
 
-  [class*="column"] + [class*="column"]:last-child { float: right; }
-  [class*="column"] + [class*="column"].end { float: left; }
+  [class*="column"] + [class*="column"]:last-child { float: $defaultOpposite; }
+  [class*="column"] + [class*="column"].end { float: $defaultFloat; }
 
   // Creating column classes
   @for $i from 1 through $totalColumns {
@@ -33,14 +33,14 @@
   // Creating .row .offset-by-# classes
   @for $i from 1 through $totalColumns - 2 {
     .row {
-      .offset-by-#{convert-number-to-word($i)} { margin-left: gridCalc($i, $totalColumns); }
+      .offset-by-#{convert-number-to-word($i)} { margin-#{$defaultFloat}: gridCalc($i, $totalColumns); }
     }
   }
 
   // Creating .row .push-# classes
   @for $i from 2 through $totalColumns - 2 {
-    .push-#{convert-number-to-word($i)} { left: gridCalc($i, $totalColumns); }
-    .pull-#{convert-number-to-word($i)} { right: gridCalc($i, $totalColumns); }
+    .push-#{convert-number-to-word($i)} { #{$defaultFloat}: gridCalc($i, $totalColumns); }
+    .pull-#{convert-number-to-word($i)} { #{$defaultOpposite}: gridCalc($i, $totalColumns); }
   }
 
   img, object, embed { max-width: 100%; height: auto; }
@@ -54,9 +54,9 @@
   /* Mobile Grid and Overrides ---------------------- */
 
   @media only screen and (max-width: $screenSmall - 1) {
-    body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
+    body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; width: 100%; min-width: 0; margin-#{$defaultFloat}: 0; margin-#{$defaultOpposite}: 0; padding-#{$defaultFloat}: 0; padding-#{$defaultOpposite}: 0; }
 
-    .row { width: auto; min-width: 0; margin-left: 0; margin-right: 0; }
+    .row { width: auto; min-width: 0; margin-#{$defaultFloat}: 0; margin-#{$defaultOpposite}: 0; }
     .column, .columns { width: auto !important; float: none;  }
     .column:last-child, .columns:last-child { float: none; }
     [class*="column"] + [class*="column"]:last-child { float: none; }
@@ -64,23 +64,23 @@
     .column:after, .columns:after { clear: both; }
 
     // Placeholder classes for mobile grid overrides
-    %no-left-margin { margin-left: 0 !important; }
-    %left-auto { left: auto; }
-    %right-auto { right: auto; }
+    %no-default-margin { margin-#{$defaultFloat}: 0 !important; }
+    %default-auto { #{$defaultFloat}: auto; }
+    %opposite-auto { #{$defaultOpposite}: auto; }
 
     @for $i from 1 through $totalColumns - 2 {
-      .offset-by-#{convert-number-to-word($i)} { @extend %no-left-margin; }
+      .offset-by-#{convert-number-to-word($i)} { @extend %no-default-margin; }
     }
     @for $i from 2 through $totalColumns - 2 {
-      .push-#{convert-number-to-word($i)} { @extend %left-auto; }
-      .pull-#{convert-number-to-word($i)} { @extend %right-auto; }
+      .push-#{convert-number-to-word($i)} { @extend %default-auto; }
+      .pull-#{convert-number-to-word($i)} { @extend %opposite-auto; }
     }
 
     /* Mobile 4-column Grid */
     @for $i from 1 through $mobileTotalColumns {
       .row {
-        .mobile-#{convert-number-to-word($i)} { width: gridCalc($i, $mobileTotalColumns) !important; float: left; padding: 0 ($columnGutter/2);
-          &:last-child { float: right; }
+        .mobile-#{convert-number-to-word($i)} { width: gridCalc($i, $mobileTotalColumns) !important; float: $defaultFloat; padding: 0 ($columnGutter/2);
+          &:last-child { float: $defaultOpposite; }
         }
         &.collapse {
           .mobile-#{convert-number-to-word($i)} { padding: 0; }
@@ -88,8 +88,8 @@
       }
     }
     @for $i from 1 through $mobileTotalColumns - 1 {
-      .push-#{convert-number-to-word($i)}-mobile { left: gridCalc($i, $mobileTotalColumns); }
-      .pull-#{convert-number-to-word($i)}-mobile { right: gridCalc($i, $mobileTotalColumns); }
+      .push-#{convert-number-to-word($i)}-mobile { #{$defaultFloat}: gridCalc($i, $mobileTotalColumns); }
+      .pull-#{convert-number-to-word($i)}-mobile { #{$defaultOpposite}: gridCalc($i, $mobileTotalColumns); }
     }
   }
 
@@ -108,7 +108,7 @@ that IE7/8 do not support :nth-child.
 
   .block-grid { display: block; overflow: hidden; padding: 0;
 
-    &>li { display: block; height: auto; float: left; }
+    &>li { display: block; height: auto; float: $defaultFloat; }
     &.one-up { margin: 0; 
       &>li { width: 100%; padding: 0 0 15px; }
     }
@@ -141,7 +141,7 @@ that IE7/8 do not support :nth-child.
   /* Mobile Block Grids */
   @media only screen and (max-width: $screenSmall - 1) {
     .block-grid.mobile {
-      &>li { float: none; width: 100%; margin-left: 0; }
+      &>li { float: none; width: 100%; margin-#{$defaultFloat}: 0; }
     }
 
     .block-grid {

data/scss/foundation/components/modules/_all.scss

@@ -1,5 +1,6 @@
 @import "buttons";
 @import "navbar";
+@import "topbar";
 // @import "offcanvas";
 @import "orbit";
 @import "reveal";

data/scss/foundation/components/modules/_buttons.scss

@@ -40,7 +40,7 @@
     &.round { @include border-radius(1000px); }
 
     /* Layout */
-    &.full-width { width: 100%; text-align: center; padding-left: 0px !important; padding-right: 0px !important; }
+    &.full-width { width: 100%; text-align: center; padding-#{$defaultFloat}: 0px !important; padding-#{$defaultOpposite}: 0px !important; }
     &.left-align { text-align: left; text-indent: 12px; }
 
 		/* Disabled ---------- */
@@ -64,7 +64,7 @@
 
 	@media only screen and (max-width: $screenSmall - 1) {
     .button { display: block; }
-    button.button, input[type="submit"].button { width: 100%; padding-left: 0; padding-right: 0; }
+    button.button, input[type="submit"].button { width: 100%; padding-#{$defaultFloat}: 0; padding-#{$defaultOpposite}: 0; }
   }
 
   /* Correct FF button padding */
@@ -78,24 +78,24 @@
 
 /* Buttons with Dropdowns ---------------------- */
 
-  .button.dropdown { position: relative; padding-right: (($btnBase + 12) * 2);
+  .button.dropdown { position: relative; padding-#{$defaultOpposite}: (($btnBase + 12) * 2);
 
     /* Sizes */
-    &.large { padding-right: ($largeBtnBase * 2) * 2; }
-    &.small { padding-right: ($smallBtnBase * 2) * 2; }
-    &.tiny { padding-right: ($tinyBtnBase * 2) * 2; }
+    &.large { padding-#{$defaultOpposite}: ($largeBtnBase * 2) * 2; }
+    &.small { padding-#{$defaultOpposite}: ($smallBtnBase * 2) * 2; }
+    &.tiny { padding-#{$defaultOpposite}: ($tinyBtnBase * 2) * 2; }
 
     /* Triangles */
-    &:after { @include cssTriangle(6px, #fff, top); position: absolute; top: 50%; right: $btnBase * 2; margin-top: -2px; }
-    &.large:after { @include cssTriangle(7px, #fff, top); margin-top: -3px; right: $largeBtnBase * 2; }
-    &.small:after { @include cssTriangle(5px, #fff, top); margin-top: -2px; right: $smallBtnBase * 2; }
-    &.tiny:after { @include cssTriangle(4px, #fff, top); margin-top: -1px; right: $tinyBtnBase * 2; }
+    &:after { @include cssTriangle(6px, #fff, top); position: absolute; top: 50%; #{$defaultOpposite}: $btnBase * 2; margin-top: -2px; }
+    &.large:after { @include cssTriangle(7px, #fff, top); margin-top: -3px; #{$defaultOpposite}: $largeBtnBase * 2; }
+    &.small:after { @include cssTriangle(5px, #fff, top); margin-top: -2px; #{$defaultOpposite}: $smallBtnBase * 2; }
+    &.tiny:after { @include cssTriangle(4px, #fff, top); margin-top: -1px; #{$defaultOpposite}: $tinyBtnBase * 2; }
 
     /* Flyout List */
-    &>ul { @include box-sizing(content-box); display: none; position: absolute; left: -1px; background: #fff; background: rgba(#fff,0.95); list-style: none; margin: 0; padding: 0; border: 1px solid darken($white, 20%); border-top: none; min-width: 100%; z-index: 40;
+    &>ul { @include box-sizing(content-box); display: none; position: absolute; #{$defaultFloat}: -1px; background: #fff; background: rgba(#fff,0.95); list-style: none; margin: 0; padding: 0; border: 1px solid darken($white, 20%); border-top: none; min-width: 100%; z-index: 40;
 
       li { width: 100%; cursor: pointer; padding: 0; min-height: 18px; line-height: 18px; margin: 0; white-space: nowrap; list-style: none;
-        a { display: block; color: #555; font-size: ms(0) - 1; font-weight: $bodyFontWeight; padding: 6px 14px; text-align: left; }
+        a { display: block; color: #555; font-size: ms(0) - 1; font-weight: $bodyFontWeight; padding: 6px 14px; text-align: $defaultFloat; }
         &:hover { background-color: lighten($mainColor, 45%); color: #222; }
         &.divider { min-height: 0; padding: 0; height: 1px; margin: 4px 0; background: darken($white, 7%); }
       }
@@ -120,17 +120,17 @@
       &.secondary:hover { background-color: $secondaryColor; }
 
       /* Sizes */
-      &>a { color: $white; display: block; padding: $btnBase (($btnBase * 2.5) * 2) ($btnBase + 1) ($btnBase * 2); @include single-transition(background-color, .15s, ease-in-out);
+      &>a { color: $white; display: block; padding: $btnBase (($btnBase * 2.5) * 2) ($btnBase + 1) ($btnBase * 2); padding-#{$defaultFloat}: $btnBase * 2; padding-#{$defaultOpposite}: ($btnBase * 2.5) * 2; @include single-transition(background-color, .15s, ease-in-out);
         &:hover { background-color: darken($mainColor, 10%); }
       }
-      &.large>a { padding: $largeBtnBase (($largeBtnBase * 2.5) * 2) ($largeBtnBase + 1) ($largeBtnBase * 2); }
-      &.small>a { padding: $smallBtnBase (($smallBtnBase * 2.5) * 2) ($smallBtnBase + 1) ($smallBtnBase * 2); }
-      &.tiny>a { padding: $tinyBtnBase (($tinyBtnBase * 2.5) * 2) ($tinyBtnBase + 1) ($tinyBtnBase * 2); }
+      &.large>a { padding: $largeBtnBase (($largeBtnBase * 2.5) * 2) ($largeBtnBase + 1) ($largeBtnBase * 2); padding-#{$defaultFloat}: $largeBtnBase * 2; padding-#{$defaultOpposite}: ($largeBtnBase * 2.5) * 2; }
+      &.small>a { padding: $smallBtnBase (($smallBtnBase * 2.5) * 2) ($smallBtnBase + 1) ($smallBtnBase * 2); padding-#{$defaultFloat}: $smallBtnBase * 2; padding-#{$defaultOpposite}: ($smallBtnBase * 2.5) * 2; }
+      &.tiny>a { padding: $tinyBtnBase (($tinyBtnBase * 2.5) * 2) ($tinyBtnBase + 1) ($tinyBtnBase * 2); padding-#{$defaultFloat}: $tinyBtnBase * 2; padding-#{$defaultOpposite}: ($tinyBtnBase * 2.5) * 2; }
 
       /* Triangle Spans */
-      &>span { background-color: $mainColor; position: absolute; right: 0; top: 0; height: 100%; width: $btnBase * 3; border-left: 1px solid darken($mainColor, 15%); @include box-shadow(1px 1px 0 $shinyEdge inset); @include single-transition(background-color, .15s, ease-in-out);
+      &>span { background-color: $mainColor; position: absolute; #{$defaultOpposite}: 0; top: 0; height: 100%; width: $btnBase * 3; border-#{$defaultFloat}: 1px solid darken($mainColor, 15%); @include box-shadow(1px 1px 0 $shinyEdge inset); @include single-transition(background-color, .15s, ease-in-out);
         &:hover { background-color: darken($mainColor, 10%); }
-        &:after { @include cssTriangle(6px, #fff, top); position: absolute; top: 50%; left: 50%; margin-left: -6px; margin-top: -2px; }
+        &:after { @include cssTriangle(6px, #fff, top); position: absolute; top: 50%; #{$defaultFloat}: 50%; margin-#{$defaultFloat}: -6px; margin-top: -2px; }
       }
       &.secondary>span:after { @include cssTriangle(6px, darken(($secondaryColor), 80%), top); }
       
@@ -138,14 +138,14 @@
       &.small span { width: $smallBtnBase * 3; }
       &.tiny span { width: $tinyBtnBase * 3; }
 
-      &.large span:after { @include cssTriangle(7px, #fff, top); margin-top: -3px; margin-left: -7px; }
-      &.small span:after { @include cssTriangle(4px, #fff, top); margin-top: -1px; margin-left: -4px; }
-      &.tiny span:after { @include cssTriangle(3px, #fff, top); margin-top: -1px; margin-left: -3px; }
+      &.large span:after { @include cssTriangle(7px, #fff, top); margin-top: -3px; margin-#{$defaultFloat}: -7px; }
+      &.small span:after { @include cssTriangle(4px, #fff, top); margin-top: -1px; margin-#{$defaultFloat}: -4px; }
+      &.tiny span:after { @include cssTriangle(3px, #fff, top); margin-top: -1px; margin-#{$defaultFloat}: -3px; }
 
       /* Colors */
-      &.alert>span { background-color: $alertColor; border-left-color: darken($alertColor, 15%); }
-      &.success>span { background-color: $successColor; border-left-color: darken($successColor, 15%); }
-      &.secondary>span { background-color: $secondaryColor; border-left-color: darken($secondaryColor, 15%); }
+      &.alert>span { background-color: $alertColor; border-#{$defaultFloat}-color: darken($alertColor, 15%); }
+      &.success>span { background-color: $successColor; border-#{$defaultFloat}-color: darken($successColor, 15%); }
+      &.secondary>span { background-color: $secondaryColor; border-#{$defaultFloat}-color: darken($secondaryColor, 15%); }
       &.secondary>a { color: darken(($secondaryColor), 80%); }
 
       &.alert>a:hover, &.alert>span:hover { background-color: darken($alertColor, 10%); }
@@ -158,8 +158,8 @@
 
   ul.button-group { list-style: none; padding: 0; margin: 0 0 12px; @include clearfix();
 
-    li { padding: 0; margin: 0 0 0 -1px; float: left;
-      &:first-child { margin-left: 0; }
+    li { padding: 0; margin: 0 0 0 -1px; float: $defaultFloat;
+      &:first-child { margin-#{$defaultFloat}: 0; }
     }
 
     &.radius li {
@@ -167,12 +167,12 @@
         &.button, &.button.radius, &.button-rounded { @include border-radius(0px); }
       }
       &:first-child a {
-        &.button, &.button.radius { @include border-left-radius($buttonRadius); }
-        &.button.rounded { @include border-left-radius(1000px); }
+        &.button, &.button.radius {  @include border-corner-radius($defaultFloat, $buttonRadius); }
+        &.button.rounded { @include border-corner-radius($defaultFloat, 1000px); }
       }
       &:last-child a {
-        &.button, &.button.radius { @include border-right-radius($buttonRadius); }
-        &.button.rounded { @include border-right-radius(1000px); }
+        &.button, &.button.radius {  @include border-corner-radius($defaultOpposite, $buttonRadius); }
+        &.button.rounded { @include border-corner-radius($defaultOpposite, 1000px); }
       }
     }
 
@@ -194,11 +194,11 @@
         &.small     { padding: ($smallBtnBase) ($smallBtnBase * 2) ($smallBtnBase + 1); }
         &.tiny      { padding: ($tinyBtnBase) ($tinyBtnBase * 2) ($tinyBtnBase + 1); }
       }
-      &.even button.button, &.even input[type="submit"].button { width: 100%; padding-left: 0; padding-right: 0; }
+      &.even button.button, &.even input[type="submit"].button { width: 100%; padding-#{$defaultFloat}: 0; padding-#{$defaultOpposite}: 0; }
     }
   }
 
   div.button-bar { overflow: hidden;
-    ul.button-group { float: left; margin-right: 8px; }
-    ul.button-group:last-child { margin-left: 0; }
+    ul.button-group { float: $defaultFloat; margin-#{$defaultOpposite}: 8px; }
+    ul.button-group:last-child { margin-#{$defaultFloat}: 0; }
   }