fix(styles): Regression on input valid state (#2530)

swisspost · Jan 24, 2024 · 21cbf59 · 21cbf59
1 parent 99abb12
commit 21cbf59
Showing 1 changed file with 18 additions and 18 deletions.
diff --git a/packages/styles/src/components/form-validation.scss b/packages/styles/src/components/form-validation.scss
@@ -91,29 +91,29 @@
   display: block;
 }
 
-.is-valid {
-  padding-right: spacing.$size-small-huge; // For deprecated form-control-rg
-  border-color: var(--post-success-green);
-  background-image: b.escape-svg(form-validation.$form-feedback-icon-valid);
-  background-repeat: no-repeat;
-  background-position: right b.$input-height-inner-quarter center;
-
-  &.form-control-sm {
-    padding-right: spacing.$size-bigger-big; // Included in bootstrap and prevent native icon (e.g. with input[type=date]) to stack over success icon
-    background-size: forms.$form-bg-size-sm; // Add space between background icons (ours and the one from bootstrap)
-  }
-
-  &.form-control-lg {
-    padding-right: spacing.$size-small-huge; // Included in bootstrap and prevent native icon (e.g. with input[type=date]) to stack over success icon
-    background-size: forms.$form-bg-size; // Add space between background icons (ours and the one from bootstrap)
-  }
-}
-
 .form-control,
 .form-select {
   @include form-validation-mx.form-validation-state-selector(invalid) {
     border-color: form-validation.$form-feedback-invalid-color;
 
+    &.is-valid {
+      padding-right: spacing.$size-small-huge; // For deprecated form-control-rg
+      border-color: var(--post-success-green);
+      background-image: b.escape-svg(form-validation.$form-feedback-icon-valid);
+      background-repeat: no-repeat;
+      background-position: right b.$input-height-inner-quarter center;
+
+      &.form-control-sm {
+        padding-right: spacing.$size-bigger-big; // Included in bootstrap and prevent native icon (e.g. with input[type=date]) to stack over success icon
+        background-size: forms.$form-bg-size-sm; // Add space between background icons (ours and the one from bootstrap)
+      }
+
+      &.form-control-lg {
+        padding-right: spacing.$size-small-huge; // Included in bootstrap and prevent native icon (e.g. with input[type=date]) to stack over success icon
+        background-size: forms.$form-bg-size; // Add space between background icons (ours and the one from bootstrap)
+      }
+    }
+
     &:focus {
       border-color: form-validation.$form-feedback-invalid-color;
       box-shadow: form-validation.$form-feedback-invalid-box-shadow;