diff --git a/ionic/components/radio/radio.ios.scss b/ionic/components/radio/radio.ios.scss
index 0c6eea8725..785b52c511 100644
--- a/ionic/components/radio/radio.ios.scss
+++ b/ionic/components/radio/radio.ios.scss
@@ -12,6 +12,9 @@ $radio-ios-icon-border-style: solid !default;
$radio-ios-disabled-opacity: .3 !default;
+$radio-ios-item-left-margin: 8px 21px 8px 3px !default;
+$radio-ios-item-right-margin: $item-ios-padding-media-top 11px $item-ios-padding-media-bottom ($item-ios-padding-left / 2) !default;
+
ion-radio {
position: relative;
@@ -69,7 +72,11 @@ ion-radio {
position: static;
display: block;
- margin: $item-ios-padding-media-top ($item-ios-padding-right / 2) $item-ios-padding-media-bottom ($item-ios-padding-left / 2);
+ margin: $radio-ios-item-right-margin;
+
+ &[item-left] {
+ margin: $radio-ios-item-left-margin;
+ }
}
.item-radio ion-label {
diff --git a/ionic/components/radio/radio.md.scss b/ionic/components/radio/radio.md.scss
index aa4c22fd83..91ef7360da 100644
--- a/ionic/components/radio/radio.md.scss
+++ b/ionic/components/radio/radio.md.scss
@@ -17,6 +17,8 @@ $radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
$radio-md-disabled-opacity: .3 !default;
+$radio-md-item-left-margin: 11px 36px 10px 4px !default;
+$radio-md-item-right-margin: $item-md-padding-media-top 10px $item-md-padding-media-bottom 0 !default;
ion-radio {
position: relative;
@@ -97,7 +99,11 @@ ion-radio {
position: static;
display: block;
- margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom 0;
+ margin: $radio-md-item-right-margin;
+
+ &[item-left] {
+ margin: $radio-md-item-left-margin;
+ }
}
.item-radio ion-label {
diff --git a/ionic/components/radio/radio.wp.scss b/ionic/components/radio/radio.wp.scss
index 8ab04053d6..7c7aee89e4 100644
--- a/ionic/components/radio/radio.wp.scss
+++ b/ionic/components/radio/radio.wp.scss
@@ -17,6 +17,9 @@ $radio-wp-icon-border-radius: 50% !default;
$radio-wp-disabled-opacity: .3 !default;
+$radio-wp-item-left-margin: 9px 20px 9px 4px !default;
+$radio-wp-item-right-margin: 11px 10px 10px 0 !default;
+
ion-radio {
position: relative;
@@ -99,7 +102,12 @@ ion-radio {
order: $radio-wp-order;
- margin: $item-wp-padding-media-top $item-wp-padding-right $item-wp-padding-media-bottom 0;
+ margin: $radio-wp-item-left-margin;
+
+ &[item-right] {
+ order: 0;
+ margin: $radio-wp-item-right-margin;
+ }
}
.item-radio ion-label {
diff --git a/ionic/components/radio/test/basic/main.html b/ionic/components/radio/test/basic/main.html
index 8193ed743a..099f39a6c6 100644
--- a/ionic/components/radio/test/basic/main.html
+++ b/ionic/components/radio/test/basic/main.html
@@ -14,9 +14,14 @@
Fruits
+
+ Button w/ left side default icon, really long text that should ellipsis
+
+
+
Apple
-
+
@@ -34,6 +39,16 @@
+
+ Radio right side
+
+
+
+
+ Button w/ right side default icon, really long text that should ellipsis
+
+
+