crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 20:26:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #14 from okbel/arzfran/improve-imgs

Browse Source 
Improve Image styles
This commit is contained in:
B
2020-10-26 22:51:09 -03:00
committed by GitHub
parent 8513c4b18b 115f076fda
commit 876ea34b78
4 changed files with 26 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
components/product/ProductCard/ProductCard.module.css
View File

@@ -1,5 +1,6 @@
.root {
@apply relative w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear cursor-pointer;
@apply relative max-h-full w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear cursor-pointer;
height: 100% !important;
&:hover {
& .squareBg:before {
@@ -119,17 +120,19 @@
}
.wishlistButton {
@apply w-10 h-10 flex ml-auto flex items-center justify-center bg-primary text-primary font-semibold text-xs leading-6 cursor-pointer z-10;
@apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-primary font-semibold text-xs leading-6 cursor-pointer;
}
.imageContainer {
@apply absolute z-10 inset-0 flex items-center justify-center;
& > div {
@apply h-full;
& > div {
@apply h-full;
padding-bottom: 0 !important;
height: 100%;
margin: 0 auto;
}
}
}
.product-image {
height: 120% !important;
top: -10% !important;
}

2
components/product/ProductCard/ProductCard.tsx
View File

@@ -70,7 +70,7 @@ const ProductCard: FC<Props> = ({
variant={p.variants.edges?.[0]!}
/>
</div>
<div className={cn(s.imageContainer)}>
<div className={s.imageContainer}>
<EnhancedImage
alt={p.name}
className={cn('w-full object-cover', s['product-image'])}