diff --git a/resources/css/forms/forms.css b/resources/css/forms/forms.css new file mode 100644 index 0000000..d1790ea --- /dev/null +++ b/resources/css/forms/forms.css @@ -0,0 +1,52 @@ +:root { + --form-text-color: var(--wp--preset--color--carhop-green); + --form-border-color: var(--wp--preset--color--carhop-green); +} + +select, +input, +textarea { + @apply bg-transparent border border-primary p-4; + border-color: var(--form-border-color, #f1fcf9); + &::placeholder { + color: var(--form-text-color); + @apply text-lg font-light; + opacity: 0.8; + } +} + +.nf-field-element:has(input[aria-required='true']) { + @apply relative; + &:after { + @apply content-['*'] absolute top-3 right-3 text-red-800 text-2xl; + line-height: 1; + } +} + +input[type='submit'] { + @apply text-white w-12 h-12 relative block !mx-auto; + + &:hover { + @apply bg-carhop-green-900 border border-carhop-green-900 cursor-pointer; + } +} + +.content-box { + --form-border-color: var(--content-box-text-color); + --form-text-color: var(--content-box-text-color); +} + +label { + @apply sr-only; +} + +.nf-form-fields-required { +} + +.nf-before-form-content { + .nf-form-fields-required { + @apply text-lg pb-12; + color: var(--form-text-color); + opacity: 0.9; + } +}