| | |
| | | --w: 1.25rem; |
| | | } |
| | | .validation-icon.error { |
| | | color: var(--error); |
| | | color: rgb(var(--error)); |
| | | } |
| | | .validation-icon.success { |
| | | color: var(--success); |
| | |
| | | .field.has-error input, |
| | | .field.has-error textarea, |
| | | .field.has-error select { |
| | | border-color: var(--error); |
| | | border-color: rgb(var(--error)); |
| | | background-color: var(--errorBack) |
| | | } |
| | | |
| | | .field.has-error input:focus, |
| | | .field.has-error textarea:focus, |
| | | .field.has-error select:focus { |
| | | outline-color: var(--error); |
| | | box-shadow: 0 0 0 3px rgba(var(--error-rgb), 0.2); |
| | | outline-color: rgb(var(--error)); |
| | | box-shadow: 0 0 0 3px rgba(var(--error), 0.2); |
| | | } |
| | | |
| | | /* Success State */ |
| | |
| | | |
| | | /* Required Asterisk */ |
| | | .field label .required { |
| | | color: var(--error); |
| | | color: rgb(var(--error)); |
| | | margin-left: 0.25rem; |
| | | } |
| | | |
| | |
| | | .field-error input, |
| | | .field-error textarea, |
| | | .field-error select { |
| | | border-color: var(--error); |
| | | border-color: rgb(var(--error)); |
| | | } |
| | | |
| | | .error-message { |
| | | color: var(--error); |
| | | color: rgb(var(--error)); |
| | | font-size: var(--txt-small); |
| | | margin-top: 0.25rem; |
| | | display: block; |
| | |
| | | |
| | | .form-error { |
| | | background-color: var(--errorBack); |
| | | border: 1px solid var(--error); |
| | | border: 1px solid rgb(var(--error)); |
| | | padding: 0.75rem; |
| | | border-radius: var(--radius); |
| | | margin-bottom: 1rem; |