111 lines
3.0 KiB
CSS
111 lines
3.0 KiB
CSS
/* Основные стили для сайдбара */
|
||
#wrapper {
|
||
display: flex;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
#sidebar-wrapper {
|
||
min-height: 100vh;
|
||
margin-left: 0;
|
||
width: 250px;
|
||
transition: margin-left 0.3s ease, width 0.3s ease;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
#page-content-wrapper {
|
||
flex: 1;
|
||
min-width: 0;
|
||
transition: margin-left 0.3s ease;
|
||
}
|
||
|
||
/* Стили для свернутого сайдбара */
|
||
body.sb-sidenav-toggled #sidebar-wrapper {
|
||
margin-left: -250px;
|
||
width: 0;
|
||
}
|
||
|
||
body.sb-sidenav-toggled #page-content-wrapper {
|
||
margin-left: 0;
|
||
}
|
||
|
||
/* Стили для активных пунктов меню */
|
||
.sidebar-link {
|
||
transition: all 0.2s ease;
|
||
border-left: 3px solid transparent;
|
||
}
|
||
|
||
.sidebar-link:hover {
|
||
background-color: rgba(13, 110, 253, 0.05);
|
||
border-left-color: rgba(13, 110, 253, 0.3);
|
||
}
|
||
|
||
.sidebar-link.active {
|
||
background-color: rgba(13, 110, 253, 0.1);
|
||
border-left-color: var(--bs-primary, #0d6efd);
|
||
color: var(--bs-primary, #0d6efd) !important;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.sidebar-link.active i {
|
||
color: var(--bs-primary, #0d6efd) !important;
|
||
}
|
||
|
||
.sidebar-link.disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
.sidebar-link.disabled:hover {
|
||
border-left-color: transparent;
|
||
}
|
||
|
||
/* Адаптивность для мобильных */
|
||
@media (max-width: 768px) {
|
||
#sidebar-wrapper {
|
||
margin-left: -250px;
|
||
width: 0;
|
||
}
|
||
|
||
#page-content-wrapper {
|
||
margin-left: 0;
|
||
}
|
||
|
||
body.sb-sidenav-toggled #sidebar-wrapper {
|
||
margin-left: 0;
|
||
width: 250px;
|
||
z-index: 1050;
|
||
position: fixed;
|
||
height: 100vh;
|
||
}
|
||
|
||
body.sb-sidenav-toggled #page-content-wrapper {
|
||
margin-left: 0;
|
||
}
|
||
|
||
body.sb-sidenav-toggled::before {
|
||
content: '';
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 1049;
|
||
}
|
||
}
|
||
|
||
/* Иконка бургера - анимация */
|
||
#sidebarToggle .fa-bars {
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
body.sb-sidenav-toggled #sidebarToggle .fa-bars {
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
/* Стили для заголовка сайдбара */
|
||
.sidebar-heading {
|
||
font-weight: 600;
|
||
font-size: 1.1rem;
|
||
} |