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

styles: button common

Browse Source
This commit is contained in:
lytrankieio123 2021-08-20 18:58:23 +07:00
parent b2ac71f8cd
commit eed70795ae
2 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
pages/index.tsx
View File

@ -1,10 +1,13 @@
import { ButtonCommon, Layout } from 'src/components/common' import { ButtonCommon, Layout } from 'src/components/common'
import { ButonType, ButtonSize } from 'src/utils/constanst.utils'
export default function Home() { export default function Home() {
return ( return (
<> <>
<div>This is home page</div> <div>This is home page</div>
<ButtonCommon>Button default</ButtonCommon> <ButtonCommon>Button default</ButtonCommon>
<ButtonCommon type={ButonType.light}>Button light</ButtonCommon>
<ButtonCommon size={ButtonSize.large}>Button default large</ButtonCommon>
<p>Go to <code>pages/index.tsx</code> to get your hand dirty!</p> <p>Go to <code>pages/index.tsx</code> to get your hand dirty!</p>
<p>Go to <code>src/components</code> to make your awesome component!</p> <p>Go to <code>src/components</code> to make your awesome component!</p>
<p>Go to <code>src/styles</code> to find global styles!</p> <p>Go to <code>src/styles</code> to find global styles!</p>

11
src/components/common/ButtonCommon/ButtonCommon.module.scss
View File

@ -1,7 +1,14 @@
@import '../../../styles/utilities'; @import "../../../styles/utilities";
.buttonCommon { .buttonCommon {
@apply custom-border-radius bg-primary hover:bg-hover-primary transition-all duration-200; @apply custom-border-radius bg-primary hover:bg-hover-primary transition-all duration-200 text-white;
padding: 1.6rem 3.6rem; padding: 1.6rem 3.6rem;
&.light {
@apply text-base;
background-color: #fff !important;
border: 1px solid theme("textColor.active") !important;
} }
&.large {
}
}