trying out new validation styles

1 files changed, 17 insertions, 3 deletions

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