From 2e9c24b5112d747344b86b4fe27b993a2d5fac6f Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Tue, 27 Aug 2024 12:34:12 +0200
Subject: [PATCH] [#2685] styling

---
 .../components/Form/ChoiceListItem.html       | 37 ++++++++++++++-----
 .../scss/components/Form/ChoiceList.scss      | 17 +++++++++
 2 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/src/open_inwoner/components/templates/components/Form/ChoiceListItem.html b/src/open_inwoner/components/templates/components/Form/ChoiceListItem.html
index 3f8667e409..c59f28518c 100644
--- a/src/open_inwoner/components/templates/components/Form/ChoiceListItem.html
+++ b/src/open_inwoner/components/templates/components/Form/ChoiceListItem.html
@@ -2,15 +2,32 @@
 
 {# Item component for changing the parent styles, when child is clicked #}
 
-<li class="choice-list__item">
-    <label class="choice-list__label {% if bold_label %}choice-list__label--large{% endif %}" for="id_{{ name }}_{{ index }}">
-        <input type="{% if input_type_radio %}radio{% else %}checkbox{% endif %}" class="choice-list__radio" id="id_{{ name }}_{{ index }}" name="{{ name }}" value="{{ choice.0|unlocalize }}" {% if choice.0 in data or checked %}checked="checked"{% endif %}>
-        <div class="choice-list__content">
-            {% if bold_label %}<h2 class="choice-list__heading">Kies {{ choice.1 }}</h2>{% endif %}
-            <p class="choice-list__p">{{ choice.1 }}</p>
+<li class="choice-list__item {% if input_type_radio %}{% else %}radiochoice-list-multiple__item{% endif %}">
+    {% if input_type_radio %}
+        <label class="choice-list__label {% if bold_label %}choice-list__label--large{% endif %}" for="id_{{ name }}_{{ index }}">
+            <input type="{% if input_type_radio %}radio{% else %}checkbox{% endif %}" class="choice-list__radio" id="id_{{ name }}_{{ index }}" name="{{ name }}" value="{{ choice.0|unlocalize }}" {% if choice.0 in data or checked %}checked="checked"{% endif %}>
+            <div class="choice-list__content">
+                {% if bold_label %}<h2 class="choice-list__heading">Kies {{ choice.1 }}</h2>{% endif %}
+                <p class="choice-list__p">{{ choice.1 }}</p>
+            </div>
+            {% if icon_symbol %}
+                {% icon icon_symbol outlined=True extra_classes="icon--large" %}
+            {% endif %}
+        </label>
+
+    {% else %}
+        <div class="choice-list-multiple__content">
+            <div class="form__control">
+                <div class="checkbox">
+                    <input type="checkbox" class="checkbox__input" id="id_{{ name }}_{{ index }}" name="{{ name }}" value="{{ choice.0|unlocalize }}" {% if choice.0 in data or checked %}checked="checked"{% endif %}>
+                    <label class="checkbox__label" for="id_{{ name }}_{{ index }}">
+                        {% if icon_symbol %}
+                            {% icon icon_symbol outlined=True extra_classes="icon--large" %}
+                        {% endif %}
+                        <p class="checkbox__p">{{ choice.1 }}</p>
+                    </label>
+                </div>
+            </div>
         </div>
-        {% if icon_symbol %}
-            {% icon icon_symbol outlined=True extra_classes="icon--large" %}
-        {% endif %}
-    </label>
+    {% endif %}
 </li>
diff --git a/src/open_inwoner/scss/components/Form/ChoiceList.scss b/src/open_inwoner/scss/components/Form/ChoiceList.scss
index 8f8a3950a9..4fea83b490 100644
--- a/src/open_inwoner/scss/components/Form/ChoiceList.scss
+++ b/src/open_inwoner/scss/components/Form/ChoiceList.scss
@@ -230,6 +230,23 @@
       left: auto;
       right: var(--spacing-medium);
     }
+
+    // Rare case: if icons would be added to checkbox list
+    .checkbox__label {
+      &:has(.icon--large) {
+        display: flex;
+        flex-direction: column;
+
+        .checkbox .checkbox__label:before {
+          position: static;
+          transform: initial;
+        }
+      }
+      [class*='icons'].icon--large {
+        position: initial;
+        transform: initial;
+      }
+    }
   }
 
   &-multiple__item input[type='checkbox'] {