diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_forms.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_forms.scss new file mode 100644 index 00000000..e029efdf --- /dev/null +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_forms.scss @@ -0,0 +1,16 @@ +.form-field { + @apply border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 block w-full; + + &--has-error { + @apply border-red-500; + } +} + +.form-checkbox, +.form-radio { + @apply border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 text-ep-secondary sbw:text-sbw-secondary uch:text-uch-secondary h-4 w-4 ; + + &--has-error { + @apply border-red-500; + } +} diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss index 929ce373..eab1c4a3 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss @@ -20,6 +20,7 @@ @import "components/cookie-consent"; @import "components/calendar"; @import "components/datepicker"; + @import "components/forms"; @import "components/herounit"; @import "components/lightbox"; @import "components/map"; diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Checkbox.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Checkbox.html index 6d86a835..a0ecd006 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Checkbox.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Checkbox.html @@ -6,7 +6,8 @@ property="{element.identifier}" id="{element.uniqueIdentifier}" value="{element.properties.value}" - class="border-gray-400 focus:border-gray-800 text-ep-secondary sbw:text-sbw-secondary uch:text-uch-secondary h-6 w-6" + class="form-checkbox" + errorClass="form-checkbox--has-error" additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}" /> {formvh:translateElementProperty(element: element, property: 'label')} diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Email.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Email.html index 59de8253..590dbdb6 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Email.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Email.html @@ -5,8 +5,8 @@ type="email" property="{element.identifier}" id="{element.uniqueIdentifier}" - class="border-gray-400 focus:border-gray-800 mt-1 block w-full" - errorClass="{element.properties.elementErrorClassAttribute}" + class="form-field" + errorClass="form-field--has-error" additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}" /> diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/LinkedCheckbox.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/LinkedCheckbox.html index f969505c..3d524700 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/LinkedCheckbox.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/LinkedCheckbox.html @@ -5,12 +5,14 @@ - {formvh:translateElementProperty(element: element, property: 'label') -> f:format.raw()} {formvh:translateElementProperty(element: element, property: 'linkText')} + + {formvh:translateElementProperty(element: element, property: 'label') -> f:format.raw()} {formvh:translateElementProperty(element: element, property: 'linkText')} + diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/MultiCheckbox.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/MultiCheckbox.html index 1dc52a03..36858487 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/MultiCheckbox.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/MultiCheckbox.html @@ -10,7 +10,7 @@ multiple="1" id="{element.uniqueIdentifier}-{idIterator.index}" value="{value}" - class="border-gray-400 focus:border-gray-800 h-6 w-6" + class="form-checkbox" additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}" /> {formvh:translateElementProperty(element: element, property: '{0: \'options\', 1: value}')} diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/MultiSelect.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/MultiSelect.html index 15388af8..4d1440db 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/MultiSelect.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/MultiSelect.html @@ -6,10 +6,10 @@ diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Number.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Number.html index 38357d52..f3237391 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Number.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Number.html @@ -5,8 +5,8 @@ type="number" property="{element.identifier}" id="{element.uniqueIdentifier}" - class="border-gray-400 focus:border-gray-800 mt-1 block w-full" - errorClass="{element.properties.elementErrorClassAttribute}" + class="form-field" + errorClass="form-field--has-error" additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}" /> diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/RadioButton.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/RadioButton.html index d7483e31..c5d69ce8 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/RadioButton.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/RadioButton.html @@ -9,8 +9,8 @@ property="{element.identifier}" id="{element.uniqueIdentifier}-{idIterator.index}" value="{value}" - class="border-gray-400 focus:border-gray-800" - errorClass="form-radio-error" + class="form-radio" + errorClass="form-radio--has-error" additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}" /> {formvh:translateElementProperty(element: element, property: '{0: \'options\', 1: value}')} diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/SingleSelect.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/SingleSelect.html index 0758a994..4e1da4ad 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/SingleSelect.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/SingleSelect.html @@ -7,8 +7,8 @@ property="{element.identifier}" id="{element.uniqueIdentifier}" options="{formvh:translateElementProperty(element: element, property: 'options')}" - class="{element.properties.elementClassAttribute} border-gray-400 focus:border-gray-800 w-full mt-1" - errorClass="form-select-error" + class="form-field" + errorClass="form-field--has-error" additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}" prependOptionLabel="{formvh:translateElementProperty(element: element, property: 'prependOptionLabel')}" prependOptionValue="{formvh:translateElementProperty(element: element, property: 'prependOptionValue')}" @@ -19,8 +19,8 @@ property="{element.identifier}" id="{element.uniqueIdentifier}" options="{formvh:translateElementProperty(element: element, property: 'options')}" - class="{element.properties.elementClassAttribute} border-gray-400 focus:border-gray-800 w-full mt-1" - errorClass="form-select-error" + class="form-field" + errorClass="form-field--has-error" additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}" /> diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Telephone.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Telephone.html index 0b55857a..aed976cb 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Telephone.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Telephone.html @@ -5,8 +5,8 @@ type="tel" property="{element.identifier}" id="{element.uniqueIdentifier}" - class="border-gray-400 focus:border-gray-800 mt-1 block w-full" - errorClass="{element.properties.elementErrorClassAttribute}" + class="form-field" + errorClass="form-field--has-error" additionalAttributes="{formvh:translateElementProperty(element: element, property: 'fluidAdditionalAttributes')}" /> diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Text.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Text.html index 33124a5f..9d78acdd 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Text.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Text.html @@ -4,8 +4,8 @@ diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Textarea.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Textarea.html index d5c705af..b6e522de 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Textarea.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Textarea.html @@ -4,10 +4,10 @@