fix(forms): update validation states

techfromsage · Jun 24, 2021 · 57569b0 · 57569b0
1 parent 6a9bd64
commit 57569b0
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/scss/_forms.scss b/scss/_forms.scss
@@ -85,7 +85,7 @@ legend {
 .field-error--new {
   display: inline-block;
   padding-left: $spacer;
-  margin-top: math.div($spacer, 2);
+  margin-bottom: math.div($spacer, 2);
   color: $red;
   border-left: 3px solid $red;
 }
@@ -97,3 +97,18 @@ legend {
   background-color: $white;
   border-left: 3px solid $primary;
 }
+
+.was-validated .form-control:invalid, .form-control.is-invalid,
+.was-validated .form-control:valid, .form-control.is-valid {
+  border-color: $input-border-color;
+}
+
+
+.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus,
+.was-validated .form-control:valid:focus, .form-control.is-valid:focus,
+.was-validated .form-select:invalid:focus, .form-select.is-invalid:focus,
+.was-validated .form-select:valid:focus, .form-select.is-valid:focus,
+{
+  border-color: $input-focus-border-color;
+  box-shadow: $input-focus-box-shadow;
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -162,6 +162,9 @@ $form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='ht
 $form-check-input-checked-bg-image--alt:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color--alt}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>");
 $form-check-radio-checked-bg-image--alt:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2.5' fill='#{$form-check-input-checked-color--alt}'/></svg>");
 
+$form-feedback-valid-color: $turquoise !default;
+$form-feedback-invalid-color: $red !default;
+
 $link-hover-color: $accent !default;
 $link-hover-decoration: none !default;