🎨 styles: account page layout

:%s
This commit is contained in:
lytrankieio123
2021-09-16 17:59:18 +07:00
parent 533951ac78
commit c5a084fa3d
3 changed files with 18 additions and 9 deletions

View File

@@ -2,15 +2,22 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh; min-height: 100vh;
> main { .wrapperWithBg {
@apply bg-background-gray;
width: 100%;
margin-top: -3.2rem;
}
> main,
.wrapperWithBg > main {
flex: 1; flex: 1;
width: 100%; width: 100%;
max-width: min( 100%, 1536px); max-width: min(100%, 1536px);
margin: auto; margin: auto;
} }
} }
.filter{ .filter {
@screen xl { @screen xl {
display: none; display: none;
} }
} }

View File

@@ -33,10 +33,12 @@ const Layout: FC<Props> = ({ children }) => {
<CommerceProvider locale={locale}> <CommerceProvider locale={locale}>
<div className={s.mainLayout}> <div className={s.mainLayout}>
<Header toggleFilter={toggleFilter} visibleFilter={visibleFilter} /> <Header toggleFilter={toggleFilter} visibleFilter={visibleFilter} />
{ {
router.pathname === ROUTE.ACCOUNT ? router.pathname === ROUTE.ACCOUNT ?
<section>{children}</section> : <section className={s.wrapperWithBg}>
<main>{children}</main> <main>{children}</main>
</section> :
<main>{children}</main>
} }
<div className={s.filter}><MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter} /> </div> <div className={s.filter}><MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter} /> </div>
<ScrollToTop visibilityHeight={1500} /> <ScrollToTop visibilityHeight={1500} />

View File

@@ -1,14 +1,14 @@
@import '../../../../styles/utilities'; @import '../../../../styles/utilities';
.accountPage { .accountPage {
background-color: #F5F4F2; @apply bg-background-gray;
margin-top: -3.2rem;
padding: 3.2rem 2rem; padding: 3.2rem 2rem;
min-height: 70rem; min-height: 70rem;
@screen md { @screen md {
padding-left: 2.8rem; padding-left: 2.8rem;
padding-right: 2.8rem; padding-right: 2.8rem;
padding: 5.4rem 2rem;
} }
@screen lg { @screen lg {