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

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

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

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

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

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

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