shx-3d-render

snippets/shx-3d-render-input.liquid

@@ -46,6 +46,32 @@
         background-color: #514642;
     }
 
+    .shx-ifc-colorselect {
+        display: flex;
+        flex-wrap: wrap;
+
+
+    }
+
+    .shx-ifc-colorselect label {
+        cursor: pointer;
+
+        width: 30px;
+        height: 30px;
+        margin: 5px;
+        border-radius: 2px;
+    }
+
+    .shx-ifc-colorselect label::after {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 100%;
+        border-radius: 2px;
+
+        border: 2px solid #f00;
+    }
+
     .shx-ifc-colorselect input[type="radio"] {
         height: 1px;
         width: 1px;
@@ -54,11 +80,6 @@
         overflow: hidden;
     }
 
-    .shx-ifc-colorselect label {
-        cursor: pointer;
-    }
-
-
 </style>
 
 <script type="text/javascript"> 
@@ -114,18 +135,17 @@
     function  SHX_IFC_genColorSelect(inputID, labelText, inputName, inputVal, options, section_id) {
         let html = `
             <label class="form__label custom shx-ifc-form_label" for="${inputID}-label">${labelText}</label>
-            <div class="field custom">
                 <section id="${inputID}" form="product-form-${section_id}" name="properties[${inputName}]" class="shx-ifc-colorselect">
         `;
 
         for(let i = 0; i < options.length; i++) {
             html += `
                 <input type="radio" id="${inputID}-${i}" name="${inputName}" value="${options[i]}" ${inputVal === options[i] ? 'checked' : ''}>
-                <label for="${inputID}-${i}" style="background-color: ${options[i]}; width: 40px; height: 40px; display: inline-block; margin-right: 10px; border-radius: 5px; ${inputVal === options[i] ? 'border: 2px solid #000' : ''}"></label>
+                <label for="${inputID}-${i}" style="background-color: ${options[i]};"></label>
             `;
         }
 
-        html += `</section></div>`;
+        html += `</section>`;
 
         return html;
     }