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%; // allow textareas
|
---|
15 | padding: $form-floating-padding-y $form-floating-padding-x;
|
---|
16 | pointer-events: none;
|
---|
17 | border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
|
---|
18 | transform-origin: 0 0;
|
---|
19 | @include transition($form-floating-transition);
|
---|
20 | }
|
---|
21 |
|
---|
22 | // stylelint-disable no-duplicate-selectors
|
---|
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 | // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
|
---|
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 | // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
|
---|
56 | > .form-control:-webkit-autofill {
|
---|
57 | ~ label {
|
---|
58 | opacity: $form-floating-label-opacity;
|
---|
59 | transform: $form-floating-label-transform;
|
---|
60 | }
|
---|
61 | }
|
---|
62 | // stylelint-enable no-duplicate-selectors
|
---|
63 | }
|
---|