admin-lte 4.0.0-alpha2 → 4.0.0-alpha3

package/src/scss/_app-sidebar.scss

@@ -22,7 +22,9 @@
 
 .sidebar-brand {
   display: flex;
-  justify-content: space-between;
+  align-items: center;
+  justify-content: center;
+  height: $lte-app-header-height;
   padding: $lte-brand-link-padding-y $lte-brand-link-padding-x;
   overflow: hidden;
   font-size: $navbar-brand-font-size;
@@ -31,23 +33,38 @@
   @include transition(width $lte-transition-speed $lte-transition-fn);
 
   .brand-link {
-    flex: 1;
-    &:hover {
-      text-decoration: none;
-    }
+    display: flex;
+    align-items: center;
+    text-decoration: none;
 
     .brand-image {
       float: left;
       width: auto;
       max-height: 33px;
-      margin-top: -3px;
-      margin-right: .5rem;
-      margin-left: .8rem;
       line-height: .8;
     }
+
+    .brand-image-xs {
+      float: left;
+      width: auto;
+      max-height: 33px;
+      margin-top: -.1rem;
+      line-height: .8;
+    }
+
+    .brand-image-xl {
+      width: auto;
+      max-height: 40px;
+      line-height: .8;
+
+      &.single {
+        margin-top: -.3rem;
+      }
+    }
   }
 
   .brand-text {
+    margin-left: .5rem;
     color: rgba(var(--#{$prefix}emphasis-color-rgb), .8);
     @include transition(flex $lte-transition-speed $lte-transition-fn, width $lte-transition-speed $lte-transition-fn);
     &:hover {
@@ -61,11 +78,31 @@
   padding-right: $lte-sidebar-padding-x;
   padding-bottom: $lte-sidebar-padding-y;
   padding-left: $lte-sidebar-padding-x;
-  overflow-x: hidden;
-  overflow-y: auto;
   @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;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.5rem;
+    max-width: 1.5rem;
+  }
+
   // Sidebar Menu. First level links
   .sidebar-menu > .nav-item {
     &.menu-open {
@@ -110,11 +147,6 @@
   // All links within the sidebar menu
   a {
     color: var(--#{$lte-prefix}sidebar-color);
-
-    &:hover,
-    &:focus {
-      text-decoration: none;
-    }
   }
 
   // All submenus
@@ -155,7 +187,10 @@
 
       .nav-arrow {
         @include transition(transform $lte-transition-fn $lte-transition-speed);
-        transform: none #{"/*rtl:rotate(180deg)*/"};
+        transform: translateY(-50%) #{"/*rtl:rotate(180deg)*/"};
+        animation-name: fadeIn;
+        animation-duration: $lte-transition-speed;
+        animation-fill-mode: both;
       }
     }
   }
@@ -170,13 +205,12 @@
   .nav-link > .nav-arrow,
   .nav-link > p > .nav-arrow {
     position: absolute;
-    top: .7rem;
+    top: 50%;
     right: 1rem;
   }
 
   .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);
 
@@ -185,10 +219,6 @@
       padding-left: .5rem;
       margin: 0;
     }
-
-    .nav-icon {
-      padding-left: .3rem;
-    }
   }
 
   .nav-header {
@@ -201,6 +231,10 @@
     display: none;
     padding: 0;
     list-style: none;
+
+    .nav-indent & {
+      padding-left: $lte-sidebar-padding-x;
+    }
   }
 
   .menu-open {
@@ -210,12 +244,49 @@
 
     > .nav-link {
       .nav-arrow {
-        transform: rotate(90deg) #{"/*rtl:rotate(90deg)*/"};
+        transform: translateY(-50%) rotate(90deg) #{"/*rtl:rotate(90deg)*/"};
       }
     }
   }
 }
 
+.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,
@@ -223,6 +294,42 @@
   white-space: nowrap;
 }
 
+// Logo style
+.logo-xs,
+.logo-xl {
+  position: absolute;
+  visibility: visible;
+  opacity: 1;
+
+  &.brand-image-xs {
+    top: 12px;
+    left: 18px;
+  }
+
+  &.brand-image-xl {
+    top: 6px;
+    left: 12px;
+  }
+}
+
+.logo-xs {
+  visibility: hidden;
+  opacity: 0;
+
+  &.brand-image-xl {
+    top: 8px;
+    left: 16px;
+  }
+}
+
+.brand-link {
+  &.logo-switch {
+    &::before {
+      content: "\00a0";
+    }
+  }
+}
+
 .sidebar-mini.sidebar-collapse {
   .app-sidebar {
     min-width: $lte-sidebar-mini-width;
@@ -237,50 +344,103 @@
   .sidebar-menu {
     .nav-link {
       width: $lte-sidebar-mini-width - $lte-sidebar-padding-x * 2;
+
+      p {
+        display: inline-block;
+        width: 0;
+        white-space: nowrap;
+      }
+    }
+    .nav-badge,
+    .nav-arrow {
+      display: none;
+      animation-name: fadeOut;
+      animation-duration: $lte-transition-speed;
+      animation-fill-mode: both;
     }
   }
 
-  .sidebar-menu .nav-link p {
-    width: 0;
-    white-space: nowrap;
+  .brand-text {
+    display: inline-block;
+    max-width: 0;
+    overflow: hidden;
   }
 
   .sidebar-menu .nav-link p,
-  .brand-text {
+  .brand-text,
+  .logo-xl,
+  .nav-arrow {
     visibility: hidden;
     animation-name: fadeOut;
+    animation-duration: $lte-transition-speed;
     animation-fill-mode: both;
   }
 
-  &.sidebar-is-hover {
-    .app-sidebar {
-      min-width: var(--#{$lte-prefix}sidebar-width);
-      max-width: var(--#{$lte-prefix}sidebar-width);
-    }
+
+  .logo-xs {
+    display: inline-block;
+    visibility: visible;
+    animation-name: fadeIn;
+    animation-duration: $lte-transition-speed;
+    animation-fill-mode: both;
+  }
+
+  .app-sidebar:hover {
+    min-width: var(--#{$lte-prefix}sidebar-width);
+    max-width: var(--#{$lte-prefix}sidebar-width);
 
     .sidebar-menu .nav-header {
       display: inline-block;
     }
 
     .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 {
+    .brand-text,
+    .logo-xl {
+      width: auto;
       margin-left: 0;
       visibility: visible;
       animation-name: fadeIn;
       animation-duration: $lte-transition-speed;
       animation-fill-mode: both;
     }
+
+    .brand-text {
+      display: inline;
+      max-width: inherit;
+      margin-left: .5rem;
+      animation-name: fadeIn;
+      animation-duration: $lte-transition-speed;
+      animation-fill-mode: both;
+    }
+    .nav-badge,
+    .nav-arrow {
+      display: inline-block;
+      visibility: visible;
+      animation-name: fadeIn;
+      animation-duration: $lte-transition-speed;
+      animation-fill-mode: both;
+      animation-delay: $lte-transition-speed;
+    }
+
+    .nav-link p {
+      padding-left: .5rem;
+    }
+    .logo-xs {
+      visibility: hidden;
+      animation-name: fadeOut;
+      animation-duration: $lte-transition-speed;
+      animation-fill-mode: both;
+    }
   }
 }
 
 .sidebar-collapse:not(.sidebar-mini) {
   .app-sidebar {
-    // stylelint-disable-next-line
-    margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1);
+    margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1); // stylelint-disable-line function-disallowed-list
   }
 }
 
@@ -292,39 +452,50 @@
     /* stylelint-disable-next-line scss/selector-no-union-class-name */
     &#{$infix} {
       @include media-breakpoint-up($next) {
+        &.layout-fixed-complete,
         &.layout-fixed {
+          .app-main-wrapper {
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+          }
+          .app-sidebar-wrapper {
+            position: relative;
+          }
+          .app-main {
+            flex: 1 1 auto;
+            overflow: auto;
+          }
           .app-sidebar {
-            position: fixed;
+            position: sticky;
             top: 0;
             bottom: 0;
-            left: 0;
             max-height: 100vh;
 
             .sidebar-wrapper {
-              height: subtract(100vh, add($lte-app-header-height-inner, $lte-app-header-bottom-border-width));
+              height: subtract(100vh, add($lte-app-header-height, 1px));
             }
           }
-
-          .app-header,
-          .app-main,
-          .app-footer {
-            margin-left: var(--#{$lte-prefix}sidebar-width);
+        }
+        &.layout-fixed-complete {
+          .app-main-wrapper {
+            max-height: 100vh;
           }
-
-          &.sidebar-collapse {
-            .app-header,
-            .app-main,
-            .app-footer {
-              margin-left: 0;
-            }
+        }
+        &.sidebar-open {
+          .nav-link > .nav-badge,
+          .nav-link > p > .nav-badge {
+            animation-name: fadeIn;
+            animation-duration: $lte-transition-speed;
+            animation-fill-mode: both;
+            animation-delay: $lte-transition-speed;
           }
-
-          &.sidebar-mini.sidebar-collapse {
-            .app-header,
-            .app-main,
-            .app-footer {
-              margin-left: $lte-sidebar-mini-width;
-            }
+          .nav-link > .nav-arrow,
+          .nav-link > p > .nav-arrow {
+            animation-name: fadeIn;
+            animation-duration: $lte-transition-speed;
+            animation-fill-mode: both;
+            animation-delay: $lte-transition-speed;
           }
         }
       }
@@ -341,33 +512,27 @@
           position: fixed;
           top: 0;
           bottom: 0;
-          left: 0;
           max-height: 100vh;
           margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1); // stylelint-disable-line function-disallowed-list
 
           .sidebar-wrapper {
-            height: subtract(100vh, add($lte-app-header-height-inner, $lte-app-header-bottom-border-width));
-            overflow-x: hidden;
-            overflow-y: auto;
+            height: subtract(100vh, add($lte-app-header-height, 1px));
           }
         }
 
-        &.sidebar-mini .app-sidebar {
-          margin-left: -$lte-sidebar-mini-width;
-        }
-
         &.sidebar-open {
           .app-sidebar {
             margin-left: 0;
           }
 
           .sidebar-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
+            position: absolute;
+            inset: 0;
             z-index: $lte-zindex-sidebar-overlay;
             width: 100%;
             height: 100%;
+            cursor: pointer;
+            visibility: visible;
             background-color: rgba(0, 0, 0, .2);
             animation-name: fadeIn;
             animation-fill-mode: both;
@@ -378,6 +543,13 @@
   }
 }
 
+.sidebar-menu .nav-link p,
+.app-sidebar .brand-text,
+.app-sidebar .logo-xs,
+.app-sidebar .logo-xl {
+  @include transition(margin-left $lte-transition-speed linear, opacity $lte-transition-speed ease, visibility $lte-transition-speed ease);
+}
+
 // To prevent onload transition and animation
 .app-loaded {
   &.sidebar-mini.sidebar-collapse {
@@ -400,7 +572,9 @@ body:not(.app-loaded) {
   .app-header,
   .app-sidebar,
   .app-main,
-  .app-footer {
+  .app-footer,
+  .nav-arrow,
+  .nav-badge {
     @include transition(none !important);
     animation-duration: 0s !important;
   }

package/src/scss/_bootstrap-variables.scss

@@ -384,7 +384,7 @@ $enable-cssgrid:              false !default;
 $enable-button-pointers:      true !default;
 $enable-rfs:                  true !default;
 $enable-validation-icons:     true !default;
-$enable-negative-margins:     true !default;
+$enable-negative-margins:     true !default; // adminlte-modified
 $enable-deprecation-messages: true !default;
 $enable-important-utilities:  true !default;
 
@@ -455,7 +455,7 @@ $body-emphasis-color:       $black !default;
 // Style anchor elements.
 
 $link-color:                              $primary !default;
-$link-decoration:                         none !default; // adminlte-modified
+$link-decoration:                         underline !default;
 $link-shade-percentage:                   20% !default;
 $link-hover-color:                        shift-color($link-color, $link-shade-percentage) !default;
 $link-hover-decoration:                   null !default;
@@ -1248,7 +1248,7 @@ $dropdown-bg:                       var(--#{$prefix}body-bg) !default;
 $dropdown-border-color:             var(--#{$prefix}border-color-translucent) !default;
 $dropdown-border-radius:            var(--#{$prefix}border-radius) !default;
 $dropdown-border-width:             var(--#{$prefix}border-width) !default;
-$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
+$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;
 $dropdown-divider-bg:               $dropdown-border-color !default;
 $dropdown-divider-margin-y:         $spacer * .5 !default;
 $dropdown-box-shadow:               $box-shadow !default;
@@ -1439,7 +1439,7 @@ $popover-max-width:                 276px !default;
 $popover-border-width:              var(--#{$prefix}border-width) !default;
 $popover-border-color:              var(--#{$prefix}border-color-translucent) !default;
 $popover-border-radius:             var(--#{$prefix}border-radius-lg) !default;
-$popover-inner-border-radius:       calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
+$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;
 $popover-box-shadow:                $box-shadow !default;
 
 $popover-header-font-size:          $font-size-base !default;

package/src/scss/_cards.scss

@@ -5,9 +5,9 @@
 // Color variants
 .card {
   @include box-shadow($lte-card-shadow);
-  margin-bottom: map-get($spacers, 3);
 
-  &[class*="card-"]:not(.card-outline) {
+  &[class*="card-"]:not(.card-outline),
+  &[class*="text-bg-"]:not(.card-outline) {
     > .card-header {
       color: var(--#{$lte-prefix}card-variant-color);
       background-color: var(--#{$lte-prefix}card-variant-bg);
@@ -45,20 +45,41 @@
       display: none;
     }
 
+    [data-lte-icon="maximize"] {
+      display: none;
+    }
+
     .card-header,
     .card-footer {
       @include border-radius(0 !important);
     }
   }
 
+  &:not(.maximized-card) {
+    [data-lte-icon="minimize"] {
+      display: none;
+    }
+  }
+
   // collapsed mode
   &.collapsed-card {
+    [data-lte-icon="collapse"] {
+      display: none;
+    }
+
     .card-body,
     .card-footer {
       display: none;
     }
   }
 
+  &:not(.collapsed-card) {
+    [data-lte-icon="expand"] {
+      display: none;
+    }
+  }
+
+
   .nav.flex-column {
     > li {
       margin: 0;
@@ -249,11 +270,14 @@ html.maximized-card {
 .btn-tool {
   --#{$prefix}btn-padding-x: .5rem;
   --#{$prefix}btn-padding-y: .25rem;
-  --#{$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;
+
+  &: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;
+  }
 
   margin: -$card-spacer-y 0;
   font-size: $font-size-sm;

package/src/scss/_compact-mode.scss

@@ -0,0 +1,79 @@
+.compact-mode {
+  .app-content-top-area:not(.app-content-top-area-sm):not(.app-content-top-area-md):not(.app-content-top-area-lg):not(.app-content-top-area-xl),
+  .app-content-bottom-area:not(.app-content-bottom-area-sm):not(.app-content-bottom-area-md):not(.app-content-bottom-area-lg):not(.app-content-bottom-area-xl) {
+    padding-top: $grid-gutter-width * .425;
+    padding-bottom: $grid-gutter-width * .425;
+  }
+  .app-content-top-area-sm,
+  .app-content-bottom-area-sm {
+    min-height: $lte-app-content-bottom-area-height-sm * .825;
+  }
+
+  .app-content-top-area-md,
+  .app-content-bottom-area-md {
+    min-height: $lte-app-content-bottom-area-height-md * .825;
+  }
+
+  .app-content-top-area-lg,
+  .app-content-bottom-area-lg {
+    min-height: $lte-app-content-bottom-area-height-lg * .825;
+  }
+
+  .app-content-top-area-xl,
+  .app-content-bottom-area-xl {
+    min-height: $lte-app-content-bottom-area-height-xl * .825;
+  }
+
+
+  .app-header {
+    max-height: $lte-app-header-height-compact;
+
+    .nav-link {
+      max-height: $nav-link-height-compact;
+    }
+  }
+
+  .nav-link {
+    --bs-nav-link-padding-y: .25rem;
+    --bs-nav-link-padding-x: .5rem;
+  }
+
+  &.sidebar-mini.sidebar-collapse {
+    .app-sidebar:not(:hover) {
+      min-width: $lte-sidebar-mini-width-compact;
+      max-width: $lte-sidebar-mini-width-compact;
+
+      .sidebar-menu {
+        .nav-link {
+          width: $lte-sidebar-mini-width-compact - $lte-sidebar-padding-x * 2 !important;
+        }
+      }
+    }
+  }
+
+  .logo-xs,
+  .logo-xl {
+    max-height: $lte-app-header-height-compact;
+  }
+
+  .brand-image {
+    width: $nav-link-height-compact;
+    height: $nav-link-height-compact;
+  }
+
+  .sidebar-brand {
+    height: $lte-app-header-height-compact;
+  }
+
+  .app-footer {
+    padding: $lte-app-footer-padding-compact;
+  }
+
+  .sidebar-wrapper {
+    .nav-icon {
+      min-width: 1.1rem;
+      max-width: 1.1rem;
+    }
+  }
+}
+

package/src/scss/_small-box.scss

@@ -23,7 +23,6 @@
     display: block;
     padding: 3px 0;
     text-align: center;
-    text-decoration: none;
     background-color: rgba($black, .07);
 
     &:hover {
@@ -105,8 +104,6 @@
 
   // Small box hover state
   &:hover {
-    text-decoration: none;
-
     // Animate icons on small box hover
     .small-box-icon {
       transform: scale(1.1);