Skip to content

Commit

Permalink
Remove forked Gutenberg nav block styles for sub menus
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamwoodnz
adamwoodnz committed Aug 26, 2022
1 parent 0835256 commit dccaa41
Showing 1 changed file with 43 additions and 168 deletions.
211 changes: 43 additions & 168 deletions mu-plugins/blocks/global-header-footer/postcss/header/menu.pcss
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
.wp-block-group.global-header .global-header__navigation {
order: 3;

@media (--tablet) {
@media ( --tablet ) {
flex-basis: 100%;
flex-shrink: 1;
order: unset;
padding-bottom: 0;
text-align: left;
overflow: clip;
height: var(--wp-global-header-height);
height: var( --wp-global-header-height );

&.has-menu-loaded {
overflow: visible;
Expand All @@ -18,20 +18,20 @@
& .wp-block-navigation__responsive-container-open {
display: flex; /* Gutenberg has the button hardcoded to hide at 600px, but we need it to wait until `--tablet`. */

@media (--tablet) {
@media ( --tablet ) {
display: none;
}

&:hover {
background-color: var(--wp-global-header--background-color--hover);
background-color: var( --wp-global-header--background-color--hover );
}
}

& .wp-block-navigation__responsive-container {
&:not(.is-menu-open) {
&:not( .is-menu-open ) {
display: none; /* Gutenberg has the menu hardcoded to open at 600px, but we need it to wait until `--tablet`. */

@media (--tablet) {
@media ( --tablet ) {
display: flex;
}
}
Expand All @@ -55,40 +55,40 @@
}

& .wp-block-navigation__container {
padding: 0 0 var(--wp--custom--margin--vertical) 0;
padding: 0 0 var( --wp--custom--margin--vertical ) 0;
row-gap: 0;
column-gap: 0;
line-height: 24px;

@media (--tablet) {
@media ( --tablet ) {
padding-bottom: 0;
}

& .wp-block-navigation-item {
&:hover,
&:focus-within {
background-color: var(--wp-global-header--background-color--hover);
background-color: var( --wp-global-header--background-color--hover );
}

@media (--tablet) {
border-bottom: var(--active-menu-item-border-height) solid transparent;
@media ( --tablet ) {
border-bottom: var( --active-menu-item-border-height ) solid transparent;
}

&.current-menu-item:not(.global-header__get-wordpress) {
&.current-menu-item:not( .global-header__get-wordpress ) {
border-left: var(--active-menu-item-border-height) solid var(--wp-global-header--link-color--active);

@media (--tablet) {
@media ( --tablet ) {
border-bottom: var(--active-menu-item-border-height) solid var(--wp-global-header--link-color--active);
border-left: none;
}

& > a {
color: var(--wp-global-header--link-color--active);
color: var( --wp-global-header--link-color--active );
font-weight: 700;
}

& > button svg {
stroke: var(--wp-global-header--link-color--active);
stroke: var( --wp-global-header--link-color--active );
}

& .current-menu-item {
Expand All @@ -108,32 +108,32 @@

& .wp-block-navigation-item a,
& .global-header__overflow-menu > button {
padding-left: var(--wp--style--block-gap);
padding-top: calc(var(--wp--style--block-gap) / 2);
padding-bottom: calc(var(--wp--style--block-gap) / 2);
padding-right: var(--wp--style--block-gap);
padding-left: var( --wp--style--block-gap );
padding-top: calc( var( --wp--style--block-gap ) / 2 );
padding-bottom: calc( var( --wp--style--block-gap ) / 2 );
padding-right: var( --wp--style--block-gap );

&:hover,
&:focus-within {
background-color: var(--wp-global-header--background-color--hover);
background-color: var( --wp-global-header--background-color--hover );
}

@media (--tablet) {
padding-bottom: calc(33px - var(--active-menu-item-border-height, 0px));
@media ( --tablet ) {
padding-bottom: calc( 33px - var( --active-menu-item-border-height, 0px ) );
padding-top: 33px;
padding-left: calc(var(--wp--style--block-gap) / 2);
padding-right: calc(var(--wp--style--block-gap) / 2);
padding-left: calc( var( --wp--style--block-gap ) / 2 );
padding-right: calc( var( --wp--style--block-gap ) / 2 );
}

@media (--short-screen) {
padding-bottom: calc(18px - var(--active-menu-item-border-height, 0px));
@media ( --short-screen ) {
padding-bottom: calc( 18px - var( --active-menu-item-border-height, 0px ) );
padding-top: 18px;
}
}

& .wp-block-navigation-item.has-child a {

@media (--tablet) {
@media ( --tablet ) {
padding-right: 6px;
}
}
Expand All @@ -142,11 +142,11 @@
& .wp-block-navigation__container .wp-block-navigation__submenu-container {
font-size: 15px;
gap: 0.5em;
padding-top: calc(var(--wp--style--block-gap) / 2);
padding-bottom: calc(var(--wp--style--block-gap) / 2);
padding-top: calc( var( --wp--style--block-gap ) / 2 );
padding-bottom: calc( var( --wp--style--block-gap ) / 2 );
border: none;

@media (--tablet) {
@media ( --tablet ) {
font-size: inherit;
gap: inherit;
padding-top: 0;
Expand All @@ -159,23 +159,23 @@
}

& .wp-block-navigation-item a {
padding: calc(var(--wp--style--block-gap) / 4);
padding: calc( var( --wp--style--block-gap ) / 4 );

@media (--tablet) {
padding: calc(var(--wp--style--block-gap) / 2) var(--wp--style--block-gap);
@media ( --tablet ) {
padding: calc( var( --wp--style--block-gap ) / 2 ) var( --wp--style--block-gap );
}
}
}

& .wp-block-navigation__container .wp-block-navigation-item.global-header__overflow-menu {

@media (--tablet) {
@media ( --tablet ) {

/* Add extra space around the overflow … to make a bigger tap/hover target. */
& button {
margin: 0;
padding-left: var(--wp--style--block-gap);
padding-right: var(--wp--style--block-gap);
padding-left: var( --wp--style--block-gap );
padding-right: var( --wp--style--block-gap );
height: auto;
width: auto;
line-height: inherit;
Expand All @@ -194,7 +194,7 @@
padding-left: 0;

& li a {
padding-left: var(--wp--style--block-gap);
padding-left: var( --wp--style--block-gap );
}
}

Expand Down Expand Up @@ -251,9 +251,9 @@
}

& .wp-block-navigation__responsive-container.is-menu-open {
top: calc(var(--wp-global-header-height, 0px) + var(--wp-admin--admin-bar--height, 0px));
top: calc( var( --wp-global-header-height, 0px ) + var( --wp-admin--admin-bar--height, 0px ) );

@media (--tablet) {
@media ( --tablet ) {
position: absolute;
top: 100%;
left: auto;
Expand All @@ -267,144 +267,19 @@
}
}

&:not(.has-background) {
background: var(--wp-global-header--background-color--hover);
&:not( .has-background ) {
background: var( --wp-global-header--background-color--hover );
}
}

& .wp-block-navigation__container {

@media (--tablet) {
background: var(--wp-global-header--background-color);
@media ( --tablet ) {
background: var( --wp-global-header--background-color );
}
}
}

/*
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;
Expand Down

0 comments on commit dccaa41

Please sign in to comment.