mirror of
https://github.com/rancher/rancher-docs.git
synced 2026-05-13 16:43:22 +00:00
Vincent Fiduccia
137 lines
3.1 KiB
SCSS
137 lines
3.1 KiB
SCSS
/*!
|
|
* 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 */
|