-
Notifications
You must be signed in to change notification settings - Fork 3
/
floating.css
36 lines (31 loc) 路 1.2 KB
/
floating.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.ui-control:where(:has(:not([type="color"]) ~ label)) {
> :where(label) {
margin-inline: var(--ui-control-ps, 0) var(--ui-control-pe, 0);
pointer-events: none;
transform-origin: 0 50%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: clip;
will-change: transform;
transition: var(--transition-transform), var(--transition-color), var(--transition-opacity);
}
> :where(textarea) {
padding-block-start: calc(var(--ui-control-py) + var(--ui-control-label-translate-y) * var(--ui-control-label-scale));
+ :where(label) {
align-self: start;
}
}
> :where(input, select) {
padding-block: calc(var(--ui-control-py) + var(--ui-control-label-translate-y) * var(--ui-control-label-scale)) calc(var(--ui-control-py) - var(--ui-control-label-translate-y) * var(--ui-control-label-scale));
&::-webkit-calendar-picker-indicator,
&::-webkit-search-cancel-button,
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
transform: translateY(calc(var(--ui-control-label-translate-y) * var(--ui-control-label-scale) * -1));
}
}
&:where(:has(:required)) :where(label)::after {
color: var(--color-error);
content: " *";
}
}