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/cjs/index.js
CHANGED
|
@@ -2543,7 +2543,20 @@ const ProductCard$1 = material.styled(material.Box)(() => ({
|
|
|
2543
2543
|
justifyContent: 'flex-end',
|
|
2544
2544
|
cursor: 'pointer',
|
|
2545
2545
|
overflow: 'clip',
|
|
2546
|
-
transition: 'border 0.
|
|
2546
|
+
transition: 'border 0.25s ease, box-shadow 0.25s ease',
|
|
2547
|
+
'&::before': {
|
|
2548
|
+
content: '""',
|
|
2549
|
+
position: 'absolute',
|
|
2550
|
+
inset: 0,
|
|
2551
|
+
background: 'linear-gradient(90deg, #3D93DE 0%, #A4CE4E 50%, #3D93DE 100%)',
|
|
2552
|
+
backgroundSize: '200% 100%',
|
|
2553
|
+
backgroundPosition: '0% 50%',
|
|
2554
|
+
opacity: 0,
|
|
2555
|
+
transform: 'translateX(-100%)',
|
|
2556
|
+
transition: 'opacity 0.35s ease, transform 0.45s ease',
|
|
2557
|
+
zIndex: 0,
|
|
2558
|
+
pointerEvents: 'none',
|
|
2559
|
+
},
|
|
2547
2560
|
'&:hover': {
|
|
2548
2561
|
borderWidth: '2px',
|
|
2549
2562
|
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
|
@@ -2555,6 +2568,30 @@ const ProductCard$1 = material.styled(material.Box)(() => ({
|
|
|
2555
2568
|
'@media (min-width: 900px)': {
|
|
2556
2569
|
width: '158px',
|
|
2557
2570
|
height: '158px',
|
|
2571
|
+
'&:hover': {
|
|
2572
|
+
border: 'none',
|
|
2573
|
+
boxShadow: 'none',
|
|
2574
|
+
'&::before': {
|
|
2575
|
+
opacity: 1,
|
|
2576
|
+
transform: 'translateX(0)',
|
|
2577
|
+
},
|
|
2578
|
+
'& .product-card-image-layer, & .product-card-placeholder-layer': {
|
|
2579
|
+
opacity: 0,
|
|
2580
|
+
},
|
|
2581
|
+
'& .product-card-bottom-bar': {
|
|
2582
|
+
position: 'absolute',
|
|
2583
|
+
inset: 0,
|
|
2584
|
+
height: '100%',
|
|
2585
|
+
background: 'transparent',
|
|
2586
|
+
zIndex: 1,
|
|
2587
|
+
},
|
|
2588
|
+
'& .product-card-icon img': {
|
|
2589
|
+
filter: 'brightness(0) invert(1)',
|
|
2590
|
+
},
|
|
2591
|
+
'& .product-card-name': {
|
|
2592
|
+
color: '#ffffff',
|
|
2593
|
+
},
|
|
2594
|
+
},
|
|
2558
2595
|
},
|
|
2559
2596
|
}));
|
|
2560
2597
|
/** Background image that fills the product card */
|
|
@@ -2650,7 +2687,7 @@ function ProductSelectionDrawer({ open, onClose, products, onProductSelect, titl
|
|
|
2650
2687
|
e.preventDefault();
|
|
2651
2688
|
onProductSelect(product.id);
|
|
2652
2689
|
}
|
|
2653
|
-
} }, { children: [product.cardImage ? (jsxRuntime.jsx(ProductCardImage, { src: product.cardImage, alt: product.name })) : (jsxRuntime.jsx(ProductCardPlaceholder, {})), jsxRuntime.jsxs(ProductCardBottomBar, { children: [jsxRuntime.jsx(ProductIcon, { children: jsxRuntime.jsx("img", { src: (_b = product.icon) !== null && _b !== void 0 ? _b : product.logo, alt: "" }) }), jsxRuntime.jsx(ProductName$1, { children: product.name })] })] }))] }, product.id));
|
|
2690
|
+
} }, { children: [product.cardImage ? (jsxRuntime.jsx(ProductCardImage, { src: product.cardImage, alt: product.name, className: "product-card-image-layer" })) : (jsxRuntime.jsx(ProductCardPlaceholder, { className: "product-card-placeholder-layer" })), jsxRuntime.jsxs(ProductCardBottomBar, Object.assign({ className: "product-card-bottom-bar" }, { children: [jsxRuntime.jsx(ProductIcon, Object.assign({ className: "product-card-icon" }, { children: jsxRuntime.jsx("img", { src: (_b = product.icon) !== null && _b !== void 0 ? _b : product.logo, alt: "" }) })), jsxRuntime.jsx(ProductName$1, Object.assign({ className: "product-card-name" }, { children: product.name }))] }))] }))] }, product.id));
|
|
2654
2691
|
}) })) })] })));
|
|
2655
2692
|
}
|
|
2656
2693
|
// Mobile Drawer variant (default)
|
|
@@ -2661,7 +2698,7 @@ function ProductSelectionDrawer({ open, onClose, products, onProductSelect, titl
|
|
|
2661
2698
|
e.preventDefault();
|
|
2662
2699
|
onProductSelect(product.id);
|
|
2663
2700
|
}
|
|
2664
|
-
} }, { children: [product.cardImage ? (jsxRuntime.jsx(ProductCardImage, { src: product.cardImage, alt: product.name })) : (jsxRuntime.jsx(ProductCardPlaceholder, {})), jsxRuntime.jsxs(ProductCardBottomBar, { children: [jsxRuntime.jsx(ProductIcon, { children: jsxRuntime.jsx("img", { src: (_b = product.icon) !== null && _b !== void 0 ? _b : product.logo, alt: "" }) }), jsxRuntime.jsx(ProductName$1, { children: product.name })] })] }))] }, product.id));
|
|
2701
|
+
} }, { children: [product.cardImage ? (jsxRuntime.jsx(ProductCardImage, { src: product.cardImage, alt: product.name, className: "product-card-image-layer" })) : (jsxRuntime.jsx(ProductCardPlaceholder, { className: "product-card-placeholder-layer" })), jsxRuntime.jsxs(ProductCardBottomBar, Object.assign({ className: "product-card-bottom-bar" }, { children: [jsxRuntime.jsx(ProductIcon, Object.assign({ className: "product-card-icon" }, { children: jsxRuntime.jsx("img", { src: (_b = product.icon) !== null && _b !== void 0 ? _b : product.logo, alt: "" }) })), jsxRuntime.jsx(ProductName$1, Object.assign({ className: "product-card-name" }, { children: product.name }))] }))] }))] }, product.id));
|
|
2665
2702
|
}) })) })] }) })));
|
|
2666
2703
|
}
|
|
2667
2704
|
|