cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Animation improvements to product cards

Browse Source
This commit is contained in:
paco 2020-10-08 13:41:01 -06:00
parent 7454f920ec
commit fd9ca3f6f9
No known key found for this signature in database
GPG Key ID: CD243AF4E535B475
2 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,11 +1,9 @@
.root { .root {
@apply relative w-full p-6 box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear; @apply relative w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear cursor-pointer;
&:hover { &:hover {
@apply cursor-pointer;
& .squareBg { & .squareBg {
@apply inset-12; @apply scale-75;
} }
& .productTitle, & .productTitle,
@ -35,7 +33,7 @@
&:nth-child(6n + 6) .productTitle, &:nth-child(6n + 6) .productTitle,
&:nth-child(6n + 6) .productPrice, &:nth-child(6n + 6) .productPrice,
&:nth-child(6n + 6) .wishlistButton { &:nth-child(6n + 6) .wishlistButton {
@apply bg-cyan text-black; @apply bg-cyan text-white;
} }
} }
@ -56,12 +54,19 @@
} }
} }
.squareBg,
.productTitle,
.productPrice,
.wishlistButton {
@apply transition ease-in-out duration-300;
}
.squareBg { .squareBg {
@apply cursor-pointer absolute inset-0 z-0 transition-all duration-75 ease-in-out bg-black; @apply transform absolute inset-0 z-0 bg-black;
} }
.productTitle { .productTitle {
@apply p-3 h-14 bg-white text-black font-bold text-lg truncate leading-8 inline-flex transition ease-linear; @apply p-3 h-14 bg-white text-black font-bold text-lg truncate leading-8 inline-flex;
max-width: calc(100% - 50px); max-width: calc(100% - 50px);
@screen lg { @screen lg {
@ -70,9 +75,9 @@
} }
.productPrice { .productPrice {
@apply px-6 py-1 pb-3 bg-white text-black font-semibold inline-block text-sm leading-6 transition ease-linear; @apply px-3 py-1 pb-2 bg-white text-black font-semibold inline-block text-sm leading-6;
} }
.wishlistButton { .wishlistButton {
@apply w-14 h-14 flex items-center justify-center bg-white text-black font-semibold inline-block text-sm leading-6 cursor-pointer transition ease-linear; @apply w-10 h-10 flex items-center justify-center bg-white text-black font-semibold inline-block text-sm leading-6 cursor-pointer;
} }

2
components/product/ProductCard/ProductCard.tsx
View File

@ -48,7 +48,7 @@ const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
<div className="flex flex-row justify-between box-border w-full z-10 relative"> <div className="flex flex-row justify-between box-border w-full z-10 relative">
<div className="flex flex-col flex-1 overflow-hidden"> <div className="flex flex-col flex-1 overflow-hidden">
<div className="flex-1"> <div className="flex-1">
<h1 className={s.productTitle}>{p.name}</h1> <span className={s.productTitle}>{p.name}</span>
</div> </div>
<div className="flex-0"> <div className="flex-0">
<div className={s.productPrice}>${p.prices.price.value}</div> <div className={s.productPrice}>${p.prices.price.value}</div>