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.

95 lines
2.6 KiB

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