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

Styling updates

Browse Source
This commit is contained in:
Bel Curcio
2021-06-05 13:57:51 -03:00
parent aca215cbbb
commit 97984c3691
16 changed files with 1032 additions and 957 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -96,3 +96,7 @@
.productImage {
@apply transform transition-transform duration-500 object-cover scale-120;
}
.slim {
@apply bg-transparent relative overflow-hidden box-border;
}

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

@@ -34,24 +34,22 @@ const ProductCard: FC<Props> = ({
>
{variant === 'slim' && (
<>
<div className="relative overflow-hidden box-border ">
<div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
<span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
{product.name}
</span>
</div>
{product?.images && (
<Image
quality="85"
src={product.images[0].url || placeholderImg}
alt={product.name || 'Product Image'}
height={320}
width={320}
layout="fixed"
{...imgProps}
/>
)}
<div className="absolute inset-0 flex items-center justify-end mr-8 z-20">
<span className="bg-accent-0 text-accent-9 inline-block p-3 font-bold text-xl break-words">
{product.name}
</span>
</div>
{product?.images && (
<Image
quality="85"
src={product.images[0].url || placeholderImg}
alt={product.name || 'Product Image'}
height={320}
width={320}
layout="fixed"
{...imgProps}
/>
)}
</>
)}