Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 9 commits into from Jun 10, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
74360be
Fix #18484
corollari Jun 8, 2019
19f52bb
Merge branch 'master' into patch-1
liamdebeasi Jun 10, 2019
6b5b622
Initialize & document
corollari Jun 10, 2019
4e1491d
Merge branch 'master' into patch-1
brandyscarney Jun 10, 2019
7782522
chore(item-divider): docs generation
brandyscarney Jun 10, 2019
4ec65ae
fix(item-divider): copy the items padding
brandyscarney Jun 10, 2019
4cfce8c
Merge branch 'master' into patch-1
brandyscarney Jun 10, 2019
b4763a1
fix(item-divider): set the variables for inner padding by mode
brandyscarney Jun 10, 2019
9056e1d
Merge branch 'master' into patch-1
brandyscarney Jun 10, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions core/api.txt
View file
Open in desktop
Expand Up @@ -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
Expand Down
5 changes: 1 addition & 4 deletions core/src/components/item-divider/item-divider.ios.scss
View file
Open in desktop
Expand Up @@ -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);

Expand All @@ -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
// --------------------------------------------------
Expand Down
5 changes: 1 addition & 4 deletions core/src/components/item-divider/item-divider.md.scss
View file
Open in desktop
Expand Up @@ -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
// --------------------------------------------------
Expand Down
28 changes: 22 additions & 6 deletions core/src/components/item-divider/item-divider.scss
View file
Open in desktop
Expand Up @@ -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))
);
Expand Down Expand Up @@ -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;

Expand Down
20 changes: 12 additions & 8 deletions core/src/components/item-divider/readme.md
View file
Open in desktop
Expand Up @@ -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 |


----------------------------------------------
Expand Down