Position transient notices based on nav width (https://github.com/woocommerce/woocommerce-admin/pull/5628)

* Position transient notices based on nav width

* Position notices left when folded or on smaller screens
This commit is contained in:
Joshua T Flowers 2020-11-23 14:28:17 -05:00 committed by GitHub
parent 91ac789393
commit d2234a7628
3 changed files with 16 additions and 1 deletions

View File

@ -1,7 +1,9 @@
@import '../../navigation/stylesheets/variables';
.woocommerce-transient-notices { .woocommerce-transient-notices {
position: fixed; position: fixed;
bottom: $gap-small; bottom: $gap-small;
left: 176px; left: $admin-menu-width + $gap;
z-index: 99999; z-index: 99999;
@media ( max-width: 960px ) { @media ( max-width: 960px ) {

View File

@ -96,5 +96,17 @@
display: none; display: none;
} }
} }
.woocommerce-transient-notices {
left: $gap;
}
}
.woocommerce-transient-notices {
left: $navigation-width + $gap;
@include breakpoint( '<782px' ) {
left: $gap;
}
} }
} }

View File

@ -3,6 +3,7 @@ $navigation-width: 240px;
$navigation-x-padding: 30px; $navigation-x-padding: 30px;
// WordPress defaults. // WordPress defaults.
$admin-menu-width: 160px;
$admin-bar-height: 32px; $admin-bar-height: 32px;
$admin-bar-height-mobile: 46px; $admin-bar-height-mobile: 46px;