From: Mark Otto <markdotto@gmail.com>
Date: Sun, 25 Dec 2016 22:35:57 +0000 (-0800)
Subject: Use calc() on .col-form-label padding calculations
X-Git-Tag: v4.0.0-alpha.6~167
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=96986bb4a3d0dcea3bc5f17234a42a77a0d1756e;p=thirdparty%2Fbootstrap.git

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 29d2944240..8063da7a94 100644
--- 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;
 }