Skip to content
Permalink
Browse files

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

fixes #18484
  • Loading branch information...
corollari authored and brandyscarney committed Jun 10, 2019
1 parent a3e23fc commit 35c143a03654d01dcddcd0dd3cf941f42b7ab8b2
@@ -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
@@ -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
// --------------------------------------------------
@@ -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
// --------------------------------------------------
@@ -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;

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


----------------------------------------------

0 comments on commit 35c143a

Please sign in to comment.
You can’t perform that action at this time.