From 15b1288ba2126139ddb11a5118b0e9508b37aae4 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 17 May 2021 11:11:39 +0200 Subject: [PATCH] Refactor nav block paddings/margins to inherit global styles. --- .../block-library/src/navigation/style.scss | 327 ++++++++---------- 1 file changed, 143 insertions(+), 184 deletions(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 3c00d43004ab9e..bf1bf540a51527 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -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; @@ -43,8 +43,7 @@ text-decoration: inherit; } - .wp-block-pages-list__item__link, - .wp-block-navigation-link__content { + a { text-decoration: inherit; &:focus, @@ -55,8 +54,7 @@ } &:not([style*="text-decoration"]) { - .wp-block-pages-list__item__link, - .wp-block-navigation-link__content { + a { text-decoration: none; &:focus, @@ -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%; } } }