mirror of https://github.com/ColorlibHQ/AdminLTE
fixed sidebar mini with various sidebar nav styles (also combined)
REJack
parent
7a47aad1e9
commit
56c5319f98
|
|
@ -450,6 +450,31 @@
|
|||
}
|
||||
}
|
||||
|
||||
.nav-compact {
|
||||
.sidebar-mini.sidebar-collapse &,
|
||||
.sidebar-mini-md.sidebar-collapse & {
|
||||
.nav-icon {
|
||||
@include transition(margin-left $transition-fn $transition-speed);
|
||||
margin-left: .45rem;
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-icon {
|
||||
margin-left: .45rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-mini .main-sidebar:hover &.nav-compact,
|
||||
.sidebar-mini-md .main-sidebar:hover &.nav-compact,
|
||||
.sidebar-mini .main-sidebar.sidebar-focused &.nav-compact,
|
||||
.sidebar-mini-md .main-sidebar.sidebar-focused &.nav-compact {
|
||||
.nav-icon {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Nav Flat
|
||||
.nav-flat {
|
||||
margin: (-$sidebar-padding-x/2) (-$sidebar-padding-x) 0;
|
||||
|
|
@ -505,6 +530,19 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse &.nav-compact,
|
||||
.sidebar-mini-md.sidebar-collapse &.nav-compact {
|
||||
.nav-icon {
|
||||
margin-left: 1.05rem;
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-icon {
|
||||
margin-left: .805rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-legacy {
|
||||
|
|
@ -531,6 +569,105 @@
|
|||
}
|
||||
}
|
||||
|
||||
.sidebar-mini &,
|
||||
.sidebar-mini-md &, {
|
||||
> .nav-item .nav-link {
|
||||
.nav-icon {
|
||||
@include transition(margin-left $transition-fn $transition-speed);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse &,
|
||||
.sidebar-mini-md.sidebar-collapse &, {
|
||||
> .nav-item .nav-link {
|
||||
.nav-icon {
|
||||
margin-left: .55rem;
|
||||
}
|
||||
|
||||
&.active {
|
||||
> .nav-icon {
|
||||
margin-left: .36rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse &.nav-compact,
|
||||
.sidebar-mini-md.sidebar-collapse &.nav-compact {
|
||||
> .nav-item .nav-link {
|
||||
.nav-icon {
|
||||
margin-left: 1.05rem;
|
||||
}
|
||||
|
||||
&.active {
|
||||
> .nav-icon {
|
||||
margin-left: .85rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse &.nav-compact.nav-flat,
|
||||
.sidebar-mini-md.sidebar-collapse &.nav-compact.nav-flat {
|
||||
> .nav-item .nav-link {
|
||||
.nav-icon {
|
||||
margin-left: .85rem;
|
||||
}
|
||||
|
||||
&.active {
|
||||
> .nav-icon {
|
||||
margin-left: .85rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .nav-item > .nav-link {
|
||||
.nav-icon {
|
||||
margin-left: 1.05rem;
|
||||
}
|
||||
|
||||
&.active {
|
||||
> .nav-icon {
|
||||
margin-left: .85rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-mini .main-sidebar:hover &,
|
||||
.sidebar-mini-md .main-sidebar:hover &,
|
||||
.sidebar-mini .main-sidebar.sidebar-focused &,
|
||||
.sidebar-mini-md .main-sidebar.sidebar-focused & {
|
||||
|
||||
&.nav-compact,
|
||||
&.nav-flat {
|
||||
> .nav-item .nav-link {
|
||||
.nav-icon {
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
> .nav-icon {
|
||||
margin-left: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .nav-item > .nav-link {
|
||||
.nav-icon {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
> .nav-icon {
|
||||
margin-left: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[class*='sidebar-dark'] & {
|
||||
&.nav-sidebar > .nav-item {
|
||||
.nav-treeview,
|
||||
|
|
|
|||
|
|
@ -12241,6 +12241,31 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
|
|||
border-color: #343a40;
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse .nav-compact .nav-icon,
|
||||
.sidebar-mini-md.sidebar-collapse .nav-compact .nav-icon {
|
||||
transition: margin-left ease-in-out 0.3s;
|
||||
margin-left: .45rem;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.sidebar-mini.sidebar-collapse .nav-compact .nav-icon,
|
||||
.sidebar-mini-md.sidebar-collapse .nav-compact .nav-icon {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse .nav-compact .nav-treeview .nav-icon,
|
||||
.sidebar-mini-md.sidebar-collapse .nav-compact .nav-treeview .nav-icon {
|
||||
margin-left: .45rem;
|
||||
}
|
||||
|
||||
.sidebar-mini .main-sidebar:hover .nav-compact.nav-compact .nav-icon,
|
||||
.sidebar-mini-md .main-sidebar:hover .nav-compact.nav-compact .nav-icon,
|
||||
.sidebar-mini .main-sidebar.sidebar-focused .nav-compact.nav-compact .nav-icon,
|
||||
.sidebar-mini-md .main-sidebar.sidebar-focused .nav-compact.nav-compact .nav-icon {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.nav-flat {
|
||||
margin: -0.25rem -0.5rem 0;
|
||||
}
|
||||
|
|
@ -12290,6 +12315,16 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
|
|||
border-left: .2rem solid;
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse .nav-flat.nav-compact .nav-icon,
|
||||
.sidebar-mini-md.sidebar-collapse .nav-flat.nav-compact .nav-icon {
|
||||
margin-left: 1.05rem;
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse .nav-flat.nav-compact .nav-treeview .nav-icon,
|
||||
.sidebar-mini-md.sidebar-collapse .nav-flat.nav-compact .nav-treeview .nav-icon {
|
||||
margin-left: .805rem;
|
||||
}
|
||||
|
||||
.nav-legacy {
|
||||
margin: -0.25rem -0.5rem 0;
|
||||
}
|
||||
|
|
@ -12309,6 +12344,98 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
|
|||
margin-left: -3px;
|
||||
}
|
||||
|
||||
.sidebar-mini .nav-legacy > .nav-item .nav-link .nav-icon,
|
||||
.sidebar-mini-md .nav-legacy > .nav-item .nav-link .nav-icon {
|
||||
transition: margin-left ease-in-out 0.3s;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.sidebar-mini .nav-legacy > .nav-item .nav-link .nav-icon,
|
||||
.sidebar-mini-md .nav-legacy > .nav-item .nav-link .nav-icon {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse .nav-legacy > .nav-item .nav-link .nav-icon,
|
||||
.sidebar-mini-md.sidebar-collapse .nav-legacy > .nav-item .nav-link .nav-icon {
|
||||
margin-left: .55rem;
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse .nav-legacy > .nav-item .nav-link.active > .nav-icon,
|
||||
.sidebar-mini-md.sidebar-collapse .nav-legacy > .nav-item .nav-link.active > .nav-icon {
|
||||
margin-left: .36rem;
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse .nav-legacy.nav-compact > .nav-item .nav-link .nav-icon,
|
||||
.sidebar-mini-md.sidebar-collapse .nav-legacy.nav-compact > .nav-item .nav-link .nav-icon {
|
||||
margin-left: 1.05rem;
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse .nav-legacy.nav-compact > .nav-item .nav-link.active > .nav-icon,
|
||||
.sidebar-mini-md.sidebar-collapse .nav-legacy.nav-compact > .nav-item .nav-link.active > .nav-icon {
|
||||
margin-left: .85rem;
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse .nav-legacy.nav-compact.nav-flat > .nav-item .nav-link .nav-icon,
|
||||
.sidebar-mini-md.sidebar-collapse .nav-legacy.nav-compact.nav-flat > .nav-item .nav-link .nav-icon {
|
||||
margin-left: .85rem;
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse .nav-legacy.nav-compact.nav-flat > .nav-item .nav-link.active > .nav-icon,
|
||||
.sidebar-mini-md.sidebar-collapse .nav-legacy.nav-compact.nav-flat > .nav-item .nav-link.active > .nav-icon {
|
||||
margin-left: .85rem;
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse .nav-legacy.nav-compact.nav-flat > .nav-item > .nav-link .nav-icon,
|
||||
.sidebar-mini-md.sidebar-collapse .nav-legacy.nav-compact.nav-flat > .nav-item > .nav-link .nav-icon {
|
||||
margin-left: 1.05rem;
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse .nav-legacy.nav-compact.nav-flat > .nav-item > .nav-link.active > .nav-icon,
|
||||
.sidebar-mini-md.sidebar-collapse .nav-legacy.nav-compact.nav-flat > .nav-item > .nav-link.active > .nav-icon {
|
||||
margin-left: .85rem;
|
||||
}
|
||||
|
||||
.sidebar-mini .main-sidebar:hover .nav-legacy.nav-compact > .nav-item .nav-link .nav-icon, .sidebar-mini .main-sidebar:hover .nav-legacy.nav-flat > .nav-item .nav-link .nav-icon,
|
||||
.sidebar-mini-md .main-sidebar:hover .nav-legacy.nav-compact > .nav-item .nav-link .nav-icon,
|
||||
.sidebar-mini-md .main-sidebar:hover .nav-legacy.nav-flat > .nav-item .nav-link .nav-icon,
|
||||
.sidebar-mini .main-sidebar.sidebar-focused .nav-legacy.nav-compact > .nav-item .nav-link .nav-icon,
|
||||
.sidebar-mini .main-sidebar.sidebar-focused .nav-legacy.nav-flat > .nav-item .nav-link .nav-icon,
|
||||
.sidebar-mini-md .main-sidebar.sidebar-focused .nav-legacy.nav-compact > .nav-item .nav-link .nav-icon,
|
||||
.sidebar-mini-md .main-sidebar.sidebar-focused .nav-legacy.nav-flat > .nav-item .nav-link .nav-icon {
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
.sidebar-mini .main-sidebar:hover .nav-legacy.nav-compact > .nav-item .nav-link.active > .nav-icon, .sidebar-mini .main-sidebar:hover .nav-legacy.nav-flat > .nav-item .nav-link.active > .nav-icon,
|
||||
.sidebar-mini-md .main-sidebar:hover .nav-legacy.nav-compact > .nav-item .nav-link.active > .nav-icon,
|
||||
.sidebar-mini-md .main-sidebar:hover .nav-legacy.nav-flat > .nav-item .nav-link.active > .nav-icon,
|
||||
.sidebar-mini .main-sidebar.sidebar-focused .nav-legacy.nav-compact > .nav-item .nav-link.active > .nav-icon,
|
||||
.sidebar-mini .main-sidebar.sidebar-focused .nav-legacy.nav-flat > .nav-item .nav-link.active > .nav-icon,
|
||||
.sidebar-mini-md .main-sidebar.sidebar-focused .nav-legacy.nav-compact > .nav-item .nav-link.active > .nav-icon,
|
||||
.sidebar-mini-md .main-sidebar.sidebar-focused .nav-legacy.nav-flat > .nav-item .nav-link.active > .nav-icon {
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
.sidebar-mini .main-sidebar:hover .nav-legacy.nav-compact > .nav-item > .nav-link .nav-icon, .sidebar-mini .main-sidebar:hover .nav-legacy.nav-flat > .nav-item > .nav-link .nav-icon,
|
||||
.sidebar-mini-md .main-sidebar:hover .nav-legacy.nav-compact > .nav-item > .nav-link .nav-icon,
|
||||
.sidebar-mini-md .main-sidebar:hover .nav-legacy.nav-flat > .nav-item > .nav-link .nav-icon,
|
||||
.sidebar-mini .main-sidebar.sidebar-focused .nav-legacy.nav-compact > .nav-item > .nav-link .nav-icon,
|
||||
.sidebar-mini .main-sidebar.sidebar-focused .nav-legacy.nav-flat > .nav-item > .nav-link .nav-icon,
|
||||
.sidebar-mini-md .main-sidebar.sidebar-focused .nav-legacy.nav-compact > .nav-item > .nav-link .nav-icon,
|
||||
.sidebar-mini-md .main-sidebar.sidebar-focused .nav-legacy.nav-flat > .nav-item > .nav-link .nav-icon {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.sidebar-mini .main-sidebar:hover .nav-legacy.nav-compact > .nav-item > .nav-link.active > .nav-icon, .sidebar-mini .main-sidebar:hover .nav-legacy.nav-flat > .nav-item > .nav-link.active > .nav-icon,
|
||||
.sidebar-mini-md .main-sidebar:hover .nav-legacy.nav-compact > .nav-item > .nav-link.active > .nav-icon,
|
||||
.sidebar-mini-md .main-sidebar:hover .nav-legacy.nav-flat > .nav-item > .nav-link.active > .nav-icon,
|
||||
.sidebar-mini .main-sidebar.sidebar-focused .nav-legacy.nav-compact > .nav-item > .nav-link.active > .nav-icon,
|
||||
.sidebar-mini .main-sidebar.sidebar-focused .nav-legacy.nav-flat > .nav-item > .nav-link.active > .nav-icon,
|
||||
.sidebar-mini-md .main-sidebar.sidebar-focused .nav-legacy.nav-compact > .nav-item > .nav-link.active > .nav-icon,
|
||||
.sidebar-mini-md .main-sidebar.sidebar-focused .nav-legacy.nav-flat > .nav-item > .nav-link.active > .nav-icon {
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
[class*='sidebar-dark'] .nav-legacy.nav-sidebar > .nav-item .nav-treeview,
|
||||
[class*='sidebar-dark'] .nav-legacy.nav-sidebar > .nav-item > .nav-treeview {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue