AdminLTE/src/scss/_sidebar-collapse.scss

74 lines
1.4 KiB
SCSS

//
// Core: Sidebar Mini
//
// A fix for text overflow while transitioning from sidebar mini to full sidebar
.sidebar-menu,
.sidebar-menu > .nav-header,
.sidebar-menu .nav-link {
white-space: nowrap;
}
.sidebar-collapse {
.app-sidebar {
min-width: $lte-sidebar-mini-width;
max-width: $lte-sidebar-mini-width;
}
// Make the sidebar headers
.sidebar-menu .nav-header {
display: none;
}
.sidebar-menu {
.nav-link {
width: $lte-sidebar-mini-width - $lte-sidebar-padding-x * 2;
}
}
.sidebar-menu .nav-link p {
width: 0;
white-space: nowrap;
}
.sidebar-menu .nav-link p,
.brand-link {
animation-name: fadeOut;
animation-duration: $lte-transition-speed;
animation-fill-mode: both;
}
&.sidebar-is-hover {
.app-sidebar {
min-width: var(--#{$lte-prefix}sidebar-width);
max-width: var(--#{$lte-prefix}sidebar-width);
}
.sidebar-menu .nav-header {
display: inline-block;
}
.sidebar-menu .nav-link {
width: subtract(var(--#{$lte-prefix}sidebar-width), $lte-sidebar-padding-x * 2);
}
.sidebar-menu .nav-link p,
.brand-link {
margin-left: 0;
visibility: visible;
animation-name: fadeIn;
animation-duration: $lte-transition-speed;
animation-fill-mode: both;
}
}
&:not(.sidebar-is-hover) {
.sidebar-menu .nav-link p {
.float-end {
// clear: both;
float: none !important;
}
}
}
}