diff --git a/scss/_variables.scss b/scss/_variables.scss index b6c0ec379afd..d5895cc05cb5 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1072,10 +1072,10 @@ $form-floating-height: add(3.5rem, $input-height-border) !defau $form-floating-line-height: 1.3125 !default; $form-floating-padding-x: $input-padding-x !default; $form-floating-padding-y: 1rem !default; -$form-floating-input-padding-t: 1.625rem !default; -$form-floating-input-padding-b: .625rem !default; -$form-floating-select-padding-t: 1.25rem !default; -$form-floating-select-padding-b: .25rem !default; +$form-floating-input-padding-t: 1.25rem !default; +$form-floating-input-padding-b: .25rem !default; +$form-floating-textarea-padding-t: 1.625rem !default; +$form-floating-textarea-padding-b: .625rem !default; $form-floating-label-height: 1.5em !default; $form-floating-label-opacity: .65 !default; $form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default; diff --git a/scss/forms/_floating-labels.scss b/scss/forms/_floating-labels.scss index 794a497e2749..3d0ab2b78044 100644 --- a/scss/forms/_floating-labels.scss +++ b/scss/forms/_floating-labels.scss @@ -1,4 +1,6 @@ .form-floating { + --#{$prefix}form-floating-input-padding-t: #{$form-floating-input-padding-t}; + --#{$prefix}form-floating-input-padding-b: #{$form-floating-input-padding-b}; position: relative; > .form-control, @@ -37,19 +39,19 @@ &:focus, &:not(:placeholder-shown) { - padding-top: $form-floating-input-padding-t; - padding-bottom: $form-floating-input-padding-b; + padding-top: var(--#{$prefix}form-floating-input-padding-t); + padding-bottom: var(--#{$prefix}form-floating-input-padding-b); } // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped &:-webkit-autofill { - padding-top: $form-floating-input-padding-t; - padding-bottom: $form-floating-input-padding-b; + padding-top: var(--#{$prefix}form-floating-input-padding-t); + padding-bottom: var(--#{$prefix}form-floating-input-padding-b); } } > .form-select { - padding-top: $form-floating-select-padding-t; - padding-bottom: $form-floating-select-padding-b; + padding-top: var(--#{$prefix}form-floating-input-padding-t); + padding-bottom: var(--#{$prefix}form-floating-input-padding-b); } > .form-control:focus, @@ -70,6 +72,10 @@ } > textarea:focus, > textarea:not(:placeholder-shown) { + // textareas require additional top padding to prevent label from overlapping text, + // and additional bottom padding for when text is scrolled. + --#{$prefix}form-floating-input-padding-t: #{$form-floating-textarea-padding-t}; + --#{$prefix}form-floating-input-padding-b: #{$form-floating-textarea-padding-b}; ~ label::after { position: absolute; inset: $form-floating-padding-y ($form-floating-padding-x * .5);