diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss index 7704c6bfa1..418a393aec 100644 --- 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 index 36f89717ef..1ef57260a4 100644 --- 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/)*