igloo-d2c-components 1.0.45 → 1.0.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +40 -3
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +40 -3
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -1
package/dist/esm/index.js
CHANGED
|
@@ -2523,7 +2523,20 @@ const ProductCard$1 = styled$1(Box)(() => ({
|
|
|
2523
2523
|
justifyContent: 'flex-end',
|
|
2524
2524
|
cursor: 'pointer',
|
|
2525
2525
|
overflow: 'clip',
|
|
2526
|
-
transition: 'border 0.
|
|
2526
|
+
transition: 'border 0.25s ease, box-shadow 0.25s ease',
|
|
2527
|
+
'&::before': {
|
|
2528
|
+
content: '""',
|
|
2529
|
+
position: 'absolute',
|
|
2530
|
+
inset: 0,
|
|
2531
|
+
background: 'linear-gradient(90deg, #3D93DE 0%, #A4CE4E 50%, #3D93DE 100%)',
|
|
2532
|
+
backgroundSize: '200% 100%',
|
|
2533
|
+
backgroundPosition: '0% 50%',
|
|
2534
|
+
opacity: 0,
|
|
2535
|
+
transform: 'translateX(-100%)',
|
|
2536
|
+
transition: 'opacity 0.35s ease, transform 0.45s ease',
|
|
2537
|
+
zIndex: 0,
|
|
2538
|
+
pointerEvents: 'none',
|
|
2539
|
+
},
|
|
2527
2540
|
'&:hover': {
|
|
2528
2541
|
borderWidth: '2px',
|
|
2529
2542
|
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
|
@@ -2535,6 +2548,30 @@ const ProductCard$1 = styled$1(Box)(() => ({
|
|
|
2535
2548
|
'@media (min-width: 900px)': {
|
|
2536
2549
|
width: '158px',
|
|
2537
2550
|
height: '158px',
|
|
2551
|
+
'&:hover': {
|
|
2552
|
+
border: 'none',
|
|
2553
|
+
boxShadow: 'none',
|
|
2554
|
+
'&::before': {
|
|
2555
|
+
opacity: 1,
|
|
2556
|
+
transform: 'translateX(0)',
|
|
2557
|
+
},
|
|
2558
|
+
'& .product-card-image-layer, & .product-card-placeholder-layer': {
|
|
2559
|
+
opacity: 0,
|
|
2560
|
+
},
|
|
2561
|
+
'& .product-card-bottom-bar': {
|
|
2562
|
+
position: 'absolute',
|
|
2563
|
+
inset: 0,
|
|
2564
|
+
height: '100%',
|
|
2565
|
+
background: 'transparent',
|
|
2566
|
+
zIndex: 1,
|
|
2567
|
+
},
|
|
2568
|
+
'& .product-card-icon img': {
|
|
2569
|
+
filter: 'brightness(0) invert(1)',
|
|
2570
|
+
},
|
|
2571
|
+
'& .product-card-name': {
|
|
2572
|
+
color: '#ffffff',
|
|
2573
|
+
},
|
|
2574
|
+
},
|
|
2538
2575
|
},
|
|
2539
2576
|
}));
|
|
2540
2577
|
/** Background image that fills the product card */
|
|
@@ -2630,7 +2667,7 @@ function ProductSelectionDrawer({ open, onClose, products, onProductSelect, titl
|
|
|
2630
2667
|
e.preventDefault();
|
|
2631
2668
|
onProductSelect(product.id);
|
|
2632
2669
|
}
|
|
2633
|
-
} }, { children: [product.cardImage ? (jsx(ProductCardImage, { src: product.cardImage, alt: product.name })) : (jsx(ProductCardPlaceholder, {})), jsxs(ProductCardBottomBar, { children: [jsx(ProductIcon, { children: jsx("img", { src: (_b = product.icon) !== null && _b !== void 0 ? _b : product.logo, alt: "" }) }), jsx(ProductName$1, { children: product.name })] })] }))] }, product.id));
|
|
2670
|
+
} }, { children: [product.cardImage ? (jsx(ProductCardImage, { src: product.cardImage, alt: product.name, className: "product-card-image-layer" })) : (jsx(ProductCardPlaceholder, { className: "product-card-placeholder-layer" })), jsxs(ProductCardBottomBar, Object.assign({ className: "product-card-bottom-bar" }, { children: [jsx(ProductIcon, Object.assign({ className: "product-card-icon" }, { children: jsx("img", { src: (_b = product.icon) !== null && _b !== void 0 ? _b : product.logo, alt: "" }) })), jsx(ProductName$1, Object.assign({ className: "product-card-name" }, { children: product.name }))] }))] }))] }, product.id));
|
|
2634
2671
|
}) })) })] })));
|
|
2635
2672
|
}
|
|
2636
2673
|
// Mobile Drawer variant (default)
|
|
@@ -2641,7 +2678,7 @@ function ProductSelectionDrawer({ open, onClose, products, onProductSelect, titl
|
|
|
2641
2678
|
e.preventDefault();
|
|
2642
2679
|
onProductSelect(product.id);
|
|
2643
2680
|
}
|
|
2644
|
-
} }, { children: [product.cardImage ? (jsx(ProductCardImage, { src: product.cardImage, alt: product.name })) : (jsx(ProductCardPlaceholder, {})), jsxs(ProductCardBottomBar, { children: [jsx(ProductIcon, { children: jsx("img", { src: (_b = product.icon) !== null && _b !== void 0 ? _b : product.logo, alt: "" }) }), jsx(ProductName$1, { children: product.name })] })] }))] }, product.id));
|
|
2681
|
+
} }, { children: [product.cardImage ? (jsx(ProductCardImage, { src: product.cardImage, alt: product.name, className: "product-card-image-layer" })) : (jsx(ProductCardPlaceholder, { className: "product-card-placeholder-layer" })), jsxs(ProductCardBottomBar, Object.assign({ className: "product-card-bottom-bar" }, { children: [jsx(ProductIcon, Object.assign({ className: "product-card-icon" }, { children: jsx("img", { src: (_b = product.icon) !== null && _b !== void 0 ? _b : product.logo, alt: "" }) })), jsx(ProductName$1, Object.assign({ className: "product-card-name" }, { children: product.name }))] }))] }))] }, product.id));
|
|
2645
2682
|
}) })) })] }) })));
|
|
2646
2683
|
}
|
|
2647
2684
|
|