admin-lte 4.0.0-rc6 → 4.0.0

package/src/scss/_app-header.scss

@@ -31,4 +31,31 @@
     top: 0;
     z-index: $lte-zindex-fixed-header;
   }
+
+  // Fixes #6020: when only `fixed-header` is used (without `layout-fixed`),
+  // the sidebar — including its branding — used to scroll with the page
+  // because nothing made it sticky. Pin the sidebar so the brand and menu
+  // stay visible while the page content scrolls beneath the fixed header.
+  // Only applied on `sidebar-expand-*` breakpoints, since the mobile sidebar
+  // is an off-canvas overlay that handles its own positioning.
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($next, $grid-breakpoints);
+
+    &.sidebar-expand#{$infix} {
+      @include media-breakpoint-up($next) {
+        .app-sidebar {
+          position: sticky;
+          top: 0;
+          max-height: 100vh;
+
+          .sidebar-wrapper {
+            height: subtract(100vh, add($lte-app-header-height, 1px));
+            overflow-x: hidden;
+            overflow-y: auto;
+          }
+        }
+      }
+    }
+  }
 }

package/src/scss/_app-sidebar.scss

@@ -78,6 +78,7 @@
   padding-right: $lte-sidebar-padding-x;
   padding-bottom: $lte-sidebar-padding-y;
   padding-left: $lte-sidebar-padding-x;
+  overscroll-behavior: contain;
   @include scrollbar-color-gray();
   @include scrollbar-width-thin();
 
@@ -105,31 +106,31 @@
 
   // Sidebar Menu. First level links
   .sidebar-menu > .nav-item {
-    &.menu-open {
-      .nav-link.active:not(:hover) {
-        --#{$lte-prefix}sidebar-menu-active-bg: transparent;
-      }
-    }
-
     // links
     > .nav-link {
-      &:active,
+      color: var(--#{$lte-prefix}sidebar-color);
+
+      &:hover,
       &:focus {
-        color: var(--#{$lte-prefix}sidebar-color);
+        color: var(--#{$lte-prefix}sidebar-hover-color);
+        background-color: var(--#{$lte-prefix}sidebar-hover-bg);
       }
-    }
 
-    > .nav-link.active:not(:hover) {
-      color: var(--#{$lte-prefix}sidebar-menu-active-color);
-      background-color: var(--#{$lte-prefix}sidebar-menu-active-bg);
+      &.active {
+        color: var(--#{$lte-prefix}sidebar-menu-active-color);
+        background-color: var(--#{$lte-prefix}sidebar-menu-active-bg);
+      }
     }
 
-    // Hover and active states
-    &.menu-open > .nav-link,
-    &:hover > .nav-link,
-    > .nav-link:focus  {
+    // Open state
+    &.menu-open > .nav-link {
       color: var(--#{$lte-prefix}sidebar-hover-color);
       background-color: var(--#{$lte-prefix}sidebar-hover-bg);
+
+      &.active {
+        color: var(--#{$lte-prefix}sidebar-menu-active-color);
+        background-color: var(--#{$lte-prefix}sidebar-menu-active-bg);
+      }
     }
 
     // First Level Submenu
@@ -161,22 +162,14 @@
         &:hover,
         &:focus {
           color: var(--#{$lte-prefix}sidebar-submenu-hover-color);
-          // background-color: var(--#{$lte-prefix}sidebar-submenu-hover-bg);
+          background-color: var(--#{$lte-prefix}sidebar-submenu-hover-bg);
         }
-      }
 
-      > .nav-link.active {
-        &,
-        &:hover,
-        &:focus {
+        &.active {
           color: var(--#{$lte-prefix}sidebar-submenu-active-color);
           background-color: var(--#{$lte-prefix}sidebar-submenu-active-bg);
         }
       }
-
-      > .nav-link:hover {
-        background-color: var(--#{$lte-prefix}sidebar-submenu-hover-bg);
-      }
     }
   }
 }
@@ -240,10 +233,6 @@
     display: none;
     padding: 0;
     list-style: none;
-
-    .nav-indent & {
-      padding-left: $lte-sidebar-padding-x;
-    }
   }
 
   .menu-open {
@@ -268,6 +257,12 @@
   }
 }
 
+.nav-indent {
+  .nav-treeview {
+    padding-left: $lte-sidebar-padding-x;
+  }
+}
+
 .nav-compact.nav-indent {
   .nav-treeview {
     padding-left: 0;
@@ -403,55 +398,59 @@
     animation-fill-mode: both;
   }
 
-  .app-sidebar:hover {
-    min-width: var(--#{$lte-prefix}sidebar-width);
-    max-width: var(--#{$lte-prefix}sidebar-width);
+  &:not(.sidebar-without-hover) {
+    .app-sidebar:hover {
+      min-width: var(--#{$lte-prefix}sidebar-width);
+      max-width: var(--#{$lte-prefix}sidebar-width);
 
-    .sidebar-menu .nav-header {
-      display: inline;
-    }
+      .sidebar-menu .nav-header {
+        display: inline;
+      }
 
-    .sidebar-menu .nav-link {
-      width: auto;
-    }
+      .sidebar-menu .nav-link {
+        width: auto;
+      }
 
-    .sidebar-menu .nav-link p,
-    .brand-text,
-    .logo-xl {
-      width: auto;
-      margin-left: 0;
-      visibility: visible;
-      animation-name: fadeIn;
-      animation-duration: $lte-transition-speed;
-      animation-fill-mode: both;
-    }
+      .sidebar-menu .nav-link p,
+      .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;
-    }
+      .brand-text {
+        display: inline;
+        max-width: inherit;
+        margin-left: .5rem;
+        animation-name: fadeIn;
+        animation-duration: $lte-transition-speed;
+        animation-fill-mode: both;
+      }
 
-    .nav-link p {
-      padding-left: .5rem;
-    }
-    .logo-xs {
-      visibility: hidden;
-      animation-name: fadeOut;
-      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;
+      }
     }
   }
 }

package/src/scss/_bootstrap-variables.scss

@@ -1312,7 +1312,7 @@ $pagination-color:                  var(--#{$prefix}link-color) !default;
 $pagination-bg:                     var(--#{$prefix}body-bg) !default;
 $pagination-border-radius:          var(--#{$prefix}border-radius) !default;
 $pagination-border-width:           var(--#{$prefix}border-width) !default;
-$pagination-margin-start:           calc(#{$pagination-border-width} * -1) !default; // stylelint-disable-line function-disallowed-list
+$pagination-margin-start:           calc(-1 * #{$pagination-border-width}) !default; // stylelint-disable-line function-disallowed-list
 $pagination-border-color:           var(--#{$prefix}border-color) !default;
 
 $pagination-focus-color:            var(--#{$prefix}link-hover-color) !default;
@@ -1517,6 +1517,8 @@ $modal-dialog-margin-y-sm-up:       1.75rem !default;
 
 $modal-title-line-height:           $line-height-base !default;
 
+// AdminLTE keeps `$modal-content-color: null` so the modal text colour is
+// inherited from the document. Bootstrap's default is `var(--#{$prefix}body-color)`.
 $modal-content-color:               null !default;
 $modal-content-bg:                  var(--#{$prefix}body-bg) !default;
 $modal-content-border-color:        var(--#{$prefix}border-color-translucent) !default;
@@ -1684,12 +1686,16 @@ $carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://
 
 $carousel-transition-duration:       .6s !default;
 $carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
+$carousel-control-icon-filter:       null !default;
 // scss-docs-end carousel-variables
 
 // scss-docs-start carousel-dark-variables
-$carousel-dark-indicator-active-bg:  $black !default;
-$carousel-dark-caption-color:        $black !default;
-$carousel-dark-control-icon-filter:  invert(1) grayscale(100) !default;
+// Carousel "dark" variables below have been deprecated in Bootstrap 5.3.4.
+// Use the `.carousel` colour-mode rules and `$carousel-control-icon-filter`
+// instead.
+$carousel-dark-indicator-active-bg:  $black !default; // Deprecated in 5.3.4
+$carousel-dark-caption-color:        $black !default; // Deprecated in 5.3.4
+$carousel-dark-control-icon-filter:  invert(1) grayscale(100) !default; // Deprecated in 5.3.4
 // scss-docs-end carousel-dark-variables
 
 
@@ -1722,7 +1728,8 @@ $btn-close-opacity:          .5 !default;
 $btn-close-hover-opacity:    .75 !default;
 $btn-close-focus-opacity:    1 !default;
 $btn-close-disabled-opacity: .25 !default;
-$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%) !default;
+$btn-close-filter:           null !default;
+$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%) !default; // Deprecated in 5.3.4. Use `$btn-close-filter` with the `.btn-close` colour-mode rules instead.
 // scss-docs-end close-variables