From 4c5dd0b505cb1d274e6e9733528cf5fe4cb79605 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 3 May 2016 14:51:17 -0400
Subject: [PATCH] fix(radio): add styling for radio when item-left/item-right
 is added

references #5925
---
 ionic/components/radio/radio.ios.scss       |  9 ++++++++-
 ionic/components/radio/radio.md.scss        |  8 +++++++-
 ionic/components/radio/radio.wp.scss        | 10 +++++++++-
 ionic/components/radio/test/basic/main.html | 17 ++++++++++++++++-
 4 files changed, 40 insertions(+), 4 deletions(-)

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
       </ion-list-header>
 
+      <ion-item>
+        Button w/ left side default icon, really long text that should ellipsis
+        <ion-icon name="information-circle" item-left></ion-icon>
+      </ion-item>
+
       <ion-item>
         <ion-label>Apple</ion-label>
-        <ion-radio value="apple"></ion-radio>
+        <ion-radio item-left value="apple"></ion-radio>
       </ion-item>
 
       <ion-item>
@@ -34,6 +39,16 @@
         <ion-radio value="disabled" disabled="true"></ion-radio>
       </ion-item>
 
+      <ion-item>
+        <ion-label>Radio right side</ion-label>
+        <ion-radio item-right checked></ion-radio>
+      </ion-item>
+
+      <ion-item>
+        Button w/ right side default icon, really long text that should ellipsis
+        <ion-icon name="information-circle" item-right></ion-icon>
+      </ion-item>
+
     </ion-list>
 
   </form>