javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(list-header): add and document custom properties

Browse Source 
references #14850
references #14853
references #14808
This commit is contained in:
Cam Wiegert
2018-09-07 09:53:09 -05:00
parent bf486e2c99
commit 5ccc1fd565
4 changed files with 24 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/list-header/list-header.ios.scss
View File

@@ -5,8 +5,8 @@
// --------------------------------------------------
:host {
--ion-color-base: #{$list-ios-header-background-color};
--ion-color-contrast: #{$list-ios-header-color};
--background: #{$list-ios-header-background-color};
--color: #{$list-ios-header-color};
@include padding-horizontal($list-ios-header-padding-start, null);

4
core/src/components/list-header/list-header.md.scss
View File

@@ -5,8 +5,8 @@
// --------------------------------------------------
:host {
--ion-color-base: transparent;
--ion-color-contrast: #{$list-md-header-color};
--background: transparent;
--color: #{$list-md-header-color};
@include padding-horizontal($list-md-header-padding-start, null);
@include margin(null, null, $list-md-header-margin-bottom, null);

14
core/src/components/list-header/list-header.scss
View File

@@ -5,6 +5,11 @@
// --------------------------------------------------
:host {
/**
* @prop --background: Background of the list header
* @prop --color: Color of the list header text
*/
@include font-smoothing();
@include margin(0);
@include padding(0);
@@ -17,8 +22,13 @@
width: 100%;
min-height: 40px;
background: #{current-color(base)};
color: #{current-color(contrast)};
background: var(--background);
color: var(--color);
overflow: hidden;
}
:host(.ion-color) {
background: current-color(base);
color: current-color(contrast);
}

8
core/src/components/list-header/readme.md
View File

@@ -15,6 +15,14 @@ Unlike ItemDivider, ListHeaders are styled to be stand-out from the rest of the
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` |
## CSS Custom Properties
| Name | Description |
| -------------- | ----------------------------- |
| `--background` | Background of the list header |
| `--color` | Color of the list header text |
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*