Refactor Nav Block Overlay CSS #56037
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,223 @@ | ||
| // ******************************************************** | ||
| // VARIABLES & MIXINS | ||
| // ******************************************************** | ||
|
|
||
| // Abstraction for Navigation breakpoint. | ||
| @mixin nav-breakpoint() { | ||
| @include break-small { | ||
| @content; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // ******************************************************** | ||
| // ANIMATION | ||
| // ******************************************************** | ||
| @keyframes overlay-menu__fade-in-animation { | ||
| from { | ||
| opacity: 0; | ||
| transform: translateY(0.5em); | ||
| } | ||
|
|
||
| to { | ||
| opacity: 1; | ||
| transform: translateY(0); | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // ******************************************************** | ||
| // ROOT | ||
| // Alias: wp-block-navigation__responsive-container | ||
| // ******************************************************** | ||
| .wp-overlay-component { | ||
| display: none; | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
|
|
||
| @include nav-breakpoint { | ||
| &:not(.hidden-by-default):not(.is-overlay-open) { | ||
| display: block; | ||
| width: 100%; | ||
| position: relative; | ||
| z-index: auto; | ||
| background-color: inherit; | ||
| } | ||
| } | ||
|
|
||
| // STATE: overlay is open. | ||
| // ******************************************************** | ||
| &.is-overlay-open { | ||
| display: flex; // Needs to be set to override "none". | ||
| flex-direction: column; | ||
| background-color: inherit; | ||
|
|
||
| // Try to inherit any root paddings set, so the X can align to a top-right aligned menu. | ||
| padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem); | ||
| padding-right: clamp(1rem, var(--wp--style--root--padding-right), 20rem); | ||
| padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem); | ||
| padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20em); | ||
|
|
||
| // Animation. | ||
| animation: overlay-menu__fade-in-animation 0.1s ease-out; | ||
| animation-fill-mode: forwards; | ||
| @include reduce-motion("animation"); | ||
|
|
||
| // Allow modal to scroll. | ||
| overflow: auto; | ||
|
|
||
| // Give it a z-index just higher than the adminbar. | ||
| z-index: 100000; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // ******************************************************** | ||
| // DIALOG | ||
| // Alias: wp-block-navigation__responsive-dialog | ||
| // ******************************************************** | ||
| .wp-overlay-component__dialog { | ||
| position: relative; | ||
|
|
||
| // STATE: overlay is open. | ||
| // ******************************************************** | ||
| .is-overlay-open & { | ||
| // Quesiton: why is this conditionally applied? | ||
| box-sizing: border-box; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // ******************************************************** | ||
| // CONTENT | ||
| // Alias: wp-block-navigation__responsive-container-content | ||
| // ******************************************************** | ||
| .wp-overlay-component__content { | ||
|
|
||
| // STATE: overlay is open. | ||
| // ******************************************************** | ||
| .is-overlay-open & { | ||
|
|
||
| // Always align the contents of the menu to the top. | ||
| justify-content: flex-start; | ||
|
|
||
| // Add padding above to accommodate close button. | ||
| padding-top: calc(2rem + #{ $navigation-icon-size }); | ||
|
|
||
| // Don't crop the focus style. | ||
| overflow: visible; | ||
|
|
||
| // Override the container flex layout settings | ||
| // because we want overlay menu to always display | ||
| // as a column. | ||
| display: flex; | ||
| flex-direction: column; | ||
| flex-wrap: nowrap; | ||
|
|
||
| // Quesiton: why is this conditionally applied? | ||
| box-sizing: border-box; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // ******************************************************** | ||
| // TOGGLE BUTTONS | ||
| // Alias: | ||
|
There was a problem hiding this comment. I like the agnostic classes. We could use @extend to keep backwards compatibility with the old classes |
||
| // - .wp-block-navigation__responsive-container-open, | ||
| // - .wp-block-navigation__responsive-container-close | ||
| // ******************************************************** | ||
|
|
||
| .wp-overlay-component__toggle { | ||
| vertical-align: middle; | ||
| cursor: pointer; | ||
| color: currentColor; | ||
| background: transparent; | ||
| border: none; | ||
| margin: 0; | ||
| padding: 0; | ||
| text-transform: inherit; | ||
|
|
||
| svg { | ||
| fill: currentColor; | ||
| pointer-events: none; | ||
| display: block; | ||
| width: $navigation-icon-size; | ||
| height: $navigation-icon-size; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // ******************************************************** | ||
| // OPEN BUTTON | ||
| // Alias: wp-block-navigation__responsive-container-open | ||
| // ******************************************************** | ||
|
|
||
| .wp-overlay-component__open { | ||
| display: flex; | ||
|
|
||
| // Hide the button on smaller viewports except | ||
| // when the overlay is set to always show. | ||
|
|
||
| &:not(.always-shown) { | ||
| @include break-small { | ||
| display: none; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // ******************************************************** | ||
| // CLOSE BUTTON | ||
| // Alias: wp-block-navigation__responsive-container-close | ||
| // ******************************************************** | ||
|
|
||
| .wp-overlay-component__close { | ||
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| z-index: 2; // Needs to be above the modal z index itself. | ||
| display: none; // hide by default for all users. | ||
|
|
||
| // STATE: overlay is open. | ||
| // ******************************************************** | ||
| .is-overlay-open & { | ||
| box-sizing: border-box; | ||
|
|
||
| // Reveal when overlay is open. | ||
| display: inline-flex; // as per <Button> component. | ||
| } | ||
|
|
||
| // STATE: overlay is set to always show. | ||
| // ******************************************************** | ||
| &.always-shown { | ||
| display: inline-flex; // as per <Button> component. | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // ******************************************************** | ||
| // MAYBE REDUNDANT | ||
| // Alias: wp-block-navigation__responsive-close | ||
| // ******************************************************** | ||
| .wp-overlay-component__maybe-redundant { | ||
| width: 100%; | ||
|
|
||
| // STATE: overlay is open. | ||
| // ******************************************************** | ||
| .has-modal-open & { | ||
| // 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; | ||
| } | ||
|
|
||
| // 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. | ||
| // It should not have a visible focus rectangle. | ||
| &:focus { | ||
| outline: none; | ||
| } | ||
| } | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I assume this code exists so that if the overlay is open and the screen size changes then the overlay becomes hidden?
I'm wondering. If in the future we want to allow the Nav breakpoint to change dynamically based on measuring the width of the Navigation block, then we might like to look at moving all the responsive behaviour to JavaScript with something like
matchMediasimilar to what I did in #45274.The only issue is then we'd need to find a way to do a similar thing with directives on the front of the site.
I believe taking such an approach would make this code a lot simpler.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yes, I was thinking on using a class that will be added or removed once we reach the correct viewport width