github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

fix(4186): various collapsed sidebar-mini bugs

pull/4209/head
REJack 2022-01-22 22:01:56 +01:00
parent 3831b6252a
commit f88d61cbc6
3 changed files with 48 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/scss/_main-sidebar.scss
View File

@ -862,7 +862,7 @@
animation-fill-mode: both;
}
.sidebar-collapse .sidebar & {
.sidebar-collapse .sidebar:not(:hover) & {
.menu-open > .nav-treeview {
max-height: 0;
animation-name: fadeOut;

7
build/scss/_sidebar-mini.scss
View File

@ -278,9 +278,6 @@
&.sidebar-focused,
&:hover {
.nav-link {
width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2);
}
&:not(.hide-nav-header-on-hover) {
.nav-header {
display: inline-block;
@ -289,6 +286,9 @@
// Show sidebar search when hover/focus on the sidebar mini mode.
&:not(.sidebar-no-expand) {
.nav-link {
width: calc(#{$sidebar-width} - #{$sidebar-padding-x} * 2);
}
.form-control-sidebar {
display: inline-block;
}
@ -462,6 +462,7 @@
animation-duration: $transition-speed;
animation-fill-mode: both;
visibility: hidden;
display: inline-block;
width: 0;
}

84
build/scss/mixins/_sidebar.scss
View File

@ -92,55 +92,57 @@
}
}
&:hover,
&.sidebar-focused {
width: $sidebar-width;
.brand-link {
&:not(.sidebar-no-expand) {
&:hover,
&.sidebar-focused {
width: $sidebar-width;
}
.user-panel {
text-align: left;
.image {
float: left;
.brand-link {
width: $sidebar-width;
}
}
.user-panel > .info,
.sidebar .nav-sidebar .nav-link p,
.brand-text,
.logo-xl {
display: inline-block;
margin-left: 0;
animation-name: fadeIn;
animation-duration: $transition-speed;
animation-fill-mode: both;
visibility: visible;
}
.user-panel {
text-align: left;
.logo-xs {
animation-name: fadeOut;
animation-duration: $transition-speed;
animation-fill-mode: both;
visibility: hidden;
}
.image {
float: left;
}
}
.brand-image {
margin-right: .5rem;
}
.user-panel > .info,
.sidebar .nav-sidebar .nav-link p,
.brand-text,
.logo-xl {
display: inline-block;
margin-left: 0;
animation-name: fadeIn;
animation-duration: $transition-speed;
animation-fill-mode: both;
visibility: visible;
}
// Make the sidebar links, menus, labels, badges
// and angle icons disappear
.sidebar-form,
.user-panel > .info {
display: block !important;
transform: translateZ(0);
}
.logo-xs {
animation-name: fadeOut;
animation-duration: $transition-speed;
animation-fill-mode: both;
visibility: hidden;
}
.nav-sidebar > .nav-item > .nav-link > span {
display: inline-block !important;
.brand-image {
margin-right: .5rem;
}
// Make the sidebar links, menus, labels, badges
// and angle icons disappear
.sidebar-form,
.user-panel > .info {
display: block !important;
transform: translateZ(0);
}
.nav-sidebar > .nav-item > .nav-link > span {
display: inline-block !important;
}
}
}
}