Form Validation .valid-feedback and .valid-tooltip are unstyled (#…

…23527)
twbs · Oct 3, 2017 · 728f579 · 728f579
1 parent acaa6d6
commit 728f579
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 22 deletions.
diff --git 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
@@ -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},