Skip to content

Commit

Permalink
Navigation: Fix page list issues in overlay (#37444)
Browse files Browse the repository at this point in the history
* Fix padding for page list in overlay menu.

* Fix vertical stacking of menu containers.
  • Loading branch information
jasmussen authored and tellthemachines committed Dec 21, 2021
1 parent ab69b76 commit b9efc61
Showing 1 changed file with 8 additions and 9 deletions.
17 changes: 8 additions & 9 deletions packages/block-library/src/navigation/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -432,6 +432,8 @@ button.wp-block-navigation-item__content {
// as a column.
display: flex;
flex-direction: column;
flex-wrap: nowrap;

// Inherit alignment settings from container.
align-items: var(--layout-justification-setting, inherit);

Expand Down Expand Up @@ -460,20 +462,19 @@ button.wp-block-navigation-item__content {
// Position and style.
position: static;
border: none;
padding-left: 32px;
padding-right: 32px;
padding-left: 2em;
padding-right: 2em;
}

// Space unfolded items using gap and padding for submenus.
.wp-block-navigation__submenu-container,
.wp-block-navigation__container {
gap: var(--wp--style--block-gap, 2em);
}

// Apply top padding to nested submenus.
.wp-block-navigation__submenu-container,
.wp-block-navigation__container {
padding-top: var(--wp--style--block-gap, 2em);
}
// Apply top padding to nested submenus.
.wp-block-navigation__submenu-container {
padding-top: var(--wp--style--block-gap, 2em);
}

// A default padding is added to submenu items. It's not appropriate inside the modal.
Expand Down Expand Up @@ -581,14 +582,12 @@ button.wp-block-navigation-item__content {
// The menu adds wrapping containers.
.wp-block-navigation__responsive-close {
width: 100%;
height: 100%;
}

.is-menu-open .wp-block-navigation__responsive-close,
.is-menu-open .wp-block-navigation__responsive-dialog,
.is-menu-open .wp-block-navigation__responsive-container-content {
box-sizing: border-box;
height: 100%;
}

.wp-block-navigation__responsive-dialog {
Expand Down

0 comments on commit b9efc61

Please sign in to comment.