menu {
height: 100vh;
}
@include media-breakpoint-down(lg) {
#menu { width: 200px; left: -200px; position: fixed; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all .3s ease-in; transition: all .3s ease-in; } body.open #menu { left: 0; } /* MAIN PAGE */ .page-wrap { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all .3s ease-in; transition: all .3s ease-in; } body.open .page-wrap { margin-left: 200px; }
}
.menu-toggle–btn-container {
position: absolute; left: 15px; z-index: 1; background: transparent; margin: 0; padding: 0; .open { display: none; @include media-breakpoint-down(lg) { display: block; } } .close { display: none; }
}
.open .menu-toggle {
position: fixed !important; &.open { display: none; } &.close { display: block; }
}
.menu-separator {
width: 60%; opacity: 0.1;
}
light, dark {
display: block; cursor: pointer; &:hover { color: inherit; }
}
light {
display: none;
}
- data-theme=“dark”
-
{
#light { display: block; } #dark { display: none; }
}