UNPKG

1.75 kBSCSSView Raw
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}