/** * 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; } .wp-block-navigation ul { margin-top: 0; margin-bottom: 0; margin-left: 0; padding-left: 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-item__content { color: inherit; display: block; padding: 0; } .wp-block-navigation[style*=text-decoration] .wp-block-navigation-item, .wp-block-navigation[style*=text-decoration] .wp-block-navigation__submenu-container { text-decoration: inherit; } .wp-block-navigation[style*=text-decoration] a { text-decoration: inherit; } .wp-block-navigation[style*=text-decoration] a:focus, .wp-block-navigation[style*=text-decoration] a:active { text-decoration: inherit; } .wp-block-navigation:not([style*=text-decoration]) a { text-decoration: none; } .wp-block-navigation:not([style*=text-decoration]) a:focus, .wp-block-navigation:not([style*=text-decoration]) a:active { text-decoration: none; } .wp-block-navigation .wp-block-navigation__submenu-icon { align-self: center; height: inherit; line-height: 0; margin-left: 6px; padding: 0; background-color: inherit; color: currentColor; border: none; } .wp-block-navigation .wp-block-navigation__submenu-icon svg { display: inline-block; stroke: currentColor; } .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; left: -1px; top: 100%; } .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; white-space: nowrap; } .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-right: 0; margin-left: auto; } .wp-block-navigation .has-child :where(.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 { left: 100%; top: -1px; } .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-container::before { content: ""; position: absolute; right: 100%; height: 100%; display: block; width: 0.5em; background: transparent; } .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:where(:not(.open-on-click)):hover > .wp-block-navigation__submenu-container { visibility: visible; opacity: 1; width: auto; height: auto; min-width: 200px; } .wp-block-navigation .has-child:where(:not(.open-on-click):not(.open-on-hover-click)):focus-within > .wp-block-navigation__submenu-container { visibility: 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 { visibility: visible; opacity: 1; width: auto; height: auto; min-width: 200px; } .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container { left: 0; top: 100%; } @media (min-width: 782px) { .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container { left: 100%; top: 0; } } /** * Margins */ .wp-block-navigation, .wp-block-navigation .wp-block-page-list, .wp-block-navigation__container, .wp-block-navigation__responsive-container-content { gap: var(--wp--style--block-gap, 2em); } .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: var(--wp--style--block-gap, 0.5em); } /** * Paddings */ .wp-block-navigation:where(.has-background) .wp-block-navigation-item__content { padding: 0.5em 1em; } .wp-block-navigation :where(.wp-block-navigation__submenu-container) .wp-block-navigation-item__content { padding: 0.5em 1em; } /** * Justifications. */ @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.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 { left: auto; right: 0; } .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 { left: auto; right: 100%; } } .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__container { display: flex; flex-wrap: var(--layout-wrap, wrap); flex-direction: var(--layout-direction, initial); justify-content: var(--layout-justify, initial); align-items: var(--layout-align, initial); list-style: none; margin: 0; padding-left: 0; } .wp-block-navigation__container .is-responsive { display: none; } /** * Mobile menu. */ .wp-block-navigation__responsive-container { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; } .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content { display: flex; flex-wrap: var(--layout-wrap, wrap); flex-direction: var(--layout-direction, initial); justify-content: var(--layout-justify, initial); align-items: var(--layout-align, initial); } .wp-block-navigation__responsive-container.is-menu-open { display: flex; flex-direction: column; overflow: auto; z-index: 100000; padding: 72px 24px 24px 24px; background-color: inherit; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { display: flex; flex-direction: column; align-items: var(--layout-justification-setting, inherit); justify-content: flex-start; overflow: auto; padding: 0; } .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.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-left: 32px; padding-right: 32px; } .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: var(--wp--style--block-gap, 2em); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation__container, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation__submenu-container, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation__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__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(--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 { color: inherit !important; background: transparent !important; } .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: auto; left: auto; } @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: 2; 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 { left: 0; } } .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { background-color: #fff; color: #000; } .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-container-open svg, .wp-block-navigation__responsive-container-close svg { fill: currentColor; pointer-events: none; display: block; width: 24px; height: 24px; } .wp-block-navigation__responsive-container-open { display: flex; } @media (min-width: 600px) { .wp-block-navigation__responsive-container-open:not(.always-shown) { display: none; } } .wp-block-navigation__responsive-container-close { position: absolute; top: 24px; right: 24px; z-index: 2; } .wp-block-navigation__responsive-close { width: 100%; } .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 { width: 100%; height: 100%; } html.has-modal-open { overflow: hidden; }