diff --git a/core/api.txt b/core/api.txt index 2f6d0387b10..d5dff73080c 100644 --- a/core/api.txt +++ b/core/api.txt @@ -457,6 +457,10 @@ ion-item-divider,prop,mode,"ios" | "md",undefined,false,false ion-item-divider,prop,sticky,boolean,false,false,false ion-item-divider,css-prop,--background ion-item-divider,css-prop,--color +ion-item-divider,css-prop,--inner-padding-bottom +ion-item-divider,css-prop,--inner-padding-end +ion-item-divider,css-prop,--inner-padding-start +ion-item-divider,css-prop,--inner-padding-top ion-item-divider,css-prop,--padding-bottom ion-item-divider,css-prop,--padding-end ion-item-divider,css-prop,--padding-start diff --git a/core/src/components/item-divider/item-divider.ios.scss b/core/src/components/item-divider/item-divider.ios.scss index 1bfe5431b51..d32ed1e7563 100644 --- a/core/src/components/item-divider/item-divider.ios.scss +++ b/core/src/components/item-divider/item-divider.ios.scss @@ -8,6 +8,7 @@ --background: #{$item-ios-divider-background}; --color: #{$item-ios-divider-color}; --padding-start: #{$item-ios-divider-padding-start}; + --inner-padding-end: #{$item-ios-divider-padding-end / 2}; @include border-radius(0); @@ -16,10 +17,6 @@ font-size: $item-ios-divider-font-size; } -.item-divider-inner { - @include padding-horizontal(null, $item-ios-divider-padding-end / 2); -} - // iOS Item Divider Slots // -------------------------------------------------- diff --git a/core/src/components/item-divider/item-divider.md.scss b/core/src/components/item-divider/item-divider.md.scss index 6eadfdf906c..662208d5bde 100644 --- a/core/src/components/item-divider/item-divider.md.scss +++ b/core/src/components/item-divider/item-divider.md.scss @@ -8,16 +8,13 @@ --background: #{$item-md-divider-background}; --color: #{$item-md-divider-color}; --padding-start: #{$item-md-divider-padding-start}; + --inner-padding-end: #{$item-md-divider-padding-end}; border-bottom: $item-md-divider-border-bottom; font-size: $item-md-divider-font-size; } -.item-divider-inner { - @include padding-horizontal(null, $item-md-divider-padding-end); -} - // Material Design Item Divider Slots // -------------------------------------------------- diff --git a/core/src/components/item-divider/item-divider.scss b/core/src/components/item-divider/item-divider.scss index 246cf1de974..d6ac5037db4 100644 --- a/core/src/components/item-divider/item-divider.scss +++ b/core/src/components/item-divider/item-divider.scss @@ -7,22 +7,33 @@ :host { /** * @prop --background: Background of the item divider + * * @prop --color: Color of the item divider - * @prop --padding-start: Start padding of the item divider - * @prop --padding-end: End padding of the item divider + * * @prop --padding-top: Top padding of the item divider + * @prop --padding-end: End padding of the item divider * @prop --padding-bottom: Bottom padding of the item divider + * @prop --padding-start: Start padding of the item divider + * + * @prop --inner-padding-top: Top inner padding of the item divider + * @prop --inner-padding-end: End inner padding of the item divider + * @prop --inner-padding-bottom: Bottom inner padding of the item divider + * @prop --inner-padding-start: Start inner padding of the item divider */ - --padding-start: 0px; - --padding-end: 0px; --padding-top: 0px; + --padding-end: 0px; --padding-bottom: 0px; + --padding-start: 0px; + --inner-padding-top: 0px; + --inner-padding-end: 0px; + --inner-padding-bottom: 0px; + --inner-padding-start: 0px; @include font-smoothing(); @include margin(0); @include padding( var(--padding-top), - calc(var(--padding-end) + var(--ion-safe-area-right, 0px)), + var(--padding-end), var(--padding-bottom), calc(var(--padding-start) + var(--ion-safe-area-left, 0px)) ); @@ -57,7 +68,12 @@ .item-divider-inner { @include margin(0); - @include padding(0); + @include padding( + var(--inner-padding-top), + calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end)), + var(--inner-padding-bottom), + var(--inner-padding-start) + ); display: flex; diff --git a/core/src/components/item-divider/readme.md b/core/src/components/item-divider/readme.md index a6eb1bf5b1e..3d2fd80d593 100644 --- a/core/src/components/item-divider/readme.md +++ b/core/src/components/item-divider/readme.md @@ -171,14 +171,18 @@ export default Example ## CSS Custom Properties -| Name | Description | -| ------------------ | ---------------------------------- | -| `--background` | Background of the item divider | -| `--color` | Color of the item divider | -| `--padding-bottom` | Bottom padding of the item divider | -| `--padding-end` | End padding of the item divider | -| `--padding-start` | Start padding of the item divider | -| `--padding-top` | Top padding of the item divider | +| Name | Description | +| ------------------------ | ---------------------------------------- | +| `--background` | Background of the item divider | +| `--color` | Color of the item divider | +| `--inner-padding-bottom` | Bottom inner padding of the item divider | +| `--inner-padding-end` | End inner padding of the item divider | +| `--inner-padding-start` | Start inner padding of the item divider | +| `--inner-padding-top` | Top inner padding of the item divider | +| `--padding-bottom` | Bottom padding of the item divider | +| `--padding-end` | End padding of the item divider | +| `--padding-start` | Start padding of the item divider | +| `--padding-top` | Top padding of the item divider | ----------------------------------------------