mirror of
https://github.com/material-components/material-web.git
synced 2024-09-17 16:48:02 +03:00
3c6e55006b
PiperOrigin-RevId: 595788647
92 lines
1.9 KiB
SCSS
92 lines
1.9 KiB
SCSS
//
|
|
// Copyright 2021 Google LLC
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
//
|
|
|
|
@mixin styles() {
|
|
.input-wrapper {
|
|
display: flex;
|
|
}
|
|
|
|
.input-wrapper > * {
|
|
// Inherit field CSS set on the input wrapper, like font, but not margin or
|
|
// padding. This wrapper is needed since text fields may have prefix and
|
|
// suffix text next to an <input>
|
|
all: inherit;
|
|
padding: 0;
|
|
}
|
|
|
|
.input {
|
|
caret-color: var(--_caret-color);
|
|
// remove extra height added by horizontal scrollbars
|
|
overflow-x: hidden;
|
|
text-align: inherit;
|
|
|
|
&::placeholder {
|
|
color: currentColor;
|
|
opacity: 1;
|
|
}
|
|
|
|
// Remove built-in datepicker icon on Chrome
|
|
&::-webkit-calendar-picker-indicator {
|
|
display: none;
|
|
}
|
|
|
|
// Remove built-in search icons on Chrome when type='search'
|
|
&::-webkit-search-decoration,
|
|
&::-webkit-search-cancel-button {
|
|
display: none;
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
background: none; // Remove background in Firefox HCM
|
|
}
|
|
}
|
|
|
|
// Optionally remove number input's spinner
|
|
.no-spinner .input {
|
|
&::-webkit-inner-spin-button,
|
|
&::-webkit-outer-spin-button {
|
|
display: none;
|
|
}
|
|
|
|
&[type='number'] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
}
|
|
|
|
: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,
|
|
.suffix {
|
|
text-wrap: nowrap;
|
|
width: min-content;
|
|
}
|
|
|
|
.prefix {
|
|
padding-inline-end: var(--_input-text-prefix-trailing-space);
|
|
}
|
|
|
|
.suffix {
|
|
padding-inline-start: var(--_input-text-suffix-leading-space);
|
|
}
|
|
}
|