fixed sidebar nav icon with text-sm

This commit is contained in:
REJack 2020-02-12 15:18:56 +01:00
parent b1b5ce3cb5
commit f9a40e3b46
No known key found for this signature in database
GPG key ID: 9F3976CC630CC888
6 changed files with 190 additions and 55 deletions

View file

@ -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

View file

@ -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;
}
}
}
}
}

104
dist/css/adminlte.css vendored
View file

@ -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