fix(item-divider): update the styles to use item styles for content

references #14013

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

@@ -27,7 +27,7 @@
 }
 
 
-// iOS Item Slots
+// iOS Item Divider Slots
 // --------------------------------------------------
 
 .item-divider-ios [slot="start"] {
@@ -44,6 +44,55 @@
 }
 
 
+// iOS Item Divider Content
+// --------------------------------------------------
+
+.item-divider-ios h1 {
+  @include margin(0, 0, 2px);
+
+  font-size: 24px;
+  font-weight: normal;
+}
+
+.item-divider-ios h2 {
+  @include margin(0, 0, 2px);
+
+  font-size: 17px;
+  font-weight: normal;
+}
+
+.item-divider-ios h3,
+.item-divider-ios h4,
+.item-divider-ios h5,
+.item-divider-ios h6 {
+  @include margin(0, 0, 3px);
+
+  font-size: 14px;
+  font-weight: normal;
+  line-height: normal;
+}
+
+.item-divider-ios p {
+  @include margin($item-ios-paragraph-margin-top, $item-ios-paragraph-margin-end, $item-ios-paragraph-margin-bottom, $item-ios-paragraph-margin-start);
+
+  overflow: inherit;
+
+  font-size: $item-ios-paragraph-font-size;
+  line-height: normal;
+  text-overflow: inherit;
+  color: $item-ios-paragraph-text-color;
+}
+
+.item-divider-ios h2:last-child,
+.item-divider-ios h3:last-child,
+.item-divider-ios h4:last-child,
+.item-divider-ios h5:last-child,
+.item-divider-ios h6:last-child,
+.item-divider-ios p:last-child {
+  @include margin(null, null, 0, null);
+}
+
+
 // Generate iOS Item Divider Colors
 // --------------------------------------------------
 

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

@@ -21,7 +21,7 @@
 }
 
 
-// Material Design Item Slots
+// Material Design Item Divider Slots
 // --------------------------------------------------
 
 .item-divider-md [slot="start"],
@@ -50,6 +50,46 @@
 }
 
 
+// Material Design Item Divider Content
+// --------------------------------------------------
+
+.item-divider-md h1 {
+  @include margin(0, 0, 2px);
+
+  font-size: 24px;
+  font-weight: normal;
+}
+
+.item-divider-md h2 {
+  @include margin(2px, 0);
+
+  font-size: 16px;
+  font-weight: normal;
+}
+
+.item-divider-md h3,
+.item-divider-md h4,
+.item-divider-md h5,
+.item-divider-md h6 {
+  @include margin(2px, 0);
+
+  font-size: 14px;
+  font-weight: normal;
+  line-height: normal;
+}
+
+.item-divider-md p {
+  @include margin(0, 0, 2px);
+
+  overflow: inherit;
+
+  font-size: 14px;
+  line-height: normal;
+  text-overflow: inherit;
+  color: $item-md-paragraph-text-color;
+}
+
+
 // Generate Material Design Item Divider Colors
 // --------------------------------------------------
 

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

@@ -1,4 +1,4 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, Element, Prop } from '@stencil/core';
 
 
 @Component({
@@ -12,6 +12,7 @@ import { Component, Prop } from '@stencil/core';
   }
 })
 export class ItemDivider {
+  @Element() private el: HTMLElement;
 
   /**
    * The color to use from your Sass `$colors` map.
@@ -27,6 +28,17 @@ export class ItemDivider {
    */
   @Prop() mode: 'ios' | 'md';
 
+  componentDidLoad() {
+    // Change the button size to small for each ion-button in the item
+    // unless the size is explicitly set
+    const buttons = this.el.querySelectorAll('ion-button');
+    for (let i = 0; i < buttons.length; i++) {
+      if (!buttons[i].size) {
+        buttons[i].size = 'small';
+      }
+    }
+  }
+
   render() {
     return [
       <slot name='start'></slot>,