forked from crowetic/commerce
Responsive
This commit is contained in:
parent
3d3b0f34a9
commit
808ad87413
@ -1,5 +1,5 @@
|
||||
.root {
|
||||
@apply px-4 flex items-center;
|
||||
@apply px-4 items-center hidden md:flex;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
@ -1,3 +1,20 @@
|
||||
.root {
|
||||
@apply relative w-full h-full p-6 box-border overflow-hidden;
|
||||
}
|
||||
|
||||
.productTitle {
|
||||
@apply p-3 h-14 bg-white text-black font-bold text-lg truncate leading-8 inline-flex;
|
||||
max-width: calc(100% - 50px);
|
||||
|
||||
@screen lg {
|
||||
@apply text-xl;
|
||||
}
|
||||
}
|
||||
|
||||
.productPrice {
|
||||
@apply px-6 py-1 pb-3 bg-white text-black font-semibold inline-block text-sm leading-6;
|
||||
}
|
||||
|
||||
.wishlistButton {
|
||||
@apply w-14 h-14 flex items-center justify-center bg-white text-black font-semibold inline-block text-sm leading-6;
|
||||
}
|
||||
|
@ -20,25 +20,23 @@ const ProductCard: FC<Props> = ({ className, productData }) => {
|
||||
<div className={rootClassName}>
|
||||
{/* Overlay */}
|
||||
<div className="flex flex-row justify-between box-border w-full z-10 relative">
|
||||
<div className="flex flex-col">
|
||||
<div>
|
||||
<h1 className="p-3 h-14 bg-white text-black font-bold text-2xl truncate leading-8">
|
||||
{productData.name}
|
||||
</h1>
|
||||
<div className="flex flex-col flex-1 overflow-hidden">
|
||||
<div className="flex-1">
|
||||
<h1 className={s.productTitle}>{productData.name}</h1>
|
||||
</div>
|
||||
<div>
|
||||
<div className="px-6 py-1 pb-3 bg-white text-black font-semibold inline-block text-sm leading-6">
|
||||
<div className="flex-0">
|
||||
<div className={s.productPrice}>
|
||||
${productData.prices.price.value}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center h-12 w-12 bg-white text-black cursor-pointer">
|
||||
<div className={s.wishlistButton}>
|
||||
<Heart />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute top-0 left-0 w-full h-full z-0">
|
||||
<div className="absolute box-border top-0 left-0 w-full h-full z-0 m-12">
|
||||
{/* <img
|
||||
className="object-cover object-center w-full"
|
||||
src={productData.images.edges[0].node.urlSmall}
|
||||
|
@ -4,16 +4,24 @@
|
||||
|
||||
& > * {
|
||||
@apply row-span-1 lg:col-span-1 h-full bg-black box-border;
|
||||
height: 500px;
|
||||
|
||||
@screen lg {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
& > div:nth-child(6n + 1) {
|
||||
& > div:nth-child(6n + 1),
|
||||
& > div:nth-child(6n + 5) {
|
||||
@apply row-span-2 lg:col-span-2 bg-violet;
|
||||
min-height: var(--row-height);
|
||||
|
||||
@screen lg {
|
||||
min-height: var(--row-height);
|
||||
}
|
||||
}
|
||||
|
||||
& > div:nth-child(6n + 5) {
|
||||
@apply row-span-2 lg:col-span-2 bg-blue;
|
||||
min-height: var(--row-height);
|
||||
@apply bg-blue;
|
||||
}
|
||||
|
||||
& > div:nth-child(6n + 3) {
|
||||
|
Loading…
x
Reference in New Issue
Block a user