diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index e7de1249fc..ad30422d4d 100644 --- 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 } }