forked from crowetic/commerce
Reordering
This commit is contained in:
parent
a1ee24e30e
commit
c2788c256b
@ -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 {
|
||||||
|
@ -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}>
|
||||||
|
@ -20,9 +20,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.layoutNormal {
|
.layoutNormal {
|
||||||
@apply gap-6;
|
@apply gap-3;
|
||||||
|
|
||||||
& > * {
|
& > * {
|
||||||
|
font-size: 1.5rem;
|
||||||
min-height: 325px;
|
min-height: 325px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user