From 6fdf7c3723096c2f60f72d6cce44ffb816a774cf Mon Sep 17 00:00:00 2001
From: Philipp Lang <privat@zoomyboy.de>
Date: Fri, 15 Dec 2023 15:06:43 +0100
Subject: [PATCH] mod overwrites

---
 assets/js/Stepper.vue              | 14 +++++++-------
 assets/js/components/RadioGrid.vue | 17 ++++++++++++-----
 assets/js/components/VBtn.vue      |  2 +-
 assets/js/components/VCheckbox.vue | 16 ++++++++--------
 templates/overwrite.htm            |  5 ++++-
 5 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/assets/js/Stepper.vue b/assets/js/Stepper.vue
index a6c3a47..07ddbab 100644
--- a/assets/js/Stepper.vue
+++ b/assets/js/Stepper.vue
@@ -33,7 +33,7 @@
             <slide v-if="value.category == 'Haus'" :key="4" class="py-16 px-8">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
                 <heading>Wann wurde das<br />Haus <span class="text-primary">erbaut?</span></heading>
-                <slider :min="1900" :max="maxYear" v-model="value.construction_year" class="slider-custom"> </slider>
+                <slider :min="1900" :max="maxYear" v-model="value.construction_year" class="mt-10 slider-custom"> </slider>
                 <pagination v-model="innerStep" class="mt-24"></pagination>
             </slide>
             <slide v-if="value.category == 'Haus'" :key="5" class="py-16 px-8">
@@ -70,9 +70,9 @@
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
                 <heading>Wann wurde das<br />Gewerbe <span class="text-primary">erbaut?</span></heading>
                 <!--
-                                                                                            <veeno :pipsy="pipsy" :tooltips="tooltips" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range"
-                                                                                                v-model="value.construction_year" />
-                                                                            -->
+                                                                                                    <veeno :pipsy="pipsy" :tooltips="tooltips" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range"
+                                                                                                        v-model="value.construction_year" />
+                                                                                    -->
                 <pagination v-model="innerStep" class="mt-24"></pagination>
             </slide>
             <slide v-if="value.category == 'Gewerbe'" :key="5" class="py-16 px-8">
@@ -102,9 +102,9 @@
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
                 <heading>Wann wurde die<br />Wohnung <span class="text-primary">erbaut?</span></heading>
                 <!--
-                                                                                            <veeno :pipsy="pipsy" :tooltips="tooltips" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range"
-                                                                                                v-model="value.construction_year" />
-                                                                            -->
+                                                                                                    <veeno :pipsy="pipsy" :tooltips="tooltips" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range"
+                                                                                                        v-model="value.construction_year" />
+                                                                                    -->
                 <pagination v-model="innerStep" class="mt-24"></pagination>
             </slide>
             <slide v-if="value.category == 'Wohnung'" class="py-16 px-8" :key="5">
diff --git a/assets/js/components/RadioGrid.vue b/assets/js/components/RadioGrid.vue
index a1a7495..ec0a927 100644
--- a/assets/js/components/RadioGrid.vue
+++ b/assets/js/components/RadioGrid.vue
@@ -1,12 +1,19 @@
 <template>
     <div class="flex space-x-4 flex-wrap justify-center">
         <label v-for="(item, index) in options" :key="index" class="w-40" :for="`${id}-${index}`">
-            <input :id="`${id}-${index}`" class="invisible absolute left-0 top-0 peer" :checked="value === item.key"
-                :value="item.key" type="radio" :name="id" @click="$emit('update:modelValue', item.key)" />
+            <input
+                :id="`${id}-${index}`"
+                class="invisible absolute left-0 top-0 peer"
+                :checked="value === item.key"
+                :value="item.key"
+                type="radio"
+                :name="id"
+                @click="$emit('update:modelValue', item.key)"
+            />
             <span
-                class="flex cursor-pointer flex-col rounded-lg items-center justify-center border border-b-[10px] border-transparent border-solid peer-checked:border-b-primary peer-checked:border-gray-200 peer-checked:shadow-xl h-40 transition-all duration-200 items-end">
-                <img :src="`/wp-content/plugins/stepper/resources/img/icons/${item.icon}.svg`"
-                    class="w-16 h-16 flex-none" />
+                class="flex cursor-pointer flex-col rounded-lg items-center justify-center border border-b-[10px] border-transparent border-solid peer-checked:border-b-primarycustom peer-checked:border-gray-200 peer-checked:shadow-xl h-40 transition-all duration-200 items-end"
+            >
+                <img :src="`/wp-content/plugins/stepper/resources/img/icons/${item.icon}.svg`" class="w-16 h-16 flex-none" />
                 <span class="mt-4 font-semibold text-gray-700 text-sm" v-text="item.label"></span>
             </span>
         </label>
diff --git a/assets/js/components/VBtn.vue b/assets/js/components/VBtn.vue
index 8b4d6a5..f6aec2a 100644
--- a/assets/js/components/VBtn.vue
+++ b/assets/js/components/VBtn.vue
@@ -1,7 +1,7 @@
 <template>
     <button
         :type="type"
-        class="bg-primary px-6 py-3 leading-none rounded text-lg font-semibold text-white disabled:bg-gray-300"
+        class="bg-primarycustom px-6 py-3 leading-none rounded text-lg font-semibold text-white disabled:bg-gray-300"
         @click.prevent="$emit('click', $event)"
     >
         <slot></slot>
diff --git a/assets/js/components/VCheckbox.vue b/assets/js/components/VCheckbox.vue
index c9de12e..30cdfca 100644
--- a/assets/js/components/VCheckbox.vue
+++ b/assets/js/components/VCheckbox.vue
@@ -1,9 +1,9 @@
 <template>
     <div class="flex items-center space-x-6">
         <label :for="id" class="block relative flex items-center">
-            <input type="checkbox" :name="name" :checked="inner === true" @change="inner = !inner" class="peer absolute invisible" :id="id" />
+            <input :id="id" type="checkbox" :name="name" :checked="inner === true" class="peer absolute invisible" @change="inner = !inner" />
             <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block"></span>
-            <span class="peer-checked:bg-primary left-[6px] w-3 h-3 absolute rounded-sm block"></span>
+            <span class="peer-checked:bg-primarycustom left-[6px] w-3 h-3 absolute rounded-sm block"></span>
             <span class="pl-8" v-html="label"></span>
         </label>
     </div>
@@ -13,13 +13,13 @@
 export default {
     props: {
         name: {
-            required: true
+            required: true,
         },
         id: {
-            required: true
+            required: true,
         },
         value: {},
-        label: {}
+        label: {},
     },
 
     computed: {
@@ -29,8 +29,8 @@ export default {
             },
             set(v) {
                 this.$emit('input', v === true);
-            }
-        }
-    }
+            },
+        },
+    },
 };
 </script>
diff --git a/templates/overwrite.htm b/templates/overwrite.htm
index ff1299b..a320bc8 100644
--- a/templates/overwrite.htm
+++ b/templates/overwrite.htm
@@ -4,9 +4,12 @@
     --slider-tooltip-bg: #ef4444;
     --slider-handle-ring-color: #ef444430;
 }
-.bg-primary {
+.bg-primarycustom {
     background-color: #ff0000 !important;
 }
+.peer:checked ~ .peer-checked\:border-b-primarycustom {
+    border-bottom-color: #ff0000 !important;
+}
 .text-primary {
     color: #ff0000 !important;
 }