mirror of
https://github.com/material-components/material-web.git
synced 2026-03-09 00:09:23 +08:00
57 lines
1.4 KiB
SCSS
57 lines
1.4 KiB
SCSS
//
|
|
// Copyright 2022 Google LLC
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
//
|
|
|
|
@mixin styles() {
|
|
.supporting-text {
|
|
color: var(--_supporting-text-color);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 var(--_supporting-text-padding);
|
|
font: var(--_supporting-text-type);
|
|
}
|
|
|
|
.supporting-text-start,
|
|
.supporting-text-end {
|
|
// Can't be an inline display element (<span>) for padding-top to work.
|
|
display: flex;
|
|
}
|
|
|
|
.supporting-text-start ::slotted(:not(:empty)),
|
|
.supporting-text-end ::slotted(:not(:empty)) {
|
|
// Add padding to slotted elements instead of the wrappers so that it does not
|
|
// show when the supporting text is empty.
|
|
padding-top: var(--_supporting-text-padding-top);
|
|
}
|
|
|
|
.supporting-text-end ::slotted(:not(:empty)) {
|
|
padding-inline-start: var(--_supporting-text-padding);
|
|
}
|
|
|
|
:hover .supporting-text {
|
|
color: var(--_hover-supporting-text-color);
|
|
}
|
|
|
|
.focus .supporting-text {
|
|
color: var(--_focus-supporting-text-color);
|
|
}
|
|
|
|
.disabled .supporting-text {
|
|
color: var(--_disabled-supporting-text-color);
|
|
opacity: var(--_disabled-supporting-text-opacity);
|
|
}
|
|
|
|
.error .supporting-text {
|
|
color: var(--_error-supporting-text-color);
|
|
}
|
|
|
|
.error:hover .supporting-text {
|
|
color: var(--_error-hover-supporting-text-color);
|
|
}
|
|
|
|
.error.focus .supporting-text {
|
|
color: var(--_error-focus-supporting-text-color);
|
|
}
|
|
}
|