.menu-toggle {
background-color: transparent;
border: 1px solid transparent;
box-shadow: none;
color: inherit;
cursor: pointer;
padding: 0.5em;
display: flex;
align-items: center;
font-size: 1em;
line-height: 1;
}
.menu-toggle:focus {
outline: none;
border: 1px dashed rgba(0, 0, 0, 0.25);
}
.menu-toggle:active,
.menu-toggle:hover {
box-shadow: none;
background-color: rgba(0, 0, 0, 0.125);
}
.menu-toggle .text {
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
margin-right: 0.5em;
}
.menu-toggle-box {
width: 32px;
height: 32px;
display: inline-block;
position: relative;
}
.menu-toggle-inner {
display: block;
top: 50%;
margin-top: -3px;
transition-duration: 0.1s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.menu-toggle.toggled .menu-toggle-inner {
transform: rotate(45deg);
transition-delay: 0.14s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu-toggle-inner,
.menu-toggle-inner::before,
.menu-toggle-inner::after {
width: 32px;
height: 5px;
background-color: black;
border-radius: 3px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.menu-toggle-inner::before,
.menu-toggle-inner::after {
content: '';
display: block;
}
.menu-toggle-inner::before {
transition: top 0.1s 0.14s ease, opacity 0.1s ease;
top: -10px;
}
.menu-toggle.toggled .menu-toggle-inner::before {
top: 0;
opacity: 0;
transition: top 0.1s ease, opacity 0.1s 0.14s ease;
}
.menu-toggle-inner::after {
bottom: -10px;
transition: bottom 0.1s 0.14s ease,
transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.menu-toggle.toggled .menu-toggle-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition-property: bottom, transform;
transition-duration: 0.1s, 0.1s, 0.1s;
transition-timing-function: ease, cubic-bezier(0.215, 0.61, 0.355, 1),
cubic-bezier(0.215, 0.61, 0.355, 1);
transition-delay: initial, 0.14s, 0.14s;
transition: bottom 0.1s ease,
transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
}.menu-item-has-children,
.page_item_has_children {
display: flex;
flex-flow: wrap;
}
.menu-item-has-children > a,
.page_item_has_children > a {
flex: 1;
}
.sub-menu,
.children {
background: rgba(255, 255, 255, 0.1);
}
.sub-menu a,
.children a {
padding-left: 1em;
}
.sub-menu .sub-menu a,
.children .children a {
padding-left: 1.5em;
}
.sub-menu .sub-menu .sub-menu a,
.children .children .children a {
padding-left: 2em;
}
.menu-item-has-children > .sub-menu,
.page_item_has_children > .children {
width: 100%;
max-height: 0vh;
overflow: hidden;
transition: max-height 0.3s ease;
will-change: height;
}
.sub-menu-toggle {
color: #fff;
cursor: pointer;
padding: 0.5em 1em;
border: none;
border-left: 1px solid rgba(255, 255, 255, 0.1);
background: none;
border-radius: 0;
}
.sub-menu-toggle:hover {
background: #0081c5;
}
.sub-menu-toggle:focus,
.sub-menu-toggle:active {
border-left: 1px solid rgba(255, 255, 255, 0.1);
outline: none;
background: #0081c5;
}
.sub-menu-toggle::before {
content: '\2b';
}
.sub-menu-open > .sub-menu-toggle::before {
content: '\2212';
}
.menu-item:not(.menu-item-has-children) > .sub-menu-toggle,
.page_item:not(.page_item_has_children) > .sub-menu-toggle {
display: none;
}
.sub-menu-open > .sub-menu,
.sub-menu-open > .children {
max-height: 50vh;
}