mirror of https://github.com/ColorlibHQ/AdminLTE
fix invisible nav items if there is a second nav in content
parent
2c4d879d64
commit
52ff423787
|
@ -62,7 +62,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.nav.flex-column {
|
||||
.nav.flex-column:not(.nav-sidebar) {
|
||||
> li {
|
||||
border-bottom: 1px solid $card-border-color;
|
||||
margin: 0;
|
||||
|
|
|
@ -14,7 +14,6 @@
|
|||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
|
@ -201,7 +200,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.sidebar-is-opening .nav-sidebar {
|
||||
.sidebar-is-opening .sidebar .nav-sidebar {
|
||||
.nav-link p {
|
||||
animation-name: fadeIn;
|
||||
animation-duration: $transition-speed;
|
||||
|
@ -400,7 +399,7 @@
|
|||
// Hover and active states
|
||||
&.menu-open > .nav-link,
|
||||
&:hover > .nav-link,
|
||||
> .nav-link:focus {
|
||||
> .nav-link:focus {
|
||||
background-color: $sidebar-dark-hover-bg;
|
||||
color: $sidebar-dark-hover-color;
|
||||
}
|
||||
|
@ -575,7 +574,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.sidebar-collapse &.nav-child-indent {
|
||||
.sidebar-collapse &.nav-child-indent .sidebar {
|
||||
.nav-treeview {
|
||||
.nav-icon {
|
||||
margin-left: .55rem;
|
||||
|
@ -731,39 +730,38 @@
|
|||
.nav-icon {
|
||||
@include transition(margin-left $transition-fn $transition-speed);
|
||||
margin-left: .6rem;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused &.nav-child-indent,
|
||||
.sidebar-mini.sidebar-collapse .main-sidebar:hover &.nav-child-indent,
|
||||
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused &.nav-child-indent,
|
||||
.sidebar-mini-md.sidebar-collapse .main-sidebar:hover &.nav-child-indent,
|
||||
.sidebar-mini-xs.sidebar-collapse .main-sidebar.sidebar-focused &.nav-child-indent,
|
||||
.sidebar-mini-xs.sidebar-collapse .main-sidebar:hover &.nav-child-indent {
|
||||
.nav-treeview {
|
||||
padding-left: 1rem;
|
||||
|
||||
.nav-treeview {
|
||||
padding-left: 2rem;
|
||||
margin-left: -1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse.text-sm .main-sidebar.sidebar-focused &.nav-child-indent,
|
||||
.sidebar-mini.sidebar-collapse.text-sm .main-sidebar:hover &.nav-child-indent,
|
||||
.sidebar-mini-md.sidebar-collapse.text-sm .main-sidebar.sidebar-focused &.nav-child-indent,
|
||||
.sidebar-mini-md.sidebar-collapse.text-sm .main-sidebar:hover &.nav-child-indent,
|
||||
.sidebar-mini-xs.sidebar-collapse.text-sm .main-sidebar.sidebar-focused &.nav-child-indent,
|
||||
.sidebar-mini-xs.sidebar-collapse.text-sm .main-sidebar:hover &.nav-child-indent {
|
||||
.nav-treeview {
|
||||
padding-left: .5rem;
|
||||
|
||||
.sidebar-mini.sidebar-collapse,
|
||||
.sidebar-mini-md.sidebar-collapse,
|
||||
.sidebar-mini-xs.sidebar-collapse {
|
||||
.main-sidebar.sidebar-focused &.nav-child-indent,
|
||||
.main-sidebar:hover &.nav-child-indent {
|
||||
.nav-treeview {
|
||||
padding-left: 1rem;
|
||||
margin-left: -.5rem;
|
||||
|
||||
.nav-treeview {
|
||||
padding-left: 2rem;
|
||||
margin-left: -1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse.text-sm,
|
||||
.sidebar-mini-md.sidebar-collapse.text-sm,
|
||||
.sidebar-mini-xs.sidebar-collapse.text-sm {
|
||||
.main-sidebar.sidebar-focused &.nav-child-indent,
|
||||
.main-sidebar:hover &.nav-child-indent {
|
||||
.nav-treeview {
|
||||
padding-left: .5rem;
|
||||
|
||||
.nav-treeview {
|
||||
padding-left: 1rem;
|
||||
margin-left: -.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -771,40 +769,41 @@
|
|||
.sidebar-mini.sidebar-collapse &,
|
||||
.sidebar-mini-md.sidebar-collapse &,
|
||||
.sidebar-mini-xs.sidebar-collapse & {
|
||||
> .nav-item > .nav-link {
|
||||
.nav-icon {
|
||||
margin-left: .55rem;
|
||||
}
|
||||
|
||||
&.active {
|
||||
> .nav-icon{
|
||||
margin-left: .36rem;
|
||||
.sidebar {
|
||||
> .nav-item > .nav-link {
|
||||
.nav-icon {
|
||||
margin-left: .55rem;
|
||||
}
|
||||
&.active {
|
||||
> .nav-icon {
|
||||
margin-left: .36rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-child-indent {
|
||||
.nav-treeview {
|
||||
&.nav-child-indent {
|
||||
.nav-treeview {
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
.nav-treeview {
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.sidebar-mini.sidebar-collapse.text-sm &,
|
||||
.sidebar-mini-md.sidebar-collapse.text-sm &,
|
||||
.sidebar-mini-xs.sidebar-collapse.text-sm & {
|
||||
> .nav-item > .nav-link {
|
||||
.nav-icon {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
.sidebar {
|
||||
> .nav-item > .nav-link {
|
||||
.nav-icon {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
&.active {
|
||||
> .nav-icon{
|
||||
margin-left: calc(.75rem - 3px);
|
||||
&.active {
|
||||
> .nav-icon {
|
||||
margin-left: calc(.75rem - 3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -855,7 +854,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.nav-collapse-hide-child {
|
||||
.menu-open > .nav-treeview {
|
||||
max-height: min-content;
|
||||
|
@ -864,7 +862,7 @@
|
|||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.sidebar-collapse & {
|
||||
.sidebar-collapse .sidebar & {
|
||||
.menu-open > .nav-treeview {
|
||||
max-height: 0;
|
||||
animation-name: fadeOut;
|
||||
|
@ -873,17 +871,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused &,
|
||||
.sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover &,
|
||||
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused &,
|
||||
.sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover &,
|
||||
.sidebar-mini-xs.sidebar-collapse .main-sidebar.sidebar-focused &,
|
||||
.sidebar-mini-xs.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover & {
|
||||
.menu-open > .nav-treeview {
|
||||
max-height: min-content;
|
||||
animation-name: fadeIn;
|
||||
animation-duration: $transition-speed;
|
||||
animation-fill-mode: both;
|
||||
.sidebar-mini.sidebar-collapse,
|
||||
.sidebar-mini-md.sidebar-collapse,
|
||||
.sidebar-mini-xs.sidebar-collapse {
|
||||
.main-sidebar.sidebar-focused &,
|
||||
.main-sidebar:not(.sidebar-no-expand):hover & {
|
||||
.menu-open > .nav-treeview {
|
||||
max-height: min-content;
|
||||
animation-name: fadeIn;
|
||||
animation-duration: $transition-speed;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1136,7 +1134,7 @@
|
|||
padding: $sidebar-custom-padding-x $sidebar-custom-padding-y;
|
||||
}
|
||||
|
||||
height: fill-available;
|
||||
height: stretch;
|
||||
}
|
||||
|
||||
.main-sidebar-custom-lg {
|
||||
|
@ -1169,7 +1167,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@include dark-mode () {
|
||||
@include dark-mode() {
|
||||
@each $name, $color in $theme-colors-alt {
|
||||
.sidebar-dark-#{$name},
|
||||
.sidebar-light-#{$name} {
|
||||
|
|
|
@ -451,19 +451,21 @@
|
|||
padding-left: 0;
|
||||
}
|
||||
|
||||
.brand-text,
|
||||
.user-panel > .info,
|
||||
.nav-sidebar .nav-link p {
|
||||
margin-left: -10px;
|
||||
animation-name: fadeOut;
|
||||
animation-duration: $transition-speed;
|
||||
animation-fill-mode: both;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
}
|
||||
.sidebar {
|
||||
.brand-text,
|
||||
.user-panel > .info,
|
||||
.nav-sidebar .nav-link p {
|
||||
margin-left: -10px;
|
||||
animation-name: fadeOut;
|
||||
animation-duration: $transition-speed;
|
||||
animation-fill-mode: both;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.nav-sidebar > .nav-item .nav-icon {
|
||||
margin-right: 0;
|
||||
.nav-sidebar > .nav-item .nav-icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -45,13 +45,13 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.nav-sidebar .nav-link p {
|
||||
.sidebar .nav-sidebar .nav-link p {
|
||||
width: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sidebar .user-panel > .info,
|
||||
.nav-sidebar .nav-link p,
|
||||
.sidebar .nav-sidebar .nav-link p,
|
||||
.brand-text {
|
||||
margin-left: -10px;
|
||||
animation-name: fadeOut;
|
||||
|
@ -109,7 +109,7 @@
|
|||
}
|
||||
|
||||
.user-panel > .info,
|
||||
.nav-sidebar .nav-link p,
|
||||
.sidebar .nav-sidebar .nav-link p,
|
||||
.brand-text,
|
||||
.logo-xl {
|
||||
display: inline-block;
|
||||
|
|
Loading…
Reference in New Issue