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

fix(input): add and document custom properties

Browse Source 
references #14850
This commit is contained in:
Cam Wiegert
2018-10-05 14:01:47 -05:00
parent 4fd817ca4e
commit 23df042d78
2 changed files with 34 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
core/src/components/input/input.scss
View File

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

16
core/src/components/input/readme.md
View File

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