fix(input): add and document custom properties

references #14850
ionic-team · Oct 5, 2018 · 23df042 · 23df042
1 parent 4fd817c
commit 23df042
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss
@@ -4,6 +4,18 @@
 // --------------------------------------------------
 
 :host {
+  /**
+   * @prop --background: Background of the input
+   * @prop --color: Color of the input text
+   * @prop --padding-top: Top padding of the input
+   * @prop --padding-end: End padding of the input
+   * @prop --padding-bottom: Bottom padding of the input
+   * @prop --padding-start: Start padding of the input
+   * @prop --placeholder-color: Color of the input placeholder text
+   * @prop --placeholder-font-style: Font style of the input placeholder text
+   * @prop --placeholder-font-weight: Font weight of the input placeholder text
+   * @prop --placeholder-opacity: Opacity of the input placeholder text
+   */
   --placeholder-color: currentColor;
   --placeholder-font-style: inherit;
   --placeholder-font-weight: inherit;
@@ -12,7 +24,8 @@
   --padding-end: 0;
   --padding-bottom: 0;
   --padding-start: 0;
-  --border-radius: 0;
+  --background: transparent;
+  --color: inherit;
 
   display: flex;
   position: relative;
@@ -22,6 +35,9 @@
 
   width: 100%;
 
+  background: var(--background);
+  color: var(--color);
+
   /* stylelint-disable */
   /* TODO: find a better solution in padding.css, that does not require !important, */
   padding: 0 !important;
@@ -31,7 +47,7 @@
 }
 
 :host(.ion-color) {
-  color: #{current-color(base)};
+  color: current-color(base);
 }
 
 // Native Text Input

diff --git a/core/src/components/input/readme.md b/core/src/components/input/readme.md
@@ -62,6 +62,22 @@ It is meant for text `type` inputs only, such as `"text"`, `"password"`, `"email
 | `setFocus` |             |
 
 
+## CSS Custom Properties
+
+| Name                        | Description                               |
+| --------------------------- | ----------------------------------------- |
+| `--background`              | Background of the input                   |
+| `--color`                   | Color of the input text                   |
+| `--padding-bottom`          | Bottom padding of the input               |
+| `--padding-end`             | End padding of the input                  |
+| `--padding-start`           | Start padding of the input                |
+| `--padding-top`             | Top padding of the input                  |
+| `--placeholder-color`       | Color of the input placeholder text       |
+| `--placeholder-font-style`  | Font style of the input placeholder text  |
+| `--placeholder-font-weight` | Font weight of the input placeholder text |
+| `--placeholder-opacity`     | Opacity of the input placeholder text     |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*