crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-03-15 06:52:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

add textured bg

Browse Source
This commit is contained in:
Franco Arza 2020-10-22 11:20:29 -03:00
parent 986cf74517
commit 8d1901241e
2 changed files with 25 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,27 @@
&:hover {
& .squareBg {
@apply scale-75;
background-color: var(--violet);
background: radial-gradient(
circle,
transparent 20%,
var(--violet) 20%,
var(--violet) 80%,
transparent 80%,
transparent
),
radial-gradient(
circle,
transparent 20%,
var(--violet) 20%,
var(--violet) 80%,
transparent 80%,
transparent
)
50px 50px,
linear-gradient(red 4px, transparent 4px) 0 -2px,
linear-gradient(90deg, red 4px, var(--violet) 4px) -2px 0;
background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px;
}
& .productTitle > span,
@ -36,7 +56,7 @@
@apply bg-cyan text-white;
}
& .squareBg {
/* & .squareBg {
@apply bg-white;
}
@ -54,7 +74,7 @@
&:nth-child(6n + 6) .squareBg {
@apply bg-white;
}
} */
}
&:nth-child(6n + 1) .squareBg {
@ -122,5 +142,5 @@
}
.wishlistButton {
@apply w-10 h-10 flex items-center justify-center bg-primary text-base font-semibold inline-block text-xs leading-6 cursor-pointer;
@apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-base font-semibold inline-block text-xs leading-6 cursor-pointer;
}

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

@ -36,7 +36,7 @@ const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
>
<div className="absolute z-10 inset-0 flex items-center justify-center">
<img
className="w-full object-cover transform scale-75 hover:scale-90 transition-transform duration-500"
className="w-full object-cover transform hover:scale-95 transition-transform duration-500"
src={p.images.edges?.[0]?.node.urlXL}
/>
</div>