mirror of
https://github.com/material-components/material-web.git
synced 2024-09-17 16:48:02 +03:00
103 lines
2.6 KiB
SCSS
103 lines
2.6 KiB
SCSS
//
|
|
// Copyright 2021 Google LLC
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
//
|
|
|
|
@mixin styles() {
|
|
@layer styles {
|
|
.label {
|
|
box-sizing: border-box;
|
|
color: var(--_label-text-color);
|
|
overflow: hidden;
|
|
max-width: 100%;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
z-index: 1;
|
|
font-family: var(--_label-text-font);
|
|
font-size: var(--_label-text-size);
|
|
line-height: var(--_label-text-line-height);
|
|
font-weight: var(--_label-text-weight);
|
|
width: min-content;
|
|
}
|
|
|
|
.label-wrapper {
|
|
inset: 0;
|
|
// The resting label at 100% height can block pointer events to the content
|
|
// if it's very long and spans the full width of the field. Additionally,
|
|
// selecting the label's text doesn't present a good UX, since the user
|
|
// selection should be re-focused to another element (such as the input)
|
|
// upon focusing. Finally, since the actual label elements are swapped, it
|
|
// is not easy to maintain the user's label text selection.
|
|
pointer-events: none;
|
|
position: absolute;
|
|
}
|
|
|
|
.label.resting {
|
|
position: absolute;
|
|
top: var(--_top-space);
|
|
}
|
|
|
|
.label.floating {
|
|
font-size: var(--_label-text-populated-size);
|
|
line-height: var(--_label-text-populated-line-height);
|
|
transform-origin: top left;
|
|
}
|
|
|
|
.label.hidden {
|
|
opacity: 0;
|
|
}
|
|
|
|
.no-label .label {
|
|
display: none;
|
|
}
|
|
|
|
// Labels need start/end padding when there isn't start/end content so they
|
|
// don't sit on the edge of the field. We use a wrapper element around the
|
|
// labels so as not to affect the dimensions used in the label keyframes.
|
|
.label-wrapper {
|
|
inset: 0;
|
|
position: absolute;
|
|
// Don't let setting text-align on the field change the label's alignment.
|
|
// It should only impact content text.
|
|
text-align: initial;
|
|
}
|
|
|
|
:hover .label {
|
|
color: var(--_hover-label-text-color);
|
|
}
|
|
|
|
.focused .label {
|
|
color: var(--_focus-label-text-color);
|
|
}
|
|
|
|
.disabled .label {
|
|
color: var(--_disabled-label-text-color);
|
|
}
|
|
|
|
.disabled .label:not(.hidden) {
|
|
opacity: var(--_disabled-label-text-opacity);
|
|
}
|
|
|
|
.error .label {
|
|
color: var(--_error-label-text-color);
|
|
}
|
|
|
|
.error:hover .label {
|
|
color: var(--_error-hover-label-text-color);
|
|
}
|
|
|
|
.error.focused .label {
|
|
color: var(--_error-focus-label-text-color);
|
|
}
|
|
}
|
|
|
|
@layer hcm {
|
|
@media (forced-colors: active) {
|
|
.disabled .label:not(.hidden) {
|
|
color: GrayText;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|