fix(toggle): add styling for toggle when placed left

BREAKING CHANGES: renamed Sass variables in toggle, checkbox, and radio. Changed `media` in `component-mode-media-padding` (for example) to `item-left`. references #5925
ionic-team · May 4, 2016 · ab82d53 · ab82d53
1 parent e075ccd
commit ab82d53
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 6 deletions.
diff --git a/ionic/components/radio/radio.wp.scss b/ionic/components/radio/radio.wp.scss
@@ -106,6 +106,7 @@ ion-radio {
 
   &[item-right] {
     order: 0;
+
     margin: $radio-wp-item-right-margin;
   }
 }

diff --git a/ionic/components/toggle/test/basic/main.html b/ionic/components/toggle/test/basic/main.html
@@ -7,6 +7,16 @@
 
     <ion-list>
 
+      <ion-item>
+        Left side default icon, really long text that should ellipsis ellipsis ellipsis
+        <ion-icon name="information-circle" item-left></ion-icon>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>Apple</ion-label>
+        <ion-toggle item-left value="apple"></ion-toggle>
+      </ion-item>
+
       <ion-item>
         <ion-label>Apple, ngControl</ion-label>
         <ion-toggle ngControl="appleCtrl"></ion-toggle>

diff --git a/ionic/components/toggle/toggle.ios.scss b/ionic/components/toggle/toggle.ios.scss
@@ -21,12 +21,14 @@ $toggle-ios-handle-box-shadow:         0 3px 12px rgba(0, 0, 0, .16), 0 3px 1px
 $toggle-ios-handle-background-color:   $toggle-ios-background-color-off !default;
 
 $toggle-ios-media-margin:              0 !default;
-$toggle-ios-media-padding:             6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left) !default;
 
 $toggle-ios-transition-duration:       300ms !default;
 
 $toggle-ios-disabled-opacity:          .3 !default;
 
+$toggle-ios-item-left-padding:         6px 16px 5px 0 !default;
+$toggle-ios-item-right-padding:        6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left) !default;
+
 
 // iOS Toggle
 // -----------------------------------------
@@ -164,7 +166,11 @@ ion-toggle {
 
 .item ion-toggle {
   margin: $toggle-ios-media-margin;
-  padding: $toggle-ios-media-padding;
+  padding: $toggle-ios-item-right-padding;
+
+  &[item-left] {
+    padding: $toggle-ios-item-left-padding;
+  }
 }
 
 

diff --git a/ionic/components/toggle/toggle.md.scss b/ionic/components/toggle/toggle.md.scss
@@ -18,12 +18,14 @@ $toggle-md-handle-box-shadow:            0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1
 $toggle-md-handle-border-radius:         50% !default;
 
 $toggle-md-media-margin:                 0 !default;
-$toggle-md-media-padding:                12px ($item-md-padding-right / 2) 12px $item-md-padding-left !default;
 
 $toggle-md-transition-duration:          300ms !default;
 
 $toggle-md-disabled-opacity:             .3 !default;
 
+$toggle-md-item-left-padding:            12px 18px 12px 2px !default;
+$toggle-md-item-right-padding:           12px ($item-md-padding-right / 2) 12px $item-md-padding-left !default;
+
 
 // Material Design Toggle
 // -----------------------------------------
@@ -110,9 +112,13 @@ ion-toggle {
 
 .item ion-toggle {
   margin: $toggle-md-media-margin;
-  padding: $toggle-md-media-padding;
+  padding: $toggle-md-item-right-padding;
 
   cursor: pointer;
+
+  &[item-left] {
+    padding: $toggle-md-item-left-padding;
+  }
 }
 
 .item-toggle ion-label {

diff --git a/ionic/components/toggle/toggle.wp.scss b/ionic/components/toggle/toggle.wp.scss
@@ -24,12 +24,14 @@ $toggle-wp-handle-background-color-on:   color-contrast($colors-wp, $toggle-wp-a
 $toggle-wp-handle-border-radius:         50% !default;
 
 $toggle-wp-media-margin:                 0 !default;
-$toggle-wp-media-padding:                12px ($item-wp-padding-right / 2) 12px $item-wp-padding-left !default;
 
 $toggle-wp-transition-duration:          300ms !default;
 
 $toggle-wp-disabled-opacity:             .3 !default;
 
+$toggle-wp-item-left-padding:            12px 18px 12px 2px !default;
+$toggle-wp-item-right-padding:           12px ($item-wp-padding-right / 2) 12px $item-wp-padding-left !default;
+
 
 // Windows Toggle
 // -----------------------------------------
@@ -115,9 +117,13 @@ ion-toggle {
 
 .item ion-toggle {
   margin: $toggle-wp-media-margin;
-  padding: $toggle-wp-media-padding;
+  padding: $toggle-wp-item-right-padding;
 
   cursor: pointer;
+
+  &[item-left] {
+    padding: $toggle-wp-item-left-padding;
+  }
 }
 
 .item-toggle ion-label {