diff --git a/ui/src/css/form/_form.scss b/ui/src/css/form/_form.scss index bbafb53..758ec48 100644 --- 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 index 9708fed..fcc5204 100644 --- 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 index 7329227..52513fb 100644 --- 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 index 093a5e5..2d4e725 100644 --- 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 deleted file mode 100644 index 474e1a3..0000000 --- a/ui/src/css/mixins/_form-field-reset.scss +++ /dev/null @@ -1,33 +0,0 @@ -/* ----------------------------------------------------------------------------- -Dependencies. ----------------------------------------------------------------------------- -*/ -@use '../base' as *; -@use '../mixins/focus' as *; - -@mixin form-field-reset { - @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); - } -} diff --git a/ui/src/css/mixins/_index.scss b/ui/src/css/mixins/_index.scss index ee8d473..eb56952 100644 --- a/ui/src/css/mixins/_index.scss +++ b/ui/src/css/mixins/_index.scss @@ -1,2 +1 @@ @forward 'focus'; -@forward 'form-field-reset';