mirror of
https://github.com/material-components/material-web.git
synced 2026-03-09 00:09:23 +08:00
a969fdadb6
Text field changes: - Fixed suffix color token not applying - Fixed icon size tokens not applying - Remove redundant styles with field changes Field changes: - Added content-type token for inheriting font - Added leading/trailing content color tokens for icons - Update field token values functions to be easier to grok all tokens - Remove container-height token - Update screenshots for new tokens PiperOrigin-RevId: 512652818
62 lines
1.2 KiB
SCSS
62 lines
1.2 KiB
SCSS
//
|
|
// Copyright 2021 Google LLC
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
//
|
|
|
|
@mixin styles() {
|
|
input {
|
|
appearance: none;
|
|
background: none;
|
|
border: none;
|
|
caret-color: var(--_caret-color);
|
|
color: currentColor;
|
|
font: inherit;
|
|
outline: none;
|
|
padding: 0;
|
|
text-align: inherit;
|
|
width: 100%;
|
|
|
|
&::placeholder {
|
|
color: currentColor;
|
|
opacity: 1;
|
|
}
|
|
|
|
// Remove built-in datepicker icon on Chrome
|
|
&::-webkit-calendar-picker-indicator {
|
|
display: none;
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
background-color: Field; // Remove white background in Firefox HCM
|
|
}
|
|
}
|
|
|
|
:focus-within input {
|
|
caret-color: var(--_focus-caret-color);
|
|
}
|
|
|
|
.error:focus-within input {
|
|
caret-color: var(--_error-focus-caret-color);
|
|
}
|
|
|
|
.text-field:not(.disabled) .prefix {
|
|
color: var(--_input-text-prefix-color);
|
|
}
|
|
|
|
.text-field:not(.disabled) .suffix {
|
|
color: var(--_input-text-suffix-color);
|
|
}
|
|
|
|
.text-field:not(.disabled) input::placeholder {
|
|
color: var(--_input-text-placeholder-color);
|
|
}
|
|
|
|
.prefix {
|
|
padding-inline-end: var(--_input-text-prefix-padding);
|
|
}
|
|
|
|
.suffix {
|
|
padding-inline-start: var(--_input-text-suffix-padding);
|
|
}
|
|
}
|