2023-07-27 23:23:46 +03:00
|
|
|
@import '../../src/utils/base';
|
|
|
|
@import '../../src/utils/mixins/vertical-align';
|
2018-08-14 21:28:46 +03:00
|
|
|
|
2018-06-15 22:49:25 +03:00
|
|
|
.aside-menu {
|
2020-12-15 19:57:24 +03:00
|
|
|
width: $asideMenuWidth;
|
2021-01-29 01:09:09 +03:00
|
|
|
background-color: var(--primary-color);
|
2022-05-11 23:32:17 +03:00
|
|
|
box-shadow: rgb(0 0 0 / .05) 0 8px 15px;
|
2018-08-14 21:28:46 +03:00
|
|
|
position: fixed !important;
|
|
|
|
padding-top: 13px;
|
2018-08-05 09:28:16 +03:00
|
|
|
padding-bottom: 10px;
|
2018-08-18 11:47:45 +03:00
|
|
|
top: $headerHeight;
|
2018-08-14 21:28:46 +03:00
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
display: block;
|
2018-08-14 21:46:01 +03:00
|
|
|
z-index: 1010;
|
2018-08-14 21:28:46 +03:00
|
|
|
overflow-x: hidden;
|
|
|
|
overflow-y: auto;
|
2018-08-05 09:28:16 +03:00
|
|
|
|
|
|
|
@media (min-width: $mdMin) {
|
|
|
|
padding: 30px 15px 15px;
|
|
|
|
}
|
2018-08-14 21:28:46 +03:00
|
|
|
|
|
|
|
@media (max-width: $smMax) {
|
|
|
|
transition: left 300ms;
|
2018-08-18 11:47:45 +03:00
|
|
|
top: $headerHeight - 3px;
|
2022-05-11 23:32:17 +03:00
|
|
|
box-shadow: -10px 0 50px 11px rgb(0 0 0 / .55);
|
2018-08-14 21:28:46 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.aside-menu--hidden {
|
|
|
|
@media (max-width: $smMax) {
|
2020-12-15 19:57:24 +03:00
|
|
|
left: -($asideMenuWidth + 35px);
|
2018-08-14 21:28:46 +03:00
|
|
|
}
|
2018-06-15 22:49:25 +03:00
|
|
|
}
|
2018-07-18 21:01:56 +03:00
|
|
|
|
|
|
|
.aside-menu__nav {
|
2018-08-14 21:46:01 +03:00
|
|
|
height: 100%;
|
2018-07-18 21:01:56 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
.aside-menu__item {
|
|
|
|
padding: 10px 20px;
|
|
|
|
margin: 0 -15px;
|
|
|
|
text-decoration: none !important;
|
|
|
|
cursor: pointer;
|
2020-12-15 19:57:24 +03:00
|
|
|
|
|
|
|
@media (max-width: $smMax) {
|
|
|
|
margin: 0;
|
|
|
|
}
|
2018-07-18 21:01:56 +03:00
|
|
|
}
|
2018-08-25 16:59:51 +03:00
|
|
|
|
2018-07-18 21:01:56 +03:00
|
|
|
.aside-menu__item:hover {
|
2021-01-29 01:09:09 +03:00
|
|
|
background-color: var(--secondary-color);
|
2018-07-18 21:01:56 +03:00
|
|
|
}
|
|
|
|
|
2021-02-16 01:45:13 +03:00
|
|
|
.aside-menu__item--selected,
|
2018-07-18 21:01:56 +03:00
|
|
|
.aside-menu__item--selected:hover {
|
2020-09-06 11:17:46 +03:00
|
|
|
color: #ffffff;
|
2021-02-16 01:45:13 +03:00
|
|
|
background-color: var(--brand-color);
|
2018-07-18 21:01:56 +03:00
|
|
|
}
|
|
|
|
|
2018-07-18 21:32:19 +03:00
|
|
|
.aside-menu__item-text {
|
|
|
|
margin-left: 8px;
|
|
|
|
}
|