crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-06 21:11:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Cleanup ProductCard css

Browse Source
This commit is contained in:
Jonatan Schultz 2021-08-27 16:21:41 +02:00
parent be53fcef16
commit f7dece14c8
1 changed files with 0 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,65 +4,6 @@
height: 100% !important; height: 100% !important;
} }
.root:hover {
& .header .name span,
& .header .price,
& .wishlistButton {
@apply bg-secondary text-secondary;
}
&:nth-child(6n + 1) .header .name span,
&:nth-child(6n + 1) .header .price,
&:nth-child(6n + 1) .wishlistButton {
@apply bg-violet text-white;
}
&:nth-child(6n + 5) .header .name span,
&:nth-child(6n + 5) .header .price,
&:nth-child(6n + 5) .wishlistButton {
@apply bg-blue text-white;
}
&:nth-child(6n + 3) .header .name span,
&:nth-child(6n + 3) .header .price,
&:nth-child(6n + 3) .wishlistButton {
@apply bg-pink text-white;
}
&:nth-child(6n + 6) .header .name span,
&:nth-child(6n + 6) .header .price,
&:nth-child(6n + 6) .wishlistButton {
@apply bg-cyan text-white;
}
}
.header {
@apply transition-colors ease-in-out duration-500
absolute top-0 left-0 z-20 pr-16;
}
.header .name {
@apply pt-0 max-w-full w-full leading-extra-loose
transition-colors ease-in-out duration-500;
font-size: 2rem;
letter-spacing: 0.4px;
}
.header .name span {
@apply py-4 px-6 bg-primary text-primary font-bold
transition-colors ease-in-out duration-500;
font-size: inherit;
letter-spacing: inherit;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.header .price {
@apply pt-2 px-6 pb-4 text-sm bg-primary text-accent-9
font-semibold inline-block tracking-wide
transition-colors ease-in-out duration-500;
}
.imageContainer { .imageContainer {
@apply relative flex items-center justify-center bg-primary-2 mb-4; @apply relative flex items-center justify-center bg-primary-2 mb-4;
padding: 12% 15%; padding: 12% 15%;
@ -72,39 +13,7 @@
padding-bottom: 100%; padding-bottom: 100%;
} }
.root .wishlistButton {
@apply top-0 right-0 z-30 absolute;
}
.typeIcon { .typeIcon {
@apply absolute bg-accent-2 rounded-full p-1.5 -bottom-2 right-2.5; @apply absolute bg-accent-2 rounded-full p-1.5 -bottom-2 right-2.5;
font-size: 0; font-size: 0;
} }
/* Variant Simple */
.simple .header .name {
@apply pt-2 text-lg leading-10 -mt-1;
}
.simple .header .price {
@apply text-sm;
}
/* Variant Slim */
.slim {
@apply bg-transparent relative overflow-hidden
box-border;
}
.slim .header {
@apply absolute inset-0 flex items-center justify-end mr-8 z-20;
}
.slim span {
@apply bg-accent-9 text-accent-0 inline-block p-3
font-bold text-xl break-words;
}
.root:global(.secondary) .header span {
@apply bg-accent-0 text-accent-9;
}