fix(all): add customization of font-style

This commit is contained in:
Manu Mtz.-Almeida
2018-08-24 03:48:11 +02:00
parent 5f3c7cd755
commit c957ea6bcc
5 changed files with 28 additions and 19 deletions

View File

@ -5,7 +5,8 @@
:host { :host {
--placeholder-color: currentColor; --placeholder-color: currentColor;
--placeholder-weight: inherit; --placeholder-font-style: inherit;
--placeholder-font-weight: inherit;
--placeholder-opacity: .5; --placeholder-opacity: .5;
--padding-top: 0; --padding-top: 0;
--padding-end: 0; --padding-end: 0;
@ -60,7 +61,8 @@
color: var(--placeholder-color); color: var(--placeholder-color);
font-family: inherit; font-family: inherit;
font-weight: var(--placeholder-weight); font-style: var(--placeholder-font-style);
font-weight: var(--placeholder-font-weight);
opacity: var(--placeholder-opacity); opacity: var(--placeholder-opacity);
} }

View File

@ -5,7 +5,8 @@
:host { :host {
--placeholder-color: currentColor; --placeholder-color: currentColor;
--placeholder-weight: inherit; --placeholder-font-style: inherit;
--placeholder-font-weight: inherit;
--placeholder-opacity: .5; --placeholder-opacity: .5;
@include font-smoothing(); @include font-smoothing();
@ -68,7 +69,8 @@
color: var(--placeholder-color); color: var(--placeholder-color);
font-family: inherit; font-family: inherit;
font-weight: var(--placeholder-weight); font-style: var(--placeholder-font-style);
font-weight: var(--placeholder-font-weight);
opacity: var(--placeholder-opacity); opacity: var(--placeholder-opacity);
} }

View File

@ -56,7 +56,7 @@ The textarea component accepts the [native textarea attributes](https://develope
## CSS Custom Properties ## CSS Custom Properties
| Name | Description | | Name | Description |
| ----------------------- | ------------------------------- | | --------------------------- | ------------------------------- |
| `--background` | Background of the textarea | | `--background` | Background of the textarea |
| `--border-radius` | Border radius of the textarea | | `--border-radius` | Border radius of the textarea |
| `--color` | Color of the text | | `--color` | Color of the text |
@ -65,8 +65,9 @@ The textarea component accepts the [native textarea attributes](https://develope
| `--padding-start` | Start padding of the textarea | | `--padding-start` | Start padding of the textarea |
| `--padding-top` | Top padding of the textarea | | `--padding-top` | Top padding of the textarea |
| `--placeholder-color` | Color of the placeholder text | | `--placeholder-color` | Color of the placeholder text |
| `--placeholder-font-style` | Style of the placeholder text |
| `--placeholder-font-weight` | Weight of the placeholder text |
| `--placeholder-opacity` | Opacity of the placeholder text | | `--placeholder-opacity` | Opacity of the placeholder text |
| `--placeholder-weight` | Weight of the placeholder text |
---------------------------------------------- ----------------------------------------------

View File

@ -9,7 +9,8 @@
* @prop --border-radius: Border radius of the textarea * @prop --border-radius: Border radius of the textarea
* @prop --color: Color of the text * @prop --color: Color of the text
* @prop --placeholder-color: Color of the placeholder text * @prop --placeholder-color: Color of the placeholder text
* @prop --placeholder-weight: Weight of the placeholder text * @prop --placeholder-font-style: Style of the placeholder text
* @prop --placeholder-font-weight: Weight of the placeholder text
* @prop --placeholder-opacity: Opacity of the placeholder text * @prop --placeholder-opacity: Opacity of the placeholder text
* @prop --padding-top: Top padding of the textarea * @prop --padding-top: Top padding of the textarea
* @prop --padding-end: End padding of the textarea * @prop --padding-end: End padding of the textarea
@ -19,7 +20,8 @@
--background: initial; --background: initial;
--color: currentColor; --color: currentColor;
--placeholder-color: currentColor; --placeholder-color: currentColor;
--placeholder-weight: inherit; --placeholder-font-style: inherit;
--placeholder-font-weight: inherit;
--placeholder-opacity: .5; --placeholder-opacity: .5;
--padding-top: 0; --padding-top: 0;
--padding-end: 0; --padding-end: 0;
@ -85,7 +87,8 @@
color: var(--placeholder-color); color: var(--placeholder-color);
font-family: inherit; font-family: inherit;
font-weight: var(--placeholder-weight); font-style: var(--placeholder-font-style);
font-weight: var(--placeholder-font-weight);
opacity: var(--placeholder-opacity); opacity: var(--placeholder-opacity);
} }

View File

@ -18,6 +18,7 @@
@mixin text-inherit() { @mixin text-inherit() {
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
font-style: inherit;
font-weight: inherit; font-weight: inherit;
letter-spacing: inherit; letter-spacing: inherit;
text-decoration: inherit; text-decoration: inherit;