mirror of
https://github.com/WordPress/WordPress.git
synced 2024-12-29 04:28:07 +01:00
2818d14fa8
Props munyagu, mukesh27, activecoder. Fixes #52176. Built from https://develop.svn.wordpress.org/trunk@49914 git-svn-id: http://core.svn.wordpress.org/trunk@49613 1a063a9b-81f0-0310-95a4-ce76da25c4cd
534 lines
10 KiB
SCSS
534 lines
10 KiB
SCSS
|
|
// Navigation
|
|
|
|
// Mobile menu toggles
|
|
.menu-button-container {
|
|
display: none;
|
|
justify-content: space-between;
|
|
position: absolute;
|
|
right: 0;
|
|
padding-top: calc(0.5 * var(--global--spacing-vertical));
|
|
padding-bottom: calc(0.25 * var(--global--spacing-vertical));
|
|
|
|
#primary-mobile-menu {
|
|
margin-left: auto;
|
|
padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(0.5 * var(--button--padding-horizontal));
|
|
}
|
|
|
|
@include media(mobile-only) {
|
|
display: flex;
|
|
}
|
|
|
|
// Override specificty from default button styles.
|
|
.button.button {
|
|
display: flex;
|
|
font-size: var(--primary-nav--font-size-button);
|
|
font-weight: var(--primary-nav--font-weight-button);
|
|
background-color: transparent;
|
|
border: none;
|
|
color: var(--primary-nav--color-link);
|
|
|
|
.dropdown-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.svg-icon {
|
|
margin-left: calc(0.25 * var(--global--spacing-unit));
|
|
}
|
|
|
|
// Menu icon is off-center vertically to prevent blurry pixels.
|
|
&.open .svg-icon {
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
|
|
&.close {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&[aria-expanded*="true"] {
|
|
|
|
.dropdown-icon {
|
|
|
|
&.open {
|
|
display: none;
|
|
}
|
|
|
|
&.close {
|
|
display: flex;
|
|
|
|
.has-logo.has-title-and-tagline & {
|
|
animation-name: twentytwentyone-close-button-transition;
|
|
animation-duration: 0.3s;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// When the menu is open, hide the close button and show the hide button.
|
|
.primary-navigation-open & {
|
|
width: 100%;
|
|
z-index: 500;
|
|
background-color: var(--global--color-background);
|
|
|
|
#primary-mobile-menu {
|
|
position: static;
|
|
}
|
|
}
|
|
}
|
|
|
|
.primary-navigation {
|
|
position: absolute;
|
|
top: var(--global--admin-bar--height);
|
|
right: 0;
|
|
color: var(--primary-nav--color-text);
|
|
font-size: var(--primary-nav--font-size);
|
|
line-height: 1.15;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
|
|
// Mobile menu closed
|
|
> .primary-menu-container {
|
|
position: fixed;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
// Height of the menu-button-container using font size, line height, and total padding, plus 5px so the focus of the first item is visible.
|
|
padding-top: calc(var(--button--line-height) * var(--primary-nav--font-size-button) + 42px + 5px);
|
|
padding-left: var(--global--spacing-unit);
|
|
padding-right: var(--global--spacing-unit);
|
|
padding-bottom: var(--global--spacing-horizontal);
|
|
background-color: var(--global--color-background);
|
|
transition: all .15s ease-in-out;
|
|
transform: translateY(var(--global--spacing-vertical));
|
|
|
|
@include media(mobile-only) {
|
|
height: 100vh;
|
|
z-index: 499;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
border: 2px solid transparent;
|
|
|
|
.has-logo.has-title-and-tagline & {
|
|
position: fixed;
|
|
transform: translateY(0) translateX(100%);
|
|
}
|
|
|
|
.admin-bar .has-logo.has-title-and-tagline & {
|
|
top: var(--global--admin-bar--height);
|
|
}
|
|
|
|
.admin-bar & {
|
|
height: calc(100vh - var(--global--admin-bar--height));
|
|
}
|
|
|
|
&:focus {
|
|
border: 2px solid var(--global--color-primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Mobile menu open
|
|
.primary-navigation-open & {
|
|
|
|
@include media(mobile-only) {
|
|
width: 100%;
|
|
position: fixed;
|
|
z-index: 2; // To be greater than the cover block and embeds.
|
|
}
|
|
|
|
> .primary-menu-container {
|
|
position: absolute;
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.primary-navigation-open .has-logo.has-title-and-tagline & {
|
|
@include media(mobile-only) {
|
|
|
|
> .primary-menu-container {
|
|
transform: translateX(0) translateY(0);
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media(mobile) {
|
|
position: relative;
|
|
margin-left: auto;
|
|
|
|
// Hide Mobile menu on desktop
|
|
> .primary-menu-container {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
position: relative;
|
|
padding: 0;
|
|
background-color: transparent;
|
|
overflow: initial;
|
|
transform: none;
|
|
}
|
|
|
|
// Hide mobile menu toggle
|
|
#toggle-menu {
|
|
display: none;
|
|
}
|
|
|
|
// Hide sub-sub-menus
|
|
> .primary-menu-container ul > li .sub-menu-toggle[aria-expanded="false"] ~ ul {
|
|
display: none;
|
|
}
|
|
|
|
// Don't adjust position when logged-in
|
|
.admin-bar & {
|
|
top: initial;
|
|
|
|
> .primary-menu-container {
|
|
top: initial;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Menu list wrapper
|
|
> div > .menu-wrapper {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
list-style: none;
|
|
margin: 0;
|
|
max-width: none;
|
|
padding-left: 0;
|
|
position: relative;
|
|
|
|
@include media(mobile-only) {
|
|
padding-bottom: 100px;
|
|
|
|
ul {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
li {
|
|
display: block;
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
@include media(mobile) {
|
|
margin: 0;
|
|
width: inherit;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Sub-menu buttons
|
|
.sub-menu-toggle {
|
|
display: flex;
|
|
height: calc(2 * var(--primary-nav--padding) + 1.15em + 1px);
|
|
width: 44px;
|
|
padding: 0;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: transparent;
|
|
color: currentColor;
|
|
border: none;
|
|
|
|
&:focus {
|
|
outline: 2px solid var(--wp--style--color--link, var(--global--color-primary));
|
|
}
|
|
|
|
@include media(mobile-only) {
|
|
display: none;
|
|
}
|
|
|
|
.icon-plus,
|
|
.icon-minus {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
svg {
|
|
margin-top: -1px;
|
|
}
|
|
}
|
|
|
|
.icon-minus {
|
|
display: none;
|
|
}
|
|
|
|
// When the sub-menu is open, display the minus icon
|
|
&[aria-expanded="true"] {
|
|
|
|
.icon-minus {
|
|
display: flex;
|
|
}
|
|
|
|
.icon-plus {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Sub-menus Flyout
|
|
> li > .sub-menu {
|
|
|
|
position: relative;
|
|
|
|
@include media(mobile) {
|
|
left: 0;
|
|
margin: 0;
|
|
min-width: max-content;
|
|
position: absolute;
|
|
top: 100%;
|
|
padding-top: 3px;
|
|
transition: all 0.5s ease;
|
|
z-index: 88888;
|
|
|
|
&:before,
|
|
&:after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
width: 0;
|
|
top: -10px;
|
|
left: var(--global--spacing-horizontal);
|
|
border-style: solid;
|
|
border-color: var(--primary-nav--border-color) transparent;
|
|
border-width: 0 7px 10px 7px;
|
|
}
|
|
|
|
&:after {
|
|
top: -9px;
|
|
border-color: var(--global--color-background) transparent;
|
|
}
|
|
|
|
li {
|
|
background: var(--global--color-background);
|
|
}
|
|
|
|
&.submenu-reposition-left {
|
|
|
|
/* rtl:ignore */
|
|
left: 0;
|
|
|
|
/* rtl:ignore */
|
|
right: auto;
|
|
|
|
&:before,
|
|
&:after {
|
|
|
|
/* rtl:ignore */
|
|
left: var(--global--spacing-horizontal);
|
|
|
|
/* rtl:ignore */
|
|
right: auto;
|
|
}
|
|
}
|
|
|
|
&.submenu-reposition-right {
|
|
|
|
/* rtl:ignore */
|
|
right: 0;
|
|
|
|
/* rtl:ignore */
|
|
left: auto;
|
|
|
|
&:before,
|
|
&:after {
|
|
|
|
/* rtl:ignore */
|
|
left: auto;
|
|
|
|
/* rtl:ignore */
|
|
right: var(--global--spacing-horizontal);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Top-level Item Link Colors
|
|
.primary-menu > .menu-item:hover > a {
|
|
color: var(--primary-nav--color-link-hover);
|
|
}
|
|
|
|
.primary-menu-container {
|
|
@include media(mobile) {
|
|
// Better align with the site title when the menu wraps.
|
|
margin-right: calc(0px - var(--primary-nav--padding));
|
|
margin-left: calc(0px - var(--primary-nav--padding));
|
|
|
|
// Top-level Menu Item
|
|
> ul > .menu-item {
|
|
display: flex;
|
|
|
|
> a {
|
|
padding-left: var(--primary-nav--padding);
|
|
padding-right: var(--primary-nav--padding);
|
|
|
|
+ .sub-menu-toggle {
|
|
margin-left: calc(5px - var(--primary-nav--padding));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Menu Item Link
|
|
a {
|
|
display: block;
|
|
font-family: var(--primary-nav--font-family-mobile);
|
|
font-size: var(--primary-nav--font-size-mobile);
|
|
font-weight: var(--primary-nav--font-weight);
|
|
padding: var(--primary-nav--padding) 0;
|
|
text-decoration: none;
|
|
|
|
@include media(mobile) {
|
|
display: block;
|
|
font-family: var(--primary-nav--font-family);
|
|
font-size: var(--primary-nav--font-size);
|
|
font-weight: var(--primary-nav--font-weight);
|
|
}
|
|
|
|
+ svg {
|
|
fill: var(--primary-nav--color-text);
|
|
}
|
|
|
|
&:hover,
|
|
&:link,
|
|
&:visited {
|
|
color: var(--primary-nav--color-link-hover);
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
text-decoration-style: dotted;
|
|
}
|
|
|
|
&:focus {
|
|
position: relative;
|
|
z-index: 99999; // Ensure focus styles appear above absolute positioned elements
|
|
outline-offset: 0;
|
|
text-decoration-thickness: 2px;
|
|
}
|
|
}
|
|
|
|
.current-menu-item > a:first-child,
|
|
.current_page_item > a:first-child {
|
|
text-decoration: underline;
|
|
text-decoration-style: solid;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
text-decoration-style: dotted;
|
|
}
|
|
}
|
|
|
|
// Sub-menu depth indicators + text styles
|
|
.sub-menu {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
margin-left: var(--primary-nav--padding);
|
|
border: 1px solid var(--primary-nav--border-color);
|
|
|
|
.sub-menu {
|
|
border: none;
|
|
}
|
|
|
|
// Sub-menu items om wide screens.
|
|
@include media(mobile) {
|
|
|
|
// For nested sub-menus, don't duplicate the padding
|
|
> .menu-item > .sub-menu {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.menu-item {
|
|
|
|
@include media(mobile-only) {
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
}
|
|
|
|
> a {
|
|
padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding);
|
|
display: block;
|
|
font-size: var(--primary-nav--font-size-sub-menu-mobile);
|
|
font-style: var(--primary-nav--font-style-sub-menu-mobile);
|
|
|
|
@include media(mobile) {
|
|
font-size: var(--primary-nav--font-size-sub-menu);
|
|
font-style: var(--primary-nav--font-style);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Show top-level sub-menu indicators above mobile-breakpoint-only
|
|
.menu-item-has-children {
|
|
|
|
> .svg-icon {
|
|
display: none;
|
|
}
|
|
|
|
@include media(mobile) {
|
|
|
|
> .svg-icon {
|
|
display: inline-block;
|
|
height: 100%;
|
|
}
|
|
|
|
.sub-menu .svg-icon {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.menu-item-description {
|
|
display: block;
|
|
clear: both;
|
|
font-size: var(--global--font-size-xs);
|
|
text-transform: none;
|
|
line-height: 1.7;
|
|
|
|
> span {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Keep the menu pinned to the top when the menu is open.
|
|
@include media(mobile-only) {
|
|
|
|
.lock-scrolling .site {
|
|
position: fixed;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
// Close button animation for when a custom logo is present.
|
|
@keyframes twentytwentyone-close-button-transition {
|
|
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|