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

Transitions

Browse Source
This commit is contained in:
Belen Curcio
2020-10-05 14:28:59 -03:00
parent eb5fdebcf5
commit a25da7d6cf
8 changed files with 178 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,7 @@
@apply grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-2 gap-0;
& > * {
@apply row-span-1 lg:col-span-1 bg-black box-border overflow-hidden;
@apply row-span-1 lg:col-span-1 bg-transparent box-border overflow-hidden;
height: 500px;
max-height: 800px;
@@ -13,83 +13,115 @@
}
}
.default {
& > * {
@apply bg-transparent;
}
}
.layoutNormal {
@apply gap-6;
& > * {
min-height: 325px;
@apply bg-white;
}
}
.layoutA {
& > div:nth-child(6n + 1),
& > div:nth-child(6n + 5) {
@apply row-span-2 lg:col-span-2 bg-violet;
& > *:nth-child(6n + 1),
& > *:nth-child(6n + 5) {
@apply row-span-2 lg:col-span-2;
height: var(--row-height);
}
& > div:nth-child(6n + 5) {
@apply bg-blue;
}
&.filled {
& > *:nth-child(6n + 1),
& > *:nth-child(6n + 5) {
@apply bg-violet;
}
& > div:nth-child(6n + 3) {
@apply bg-pink;
}
& > *:nth-child(6n + 5) {
@apply bg-blue;
}
& > div:nth-child(6n + 6) {
@apply bg-cyan;
& > *:nth-child(6n + 3) {
@apply bg-pink;
}
& > *:nth-child(6n + 6) {
@apply bg-cyan;
}
}
}
.layoutB {
& > div:nth-child(6n + 2) {
@apply row-span-2 lg:col-span-2 bg-blue;
& > *:nth-child(6n + 2),
& > *:nth-child(6n + 4) {
@apply row-span-2 lg:col-span-2;
height: var(--row-height);
}
& > div:nth-child(6n + 4) {
@apply row-span-2 lg:col-span-2 bg-violet;
height: var(--row-height);
}
&.filled {
& > *:nth-child(6n + 2) {
@apply bg-blue;
}
& > div:nth-child(6n + 3) {
@apply bg-pink;
}
& > *:nth-child(6n + 4) {
@apply bg-violet;
}
& > div:nth-child(6n + 6) {
@apply bg-cyan;
& > *:nth-child(6n + 3) {
@apply bg-pink;
}
& > *:nth-child(6n + 6) {
@apply bg-cyan;
}
}
}
.layoutC {
& > div:nth-child(12n + 1) {
@apply row-span-2 lg:col-span-2 bg-violet;
& > *:nth-child(12n + 1),
& > *:nth-child(12n + 8) {
@apply row-span-2 lg:col-span-2;
height: var(--row-height);
}
& > div:nth-child(12n + 8) {
@apply row-span-2 lg:col-span-2 bg-cyan;
height: var(--row-height);
}
&.filled {
& > *:nth-child(12n + 1) {
@apply bg-violet;
height: var(--row-height);
}
& > div:nth-child(6n + 3) {
@apply bg-pink;
& > *:nth-child(12n + 8) {
@apply bg-cyan;
height: var(--row-height);
}
& > *:nth-child(6n + 3) {
@apply bg-pink;
}
}
}
.layoutD {
& > div:nth-child(12n + 2) {
@apply row-span-2 lg:col-span-2 bg-violet;
& > *:nth-child(12n + 2),
& > *:nth-child(12n + 7) {
@apply row-span-2 lg:col-span-2;
height: var(--row-height);
}
& > div:nth-child(12n + 7) {
@apply row-span-2 lg:col-span-2 bg-cyan;
height: var(--row-height);
}
&.filled {
& > *:nth-child(12n + 2) {
@apply bg-violet;
}
& > div:nth-child(6n + 3) {
@apply bg-pink;
& > *:nth-child(12n + 7) {
@apply bg-cyan;
}
& > *:nth-child(6n + 3) {
@apply bg-pink;
}
}
}

4
components/ui/Grid/Grid.tsx
View File

@@ -8,6 +8,7 @@ interface Props {
items: [any] | any
layout?: 'A' | 'B' | 'C' | 'D' | 'normal'
wrapper?: ReactNode | Component | any
variant?: 'default' | 'filled'
}
const DefaultWrapper: FC<Props> = ({ children }) => <div>{children}</div> // DEFAULT ITEMS WRAPPER
@@ -17,6 +18,7 @@ const Grid: FC<Props> = ({
className,
layout = 'A',
wrapper: Component = DefaultWrapper,
variant = 'default',
}) => {
const rootClassName = cn(
s.root,
@@ -26,6 +28,8 @@ const Grid: FC<Props> = ({
[s.layoutC]: layout === 'C',
[s.layoutD]: layout === 'D',
[s.layoutNormal]: layout === 'normal',
[s.default]: variant === 'default',
[s.filled]: variant === 'filled',
},
className
)