@import “variables”; @import “mixins”;
nav-drawer {
display: none; position: relative; @include smartphone() { display: flex; align-items: flex-end; }
}
.nav-unshown {
display: none;
}
nav-open {
display: inline-block; width: 30px; height: 22px; vertical-align: middle;
}
nav-open span, nav-open span:before, nav-open span:after {
position: absolute; height: 3px; width: 25px; border-radius: 3px; background: #fff; display: block; content: ""; cursor: pointer;
} nav-open span:before {
bottom: -8px;
} nav-open span:after {
bottom: -16px;
}
nav-close {
display: none; position: fixed; z-index: 99; top: 0; left: 0; width: 100%; height: 100%; background: black; opacity: 0; transition: 0.3s ease-in-out;
}
nav-content {
overflow: auto; position: fixed; top: 0; left: 0; z-index: 9999; width: 90%; max-width: 330px; height: 100%; background: $color-background; transition: 0.3s ease-in-out; -webkit-transform: translateX(-105%); transform: translateX(-105%);
}
nav-input:checked ~ nav-close {
display: block; opacity: 0.5;
}
nav-input:checked ~ nav-content {
-webkit-transform: translateX(0%); transform: translateX(0%); box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15);
}