fix(FormCheck): change display flex to block

Author: mrholek

scss/_variables.scss

@@ -829,7 +829,7 @@ $input-transition:                      border-color .15s ease-in-out, box-shado
 // scss-docs-start form-check-variables
 $form-check-input-width:                  1em !default;
 $form-check-min-height:                   $font-size-base * $line-height-base !default;
-$form-check-padding-start:                .375em !default;
+$form-check-padding-start:                $form-check-input-width + .5em !default;
 $form-check-margin-bottom:                .125rem !default;
 $form-check-label-color:                  unset !default;
 $form-check-label-cursor:                 null !default;
@@ -865,7 +865,7 @@ $form-check-inline-margin-end:    1rem !default;
 // scss-docs-start form-switch-variables
 $form-switch-color:               rgba(0, 0, 0, .25) !default;
 $form-switch-width:               1.5em !default;
-$form-switch-padding-start:       .375em !default;
+$form-switch-padding-start:       $form-switch-width + .5em !default;
 $form-switch-bg-image:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
 $form-switch-border-radius:       $form-switch-width !default;
 $form-switch-transition:          background-position .15s ease-in-out !default;
@@ -878,8 +878,14 @@ $form-switch-checked-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www
 $form-switch-checked-bg-position: right center !default;
 
 $form-switch-widths: (
-  lg: 2em,
-  xl: 2.5em
+  lg: (
+    width: 1.75em,
+    height: 1.25em
+  ),
+  xl: (
+    width: 2em,
+    height: 1.5em
+  )
 ) !default;
 // scss-docs-end form-switch-variables
 

scss/forms/_form-check.scss

@@ -3,19 +3,23 @@
 //
 
 .form-check {
-  display: flex;
-  align-items: center;
+  display: block;
   min-height: $form-check-min-height;
+  @include ltr-rtl("padding-left", $form-check-padding-start);
   margin-bottom: $form-check-margin-bottom;
 
   .form-check-input {
-    @include ltr-rtl("margin-right", $form-check-padding-start);
+    // float: left;
+    // margin-left: $form-check-padding-start * -1;
+    @include ltr-rtl("float", left);
+    @include ltr-rtl("margin-left", $form-check-padding-start * -1);
   }
 }
 
 .form-check-input {
   width: $form-check-input-width;
   height: $form-check-input-width;
+  margin-top: ($line-height-base - $form-check-input-width) / 2; // line-height minus check height
   vertical-align: top;
   background-color: var(--#{$variable-prefix}form-check-input-bg, $form-check-input-bg);
   background-repeat: no-repeat;
@@ -129,23 +133,44 @@
   }
 }
 
-@each $width, $value in $form-switch-widths {
-  $height: $value / 3 * 2;
+@each $size, $map in $form-switch-widths {
+  $width: map-get($map, "width");
+  $height: map-get($map, "height");
 
-  .form-switch-#{$width} {
+  .form-switch-#{$size} {
     min-height: $height;
-    @include ltr-rtl("padding-left", $value + .5em);
+    @include ltr-rtl("padding-left", $width + .5em);
 
     .form-check-input {
-      width: $value;
+      width: $width;
       height: $height;
-      @include ltr-rtl("margin-left", ($value + .5em) * -1);
+      @include ltr-rtl("margin-left", ($width + .5em) * -1);
+    }
+
+    .form-check-label {
+      // stylelint-disable-next-line function-disallowed-list
+      padding-top: calc((#{$height} - #{$font-size-base}) / 2);
     }
   }
+
+  // $height: $value / 3 * 2;
+
+  // .form-switch-#{$width} {
+  //   min-height: $height;
+  //   @include ltr-rtl("padding-left", $value + .5em);
+
+  //   .form-check-input {
+  //     width: $value;
+  //     height: $height;
+  //     @include ltr-rtl("margin-left", ($value + .5em) * -1);
+  //   }
+
+  //   .form-check-label {}
+  // }
 }
 
 .form-check-inline {
-  display: inline-flex;
+  display: inline-block;
   @include ltr-rtl("margin-right", $form-check-inline-margin-end);
 }