admin-lte 4.0.0-alpha1 → 4.0.0-alpha2

package/src/html/pages/widgets/small-box.astro

@@ -0,0 +1,121 @@
+---
+import Head from '@components/_head.astro';
+import Footer from '@components/dashboard/_footer.astro';
+import Topbar from '@components/dashboard/_topbar.astro';
+import Sidenav from '@components/dashboard/_sidenav.astro';
+import Scripts from '@components/_scripts.astro';
+
+const title = 'AdminLTE 4 | Widgets - Small Box'
+const path = '../../../dist'
+const mainPage = 'widgets'
+const page = 'small-box'
+---
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+    <div class="app-wrapper">
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
+      <!-- Main content -->
+      <main class="app-main">
+        <div class="app-content-header">
+          <div class="container-fluid">
+            <div class="row">
+              <div class="col-sm-6">
+                <h3 class="mb-0">Small Box</h3>
+              </div>
+              <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-end">
+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">Small Box</li>
+                </ol>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Main content -->
+        <div class="app-content">
+          <div class="container-fluid">
+            <!-- Small Box (Stat card) -->
+            <h5 class="mb-2">Small Box</h5>
+            <!-- Small boxes (Stat box) -->
+            <div class="row">
+              <div class="col-lg-3 col-6">
+                <!-- small box -->
+                <div class="small-box text-bg-primary">
+                  <div class="inner">
+                    <h3>150</h3>
+
+                    <p>New Orders</p>
+                  </div>
+                  <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                    <path d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"></path>
+                  </svg>
+                  <a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
+                </div>
+              </div>
+              <!-- ./col -->
+              <div class="col-lg-3 col-6">
+                <!-- small box -->
+                <div class="small-box text-bg-success">
+                  <div class="inner">
+                    <h3>53<sup class="fs-5">%</sup></h3>
+
+                    <p>Bounce Rate</p>
+                  </div>
+                  <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                    <path d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"></path>
+                  </svg>
+                  <a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
+                </div>
+              </div>
+              <!-- ./col -->
+              <div class="col-lg-3 col-6">
+                <!-- small box -->
+                <div class="small-box text-bg-warning">
+                  <div class="inner">
+                    <h3>44</h3>
+
+                    <p>User Registrations</p>
+                  </div>
+                  <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                    <path d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"></path>
+                  </svg>
+                  <a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
+                </div>
+              </div>
+              <!-- ./col -->
+              <div class="col-lg-3 col-6">
+                <!-- small box -->
+                <div class="small-box text-bg-danger">
+                  <div class="inner">
+                    <h3>65</h3>
+
+                    <p>Unique Visitors</p>
+                  </div>
+                  <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                    <path clip-rule="evenodd" fill-rule="evenodd" d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"></path>
+                    <path clip-rule="evenodd" fill-rule="evenodd" d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"></path>
+                  </svg>
+                  <a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
+                </div>
+              </div>
+              <!-- ./col -->
+            </div>
+            <!-- /.row -->
+          </div><!-- /.container-fluid -->
+        </div>
+        <!-- /.content -->
+      </main>
+      <!-- /.app-content -->
+
+      <Footer />
+    </div>
+    <!--  ./app-wrapper -->
+
+    <Scripts path={path} />
+  </body>
+</html>

package/src/scss/_app-footer.scss

@@ -0,0 +1,15 @@
+//
+// Core: Main Footer
+//
+
+.app-footer {
+  grid-area: #{$lte-prefix}app-footer;
+  width: inherit;
+  max-width: 100vw;
+  padding: $lte-app-footer-padding;
+  color: $lte-app-footer-color;
+  background-color: $lte-app-footer-bg;
+  border-top: $lte-app-footer-border-top;
+  @include transition($lte-transition-speed $lte-transition-fn);
+}
+

package/src/scss/_app-header.scss

@@ -0,0 +1,26 @@
+//
+// Core: Main Header
+//
+
+.app-header {
+  z-index: $lte-zindex-app-header;
+  grid-area: #{$lte-prefix}app-header;
+  max-width: 100vw;
+  border-bottom: $lte-app-header-bottom-border;
+  @include transition($lte-transition-speed $lte-transition-fn);
+
+  .nav-link {
+    position: relative;
+    height: $nav-link-height;
+  }
+}
+
+// Navbar badge
+.navbar-badge {
+  position: absolute;
+  top: 9px;
+  right: 5px;
+  padding: 2px 4px;
+  font-size: .6rem;
+  font-weight: 400;
+}

package/src/scss/_app-main.scss

@@ -0,0 +1,20 @@
+.app-main {
+  grid-area: #{$lte-prefix}app-main;
+  max-width: 100vw;
+  padding-bottom: 1rem;
+  @include transition($lte-transition-speed $lte-transition-fn);
+
+  .app-content-header {
+    padding: 1rem $lte-content-padding-x;
+
+    .breadcrumb {
+      padding: 0;
+      margin-bottom: 0;
+      line-height: 2.5rem;
+    }
+  }
+
+  .app-content {
+    padding: $lte-content-padding-y $lte-content-padding-x;
+  }
+}

package/src/scss/_app-sidebar.scss

@@ -0,0 +1,429 @@
+.app-sidebar {
+  --#{$lte-prefix}sidebar-hover-bg: #{$lte-sidebar-hover-bg};
+  --#{$lte-prefix}sidebar-color: #{$lte-sidebar-color};
+  --#{$lte-prefix}sidebar-hover-color: #{$lte-sidebar-hover-color};
+  --#{$lte-prefix}sidebar-active-color: #{$lte-sidebar-active-color};
+  --#{$lte-prefix}sidebar-menu-active-bg: #{$lte-sidebar-menu-active-bg};
+  --#{$lte-prefix}sidebar-menu-active-color: #{$lte-sidebar-menu-active-color};
+  --#{$lte-prefix}sidebar-submenu-bg: #{$lte-sidebar-submenu-bg};
+  --#{$lte-prefix}sidebar-submenu-color: #{$lte-sidebar-submenu-color};
+  --#{$lte-prefix}sidebar-submenu-hover-color: #{$lte-sidebar-submenu-hover-color};
+  --#{$lte-prefix}sidebar-submenu-hover-bg: #{$lte-sidebar-submenu-hover-bg};
+  --#{$lte-prefix}sidebar-submenu-active-color: #{$lte-sidebar-submenu-active-color};
+  --#{$lte-prefix}sidebar-submenu-active-bg: #{$lte-sidebar-submenu-active-bg};
+  --#{$lte-prefix}sidebar-header-color: #{$lte-sidebar-header-color};
+
+  z-index: $lte-zindex-sidebar;
+  grid-area: #{$lte-prefix}app-sidebar;
+  min-width: var(--#{$lte-prefix}sidebar-width);
+  max-width: var(--#{$lte-prefix}sidebar-width);
+  @include transition($lte-sidebar-transition);
+}
+
+.sidebar-brand {
+  display: flex;
+  justify-content: space-between;
+  padding: $lte-brand-link-padding-y $lte-brand-link-padding-x;
+  overflow: hidden;
+  font-size: $navbar-brand-font-size;
+  white-space: nowrap;
+  border-bottom: $lte-brand-link-border-buttom solid var(--#{$prefix}border-color);
+  @include transition(width $lte-transition-speed $lte-transition-fn);
+
+  .brand-link {
+    flex: 1;
+    &:hover {
+      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-text {
+    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 {
+      color: var(--#{$prefix}emphasis-color);
+    }
+  }
+}
+
+.sidebar-wrapper {
+  padding-top: $lte-sidebar-padding-y;
+  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();
+
+  // 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,
+      &:focus {
+        color: var(--#{$lte-prefix}sidebar-color);
+      }
+    }
+
+    > .nav-link.active:not(:hover) {
+      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  {
+      color: var(--#{$lte-prefix}sidebar-hover-color);
+      background-color: var(--#{$lte-prefix}sidebar-hover-bg);
+    }
+
+    // First Level Submenu
+    > .nav-treeview {
+      background-color: var(--#{$lte-prefix}sidebar-submenu-bg);
+    }
+  }
+
+  // Section Heading
+  .nav-header {
+    color: var(--#{$lte-prefix}sidebar-header-color);
+    background-color: inherit;
+  }
+
+  // All links within the sidebar menu
+  a {
+    color: var(--#{$lte-prefix}sidebar-color);
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+    }
+  }
+
+  // All submenus
+  .nav-treeview {
+    > .nav-item {
+      > .nav-link {
+        color: var(--#{$lte-prefix}sidebar-submenu-color);
+
+        &:hover,
+        &:focus {
+          color: var(--#{$lte-prefix}sidebar-submenu-hover-color);
+          // background-color: var(--#{$lte-prefix}sidebar-submenu-hover-bg);
+        }
+      }
+
+      > .nav-link.active {
+        &,
+        &:hover,
+        &:focus {
+          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);
+      }
+    }
+  }
+}
+
+// Sidebar navigation menu
+.sidebar-menu {
+  // All levels
+  .nav-item {
+    > .nav-link {
+      margin-bottom: .2rem;
+
+      .nav-arrow {
+        @include transition(transform $lte-transition-fn $lte-transition-speed);
+        transform: none #{"/*rtl:rotate(180deg)*/"};
+      }
+    }
+  }
+
+  // All levels
+  .nav-link > .nav-badge,
+  .nav-link > p > .nav-badge {
+    position: absolute;
+    right: 1rem;
+  }
+
+  .nav-link > .nav-arrow,
+  .nav-link > p > .nav-arrow {
+    position: absolute;
+    top: .7rem;
+    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);
+
+    p {
+      display: inline;
+      padding-left: .5rem;
+      margin: 0;
+    }
+
+    .nav-icon {
+      padding-left: .3rem;
+    }
+  }
+
+  .nav-header {
+    padding: $nav-link-padding-y ($nav-link-padding-y * 1.5);
+    font-size: .9rem;
+  }
+
+  // Tree view menu
+  .nav-treeview {
+    display: none;
+    padding: 0;
+    list-style: none;
+  }
+
+  .menu-open {
+    > .nav-treeview {
+      display: block;
+    }
+
+    > .nav-link {
+      .nav-arrow {
+        transform: rotate(90deg) #{"/*rtl:rotate(90deg)*/"};
+      }
+    }
+  }
+}
+
+// A fix for text overflow while transitioning from sidebar mini to full sidebar
+.sidebar-menu,
+.sidebar-menu > .nav-header,
+.sidebar-menu .nav-link {
+  white-space: nowrap;
+}
+
+.sidebar-mini.sidebar-collapse {
+  .app-sidebar {
+    min-width: $lte-sidebar-mini-width;
+    max-width: $lte-sidebar-mini-width;
+  }
+
+  // Make the sidebar headers
+  .sidebar-menu .nav-header {
+    display: none;
+  }
+
+  .sidebar-menu {
+    .nav-link {
+      width: $lte-sidebar-mini-width - $lte-sidebar-padding-x * 2;
+    }
+  }
+
+  .sidebar-menu .nav-link p {
+    width: 0;
+    white-space: nowrap;
+  }
+
+  .sidebar-menu .nav-link p,
+  .brand-text {
+    visibility: hidden;
+    animation-name: fadeOut;
+    animation-fill-mode: both;
+  }
+
+  &.sidebar-is-hover {
+    .app-sidebar {
+      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);
+    }
+
+    .sidebar-menu .nav-link p,
+    .brand-text {
+      margin-left: 0;
+      visibility: visible;
+      animation-name: fadeIn;
+      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);
+  }
+}
+
+.sidebar-expand {
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($next, $grid-breakpoints);
+
+    /* stylelint-disable-next-line scss/selector-no-union-class-name */
+    &#{$infix} {
+      @include media-breakpoint-up($next) {
+        &.layout-fixed {
+          .app-sidebar {
+            position: fixed;
+            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));
+            }
+          }
+
+          .app-header,
+          .app-main,
+          .app-footer {
+            margin-left: var(--#{$lte-prefix}sidebar-width);
+          }
+
+          &.sidebar-collapse {
+            .app-header,
+            .app-main,
+            .app-footer {
+              margin-left: 0;
+            }
+          }
+
+          &.sidebar-mini.sidebar-collapse {
+            .app-header,
+            .app-main,
+            .app-footer {
+              margin-left: $lte-sidebar-mini-width;
+            }
+          }
+        }
+      }
+
+      @include media-breakpoint-down($next) {
+        $max: breakpoint-max($next);
+
+        &::before {
+          display: none;
+          content: "#{$max}";
+        }
+
+        .app-sidebar {
+          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;
+          }
+        }
+
+        &.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;
+            z-index: $lte-zindex-sidebar-overlay;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, .2);
+            animation-name: fadeIn;
+            animation-fill-mode: both;
+          }
+        }
+      }
+    }
+  }
+}
+
+// To prevent onload transition and animation
+.app-loaded {
+  &.sidebar-mini.sidebar-collapse {
+    .sidebar-menu .nav-link p,
+    .brand-text {
+      animation-duration: $lte-transition-speed;
+    }
+  }
+}
+body:not(.app-loaded) {
+  .app-header,
+  .app-sidebar,
+  .app-main,
+  .app-footer {
+    @include transition(none !important);
+    animation-duration: 0s !important;
+  }
+}
+.hold-transition {
+  .app-header,
+  .app-sidebar,
+  .app-main,
+  .app-footer {
+    @include transition(none !important);
+    animation-duration: 0s !important;
+  }
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    &.app-sidebar,
+    .app-sidebar {
+      --#{$lte-prefix}sidebar-hover-bg: #{$lte-sidebar-hover-bg-dark};
+      --#{$lte-prefix}sidebar-color: #{$lte-sidebar-color-dark};
+      --#{$lte-prefix}sidebar-hover-color: #{$lte-sidebar-hover-color-dark};
+      --#{$lte-prefix}sidebar-active-color: #{$lte-sidebar-active-color-dark};
+      --#{$lte-prefix}sidebar-menu-active-bg: #{$lte-sidebar-menu-active-bg-dark};
+      --#{$lte-prefix}sidebar-menu-active-color: #{$lte-sidebar-menu-active-color-dark};
+      --#{$lte-prefix}sidebar-submenu-bg: #{$lte-sidebar-submenu-bg-dark};
+      --#{$lte-prefix}sidebar-submenu-color: #{$lte-sidebar-submenu-color-dark};
+      --#{$lte-prefix}sidebar-submenu-hover-color: #{$lte-sidebar-submenu-hover-color-dark};
+      --#{$lte-prefix}sidebar-submenu-hover-bg: #{$lte-sidebar-submenu-hover-bg-dark};
+      --#{$lte-prefix}sidebar-submenu-active-color: #{$lte-sidebar-submenu-active-color-dark};
+      --#{$lte-prefix}sidebar-submenu-active-bg: #{$lte-sidebar-submenu-active-bg-dark};
+      --#{$lte-prefix}sidebar-header-color: #{$lte-sidebar-header-color-dark};
+    }
+  }
+}
+

package/src/scss/{_wrapper.scss → _app-wrapper.scss}

@@ -2,13 +2,13 @@
 // Core: Layout
 //
 
-.wrapper {
+.app-wrapper {
   position: relative;
   display: grid;
   grid-template-areas:
-    "main-sidebar main-header"
-    "main-sidebar content-wrapper"
-    "main-sidebar main-footer";
+    "#{$lte-prefix}app-sidebar #{$lte-prefix}app-header"
+    "#{$lte-prefix}app-sidebar #{$lte-prefix}app-main"
+    "#{$lte-prefix}app-sidebar #{$lte-prefix}app-footer";
   grid-template-rows: min-content 1fr min-content;
   grid-template-columns: auto 1fr;
   grid-gap: 0;
@@ -16,4 +16,8 @@
   align-items: stretch;
   max-width: 100vw;
   min-height: 100vh;
+
+  > * {
+    min-width: 0;
+  }
 }