@o2vend/theme-cli 1.0.36 → 1.0.38

package/test-theme/assets/components.css

@@ -554,8 +554,7 @@
 
 .category-image {
   width: 100%;
-  height: 100%;
-  object-fit: cover;
+  object-fit: contain;
   transition: transform var(--transition-slow);
 }
 
@@ -1063,22 +1062,35 @@
   display: flex;
   align-items: center;
   gap: var(--spacing-element, 0.5rem);
+  width: 100%;
 }
 
 .price-input {
-  flex: 1;
-  padding: var(--spacing-element, 0.5rem) var(--spacing-element, 0.75rem);
+  flex: 1 1 0;
+  min-width: 0;
+  padding: var(--spacing-element, 0.625rem) var(--spacing-element, 0.75rem);
   border: 1px solid var(--color-gray-300, #d1d5db);
   border-radius: var(--border-radius-small, 4px);
   font-size: var(--text-sm, 0.875rem);
   transition: border-color var(--transition-fast, 0.2s);
   background-color: var(--color-white, #ffffff);
   color: var(--color-gray-900, #111827);
+  text-align: center;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: textfield;
+}
+
+.price-input::-webkit-outer-spin-button,
+.price-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
 }
 
 .price-input:focus {
   outline: none;
   border-color: var(--color-primary, #2563eb);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
 }
 
 .price-input::placeholder {
@@ -1087,8 +1099,10 @@
 
 .price-separator {
   color: var(--color-gray-700, #374151);
-  font-weight: var(--font-weight-normal, 400);
-  padding: 0 var(--spacing-element, 0.25rem);
+  font-weight: var(--font-weight-medium, 500);
+  padding: 0 var(--spacing-element, 0.5rem);
+  flex-shrink: 0;
+  line-height: 1;
 }
 
 .price-range-slider {
@@ -1466,6 +1480,11 @@
   .collection-toolbar {
     padding: var(--spacing-element, 0.5rem) 0;
     margin-bottom: var(--spacing-element, 0.5rem);
+    overflow: visible;
+  }
+  
+  .collection-toolbar .container {
+    overflow: visible;
   }
   
   .collection-header-content {
@@ -1484,16 +1503,39 @@
     justify-content: space-between;
     gap: var(--spacing-element, 0.75rem);
     flex-wrap: nowrap;
+    position: relative;
+    overflow: visible;
   }
   
   .filters-section {
     flex: 0 0 auto;
     margin-right: auto;
+    position: relative;
+  }
+  
+  .filter-toggle {
+    white-space: nowrap;
   }
   
   .sort-section {
     flex: 0 0 auto;
     margin-left: 0;
+    position: relative;
+  }
+  
+  .sort-dropdown {
+    position: relative;
+  }
+  
+  .sort-menu {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: calc(100% + var(--space-2, 0.5rem));
+    min-width: 100%;
+    max-width: 100%;
+    width: 100%;
+    z-index: var(--z-dropdown);
   }
   
   .filter-dropdown {
@@ -1506,6 +1548,64 @@
     border-radius: 0;
     margin-top: 0;
     z-index: var(--z-modal);
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .filter-header {
+    padding: var(--space-4, 1rem) var(--space-4, 1rem) var(--space-3, 0.75rem);
+    flex-shrink: 0;
+  }
+  
+  .filter-content {
+    padding: var(--space-4, 1rem);
+    flex: 1 1 auto;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  
+  .filter-group {
+    margin-bottom: var(--space-6, 1.5rem);
+  }
+  
+  .filter-group:last-child {
+    margin-bottom: 0;
+  }
+  
+  .price-inputs {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3, 0.75rem);
+    width: 100%;
+  }
+  
+  .price-input {
+    flex: 1 1 0;
+    min-width: 0;
+    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
+    font-size: var(--text-base, 1rem);
+    text-align: center;
+  }
+  
+  .price-separator {
+    flex-shrink: 0;
+    padding: 0 var(--space-2, 0.5rem);
+    font-weight: var(--font-weight-medium, 500);
+    color: var(--color-gray-600, #4b5563);
+  }
+  
+  .filter-actions {
+    flex-direction: column;
+    gap: var(--space-3, 0.75rem);
+    padding: var(--space-4, 1rem);
+    flex-shrink: 0;
+  }
+  
+  .filter-actions .btn {
+    width: 100%;
+    padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
+    font-size: var(--text-base, 1rem);
+    justify-content: center;
   }
   
   /* Products grid responsive rules handled by main grid above */
@@ -2294,6 +2394,10 @@
   background-color: var(--color-error);
   color: var(--color-white);
 }
+.notification-info {
+  background-color: var(--color-info);
+  color: var(--color-white);
+}
 
 .notification-warning {
   background-color: var(--color-warning);
@@ -2548,12 +2652,13 @@
 }
 
 .product-info .product-title {
-  font-size: var(--text-4xl);
+  font-size: var(--text-lg);
   font-weight: 700;
   color: var(--color-gray-900);
   margin-bottom: var(--space-4);
   line-height: 1.2;
   letter-spacing: -0.025em;
+  text-align: left;
 }
 
 .product-price {
@@ -2980,15 +3085,8 @@
 .collection-card {
   background-color: var(--color-white);
   border-radius: var(--radius-lg);
-  overflow: hidden;
-  transition: all var(--transition);
-  position: relative;
-  group: hover;
-}
-
-.collection-card:hover {
-  transform: translateY(-4px);
-  box-shadow: var(--shadow-lg);
+  overflow: hidden;  
+  position: relative;  
 }
 
 .collection-image-container {
@@ -3001,14 +3099,8 @@
 .collection-image {
   width: 100%;
   height: 100%;
-  object-fit: cover;
-  transition: transform var(--transition-slow);
-}
-
-.collection-card:hover .collection-image {
-  transform: scale(1.05);
+  object-fit: cover;  
 }
-
 .collection-placeholder {
   display: flex;
   align-items: center;
@@ -3159,8 +3251,7 @@
   width: 60px;
   height: 60px;
   border-radius: var(--radius-lg);
-  overflow: hidden;
-  box-shadow: var(--shadow);
+  overflow: hidden;  
 }
 
 .collection-image img {
@@ -3634,7 +3725,12 @@
 
 /* Filter Open State */
 .filter-open {
-  overflow: hidden;
+  overflow: hidden !important;
+  position: fixed;
+  width: 100%;
+  left: 0;
+  right: 0;
+  padding-right: var(--scrollbar-width, 0px);
 }
 
 .filter-open .filter-dropdown {
@@ -4089,6 +4185,59 @@
     font-size: var(--text-3xl);
   }
   
+  .toolbar-content {
+    gap: var(--space-2, 0.5rem);
+  }
+  
+  .filter-toggle,
+  .sort-toggle {
+    font-size: var(--text-xs, 0.75rem);
+    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
+  }
+  
+  .sort-menu {
+    min-width: 100%;
+    max-width: 100%;
+    left: 0;
+    right: 0;
+  }
+  
+  .filter-dropdown {
+    padding: 0;
+  }
+  
+  .filter-header {
+    padding: var(--space-3, 0.75rem) var(--space-3, 0.75rem) var(--space-2, 0.5rem);
+  }
+  
+  .filter-content {
+    padding: var(--space-3, 0.75rem);
+  }
+  
+  .price-inputs {
+    gap: var(--space-2, 0.5rem);
+  }
+  
+  .price-input {
+    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
+    font-size: var(--text-sm, 0.875rem);
+  }
+  
+  .price-separator {
+    padding: 0 var(--space-1, 0.25rem);
+    font-size: var(--text-sm, 0.875rem);
+  }
+  
+  .filter-actions {
+    padding: var(--space-3, 0.75rem);
+    gap: var(--space-2, 0.5rem);
+  }
+  
+  .filter-actions .btn {
+    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
+    font-size: var(--text-sm, 0.875rem);
+  }
+  
   .collection-description {
     font-size: var(--text-base);
   }
@@ -4535,7 +4684,7 @@
     bottom: 0;
     left: 0;
     right: 0;
-    background-color: var(--color-background, {{ settings.color_background }});
+    background-color: var(--color-background, {{ settings.color_background | default: '#ffffff' }});
     border-top: 1px solid var(--color-border, rgba(15, 23, 42, 0.08));
     padding: var(--spacing-element, 0.5rem) 0 calc(var(--spacing-element, 0.5rem) + env(safe-area-inset-bottom));
     z-index: var(--z-fixed, 1030);
@@ -4591,8 +4740,8 @@
     min-width: 18px;
     height: 18px;
     padding: 0 var(--spacing-element, 5px);
-    background: var(--color-text, {{ settings.color_text }});
-    color: var(--color-background, {{ settings.color_background }});
+    background: var(--color-text, {{ settings.color_text | default: '#000000' }});
+    color: var(--color-background, {{ settings.color_background | default: '#ffffff' }});
     border-radius: var(--border-radius-medium, 9px);
     font-size: var(--text-xs, 0.7rem);
     font-weight: var(--font-weight-bold, 600);

package/test-theme/assets/delivery-zone.js

@@ -3,7 +3,7 @@
  * Handles modal interactions, API calls, and zone selection
  */
 
-(function() {
+(() => {
   'use strict';
 
   // DOM elements - will be set in init()