Fix conflicts with WordPress.com toolbar (https://github.com/woocommerce/woocommerce-admin/pull/2431)
* Fix conflicts with WordPress.com toolbar * Simplify selector * Decrease z-index of header * Remove unnecessary important
This commit is contained in:
parent
4c62701b86
commit
15ecc94252
|
@ -12,7 +12,7 @@
|
|||
position: fixed;
|
||||
width: 100%;
|
||||
top: $adminbar-height;
|
||||
z-index: 99991; /* higher than component-popover (99990), lower than notification dropdown at 99999 */
|
||||
z-index: 2; /* on top of components-popover */
|
||||
|
||||
&.is-scrolled {
|
||||
box-shadow: 0 8px 8px 0 rgba(85, 93, 102, 0.3);
|
||||
|
|
|
@ -20,7 +20,9 @@
|
|||
|
||||
@include breakpoint( '<782px' ) {
|
||||
// WP breakpoint for mobile menu
|
||||
.wp-responsive-open #woocommerce-embedded-root,
|
||||
.wp-responsive-open #wpbody {
|
||||
position: relative;
|
||||
right: -14.5em;
|
||||
}
|
||||
|
||||
|
@ -64,95 +66,40 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.wp-responsive-open {
|
||||
.woocommerce-layout__header {
|
||||
margin-left: 2px;
|
||||
.woocommerce_page_wc-admin {
|
||||
.wp-responsive-open {
|
||||
.woocommerce-layout__header {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint( '<782px' ) {
|
||||
.woocommerce-layout__activity-panel-wrapper.is-open,
|
||||
.woocommerce-layout__activity-panel-tabs {
|
||||
width: calc(100vw - 190px);
|
||||
}
|
||||
.components-popover:not(.is-mobile) {
|
||||
z-index: 1; /* below of woocommerce-layout__header */
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint( '<600px' ) {
|
||||
#wpadminbar,
|
||||
.jetpack-masterbar #wpadminbar {
|
||||
#wpadminbar {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
|
||||
#adminmenuwrap {
|
||||
z-index: 99992;
|
||||
}
|
||||
|
||||
// Temporary fix for compability with the Jetpack masterbar
|
||||
// See https://github.com/Automattic/jetpack/issues/9608
|
||||
// !important rules overwrite some existing !important rules
|
||||
.jetpack-masterbar {
|
||||
@include breakpoint( '<782px' ) {
|
||||
&.wp-admin .wrap h1 {
|
||||
@include breakpoint( '<782px' ) {
|
||||
.jetpack-masterbar {
|
||||
#wpadminbar #wp-admin-bar-menu-toggle {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
// #wpwrap id added for specificity
|
||||
#wpwrap .woocommerce-layout__header-breadcrumbs {
|
||||
padding-left: 60px;
|
||||
}
|
||||
|
||||
&.wp-admin .wrap h1,
|
||||
&.wp-admin .wrap h2 {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#wpadminbar li.menupop.my-sites {
|
||||
margin-left: 55px;
|
||||
}
|
||||
|
||||
#wpadminbar #wp-admin-bar-menu-toggle {
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
width: 60px;
|
||||
|
||||
.ab-icon::before {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 0 8px 4px 8px !important;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle {
|
||||
left: -5px;
|
||||
width: 60px;
|
||||
|
||||
.ab-icon::before {
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
a {
|
||||
background: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide wp-admin and WooCommerce elements when loading the WooCommerce Admin App */
|
||||
.woocommerce-admin-is-loading {
|
||||
#adminmenumain,
|
||||
#wpadminbar,
|
||||
.woocommerce-layout__header,
|
||||
.update-nag,
|
||||
.woocommerce-store-alerts,
|
||||
.woocommerce-message,
|
||||
.notice,
|
||||
.error,
|
||||
.updated {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#wpcontent {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#wpbody {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue