You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

63 lines
1.7 KiB

  1. .form-floating {
  2. position: relative;
  3. > .form-control,
  4. > .form-select {
  5. height: $form-floating-height;
  6. line-height: $form-floating-line-height;
  7. }
  8. > label {
  9. position: absolute;
  10. top: 0;
  11. left: 0;
  12. height: 100%; // allow textareas
  13. padding: $form-floating-padding-y $form-floating-padding-x;
  14. pointer-events: none;
  15. border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
  16. transform-origin: 0 0;
  17. @include transition($form-floating-transition);
  18. }
  19. // stylelint-disable no-duplicate-selectors
  20. > .form-control {
  21. padding: $form-floating-padding-y $form-floating-padding-x;
  22. &::placeholder {
  23. color: transparent;
  24. }
  25. &:focus,
  26. &:not(:placeholder-shown) {
  27. padding-top: $form-floating-input-padding-t;
  28. padding-bottom: $form-floating-input-padding-b;
  29. }
  30. // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
  31. &:-webkit-autofill {
  32. padding-top: $form-floating-input-padding-t;
  33. padding-bottom: $form-floating-input-padding-b;
  34. }
  35. }
  36. > .form-select {
  37. padding-top: $form-floating-input-padding-t;
  38. padding-bottom: $form-floating-input-padding-b;
  39. }
  40. > .form-control:focus,
  41. > .form-control:not(:placeholder-shown),
  42. > .form-select {
  43. ~ label {
  44. opacity: $form-floating-label-opacity;
  45. transform: $form-floating-label-transform;
  46. }
  47. }
  48. // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
  49. > .form-control:-webkit-autofill {
  50. ~ label {
  51. opacity: $form-floating-label-opacity;
  52. transform: $form-floating-label-transform;
  53. }
  54. }
  55. // stylelint-enable no-duplicate-selectors
  56. }