mod overwrites

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">

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>

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>

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>

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;
 }