From 165e1737641e3c67ff8374c1fdc97c7d521e00a3 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Tue, 2 Jan 2018 21:04:00 -0800
Subject: [PATCH] Updates the native and custom checks to use flexbox

- Removes absolute positioning and relies on flexbox for input+label layout and spacing
- Adjusts the gutter variables to be true gutters, not gutters plus space for input
- Updates inline variants accordingly

This is an implementation of #25174, and a more complete attempt than #25175 at implementing it across all our checks.
---
 scss/_custom-forms.scss | 13 +++++++------
 scss/_forms.scss        |  9 ++-------
 scss/_variables.scss    |  4 ++--
 3 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index d99a86dc7f96..3d98c09df5e3 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -9,9 +9,7 @@
 
 .custom-control {
   position: relative;
-  display: block;
-  min-height: (1rem * $line-height-base);
-  padding-left: $custom-control-gutter;
+  display: flex;
 }
 
 .custom-control-inline {
@@ -57,16 +55,15 @@
 // Build the custom controls out of psuedo-elements.
 
 .custom-control-label {
+  display: flex;
   margin-bottom: 0;
 
   // Background-color and (when enabled) gradient
   &::before {
-    position: absolute;
-    top: (($line-height-base - $custom-control-indicator-size) / 2);
-    left: 0;
     display: block;
     width: $custom-control-indicator-size;
     height: $custom-control-indicator-size;
+    margin-top: (($line-height-base - $custom-control-indicator-size) / 2);
     pointer-events: none;
     content: "";
     user-select: none;
@@ -87,6 +84,10 @@
     background-position: center center;
     background-size: $custom-control-indicator-bg-size;
   }
+
+  &:not(:empty)::before {
+    margin-right: $custom-control-gutter;
+  }
 }
 
 
diff --git a/scss/_forms.scss b/scss/_forms.scss
index b0954f8c2f49..b9646a071287 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -207,14 +207,12 @@ select.form-control-lg {
 
 .form-check {
   position: relative;
-  display: block;
-  padding-left: $form-check-input-gutter;
+  display: flex;
 }
 
 .form-check-input {
-  position: absolute;
   margin-top: $form-check-input-margin-y;
-  margin-left: -$form-check-input-gutter;
+  margin-right: $form-check-input-gutter;
 
   &:disabled ~ .form-check-label {
     color: $text-muted;
@@ -228,15 +226,12 @@ select.form-control-lg {
 .form-check-inline {
   display: inline-flex;
   align-items: center;
-  padding-left: 0; // Override base .form-check
   margin-right: $form-check-inline-margin-x;
 
   // 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/_variables.scss b/scss/_variables.scss
index 62b4850a8e39..b6621e074efe 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -423,7 +423,7 @@ $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-gutter:               .5rem !default;
 $form-check-input-margin-y:             .3rem !default;
 $form-check-input-margin-x:             .25rem !default;
 
@@ -436,7 +436,7 @@ $input-group-addon-color:               $input-color !default;
 $input-group-addon-bg:                  $gray-200 !default;
 $input-group-addon-border-color:        $input-border-color !default;
 
-$custom-control-gutter:                 1.5rem !default;
+$custom-control-gutter:                 .5rem !default;
 $custom-control-spacer-x:               1rem !default;
 
 $custom-control-indicator-size:         1rem !default;