WordPress/wp-content/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss

507 lines
8.4 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/** === Main menu === */
.main-navigation {
display: block;
margin-top: #{0.25 * $size__spacing-unit};
body.page & {
display: block;
}
> div {
display: inline;
}
/* Un-style buttons */
button {
display: inline-block;
border: none;
padding: 0;
margin: 0;
font-family: $font__heading;
font-weight: 700;
line-height: $font__line-height-heading;
text-decoration: none;
background: transparent;
color: inherit;
cursor: pointer;
transition:
background 250ms ease-in-out,
transform 150ms ease;
-webkit-appearance: none;
-moz-appearance: none;
&:hover,
&:focus {
background: transparent;
}
&:focus {
outline: 1px solid transparent;
outline-offset: -4px;
}
&:active {
transform: scale(0.99);
}
}
.main-menu {
display: inline-block;
margin: 0;
padding: 0;
> li {
color: $color__link;
display: inline;
position: relative;
> a {
font-weight: 700;
color: $color__link;
margin-right: #{0.5 * $size__spacing-unit};
+ svg {
margin-right: #{0.5 * $size__spacing-unit};
}
&:hover,
&:hover + svg {
color: $color__link-hover;
}
}
&.menu-item-has-children {
display: inline-block;
position: inherit;
@include media(tablet) {
position: relative;
}
> a {
margin-right: #{0.125 * $size__spacing-unit};
}
& > a,
.menu-item-has-children > a {
&:after {
content: "";
display: none;
}
}
.submenu-expand {
display: inline-block;
margin-right: #{0.25 * $size__spacing-unit};
/* Priority+ Menu */
&.main-menu-more-toggle {
position: relative;
height: 24px;
line-height: $font__line-height-heading;
width: 24px;
padding: 0;
margin-left: #{0.5 * $size__spacing-unit};
svg {
height: 24px;
width: 24px;
top: #{-0.125 * $size__spacing-unit};
vertical-align: text-bottom;
}
}
.wp-customizer-unloading &,
&.is-empty {
display: none;
}
svg {
position: relative;
top: 0.2rem;
}
}
}
&:last-child > a,
&:last-child.menu-item-has-children .submenu-expand {
margin-right: 0;
}
}
}
.sub-menu {
background-color: $color__link;
color: $color__background-body;
list-style: none;
padding-left: 0;
position: absolute;
opacity: 0;
left: -9999px;
z-index: 99999;
@include media(tablet) {
width: auto;
min-width: -moz-max-content;
min-width: -webkit-max-content;
min-width: max-content;
}
> li {
display: block;
float: none;
position: relative;
&.menu-item-has-children {
.submenu-expand {
display: inline-block;
position: absolute;
width: calc( 24px + #{$size__spacing-unit} );
right: 0;
top: calc( .125 * #{$size__spacing-unit} );
bottom: 0;
color: white;
line-height: 1;
padding: calc( .5 * #{$size__spacing-unit} );
svg {
top: 0;
}
}
.submenu-expand {
margin-right: 0;
}
@include media(tablet) {
.menu-item-has-children > a {
&:after {
content: "\203a";
}
}
}
}
> a,
> .menu-item-link-return {
color: $color__background-body;
display: block;
line-height: $font__line-height-heading;
text-shadow: none;
padding: calc( .5 * #{$size__spacing-unit} ) calc( 24px + #{$size__spacing-unit} ) calc( .5 * #{$size__spacing-unit} ) $size__spacing-unit;
white-space: nowrap;
&:hover,
&:focus {
background: $color__link-hover;
&:after {
background: $color__link-hover;
}
}
}
> .menu-item-link-return {
width: 100%;
font-size: $font__size_base;
font-weight: normal;
text-align: left;
}
> a:empty {
display: none;
}
&.mobile-parent-nav-menu-item {
display: none;
font-size: $font__size-sm;
font-weight: normal;
svg {
position: relative;
top: 0.2rem;
margin-right: calc( .25 * #{$size__spacing-unit} );
}
}
}
}
/*
* Sub-menu styles
*
* :focus-within needs its own selector so other similar
* selectors dont get ignored if a browser doesnt recognize it
*/
.main-menu .menu-item-has-children:not(.off-canvas):focus-within > .sub-menu {
display: block;
left: 0;
margin-top: 0;
opacity: 1;
width: auto;
min-width: 100%;
/* Non-mobile position */
@include media(tablet) {
display: block;
margin-top: 0;
opacity: 1;
position: absolute;
left: 0;
right: auto;
top: auto;
bottom: auto;
height: auto;
min-width: -moz-max-content;
min-width: -webkit-max-content;
min-width: max-content;
transform: none;
}
&.hidden-links {
left: 0;
width: 100%;
display: table;
position: absolute;
@include media(tablet) {
right: 0;
left: auto;
display: block;
width: max-content;
}
}
.submenu-expand {
display: none;
}
.sub-menu {
display: block;
margin-top: inherit;
position: relative;
width: 100%;
left: 0;
opacity: 1;
/* Non-mobile position */
@include media(tablet) {
float: none;
max-width: 100%;
}
}
/* Nested sub-menu dashes */
.sub-menu {
counter-reset: submenu;
}
.sub-menu > li > a::before {
font-family: $font__body;
font-weight: normal;
content: "\2013\00a0" counters(submenu, "\2013\00a0", none);
counter-increment: submenu
}
}
.main-menu .menu-item-has-children:not(.off-canvas):hover > .sub-menu,
.main-menu .menu-item-has-children:not(.off-canvas):focus > .sub-menu,
.main-menu .menu-item-has-children.is-focused:not(.off-canvas) > .sub-menu {
display: block;
left: 0;
margin-top: 0;
opacity: 1;
width: auto;
min-width: 100%;
/* Non-mobile position */
@include media(tablet) {
display: block;
float: none;
margin-top: 0;
opacity: 1;
position: absolute;
left: 0;
right: auto;
top: auto;
bottom: auto;
height: auto;
min-width: -moz-max-content;
min-width: -webkit-max-content;
min-width: max-content;
transform: none;
}
&.hidden-links {
left: 0;
width: 100%;
display: table;
position: absolute;
@include media(tablet) {
right: 0;
left: auto;
display: table;
width: max-content;
}
}
.submenu-expand {
display: none;
}
.sub-menu {
display: block;
margin-top: inherit;
position: relative;
width: 100%;
left: 0;
opacity: 1;
/* Non-mobile position */
@include media(tablet) {
float: none;
max-width: 100%;
}
}
/* Nested sub-menu dashes */
.sub-menu {
counter-reset: submenu;
}
.sub-menu > li > a::before {
font-family: $font__body;
font-weight: normal;
content: "\2013\00a0" counters(submenu, "\2013\00a0", none);
counter-increment: submenu
}
}
/**
* Fade-in animation for top-level submenus
*/
.main-menu > .menu-item-has-children:not(.off-canvas):hover > .sub-menu {
animation: fade_in 0.1s forwards;
}
/**
* Off-canvas touch device styles
*/
.main-menu .menu-item-has-children.off-canvas .sub-menu {
.submenu-expand .svg-icon {
transform: rotate(270deg);
}
.sub-menu {
opacity: 0;
position: absolute;
z-index: 0;
transform: translateX(-100%);
}
li:hover,
li:focus,
li > a:hover,
li > a:focus {
background-color: transparent;
}
> li > a,
> li > .menu-item-link-return {
white-space: inherit;
}
&.expanded-true {
display: table;
margin-top: 0;
opacity: 1;
padding-left: 0;
/* Mobile position */
left: 0;
top: 0;
right: 0;
bottom: 0;
position: fixed;
z-index: 100000; /* Make sure appears above mobile admin bar */
width: 100vw;
height: 100vh;
max-width: 100vw;
transform: translateX(+100%);
animation: slide_in_right 0.3s forwards;
> .mobile-parent-nav-menu-item {
display: block;
}
/* Prevent menu from being blocked by admin bar */
.admin-bar & {
top: 46px;
height: calc( 100vh - 46px );
.sub-menu.expanded-true {
top: 0;
}
/* WP core breakpoint */
@media only screen and ( min-width: 782px ) {
top: 32px;
height: calc( 100vh - 32px );
.sub-menu.expanded-true {
top: 0;
}
}
}
}
}
// Hide duplicate menu-more-link when re-loading a menu in the customizer
.main-menu-more {
&:nth-child(n+3) {
display: none;
}
}
}
/* Menu animation */
@keyframes slide_in_right {
100% {
transform: translateX(0%);
}
}
@keyframes fade_in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}