-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Refactor Nav Block Overlay CSS #56037
Closed
Closed
Changes from all commits
Commits
Show all changes
6 commits
Select commit
Hold shift + click to select a range
365a3ed
Seperate menu open styles and combine small break point
getdave c900f98
Extract seperate CSS for overlay and add dedicated classnames
getdave b976040
Add more comments
getdave 90576ad
Use overlay specific terminology for states
getdave 217c4eb
Conditionalise application of overlay specific styles to contents
getdave 2b5f478
Refactor show/hide of close button
getdave File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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
matchMedia
similar 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