1 | .form-floating {
|
2 | position: relative;
|
3 |
|
4 | > .form-control,
|
5 | > .form-select {
|
6 | height: $form-floating-height;
|
7 | line-height: $form-floating-line-height;
|
8 | }
|
9 |
|
10 | > label {
|
11 | position: absolute;
|
12 | top: 0;
|
13 | left: 0;
|
14 | height: 100%;
|
15 | padding: $form-floating-padding-y $form-floating-padding-x;
|
16 | pointer-events: none;
|
17 | border: $input-border-width solid transparent;
|
18 | transform-origin: 0 0;
|
19 | @include transition($form-floating-transition);
|
20 | }
|
21 |
|
22 |
|
23 | > .form-control {
|
24 | padding: $form-floating-padding-y $form-floating-padding-x;
|
25 |
|
26 | &::placeholder {
|
27 | color: transparent;
|
28 | }
|
29 |
|
30 | &:focus,
|
31 | &:not(:placeholder-shown) {
|
32 | padding-top: $form-floating-input-padding-t;
|
33 | padding-bottom: $form-floating-input-padding-b;
|
34 | }
|
35 |
|
36 | &:-webkit-autofill {
|
37 | padding-top: $form-floating-input-padding-t;
|
38 | padding-bottom: $form-floating-input-padding-b;
|
39 | }
|
40 | }
|
41 |
|
42 | > .form-select {
|
43 | padding-top: $form-floating-input-padding-t;
|
44 | padding-bottom: $form-floating-input-padding-b;
|
45 | }
|
46 |
|
47 | > .form-control:focus,
|
48 | > .form-control:not(:placeholder-shown),
|
49 | > .form-select {
|
50 | ~ label {
|
51 | opacity: $form-floating-label-opacity;
|
52 | transform: $form-floating-label-transform;
|
53 | }
|
54 | }
|
55 |
|
56 | > .form-control:-webkit-autofill {
|
57 | ~ label {
|
58 | opacity: $form-floating-label-opacity;
|
59 | transform: $form-floating-label-transform;
|
60 | }
|
61 | }
|
62 |
|
63 | }
|