crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-03 19:51: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';
@ -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/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 */}
<div style={{ display: 'flex' }}>
<Inputcommon placeholder="Enter here" />

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

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

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

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

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

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