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

fixes #18484
ionic-team · Jun 10, 2019 · 35c143a · 35c143a
1 parent a3e23fc
commit 35c143a
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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          |
 
 
 ----------------------------------------------