From aa5876e5da1e00a09ceeb55b4d983b834a03b109 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Wed, 1 May 2019 14:55:32 +0200
Subject: [PATCH] Align checkboxes & radios

---
 scss/_forms.scss                        |  5 -----
 scss/_input-group.scss                  |  6 ------
 scss/_reboot.scss                       | 10 ++++++++--
 scss/_variables.scss                    |  1 -
 site/content/docs/4.3/content/reboot.md |  1 +
 5 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/scss/_forms.scss b/scss/_forms.scss
index 43d4110cd2d7..e528e2d1d6ee 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -201,14 +201,11 @@ textarea.form-control {
 // Indent the labels to position radios/checkboxes as hanging controls.
 
 .form-check {
-  position: relative;
   display: block;
   padding-left: $form-check-input-gutter;
 }
 
 .form-check-input {
-  position: absolute;
-  margin-top: $form-check-input-margin-y;
   margin-left: -$form-check-input-gutter;
 
   // Use disabled attribute instead of :disabled pseudo-class
@@ -230,8 +227,6 @@ textarea.form-control {
 
   // Undo .form-check-input defaults and add some `margin-right`.
   .form-check-input {
-    position: static;
-    margin-top: 0;
     margin-right: $form-check-inline-input-margin-x;
     margin-left: 0;
   }
diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index ac49f696cb30..980dd2ae681b 100644
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -113,12 +113,6 @@
   background-color: $input-group-addon-bg;
   border: $input-border-width solid $input-group-addon-border-color;
   @include border-radius($input-border-radius);
-
-  // Nuke default margins from checkboxes and radios to vertically center within.
-  input[type="radio"],
-  input[type="checkbox"] {
-    margin-top: 0;
-  }
 }
 
 
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 30666a67e3ac..5743290713c6 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -404,10 +404,16 @@ button::-moz-focus-inner,
   border-style: none;
 }
 
+// Fix alignment for checkboxes and radios. We assume the line height is the same
+// as the line height of the body, but since there's no way to set the visual width
+// and height of a native checkbox or radio without altering the appearance, this
+// is the only workaround which works. The checkbox or radio will not be stretched,
+// but be displayed in the middle of its height.
 input[type="radio"],
 input[type="checkbox"] {
-  box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
-  padding: 0; // 2. Remove the padding in IE 10-
+  // stylelint-disable-next-line length-zero-no-unit
+  height: $line-height-base + 0em;
+  vertical-align: top;
 }
 
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index bfa5e385f80d..af696f5b40ec 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -503,7 +503,6 @@ $input-transition:                      border-color .15s ease-in-out, box-shado
 $form-text-margin-top:                  .25rem !default;
 
 $form-check-input-gutter:               1.25rem !default;
-$form-check-input-margin-y:             .3rem !default;
 $form-check-input-margin-x:             .25rem !default;
 
 $form-check-inline-margin-x:            .75rem !default;
diff --git a/site/content/docs/4.3/content/reboot.md b/site/content/docs/4.3/content/reboot.md
index ba0d3d138cb4..bfc5dd12dbfb 100644
--- a/site/content/docs/4.3/content/reboot.md
+++ b/site/content/docs/4.3/content/reboot.md
@@ -204,6 +204,7 @@ Various form elements have been rebooted for simpler base styles. Here are some
 - `<legend>`s, like fieldsets, have also been restyled to be displayed as a heading of sorts.
 - `<label>`s are set to `display: inline-block` to allow `margin` to be applied.
 - `<input>`s, `<select>`s, `<textarea>`s, and `<button>`s are mostly addressed by Normalize, but Reboot removes their `margin` and sets `line-height: inherit`, too.
+- `<input type="checkbox">` & `<input type="radio">` are aligned based on the line-height of the body. Make sure to alter the `height` of these elements if your line height is altered in custom css.
 - `<textarea>`s are modified to only be resizable vertically as horizontal resizing often "breaks" page layout.
 - `<button>`s and `<input>` button elements have `cursor: pointer` when `:not(:disabled)`.