_floating-labels.scss 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. .form-floating {
  2. position: relative;
  3. > .form-control,
  4. > .form-control-plaintext,
  5. > .form-select {
  6. height: $form-floating-height;
  7. min-height: $form-floating-height;
  8. line-height: $form-floating-line-height;
  9. }
  10. > label {
  11. position: absolute;
  12. top: 0;
  13. left: 0;
  14. z-index: 2;
  15. max-width: 100%;
  16. height: 100%; // allow textareas
  17. padding: $form-floating-padding-y $form-floating-padding-x;
  18. overflow: hidden;
  19. color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
  20. text-align: start;
  21. text-overflow: ellipsis;
  22. white-space: nowrap;
  23. pointer-events: none;
  24. border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
  25. transform-origin: 0 0;
  26. @include transition($form-floating-transition);
  27. }
  28. > .form-control,
  29. > .form-control-plaintext {
  30. padding: $form-floating-padding-y $form-floating-padding-x;
  31. &::placeholder {
  32. color: transparent;
  33. }
  34. &:focus,
  35. &:not(:placeholder-shown) {
  36. padding-top: $form-floating-input-padding-t;
  37. padding-bottom: $form-floating-input-padding-b;
  38. }
  39. // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
  40. &:-webkit-autofill {
  41. padding-top: $form-floating-input-padding-t;
  42. padding-bottom: $form-floating-input-padding-b;
  43. }
  44. }
  45. > .form-select {
  46. padding-top: $form-floating-input-padding-t;
  47. padding-bottom: $form-floating-input-padding-b;
  48. padding-left: $form-floating-padding-x;
  49. }
  50. > .form-control:focus,
  51. > .form-control:not(:placeholder-shown),
  52. > .form-control-plaintext,
  53. > .form-select {
  54. ~ label {
  55. transform: $form-floating-label-transform;
  56. }
  57. }
  58. // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
  59. > .form-control:-webkit-autofill {
  60. ~ label {
  61. transform: $form-floating-label-transform;
  62. }
  63. }
  64. > textarea:focus,
  65. > textarea:not(:placeholder-shown) {
  66. ~ label::after {
  67. position: absolute;
  68. inset: $form-floating-padding-y ($form-floating-padding-x * .5);
  69. z-index: -1;
  70. height: $form-floating-label-height;
  71. content: "";
  72. background-color: $input-bg;
  73. @include border-radius($input-border-radius);
  74. }
  75. }
  76. > textarea:disabled ~ label::after {
  77. background-color: $input-disabled-bg;
  78. }
  79. > .form-control-plaintext {
  80. ~ label {
  81. border-width: $input-border-width 0; // Required to properly position label text - as explained above
  82. }
  83. }
  84. > :disabled ~ label,
  85. > .form-control:disabled ~ label { // Required for `.form-control`s because of specificity
  86. color: $form-floating-label-disabled-color;
  87. }
  88. }