From 96986bb4a3d0dcea3bc5f17234a42a77a0d1756e Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 25 Dec 2016 14:35:57 -0800
Subject: [PATCH] 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.
---
scss/_forms.scss | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
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;
}
--
GitLab