forked from crowetic/commerce
84 lines
1.8 KiB
CSS
84 lines
1.8 KiB
CSS
.root {
|
|
@apply relative w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear cursor-pointer;
|
|
|
|
&:hover {
|
|
& .squareBg {
|
|
@apply scale-75;
|
|
}
|
|
|
|
& .productTitle,
|
|
& .productPrice,
|
|
& .wishlistButton {
|
|
@apply bg-black text-white;
|
|
}
|
|
|
|
&:nth-child(6n + 1) .productTitle,
|
|
&:nth-child(6n + 1) .productPrice,
|
|
&:nth-child(6n + 1) .wishlistButton {
|
|
@apply bg-violet text-white;
|
|
}
|
|
|
|
&:nth-child(6n + 5) .productTitle,
|
|
&:nth-child(6n + 5) .productPrice,
|
|
&:nth-child(6n + 5) .wishlistButton {
|
|
@apply bg-blue text-white;
|
|
}
|
|
|
|
&:nth-child(6n + 3) .productTitle,
|
|
&:nth-child(6n + 3) .productPrice,
|
|
&:nth-child(6n + 3) .wishlistButton {
|
|
@apply bg-pink text-white;
|
|
}
|
|
|
|
&:nth-child(6n + 6) .productTitle,
|
|
&:nth-child(6n + 6) .productPrice,
|
|
&:nth-child(6n + 6) .wishlistButton {
|
|
@apply bg-cyan text-white;
|
|
}
|
|
}
|
|
|
|
&:nth-child(6n + 1) .squareBg {
|
|
@apply bg-violet;
|
|
}
|
|
|
|
&:nth-child(6n + 5) .squareBg {
|
|
@apply bg-blue;
|
|
}
|
|
|
|
&:nth-child(6n + 3) .squareBg {
|
|
@apply bg-pink;
|
|
}
|
|
|
|
&:nth-child(6n + 6) .squareBg {
|
|
@apply bg-cyan;
|
|
}
|
|
}
|
|
|
|
.squareBg,
|
|
.productTitle,
|
|
.productPrice,
|
|
.wishlistButton {
|
|
@apply transition ease-in-out duration-300;
|
|
}
|
|
|
|
.squareBg {
|
|
@apply transform absolute inset-0 z-0 bg-black;
|
|
}
|
|
|
|
.productTitle {
|
|
@apply p-3 h-14 bg-white text-black font-bold text-xl truncate leading-8 inline-flex;
|
|
max-width: calc(100% - 50px);
|
|
|
|
@screen lg {
|
|
@apply text-2xl;
|
|
}
|
|
}
|
|
|
|
.productPrice {
|
|
@apply px-3 py-1 pb-2 bg-white text-black font-semibold inline-block text-sm leading-6;
|
|
}
|
|
|
|
.wishlistButton {
|
|
@apply w-10 h-10 flex items-center justify-center bg-white text-black font-semibold inline-block text-sm leading-6 cursor-pointer;
|
|
}
|