Merge pull request #20872 from twbs/validation-fixes

Form validation fixes

3 files changed, 9 insertions, 13 deletions

diff --git a/docs/components/forms.md b/docs/components/forms.md
index a2d59d920..99f0d9a63 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -710,19 +710,19 @@ Ensure that an alternative indication of state is also provided. For instance, y
 
 {% example html %}
 <div class="form-group has-success">
-  <label class="col-form-label" for="inputSuccess1">Input with success</label>
+  <label class="form-control-label" for="inputSuccess1">Input with success</label>
   <input type="text" class="form-control form-control-success" id="inputSuccess1">
   <div class="form-control-feedback">Success! You've done it.</div>
   <small class="form-text text-muted">Example help text that remains unchanged.</small>
 </div>
 <div class="form-group has-warning">
-  <label class="col-form-label" for="inputWarning1">Input with warning</label>
+  <label class="form-control-label" for="inputWarning1">Input with warning</label>
   <input type="text" class="form-control form-control-warning" id="inputWarning1">
   <div class="form-control-feedback">Shucks, check the formatting of that and try again.</div>
   <small class="form-text text-muted">Example help text that remains unchanged.</small>
 </div>
 <div class="form-group has-danger">
-  <label class="col-form-label" for="inputDanger1">Input with danger</label>
+  <label class="form-control-label" for="inputDanger1">Input with danger</label>
   <input type="text" class="form-control form-control-danger" id="inputDanger1">
   <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
   <small class="form-text text-muted">Example help text that remains unchanged.</small>
diff --git a/scss/_variables.scss b/scss/_variables.scss
index d375f91c5..ed0dee39f 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -436,7 +436,7 @@ $custom-file-text: (
 
 // Form validation icons
 $form-icon-success-color: $brand-success !default;
-$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='$form-icon-success-color' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default;
+$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-success-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default;
 
 $form-icon-warning-color: $brand-warning !default;
 $form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$form-icon-warning-color}' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default;
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 698e7dc12..39851b8f8 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -12,15 +12,15 @@
   .custom-control {
     color: $color;
   }
+
   // Set the border and box shadow on specific inputs to match
   .form-control {
     border-color: $color;
-    // @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
 
-    &:focus {
-      // border-color: darken($border-color, 10%);
-      // $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);
-      // @include box-shadow($shadow);
+    @if $enable-rounded {
+      &:focus {
+        box-shadow: $input-box-shadow, 0 0 6px lighten($color, 20%);
+      }
     }
   }
 
@@ -30,10 +30,6 @@
     border-color: $color;
     background-color: lighten($color, 40%);
   }
-  // Optional feedback icon
-  .form-control-feedback {
-    color: $color;
-  }
 }
 
 // Form control focus state