diff --git a/src/components/EditListingWizard/EditListingWizard.css b/src/components/EditListingWizard/EditListingWizard.css index 059d4a3b..9e1f9205 100644 --- a/src/components/EditListingWizard/EditListingWizard.css +++ b/src/components/EditListingWizard/EditListingWizard.css @@ -1,10 +1,23 @@ +@import '../../marketplace.css'; + .root { + /* Layout */ width: 100%; height: 100%; } .nav { - margin: 1rem; + /* Layout */ + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 11px 24px 0 24px; + + border-top-width: 1px; + border-top-color: var(--matterColorNegative); + border-top-style: solid; + background-color: var(--matterColorLight); + box-shadow: var(--boxShadow); } .panel { diff --git a/src/components/TabNav/TabNav.css b/src/components/TabNav/TabNav.css index 0b5095c4..171387ac 100644 --- a/src/components/TabNav/TabNav.css +++ b/src/components/TabNav/TabNav.css @@ -1,6 +1,8 @@ @import '../../marketplace.css'; .root { + overflow-x: auto; + &::after { content: "."; visibility: hidden; diff --git a/src/containers/EditListingPage/EditListingPage.css b/src/containers/EditListingPage/EditListingPage.css index 02ed913b..817e2b01 100644 --- a/src/containers/EditListingPage/EditListingPage.css +++ b/src/containers/EditListingPage/EditListingPage.css @@ -1,3 +1,27 @@ +@import '../../marketplace.css'; + +.mobileTopbar { + /* Size */ + width: 100%; + height: var(--topbarHeight); + + /* Layout for child components */ + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + /* fill */ + background-color: var(--matterColorLight); + + /* shadows */ + box-shadow: none; + + @media (--desktopViewport) { + display: none; + } +} + .wizard { flex-grow: 1; } diff --git a/src/containers/EditListingPage/EditListingPage.js b/src/containers/EditListingPage/EditListingPage.js index 2a6b7b81..c72bfd93 100644 --- a/src/containers/EditListingPage/EditListingPage.js +++ b/src/containers/EditListingPage/EditListingPage.js @@ -91,7 +91,7 @@ export const EditListingPageComponent = props => { return ( - +