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:
parent
b3cd93e0bf
commit
228084cb7c
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 */
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue