remove form-field-reset mixin

basher · Nov 11, 2024 · 2193a70 · 2193a70
1 parent 25dd82f
commit 2193a70
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 48 deletions.
diff --git a/ui/src/css/form/_form.scss b/ui/src/css/form/_form.scss
@@ -68,6 +68,32 @@ Dependencies.
     }
 }
 
+:is(.input, .select, .textarea) {
+    @include focus($background: true);
+    border: var(--border-width-s) solid;
+    padding: var(--gutter-s);
+
+    // Native HTML5 validation.
+    &:valid:required {
+        background-color: hsl(var(--color-accent-positive) / 10%);
+        border-color: $color-success;
+        border-width: var(--border-width-m);
+    }
+
+    &:user-invalid:required {
+        background-color: hsl(var(--color-accent-negative) / 10%);
+        border-color: $color-error;
+        border-width: var(--border-width-m);
+    }
+
+    // ARIA.
+    &[aria-invalid='true'] {
+        background-color: hsl(var(--color-accent-negative) / 10%);
+        border-color: $color-error;
+        border-width: var(--border-width-m);
+    }
+}
+
 .message--error {
     + .form {
         margin-block-start: var(--gutter-m);

diff --git a/ui/src/css/form/_input.scss b/ui/src/css/form/_input.scss
@@ -1,11 +1,8 @@
 /*
 ----------------------------------------------------------------------------
-Dependencies.
+Basic component styles are in "form.css".
 ----------------------------------------------------------------------------
 */
-@use '../mixins' as *;
-// @use '../base' as *;
-
 .input {
-    @include form-field-reset;
+    //
 }
diff --git a/ui/src/css/form/_select.scss b/ui/src/css/form/_select.scss
@@ -1,14 +1,12 @@
 /*
 ----------------------------------------------------------------------------
-Dependencies.
+Basic component styles are in "form.css".
 ----------------------------------------------------------------------------
 */
-@use '../mixins' as *;
+// @use '../mixins' as *;
 @use '../base' as *;
 
 .select {
-    @include form-field-reset;
-
     @media (prefers-color-scheme: dark) {
         option {
             color: $color-neutral-900;

diff --git a/ui/src/css/form/_textarea.scss b/ui/src/css/form/_textarea.scss
@@ -1,11 +1,8 @@
 /*
 ----------------------------------------------------------------------------
-Dependencies.
+Basic component styles are in "form.css".
 ----------------------------------------------------------------------------
 */
-@use '../mixins' as *;
-// @use '../base' as *;
-
 .textarea {
-    @include form-field-reset;
+    //
 }
diff --git a/ui/src/css/mixins/_form-field-reset.scss b/ui/src/css/mixins/_form-field-reset.scss
diff --git a/ui/src/css/mixins/_index.scss b/ui/src/css/mixins/_index.scss
@@ -1,2 +1 @@
 @forward 'focus';
-@forward 'form-field-reset';