material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-10-27 06:04:44 +03:00
Code Issues Projects Releases Wiki Activity

remove outlined background fill

Browse Source
This commit is contained in:
Elliott Marquez 2019-10-10 16:03:39 -07:00
parent 971d926e0e
commit c054b66f53
4 changed files with 4 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/notched-outline/README.md
View File

@ -21,4 +21,3 @@ outlined textfields and dropdown menus.
| `--mdc-notched-outline-trailing-border-radius` | `0 4px 4px 0` | Radius of the border on the trailing end.
| `--mdc-notched-outline-stroke-width` | `1px` | Outline width.
| `--mdc-notched-outline-border-color` | none | Sets the border / outline color.
| `--mdc-notched-outline-background-color` | none | Sets the background color inside the styled borders.

1
packages/notched-outline/src/mwc-notched-outline.scss
View File

@ -78,7 +78,6 @@ limitations under the License.
.mdc-notched-outline__notch,
.mdc-notched-outline__trailing {
border-color: var(--mdc-notched-outline-border-color, var(--mdc-theme-primary, #{$mdc-theme-primary}));
background-color: var(--mdc-notched-outline-background-color, #{$mdc-theme-primary});
@include mdc-theme-prop(border-width, (
varname: --mdc-notched-outline-stroke-width,

8
packages/textfield/README.md
View File

@ -213,12 +213,8 @@ Inherits CSS Custom properties from:
| `--mdc-text-field-outlined-idle-border-color` | `rgba(0, 0, 0, 0.38)` | Color of the outlined textfield's outline when idle.
| `--mdc-text-field-outlined-hover-border-color` | `rgba(0, 0, 0, 0.87)` | Color of the outlined textfield's outline when hovering.
| `--mdc-text-field-outlined-disabled-border-color` | `rgba(0, 0, 0, 0.06)` | Color of the outlined textfield's outline when disabled.
| `--mdc-text-field-fill-color` | filled: `rgb(245, 245, 245)`, outlined: `transparent` | Color of the textfield's background fill.
| `--mdc-text-field-outlined-fill-color` | `transparent` | Overrides `--mdc-text-field-fill-color` only for outlined textfields.
| `--mdc-text-field-filled-fill-color` | `rgb(245,245,245)` | Overrides `--mdc-text-field-fill-color` only for filled (non-outlined) textfields.
| `--mdc-text-field-disabled-fill-color` | filled: `rgb(250, 250, 250)`, outlined: `transparent` | Color of the textfield's background fill when disabled.
| `--mdc-text-field-outlined-disabled-fill-color` | `rgba(250, 250, 250)` | Overrides `--mdc-text-field-disabled-fill-color` only for outlined textfields.
| `--mdc-text-field-filled-disabled-fill-color` | `transparent` | Overrides `--mdc-text-field-disabled-fill-color` only for filled (non-outlined) textfields.
| `--mdc-text-field-fill-color` | `rgb(245, 245, 245)` | Color of the textfield's background fill (non-outlined).
| `--mdc-text-field-disabled-fill-color` | `rgb(250, 250, 250)` | Color of the textfield's background fill (non-outlined) when disabled.
| `--mdc-text-field-ink-color` | `rgba(0, 0, 0, 0.87)` | Color of the input text.
| `--mdc-text-field-label-ink-color` | `rgba(0, 0, 0, 0.6)` | Color of the non-focused floating label, helper text, char counter, and placeholder.
| `--mdc-text-field-disabled-ink-color` | `rgba(0, 0, 0, 0.37)` | Color of the input text, the floating label, helper text, char counter, and placeholder of a disabled textfield.

10
packages/textfield/src/mwc-textfield.scss
View File

@ -63,11 +63,7 @@ mwc-notched-outline {
:host(:not([disabled])) {
.mdc-text-field {
&:not(.mdc-text-field--outlined) {
background-color: var(--mdc-text-field-filled-fill-color, var(--mdc-text-field-fill-color, #{$mdc-text-field-background}));
}
&.mdc-text-field--outlined {
--mdc-notched-outline-background-color: var(--mdc-text-field-outlined-fill-color, var(--mdc-text-field-fill-color, transparent));
background-color: var(--mdc-text-field-fill-color, #{$mdc-text-field-background});
}
&.mdc-text-field--invalid {
@ -124,12 +120,10 @@ mwc-notched-outline {
:host([disabled]) {
.mdc-text-field {
&:not(.mdc-text-field--outlined) {
background-color: var(--mdc-text-field-filled-disabled-fill-color, var(--mdc-text-field-disabled-fill-color, #{$mdc-text-field-disabled-background}));
background-color: var(--mdc-text-field-disabled-fill-color, #{$mdc-text-field-disabled-background});
}
&.mdc-text-field--outlined {
--mdc-notched-outline-background-color: var(--mdc-text-field-outlined-disabled-fill-color, var(--mdc-text-field-disabled-fill-color, transparent));
mwc-notched-outline {
--mdc-notched-outline-border-color: var(--mdc-text-field-outlined-disabled-border-color, #{$mdc-text-field-outlined-disabled-border});
}