From 57569b0ac791ea47ed9d24692ec8d655c4f52145 Mon Sep 17 00:00:00 2001
From: Dan Matthew <111794+danielmatthew@users.noreply.github.com>
Date: Thu, 24 Jun 2021 14:16:25 +0100
Subject: [PATCH] fix(forms): update validation states

---
 scss/_forms.scss     | 17 ++++++++++++++++-
 scss/_variables.scss |  3 +++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/scss/_forms.scss b/scss/_forms.scss
index 679ecd3..9aebab6 100644
--- 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
index cd28d63..1fc850d 100644
--- 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;