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: responsive header screen md

Browse Source 
:%s
This commit is contained in:
lytrankieio123 2021-08-25 15:06:53 +07:00
parent a37eabea90
commit 10a4e703d6
4 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pages/index.tsx
View File

@ -1,5 +1,5 @@
import { ButtonCommon, ButtonIconBuy, Inputcommon, InputSearch, Layout } from 'src/components/common'; import { Banner, ButtonCommon, ButtonIconBuy, Inputcommon, InputSearch, Layout } from 'src/components/common';
import { IconBuy } from 'src/components/icons'; import { IconBuy } from 'src/components/icons';
@ -11,7 +11,7 @@ export default function Home() {
<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>
{/* <Banner title="test" sub imgLink="https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png"/> */}
{/* demo */} {/* demo */}
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<Inputcommon placeholder="Enter here" /> <Inputcommon placeholder="Enter here" />

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

@ -8,7 +8,9 @@
@apply flex items-center; @apply flex items-center;
.inputSearch { .inputSearch {
margin-left: 4.8rem; margin-left: 4.8rem;
@screen md { //todo: remove
border: 1px solid red;
@screen lg {
min-width: 51.2rem; min-width: 51.2rem;
max-width: 50%; max-width: 50%;
} }
@ -19,8 +21,11 @@
li { li {
@apply flex justify-center items-center w-full; @apply flex justify-center items-center w-full;
&:not(:last-child) { &:not(:last-child) {
margin-right: 4.8rem;
@screen lg {
margin-right: 6.4rem; margin-right: 6.4rem;
} }
}
a { a {
@appy no-underline; @appy no-underline;
} }

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

@ -1,14 +1,23 @@
@import "../../../../../styles/utilities"; @import "../../../../../styles/utilities";
.headerSubMenu { .headerSubMenu {
@apply flex justify-between items-center;
padding-bottom: 0.8rem; padding-bottom: 0.8rem;
@screen lg {
@apply flex justify-between items-center;
}
.menu { .menu {
@apply flex items-center list-none; @apply flex items-center list-none;
margin-bottom: 2.4rem;
@screen lg {
margin-bottom: 0;
}
li { li {
&:not(:last-child) { &:not(:last-child) {
margin-right: 2.4rem;
@screen lg {
margin-right: 4rem; margin-right: 4rem;
} }
}
a { a {
@appy no-underline; @appy no-underline;
} }

1
src/components/common/NotiMessage/NotiMessage.module.scss
View File

@ -2,6 +2,7 @@
.notiMessage { .notiMessage {
@apply caption bg-info-light; @apply caption bg-info-light;
width: fit-content;
color: var(--info-dark); color: var(--info-dark);
padding: 0.4rem 1.6rem; padding: 0.4rem 1.6rem;
border-radius: 3rem; border-radius: 3rem;