Marketplace: Change the way we space out heading and content area

Previous method caused issues when you go from WooCommerce > Home to
WooCommerce > Marketplace. The header was going missing on the
Marketplace page.
This commit is contained in:
raicem 2023-10-03 13:09:35 +03:00 committed by And Finally
parent b3cd93e0bf
commit 228084cb7c
5 changed files with 8 additions and 15 deletions

View File

@ -4,11 +4,11 @@
box-sizing: content-box;
margin: auto;
max-width: $content-max-width;
padding: 0 $content-spacing-small $content-spacing-small;
padding: $grid-unit-30 $grid-unit-20;
}
@media screen and (min-width: $breakpoint-medium) {
.woocommerce-marketplace__content {
padding: 0 $content-spacing-large $content-spacing-large;
padding: $grid-unit-60 $grid-unit-40;
}
}

View File

@ -7,10 +7,7 @@
display: grid;
grid-template: 'mktpl-title mktpl-search mktpl-meta' 60px
'mktpl-tabs mktpl-tabs mktpl-tabs' auto / 1fr 320px 36px;
left: 0;
padding: 0 $content-spacing-large;
position: absolute;
top: -60px;
width: 100%;
/* On narrow screens, "stack" header items and hide the bottom border */

View File

@ -20,7 +20,7 @@
}
@media (width <= $breakpoint-medium) {
margin: $content-spacing-small;
margin: $grid-unit-20 $grid-unit-20 $grid-unit-10 $grid-unit-20;
}
}

View File

@ -3,17 +3,17 @@
.woocommerce-admin-page__extensions {
background: #fff;
#wpbody {
margin: 0;
}
#wpbody-content {
/* Prevent double-scrollbar issue on WooCommerce > Extension pages */
overflow: hidden;
}
.woocommerce-layout__primary {
margin: $header-height-mobile 0 0;
@media (min-width: $breakpoint-medium) {
margin-top: $header-height-desktop;
}
margin: 0;
}
.woocommerce-layout__main {

View File

@ -22,10 +22,6 @@ $breakpoint-large: 1024px;
$breakpoint-xlarge: 1500px;
$breakpoint-huge: 1920px;
// Header
$header-height-desktop: 96px;
$header-height-mobile: 129px;
// Colours
$gutenberg-gray-100: $gray-0; // replaced with closest colour from _colors.native.scss
$gutenberg-gray-300: $gray-300; // anything above gray-100 is from the default _colors.scss