From b68e2d390902e029f0ef5e54ee54d38aa5ffdbcd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= Date: Tue, 5 Oct 2021 10:21:07 +0200 Subject: [PATCH] WIP Add form styles --- .../Private/Assets/scss/components/_forms.scss | 16 ++++++++++++++++ .../Resources/Private/Assets/scss/main.scss | 1 + .../Private/Partials/Form/Checkbox.html | 3 ++- .../Resources/Private/Partials/Form/Email.html | 4 ++-- .../Private/Partials/Form/LinkedCheckbox.html | 8 +++++--- .../Private/Partials/Form/MultiCheckbox.html | 2 +- .../Private/Partials/Form/MultiSelect.html | 8 ++++---- .../Resources/Private/Partials/Form/Number.html | 4 ++-- .../Private/Partials/Form/RadioButton.html | 4 ++-- .../Private/Partials/Form/SingleSelect.html | 8 ++++---- .../Private/Partials/Form/Telephone.html | 4 ++-- .../Resources/Private/Partials/Form/Text.html | 4 ++-- .../Private/Partials/Form/Textarea.html | 4 ++-- 13 files changed, 45 insertions(+), 25 deletions(-) create mode 100644 public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_forms.scss 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 @@