Merge branch 'master' into release-drafter

6 files changed, 20 insertions, 9 deletions

diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index 03ae57385..572bd547e 100644
--- a/scss/forms/_form-check.scss
+++ b/scss/forms/_form-check.scss
@@ -23,6 +23,7 @@
   border: $form-check-input-border;
   appearance: none;
   color-adjust: exact; // Keep themed appearance for print
+  @include transition($form-check-transition);
 
   &[type="checkbox"] {
     @include border-radius($form-check-input-border-radius);
@@ -99,7 +100,6 @@
 }
 
 .form-check-label {
-  margin-bottom: 0;
   color: $form-check-label-color;
   cursor: $form-check-label-cursor;
 }
@@ -120,9 +120,6 @@
     background-size: $form-switch-bg-size; // Get a 1px separation
     @include border-radius($form-switch-border-radius);
     color-adjust: exact; // Keep themed appearance for print
-    // Todo: Figure out how to tackle these, with or without mixin?
-    // transition: $form-switch-transition;
-    // transition-property: $form-switch-transition-property;
 
     &:focus {
       background-image: escape-svg($form-switch-focus-bg-image);
diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index fb3142333..6686ecfb8 100644
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -15,6 +15,7 @@
   background-color: $input-bg;
   background-clip: padding-box;
   border: $input-border-width solid $input-border-color;
+  appearance: none; // Fix appearance for date inputs in Safari
 
   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
   @include border-radius($input-border-radius, 0);
@@ -28,10 +29,10 @@
     background-color: $input-focus-bg;
     border-color: $input-focus-border-color;
     outline: 0;
-    // Avoid using mixin so we can pass custom focus shadow properly
     @if $enable-shadows {
-      box-shadow: $input-box-shadow, $input-focus-box-shadow;
+      @include box-shadow($input-box-shadow, $input-focus-box-shadow);
     } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
       box-shadow: $input-focus-box-shadow;
     }
   }
diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
index 8c410c97b..e4cab0878 100644
--- a/scss/forms/_form-select.scss
+++ b/scss/forms/_form-select.scss
@@ -28,8 +28,9 @@
     border-color: $form-select-focus-border-color;
     outline: 0;
     @if $enable-shadows {
-      box-shadow: $form-select-box-shadow, $form-select-focus-box-shadow;
+      @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
     } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
       box-shadow: $form-select-focus-box-shadow;
     }
 
diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index 878cb83d6..c8e86cebe 100644
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -63,7 +63,6 @@
   display: flex;
   align-items: center;
   padding: $input-padding-y $input-padding-x;
-  margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
   @include font-size($input-font-size); // Match inputs
   font-weight: $font-weight-normal;
   line-height: $input-line-height;
diff --git a/scss/forms/_labels.scss b/scss/forms/_labels.scss
index a3184b7d7..39ecafcd2 100644
--- a/scss/forms/_labels.scss
+++ b/scss/forms/_labels.scss
@@ -2,14 +2,25 @@
 // Labels
 //
 
+.form-label {
+  margin-bottom: $form-label-margin-bottom;
+  @include font-size($form-label-font-size);
+  font-style: $form-label-font-style;
+  font-weight: $form-label-font-weight;
+  color: $form-label-color;
+}
+
 // For use with horizontal and inline forms, when you need the label (or legend)
 // text to align with the form controls.
 .col-form-label {
   padding-top: add($input-padding-y, $input-border-width);
   padding-bottom: add($input-padding-y, $input-border-width);
-  margin-bottom: 0; // Override the `<label>/<legend>` default
+  margin-bottom: 0; // Override the `<legend>` default
   @include font-size(inherit); // Override the `<legend>` default
+  font-style: $form-label-font-style;
+  font-weight: $form-label-font-weight;
   line-height: $input-line-height;
+  color: $form-label-color;
 }
 
 .col-form-label-lg {
diff --git a/scss/forms/_validation.scss b/scss/forms/_validation.scss
index d15e20899..acd68f2ed 100644
--- a/scss/forms/_validation.scss
+++ b/scss/forms/_validation.scss
@@ -5,6 +5,8 @@
 // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
 // server-side validation.
 
+// scss-docs-start form-validation-states-loop
 @each $state, $data in $form-validation-states {
   @include form-validation-state($state, map-get($data, color), map-get($data, icon));
 }
+// scss-docs-end form-validation-states-loop