feat(forms): convey status using icon in feedback message to stop rel…

…ying on color only, for #249
Orange-OpenSource · Jan 8, 2020 · 95e6f6c · 95e6f6c
1 parent f4a1b8d
commit 95e6f6c
Showing 1 changed file with 20 additions and 20 deletions.
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
@@ -50,6 +50,26 @@
     @include font-size($form-feedback-font-size);
     font-weight: $font-weight-bold; // Boosted mod
     // color: $color; // Boosted mod
+
+    // Boosted mod: status should not rely on color only
+    @if $enable-validation-icons {
+      &::before {
+        display: inline-block;
+        width: $form-feedback-icon-size;
+        height: $form-feedback-icon-size;
+        margin-right: map-get($spacers, 1);
+        content: "";
+        background-repeat: no-repeat;
+        background-size: $form-feedback-icon-size;
+      }
+
+      @if $state == "valid" {
+        @extend %svg-success;
+      } @else {
+        @extend %svg-danger;
+      }
+    }
+    // end mod
   }
 
   .#{$state}-tooltip {
@@ -91,26 +111,6 @@
         border-color: $input-focus-border-color;
         // box-shadow: 0 0 0 $input-focus-width rgba($color, .25); // Boosted mod, remove box shadow!
       }
-
-      ~ .#{$state}-feedback {
-        @if $enable-validation-icons {
-          &::before {
-            display: inline-block;
-            width: $form-feedback-icon-size;
-            height: $form-feedback-icon-size;
-            margin-right: map-get($spacers, 1);
-            content: "";
-            background-repeat: no-repeat;
-            background-size: $form-feedback-icon-size;
-          }
-
-          @if $state == "valid" {
-            @extend %svg-success;
-          } @else {
-            @extend %svg-danger;
-          }
-        }
-      }
       // end mod
     }
   }