fix(radio): add styling for radio when item-left/item-right is added

references #5925
ionic-team · May 4, 2016 · 4c5dd0b · 4c5dd0b
1 parent 5dddce3
commit 4c5dd0b
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>