From 728f5792867a96300b78b75b91e5be31e44a640f Mon Sep 17 00:00:00 2001
From: Patrick Yeo <pyeo717@gmail.com>
Date: Mon, 2 Oct 2017 20:37:28 -0700
Subject: [PATCH] Form Validation `.valid-feedback` and `.valid-tooltip` are
 unstyled (#23527)

---
 scss/_forms.scss        | 22 ----------------------
 scss/mixins/_forms.scss | 22 ++++++++++++++++++++++
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/scss/_forms.scss b/scss/_forms.scss
index 1c661917bc..0ece186d93 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -258,28 +258,6 @@ select.form-control-lg {
 // pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
 // server side validation.
 
-.invalid-feedback {
-  display: none;
-  margin-top: .25rem;
-  font-size: .875rem;
-  color: $form-feedback-invalid-color;
-}
-
-.invalid-tooltip {
-  position: absolute;
-  top: 100%;
-  z-index: 5;
-  display: none;
-  width: 250px;
-  padding: .5rem;
-  margin-top: .1rem;
-  font-size: .875rem;
-  line-height: 1;
-  color: #fff;
-  background-color: rgba($form-feedback-invalid-color,.8);
-  border-radius: .2rem;
-}
-
 @include form-validation-state("valid", $form-feedback-valid-color);
 @include form-validation-state("invalid", $form-feedback-invalid-color);
 
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index d38c7a8198..6403f469d9 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -23,6 +23,28 @@
 
 @mixin form-validation-state($state, $color) {
 
+  .#{$state}-feedback {
+    display: none;
+    margin-top: .25rem;
+    font-size: .875rem;
+    color: $color;
+  }
+
+  .#{$state}-tooltip {
+    position: absolute;
+    top: 100%;
+    z-index: 5;
+    display: none;
+    width: 250px;
+    padding: .5rem;
+    margin-top: .1rem;
+    font-size: .875rem;
+    line-height: 1;
+    color: #fff;
+    background-color: rgba($color,.8);
+    border-radius: .2rem;
+  }
+
   .form-control,
   .custom-select {
     .was-validated &:#{$state},