admin-lte 4.0.0-alpha1 → 4.0.0-alpha3

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:     false !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;
@@ -463,6 +463,15 @@ $link-hover-decoration:                   null !default;
 $stretched-link-pseudo-element:           after !default;
 $stretched-link-z-index:                  1 !default;
 
+// Icon links
+// scss-docs-start icon-link-variables
+$icon-link-gap:               .375rem !default;
+$icon-link-underline-offset:  .25em !default;
+$icon-link-icon-size:         1em !default;
+$icon-link-icon-transition:   .2s ease-in-out transform !default;
+$icon-link-icon-transform:    translate3d(.25em, 0, 0) !default;
+// scss-docs-end icon-link-variables
+
 // Paragraphs
 //
 // Style p element.
@@ -811,6 +820,7 @@ $input-btn-border-width:      var(--#{$prefix}border-width) !default;
 // For each of Bootstrap's buttons, define text, background, and border color.
 
 // scss-docs-start btn-variables
+$btn-color:                   var(--#{$prefix}body-color) !default;
 $btn-padding-y:               $input-btn-padding-y !default;
 $btn-padding-x:               $input-btn-padding-x !default;
 $btn-font-family:             $input-btn-font-family !default;
@@ -840,9 +850,9 @@ $btn-link-hover-color:        var(--#{$prefix}link-hover-color) !default;
 $btn-link-disabled-color:     $gray-600 !default;
 
 // Allows for customizing button radius independently from global border radius
-$btn-border-radius:           $border-radius !default;
-$btn-border-radius-sm:        $border-radius-sm !default;
-$btn-border-radius-lg:        $border-radius-lg !default;
+$btn-border-radius:           var(--#{$prefix}border-radius) !default;
+$btn-border-radius-sm:        var(--#{$prefix}border-radius-sm) !default;
+$btn-border-radius-lg:        var(--#{$prefix}border-radius-lg) !default;
 
 $btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
@@ -901,9 +911,9 @@ $input-border-color:                    var(--#{$prefix}border-color) !default;
 $input-border-width:                    $input-btn-border-width !default;
 $input-box-shadow:                      $box-shadow-inset !default;
 
-$input-border-radius:                   $border-radius !default;
-$input-border-radius-sm:                $border-radius-sm !default;
-$input-border-radius-lg:                $border-radius-lg !default;
+$input-border-radius:                   var(--#{$prefix}border-radius) !default;
+$input-border-radius-sm:                var(--#{$prefix}border-radius-sm) !default;
+$input-border-radius-lg:                var(--#{$prefix}border-radius-lg) !default;
 
 $input-focus-bg:                        $input-bg !default;
 $input-focus-border-color:              tint-color($component-active-bg, 50%) !default;
@@ -914,7 +924,7 @@ $input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
 $input-placeholder-color:               var(--#{$prefix}secondary-color) !default;
 $input-plaintext-color:                 var(--#{$prefix}body-color) !default;
 
-$input-height-border:                   calc($input-border-width * 2) !default; // stylelint-disable-line function-disallowed-list
+$input-height-border:                   calc(#{$input-border-width} * 2) !default; // stylelint-disable-line function-disallowed-list
 
 $input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;
 $input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;
@@ -1068,7 +1078,7 @@ $form-floating-padding-x:               $input-padding-x !default;
 $form-floating-padding-y:               1rem !default;
 $form-floating-input-padding-t:         1.625rem !default;
 $form-floating-input-padding-b:         .625rem !default;
-$form-floating-label-height:            1.875em !default;
+$form-floating-label-height:            1.5em !default;
 $form-floating-label-opacity:           .65 !default;
 $form-floating-label-transform:         scale(.85) translateY(-.5rem) translateX(.15rem) !default;
 $form-floating-label-disabled-color:    $gray-600 !default;
@@ -1090,23 +1100,30 @@ $form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
 $form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
 // scss-docs-end form-feedback-variables
 
+// scss-docs-start form-validation-colors
+$form-valid-color:                  $form-feedback-valid-color !default;
+$form-valid-border-color:           $form-feedback-valid-color !default;
+$form-invalid-color:                $form-feedback-invalid-color !default;
+$form-invalid-border-color:         $form-feedback-invalid-color !default;
+// scss-docs-end form-validation-colors
+
 // scss-docs-start form-validation-states
 $form-validation-states: (
   "valid": (
-    "color": var(--#{$prefix}success-text),
+    "color": var(--#{$prefix}form-valid-color),
     "icon": $form-feedback-icon-valid,
     "tooltip-color": #fff,
     "tooltip-bg-color": var(--#{$prefix}success),
     "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
-    "border-color": var(--#{$prefix}success),
+    "border-color": var(--#{$prefix}form-valid-border-color),
   ),
   "invalid": (
-    "color": var(--#{$prefix}danger-text),
+    "color": var(--#{$prefix}form-invalid-color),
     "icon": $form-feedback-icon-invalid,
     "tooltip-color": #fff,
     "tooltip-bg-color": var(--#{$prefix}danger),
     "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),
-    "border-color": var(--#{$prefix}danger),
+    "border-color": var(--#{$prefix}form-invalid-border-color),
   )
 ) !default;
 // scss-docs-end form-validation-states
@@ -1151,7 +1168,6 @@ $nav-link-color:                    var(--#{$prefix}link-color) !default;
 $nav-link-hover-color:              var(--#{$prefix}link-hover-color) !default;
 $nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
 $nav-link-disabled-color:           var(--#{$prefix}secondary-color) !default;
-$nav-link-disabled-color:           $gray-600 !default;
 $nav-link-focus-box-shadow:         $focus-ring-box-shadow !default;
 
 $nav-tabs-border-color:             var(--#{$prefix}border-color) !default;
@@ -1162,7 +1178,7 @@ $nav-tabs-link-active-color:        var(--#{$prefix}emphasis-color) !default;
 $nav-tabs-link-active-bg:           var(--#{$prefix}body-bg) !default;
 $nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg !default;
 
-$nav-pills-border-radius:           $border-radius !default;
+$nav-pills-border-radius:           var(--#{$prefix}border-radius) !default;
 $nav-pills-link-active-color:       $component-active-color !default;
 $nav-pills-link-active-bg:          $component-active-bg !default;
 
@@ -1230,9 +1246,9 @@ $dropdown-font-size:                $font-size-base !default;
 $dropdown-color:                    var(--#{$prefix}body-color) !default;
 $dropdown-bg:                       var(--#{$prefix}body-bg) !default;
 $dropdown-border-color:             var(--#{$prefix}border-color-translucent) !default;
-$dropdown-border-radius:            $border-radius !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;
@@ -1244,7 +1260,7 @@ $dropdown-link-hover-bg:            var(--#{$prefix}tertiary-bg) !default;
 $dropdown-link-active-color:        $component-active-color !default;
 $dropdown-link-active-bg:           $component-active-bg !default;
 
-$dropdown-link-disabled-color:      $gray-500 !default;
+$dropdown-link-disabled-color:      var(--#{$prefix}tertiary-color) !default;
 
 $dropdown-item-padding-y:           $spacer * .25 !default;
 $dropdown-item-padding-x:           $spacer !default;
@@ -1289,7 +1305,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(#{$pagination-border-width} * -1) !default; // stylelint-disable-line function-disallowed-list
 $pagination-border-color:           var(--#{$prefix}border-color) !default;
 
 $pagination-focus-color:            var(--#{$prefix}link-hover-color) !default;
@@ -1311,8 +1327,8 @@ $pagination-disabled-border-color:  var(--#{$prefix}border-color) !default;
 
 $pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
-$pagination-border-radius-sm:       $border-radius-sm !default;
-$pagination-border-radius-lg:       $border-radius-lg !default;
+$pagination-border-radius-sm:       var(--#{$prefix}border-radius-sm) !default;
+$pagination-border-radius-lg:       var(--#{$prefix}border-radius-lg) !default;
 // scss-docs-end pagination-variables
 
 
@@ -1368,7 +1384,7 @@ $accordion-button-color:                  var(--#{$prefix}body-color) !default;
 $accordion-button-bg:                     var(--#{$prefix}accordion-bg) !default;
 $accordion-transition:                    $btn-transition, border-radius .15s ease !default;
 $accordion-button-active-bg:              var(--#{$prefix}primary-bg-subtle) !default;
-$accordion-button-active-color:           var(--#{$prefix}primary-text) !default;
+$accordion-button-active-color:           var(--#{$prefix}primary-text-emphasis) !default;
 
 $accordion-button-focus-border-color:     $input-focus-border-color !default;
 $accordion-button-focus-box-shadow:       $btn-focus-box-shadow !default;
@@ -1423,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;
@@ -1476,7 +1492,7 @@ $badge-font-weight:                 $font-weight-bold !default;
 $badge-color:                       $white !default;
 $badge-padding-y:                   .35em !default;
 $badge-padding-x:                   .65em !default;
-$badge-border-radius:               $border-radius !default;
+$badge-border-radius:               var(--#{$prefix}border-radius) !default;
 // scss-docs-end badge-variables
 
 
@@ -1534,7 +1550,7 @@ $modal-scale-transform:             scale(1.02) !default;
 $alert-padding-y:               $spacer !default;
 $alert-padding-x:               $spacer !default;
 $alert-margin-bottom:           1rem !default;
-$alert-border-radius:           $border-radius !default;
+$alert-border-radius:           var(--#{$prefix}border-radius) !default;
 $alert-link-font-weight:        $font-weight-bold !default;
 $alert-border-width:            var(--#{$prefix}border-width) !default;
 $alert-bg-scale:                -80% !default;
@@ -1694,7 +1710,6 @@ $btn-close-height:           $btn-close-width !default;
 $btn-close-padding-x:        .25em !default;
 $btn-close-padding-y:        $btn-close-padding-x !default;
 $btn-close-color:            $black !default;
-$btn-close-focus-shadow:     $input-btn-focus-box-shadow !default;
 $btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;
 $btn-close-focus-shadow:     $focus-ring-box-shadow !default;
 $btn-close-opacity:          .5 !default;

package/src/scss/_callouts.scss

@@ -0,0 +1,34 @@
+//
+// Callouts
+//
+
+.callout {
+  --#{$prefix}link-color-rgb: var(--#{$lte-prefix}callout-link);
+  --#{$prefix}code-color: var(--#{$lte-prefix}callout-code-color);
+
+  padding: 1.25rem;
+  color: var(--#{$lte-prefix}callout-color, inherit);
+  background-color: var(--#{$lte-prefix}callout-bg, var(--bs-gray-100));
+  border-left: .25rem solid var(--#{$lte-prefix}callout-border, var(--bs-gray-300));
+
+  h4 {
+    margin-bottom: .25rem;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  + .callout {
+    margin-top: -.25rem;
+  }
+}
+
+// Variations
+@each $name, $color in $theme-colors {
+  .callout-#{$name} {
+    --#{$lte-prefix}callout-color: var(--#{$prefix}#{$name}-text-emphasis);
+    --#{$lte-prefix}callout-bg: var(--#{$prefix}#{$name}-bg-subtle);
+    --#{$lte-prefix}callout-border: var(--#{$prefix}#{$name}-border-subtle);
+  }
+}

package/src/scss/_cards.scss

@@ -3,29 +3,26 @@
 //
 
 // Color variants
-@each $name, $color in $theme-colors {
-  @include cards-variant($name, $color);
-}
-
-@each $name, $color in $colors {
-  @include cards-variant($name, $color);
-}
-
 .card {
   @include box-shadow($lte-card-shadow);
-  margin-bottom: map-get($spacers, 3);
 
-  &.bg-dark {
-    .card-header {
-      border-color: $lte-card-dark-border-color;
-    }
+  &[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);
 
-    &,
-    .card-body {
-      color: $white;
+      .btn-tool {
+        --#{$prefix}btn-color: rgba(var(--#{$lte-prefix}card-variant-color-rgb), .8);
+        --#{$prefix}btn-hover-color: var(--#{$lte-prefix}card-variant-color);
+      }
     }
   }
 
+  &.card-outline {
+    border-top: 3px solid var(--#{$lte-prefix}card-variant-bg);
+  }
+
   &.maximized-card {
     position: fixed;
     top: 0;
@@ -48,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;
@@ -206,7 +224,7 @@ html.maximized-card {
 .card-header,
 .card-body,
 .card-footer {
-  @include clearfix ();
+  @include clearfix();
 }
 
 // Box header
@@ -248,47 +266,36 @@ html.maximized-card {
   font-weight: $lte-card-title-font-weight;
 }
 
-.card-text {
-  clear: both;
-}
-
-
 // Box Tools Buttons
 .btn-tool {
-  padding: .25rem .5rem;
-  margin: -(($card-spacer-y * .5) * 2) 0;
-  font-size: $font-size-sm;
-  color: $gray-500;
-  background-color: transparent;
-
-  .btn-group.show &,
-  &:hover {
-    color: $gray-700;
+  --#{$prefix}btn-padding-x: .5rem;
+  --#{$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;
   }
 
-  .show &,
-  &:focus {
-    box-shadow: none !important;
-  }
+  margin: -$card-spacer-y 0;
+  font-size: $font-size-sm;
 }
 
-.fs-7 {
-  .card-title {
-    font-size: $lte-card-title-font-size-sm;
-  }
-
-  .nav-link {
-    padding: $lte-card-nav-link-padding-sm-y $lte-card-nav-link-padding-sm-x;
+@each $name, $color in $theme-colors {
+  .card-#{$name},
+  .bg-#{$name},
+  .text-bg-#{$name} {
+    --#{$lte-prefix}card-variant-bg: #{$color};
+    --#{$lte-prefix}card-variant-bg-rgb: #{to-rgb($color)};
+    --#{$lte-prefix}card-variant-color: #{color-contrast($color)};
+    --#{$lte-prefix}card-variant-color-rgb: #{to-rgb(color-contrast($color))};
   }
 }
 
 // Box Body
 .card-body {
-  // @include border-radius-sides(0, 0, $border-radius, $border-radius);
-  // .no-header & {
-  //   @include border-top-radius($border-radius);
-  // }
-
   // Tables within the box body
   > .table {
     margin-bottom: 0;
@@ -298,181 +305,4 @@ html.maximized-card {
       border-top-width: 0;
     }
   }
-
-  // Calendar within the box body
-  .fc {
-    margin-top: 5px;
-  }
-
-  .full-width-chart {
-    margin: -19px;
-  }
-
-  &.p-0 .full-width-chart {
-    margin: -9px;
-  }
-}
-
-.chart-legend {
-  @include list-unstyled ();
-  margin: 10px 0;
-
-  > li {
-    @media (max-width: map-get($grid-breakpoints, sm)) {
-      float: left;
-      margin-right: 10px;
-    }
-  }
-}
-
-// Comment Box
-.card-comments {
-  background-color: $gray-100;
-
-  .card-comment {
-    @include clearfix ();
-    padding: 8px 0;
-    border-bottom: 1px solid $gray-200;
-
-    &:last-of-type {
-      border-bottom: 0;
-    }
-
-    &:first-of-type {
-      padding-top: 0;
-    }
-
-    img {
-      float: left;
-      width: $lte-card-img-size;
-      height: $lte-card-img-size;
-    }
-  }
-
-  .comment-text {
-    margin-left: 40px;
-    color: tint-color($gray-700, 20%);
-  }
-
-  .username {
-    display: block;
-    font-weight: 600;
-    color: $gray-700;
-  }
-
-  .text-muted {
-    font-size: 12px;
-    font-weight: 400;
-  }
-}
-
-// Widgets
-//-----------
-
-// Widget: TODO LIST
-.todo-list {
-  padding: 0;
-  margin: 0;
-  overflow: auto;
-  list-style: none;
-
-  // Todo list element
-  > li {
-    padding: 10px;
-    margin-bottom: 2px;
-    color: $gray-700;
-    background-color: $gray-100;
-    border-left: 2px solid $gray-200;
-    @include border-radius(2px);
-
-    &:last-of-type {
-      margin-bottom: 0;
-    }
-
-    > input[type="checkbox"] {
-      margin: 0 10px 0 5px;
-    }
-
-    .text {
-      display: inline-block;
-      margin-left: 5px;
-      font-weight: 600;
-    }
-
-    // Time labels
-    .badge {
-      margin-left: 10px;
-      font-size: .7rem;
-    }
-
-    // Tools and options box
-    .tools {
-      display: none;
-      float: right;
-      color: $danger;
-
-      // TODO: create new class for reduce files
-      // icons
-      > i,
-      > svg,
-      > img,
-      > object,
-      > iframe {
-        margin-right: 5px;
-        cursor: pointer;
-      }
-    }
-
-    &:hover .tools {
-      display: inline-block;
-    }
-
-    &.done {
-      color: shade-color($gray-500, 25%);
-
-      .text {
-        font-weight: 500;
-        text-decoration: line-through;
-      }
-
-      .badge {
-        background-color: $gray-500 !important;
-      }
-    }
-  }
-
-  // Color variants
-  @each $name, $color in $theme-colors {
-    .#{$name} {
-      border-left-color: $color;
-    }
-  }
-
-  @each $name, $color in $colors {
-    .#{$name} {
-      border-left-color: $color;
-    }
-  }
-
-  .handle {
-    display: inline-block;
-    margin: 0 5px;
-    cursor: move;
-  }
-}
-
-// END TODO WIDGET
-
-// Input in box
-.card-input {
-  max-width: 200px;
-}
-
-// Nav Tabs override
-.card-default {
-  .nav-item {
-    &:first-child .nav-link {
-      border-left: 0;
-    }
-  }
 }

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