mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 20:26:49 +00:00
New Release (#371)
* Custom Checkout Progress * Updates to Checkout * Custom Checkout Progress * Adding tabs * Adding Collapse * Adding Collapse * Improving Sidebar Scroll * Modif footer * Changes * More design updates * sidebar cart * More design updates * More design updates * More design updates * More design updates * Types * Types * Design Updates * More changes * More changes * More changes * Changes * Changes * Changes * New tailwind required changes * Sidebar Styling issues with Mobile * Latest changes - Normalizing cart * Styling Fixes * New changes * Changes * latest * Refactor and Renaming some UI Props * Adding Quantity Component * Adding Rating Component * Rating Component * More updates * User Select disabled, plus hidding horizontal scroll bars * Changes * Adding ProductOptions Component and more helpers * Styling updates * Styling updates * Fix for slim tags * Missmatch with RightArrow * Footer updates and some styles * Latest Updates * Latest Updates * Latest Updates * Removing Portal, since it's not needed. We might add it later I'd rather not to. * Removing Portal, since it's not needed. We might add it later I'd rather not to. * Sam backdrop filter * General UI Improvements * General UI Improvements * Search now with Geist Colors * Now with Geist Colors * Changes * Scroll for Mobile on IOs devises * LoadingDots Working (: * Changes * More Changes * Perf changes * More perf changes * Fade to the Nametags in the ProductCard * changes * Search issue ui * Search issue ui * Make sure to only refresh navbar and modals when required * Index revalidate * Fixed image issue * hide album scroll on windows * Fix scrollbar * Changing * Adding 404 with Layout * Removing Toast * Adding Assets * Adding Assets * Progress with LocalProvider * New productTag * Only images for the drop * changes * Empty SWRhooks * Adding Local Provider * Working local * Working view of a LocalProvider * More updates * Changes * Removed react-ticker * default to local if no env available * default to local if no env available * add missing `@` to css import * rewrite search rewrites to multiple pages * allow requests in getStaticProps to execute in parallel * make type import explicit * add a tsconfig.js file * use local provider in tsconfig.js * avoid a circular dependency * Saleor was not in the providers list * avoid circular dependency in bigcommerce * Adding more to the Local Provider (#366) * Adding more data * Adding more data * optimize assets (#370) * Optimize assets (#372) * optimize assets * remove assets * remove assets * cart enabled * Adding saleor * Changes with Webpack * Changes Co-authored-by: Luis Alvarez <luis@vercel.com> Co-authored-by: Tobias Koppers <tobias.koppers@googlemail.com> Co-authored-by: Shu Ding <g@shud.in>
This commit is contained in:
B
GitHub
@@ -1,136 +1,114 @@
|
||||
.root {
|
||||
@apply relative max-h-full w-full box-border overflow-hidden
|
||||
bg-no-repeat bg-center bg-cover transition-transform
|
||||
ease-linear cursor-pointer;
|
||||
ease-linear cursor-pointer inline-block bg-accent-1;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
& .squareBg:before {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
& .productImage {
|
||||
transform: scale(1.2625);
|
||||
}
|
||||
|
||||
& .productTitle > span,
|
||||
& .productPrice,
|
||||
& .wishlistButton {
|
||||
@apply bg-secondary text-secondary;
|
||||
}
|
||||
|
||||
&:nth-child(6n + 1) .productTitle > span,
|
||||
&:nth-child(6n + 1) .productPrice,
|
||||
&:nth-child(6n + 1) .wishlistButton {
|
||||
@apply bg-violet text-white;
|
||||
}
|
||||
|
||||
&:nth-child(6n + 5) .productTitle > span,
|
||||
&:nth-child(6n + 5) .productPrice,
|
||||
&:nth-child(6n + 5) .wishlistButton {
|
||||
@apply bg-blue text-white;
|
||||
}
|
||||
|
||||
&:nth-child(6n + 3) .productTitle > span,
|
||||
&:nth-child(6n + 3) .productPrice,
|
||||
&:nth-child(6n + 3) .wishlistButton {
|
||||
@apply bg-pink text-white;
|
||||
}
|
||||
|
||||
&:nth-child(6n + 6) .productTitle > span,
|
||||
&:nth-child(6n + 6) .productPrice,
|
||||
&:nth-child(6n + 6) .wishlistButton {
|
||||
@apply bg-cyan text-white;
|
||||
}
|
||||
.root:hover {
|
||||
& .productImage {
|
||||
transform: scale(1.2625);
|
||||
}
|
||||
|
||||
&:nth-child(6n + 1) .squareBg {
|
||||
@apply bg-violet;
|
||||
& .header .name span,
|
||||
& .header .price,
|
||||
& .wishlistButton {
|
||||
@apply bg-secondary text-secondary;
|
||||
}
|
||||
|
||||
&:nth-child(6n + 5) .squareBg {
|
||||
@apply bg-blue;
|
||||
&:nth-child(6n + 1) .header .name span,
|
||||
&:nth-child(6n + 1) .header .price,
|
||||
&:nth-child(6n + 1) .wishlistButton {
|
||||
@apply bg-violet text-white;
|
||||
}
|
||||
|
||||
&:nth-child(6n + 3) .squareBg {
|
||||
@apply bg-pink;
|
||||
&:nth-child(6n + 5) .header .name span,
|
||||
&:nth-child(6n + 5) .header .price,
|
||||
&:nth-child(6n + 5) .wishlistButton {
|
||||
@apply bg-blue text-white;
|
||||
}
|
||||
|
||||
&:nth-child(6n + 6) .squareBg {
|
||||
@apply bg-cyan;
|
||||
&:nth-child(6n + 3) .header .name span,
|
||||
&:nth-child(6n + 3) .header .price,
|
||||
&:nth-child(6n + 3) .wishlistButton {
|
||||
@apply bg-pink text-white;
|
||||
}
|
||||
|
||||
&:nth-child(6n + 6) .header .name span,
|
||||
&:nth-child(6n + 6) .header .price,
|
||||
&:nth-child(6n + 6) .wishlistButton {
|
||||
@apply bg-cyan text-white;
|
||||
}
|
||||
}
|
||||
|
||||
.squareBg,
|
||||
.productTitle > span,
|
||||
.productPrice,
|
||||
.wishlistButton {
|
||||
@apply transition-colors ease-in-out duration-500;
|
||||
.header {
|
||||
@apply transition-colors ease-in-out duration-500
|
||||
absolute top-0 left-0 z-20 pr-16;
|
||||
}
|
||||
|
||||
.squareBg {
|
||||
@apply transition-colors absolute inset-0 z-0;
|
||||
background-color: #212529;
|
||||
}
|
||||
|
||||
.squareBg:before {
|
||||
@apply transition ease-in-out duration-500 bg-repeat-space w-full h-full block;
|
||||
background-image: url('/bg-products.svg');
|
||||
content: '';
|
||||
}
|
||||
|
||||
.simple {
|
||||
& .squareBg {
|
||||
@apply bg-accents-0 !important;
|
||||
background-image: url('/bg-products.svg');
|
||||
}
|
||||
|
||||
& .productTitle {
|
||||
@apply pt-2;
|
||||
font-size: 1rem;
|
||||
|
||||
& span {
|
||||
@apply leading-extra-loose;
|
||||
}
|
||||
}
|
||||
|
||||
& .productPrice {
|
||||
@apply text-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.productTitle {
|
||||
@apply pt-0 max-w-full w-full leading-extra-loose;
|
||||
.header .name {
|
||||
@apply pt-0 max-w-full w-full leading-extra-loose
|
||||
transition-colors ease-in-out duration-500;
|
||||
font-size: 2rem;
|
||||
letter-spacing: 0.4px;
|
||||
|
||||
& span {
|
||||
@apply py-4 px-6 bg-primary text-primary font-bold;
|
||||
font-size: inherit;
|
||||
letter-spacing: inherit;
|
||||
box-decoration-break: clone;
|
||||
-webkit-box-decoration-break: clone;
|
||||
}
|
||||
}
|
||||
|
||||
.productPrice {
|
||||
@apply py-4 px-6 bg-primary text-primary font-semibold inline-block text-sm leading-6;
|
||||
letter-spacing: 0.4px;
|
||||
.header .name span {
|
||||
@apply py-4 px-6 bg-primary text-primary font-bold
|
||||
transition-colors ease-in-out duration-500;
|
||||
font-size: inherit;
|
||||
letter-spacing: inherit;
|
||||
box-decoration-break: clone;
|
||||
-webkit-box-decoration-break: clone;
|
||||
}
|
||||
|
||||
.wishlistButton {
|
||||
@apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-primary font-semibold text-xs leading-6 cursor-pointer;
|
||||
.header .price {
|
||||
@apply pt-2 px-6 pb-4 text-sm bg-primary text-accent-9
|
||||
font-semibold inline-block tracking-wide
|
||||
transition-colors ease-in-out duration-500;
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
@apply flex items-center justify-center;
|
||||
overflow: hidden;
|
||||
|
||||
& > div {
|
||||
min-width: 100%;
|
||||
}
|
||||
@apply flex items-center justify-center overflow-hidden;
|
||||
}
|
||||
|
||||
.productImage {
|
||||
@apply transform transition-transform duration-500 object-cover scale-120;
|
||||
.imageContainer > div {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.imageContainer .productImage {
|
||||
@apply transform transition-transform duration-500
|
||||
object-cover scale-120;
|
||||
}
|
||||
|
||||
.root .wishlistButton {
|
||||
@apply top-0 right-0 z-30 absolute;
|
||||
}
|
||||
|
||||
/* Variant Simple */
|
||||
.simple .header .name {
|
||||
@apply pt-2 text-lg leading-10 -mt-1;
|
||||
}
|
||||
|
||||
.simple .header .price {
|
||||
@apply text-sm;
|
||||
}
|
||||
|
||||
/* Variant Slim */
|
||||
.slim {
|
||||
@apply bg-transparent relative overflow-hidden
|
||||
box-border;
|
||||
}
|
||||
|
||||
.slim .header {
|
||||
@apply absolute inset-0 flex items-center justify-end mr-8 z-20;
|
||||
}
|
||||
|
||||
.slim span {
|
||||
@apply bg-accent-9 text-accent-0 inline-block p-3
|
||||
font-bold text-xl break-words;
|
||||
}
|
||||
|
||||
.root:global(.secondary) .header span {
|
||||
@apply bg-accent-0 text-accent-9;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user