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 e6aaa402b4..bbcd25b4ad 100644 --- a/packages/core/src/components/item-divider/item-divider.ios.scss +++ b/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 // -------------------------------------------------- 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 bee0f43b7a..3ce6dda28a 100644 --- a/packages/core/src/components/item-divider/item-divider.md.scss +++ b/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 // -------------------------------------------------- diff --git a/packages/core/src/components/item-divider/item-divider.tsx b/packages/core/src/components/item-divider/item-divider.tsx index be2ed80eb2..c612427945 100644 --- a/packages/core/src/components/item-divider/item-divider.tsx +++ b/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 [ ,