codecheck

1
// core
2
.p-float-label {
3
    display: block;
4
    position: relative;
5
}
6

7
.p-float-label label {
8
    position: absolute;
9
    pointer-events: none;
10
    top: 50%;
11
    margin-top: -.5rem;
12
    transition-property: all;
13
    transition-timing-function: ease;
14
    line-height: 1;
15
}
16

17
.p-float-label:has(textarea) label {
18
    top: 1rem;
19
}
20

21
.p-float-label:has(input:focus) label,
22
.p-float-label:has(input.p-filled) label,
23
.p-float-label:has(input:-webkit-autofill) label,
24
.p-float-label:has(textarea:focus) label,
25
.p-float-label:has(textarea.p-filled) label,
26
.p-float-label:has(.p-inputwrapper-focus) label,
27
.p-float-label:has(.p-inputwrapper-filled) label {
28
    top: -.75rem;
29
    font-size: 12px;
30
}
31

32
.p-float-label .p-placeholder,
33
.p-float-label input::placeholder,
34
.p-float-label .p-inputtext::placeholder {
35
    opacity: 0;
36
    transition-property: all;
37
    transition-timing-function: ease;
38
}
39

40
.p-float-label .p-focus .p-placeholder,
41
.p-float-label input:focus::placeholder,
42
.p-float-label .p-inputtext:focus::placeholder {
43
    opacity: 1;
44
    transition-property: all;
45
    transition-timing-function: ease;
46
}