4
0
forked from crowetic/commerce

add textured bg

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

View File

@ -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;
} }

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"> <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>