/*! * ml-stack-nav - v1.1.3 * Customizable, responsive, accessible, easy-to-use multi-level stack navigation menu with slide effect. * https://github.com/damianwajer/ml-stack-nav * * Author: Damian Wajer * License: MIT * * @preserve */ .ml-stack-nav-toggle { position: relative; display: inline-block; overflow: hidden; padding: 0; width: 26px; height: 22px; border: 0; background: none; color: #525261; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .ml-stack-nav-toggle__line { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 4px; border-radius: 9px; background: #525261; opacity: 1; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; -webkit-transform: rotate(0deg); transform: rotate(0deg); } .ml-stack-nav-toggle__line:nth-child(2) { top: 9px; } .ml-stack-nav-toggle__line:nth-child(3) { top: 18px; } .ml-stack-nav-toggle.is-active .ml-stack-nav-toggle__line:nth-child(1) { top: 9px; left: 50%; width: 0; } .ml-stack-nav-toggle.is-active .ml-stack-nav-toggle__line:nth-child(2) { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .ml-stack-nav-toggle.is-active .ml-stack-nav-toggle__line:nth-child(3) { top: 9px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .ml-stack-nav { position: absolute; right: 0; left: 0; z-index: -1; overflow: hidden; box-sizing: border-box; height: 100%; } .ml-stack-nav *, .ml-stack-nav *:after, .ml-stack-nav *:before { box-sizing: inherit; } .ml-stack-nav__menu { position: absolute; top: 0; right: 0; bottom: 0; left: 20px; z-index: 900; visibility: hidden; margin: 0; padding: 0; border: 1px solid #000; background-color: #fff; list-style-position: inside; -webkit-transition: visibility 0.3s, -webkit-transform 0.3s; transition: visibility 0.3s, -webkit-transform 0.3s; transition: transform 0.3s, visibility 0.3s; transition: transform 0.3s, visibility 0.3s, -webkit-transform 0.3s; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .ml-stack-nav > .ml-stack-nav__menu { left: 0; } .ml-stack-nav--slide-left .ml-stack-nav__menu { right: 20px; left: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .ml-stack-nav--slide-left > .ml-stack-nav__menu { right: 0; } .no-js .ml-stack-nav:target { position: static; visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .no-js .ml-stack-nav:target .ml-stack-nav__menu { position: static; visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .no-js .ml-stack-nav .ml-stack-nav__next, .no-js .ml-stack-nav .ml-stack-nav__back { display: none; } .is-open > .ml-stack-nav__menu { visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .is-active > .ml-stack-nav__menu { overflow-x: hidden; overflow-y: auto; } /*# sourceMappingURL=ml-stack-nav.css.map */