45d1155054
fixed incorrect html with multiple interactive elements inside label fixed inconsistent placeholder attribute handling between browsers removed active state so not to prevent iOS from focusing inputs
70 lines
1.3 KiB
CSS
70 lines
1.3 KiB
CSS
.label {
|
|
color: var(--UI-Grey-60);
|
|
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(--Base-Text-High-contrast);
|
|
font-weight: 500;
|
|
order: unset;
|
|
}
|
|
|
|
span.required:after {
|
|
content: " *";
|
|
}
|
|
|
|
/* Handle input and textarea fields */
|
|
input:placeholder-shown ~ .label,
|
|
textarea:placeholder-shown ~ .label {
|
|
display: block;
|
|
font-size: 12px;
|
|
}
|
|
|
|
input:focus ~ .label,
|
|
textarea:focus ~ .label {
|
|
font-size: 12px;
|
|
}
|
|
|
|
input:placeholder-shown ~ .label,
|
|
textarea:placeholder-shown ~ .label {
|
|
grid-row: 1/-1;
|
|
}
|
|
|
|
input:placeholder-shown:focus ~ .label,
|
|
textarea:placeholder-shown.label {
|
|
margin-bottom: var(--Spacing-x-half);
|
|
}
|
|
|
|
input:disabled ~ .label,
|
|
textarea:disabled ~ .label,
|
|
:global(.select-container)[data-disabled] .label {
|
|
color: var(--Main-Grey-40);
|
|
}
|
|
|
|
/* 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(--Spacing-x-half);
|
|
}
|