diff -r 7b1b88e27a20 -r 48c4eec2b7e6 wp/wp-includes/blocks/navigation/style-rtl.css --- a/wp/wp-includes/blocks/navigation/style-rtl.css Thu Sep 29 08:06:27 2022 +0200 +++ b/wp/wp-includes/blocks/navigation/style-rtl.css Fri Sep 05 18:40:08 2025 +0200 @@ -1,540 +1,452 @@ -/** - * Colors - */ -/** - * Breakpoints & Media Queries - */ -/** - * SCSS Variables. - * - * Please use variables from this sheet to ensure consistency across the UI. - * Don't add to this sheet unless you're pretty sure the value will be reused in many places. - * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. - */ -/** - * Colors - */ -/** - * Fonts & basic variables. - */ -/** - * Grid System. - * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ - */ -/** - * Dimensions. - */ -/** - * Shadows. - */ -/** - * Editor widths. - */ -/** - * Block & Editor UI. - */ -/** - * Block paddings. - */ -/** - * React Native specific. - * These variables do not appear to be used anywhere else. - */ -/** -* Converts a hex value into the rgb equivalent. -* -* @param {string} hex - the hexadecimal value to convert -* @return {string} comma separated rgb values -*/ -/** - * Breakpoint mixins - */ -/** - * Long content fade mixin - * - * Creates a fading overlay to signify that the content is longer - * than the space allows. - */ -/** - * Focus styles. - */ -/** - * Applies editor left position to the selector passed as argument - */ -/** - * Styles that are reused verbatim in a few places - */ -/** - * Allows users to opt-out of animations via OS-level preferences. - */ -/** - * Reset default styles for JavaScript UI based pages. - * This is a WP-admin agnostic reset - */ -/** - * Reset the WP Admin page styles for Gutenberg-like pages. - */ -.wp-block-navigation { - position: relative; - --navigation-layout-justification-setting: flex-start; - --navigation-layout-direction: row; - --navigation-layout-wrap: wrap; - --navigation-layout-justify: flex-start; - --navigation-layout-align: center; +.wp-block-navigation{ + position:relative; + --navigation-layout-justification-setting:flex-start; + --navigation-layout-direction:row; + --navigation-layout-wrap:wrap; + --navigation-layout-justify:flex-start; + --navigation-layout-align:center; +} +.wp-block-navigation ul{ + margin-bottom:0; + margin-right:0; + margin-top:0; + padding-right:0; +} +.wp-block-navigation ul,.wp-block-navigation ul li{ + list-style:none; + padding:0; +} +.wp-block-navigation .wp-block-navigation-item{ + align-items:center; + background-color:inherit; + display:flex; + position:relative; +} +.wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container:empty{ + display:none; +} +.wp-block-navigation .wp-block-navigation-item__content{ + display:block; +} +.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content{ + color:inherit; +} +.wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content,.wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content:active,.wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content:focus{ + text-decoration:underline; +} +.wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content,.wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content:active,.wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content:focus{ + text-decoration:line-through; +} +.wp-block-navigation :where(a),.wp-block-navigation :where(a:active),.wp-block-navigation :where(a:focus){ + text-decoration:none; } -.wp-block-navigation ul { - margin-top: 0; - margin-bottom: 0; - margin-right: 0; - padding-right: 0; -} -.wp-block-navigation ul, -.wp-block-navigation ul li { - list-style: none; - padding: 0; -} -.wp-block-navigation .wp-block-navigation-item { - display: flex; - align-items: center; - position: relative; -} -.wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container:empty { - display: none; +.wp-block-navigation .wp-block-navigation__submenu-icon{ + align-self:center; + background-color:inherit; + border:none; + color:currentColor; + display:inline-block; + font-size:inherit; + height:.6em; + line-height:0; + margin-right:.25em; + padding:0; + width:.6em; } -.wp-block-navigation .wp-block-navigation-item__content { - color: inherit; - display: block; - padding: 0; -} -.wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content { - text-decoration: underline; -} -.wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content:focus, .wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content:active { - text-decoration: underline; -} -.wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content { - text-decoration: line-through; -} -.wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content:focus, .wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content:active { - text-decoration: line-through; -} -.wp-block-navigation:where(:not([class*="has-text-decoration"])) a { - text-decoration: none; -} -.wp-block-navigation:where(:not([class*="has-text-decoration"])) a:focus, .wp-block-navigation:where(:not([class*="has-text-decoration"])) a:active { - text-decoration: none; +.wp-block-navigation .wp-block-navigation__submenu-icon svg{ + display:inline-block; + stroke:currentColor; + height:inherit; + margin-top:.075em; + width:inherit; } -.wp-block-navigation .wp-block-navigation__submenu-icon { - align-self: center; - line-height: 0; - display: inline-block; - font-size: inherit; - padding: 0; - background-color: inherit; - color: currentColor; - border: none; - width: 0.6em; - height: 0.6em; - margin-right: 0.25em; +.wp-block-navigation.is-vertical{ + --navigation-layout-direction:column; + --navigation-layout-justify:initial; + --navigation-layout-align:flex-start; } -.wp-block-navigation .wp-block-navigation__submenu-icon svg { - display: inline-block; - stroke: currentColor; - width: inherit; - height: inherit; - margin-top: 0.075em; +.wp-block-navigation.no-wrap{ + --navigation-layout-wrap:nowrap; +} +.wp-block-navigation.items-justified-center{ + --navigation-layout-justification-setting:center; + --navigation-layout-justify:center; } -.wp-block-navigation.is-vertical { - --navigation-layout-direction: column; - --navigation-layout-justify: initial; - --navigation-layout-align: flex-start; +.wp-block-navigation.items-justified-center.is-vertical{ + --navigation-layout-align:center; } -.wp-block-navigation.no-wrap { - --navigation-layout-wrap: nowrap; -} -.wp-block-navigation.items-justified-center { - --navigation-layout-justification-setting: center; - --navigation-layout-justify: center; +.wp-block-navigation.items-justified-right{ + --navigation-layout-justification-setting:flex-end; + --navigation-layout-justify:flex-end; } -.wp-block-navigation.items-justified-center.is-vertical { - --navigation-layout-align: center; -} -.wp-block-navigation.items-justified-right { - --navigation-layout-justification-setting: flex-end; - --navigation-layout-justify: flex-end; +.wp-block-navigation.items-justified-right.is-vertical{ + --navigation-layout-align:flex-end; } -.wp-block-navigation.items-justified-right.is-vertical { - --navigation-layout-align: flex-end; -} -.wp-block-navigation.items-justified-space-between { - --navigation-layout-justification-setting: space-between; - --navigation-layout-justify: space-between; +.wp-block-navigation.items-justified-space-between{ + --navigation-layout-justification-setting:space-between; + --navigation-layout-justify:space-between; } -.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) { - background-color: inherit; - color: inherit; - position: absolute; - z-index: 2; - display: flex; - flex-direction: column; - align-items: normal; - opacity: 0; - transition: opacity 0.1s linear; - visibility: hidden; - width: 0; - height: 0; - overflow: hidden; - right: -1px; - top: 100%; +.wp-block-navigation .has-child .wp-block-navigation__submenu-container{ + align-items:normal; + background-color:inherit; + color:inherit; + display:flex; + flex-direction:column; + height:0; + opacity:0; + overflow:hidden; + position:absolute; + right:-1px; + top:100%; + transition:opacity .1s linear; + visibility:hidden; + width:0; + z-index:2; } -.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) > .wp-block-navigation-item > .wp-block-navigation-item__content { - display: flex; - flex-grow: 1; +.wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content{ + display:flex; + flex-grow:1; } -.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon { - margin-left: 0; - margin-right: auto; +.wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content .wp-block-navigation__submenu-icon{ + margin-left:0; + margin-right:auto; } -.wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation-item__content { - margin: 0; +.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content{ + margin:0; } -@media (min-width: 782px) { - .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-container { - right: 100%; - top: -1px; +@media (min-width:782px){ + .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{ + right:100%; + top:-1px; } - .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-container::before { - content: ""; - position: absolute; - left: 100%; - height: 100%; - display: block; - width: 0.5em; - background: transparent; + .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container:before{ + background:#0000; + content:""; + display:block; + height:100%; + left:100%; + position:absolute; + width:.5em; } - .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-icon { - margin-left: 0.25em; + .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon{ + margin-left:.25em; } - .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-icon svg { - transform: rotate(90deg); + .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon svg{ + transform:rotate(90deg); } } -.wp-block-navigation .has-child:where(:not(.open-on-click)):hover > .wp-block-navigation__submenu-container { - visibility: visible; - overflow: visible; - opacity: 1; - width: auto; - height: auto; - min-width: 200px; +.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true]~.wp-block-navigation__submenu-container,.wp-block-navigation .has-child:not(.open-on-click):hover>.wp-block-navigation__submenu-container,.wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within>.wp-block-navigation__submenu-container{ + height:auto; + min-width:200px; + opacity:1; + overflow:visible; + visibility:visible; + width:auto; +} + +.wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container{ + right:0; + top:100%; } -.wp-block-navigation .has-child:where(: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; +@media (min-width:782px){ + .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{ + right:100%; + top:0; + } } -.wp-block-navigation .has-child .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; + +.wp-block-navigation-submenu{ + display:flex; + position:relative; +} +.wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg{ + stroke:currentColor; } -.wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container { - right: 0; - top: 100%; +button.wp-block-navigation-item__content{ + background-color:initial; + border:none; + color:currentColor; + font-family:inherit; + font-size:inherit; + font-style:inherit; + font-weight:inherit; + letter-spacing:inherit; + line-height:inherit; + text-align:right; + text-transform:inherit; +} + +.wp-block-navigation-submenu__toggle{ + cursor:pointer; +} + +.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle{ + padding-left:.85em; + padding-right:0; +} +.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle+.wp-block-navigation__submenu-icon{ + margin-right:-.6em; + pointer-events:none; } -@media (min-width: 782px) { - .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container { - right: 100%; - top: 0; + +.wp-block-navigation-item.open-on-click button.wp-block-navigation-item__content:not(.wp-block-navigation-submenu__toggle){ + padding:0; +} +.wp-block-navigation .wp-block-page-list,.wp-block-navigation__container,.wp-block-navigation__responsive-close,.wp-block-navigation__responsive-container,.wp-block-navigation__responsive-container-content,.wp-block-navigation__responsive-dialog{ + gap:inherit; +} +:where(.wp-block-navigation.has-background .wp-block-navigation-item a:not(.wp-element-button)),:where(.wp-block-navigation.has-background .wp-block-navigation-submenu a:not(.wp-element-button)){ + padding:.5em 1em; +} + +:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:not(.wp-element-button)),:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu a:not(.wp-element-button)),:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu button.wp-block-navigation-item__content),:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-pages-list__item button.wp-block-navigation-item__content){ + padding:.5em 1em; +} +.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-right .wp-block-page-list>.has-child .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between .wp-block-page-list>.has-child:last-child .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between>.wp-block-navigation__container>.has-child:last-child .wp-block-navigation__submenu-container{ + left:0; + right:auto; +} +.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-right .wp-block-page-list>.has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between .wp-block-page-list>.has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between>.wp-block-navigation__container>.has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{ + left:-1px; + right:-1px; +} +@media (min-width:782px){ + .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-right .wp-block-page-list>.has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between .wp-block-page-list>.has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,.wp-block-navigation.items-justified-space-between>.wp-block-navigation__container>.has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container{ + left:100%; + right:auto; } } -.wp-block-navigation-submenu { - position: relative; - display: flex; +.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container{ + background-color:#fff; + border:1px solid #00000026; } -.wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg { - stroke: currentColor; + +.wp-block-navigation.has-background .wp-block-navigation__submenu-container{ + background-color:inherit; +} + +.wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container{ + color:#000; } -button.wp-block-navigation-item__content { - background-color: transparent; - border: none; - color: currentColor; - font-size: inherit; - font-family: inherit; - line-height: inherit; - font-style: inherit; - font-weight: inherit; - text-transform: inherit; - text-align: right; +.wp-block-navigation__container{ + align-items:var(--navigation-layout-align, initial); + display:flex; + flex-direction:var(--navigation-layout-direction, initial); + flex-wrap:var(--navigation-layout-wrap, wrap); + justify-content:var(--navigation-layout-justify, initial); + list-style:none; + margin:0; + padding-right:0; } - -.wp-block-navigation-submenu__toggle { - cursor: pointer; -} - -.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle { - padding-left: 0.85em; -} -.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-icon { - margin-right: -0.6em; - pointer-events: none; +.wp-block-navigation__container .is-responsive{ + display:none; } -/** - * Margins - */ -.wp-block-navigation__responsive-container, -.wp-block-navigation__responsive-close, -.wp-block-navigation__responsive-dialog, -.wp-block-navigation, -.wp-block-navigation .wp-block-page-list, -.wp-block-navigation__container, -.wp-block-navigation__responsive-container-content { - gap: inherit; +.wp-block-navigation__container:only-child,.wp-block-page-list:only-child{ + flex-grow:1; +} +@keyframes overlay-menu__fade-in-animation{ + 0%{ + opacity:0; + transform:translateY(.5em); + } + to{ + opacity:1; + transform:translateY(0); + } +} +.wp-block-navigation__responsive-container{ + bottom:0; + display:none; + left:0; + position:fixed; + right:0; + top:0; +} +.wp-block-navigation__responsive-container :where(.wp-block-navigation-item a){ + color:inherit; } - -.wp-block-navigation:where(.has-background), -.wp-block-navigation:where(.has-background) .wp-block-navigation .wp-block-page-list, -.wp-block-navigation:where(.has-background) .wp-block-navigation__container { - gap: inherit; +.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content{ + align-items:var(--navigation-layout-align, initial); + display:flex; + flex-direction:var(--navigation-layout-direction, initial); + flex-wrap:var(--navigation-layout-wrap, wrap); + justify-content:var(--navigation-layout-justify, initial); +} +.wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open){ + background-color:inherit !important; + color:inherit !important; } - -/** - * Paddings - */ -.wp-block-navigation:where(.has-background) .wp-block-navigation-item__content { - padding: 0.5em 1em; +.wp-block-navigation__responsive-container.is-menu-open{ + animation:overlay-menu__fade-in-animation .1s ease-out; + animation-fill-mode:forwards; + background-color:inherit; + display:flex; + flex-direction:column; + overflow:auto; + padding:clamp(1rem, var(--wp--style--root--padding-top), 20rem) clamp(1rem, var(--wp--style--root--padding-left), 20em) clamp(1rem, var(--wp--style--root--padding-bottom), 20rem) clamp(1rem, var(--wp--style--root--padding-right), 20rem); + z-index:100000; +} +@media (prefers-reduced-motion:reduce){ + .wp-block-navigation__responsive-container.is-menu-open{ + animation-delay:0s; + animation-duration:1ms; + } } - -.wp-block-navigation :where(.wp-block-navigation__submenu-container) .wp-block-navigation-item__content { - padding: 0.5em 1em; +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{ + align-items:var(--navigation-layout-justification-setting, inherit); + display:flex; + flex-direction:column; + flex-wrap:nowrap; + overflow:visible; + padding-top:calc(2rem + 24px); +} +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list{ + justify-content:flex-start; +} +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon{ + display:none; } - -/** - * Justifications. - */ -.wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .wp-block-navigation__submenu-container, -.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .wp-block-navigation__submenu-container, -.wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation__submenu-container, -.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container { - right: auto; - left: 0; +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container{ + border:none; + height:auto; + min-width:200px; + opacity:1; + overflow:initial; + padding-left:2rem; + padding-right:2rem; + position:static; + visibility:visible; + width:auto; +} +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container{ + gap:inherit; } -.wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, -.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, -.wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, -.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container { - right: -1px; - left: -1px; +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container{ + padding-top:var(--wp--style--block-gap, 2em); +} +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content{ + padding:0; +} +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list{ + align-items:var(--navigation-layout-justification-setting, initial); + display:flex; + flex-direction:column; +} +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list{ + background:#0000 !important; + color:inherit !important; } -@media (min-width: 782px) { - .wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, -.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, -.wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, -.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container { - right: auto; - left: 100%; +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container{ + left:auto; + right:auto; +} +@media (min-width:600px){ + .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){ + background-color:inherit; + display:block; + position:relative; + width:100%; + z-index:auto; + } + .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close{ + display:none; + } + .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container{ + right:0; } } -.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container { - background-color: #fff; - color: #000; - border: 1px solid rgba(0, 0, 0, 0.15); +.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open{ + background-color:#fff; } -.wp-block-navigation__container { - display: flex; - flex-wrap: var(--navigation-layout-wrap, wrap); - flex-direction: var(--navigation-layout-direction, initial); - justify-content: var(--navigation-layout-justify, initial); - align-items: var(--navigation-layout-align, initial); - list-style: none; - margin: 0; - padding-right: 0; -} -.wp-block-navigation__container .is-responsive { - display: none; +.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open{ + color:#000; } -.wp-block-navigation__container:only-child, -.wp-block-page-list:only-child { - flex-grow: 1; +.wp-block-navigation__toggle_button_label{ + font-size:1rem; + font-weight:700; } -/** - * Mobile menu. - */ -.wp-block-navigation__responsive-container { - display: none; - position: fixed; - top: 0; - right: 0; - left: 0; - bottom: 0; -} -.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content { - display: flex; - flex-wrap: var(--navigation-layout-wrap, wrap); - flex-direction: var(--navigation-layout-direction, initial); - justify-content: var(--navigation-layout-justify, initial); - align-items: var(--navigation-layout-align, initial); -} -.wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open) { - color: inherit !important; - background-color: inherit !important; -} -.wp-block-navigation__responsive-container.is-menu-open { - display: flex; - flex-direction: column; - background-color: inherit; - padding: 2rem; - overflow: auto; - z-index: 100000; -} -.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { - padding-top: calc(2rem + 24px); - overflow: visible; - display: flex; - flex-direction: column; - flex-wrap: nowrap; - align-items: var(--navigation-layout-justification-setting, inherit); -} -.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content, -.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list, -.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container { - justify-content: flex-start; -} -.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon { - display: none; +.wp-block-navigation__responsive-container-close,.wp-block-navigation__responsive-container-open{ + background:#0000; + border:none; + color:currentColor; + cursor:pointer; + margin:0; + padding:0; + text-transform:inherit; + vertical-align:middle; } -.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .submenu-container, -.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container { - opacity: 1; - visibility: visible; - height: auto; - width: auto; - overflow: initial; - min-width: 200px; - position: static; - border: none; - padding-right: 2rem; - padding-left: 2rem; -} -.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container, -.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container { - gap: inherit; -} -.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container { - padding-top: var(--wp--style--block-gap, 2em); -} -.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content { - padding: 0; +.wp-block-navigation__responsive-container-close svg,.wp-block-navigation__responsive-container-open svg{ + fill:currentColor; + display:block; + height:24px; + pointer-events:none; + width:24px; } -.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container, -.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item, -.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list { - display: flex; - flex-direction: column; - align-items: var(--navigation-layout-justification-setting, initial); -} -.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container, -.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item, -.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list { - color: inherit !important; - background: transparent !important; + +.wp-block-navigation__responsive-container-open{ + display:flex; } -.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container { - left: auto; - right: auto; +.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open{ + font-family:inherit; + font-size:inherit; + font-weight:inherit; } -@media (min-width: 600px) { - .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { - display: block; - width: 100%; - position: relative; - z-index: auto; - background-color: inherit; - } - .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close { - display: none; - } - .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container { - right: 0; +@media (min-width:600px){ + .wp-block-navigation__responsive-container-open:not(.always-shown){ + display:none; } } -.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { - background-color: #fff; - color: #000; +.wp-block-navigation__responsive-container-close{ + left:0; + position:absolute; + top:0; + z-index:2; } - -.wp-block-navigation__toggle_button_label { - font-size: 1rem; - font-weight: bold; +.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close{ + font-family:inherit; + font-size:inherit; + font-weight:inherit; } -.wp-block-navigation__responsive-container-open, -.wp-block-navigation__responsive-container-close { - vertical-align: middle; - cursor: pointer; - color: currentColor; - background: transparent; - border: none; - margin: 0; - padding: 0; +.wp-block-navigation__responsive-close{ + width:100%; } -.wp-block-navigation__responsive-container-open svg, -.wp-block-navigation__responsive-container-close svg { - fill: currentColor; - pointer-events: none; - display: block; - width: 24px; - height: 24px; +.has-modal-open .wp-block-navigation__responsive-close{ + margin-left:auto; + margin-right:auto; + max-width:var(--wp--style--global--wide-size, 100%); +} +.wp-block-navigation__responsive-close:focus{ + outline:none; } -.wp-block-navigation__responsive-container-open { - display: flex; +.is-menu-open .wp-block-navigation__responsive-close,.is-menu-open .wp-block-navigation__responsive-container-content,.is-menu-open .wp-block-navigation__responsive-dialog{ + box-sizing:border-box; +} + +.wp-block-navigation__responsive-dialog{ + position:relative; } -@media (min-width: 600px) { - .wp-block-navigation__responsive-container-open:not(.always-shown) { - display: none; + +.has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog{ + margin-top:46px; +} +@media (min-width:782px){ + .has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog{ + margin-top:32px; } } -.wp-block-navigation__responsive-container-close { - position: absolute; - top: 0; - left: 0; - z-index: 2; -} - -.wp-block-navigation__responsive-close { - width: 100%; -} -.wp-block-navigation__responsive-close:focus { - outline: none; -} - -.is-menu-open .wp-block-navigation__responsive-close, -.is-menu-open .wp-block-navigation__responsive-dialog, -.is-menu-open .wp-block-navigation__responsive-container-content { - box-sizing: border-box; -} - -.wp-block-navigation__responsive-dialog { - position: relative; -} - -html.has-modal-open { - overflow: hidden; +html.has-modal-open{ + overflow:hidden; } \ No newline at end of file