Files
web/components/TempDesignSystem/Form/Label/label.module.css
Christel Westerberg 19bfdf67f3 fix: animation on inputs
2024-07-10 16:01:28 +02:00

39 lines
635 B
CSS

.label {
color: var(--UI-Grey-60);
font-family: "fira sans";
font-weight: 400;
letter-spacing: 0.03px;
line-height: 19px;
text-align: left;
}
span.small {
display: block;
font-size: 12px;
}
span.regular {
font-size: 16px;
order: 1;
}
input:focus ~ .label,
input:not(:placeholder-shown) ~ .label {
display: block;
font-size: 12px;
transition: font-size 100ms ease;
}
input:placeholder-shown ~ .label {
grid-row: 1/-1;
}
input:placeholder-shown:focus ~ .label,
input:placeholder-shown:active ~ .label {
margin-bottom: var(--Spacing-x-half);
}
input:disabled ~ .label {
color: var(--Main-Grey-40);
}