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

🎨 styles: header menu

Browse Source 
:%s
This commit is contained in:
lytrankieio123 2021-08-25 12:13:16 +07:00
parent 2d0ac99822
commit d2ce9bbf01
4 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,14 +2,23 @@
.headerMenu {
@apply flex justify-between items-center bg-white;
padding: 2.4rem 3.2rem;
.left {
@apply flex items-center;
.inputSearch {
margin-left: 4.8rem;
@screen md {
min-width: 51.2rem;
max-width: 50%;
}
}
}
.menu {
@apply flex items-center list-none;
li {
@apply flex justify-center items-center w-full;
&:not(:last-child) {
margin-right: 4.8rem;
margin-right: 6.4rem;
}
a {
@appy no-underline;

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

@ -8,7 +8,7 @@ import s from './HeaderMenu.module.scss'
const OPTION_MENU = [
{
link: '/',
link: ROUTE.ACCOUNT,
name: 'Account',
},
{
@ -28,8 +28,10 @@ const HeaderMenu = memo(({ }: Props) => {
<section className={s.headerMenu}>
<div className={s.left}>
<div>Online Grocery</div>
<div className={s.inputSearch}>
<InputSearch />
</div>
</div>
<ul className={s.menu}>
<li>
<Link href={`${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.ORDER}`}>

5
src/components/common/InputCommon/InputCommon.module.scss
View File

@ -16,7 +16,7 @@
}
.inputCommon {
@apply block w-full transition-all duration-200 rounded;
padding: 1.6rem;
padding: 1.2rem 1.6rem;
border: 1px solid var(--border-line);
&:hover,
&:focus,
@ -31,7 +31,8 @@
}
&.custom {
@apply custom-border-radius border-none;
@apply custom-border-radius;
border: 1px solid transparent;
background: var(--gray);
&:hover,
&:focus,

6
src/components/common/MenuDropdown/MenuDropdown.module.scss
View File

@ -3,7 +3,6 @@
.menuDropdown {
@apply relative cursor-pointer;
width: fit-content;
min-width: 4.8rem;
&:hover {
.label {
color: var(--primary);
@ -48,10 +47,9 @@
.menu {
@apply hidden absolute;
// @apply absolute rounded list-none bg-white;
content: "";
right: 0;
top: 0;
top: 2rem;
height: max-content;
min-width: 19.2rem;
&:hover {
@ -60,7 +58,7 @@
.menuIner {
@apply rounded list-none bg-white;
border: 1px solid var(--text-active);
margin-top: 2.4rem;
margin-top: .4rem;
li {
@apply block transition-all duration-200 cursor-pointer text-active;
padding: 0.8rem 1.6rem;