Fix side-radius @mixin, fixes #1677

This makes possible to combine two side-radius declarations in a class, without overriding prior declarations. This will fix a problem in button-groups when only one button is left in the group.

diff --git a/scss/foundation/_foundation-global.scss b/scss/foundation/_foundation-global.scss
index 8c114aa77fd4625993c34f4006fb19b89632caff..cc708ca4102f1a1fb25d9b62e2535d3b20ce3d1f 100644 (file)
--- a/scss/foundation/_foundation-global.scss
+++ b/scss/foundation/_foundation-global.scss
@@ -84,20 +84,36 @@ $include-print-styles: true !default;
 // We use this to create equal side border radius on elements.
 @mixin side-radius($side, $radius) {
   @if $side == left {
-    -webkit-border-radius: $radius 0 0 $radius;
-    border-radius: $radius 0 0 $radius;
+    -moz-border-radius-bottomleft: $radius;
+    -moz-border-radius-topleft: $radius;
+    -webkit-border-bottom-left-radius: $radius;
+    -webkit-border-top-left-radius: $radius;
+    border-bottom-left-radius: $radius;
+    border-top-left-radius: $radius;
   }
   @else if $side == right {
-    -webkit-border-radius: 0 $radius $radius 0;
-    border-radius: 0 $radius $radius 0;
+    -moz-border-radius-topright: $radius;
+    -moz-border-radius-bottomright: $radius;
+    -webkit-border-top-right-radius: $radius;
+    -webkit-border-bottom-right-radius: $radius;
+    border-top-right-radius: $radius;
+    border-bottom-right-radius: $radius;
   }
   @else if $side == top {
-    -webkit-border-radius: $radius $radius 0 0;
-    border-radius: $radius $radius 0 0;
+    -moz-border-radius-topright: $radius;
+    -moz-border-radius-topleft: $radius;
+    -webkit-border-top-right-radius: $radius;
+    -webkit-border-top-left-radius: $radius;
+    border-top-right-radius: $radius;
+    border-top-left-radius: $radius;
   }
   @else if $side == bottom {
-    -webkit-border-radius: 0 0 $radius $radius;
-    border-radius: 0 0 $radius $radius;
+    -moz-border-radius-bottomright: $radius;
+    -moz-border-radius-bottomleft: $radius;
+    -webkit-border-bottom-right-radius: $radius;
+    -webkit-border-bottom-left-radius: $radius;
+    border-bottom-right-radius: $radius;
+    border-bottom-left-radius: $radius;
   }
 }
 
@@ -225,4 +241,4 @@ $large-screen: emCalc(1440px) !default;
 
 $small: "only screen and (min-width:"#{$small-screen}")" !default;
 $medium: "only screen and (min-width:"#{$medium-screen}")" !default;
-$large: "only screen and (min-width:"#{$large-screen}")" !default;
\ No newline at end of file
+$large: "only screen and (min-width:"#{$large-screen}")" !default;