flyonui/components/validation/object.js

The easiest, free and open-source Tailwind CSS component library with semantic classes.

export default {".validate *:valid ~ .success-message, .validate *:has(:valid) ~ .success-message":{"display":"block"},".validate *:invalid ~ .error-message, .validate *:has(:invalid) ~ .error-message":{"display":"block"},".input, .select, .textarea":{"&.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid)":{"border-color":"var(--color-success)","&:hover":{"@media (hover: hover)":{"border-color":"var(--color-success)"}},"&:has(:hover):not(:focus, :focus-within)":{"border-color":"var(--color-success)"},"&:focus, &:focus-within":{"--input-color":"var(--color-success)"}},"&.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid)":{"border-color":"var(--color-error)","&:hover":{"@media (hover: hover)":{"border-color":"var(--color-error)"}},"&:has(:hover):not(:focus, :focus-within)":{"border-color":"var(--color-error)"},"&:focus, &:focus-within":{"--input-color":"var(--color-error)"}}},".switch, .checkbox, .radio, .radio-inset":{"&.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid)":{"--input-color":"var(--color-success)","border-color":"var(--input-color)","&:checked, &[aria-checked=\"true\"], &:has(> input:checked)":{"--input-color":"var(--color-success)"}},"&.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid)":{"--input-color":"var(--color-error)","border-color":"var(--input-color)","&:checked, &[aria-checked=\"true\"], &:has(> input:checked)":{"--input-color":"var(--color-error)"}}},".checkbox":{"&.is-valid, &:has(.is-valid), .validate &:valid, .validate &:has(:valid)":{"color":"var(--color-success-content)"},"&.is-invalid, &:has(.is-invalid), .validate &:invalid, .validate &:has(:invalid)":{"color":"var(--color-error-content)"}},".custom-option, .custom-soft-option":{".validate &:has(:valid), &:has(.is-valid)":{"--input-color":"var(--color-success)"},".validate &:has(:invalid), &:has(.is-invalid)":{"--input-color":"var(--color-error)"}},".input.is-valid::file-selector-button, .validate .input:valid::file-selector-button":{"background-color":"var(--color-success)","color":"var(--color-success-content)","--input-color":"var(--color-success)"},".input.is-invalid::file-selector-button, .validate .input:invalid::file-selector-button":{"background-color":"var(--color-error)","color":"var(--color-error-content)","--input-color":"var(--color-error)"},".input-floating > .input.is-valid::file-selector-button, .validate .input-floating > .input:valid::file-selector-button":{"background-color":"var(--color-base-100)","color":"var(--color-base-content)","border-inline-end":"var(--border) solid var(--color-success)"},".input-floating > .input.is-invalid::file-selector-button, .validate .input-floating > .input:invalid::file-selector-button":{"background-color":"var(--color-base-100)","color":"var(--color-base-content)","border-inline-end":"var(--border) solid var(--color-error)"},".label-text:has(~ .is-valid), .label-text:has(~ * .is-valid), .validate .label-text:has(~ :valid), .validate .label-text:has(~ * :valid), :is(.is-valid) ~ .helper-text, *:has(.is-valid) ~ .helper-text, .validate :is(:valid) ~ .helper-text, .validate *:has(:valid) ~ .helper-text, :is(.is-valid) ~ .label-text, :is(.is-valid) ~ .label-text *, :is(.is-valid) ~ * >.label-text, .validate :is(:valid) ~ .label-text, .validate :is(:valid) ~ .label-text *, .validate :is(:valid) ~ * >.label-text":{"color":"var(--color-success)"},".label-text:has(~ .is-invalid), .label-text:has(~ * .is-invalid), .validate .label-text:has(~ :invalid), .validate .label-text:has(~ * :invalid), :is(.is-invalid) ~ .helper-text, *:has(.is-invalid) ~ .helper-text, .validate :is(:invalid) ~ .helper-text, .validate *:has(:invalid) ~ .helper-text, :is(.is-invalid) ~ .label-text, :is(.is-invalid) ~ .label-text *, :is(.is-invalid) ~ * >.label-text, .validate :is(:invalid) ~ .label-text, .validate :is(:invalid) ~ .label-text *, .validate :is(:invalid) ~ * >.label-text":{"color":"var(--color-error)"},"select.is-valid + .advance-select-toggle, .advance-select-tag:has(> .is-valid), .validate select:has(~ * > .selected) + .advance-select-toggle":{"--input-color":"var(--color-success)","&:focus, &:focus-within":{"--input-color":"var(--color-success)"}},"select.is-invalid + .advance-select-toggle, .advance-select-tag:has(> .is-invalid), .validate select:not(:has(~ * > .selected)) + .advance-select-toggle":{"--input-color":"var(--color-error)","&:focus, &:focus-within":{"--input-color":"var(--color-error)"}},".input-floating:has(.is-valid), .validate .input-floating:has(:valid)":{"&:hover":{"@media (hover: hover)":{"border-color":"var(--color-success)"}},".input-floating-label":{"color":"var(--color-success)"},"&:focus-within, &:not(:has(input:placeholder-shown)), &:has(.input:focus)":{".input-floating-label":{"color":"var(--color-success)"}}},".input-floating:has(.is-invalid), .validate .input-floating:has(:invalid)":{"&:hover":{"@media (hover: hover)":{"border-color":"var(--color-error)"}},".input-floating-label":{"color":"var(--color-error)"},"&:focus-within, &:not(:has(input:placeholder-shown)), &:has(.input:focus)":{".input-floating-label":{"color":"var(--color-error)"}}},".textarea-floating:has(.is-valid), .validate .textarea-floating:has(:valid)":{".textarea-floating-label":{"color":"var(--color-success)"},"&:focus-within, &:not(:has(textarea:placeholder-shown)), &:has(.textarea:focus)":{".textarea-floating-label":{"color":"var(--color-success)"}}},".textarea-floating:has(.is-invalid), .validate .textarea-floating:has(:invalid)":{".textarea-floating-label":{"color":"var(--color-error)"},"&:focus-within, &:not(:has(textarea:placeholder-shown)), &:has(.textarea:focus)":{".textarea-floating-label":{"color":"var(--color-error)"}}},".select-floating:has(.is-valid), .validate .select-floating:has(:valid)":{".select-floating-label":{"color":"var(--color-success)"},"&:focus-within, &:not(:has(select:placeholder-shown)), &:has(.select:focus)":{".select-floating-label":{"color":"var(--color-success)"}}},".select-floating:has(.is-invalid), .validate .select-floating:has(:invalid)":{".select-floating-label":{"color":"var(--color-error)"},"&:focus-within, &:not(:has(select:placeholder-shown)), &:has(.select:focus)":{".select-floating-label":{"color":"var(--color-error)"}}}};