refactor(item): remove item divider's dependency on item css

- removes the requirement for item to be used for item divider to work
- renames certain item sass variables
- removes some item variables from checkbox/radio

packages/core/src/components/checkbox/checkbox.ios.vars.scss

@@ -42,13 +42,13 @@ $checkbox-ios-icon-checkmark-color:       color-contrast($colors-ios, $checkbox-
 $checkbox-ios-disabled-opacity:           .3 !default;
 
 /// @prop - Margin top of the left checkbox item
-$checkbox-ios-item-start-margin-top:      $item-ios-padding-media-top !default;
+$checkbox-ios-item-start-margin-top:      8px !default;
 
 /// @prop - Margin end of the left checkbox item
 $checkbox-ios-item-start-margin-end:      $item-ios-padding-end !default;
 
 /// @prop - Margin bottom of the left checkbox item
-$checkbox-ios-item-start-margin-bottom:   $item-ios-padding-media-bottom !default;
+$checkbox-ios-item-start-margin-bottom:   $checkbox-ios-item-start-margin-top !default;
 
 /// @prop - Margin start of the left checkbox item
 $checkbox-ios-item-start-margin-start:    2px !default;

packages/core/src/components/checkbox/checkbox.md.vars.scss

@@ -48,13 +48,13 @@ $checkbox-md-transition-duration:        280ms !default;
 $checkbox-md-transition-easing:          cubic-bezier(.4, 0, .2, 1) !default;
 
 /// @prop - Margin top of the start checkbox item
-$checkbox-md-item-start-margin-top:      $item-md-padding-media-top !default;
+$checkbox-md-item-start-margin-top:      9px !default;
 
 /// @prop - Margin end of the start checkbox item
 $checkbox-md-item-start-margin-end:      36px !default;
 
 /// @prop - Margin bottom of the start checkbox item
-$checkbox-md-item-start-margin-bottom:   $item-md-padding-media-bottom !default;
+$checkbox-md-item-start-margin-bottom:   $checkbox-md-item-start-margin-top !default;
 
 /// @prop - Margin start of the start checkbox item
 $checkbox-md-item-start-margin-start:    4px !default;

packages/core/src/components/item-divider/item-divider.ios.scss

@@ -6,11 +6,43 @@
 
 .item-divider-ios {
   @include padding-horizontal($item-ios-divider-padding-start, null);
+  @include safe-area-padding-horizontal($item-ios-divider-padding-start, null);
+  @include border-radius(0);
+
+  position: relative;
+
+  font-family: $item-ios-divider-font-family;
+  font-size: $item-ios-divider-font-size;
 
   color: $item-ios-divider-color;
   background-color: $item-ios-divider-background;
 }
 
+.item-divider-ios .item-divider-inner {
+  @include padding-horizontal(null, $item-ios-divider-padding-end / 2);
+
+  @media screen and (orientation: landscape) {
+    @include safe-area-padding-horizontal(null, $item-ios-divider-padding-end / 2);
+  }
+}
+
+
+// iOS Item Slots
+// --------------------------------------------------
+
+.item-divider-ios [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);
+}
+
+.item-divider-ios [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);
+}
+
+.item-divider-ios ion-icon[slot="start"],
+.item-divider-ios 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);
+}
+
 
 // Generate iOS Item Divider Colors
 // --------------------------------------------------

packages/core/src/components/item-divider/item-divider.ios.vars.scss

@@ -5,6 +5,12 @@
 // iOS Item Divider
 // --------------------------------------------------
 
+/// @prop - Font family of the item
+$item-ios-divider-font-family:            $font-family-ios-base !default;
+
+/// @prop - Font size of the item
+$item-ios-divider-font-size:              17px !default;
+
 /// @prop - Background for the divider
 $item-ios-divider-background:             #f7f7f7 !default;
 
@@ -13,3 +19,6 @@ $item-ios-divider-color:                  #222 !default;
 
 /// @prop - Padding start for the divider
 $item-ios-divider-padding-start:          $item-ios-padding-start !default;
+
+/// @prop - Padding end for the divider
+$item-ios-divider-padding-end:            $item-ios-padding-end !default;

packages/core/src/components/item-divider/item-divider.md.scss

@@ -8,12 +8,47 @@
   @include padding-horizontal($item-md-divider-padding-start, null);
 
   border-bottom: $item-md-divider-border-bottom;
+
+  font-family: $item-md-divider-font-family;
   font-size: $item-md-divider-font-size;
 
   color: $item-md-divider-color;
   background-color: $item-md-divider-background;
 }
 
+.item-divider-md .item-divider-inner {
+  @include padding-horizontal(null, ($item-md-divider-padding-end / 2));
+}
+
+
+// Material Design Item Slots
+// --------------------------------------------------
+
+.item-divider-md [slot="start"],
+.item-divider-md [slot="end"] {
+  @include margin($item-md-slot-margin-top, $item-md-slot-margin-end, $item-md-slot-margin-bottom, $item-md-slot-margin-start);
+}
+
+.item-divider-md ion-icon[slot="start"],
+.item-divider-md ion-icon[slot="end"] {
+  @include margin($item-md-icon-slot-margin-top, $item-md-icon-slot-margin-end, $item-md-icon-slot-margin-bottom, $item-md-icon-slot-margin-start);
+}
+
+.item-divider-md ion-icon[slot="start"] + .item-inner,
+.item-divider-md ion-icon[slot="start"] + .item-input {
+  @include margin-horizontal($item-md-padding-start + ($item-md-padding-start / 2), null);
+}
+
+.item-divider-md ion-avatar[slot="start"],
+.item-divider-md ion-thumbnail[slot="start"] {
+  @include margin(($item-md-padding-end / 2), $item-md-padding-end, ($item-md-padding-end / 2), 0);
+}
+
+.item-divider-md ion-avatar[slot="end"],
+.item-divider-md ion-thumbnail[slot="end"] {
+  @include margin(($item-md-padding-end / 2));
+}
+
 
 // Generate Material Design Item Divider Colors
 // --------------------------------------------------

packages/core/src/components/item-divider/item-divider.md.vars.scss

@@ -11,6 +11,9 @@ $item-md-divider-color:              #858585 !default;
 /// @prop - Background for the divider
 $item-md-divider-background:         #fff !default;
 
+/// @prop - Font family for the divider
+$item-md-divider-font-family:        $font-family-md-base !default;
+
 /// @prop - Font size for the divider
 $item-md-divider-font-size:          14px !default;
 
@@ -19,3 +22,6 @@ $item-md-divider-border-bottom:      1px solid $list-md-border-color !default;
 
 /// @prop - Padding start for the divider
 $item-md-divider-padding-start:      $item-md-padding-start !default;
+
+/// @prop - Padding end for the divider
+$item-md-divider-padding-end:        $item-md-padding-end !default;

packages/core/src/components/item-divider/item-divider.scss

@@ -8,6 +8,8 @@ ion-item-divider {
   @include margin(0);
   @include padding(0);
 
+  box-sizing: border-box;
+
   z-index: $z-index-item-divider;
   display: flex;
   overflow: hidden;
@@ -25,3 +27,32 @@ ion-item-divider[sticky] {
   position: sticky;
   top: 0;
 }
+
+.item-divider-inner {
+  @include margin(0);
+  @include padding(0);
+
+  display: flex;
+  overflow: hidden;
+
+  flex: 1;
+  flex-direction: inherit;
+  align-items: inherit;
+  align-self: stretch;
+
+  min-height: inherit;
+
+  border: 0;
+}
+
+.item-divider-wrapper {
+  display: flex;
+  overflow: hidden;
+
+  flex: 1;
+  flex-direction: inherit;
+  align-items: inherit;
+  align-self: stretch;
+
+  text-overflow: ellipsis;
+}

packages/core/src/components/item-divider/item-divider.tsx

@@ -8,7 +8,7 @@ import { Component, Prop } from '@stencil/core';
     md: 'item-divider.md.scss'
   },
   host: {
-    theme: 'item item-divider'
+    theme: 'item-divider'
   }
 })
 export class ItemDivider {
@@ -30,8 +30,8 @@ export class ItemDivider {
   render() {
     return [
       <slot name='start'></slot>,
-      <div class='item-inner'>
+      <div class='item-divider-inner'>
-        <div class='input-wrapper'>
+        <div class='item-divider-wrapper'>
           <slot></slot>
         </div>
         <slot name='end'></slot>

packages/core/src/components/item/item.ios.scss

@@ -80,22 +80,31 @@
 }
 
 
-// iOS Item Media
+// iOS Item Slots
 // --------------------------------------------------
 
 .item-ios [slot="start"] {
-  @include margin($item-ios-padding-media-top, $item-ios-padding-start, $item-ios-padding-media-bottom, 0);
+  @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);
 }
 
 .item-ios [slot="end"] {
-  @include margin($item-ios-padding-media-top, ($item-ios-padding-start / 2), $item-ios-padding-media-bottom, ($item-ios-padding-end / 2));
+  @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);
 }
 
 .item-ios ion-icon[slot="start"],
 .item-ios ion-icon[slot="end"] {
-  @include margin($item-ios-padding-icon-top, null, $item-ios-padding-icon-bottom, 0);
+  @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);
 }
 
+.item-ios.item-label-stacked [slot="end"],
+.item-ios.item-label-floating [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);
+}
+
+
+// TODO iOS Item Button
+// --------------------------------------------------
+
 .item-ios .item-button {
   @include padding(0, .5em);
 
@@ -108,21 +117,6 @@
   @include padding(0, 1px);
 }
 
-.item-ios ion-avatar[slot="start"],
-.item-ios ion-thumbnail[slot="start"] {
-  @include margin(($item-ios-padding-end / 2), $item-ios-padding-end, ($item-ios-padding-end / 2), 0);
-}
-
-.item-ios ion-avatar[slot="end"],
-.item-ios ion-thumbnail[slot="end"] {
-  @include margin(($item-ios-padding-end / 2));
-}
-
-.item-ios.item-label-stacked [slot="end"],
-.item-ios.item-label-floating [slot="end"] {
-  @include margin($item-ios-padding-media-top - 2, null, $item-ios-padding-media-bottom - 2, null);
-}
-
 
 // iOS Item Avatar
 // --------------------------------------------------
@@ -171,14 +165,7 @@
 // --------------------------------------------------
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
-  // If there is text with a color it should use this color
+  .item-ios-#{$color-name} {
-  // and override whatever item sets it to
-  .item-ios .text-ios-#{$color-name} {
-    color: $color-base;
-  }
-
-  .item-ios-#{$color-name},
-  .item-divider-ios-#{$color-name} {
     color: $color-contrast;
     background-color: $color-base;
 

packages/core/src/components/item/item.ios.vars.scss

@@ -60,14 +60,54 @@ $item-ios-padding-bottom:             11px !default;
 /// @prop - Padding start for the item content
 $item-ios-padding-start:                     16px !default;
 
-/// @prop - Padding top for the media content
-$item-ios-padding-media-top:          8px !default;
 
-/// @prop - Padding bottom for the media content
+// Item Slots
-$item-ios-padding-media-bottom:       8px !default;
+// --------------------------------------------------
 
-/// @prop - Padding top for the icon in an item
+/// @prop - Margin top for the start slot
-$item-ios-padding-icon-top:           9px !default;
+$item-ios-slot-start-margin-top:             8px !default;
 
-/// @prop - Padding bottom for the icon in an item
+/// @prop - Margin end for the start slot
-$item-ios-padding-icon-bottom:        8px !default;
+$item-ios-slot-start-margin-end:             $item-ios-padding-end !default;
+
+/// @prop - Margin bottom for the start slot
+$item-ios-slot-start-margin-bottom:          $item-ios-slot-start-margin-top !default;
+
+/// @prop - Margin start for the start slot
+$item-ios-slot-start-margin-start:           0 !default;
+
+/// @prop - Margin top for the end slot
+$item-ios-slot-end-margin-top:               8px !default;
+
+/// @prop - Margin end for the end slot
+$item-ios-slot-end-margin-end:               ($item-ios-padding-start / 2) !default;
+
+/// @prop - Margin bottom for the end slot
+$item-ios-slot-end-margin-bottom:            $item-ios-slot-end-margin-top !default;
+
+/// @prop - Margin start for the end slot
+$item-ios-slot-end-margin-start:             $item-ios-slot-end-margin-end !default;
+
+/// @prop - Margin top for an icon in the start/end slot
+$item-ios-icon-slot-margin-top:              9px !default;
+
+/// @prop - Margin end for an icon in the start/end slot
+$item-ios-icon-slot-margin-end:              null !default;
+
+/// @prop - Margin bottom for an icon in the start/end slot
+$item-ios-icon-slot-margin-bottom:           8px !default;
+
+/// @prop - Margin start for an icon in the start/end slot
+$item-ios-icon-slot-margin-start:            0 !default;
+
+/// @prop - Margin top for the end slot inside of a floating/stacked label
+$item-ios-label-slot-end-margin-top:         6px !default;
+
+/// @prop - Margin end for the end slot inside of a floating/stacked label
+$item-ios-label-slot-end-margin-end:         null !default;
+
+/// @prop - Margin bottom for the end slot inside of a floating/stacked label
+$item-ios-label-slot-end-margin-bottom:      $item-ios-label-slot-end-margin-top !default;
+
+/// @prop - Margin start for the end slot inside of a floating/stacked label
+$item-ios-label-slot-end-margin-start:       $item-ios-label-slot-end-margin-end !default;

packages/core/src/components/item/item.md.scss

@@ -89,29 +89,17 @@
 }
 
 
-// Material Design Item Media
+// Material Design Item Slots
 // --------------------------------------------------
 
 .item-md [slot="start"],
 .item-md [slot="end"] {
-  @include margin($item-md-padding-media-top, ($item-md-padding-end / 2), $item-md-padding-media-bottom, 0);
+  @include margin($item-md-slot-margin-top, $item-md-slot-margin-end, $item-md-slot-margin-bottom, $item-md-slot-margin-start);
 }
 
 .item-md ion-icon[slot="start"],
 .item-md ion-icon[slot="end"] {
-  @include margin($item-md-padding-icon-top, null, $item-md-padding-icon-bottom, 0);
+  @include margin($item-md-icon-slot-margin-top, $item-md-icon-slot-margin-end, $item-md-icon-slot-margin-bottom, $item-md-icon-slot-margin-start);
-}
-
-.item-md .item-button {
-  @include padding(0, .6em);
-
-  height: 25px;
-
-  font-size: 12px;
-}
-
-.item-md .item-button ion-icon[slot="icon-only"] {
-  @include padding(0);
 }
 
 .item-md ion-icon[slot="start"] + .item-inner,
@@ -131,10 +119,26 @@
 
 .item-md.item-label-stacked [slot="end"],
 .item-md.item-label-floating [slot="end"] {
-  @include margin($item-md-padding-media-top - 2, null, $item-md-padding-media-bottom - 2, null);
+  @include margin($item-md-label-slot-end-margin-top, $item-md-label-slot-end-margin-end, $item-md-label-slot-end-margin-bottom, $item-md-label-slot-end-margin-start);
 }
 
 
+// TODO Material Design Item Button
+// --------------------------------------------------
+
+.item-md .item-button {
+  @include padding(0, .6em);
+
+  height: 25px;
+
+  font-size: 12px;
+}
+
+.item-md .item-button ion-icon[slot="icon-only"] {
+  @include padding(0);
+
+}
+
 // Material Design Item Avatar
 // --------------------------------------------------
 
@@ -153,18 +157,20 @@
 }
 
 
+// Item reorder
+// --------------------------------------------------
+
+.item-md ion-reorder {
+  font-size: 1.5em;
+  opacity: .3;
+}
+
+
 // Generate Material Design Item and Item Divider Colors
 // --------------------------------------------------
 
 @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
-  // If there is text with a color it should use this color
+  .item-md-#{$color-name} {
-  // and override whatever item sets it to
-  .item-md .text-md-#{$color-name} {
-    color: $color-base;
-  }
-
-  .item-md-#{$color-name},
-  .item-divider-md-#{$color-name} {
     color: $color-contrast;
     background-color: $color-base;
 
@@ -177,12 +183,3 @@
     }
   }
 }
-
-
-// Item reorder
-// --------------------------------------------------
-
-.item-md ion-reorder {
-  font-size: 1.5em;
-  opacity: .3;
-}

packages/core/src/components/item/item.md.vars.scss

@@ -45,14 +45,42 @@ $item-md-padding-bottom:              13px !default;
 /// @prop - Padding start for the item content
 $item-md-padding-start:               16px !default;
 
-/// @prop - Padding top for the media content
-$item-md-padding-media-top:           9px !default;
 
-/// @prop - Padding bottom for the media content
+// Item Slots
-$item-md-padding-media-bottom:        9px !default;
+// --------------------------------------------------
 
-/// @prop - Padding top for the icon in an item
+/// @prop - Margin top for the start/end slot
-$item-md-padding-icon-top:            11px !default;
+$item-md-slot-margin-top:             9px !default;
 
-/// @prop - Padding bottom for the icon in an item
+/// @prop - Margin end for the start/end slot
-$item-md-padding-icon-bottom:         10px !default;
+$item-md-slot-margin-end:             ($item-md-padding-end / 2) !default;
+
+/// @prop - Margin bottom for the start/end slot
+$item-md-slot-margin-bottom:          9px !default;
+
+/// @prop - Margin start for the start/end slot
+$item-md-slot-margin-start:           0 !default;
+
+/// @prop - Margin top for an icon in the start/end slot
+$item-md-icon-slot-margin-top:              11px !default;
+
+/// @prop - Margin end for an icon in the start/end slot
+$item-md-icon-slot-margin-end:              null !default;
+
+/// @prop - Margin bottom for an icon in the start/end slot
+$item-md-icon-slot-margin-bottom:           10px !default;
+
+/// @prop - Margin start for an icon in the start/end slot
+$item-md-icon-slot-margin-start:            0 !default;
+
+/// @prop - Margin top for the end slot inside of a floating/stacked label
+$item-md-label-slot-end-margin-top:         7px !default;
+
+/// @prop - Margin end for the end slot inside of a floating/stacked label
+$item-md-label-slot-end-margin-end:         null !default;
+
+/// @prop - Margin bottom for the end slot inside of a floating/stacked label
+$item-md-label-slot-end-margin-bottom:      $item-md-label-slot-end-margin-top !default;
+
+/// @prop - Margin start for the end slot inside of a floating/stacked label
+$item-md-label-slot-end-margin-start:       $item-md-label-slot-end-margin-end !default;

packages/core/src/components/radio/radio.ios.vars.scss

@@ -36,13 +36,13 @@ $radio-ios-item-start-margin-bottom:  8px !default;
 $radio-ios-item-start-margin-start:   3px !default;
 
 /// @prop - Margin top of the item-end in a radio
-$radio-ios-item-end-margin-top:       $item-ios-padding-media-top !default;
+$radio-ios-item-end-margin-top:       8px !default;
 
 /// @prop - Margin end of the item-end in a radio
 $radio-ios-item-end-margin-end:       11px !default;
 
 /// @prop - Margin bottom of the item-end in a radio
-$radio-ios-item-end-margin-bottom:    $item-ios-padding-media-bottom !default;
+$radio-ios-item-end-margin-bottom:    $radio-ios-item-end-margin-top !default;
 
 /// @prop - Margin start of the item-end in a radio
 $radio-ios-item-end-margin-start:     ($item-ios-padding-start / 2) !default;

packages/core/src/components/radio/radio.md.vars.scss

@@ -48,13 +48,13 @@ $radio-md-item-start-margin-bottom:  10px !default;
 $radio-md-item-start-margin-start:   4px !default;
 
 /// @prop - Margin top of the item-end in a radio
-$radio-md-item-end-margin-top:       $item-md-padding-media-top !default;
+$radio-md-item-end-margin-top:       9px !default;
 
 /// @prop - Margin end of the item-end in a radio
 $radio-md-item-end-margin-end:       10px !default;
 
 /// @prop - Margin bottom of the item-end in a radio
-$radio-md-item-end-margin-bottom:    $item-md-padding-media-bottom !default;
+$radio-md-item-end-margin-bottom:    $radio-md-item-end-margin-top !default;
 
 /// @prop - Margin start of the item-end in a radio
 $radio-md-item-end-margin-start:     0 !default;