diff --git a/src/scss/_app-sidebar.scss b/src/scss/_app-sidebar.scss index ac2a269d6..0d70645fa 100644 --- a/src/scss/_app-sidebar.scss +++ b/src/scss/_app-sidebar.scss @@ -84,9 +84,19 @@ @include scrollbar-color-gray(); @include scrollbar-width-thin(); + .nav-item { + max-width: 100%; + } + .nav-link { display: flex; justify-content: flex-start; + + p { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } } .nav-icon { display: flex; @@ -209,7 +219,6 @@ .nav-link { position: relative; - width: subtract(var(--#{$lte-prefix}sidebar-width), $lte-sidebar-padding-x * 2); @include transition(width $lte-transition-fn $lte-transition-speed); @include border-radius($border-radius); @@ -230,6 +239,10 @@ display: none; padding: 0; list-style: none; + + .nav-indent & { + padding-left: $lte-sidebar-padding-x; + } } .menu-open { @@ -245,6 +258,43 @@ } } +.nav-compact.nav-indent { + .nav-treeview { + padding-left: 0; + + .nav-item { + padding-left: $lte-sidebar-padding-x; + } + } +} + +.sidebar-mini.sidebar-collapse.nav-indent { + .app-sidebar:hover { + .nav-treeview { + padding-left: 0; + + .nav-item { + padding-left: $lte-sidebar-padding-x; + } + } + } +} + +.sidebar-collapse { + &.nav-compact.nav-indent { + .nav-treeview { + .nav-item { + padding-left: 0; + } + } + } +} + +.nav-compact .nav-link { + @include border-radius(0); + margin-bottom: 0 !important; +} + // A fix for text overflow while transitioning from sidebar mini to full sidebar .sidebar-menu, .sidebar-menu > .nav-header, @@ -352,12 +402,13 @@ } .sidebar-menu .nav-link { - width: subtract(var(--#{$lte-prefix}sidebar-width), $lte-sidebar-padding-x * 2); + width: auto; } .sidebar-menu .nav-link p, .brand-text, .logo-xl { + width: auto; margin-left: 0; visibility: visible; animation-name: fadeIn; diff --git a/src/scss/_cards.scss b/src/scss/_cards.scss index a131c99d9..3bb5c409c 100644 --- a/src/scss/_cards.scss +++ b/src/scss/_cards.scss @@ -272,11 +272,11 @@ html.maximized-card { --#{$prefix}btn-padding-y: .25rem; &:not(.btn-tool-custom) { - --#{$prefix}btn-color: var(--#{$prefix}tertiary-color); - --#{$prefix}btn-bg: transparent; - --#{$prefix}btn-box-shadow: none; - --#{$prefix}btn-hover-color: var(--#{$prefix}secondary-color); - --#{$prefix}btn-active-border-color: transparent; + --#{$prefix}btn-color: var(--#{$prefix}tertiary-color); + --#{$prefix}btn-bg: transparent; + --#{$prefix}btn-box-shadow: none; + --#{$prefix}btn-hover-color: var(--#{$prefix}secondary-color); + --#{$prefix}btn-active-border-color: transparent; } margin: -$card-spacer-y 0;