Skip to content

Commit

Permalink
Use consistent padding for input and select elements
Browse files Browse the repository at this point in the history
Only apply extra top padding to textareas where it is needed.

Also removed unnecessary floating label background for non-textareas (supersedes #39480).
  • Loading branch information
theodorejb committed Jan 30, 2024
1 parent 1edcce4 commit 078a1c8
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 7 deletions.
8 changes: 4 additions & 4 deletions scss/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
24 changes: 21 additions & 3 deletions scss/forms/_floating-labels.scss
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@
}

> .form-select {
padding-top: $form-floating-select-padding-t;
padding-bottom: $form-floating-select-padding-b;
padding-top: $form-floating-input-padding-t;
padding-bottom: $form-floating-input-padding-b;
}

> .form-control:focus,
Expand All @@ -65,11 +65,29 @@
z-index: -1;
height: $form-floating-label-height;
content: "";
background-color: $input-bg;
@include border-radius($input-border-radius);
}
}
}
> textarea.form-control {
// textareas require additional top padding to prevent label from overlapping text,
// and additional bottom padding for when text is scrolled.
&:focus,
&:not(:placeholder-shown) {
padding-top: $form-floating-textarea-padding-t;
padding-bottom: $form-floating-textarea-padding-b;
}
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
&:-webkit-autofill {
padding-top: $form-floating-textarea-padding-t;
padding-bottom: $form-floating-textarea-padding-b;
}

// set textarea label background so it will remain legible when text is scrolled
~ label::after {
background-color: $input-bg;
}
}
// Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
> .form-control:-webkit-autofill {
~ label {
Expand Down

0 comments on commit 078a1c8

Please sign in to comment.