Skip to content

Commit

Permalink
Refactor nav block paddings/margins to inherit global styles.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jasmussen
jasmussen committed May 25, 2021
1 parent 6848e3c commit 15b1288
Showing 1 changed file with 143 additions and 184 deletions.
327 changes: 143 additions & 184 deletions packages/block-library/src/navigation/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@
}

// Menu item link.
.wp-block-pages-list__item__link,
.wp-block-navigation-link__content {
// By targetting the markup directly we enable greater global styles compatibility.
a {
// Inherit colors set by the block color definition.
color: inherit;
display: block;
Expand All @@ -43,8 +43,7 @@
text-decoration: inherit;
}

.wp-block-pages-list__item__link,
.wp-block-navigation-link__content {
a {
text-decoration: inherit;

&:focus,
Expand All @@ -55,8 +54,7 @@
}

&:not([style*="text-decoration"]) {
.wp-block-pages-list__item__link,
.wp-block-navigation-link__content {
a {
text-decoration: none;

&:focus,
Expand All @@ -76,227 +74,188 @@
}
}

// Some themes have added custom padding to the link, which does not consider the Page List block.
// Unfortunately we now need to add extra specificity and undo that, so that the block still works.
.wp-block-pages-list__item .wp-block-pages-list__item__link,
.wp-block-navigation-link .wp-block-navigation-link__content.wp-block-navigation-link__content.wp-block-navigation-link__content {
// Set the default menu item padding to zero, to allow text-only buttons.
.wp-block-pages-list__item a,
.wp-block-navigation-link a { // This allows the custom menu item to inherit global styles.
padding: 0;
}
}

// Styles for submenu flyout.
.has-child {
// This adds a little space between the link and the dropdown icon.
> .wp-block-pages-list__item__link,
> .wp-block-navigation-link__content {
margin-right: 0.5em;
}

.submenu-container,
.wp-block-navigation-link__container {
background-color: inherit;
color: inherit;
position: absolute;
z-index: 2;
flex-direction: column;
align-items: normal;
min-width: 200px;

// Hide until hover or focus within.
display: none;
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;
}
// Styles for submenu flyout.
// These are separated out with reduced specificity to allow better inheritance from Global Styles.
.has-child {
// This adds a little space between the link and the dropdown icon.
> a {
margin-right: 0.5em;
}

> .wp-block-page-list__submenu-icon,
> .wp-block-navigation-link__submenu-icon {
padding-right: 0.5em;
}
.submenu-container,
.wp-block-navigation-link__container {
background-color: inherit;
color: inherit;
position: absolute;
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 {
> a {
flex-grow: 1;
}

// Nested submenus sit to the left on large breakpoints.
// On smaller breakpoints, they open vertically, accordion-style.
@include break-medium {
.submenu-container,
.wp-block-navigation-link__container {
// 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(-90deg);
}
> .wp-block-page-list__submenu-icon,
> .wp-block-navigation-link__submenu-icon {
padding-right: 0.5em;
}
}

// Separating out hover and focus-within so hover works again on IE: https://davidwalsh.name/css-focus-within#comment-513401
// We don't actually have to support this anymore, but it's easy to keep for now.

// Custom menu items.
// Show submenus on hover.
&:hover > .wp-block-navigation-link__container {
display: flex;
visibility: visible;
opacity: 1;
// Spacing in all submenus.
a {
padding: 0.5em 1em;
margin: 0;
}

// Keep submenus open when focus is within.
&:focus-within > .wp-block-navigation-link__container {
display: flex;
visibility: visible;
opacity: 1;
}
// Submenu indentation when there's no background.
left: -1em;
top: 100%;

// Page list menu items.
&:hover {
cursor: pointer;
// Indentation for all submenus.
// Nested submenus sit to the left on large breakpoints.
// On smaller breakpoints, they open vertically, accordion-style.
@include break-medium {
.submenu-container,
.wp-block-navigation-link__container {
left: 100%;
top: -1px; // Border width.

> .submenu-container {
display: flex;
visibility: visible;
opacity: 1;
// 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;
}
}
}

&:focus-within {
cursor: pointer;

> .submenu-container {
display: flex;
visibility: visible;
opacity: 1;
// Reset the submenu indicator for horizontal flyouts.
.wp-block-page-list__submenu-icon svg,
.wp-block-navigation-link__submenu-icon svg {
transform: rotate(-90deg);
}
}
}


// When justified space-between, open submenus leftward for last menu item.
// When justified right, open all submenus leftwards.
// This needs high specificity.
&.wp-block-navigation.items-justified-space-between > .submenu-container > .has-child:last-child,
&.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child,
&.wp-block-navigation.items-justified-right > .submenu-container .has-child,
&.wp-block-navigation.items-justified-right > .wp-block-navigation__container .has-child {

// First submenu.
.submenu-container,
.wp-block-navigation-link__container {
left: auto;
right: 0;
// 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.

// Nested submenus.
.submenu-container,
.wp-block-navigation-link__container {
left: auto;
right: 100%;
}
}
// Custom menu items.
// Show submenus on hover.
&:hover > .wp-block-navigation-link__container {
visibility: visible;
opacity: 1;
}
}

// Margins, paddings, and submenu positions.
// These need extra specificity to override potentially inherited properties.
.wp-block-navigation.wp-block-navigation {

// Menu items with no background.
.wp-block-page-list,
.wp-block-page-list > .wp-block-pages-list__item,
.wp-block-navigation__container > .wp-block-navigation-link {
margin: 0 2em 0 0;

// Margin of right-most margin should be zero, for right aligned or justified items.
&:last-child {
margin-right: 0;
}
// Keep submenus open when focus is within.
&:focus-within > .wp-block-navigation-link__container {
visibility: visible;
opacity: 1;
}

// When the menu has a background, items have paddings, reduce margins to compensate.
// Treat margins and paddings differently when the block has a background.
&.has-background {
.wp-block-page-list,
.wp-block-page-list > .wp-block-pages-list__item,
.wp-block-navigation__container > .wp-block-navigation-link {
margin: 0 0.5em 0 0;
}
// Page list menu items.
&:hover {
cursor: pointer;

.wp-block-page-list .wp-block-pages-list__item__link,
.wp-block-navigation__container .wp-block-navigation-link__content {
padding: 0.5em 1em;
> .submenu-container {
visibility: visible;
opacity: 1;
}
}

// Spacing in all submenus.
.has-child .submenu-container,
.has-child .wp-block-navigation-link__container {
.wp-block-pages-list__item,
.wp-block-navigation-link {
margin: 0;
}
&:focus-within {
cursor: pointer;

.wp-block-pages-list__item__link,
.wp-block-navigation-link__content {
padding: 0.5em 1em;
> .submenu-container {
visibility: visible;
opacity: 1;
}
}
}

// Submenu indentation when there's no background.
// It should align with the text above.
left: -1em;
top: 100%;
// Submenu indentation when there's a background.
.wp-block-navigation.has-background .has-child .submenu-container,
.wp-block-navigation.has-background .has-child .wp-block-navigation-link__container {
left: 0;
top: 100%;

// Indentation when no background on small viewports.
// It should align with the parent menu above.
// There's no border on submenus when there are backgrounds.
@include break-medium {
.submenu-container,
.wp-block-navigation-link__container {
left: -1px;
left: 100%;
top: 0;
}
}
}

// Indentation for all submenus on large viewports.
@include break-medium {
.submenu-container,
.wp-block-navigation-link__container {
left: 100%;
top: -1px; // Border width.
}
}
// Margins, paddings, and submenu positions.
// Menu items with no background.
.wp-block-page-list,
.wp-block-page-list > .wp-block-pages-list__item,
.wp-block-navigation__container > .wp-block-navigation-link {
margin: 0 2em 0 0;

// Margin of right-most margin should be zero, for right aligned or justified items.
&:last-child {
margin-right: 0;
}
}

// Submenu indentation when there's a background.
// It should align with menu item itself.
&.has-background .has-child .submenu-container,
&.has-background .has-child .wp-block-navigation-link__container {
left: 0;
top: 100%;
// When the menu has a background, items have paddings, reduce margins to compensate.
// Treat margins and paddings differently when the block has a background.
.wp-block-navigation.has-background {
.wp-block-page-list,
.wp-block-page-list > .wp-block-pages-list__item,
.wp-block-navigation__container > .wp-block-navigation-link {
margin: 0 0.5em 0 0;
}

// Indentation when there's a background on small viewports.
// It should align with the parent menu above.
a {
padding: 0.5em 1em;
}
}

// When justified space-between, open submenus leftward for last menu item.
// When justified right, open all submenus leftwards.
// This needs high specificity.
.wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child,
.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child,
.wp-block-navigation.items-justified-right .wp-block-page-list > .has-child,
.wp-block-navigation.items-justified-right > .wp-block-navigation__container .has-child {

// First submenu.
.submenu-container,
.wp-block-navigation-link__container {
left: auto;
right: 0;

// Nested submenus.
.submenu-container,
.wp-block-navigation-link__container {
left: 0;
}

// There's no border on submenus when there are backgrounds.
@include break-medium {
.submenu-container,
.wp-block-navigation-link__container {
left: 100%;
top: 0;
}
left: auto;
right: 100%;
}
}
}
Expand Down

0 comments on commit 15b1288

Please sign in to comment.