improve form validation styles

basher · Aug 21, 2024 · dcf9844 · dcf9844
1 parent ce8549a
commit dcf9844
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/ui/src/css/form/_form.scss b/ui/src/css/form/_form.scss
@@ -47,18 +47,24 @@ Dependencies.
             }
         }
 
-        &:has(:invalid:required:focus) {
+        &:has(:user-invalid:required) {
             @include validation;
         }
     }
 
     // Errors rendered directly in HTML, or via JavaScript.
+    &__error {
+        color: $color-error;
+    }
+
     &__field--has-error {
         @include validation;
-    }
 
-    &__error {
-        color: $color-error;
+        &:has(:valid) {
+            .form__error {
+                display: none;
+            }
+        }
     }
 }
 

diff --git a/ui/src/css/mixins/_focus.scss b/ui/src/css/mixins/_focus.scss
@@ -22,7 +22,7 @@ Dependencies.
 
     &:hover {
         @if $background {
-            &:not(:disabled, :invalid, :valid) {
+            &:not(:disabled) {
                 background-color: hsl(var(--color-brand) / 10%);
             }
         }

diff --git a/ui/src/css/mixins/_form-field-reset.scss b/ui/src/css/mixins/_form-field-reset.scss
@@ -18,14 +18,16 @@ Dependencies.
         border-width: $border-width-m;
     }
 
-    &:invalid:required:focus {
+    &:user-invalid:required {
         background-color: hsl(var(--color-accent-negative) / 10%);
         border-color: $color-error;
         border-width: $border-width-m;
     }
 
     // ARIA.
     &[aria-invalid='true'] {
+        background-color: hsl(var(--color-accent-negative) / 10%);
         border-color: $color-error;
+        border-width: $border-width-m;
     }
 }