mirror of https://github.com/ColorlibHQ/AdminLTE
fixed sidebar nav icon with text-sm
REJack
parent
b1b5ce3cb5
commit
f9a40e3b46
|
|
@ -151,6 +151,24 @@
|
|||
.nav-treeview {
|
||||
transition: padding $transition-speed $transition-fn;
|
||||
padding-left: 1rem;
|
||||
|
||||
.text-sm & {
|
||||
padding-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-legacy {
|
||||
.nav-treeview {
|
||||
.nav-treeview {
|
||||
padding-left: 2rem;
|
||||
margin-left: -1rem;
|
||||
|
||||
.text-sm & {
|
||||
padding-left: 1rem;
|
||||
margin-left: -.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -632,15 +650,19 @@
|
|||
> .nav-link {
|
||||
border-radius: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
> .nav-icon {
|
||||
margin-left: .55rem;
|
||||
|
||||
.text-sm & {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-sidebar > .nav-item {
|
||||
> .nav-link {
|
||||
> .nav-icon {
|
||||
margin-left: .55rem;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: inherit;
|
||||
border-left: 3px solid transparent;
|
||||
|
|
@ -648,6 +670,20 @@
|
|||
|
||||
> .nav-icon {
|
||||
margin-left: calc(.55rem - 3px);
|
||||
|
||||
.text-sm & {
|
||||
margin-left: calc(.75rem - 3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-sm &.nav-sidebar.nav-flat .nav-treeview {
|
||||
.nav-item {
|
||||
> .nav-link {
|
||||
> .nav-icon {
|
||||
margin-left: calc(.75rem - 3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -658,6 +694,35 @@
|
|||
> .nav-item .nav-link {
|
||||
.nav-icon {
|
||||
@include transition(margin-left $transition-fn $transition-speed);
|
||||
margin-left: .75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
.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 {
|
||||
.nav-treeview {
|
||||
padding-left: .5rem;
|
||||
|
||||
.nav-treeview {
|
||||
padding-left: 1rem;
|
||||
margin-left: -.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -670,11 +735,36 @@
|
|||
}
|
||||
|
||||
&.active {
|
||||
> .nav-icon {
|
||||
> .nav-icon{
|
||||
margin-left: .36rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-child-indent {
|
||||
.nav-treeview {
|
||||
.nav-treeview {
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.sidebar-mini.sidebar-collapse.text-sm &,
|
||||
.sidebar-mini-md.sidebar-collapse.text-sm &, {
|
||||
> .nav-item > .nav-link {
|
||||
.nav-icon {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
&.active {
|
||||
> .nav-icon{
|
||||
margin-left: calc(.75rem - 3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[class*='sidebar-dark'] & {
|
||||
|
|
@ -737,7 +827,9 @@
|
|||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused &,
|
||||
.sidebar-mini.sidebar-collapse .main-sidebar:hover & {
|
||||
.sidebar-mini.sidebar-collapse .main-sidebar:hover &,
|
||||
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused &,
|
||||
.sidebar-mini-md.sidebar-collapse .main-sidebar:hover & {
|
||||
.menu-open > .nav-treeview {
|
||||
max-height: min-content;
|
||||
opacity: 1;
|
||||
|
|
@ -762,6 +854,13 @@
|
|||
.nav-link > p > .right {
|
||||
top: .465rem;
|
||||
}
|
||||
|
||||
.text-sm & {
|
||||
.nav-link > .right,
|
||||
.nav-link > p > .right {
|
||||
top: .7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar Form Control
|
||||
|
|
|
|||
|
|
@ -111,30 +111,6 @@
|
|||
.nav-sidebar > .nav-item .nav-icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.nav-flat {
|
||||
.nav-icon {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-icon {
|
||||
margin-left: .3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-flat.nav-compact {
|
||||
.nav-icon {
|
||||
margin-left: 1.05rem;
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-icon {
|
||||
margin-left: .85rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11754,6 +11754,20 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
|
|||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.text-sm .nav-sidebar.nav-child-indent .nav-treeview {
|
||||
padding-left: .5rem;
|
||||
}
|
||||
|
||||
.nav-sidebar.nav-child-indent.nav-legacy .nav-treeview .nav-treeview {
|
||||
padding-left: 2rem;
|
||||
margin-left: -1rem;
|
||||
}
|
||||
|
||||
.text-sm .nav-sidebar.nav-child-indent.nav-legacy .nav-treeview .nav-treeview {
|
||||
padding-left: 1rem;
|
||||
margin-left: -.5rem;
|
||||
}
|
||||
|
||||
.nav-sidebar .nav-header {
|
||||
font-size: .9rem;
|
||||
padding: 0.5rem;
|
||||
|
|
@ -12396,10 +12410,14 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.nav-legacy.nav-sidebar > .nav-item > .nav-link > .nav-icon {
|
||||
.nav-legacy.nav-sidebar .nav-item > .nav-link > .nav-icon {
|
||||
margin-left: .55rem;
|
||||
}
|
||||
|
||||
.text-sm .nav-legacy.nav-sidebar .nav-item > .nav-link > .nav-icon {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
.nav-legacy.nav-sidebar > .nav-item > .nav-link.active {
|
||||
background: inherit;
|
||||
border-left: 3px solid transparent;
|
||||
|
|
@ -12410,9 +12428,18 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
|
|||
margin-left: calc(.55rem - 3px);
|
||||
}
|
||||
|
||||
.text-sm .nav-legacy.nav-sidebar > .nav-item > .nav-link.active > .nav-icon {
|
||||
margin-left: calc(.75rem - 3px);
|
||||
}
|
||||
|
||||
.text-sm .nav-legacy.nav-sidebar.nav-flat .nav-treeview .nav-item > .nav-link > .nav-icon {
|
||||
margin-left: calc(.75rem - 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;
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
|
@ -12422,6 +12449,36 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
|
|||
}
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-legacy.nav-child-indent .nav-treeview,
|
||||
.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-legacy.nav-child-indent .nav-treeview,
|
||||
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .nav-legacy.nav-child-indent .nav-treeview,
|
||||
.sidebar-mini-md.sidebar-collapse .main-sidebar:hover .nav-legacy.nav-child-indent .nav-treeview {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-legacy.nav-child-indent .nav-treeview .nav-treeview,
|
||||
.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-legacy.nav-child-indent .nav-treeview .nav-treeview,
|
||||
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .nav-legacy.nav-child-indent .nav-treeview .nav-treeview,
|
||||
.sidebar-mini-md.sidebar-collapse .main-sidebar:hover .nav-legacy.nav-child-indent .nav-treeview .nav-treeview {
|
||||
padding-left: 2rem;
|
||||
margin-left: -1rem;
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse.text-sm .main-sidebar.sidebar-focused .nav-legacy.nav-child-indent .nav-treeview,
|
||||
.sidebar-mini.sidebar-collapse.text-sm .main-sidebar:hover .nav-legacy.nav-child-indent .nav-treeview,
|
||||
.sidebar-mini-md.sidebar-collapse.text-sm .main-sidebar.sidebar-focused .nav-legacy.nav-child-indent .nav-treeview,
|
||||
.sidebar-mini-md.sidebar-collapse.text-sm .main-sidebar:hover .nav-legacy.nav-child-indent .nav-treeview {
|
||||
padding-left: .5rem;
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse.text-sm .main-sidebar.sidebar-focused .nav-legacy.nav-child-indent .nav-treeview .nav-treeview,
|
||||
.sidebar-mini.sidebar-collapse.text-sm .main-sidebar:hover .nav-legacy.nav-child-indent .nav-treeview .nav-treeview,
|
||||
.sidebar-mini-md.sidebar-collapse.text-sm .main-sidebar.sidebar-focused .nav-legacy.nav-child-indent .nav-treeview .nav-treeview,
|
||||
.sidebar-mini-md.sidebar-collapse.text-sm .main-sidebar:hover .nav-legacy.nav-child-indent .nav-treeview .nav-treeview {
|
||||
padding-left: 1rem;
|
||||
margin-left: -.5rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
|
@ -12432,6 +12489,22 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
|
|||
margin-left: .36rem;
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse .nav-legacy.nav-child-indent .nav-treeview .nav-treeview,
|
||||
.sidebar-mini-md.sidebar-collapse .nav-legacy.nav-child-indent .nav-treeview .nav-treeview {
|
||||
padding-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse.text-sm .nav-legacy > .nav-item > .nav-link .nav-icon,
|
||||
.sidebar-mini-md.sidebar-collapse.text-sm .nav-legacy > .nav-item > .nav-link .nav-icon {
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse.text-sm .nav-legacy > .nav-item > .nav-link.active > .nav-icon,
|
||||
.sidebar-mini-md.sidebar-collapse.text-sm .nav-legacy > .nav-item > .nav-link.active > .nav-icon {
|
||||
margin-left: calc(.75rem - 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);
|
||||
|
|
@ -12473,7 +12546,9 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
|
|||
}
|
||||
|
||||
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-collapse-hide-child .menu-open > .nav-treeview,
|
||||
.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-collapse-hide-child .menu-open > .nav-treeview {
|
||||
.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-collapse-hide-child .menu-open > .nav-treeview,
|
||||
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .nav-collapse-hide-child .menu-open > .nav-treeview,
|
||||
.sidebar-mini-md.sidebar-collapse .main-sidebar:hover .nav-collapse-hide-child .menu-open > .nav-treeview {
|
||||
max-height: -webkit-min-content;
|
||||
max-height: -moz-min-content;
|
||||
max-height: min-content;
|
||||
|
|
@ -12496,6 +12571,11 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
|
|||
top: .465rem;
|
||||
}
|
||||
|
||||
.text-sm .nav-compact .nav-link > .right,
|
||||
.text-sm .nav-compact .nav-link > p > .right {
|
||||
top: .7rem;
|
||||
}
|
||||
|
||||
[class*='sidebar-dark'] .form-control-sidebar,
|
||||
[class*='sidebar-dark'] .btn-sidebar {
|
||||
background: #3f474e;
|
||||
|
|
@ -12836,26 +12916,6 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
|
|||
margin-right: 0;
|
||||
}
|
||||
|
||||
.sidebar-collapse .sidebar-no-expand.main-sidebar.sidebar-focused .nav-flat .nav-icon,
|
||||
.sidebar-collapse .sidebar-no-expand.main-sidebar:hover .nav-flat .nav-icon {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
.sidebar-collapse .sidebar-no-expand.main-sidebar.sidebar-focused .nav-flat .nav-treeview .nav-icon,
|
||||
.sidebar-collapse .sidebar-no-expand.main-sidebar:hover .nav-flat .nav-treeview .nav-icon {
|
||||
margin-left: .3rem;
|
||||
}
|
||||
|
||||
.sidebar-collapse .sidebar-no-expand.main-sidebar.sidebar-focused .nav-flat.nav-compact .nav-icon,
|
||||
.sidebar-collapse .sidebar-no-expand.main-sidebar:hover .nav-flat.nav-compact .nav-icon {
|
||||
margin-left: 1.05rem;
|
||||
}
|
||||
|
||||
.sidebar-collapse .sidebar-no-expand.main-sidebar.sidebar-focused .nav-flat.nav-compact .nav-treeview .nav-icon,
|
||||
.sidebar-collapse .sidebar-no-expand.main-sidebar:hover .nav-flat.nav-compact .nav-treeview .nav-icon {
|
||||
margin-left: .85rem;
|
||||
}
|
||||
|
||||
.nav-sidebar {
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
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