58 lines
1.2 KiB
CSS
58 lines
1.2 KiB
CSS
.label {
|
|
color: var(--Text-Interactive-Placeholder);
|
|
font-family: "fira sans";
|
|
font-weight: 400;
|
|
letter-spacing: 0.03px;
|
|
line-height: 120%;
|
|
text-align: left;
|
|
transition: font-size 100ms ease;
|
|
user-select: none;
|
|
}
|
|
|
|
span.small {
|
|
display: block;
|
|
font-size: 12px;
|
|
}
|
|
|
|
span.regular {
|
|
font-size: 16px;
|
|
order: 1;
|
|
}
|
|
|
|
span.discreet {
|
|
color: var(--Text-Interactive-Default);
|
|
font-weight: 500;
|
|
order: unset;
|
|
}
|
|
|
|
span.required:after {
|
|
content: " *";
|
|
}
|
|
|
|
/* Handle input and textarea fields */
|
|
input:focus ~ .label,
|
|
input:placeholder-shown ~ .label,
|
|
input[value]:not([value=""]) ~ .label,
|
|
textarea:focus ~ .label textarea:placeholder-shown ~ .label,
|
|
textarea[value]:not([value=""]) ~ .label {
|
|
font-size: 12px;
|
|
margin-bottom: var(--Space-x05);
|
|
}
|
|
|
|
input:disabled ~ .label,
|
|
textarea:disabled ~ .label,
|
|
:global(.select-container)[data-disabled] .label {
|
|
color: var(--Text-Interactive-Disabled);
|
|
}
|
|
|
|
/* Handle select fields */
|
|
:global(.select-button) .label {
|
|
order: unset;
|
|
}
|
|
|
|
:global(.select-container)[data-open="true"] .label:not(.discreet),
|
|
:global(.react-aria-SelectValue):has(:nth-child(2)) .label:not(.discreet) {
|
|
font-size: 12px;
|
|
margin-bottom: var(--Space-x05);
|
|
}
|