From ab82d532dc0e25d538510bbf3b8b0ec66b1e72be Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 3 May 2016 15:27:13 -0400
Subject: [PATCH] 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/components/radio/radio.wp.scss         |  1 +
 ionic/components/toggle/test/basic/main.html | 10 ++++++++++
 ionic/components/toggle/toggle.ios.scss      | 10 ++++++++--
 ionic/components/toggle/toggle.md.scss       | 10 ++++++++--
 ionic/components/toggle/toggle.wp.scss       | 10 ++++++++--
 5 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/ionic/components/radio/radio.wp.scss b/ionic/components/radio/radio.wp.scss
index 7c7aee89e45..5afe8f91e2c 100644
--- 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
index 731810e576b..d3906ae5b87 100644
--- 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
index bacb44da9c6..fc9a46f3ed5 100644
--- 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
index eae1c008d09..5f021a79d89 100644
--- 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
index 20aaac1bf56..4e4000c1df6 100644
--- 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 {