forked from crowetic/commerce
add textured bg
This commit is contained in:
parent
986cf74517
commit
8d1901241e
@ -3,7 +3,27 @@
|
|||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
& .squareBg {
|
& .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,
|
& .productTitle > span,
|
||||||
@ -36,7 +56,7 @@
|
|||||||
@apply bg-cyan text-white;
|
@apply bg-cyan text-white;
|
||||||
}
|
}
|
||||||
|
|
||||||
& .squareBg {
|
/* & .squareBg {
|
||||||
@apply bg-white;
|
@apply bg-white;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -54,7 +74,7 @@
|
|||||||
|
|
||||||
&:nth-child(6n + 6) .squareBg {
|
&:nth-child(6n + 6) .squareBg {
|
||||||
@apply bg-white;
|
@apply bg-white;
|
||||||
}
|
} */
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(6n + 1) .squareBg {
|
&:nth-child(6n + 1) .squareBg {
|
||||||
@ -122,5 +142,5 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.wishlistButton {
|
.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;
|
||||||
}
|
}
|
||||||
|
@ -36,7 +36,7 @@ const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
|
|||||||
>
|
>
|
||||||
<div className="absolute z-10 inset-0 flex items-center justify-center">
|
<div className="absolute z-10 inset-0 flex items-center justify-center">
|
||||||
<img
|
<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}
|
src={p.images.edges?.[0]?.node.urlXL}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user