fix(forms): input-group and validation icons (#32968)

Fixes #30131

Issue mentions `form-control` but it impacts `.custom-select` — but not `textarea` since it has a qualifying type selector that increases its specificty.

So another way could be to set `select.custom-select` and `input.form-control`. Would there be any other tag concerned by those classes?

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index a32163049c9439a3285771342037a64418944545..bdb7f69e00a373fefe882270d0c312403390df0c 100644 (file)
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -85,7 +85,7 @@
       border-color: $color;
 
       @if $enable-validation-icons {
-        padding-right: $input-height-inner;
+        padding-right: $input-height-inner !important; // stylelint-disable-line declaration-no-important
         background-image: escape-svg($icon);
         background-repeat: no-repeat;
         background-position: right $input-height-inner-quarter center;
@@ -114,7 +114,7 @@
       border-color: $color;
 
       @if $enable-validation-icons {
-        padding-right: $custom-select-feedback-icon-padding-right;
+        padding-right: $custom-select-feedback-icon-padding-right !important; // stylelint-disable-line declaration-no-important
         background: $custom-select-background, $custom-select-bg escape-svg($icon) $custom-select-feedback-icon-position / $custom-select-feedback-icon-size no-repeat;
       }