trying out new validation styles

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 %}

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;
   }
 }

scss/mixins/_forms.scss

@@ -14,9 +14,22 @@
   }
 
   // Set the border and box shadow on specific inputs to match
-  .form-control,
+  // .form-control-validated,
-  .custom-select,
+  // .is-validated,
-  .custom-file-control {
+  // .custom-select,
+  // .custom-file-control {
+  //   border-color: $color;
+  //
+  //   &: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 {
@@ -24,13 +37,22 @@
       }
     }
 
-  // Set validation states also for addons
+    &.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
 //