From 36126513348158d8197ad7cef3b03d7fa73a7d30 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Tue, 22 Jan 2019 14:43:58 -0500
Subject: [PATCH] fix(item): fix margins on slotted content (avatar, thumbnail)
 (#17065)

- style all slots margin by removing the `:not(.interactive)`
- updates toggle margin

fixes #16997
---
 core/src/components/item/item.ios.scss        | 36 ++++++++++++++-----
 core/src/components/item/item.md.scss         | 14 ++++++--
 core/src/components/list/test/spec/index.html |  1 +
 3 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss
index d32229e1cf..c4bfcde6cd 100644
--- a/core/src/components/item/item.ios.scss
+++ b/core/src/components/item/item.ios.scss
@@ -70,19 +70,35 @@
 // iOS Item Slots
 // --------------------------------------------------
 
-::slotted(:not(.interactive)[slot="start"]) {
+::slotted([slot="start"]) {
   @include margin($item-ios-slot-start-margin-top, $item-ios-slot-start-margin-end, $item-ios-slot-start-margin-bottom, $item-ios-slot-start-margin-start);
 }
 
-::slotted(:not(.interactive)[slot="end"]) {
+::slotted([slot="end"]) {
   @include margin($item-ios-slot-end-margin-top, $item-ios-slot-end-margin-end, $item-ios-slot-end-margin-bottom, $item-ios-slot-end-margin-start);
 }
 
+
+// iOS Slotted Icon
+// --------------------------------------------------
+
 ::slotted(ion-icon[slot="start"]),
 ::slotted(ion-icon[slot="end"]) {
   @include margin($item-ios-icon-slot-margin-top, $item-ios-icon-slot-margin-end, $item-ios-icon-slot-margin-bottom, $item-ios-icon-slot-margin-start);
 }
 
+
+// iOS Slotted Toggle
+// --------------------------------------------------
+
+::slotted(ion-toggle[slot="start"]),
+::slotted(ion-toggle[slot="end"]) {
+  @include margin(0);
+}
+
+// iOS Stacked / Floating Labels
+// --------------------------------------------------
+
 :host(.item-label-stacked) ::slotted([slot="end"]),
 :host(.item-label-floating) ::slotted([slot="end"]) {
   @include margin($item-ios-label-slot-end-margin-top, $item-ios-label-slot-end-margin-end, $item-ios-label-slot-end-margin-bottom, $item-ios-label-slot-end-margin-start);
@@ -122,6 +138,16 @@
   @include margin(($item-ios-padding-end / 2));
 }
 
+
+// iOS Radio / Toggle Item Label
+// -----------------------------------------
+
+:host(.item-radio) ::slotted(ion-label),
+:host(.item-toggle) ::slotted(ion-label) {
+  @include margin-horizontal(0px, null);
+}
+
+
 // TODO: MOVE FROM RADIO
 // iOS Radio Item Label: Checked
 // -----------------------------------------
@@ -131,12 +157,6 @@
 // }
 
 
-:host(.item-radio) ::slotted(ion-label),
-:host(.item-toggle) ::slotted(ion-label) {
-  @include margin-horizontal(0px, null);
-}
-
-
 // iOS Slotted Label
 // --------------------------------------------------
 
diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss
index 63f25d014d..bc87126498 100644
--- a/core/src/components/item/item.md.scss
+++ b/core/src/components/item/item.md.scss
@@ -86,11 +86,11 @@
 // Material Design Item Slots
 // --------------------------------------------------
 
-::slotted(:not(.interactive)[slot="start"]) {
+::slotted([slot="start"]) {
   @include margin-horizontal($item-md-start-slot-margin-start, $item-md-start-slot-margin-end);
 }
 
-::slotted(:not(.interactive)[slot="end"]) {
+::slotted([slot="end"]) {
   @include margin-horizontal($item-md-end-slot-margin-start, $item-md-end-slot-margin-end);
 }
 
@@ -99,7 +99,6 @@
 // --------------------------------------------------
 
 ::slotted(ion-icon) {
-
   color: $item-md-icon-slot-color;
 
   font-size: $item-md-icon-slot-font-size;
@@ -118,6 +117,15 @@
 }
 
 
+// Material Design Slotted Toggle
+// --------------------------------------------------
+
+::slotted(ion-toggle[slot="start"]),
+::slotted(ion-toggle[slot="end"]) {
+  @include margin(0);
+}
+
+
 // Material Design Slotted Note
 // --------------------------------------------------
 
diff --git a/core/src/components/list/test/spec/index.html b/core/src/components/list/test/spec/index.html
index 02f79d0f53..6c989bc1b3 100644
--- a/core/src/components/list/test/spec/index.html
+++ b/core/src/components/list/test/spec/index.html
@@ -312,6 +312,7 @@
       margin: 0;
     }
 
+    body,
     ion-list {
       background: #e5e5e5 !important;
     }