mirror of
https://github.com/vercel/commerce.git
synced 2025-03-31 09:15:53 +00:00
102 lines
2.1 KiB
CSS
102 lines
2.1 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-secondary text-secondary;
|
|
}
|
|
|
|
&: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-secondary;
|
|
}
|
|
|
|
.productTitle {
|
|
/* @apply p-3 h-14 bg-primary text-base font-bold text-xl truncate leading-8 inline-flex; */
|
|
/* max-width: calc(100% - 50px); */
|
|
line-height: 1.3;
|
|
padding: 2px 0;
|
|
border-left: 20px solid #c0c;
|
|
width: 400px;
|
|
margin: 20px auto;
|
|
|
|
& h2 {
|
|
background-color: #c0c;
|
|
padding: 4px 0;
|
|
color: #fff;
|
|
display: inline;
|
|
margin: 0;
|
|
|
|
& .strong {
|
|
position: relative;
|
|
left: -10px;
|
|
}
|
|
}
|
|
|
|
@screen lg {
|
|
@apply text-2xl;
|
|
}
|
|
}
|
|
|
|
.productPrice {
|
|
@apply px-3 py-1 pb-2 bg-primary text-base font-semibold inline-block text-sm leading-6;
|
|
}
|
|
|
|
.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;
|
|
}
|