admin-lte 4.0.0-alpha2 → 4.0.0-beta1

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;
@@ -151,6 +172,7 @@
       }
 
       a {
+        text-decoration: none;
         border-top: 3px solid transparent;
 
         &:hover {
@@ -249,11 +271,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/_direct-chat.scss

@@ -169,11 +169,16 @@
     @include clearfix();
     padding: 10px;
     margin: 0;
+    text-decoration: none;
     border-bottom: 1px solid rgba($black, .2);
 
     &:last-of-type {
       border-bottom: 0;
     }
+
+    a {
+      text-decoration: none;
+    }
   }
 }
 

package/src/scss/_dropdown.scss

@@ -204,6 +204,7 @@
       border-bottom: 1px solid var(--#{$prefix}border-color-translucent);
 
       a {
+        text-decoration: none;
         @include media-breakpoint-up(sm) {
           color: var(--#{$prefix}body-color) !important;
           background-color: var(--#{$prefix}body-bg) !important;

package/src/scss/_info-box.scss

@@ -18,10 +18,10 @@
   .progress {
     height: 2px;
     margin: 5px 0;
-    background-color: rgba($black, .125);
+    background-color: rgba(var(--#{$lte-prefix}card-variant-color-rgb), .125);
 
     .progress-bar {
-      background-color: $white;
+      background-color: var(--#{$lte-prefix}card-variant-color);
     }
   }
 
@@ -62,14 +62,6 @@
     white-space: nowrap;
   }
 
-  @each $name, $color in $theme-colors {
-    .info-box {
-      .progress-bar {
-        background-color: color-contrast($color);
-      }
-    }
-  }
-
   .info-box-more {
     display: block;
   }

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);

package/src/scss/_timeline.scss

@@ -58,6 +58,7 @@
         // Link in header
         > a {
           font-weight: 600;
+          text-decoration: none;
         }
       }
       // Item body and footer

package/src/scss/_toasts.scss

@@ -0,0 +1,33 @@
+//
+// Toast
+//
+
+@each $name, $color in $theme-colors {
+  .toast-#{$name} {
+    --#{$prefix}toast-header-color: #{color-contrast($color)};
+    --#{$prefix}toast-header-bg: #{$color};
+    --#{$prefix}toast-header-border-color: #{$color};
+    --#{$prefix}toast-border-color: #{$color};
+    --#{$prefix}toast-bg: var(--#{$prefix}#{$name}-bg-subtle);
+
+    @if color-contrast($color) == $color-contrast-light {
+      .btn-close {
+        @include btn-close-white();
+      }
+    }
+  }
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    @each $name, $color in $theme-colors {
+      .toast-#{$name} {
+        @if color-contrast($color) == $color-contrast-dark {
+          .btn-close {
+            --#{$prefix}btn-close-white-filter: none;
+          }
+        }
+      }
+    }
+  }
+}

package/src/scss/_variables.scss

@@ -1,21 +1,24 @@
+//
 // Custom AdminLTE Variables
+//
 
 // Prefix for :root CSS variables and others.
 $lte-prefix:                      lte- !default;
 
 // TRANSITIONS SETTINGS
 // --------------------------------------------------------
-
 // Transition global options
 $lte-transition-speed:            .3s !default;
 $lte-transition-fn:               ease-in-out !default;
 
-// Sidebar
+// SIDEBAR
 // --------------------------------------------------------
 $lte-sidebar-width:               250px !default;
 $lte-sidebar-breakpoint:          lg !default;
 $lte-sidebar-padding-x:           .5rem !default;
+$lte-sidebar-padding-x-compact:   .5rem !default;
 $lte-sidebar-padding-y:           .5rem !default;
+$lte-sidebar-padding-y-compact:   .25rem !default;
 $lte-sidebar-transition:          min-width $lte-transition-speed $lte-transition-fn,
   max-width $lte-transition-speed $lte-transition-fn,
   margin-left $lte-transition-speed $lte-transition-fn,
@@ -40,25 +43,38 @@ $lte-sidebar-header-color:          shade-color($gray-800, 5%) !default;
 
 // SIDEBAR MINI
 // --------------------------------------------------------
+$nav-link-padding-x-compact:      .25rem !default;
 $lte-sidebar-mini-width:          ($nav-link-padding-x + $lte-sidebar-padding-x + .8rem) * 2 !default;
+$lte-sidebar-mini-width-compact:  ($nav-link-padding-x-compact + $lte-sidebar-padding-x-compact + .8rem) * 2 !default;
 $lte-sidebar-nav-icon-width:      $lte-sidebar-mini-width - (($lte-sidebar-padding-x + $nav-link-padding-x) * 2) !default;
-$lte-sidebar-user-image-width:    $lte-sidebar-nav-icon-width + ($nav-link-padding-x * .5) !default;
+$lte-sidebar-user-image-width:    $lte-sidebar-nav-icon-width + ($nav-link-padding-x * .4) !default;
 
 // MAIN HEADER
 // --------------------------------------------------------
+$nav-link-height-compact:             1.75rem !default;
 $lte-app-header-bottom-border-width:  $border-width !default;
 $lte-app-header-bottom-border-color:  var(--#{$prefix}border-color) !default;
 $lte-app-header-bottom-border:        $lte-app-header-bottom-border-width solid $lte-app-header-bottom-border-color !default;
 $lte-app-header-link-padding-y:       $navbar-padding-y !default;
-$lte-app-header-height-inner:         ($nav-link-height + ($lte-app-header-link-padding-y * 2)) !default;
+$lte-app-header-height:               ($nav-link-height + ($lte-app-header-link-padding-y * 2)) !default;
+$lte-app-header-height-compact:       ($nav-link-height-compact + ($lte-app-header-link-padding-y * 2)) !default;
 
-// Content padding
+// CONTENT PADDING
+// --------------------------------------------------------
 $lte-content-padding-y:           0 !default;
 $lte-content-padding-x:           .5rem !default;
 
+// MAIN CONTENT
+// --------------------------------------------------------
+$lte-app-content-bottom-area-height-sm: 3.5rem !default;
+$lte-app-content-bottom-area-height-md: 6rem !default;
+$lte-app-content-bottom-area-height-lg: 9rem !default;
+$lte-app-content-bottom-area-height-xl: 12rem !default;
+
 // MAIN FOOTER
 // --------------------------------------------------------
 $lte-app-footer-padding:           1rem !default;
+$lte-app-footer-padding-compact:   .5rem !default;
 $lte-app-footer-border-top-width:  1px !default;
 $lte-app-footer-border-top-color:  var(--#{$prefix}border-color) !default;
 $lte-app-footer-border-top:        $lte-app-footer-border-top-width solid $lte-app-footer-border-top-color !default;
@@ -67,12 +83,15 @@ $lte-app-footer-color:             var(--#{$prefix}secondary-color) !default;
 
 // BRAND LINK
 // --------------------------------------------------------
-$lte-brand-link-padding-y:        $navbar-brand-padding-y + $navbar-padding-y !default;
-$lte-brand-link-padding-x:        $lte-sidebar-padding-x !default;
+$navbar-brand-padding-y-compact:   $navbar-brand-padding-y * .75 !default;
+$navbar-padding-y-compact:         $navbar-padding-y * .5 !default;
+$lte-brand-link-padding-y:         $navbar-brand-padding-y + $navbar-padding-y !default;
+$lte-brand-link-padding-y-compact: $navbar-brand-padding-y-compact + $navbar-padding-y-compact !default;
+$lte-brand-link-padding-x:         $lte-sidebar-padding-x !default;
+$lte-brand-link-padding-x-compact: $lte-sidebar-padding-x-compact !default;
 $lte-brand-link-border-buttom:    1px !default;
 
-
-// Cards
+// CARDS
 // --------------------------------------------------------
 $lte-card-shadow: 0 0 1px rgba(var(--#{$prefix}body-color-rgb), .125), 0 1px 3px rgba(var(--#{$prefix}body-color-rgb), .2) !default;
 $lte-card-title-font-size: 1.1rem !default;
@@ -82,6 +101,10 @@ $lte-card-title-font-weight: $font-weight-normal !default;
 // --------------------------------------------------------
 $lte-progress-bar-border-radius: 1px !default;
 
+// CALLOUTS
+// --------------------------------------------------------
+$lte-callout-link-font-weight: $alert-link-font-weight !default;
+
 // DIRECT CHAT
 // --------------------------------------------------------
 $lte-direct-chat-default-msg-bg: var(--#{$prefix}secondary-bg) !default;

package/src/scss/adminlte.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v4.0.0-alpha2
+ *   AdminLTE v4.0.0-beta1
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
  *   License: Open source - MIT <https://opensource.org/licenses/MIT>
@@ -60,7 +60,6 @@
 // Bootstrap Utilities
 @import "bootstrap/scss/utilities/api";
 
-
 // AdminLTE Configuration
 // ---------------------------------------------------
 @import "variables";

package/src/scss/mixins/_animations.scss

@@ -29,27 +29,22 @@
   }
 }
 
-
 @keyframes fadeIn {
   from {
-    visibility: hidden;
     opacity: 0;
   }
 
   to {
-    visibility: visible;
     opacity: 1;
   }
 }
 
 @keyframes fadeOut {
   from {
-    visibility: visible;
     opacity: 1;
   }
 
   to {
-    visibility: hidden;
     opacity: 0;
   }
 }

package/src/scss/pages/_lockscreen.scss

@@ -0,0 +1,75 @@
+//
+// Pages: Lock Screen
+//
+
+// ADD THIS CLASS TO THE <BODY> TAG
+.lockscreen {
+  // User name [optional]
+  .lockscreen-name {
+    font-weight: 600;
+    text-align: center;
+  }
+
+  .lockscreen-logo {
+    margin-bottom: 25px;
+    font-size: 35px;
+    font-weight: 300;
+    text-align: center;
+
+    a {
+      color: var(--#{$prefix}emphasis-color);
+      text-decoration: none;
+    }
+  }
+
+  .lockscreen-wrapper {
+    max-width: 400px;
+    margin: 0 auto;
+    margin-top: 10%;
+  }
+
+  // Will contain the image and the sign in form
+  .lockscreen-item {
+    position: relative;
+    width: 290px;
+    padding: 0;
+    margin: 10px auto 30px;
+    background-color: var(--#{$prefix}body-bg);
+    @include border-radius(4px);
+  }
+
+  // User image
+  .lockscreen-image {
+    position: absolute;
+    top: -25px;
+    left: -10px;
+    z-index: 10;
+    padding: 5px;
+    background-color: var(--#{$prefix}body-bg);
+    @include border-radius(50%);
+
+    > img {
+      @include border-radius(50%);
+      width: 70px;
+      height: 70px;
+    }
+  }
+
+  // Contains the password input and the login button
+  .lockscreen-credentials {
+    margin-left: 70px;
+
+    .form-control {
+      border: 0;
+    }
+
+    .btn {
+      padding: 0 10px;
+      border: 0;
+    }
+  }
+
+  .lockscreen-footer {
+    margin-top: 10px;
+  }
+}

package/src/scss/pages/_login_and_register.scss

@@ -11,6 +11,7 @@
 
   a {
     color: var(--#{$prefix}secondary-color);
+    text-decoration: none;
   }
 }
 
@@ -46,8 +47,6 @@
 
   .input-group {
     .form-control {
-      border-right: 0;
-
       &:focus {
         box-shadow: none;
 
@@ -82,7 +81,6 @@
     .input-group-text {
       color: var(--#{$prefix}secondary-color);
       background-color: transparent;
-      border-left: 0;
       @include border-top-end-radius($border-radius);
       @include border-bottom-end-radius($border-radius);
       @include transition($input-transition);

package/src/scss/parts/_core.scss

@@ -4,10 +4,12 @@
 
 @import "../root";
 @import "../app-wrapper";
+@import "../app-content";
 @import "../app-header";
 @import "../app-sidebar";
 @import "../app-main";
 @import "../app-footer";
 @import "../dropdown";
 @import "../callouts";
+@import "../compact-mode";
 @import "../docs";

package/src/scss/parts/_extra-components.scss

@@ -6,3 +6,4 @@
 @import "../info-box";
 @import "../timeline";
 @import "../direct-chat";
+@import "../toasts";

package/src/scss/parts/_pages.scss

@@ -3,3 +3,4 @@
 //
 
 @import "../pages/login_and_register";
+@import "../pages/lockscreen";

package/src/ts/adminlte.ts

@@ -3,11 +3,13 @@ import PushMenu from './push-menu'
 import Treeview from './treeview'
 import DirectChat from './direct-chat'
 import CardWidget from './card-widget'
+import FullScreen from './fullscreen'
 
 export {
   Layout,
   PushMenu,
   Treeview,
   DirectChat,
-  CardWidget
+  CardWidget,
+  FullScreen
 }