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

references #14850 references #14853 references #14808
ionic-team · Sep 7, 2018 · 5ccc1fd · 5ccc1fd
1 parent bf486e2
commit 5ccc1fd
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 6 deletions.
diff --git a/core/src/components/list-header/list-header.ios.scss b/core/src/components/list-header/list-header.ios.scss
@@ -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);
 

diff --git a/core/src/components/list-header/list-header.md.scss b/core/src/components/list-header/list-header.md.scss
@@ -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);

diff --git a/core/src/components/list-header/list-header.scss b/core/src/components/list-header/list-header.scss
@@ -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);
+}
diff --git a/core/src/components/list-header/readme.md b/core/src/components/list-header/readme.md
@@ -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/)*