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

feat: checkboxCommon

Browse Source
This commit is contained in:
quangnhankie
2021-08-25 17:06:48 +07:00
parent bfec1e8a09
commit 188232e5e3
40 changed files with 2849 additions and 1518 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,21 +1,22 @@
@import '../../../styles/utilities';
@import "../../../styles/utilities";
.header {
.btn {
@apply font-bold py-2 px-4 rounded;
// @apply font-bold py-2 px-4 rounded;
}
.btnBlue {
@apply bg-primary hover:bg-warning text-label font-bold py-2 px-4 custom-border-radius;
}
.link {
color: theme("colors.warning");
}
.heading {
@apply text-base;
@apply text-base font-heading;
}
.paragraph {
@apply topline;
}
.logo {
@apply font-logo;
}
}

23
src/components/common/Header/Header.tsx
View File

@@ -10,27 +10,8 @@ const Header: FC<Props> = ({ }: Props) => {
return (
<div className={s.header}>
This is Header
<button className={s.btnBlue}>
Button
</button>
<button className={s.btn}>
Button
</button>
<div className={s.link}>
Test link style
</div>
<h1 className="heading-1">
HEADING 1
</h1>
<p className="spacing-horizontal">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt delectus, atque aliquid repudiandae debitis dolor facere impedit alias nemo dolores voluptatum? Commodi, delectus. Dignissimos aspernatur nobis, distinctio delectus eligendi nisi illo tempore non nostrum, molestias excepturi dolor culpa fugiat rem perspiciatis. Repellendus numquam quisquam possimus natus vero recusandae, ipsam earum ratione quos ex consectetur cum nostrum modi amet odit fugiat fugit. Facere cum enim dignissimos molestias facilis error dicta exercitationem, delectus voluptates fuga laboriosam esse sunt odio, impedit modi veritatis, nisi nam? Voluptatum voluptas similique aspernatur. Soluta, accusamus! Mollitia praesentium adipisci perspiciatis iusto dolorum sint sit placeat, nesciunt id repellendus.
</p>
<p className="spacing-horizontal-left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque doloremque quos excepturi laborum maiores laudantium hic iusto natus? Ipsa deleniti quas odit! Labore esse enim ipsam tempora tenetur beatae maxime officiis est, a illo! Soluta suscipit maxime odit eveniet laudantium, iure atque doloribus quaerat. Obcaecati tempore molestiae aliquid amet maiores suscipit, beatae repellat illum ipsam tenetur. Porro officiis omnis quam, iure quia necessitatibus consectetur culpa itaque, in tempora rem ex ad et iusto, hic commodi fuga quibusdam. Dolores exercitationem natus dolor pariatur voluptates non corporis, minus repellat! Quis distinctio esse, animi suscipit ducimus sequi obcaecati facere, perferendis ea omnis soluta.
</p>
<p className={s.paragraph}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, natus?
</p>
<h1 className={s.heading}>This is heading</h1>
<div className={s.logo}>This is logo text</div>
</div>
)
}