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

Merge branch 'master' into arzafran/ui-tweaks

Browse Source
This commit is contained in:
Franco Arza
2020-10-26 11:27:54 -03:00
parent ce4df2f1c6 ea0e193966
commit bf032356dc
23 changed files with 587 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/ui/Button/Button.module.css
View File

@@ -1,16 +1,13 @@
.root {
@apply text-accents-1 cursor-pointer inline-flex px-10 rounded-sm leading-6
bg-secondary transition ease-in-out duration-150 shadow-sm font-semibold
text-center justify-center uppercase py-4 uppercase text-center focus:outline-none
border border-transparent items-center;
@apply text-accents-1 cursor-pointer inline-flex px-10 rounded-sm leading-6 bg-secondary transition ease-in-out duration-150 shadow-sm font-semibold text-center justify-center uppercase py-4 uppercase text-center border border-transparent items-center;
}
.root:hover {
@apply bg-accents-0 text-base border border-secondary;
@apply bg-accents-0 text-primary border border-secondary;
}
.root:focus {
@apply shadow-outline;
@apply shadow-outline outline-none;
}
.root[data-active] {

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

@@ -1,13 +1,18 @@
.root {
--row-height: calc(100vh - 80px - 56px);
@apply grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-2 gap-0;
@apply grid grid-cols-1 gap-0;
@screen lg {
@apply grid-cols-3 grid-rows-2;
}
& > * {
@apply row-span-1 lg:col-span-1 bg-transparent box-border overflow-hidden;
@apply row-span-1 bg-transparent box-border overflow-hidden;
height: 500px;
max-height: 800px;
@screen lg {
@apply col-span-1;
height: inherit;
}
}
@@ -30,8 +35,12 @@
.layoutA {
& > *:nth-child(6n + 1),
& > *:nth-child(6n + 5) {
@apply row-span-2 lg:col-span-2;
@apply row-span-2;
height: var(--row-height);
@screen lg {
@apply col-span-2;
}
}
&.filled {
@@ -57,8 +66,12 @@
.layoutB {
& > *:nth-child(6n + 2),
& > *:nth-child(6n + 4) {
@apply row-span-2 lg:col-span-2;
@apply row-span-2;
height: var(--row-height);
@screen lg {
@apply col-span-2;
}
}
&.filled {
@@ -83,8 +96,12 @@
.layoutC {
& > *:nth-child(12n + 1),
& > *:nth-child(12n + 8) {
@apply row-span-2 lg:col-span-2;
@apply row-span-2;
height: var(--row-height);
@screen lg {
@apply col-span-2;
}
}
&.filled {
@@ -107,8 +124,12 @@
.layoutD {
& > *:nth-child(12n + 2),
& > *:nth-child(12n + 7) {
@apply row-span-2 lg:col-span-2;
@apply row-span-2;
height: var(--row-height);
@screen lg {
@apply col-span-2;
}
}
&.filled {

8
components/ui/Input/Input.module.css
View File

@@ -1,5 +1,7 @@
.root {
@apply focus:outline-none bg-primary focus:shadow-outline-gray py-2
px-6 w-full appearance-none transition duration-150 ease-in-out
placeholder-accents-5 pr-10 border border-accents-3 text-accents-6;
@apply bg-primary py-2 px-6 w-full appearance-none transition duration-150 ease-in-out pr-10 border border-accents-3 text-accents-6;
}
.root:focus {
@apply outline-none shadow-outline-gray;
}

4
components/ui/Text/Text.module.css
View File

@@ -7,9 +7,9 @@
}
.pageHeading {
@apply pt-1 pb-4 text-2xl leading-7 font-bold text-base tracking-wide;
@apply pt-1 pb-4 text-2xl leading-7 font-bold tracking-wide;
}
.sectionHeading {
@apply pt-1 pb-2 text-base font-semibold leading-7 text-base tracking-wider uppercase border-b border-accents-2 mb-3;
@apply pt-1 pb-2 font-semibold leading-7 tracking-wider uppercase border-b border-accents-2 mb-3;
}

10
components/ui/context.tsx
View File

@@ -51,11 +51,7 @@ type Action =
}
| {
type: 'SET_MODAL_VIEW'
view: 'LOGIN_VIEW'
}
| {
type: 'SET_MODAL_VIEW'
view: 'SIGNUP_VIEW'
view: MODAL_VIEWS
}
type MODAL_VIEWS = 'SIGNUP_VIEW' | 'LOGIN_VIEW' | 'FORGOT_VIEW'
@@ -161,10 +157,6 @@ export const UIProvider: FC = (props) => {
closeToast,
}
setTimeout(() => {
openToast()
}, 200)
return <UIContext.Provider value={value} {...props} />
}