javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 18:54:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
fixes #18484
This commit is contained in:
Albert
2019-06-10 23:06:50 +02:00
committed by Brandy Carney
parent a3e23fc9fa
commit 35c143a036
5 changed files with 40 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/api.txt
View File

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

5
core/src/components/item-divider/item-divider.ios.scss
View File

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

5
core/src/components/item-divider/item-divider.md.scss
View File

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

28
core/src/components/item-divider/item-divider.scss
View File

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

20
core/src/components/item-divider/readme.md
View File

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