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

🎨 styles: complete header hight light

Browse Source 
:%s
This commit is contained in:
lytrankieio123 2021-08-25 11:25:39 +07:00
parent 53616185f2
commit 4d3ba63eaf
2 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss
View File

@ -1,8 +1,19 @@
@import "../../../../../styles/utilities";
.headerHighLight {
@apply flex justify-between items-center spacing-horizontal bg-primary;
@apply flex justify-between items-center spacing-horizontal bg-primary caption;
padding-top: 0.8rem;
padding-bottom: 0.8rem;
color: var(--white);
.menu {
@apply flex items-center list-none;
li {
&:not(:last-child) {
margin-right: 3.2rem;
}
a {
@appy no-underline;
}
}
}
}

4
src/components/common/Header/components/HeaderHighLight/HeaderHighLight.tsx
View File

@ -29,7 +29,7 @@ const HeaderHighLight = memo(({ }: Props) => {
<div>
Free Shipping on order $49+ / Express $99+
</div>
<div className="menu">
<ul className={s.menu}>
{
MENU.map(item => <li key={item.name}>
<Link href={item.link}>
@ -40,7 +40,7 @@ const HeaderHighLight = memo(({ }: Props) => {
</li>)
}
</div>
</ul>
</section>
)
})