Skip to content

Commit

Permalink
Fix header z-index issues
Browse files Browse the repository at this point in the history
  • Loading branch information
youknowriad committed Nov 12, 2019
1 parent 455e237 commit b409aa5
Show file tree
Hide file tree
Showing 4 changed files with 12 additions and 6 deletions.
5 changes: 3 additions & 2 deletions packages/base-styles/_z-index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ $z-layers: (
".block-library-gallery-item__inline-menu": 20,
".block-editor-url-input__suggestions": 30,
".edit-post-layout__footer": 30,
".edit-post-header": 30,
".edit-post-editor-regions__header": 30,
".edit-widgets-header": 30,
".block-library-button__inline-link .block-editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter
".block-library-image__resize-handlers": 1, // Resize handlers above sibling inserter
Expand Down Expand Up @@ -75,7 +75,8 @@ $z-layers: (

// Show sidebar in greater than small viewports above editor related elements
// but bellow #adminmenuback { z-index: 100 }
".edit-post-sidebar {greater than small}": 90,
".edit-post-editor-regions__sidebar {greater than small}": 90,
".edit-widgets-sidebar {greater than small}": 90,

// Show notices below expanded editor bar
// .edit-post-header { z-index: 30 }
Expand Down
10 changes: 8 additions & 2 deletions packages/edit-post/src/components/editor-regions/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@
right: 0;
bottom: 0;
left: 0;
background: $white;

&:empty {
display: none;
Expand All @@ -63,22 +64,27 @@
overflow: auto;
border-left: $border-width solid $light-gray-500;
position: relative !important;
z-index: initial;
z-index: z-index(".edit-post-editor-regions__sidebar {greater than small}");
}
}

.edit-post-editor-regions__header {
flex-shrink: 0;
height: auto; // Keep the height flexible.
border-bottom: $border-width solid $light-gray-500;
z-index: z-index(".edit-post-editor-regions__header");

// On Mobile the header is sticky.
position: sticky;
top: 0;

@include break-small() {
top: $admin-bar-height-big; // The top bar is fixed on this breakpoint.
}

@include break-medium() {
// Cancel the fixed positionning used in mobile.
position: initial;
overflow: auto;
}
}

Expand Down
1 change: 0 additions & 1 deletion packages/edit-post/src/components/header/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
align-items: center;
// The header should never be wider than the viewport, or buttons might be hidden. Especially relevant at high zoom levels. Related to https://core.trac.wordpress.org/ticket/47603#ticket.
max-width: 100vw;
z-index: z-index(".edit-post-header");

// Make toolbar sticky on larger breakpoints
@include break-zoomed-in {
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-widgets/src/components/sidebar/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@

@include break-small() {
top: $admin-bar-height-big + $header-height;
z-index: z-index(".edit-post-sidebar {greater than small}");
z-index: z-index(".edit-widgets-sidebar {greater than small}");
height: auto;
overflow: auto;
-webkit-overflow-scrolling: touch;
Expand Down

0 comments on commit b409aa5

Please sign in to comment.