-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Navigation Block / Page List: Unify menu item styles. (#29975)
- Loading branch information
Showing
5 changed files
with
180 additions
and
216 deletions.
There are no files selected for viewing
289 changes: 164 additions & 125 deletions
289
packages/block-library/src/navigation-link/style.scss
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 |
---|---|---|
@@ -1,157 +1,196 @@ | ||
.wp-block-navigation-link { | ||
display: flex; | ||
align-items: center; | ||
position: relative; | ||
margin: 0 0.5em 0 0; | ||
|
||
.wp-block-navigation-link__container:empty { | ||
display: none; | ||
} | ||
} | ||
// Navigation item styles. | ||
// This also styles navigation links inside the Page List block, | ||
// as that block is meant to behave as menu items when leveraged. | ||
.wp-block-navigation { | ||
// Menu item container. | ||
.wp-block-pages-list__item, | ||
.wp-block-navigation-link { | ||
display: flex; | ||
align-items: center; | ||
position: relative; | ||
margin: 0 0.5em 0 0; | ||
|
||
// Styles for submenu flyout. | ||
.has-child { | ||
> .wp-block-navigation-link__content { | ||
padding-right: 0.5em; | ||
.wp-block-navigation-link__container:empty { | ||
display: none; | ||
} | ||
} | ||
|
||
.wp-block-navigation-link__container { | ||
border: 1px solid rgba(0, 0, 0, 0.15); | ||
background-color: inherit; | ||
// Menu item link. | ||
.wp-block-pages-list__item__link, | ||
.wp-block-navigation-link__content { | ||
// Inherit colors set by the block color definition. | ||
color: inherit; | ||
position: absolute; | ||
left: 0; | ||
top: 100%; | ||
z-index: 2; | ||
display: flex; | ||
flex-direction: column; | ||
align-items: normal; | ||
min-width: 200px; | ||
|
||
// Hide until hover or focus within. | ||
opacity: 0; | ||
transition: opacity 0.1s linear; | ||
visibility: hidden; | ||
|
||
> .wp-block-navigation-link { | ||
> .wp-block-navigation-link__content { | ||
flex-grow: 1; | ||
} | ||
> .wp-block-navigation-link__submenu-icon { | ||
padding-right: 0.5em; | ||
} | ||
display: block; | ||
padding: 0.5em 1em; | ||
} | ||
|
||
// Force links to inherit text decoration applied to navigation block. | ||
// The extra selector adds specificity to ensure it works when user-set. | ||
&[style*="text-decoration"] { | ||
.wp-block-pages-list__item, | ||
.wp-block-navigation-link__container, | ||
.wp-block-navigation-link { | ||
text-decoration: inherit; | ||
} | ||
|
||
@include break-medium { | ||
left: 1.5em; | ||
|
||
// Nested submenus sit to the left on large breakpoints | ||
.wp-block-navigation-link__container { | ||
left: 100%; | ||
top: -1px; | ||
|
||
// Prevent the menu from disappearing when the mouse is over the gap | ||
&::before { | ||
content: ""; | ||
position: absolute; | ||
right: 100%; | ||
height: 100%; | ||
display: block; | ||
width: 0.5em; | ||
background: transparent; | ||
} | ||
} | ||
.wp-block-pages-list__item__link, | ||
.wp-block-navigation-link__content { | ||
text-decoration: inherit; | ||
|
||
.wp-block-navigation-link__submenu-icon svg { | ||
transform: rotate(0); | ||
&:focus, | ||
&:active { | ||
text-decoration: inherit; | ||
} | ||
} | ||
} | ||
|
||
// Separating out hover and focus-within so hover works again on IE: https://davidwalsh.name/css-focus-within#comment-513401 | ||
// We will need to replace focus-within with a JS solution for IE keyboard support. | ||
&:not([style*="text-decoration"]) { | ||
.wp-block-pages-list__item__link, | ||
.wp-block-navigation-link__content { | ||
text-decoration: none; | ||
|
||
// Show submenus on hover. | ||
&:hover > .wp-block-navigation-link__container { | ||
visibility: visible; | ||
opacity: 1; | ||
&:focus, | ||
&:active { | ||
text-decoration: none; | ||
} | ||
} | ||
} | ||
|
||
// Keep submenus open when focus is within. | ||
&:focus-within > .wp-block-navigation-link__container { | ||
visibility: visible; | ||
opacity: 1; | ||
// This wraps just the innermost text for custom menu items. | ||
.wp-block-navigation-link__label { | ||
word-break: normal; | ||
overflow-wrap: break-word; | ||
} | ||
} | ||
|
||
// Default background and font color. | ||
.wp-block-navigation:not(.has-background) { | ||
.submenu-container, // This target items created by the Page List block. | ||
.wp-block-navigation__container .wp-block-navigation-link__container { | ||
// Set a background color for submenus so that they're not transparent. | ||
// NOTE TO DEVS - if refactoring this code, please double-check that | ||
// submenus have a default background color, this feature has regressed | ||
// several times, so care needs to be taken. | ||
background-color: #fff; | ||
color: #000; | ||
} | ||
} | ||
// Submenu indicator. | ||
.wp-block-page-list__submenu-icon, | ||
.wp-block-navigation-link__submenu-icon { | ||
height: inherit; | ||
padding: 0.375em 1em 0.375em 0; | ||
|
||
// Force links to inherit text decoration applied to navigation block. | ||
.wp-block-navigation[style*="text-decoration"] { | ||
.wp-block-navigation-link__container, | ||
.wp-block-navigation-link { | ||
text-decoration: inherit; | ||
} | ||
.wp-block-navigation-link__content { | ||
text-decoration: inherit; | ||
svg { | ||
fill: currentColor; | ||
|
||
&:focus, | ||
&:active { | ||
text-decoration: inherit; | ||
@include break-medium { | ||
transform: rotate(90deg); | ||
} | ||
} | ||
} | ||
} | ||
|
||
.wp-block-navigation:not([style*="text-decoration"]) { | ||
.wp-block-navigation-link__content { | ||
text-decoration: none; | ||
// Styles for submenu flyout. | ||
.has-child { | ||
> .wp-block-pages-list__item__link, | ||
> .wp-block-navigation-link__content { | ||
padding-right: 0.5em; | ||
} | ||
|
||
&:focus, | ||
&:active { | ||
text-decoration: none; | ||
.submenu-container, | ||
.wp-block-navigation-link__container { | ||
border: 1px solid rgba(0, 0, 0, 0.15); | ||
background-color: inherit; | ||
color: inherit; | ||
position: absolute; | ||
left: 0; | ||
top: 100%; | ||
z-index: 2; | ||
display: flex; | ||
flex-direction: column; | ||
align-items: normal; | ||
min-width: 200px; | ||
|
||
// Hide until hover or focus within. | ||
opacity: 0; | ||
transition: opacity 0.1s linear; | ||
visibility: hidden; | ||
|
||
> .wp-block-pages-list__item, | ||
> .wp-block-navigation-link { | ||
> .wp-block-pages-list__item__link, | ||
> .wp-block-navigation-link__content { | ||
flex-grow: 1; | ||
} | ||
|
||
> .wp-block-page-list__submenu-icon, | ||
> .wp-block-navigation-link__submenu-icon { | ||
padding-right: 0.5em; | ||
} | ||
} | ||
|
||
@include break-medium { | ||
left: 1.5em; | ||
|
||
// Nested submenus sit to the left on large breakpoints. | ||
.submenu-container, | ||
.wp-block-navigation-link__container { | ||
left: 100%; | ||
top: -$border-width; | ||
|
||
// Prevent the menu from disappearing when the mouse is over the gap | ||
&::before { | ||
content: ""; | ||
position: absolute; | ||
right: 100%; | ||
height: 100%; | ||
display: block; | ||
width: 0.5em; | ||
background: transparent; | ||
} | ||
} | ||
|
||
// Reset the submenu indicator for horizontal flyouts. | ||
.wp-block-page-list__submenu-icon svg, | ||
.wp-block-navigation-link__submenu-icon svg { | ||
transform: rotate(0); | ||
} | ||
} | ||
} | ||
} | ||
} | ||
|
||
// All links. | ||
.wp-block-navigation-link__content { | ||
display: block; | ||
color: inherit; | ||
padding: 0.5em 1em; | ||
// Separating out hover and focus-within so hover works again on IE: https://davidwalsh.name/css-focus-within#comment-513401 | ||
// We will need to replace focus-within with a JS solution for IE keyboard support. | ||
|
||
+ .wp-block-navigation-link__content { | ||
padding-top: 0; | ||
} | ||
.has-text-color & { | ||
color: inherit; | ||
} | ||
} | ||
// Custom menu items. | ||
// Show submenus on hover. | ||
&:hover > .wp-block-navigation-link__container { | ||
visibility: visible; | ||
opacity: 1; | ||
} | ||
|
||
.wp-block-navigation-link__label { | ||
word-break: normal; | ||
overflow-wrap: break-word; | ||
} | ||
// Keep submenus open when focus is within. | ||
&:focus-within > .wp-block-navigation-link__container { | ||
visibility: visible; | ||
opacity: 1; | ||
} | ||
|
||
.wp-block-navigation-link__submenu-icon { | ||
height: inherit; | ||
padding: 0.375em 1em 0.375em 0; | ||
// Page list menu items. | ||
&:hover { | ||
cursor: pointer; | ||
|
||
svg { | ||
fill: currentColor; | ||
> .submenu-container { | ||
visibility: visible; | ||
opacity: 1; | ||
} | ||
} | ||
|
||
@include break-medium { | ||
transform: rotate(90deg); | ||
&:focus-within { | ||
cursor: pointer; | ||
|
||
> .submenu-container { | ||
visibility: visible; | ||
opacity: 1; | ||
} | ||
} | ||
} | ||
} | ||
|
||
// Default background and font color. | ||
.wp-block-navigation:not(.has-background) { | ||
.submenu-container, // This target items created by the Page List block. | ||
.wp-block-navigation__container .wp-block-navigation-link__container { | ||
// Set a background color for submenus so that they're not transparent. | ||
// NOTE TO DEVS - if refactoring this code, please double-check that | ||
// submenus have a default background color, this feature has regressed | ||
// several times, so care needs to be taken. | ||
background-color: #fff; | ||
color: #000; | ||
} | ||
} |
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
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
Oops, something went wrong.