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

Reordering

Browse Source
This commit is contained in:
Belen Curcio 2020-10-21 11:23:42 -03:00
parent a1ee24e30e
commit c2788c256b
3 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -65,23 +65,30 @@
@apply transform absolute inset-0 z-0 bg-secondary; @apply transform absolute inset-0 z-0 bg-secondary;
} }
.squareBg.gray { .simple {
@apply bg-gray-300 !important; & .squareBg {
@apply bg-gray-300 !important;
}
} }
.productTitle { .productTitle {
line-height: 40px; @apply pt-4 leading-8;
width: 18vw; box-sizing: border-box;
width: 17vw;
margin-top: -1.2rem;
& span { & span {
@apply inline text-2xl leading-6 p-4 bg-primary text-primary font-bold; @apply inline p-4 bg-primary text-primary font-bold;
font-size: inherit;
line-height: inherit;
letter-spacing: 0.4px;
box-decoration-break: clone; box-decoration-break: clone;
-webkit-box-decoration-break: clone; -webkit-box-decoration-break: clone;
} }
} }
.productPrice { .productPrice {
@apply px-3 py-1 pb-2 bg-primary text-base font-semibold inline-block text-sm leading-6; @apply py-4 px-4 bg-primary text-base font-semibold inline-block text-sm leading-6;
} }
.wishlistButton { .wishlistButton {

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

@ -31,19 +31,21 @@ const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
return ( return (
<Link href={`product${p.path}`}> <Link href={`product${p.path}`}>
<a className={cn(s.root, className)}> <a
className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
>
<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" className="w-full object-cover"
src={p.images.edges?.[0]?.node.urlXL} src={p.images.edges?.[0]?.node.urlXL}
/> />
</div> </div>
<div className={cn(s.squareBg, { [s.gray]: variant === 'simple' })} /> <div className={s.squareBg} />
<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=""> <div className="absolute top-0 left-0">
<p className={s.productTitle}> <h3 className={s.productTitle}>
<span>{p.name}</span> <span>{p.name}</span>
</p> </h3>
<span className={s.productPrice}>${p.prices?.price.value}</span> <span className={s.productPrice}>${p.prices?.price.value}</span>
</div> </div>
<div className={s.wishlistButton}> <div className={s.wishlistButton}>

3
components/ui/Grid/Grid.module.css
View File

@ -20,9 +20,10 @@
} }
.layoutNormal { .layoutNormal {
@apply gap-6; @apply gap-3;
& > * { & > * {
font-size: 1.5rem;
min-height: 325px; min-height: 325px;
} }
} }