assets/less/site/menu.less
.menu {
.fixed;
top: 0;
left: 0;
width: 260px;
height: calc(100vh);
background: @white;
border-right: 1px solid @lightBlue;
}
.menu-wrap {
.absolute;
top: 105px;
bottom: 0;
overflow: hidden;
width: 100%;
}
.menu-level {
.absolute;
top: 0;
left: 0;
visibility: visible;
overflow: hidden;
overflow-y: scroll;
width: ~"calc(100% + 30px)";
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
}
.menu-level:focus {
outline: none;
}
.menu-item {
.block;
width: ~"calc(100% - 15px)"
}
.menu-link {
.relative;
.block;
color: @darkBlue;
font-size: 16px;
font-weight: 500;
padding: 0.5em 2.5em 0.5em 16%;
-webkit-transition: color 0.1s;
transition: color 0.1s;
i {
width: 28px;
text-align: center;
}
}
.menu-link.active {
color: @baseColor;
}
.menu-link:hover,
.menu-link:focus,
.menu-link[data-submenu]:hover::after,
.menu-link[data-submenu]:focus::after {
color: @baseColor;
text-decoration: none;
}