AdminLTE/build/scss/mixins/_sidebar.scss

166 lines
3.1 KiB
SCSS

//
// Mixins: Sidebar
//
// Sidebar Color
@mixin sidebar-color($color) {
.nav-sidebar > .nav-item {
& > .nav-link.active {
background-color: $color;
color: color-yiq($color);
}
}
}
// Sidebar Mini Breakpoints
@mixin sidebar-mini-breakpoint() {
// A fix for text overflow while transitioning from sidebar mini to full sidebar
.nav-sidebar,
.nav-sidebar > .nav-header,
.nav-sidebar .nav-link {
white-space: nowrap;
overflow: hidden;
}
// When the sidebar is collapsed...
&.sidebar-collapse {
.d-hidden-mini {
display: none;
}
// Apply the new margins to the main content and footer
.content-wrapper,
.main-footer,
.main-header {
margin-left: $sidebar-mini-width !important;
}
// Make the sidebar headers
.nav-sidebar .nav-header {
display: none;
}
.nav-sidebar .nav-link p {
width: 0;
}
.sidebar .user-panel > .info,
.nav-sidebar .nav-link p,
.brand-text {
margin-left: -10px;
opacity: 0;
visibility: hidden;
}
.logo-xl {
opacity: 0;
visibility: hidden;
}
.logo-xs {
display: inline-block;
opacity: 1;
visibility: visible;
}
// Modify the sidebar to shrink instead of disappearing
.main-sidebar {
overflow-x: hidden;
&,
&::before {
// Don't go away! Just shrink
margin-left: 0;
width: $sidebar-mini-width;
}
.user-panel {
.image {
float: none;
}
}
&:hover,
&.sidebar-focused {
width: $sidebar-width;
.nav-sidebar.nav-child-indent .nav-treeview {
padding-left: 1rem;
}
.brand-link {
width: $sidebar-width;
}
.user-panel {
text-align: left;
.image {
float: left;
}
}
.user-panel > .info,
.nav-sidebar .nav-link p,
.brand-text,
.logo-xl {
display: inline-block;
margin-left: 0;
opacity: 1;
visibility: visible;
}
.nav-flat {
.nav-icon {
margin-left: 0;
}
.nav-treeview {
.nav-icon {
margin-left: -.2rem;
}
}
}
.logo-xs {
opacity: 0;
visibility: hidden;
}
.brand-image {
margin-right: .5rem;
}
// Make the sidebar links, menus, labels, badges
// and angle icons disappear
.sidebar-form,
.user-panel > .info {
display: block !important;
-webkit-transform: translateZ(0);
}
.nav-sidebar > .nav-item > .nav-link > span {
display: inline-block !important;
}
}
}
// Make an element visible only when sidebar mini is active
.visible-sidebar-mini {
display: block !important;
}
&.layout-fixed {
.main-sidebar:hover {
.brand-link {
width: $sidebar-width;
}
}
.brand-link {
width: $sidebar-mini-width;
}
}
}
}