diff --git a/mu-plugins/blocks/global-header-footer/postcss/header/menu.pcss b/mu-plugins/blocks/global-header-footer/postcss/header/menu.pcss index ce0530261..cadd9d773 100644 --- a/mu-plugins/blocks/global-header-footer/postcss/header/menu.pcss +++ b/mu-plugins/blocks/global-header-footer/postcss/header/menu.pcss @@ -280,131 +280,6 @@ } } -/* -Copied Gutenberg styles to provide broader browser support. -The code below is only applied via CSS :where selector in default Gutenberg styles. - -See: https://github.com/WordPress/wporg-mu-plugins/issues/159 -Source: https://github.com/WordPress/gutenberg/blob/3b2eccc289cfc90bd99252b12fc4c6e470ce4c04/packages/block-library/src/navigation/style.scss#L157 -*/ - -.wp-block-navigation .has-child { - & .wp-block-navigation__submenu-container { - background-color: inherit; - color: inherit; - position: absolute; - z-index: 2; - display: flex; - flex-direction: column; - align-items: normal; - - /* Hide until hover or focus within. */ - opacity: 0; - transition: opacity 0.1s linear; - visibility: hidden; - - /* Don't take up space when the menu is collapsed. */ - width: 0; - height: 0; - overflow: hidden; /* Overflow is necessary to set, otherwise submenu items will take up space. */ - - /* Submenu items. */ - & > .wp-block-navigation-item { - & > .wp-block-navigation-item__content { - display: flex; - flex-grow: 1; - - /* Right-align the chevron in submenus. */ - & .wp-block-navigation__submenu-icon { - margin-right: 0; - margin-left: auto; - } - } - } - - /* Spacing in all submenus. */ - & .wp-block-navigation-item__content { - margin: 0; - } - - /* Submenu indentation when there's no background. */ - - /* Changed from source — left has no border, top needs 4px for current item border. */ - left: 0; - top: calc(100% + var(--active-menu-item-border-height)); - - /* - * Indentation for all submenus. - * Nested submenus sit to the left on large breakpoints. - * On smaller breakpoints, they open vertically, accordion-style. - */ - - @media (--tablet) { - & .wp-block-navigation__submenu-container { - left: 100%; - top: 0; - - /* 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; - } - } - - /* Push inwards from right edge of submenu. */ - & .wp-block-navigation__submenu-icon { - margin-right: 0.25em; - } - - /* Reset the submenu indicator for horizontal flyouts. */ - & .wp-block-navigation__submenu-icon svg { - transform: rotate(-90deg); - } - } - } - - /* - * Custom menu items. - * Show submenus on hover unless they open on click. - */ - - &:not(.open-on-click):hover > .wp-block-navigation__submenu-container { - visibility: visible; - overflow: visible; - opacity: 1; - width: auto; - height: auto; - min-width: 200px; - } - - /* Keep submenus open when focus is within. */ - &:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container { - visibility: visible; - overflow: visible; - opacity: 1; - width: auto; - height: auto; - min-width: 200px; - } - - /* Show submenus on click. */ - & .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container { - visibility: visible; - overflow: visible; - opacity: 1; - width: auto; - height: auto; - min-width: 200px; - } -} - -/* End :where fix */ - /* Gutenberg bug: Close button is not visible in Safari; override it locally */ .global-header__navigation .is-menu-open { overflow: visible;