mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 20:26:49 +00:00
🎨 styles: account page layout
:%s
This commit is contained in:
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@@ -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} />
|
||||||
|
@@ -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 {
|
||||||
|
Reference in New Issue
Block a user