feat(item-divider): add inner padding CSS variables (#18490)

fixes #18484

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

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
 // --------------------------------------------------

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
 // --------------------------------------------------

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;
 

core/src/components/item-divider/readme.md

@@ -172,9 +172,13 @@ export default Example
 ## CSS Custom Properties
 
 | 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        |