diff --git a/dist/css/custom/custom.css b/dist/css/custom/custom.css index d27a16927d4fd03f89e472d08e9fec93dc29fe09..8b0f67650a06a855b1143d55fc665cbabe81efc2 100755 --- a/dist/css/custom/custom.css +++ b/dist/css/custom/custom.css @@ -2,4 +2,8 @@ width: 100vw; position: relative; left: calc(-1 * (100vw - 100%) / 2); +} +.js-form-type-checkbox label{ + justify-content: flex-start; + gap: 8px; } \ No newline at end of file diff --git a/templates/system/form-element.html.twig b/templates/system/form-element.html.twig index b2a2404dac8446dc19738318d5c069b7aa5bdd17..9c7057d1f0c6e6cbbc50fdf5b0d356a95034b184 100644 --- a/templates/system/form-element.html.twig +++ b/templates/system/form-element.html.twig @@ -67,6 +67,9 @@ ] %} <div{{ attributes.addClass(classes) }}> + {% if type in ['checkbox', 'radio'] %} + <label class="label cursor-pointer"> + {% endif %} {% if label_display in ['before', 'invisible'] %} {{ label }} {% endif %} @@ -85,6 +88,9 @@ {% if label_display == 'after' %} {{ label }} {% endif %} + {% if type in ['checkbox', 'radio'] %} + </label> + {% endif %} {% if errors %} <div class="form-item--error-message"> {{ errors }} diff --git a/templates/system/input--checkbox.html.twig b/templates/system/input--checkbox.html.twig new file mode 100644 index 0000000000000000000000000000000000000000..376b87e8fd2a0f4e27ec22643295c5e7e238f3ab --- /dev/null +++ b/templates/system/input--checkbox.html.twig @@ -0,0 +1,23 @@ +{# +/** + * @file + * Default theme implementation for an 'input' #type form element. + * + * Available variables: + * - attributes: A list of HTML attributes for the input element. + * - children: Optional additional rendered elements. + * + * @see template_preprocess_input() + * + * @ingroup themeable + */ +#} +{# <input{{ attributes }} />{{ children }} #} + +{# <input{{ attributes.addClass('appearance-none checkbox') }} type="checkbox" />{{ children }} +<input class="appearance-none checkbox" type="checkbox" />{{ children }} #} + +{% set customAttributes = attributes.addClass('checkbox') %} +{% set customAttributes = customAttributes.removeClass('input') %} +<input{{ customAttributes }} />{{ children }} + diff --git a/templates/system/input--radio.html.twig b/templates/system/input--radio.html.twig new file mode 100644 index 0000000000000000000000000000000000000000..7e05f22998cdbaf01a57cce0cc17d106a2d2f553 --- /dev/null +++ b/templates/system/input--radio.html.twig @@ -0,0 +1,19 @@ +{# +/** + * @file + * Default theme implementation for an 'input' #type form element. + * + * Available variables: + * - attributes: A list of HTML attributes for the input element. + * - children: Optional additional rendered elements. + * + * @see template_preprocess_input() + * + * @ingroup themeable + */ +#} +{# <input{{ attributes }} />{{ children }} #} + +{% set customAttributes = attributes.addClass('radio') %} +{% set customAttributes = customAttributes.removeClass('input') %} +<input{{ customAttributes }} />{{ children }}