trying out new validation styles

3 files changed, 79 insertions, 15 deletions

diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md
index 8fe2a9d26..6c3272dc1 100644
--- a/docs/4.0/components/forms.md
+++ b/docs/4.0/components/forms.md
@@ -897,6 +897,34 @@ Those same states can also be used with horizontal forms.
 </div>
 {% endexample %}
 
+### Validate with grid
+
+And in more complex grids.
+
+{% example html %}
+<div class="container">
+  <form>
+    <div class="form-group has-danger">
+      <label for="inputHorizontalDnger" class="form-control-label">Mailing address</label>
+      <input type="text" class="form-control mb-2" placeholder="Street address">
+      <div class="row gutters-sm">
+        <div class="col-7">
+          <input type="text" class="form-control is-validated" placeholder="City">
+        </div>
+        <div class="col">
+          <input type="text" class="form-control is-validated" placeholder="State">
+        </div>
+        <div class="col">
+          <input type="text" class="form-control" placeholder="Zip">
+        </div>
+      </div>
+      <div class="form-control-feedback">Something's not right with that field. Try again?</div>
+      <small class="form-text text-muted">Example help text that remains unchanged.</small>
+    </div>
+  </form>
+</div>
+{% endexample %}
+
 Checkboxes and radios are also supported.
 
 {% example html %}
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 805bd0743..391a6cb4f 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -255,11 +255,21 @@ select.form-control-lg {
   background-size: ($input-height-inner / 2) ($input-height-inner / 2);
 }
 
+.form-control-validated,
+.is-validated {
+  padding-right: ($input-btn-padding-x * 3);
+  background-repeat: no-repeat;
+  background-position: center right ($input-height-inner / 4);
+  background-size: ($input-height-inner / 2) ($input-height-inner / 2);
+}
+
 // Form validation states
 .has-success {
   @include form-control-validation($brand-success);
 
-  .form-control-success {
+  .form-control-success,
+  .form-control-validated,
+  .is-validated {
     background-image: $form-icon-success;
   }
 }
@@ -267,7 +277,9 @@ select.form-control-lg {
 .has-warning {
   @include form-control-validation($brand-warning);
 
-  .form-control-warning {
+  .form-control-warning,
+  .form-control-validated,
+  .is-validated {
     background-image: $form-icon-warning;
   }
 }
@@ -275,7 +287,9 @@ select.form-control-lg {
 .has-danger {
   @include form-control-validation($brand-danger);
 
-  .form-control-danger {
+  .form-control-danger,
+  .form-control-validated,
+  .is-validated {
     background-image: $form-icon-danger;
   }
 }
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 16f0080f2..38251332a 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -14,22 +14,44 @@
   }
 
   // Set the border and box shadow on specific inputs to match
-  .form-control,
-  .custom-select,
-  .custom-file-control {
-    border-color: $color;
+  // .form-control-validated,
+  // .is-validated,
+  // .custom-select,
+  // .custom-file-control {
+  //   border-color: $color;
+  //
+  //   &:focus {
+  //     @include box-shadow($input-box-shadow, 0 0 0 3px rgba($color, .5));
+  //   }
+  // }
 
-    &:focus {
-      @include box-shadow($input-box-shadow, 0 0 0 3px rgba($color, .5));
+  .is-validated {
+    // Textual inputs
+    &.form-control,
+    &.custom-select,
+    &.custom-file-control {
+      border-color: $color;
+
+      &:focus {
+        @include box-shadow($input-box-shadow, 0 0 0 3px rgba($color, .5));
+      }
     }
-  }
 
-  // Set validation states also for addons
-  .input-group-addon {
-    color: $color;
-    background-color: lighten($color, 40%);
-    border-color: $color;
+    &.input-group {
+      .input-group-addon {
+        color: $color;
+        background-color: lighten($color, 40%);
+        border-color: $color;
+      }
+    }
   }
+
+  // // Set validation states also for addons
+  // .input-group-addon {
+  //   color: $color;
+  //   background-color: lighten($color, 40%);
+  //   border-color: $color;
+  // }
 }
 
 // Form control focus state