From cc36c011986e9fd9b01d10eae3982f1d6e93caeb Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 24 Aug 2022 13:34:22 +0200 Subject: [PATCH 1/2] Navigation: Try making it possible for themes to have the X overlay the = --- packages/block-library/src/navigation/style.scss | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 34b930442cd8f..9423299ef924a 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -468,8 +468,11 @@ button.wp-block-navigation-item__content { flex-direction: column; background-color: inherit; - // Use em units to apply padding, so themes can more easily style this in various ways. - padding: 2rem; + // Try to inherit any root paddings set, so the X can align to a top-right aligned menu. + padding-top: var(--wp--style--root--padding-top, 2rem); + padding-right: var(--wp--style--root--padding-right, 2rem); + padding-bottom: var(--wp--style--root--padding-bottom, 2rem); + padding-left: var(--wp--style--root--padding-left, 2rem); // Allow modal to scroll. overflow: auto; @@ -646,6 +649,11 @@ button.wp-block-navigation-item__content { .wp-block-navigation__responsive-close { width: 100%; + // Try to inherit content-width when defined, so the X can align to a top-right aligned menu. + max-width: var(--wp--style--global--content-size, 100%); + margin-left: auto; + margin-right: auto; + // This element is not keyboard accessible, and is focusable only using the mouse. // It is part of the MicroModal library that adds a scrim outside of a modal dialog that is not fullscreen, // where clicking that scrim closes the overlay just like the close button. From ff1e03809266c22172b923d441faca46b0d82300 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 25 Aug 2022 11:20:20 +0200 Subject: [PATCH 2/2] Use wide instead of content width. --- packages/block-library/src/navigation/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 9423299ef924a..33307c81b2c3e 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -649,8 +649,8 @@ button.wp-block-navigation-item__content { .wp-block-navigation__responsive-close { width: 100%; - // Try to inherit content-width when defined, so the X can align to a top-right aligned menu. - max-width: var(--wp--style--global--content-size, 100%); + // Try to inherit wide-width when defined, so the X can align to a top-right aligned menu. + max-width: var(--wp--style--global--wide-size, 100%); margin-left: auto; margin-right: auto;