diff --git a/packages/core/src/components/checkbox/checkbox.ios.vars.scss b/packages/core/src/components/checkbox/checkbox.ios.vars.scss
index 61b3b857af..de8be69742 100644
--- a/packages/core/src/components/checkbox/checkbox.ios.vars.scss
+++ b/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;
diff --git a/packages/core/src/components/checkbox/checkbox.md.vars.scss b/packages/core/src/components/checkbox/checkbox.md.vars.scss
index da794afa30..408a4cd4df 100644
--- a/packages/core/src/components/checkbox/checkbox.md.vars.scss
+++ b/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;
diff --git a/packages/core/src/components/item-divider/item-divider.ios.scss b/packages/core/src/components/item-divider/item-divider.ios.scss
index ba26ad236f..d049ad2de3 100644
--- a/packages/core/src/components/item-divider/item-divider.ios.scss
+++ b/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
// --------------------------------------------------
diff --git a/packages/core/src/components/item-divider/item-divider.ios.vars.scss b/packages/core/src/components/item-divider/item-divider.ios.vars.scss
index f34889c3aa..ca8c387916 100644
--- a/packages/core/src/components/item-divider/item-divider.ios.vars.scss
+++ b/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;
diff --git a/packages/core/src/components/item-divider/item-divider.md.scss b/packages/core/src/components/item-divider/item-divider.md.scss
index 164f2a2f33..37d7a8a0fc 100644
--- a/packages/core/src/components/item-divider/item-divider.md.scss
+++ b/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
// --------------------------------------------------
diff --git a/packages/core/src/components/item-divider/item-divider.md.vars.scss b/packages/core/src/components/item-divider/item-divider.md.vars.scss
index 9a24d4ae4e..1bd0c532f8 100644
--- a/packages/core/src/components/item-divider/item-divider.md.vars.scss
+++ b/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;
diff --git a/packages/core/src/components/item-divider/item-divider.scss b/packages/core/src/components/item-divider/item-divider.scss
index bb31a445ac..c444db2687 100644
--- a/packages/core/src/components/item-divider/item-divider.scss
+++ b/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;
+}
\ No newline at end of file
diff --git a/packages/core/src/components/item-divider/item-divider.tsx b/packages/core/src/components/item-divider/item-divider.tsx
index eba1caf13c..2c37899d03 100644
--- a/packages/core/src/components/item-divider/item-divider.tsx
+++ b/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 [