Use calc() on .col-form-label padding calculations

Fixes #21135.

There's a height mismatch here because we're setting padding on the labels, while inputs get padding *and* a top+bottom border. This now uses calc to determine the exact height needed to match labels to inputs.

diff --git a/scss/_forms.scss b/scss/_forms.scss
index 29d29442409a421ab83dbf74d38c22713af47027..8063da7a9485aebeb7317d8139e2b9fa2aeb2cd5 100644 (file)
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -95,20 +95,20 @@ select.form-control {
 // For use with horizontal and inline forms, when you need the label text to
 // align with the form controls.
 .col-form-label {
-  padding-top: $input-padding-y;
-  padding-bottom: $input-padding-y;
+  padding-top: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2);
+  padding-bottom: calc(#{$input-padding-y} - #{$input-btn-border-width} * 2);
   margin-bottom: 0; // Override the `<label>` default
 }
 
 .col-form-label-lg {
-  padding-top: $input-padding-y-lg;
-  padding-bottom: $input-padding-y-lg;
+  padding-top: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2);
+  padding-bottom: calc(#{$input-padding-y-lg} - #{$input-btn-border-width} * 2);
   font-size: $font-size-lg;
 }
 
 .col-form-label-sm {
-  padding-top: $input-padding-y-sm;
-  padding-bottom: $input-padding-y-sm;
+  padding-top: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2);
+  padding-bottom: calc(#{$input-padding-y-sm} - #{$input-btn-border-width} * 2);
   font-size: $font-size-sm;
 }