revert main-brand

index.html

@@ -44,20 +44,19 @@
     </nav>
     <!-- /.navbar -->
 
-    <div class="main-brand">
-      <a href="#" class="brand-link">
-        <img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-80">
-        <span class="brand-text fw-light">AdminLTE 4</span>
-      </a>
-      <div class="brand-icons mx-2">
-        <a class="sidebar-mini-icon mx-1" data-pushmenu="mini" href="#" role="button"><i class="fas fa-angle-double-left"></i></a>
-        <a class="header-full-icon mx-2" data-pushmenu="header" href="#" role="button"><i class="fas fa-align-right"></i></a>
-        <a class="sidebar-full-icon mx-2" data-pushmenu="full" href="#" role="button"><i class="fas fa-bars"></i></a>
-      </div>
-    </div>
-
     <!-- Main Sidebar Container -->
     <aside class="main-sidebar shadow">
+      <div class="brand-container">
+        <a href="#" class="brand-link">
+          <img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-80">
+          <span class="brand-text fw-light">AdminLTE 4</span>
+        </a>
+        <span class="brand-icons mx-2">
+          <a class="sidebar-mini-icon mx-1" data-pushmenu="mini" href="#" role="button"><i class="fas fa-angle-double-left"></i></a>
+          <a class="header-full-icon mx-2" data-pushmenu="header" href="#" role="button"><i class="fas fa-align-right"></i></a>
+          <a class="sidebar-full-icon mx-2" data-pushmenu="full" href="#" role="button"><i class="fas fa-bars"></i></a>
+        </span>
+      </div>
       <!-- Sidebar -->
       <nav class="sidebar">
         <!-- Sidebar Menu -->
@@ -139,6 +138,70 @@
       </div>
       <div class="content">
         <div class="container-fluid">
+          <!-- Small boxes (Stat box) -->
+          <div class="row">
+            <div class="col-lg-3 col-6">
+              <!-- small box -->
+              <div class="small-box bg-info">
+                <div class="inner">
+                  <h3>150</h3>
+
+                  <p>New Orders</p>
+                </div>
+                <div class="icon">
+                  <i class="ion ion-bag"></i>
+                </div>
+                <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
+              </div>
+            </div>
+            <!-- ./col -->
+            <div class="col-lg-3 col-6">
+              <!-- small box -->
+              <div class="small-box bg-success">
+                <div class="inner">
+                  <h3>53<sup style="font-size: 20px">%</sup></h3>
+
+                  <p>Bounce Rate</p>
+                </div>
+                <div class="icon">
+                  <i class="ion ion-stats-bars"></i>
+                </div>
+                <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
+              </div>
+            </div>
+            <!-- ./col -->
+            <div class="col-lg-3 col-6">
+              <!-- small box -->
+              <div class="small-box bg-warning">
+                <div class="inner">
+                  <h3>44</h3>
+
+                  <p>User Registrations</p>
+                </div>
+                <div class="icon">
+                  <i class="ion ion-person-add"></i>
+                </div>
+                <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
+              </div>
+            </div>
+            <!-- ./col -->
+            <div class="col-lg-3 col-6">
+              <!-- small box -->
+              <div class="small-box bg-danger">
+                <div class="inner">
+                  <h3>65</h3>
+
+                  <p>Unique Visitors</p>
+                </div>
+                <div class="icon">
+                  <i class="ion ion-pie-graph"></i>
+                </div>
+                <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
+              </div>
+            </div>
+            <!-- ./col -->
+          </div>
+          <!-- /.row -->
           <button type="button" class="btn btn-primary">Primary</button>
           <button type="button" class="btn btn-secondary">Secondary</button>
           <button type="button" class="btn btn-success">Success</button>

scss/_custom-variables.scss

@@ -105,6 +105,13 @@ $header-mobile-light-color:   $dark;
 $content-padding-y:           0 !default;
 $content-padding-x:           .5rem !default;
 
+// IMAGE SIZES
+// --------------------------------------------------------
+$img-size-sm: 1.875rem !default;
+$img-size-md: 3.75rem !default;
+$img-size-lg: 6.25rem !default;
+$img-size-push: .625rem !default;
+
 // MAIN FOOTER
 // --------------------------------------------------------
 $main-footer-padding:           1rem !default;
@@ -124,14 +131,27 @@ $main-footer-color:             tint-color($gray-700, 25%) !default;
 $brand-link-padding-y:        $navbar-brand-padding-y + $navbar-padding-y;
 $brand-link-border-buttom:    1px;
 
+
+// Cards
+// --------------------------------------------------------
+$card-border-color: $gray-100 !default;
+$card-dark-border-color: tint-color($gray-900, 10%) !default;
+$card-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !default;
+$card-title-font-size: 1.1rem !default;
+$card-title-font-size-sm: 1rem !default;
+$card-title-font-weight: $font-weight-normal !default;
+$card-nav-link-padding-sm-y: .4rem !default;
+$card-nav-link-padding-sm-x: .8rem !default;
+$card-img-size: $img-size-sm !default;
+
 // Z-INDEX
 // --------------------------------------------------------
 $zindex-main-header:          $zindex-fixed + 4 !default;
 $zindex-sidebar:              $zindex-fixed + 8 !default;
-$zindex-main-brand:           $zindex-main-header !default;
+// $zindex-main-brand:           $zindex-main-header !default;
 $zindex-main-footer:          $zindex-fixed + 2 !default;
 $zindex-sidebar-horizontal:   $zindex-main-header - 2 !default;
-$zindex-header-mobile:        $zindex-main-brand + 2 !default;
+// $zindex-header-mobile:        $zindex-main-brand + 2 !default;
 $zindex-control-sidebar:      $zindex-fixed + 1 !default;
 $zindex-toasts:               $zindex-sidebar + 2 !default;
 $zindex-content-wrapper:      $zindex-sidebar - 2 !default;

scss/_layout.scss

@@ -1,6 +1,6 @@
 @import "layout/wrapper";
 @import "layout/main-header";
-@import "layout/main-brand";
+@import "layout/brand-container";
 @import "layout/main-sidebar";
 @import "layout/sidebar";
 @import "layout/nav-sidebar";

scss/_small-box.scss

@@ -0,0 +1,165 @@
+//
+// Component: Small Box
+//
+
+.small-box {
+  @include border-radius($border-radius);
+  @include box-shadow($card-shadow);
+
+  display: block;
+  margin-bottom: 20px;
+  position: relative;
+
+  // content wrapper
+  > .inner {
+    padding: 10px;
+  }
+
+  > .small-box-footer {
+    background-color: rgba($black, .1);
+    color: rgba($white, .8);
+    display: block;
+    padding: 3px 0;
+    position: relative;
+    text-align: center;
+    text-decoration: none;
+    z-index: 10;
+
+    &:hover {
+      background-color: rgba($black, .15);
+      color: $white;
+    }
+  }
+
+  h3 {
+    @include font-size(2.2rem);
+    font-weight: 700;
+    margin: 0 0 10px;
+    padding: 0;
+    white-space: nowrap;
+  }
+
+  @include media-breakpoint-up(lg) {
+    .col-xl-2 &,
+    .col-lg-2 &,
+    .col-md-2 & {
+      h3 {
+        @include font-size(1.6rem);
+      }
+    }
+
+    .col-xl-3 &,
+    .col-lg-3 &,
+    .col-md-3 & {
+      h3 {
+        @include font-size(1.6rem);
+      }
+    }
+  }
+
+  @include media-breakpoint-up(xl) {
+    .col-xl-2 &,
+    .col-lg-2 &,
+    .col-md-2 & {
+      h3 {
+        @include font-size(2.2rem);
+      }
+    }
+
+    .col-xl-3 &,
+    .col-lg-3 &,
+    .col-md-3 & {
+      h3 {
+        @include font-size(2.2rem);
+      }
+    }
+  }
+
+  p {
+    font-size: 1rem;
+
+    > small {
+      color: $gray-100;
+      display: block;
+      font-size: .9rem;
+      margin-top: 5px;
+    }
+  }
+
+  h3,
+  p {
+    z-index: 5;
+  }
+
+  // the icon
+  .icon {
+    color: rgba($black, .15);
+    z-index: 0;
+
+    > i {
+      font-size: 90px;
+      position: absolute;
+      right: 15px;
+      top: 15px;
+      transition: transform $transition-speed linear;
+
+      &.fa,
+      &.fas,
+      &.far,
+      &.fab,
+      &.fal,
+      &.fad,
+      &.ion {
+        font-size: 70px;
+        top: 20px;
+      }
+    }
+
+    svg {
+      font-size: 70px;
+      position: absolute;
+      right: 15px;
+      top: 15px;
+      transition: transform $transition-speed linear;
+    }
+  }
+
+  // Small box hover state
+  &:hover {
+    text-decoration: none;
+
+    // Animate icons on small box hover
+    .icon {
+      > i {
+        &,
+        &.fa,
+        &.fas,
+        &.far,
+        &.fab,
+        &.fal,
+        &.fad,
+        &.ion {
+          transform: scale(1.1);
+        }
+      }
+      > svg {
+        transform: scale(1.1);
+      }
+    }
+  }
+}
+
+@include media-breakpoint-down(sm) {
+  // No need for icons on very small devices
+  .small-box {
+    text-align: center;
+
+    .icon {
+      display: none;
+    }
+
+    p {
+      font-size: 12px;
+    }
+  }
+}

scss/adminlte.scss

@@ -27,3 +27,5 @@
 @import "mixins";
 
 @import "parts/core";
+@import "small-box";
+@import "miscellaneous";

scss/layout/_main-brand.scss → scss/layout/_brand-container.scss

@@ -4,8 +4,8 @@
 
 @include brand-variant($sidebar-dark-bg, $sidebar-dark-color);
 
-.main-brand {
-  grid-area: main-brand;
+.brand-container {
+  // grid-area: main-brand;
   display: grid;
   grid-template-areas: "brand-link sidebar-mini-icon";
   grid-auto-flow: column;
@@ -14,11 +14,11 @@
   padding: $brand-link-padding-y $sidebar-padding-x;
   white-space: nowrap;
   border-bottom: $brand-link-border-buttom solid tint-color($dark, 10%);
-  min-width: $sidebar-width;
-  max-width: $sidebar-width;
-  height: min-content;
-  @include transition($sidebar-transition);
-  z-index: $zindex-main-brand;
+  // min-width: $sidebar-width;
+  // max-width: $sidebar-width;
+  // height: min-content;
+  // @include transition($sidebar-transition);
+  // z-index: $zindex-main-brand;
 
   .brand-link {
     grid-area: brand-link;
@@ -45,13 +45,13 @@
     }
   }
 
-  .brand-icons {
-    display: inline-flex;
+  // .brand-icons {
+  //   display: inline-flex;
 
-    > * {
-      color: $gray-400;
-    }
-  }
+  //   > * {
+  //     color: $gray-400;
+  //   }
+  // }
 
   .sidebar-full-icon,
   .header-full-icon {
@@ -60,27 +60,28 @@
 
   .sidebar-mini-icon {
     grid-area: sidebar-mini-icon;
+    color: $gray-400;
   }
 }
 
 .sidebar-collapse:not(.sidebar-hover) {
-  .main-brand {
+  .brand-container {
     grid-template-areas: "sidebar-mini-icon brand-link";
     justify-content: center;
-    min-width: $sidebar-mini-width;
-    max-width: $sidebar-mini-width;
+    // min-width: $sidebar-mini-width;
+    // max-width: $sidebar-mini-width;
     .brand-link {
       display: none;
     }
   }
 }
 
-@include media-breakpoint-down(md) {
-  .main-brand {
-    min-width: unset;
-    max-width: unset;
-    .sidebar-mini-icon {
-      display: none;
-    }
-  }
-}
+// @include media-breakpoint-down(md) {
+//   .main-brand {
+//     min-width: unset;
+//     max-width: unset;
+//     .sidebar-mini-icon {
+//       display: none;
+//     }
+//   }
+// }

scss/layout/_layout-fixed.scss

@@ -1,12 +1,12 @@
 @include media-breakpoint-up(md) {
   .layout-fixed:not(.sidebar-horizontal) {
-    .main-brand {
-      bottom: 0;
-      float: none;
-      left: 0;
-      position: fixed;
-      top: 0;
-    }
+    // .main-brand {
+    //   bottom: 0;
+    //   float: none;
+    //   left: 0;
+    //   position: fixed;
+    //   top: 0;
+    // }
 
     .main-sidebar {
       bottom: 0;

scss/layout/_layout-mobile.scss

@@ -1,10 +1,10 @@
 @include media-breakpoint-down(md) {
   .wrapper {
-    grid-template-areas:
-      "main-sidebar main-brand main-header"
-      "main-sidebar content-wrapper main-header"
-      "main-sidebar main-footer main-header";
-    grid-template-columns: auto 1fr auto;
+    // grid-template-areas:
+    //   "main-sidebar main-header"
+    //   "main-sidebar content-wrapper"
+    //   "main-sidebar main-footer";
+    // grid-template-columns: auto 1fr auto;
 
     .main-sidebar {
       position: fixed;
@@ -19,34 +19,34 @@
       }
     }
 
-    .main-header {
-      position: fixed;
-      top: 0;
-      bottom: 0;
-      min-height: 100vh;
-      z-index: $zindex-header-mobile;
-      width: $sidebar-width;
-      margin-left: -#{$sidebar-width};
-      align-items: baseline;
-      @include transition($sidebar-transition);
+    // .main-header {
+    //   position: fixed;
+    //   top: 0;
+    //   bottom: 0;
+    //   min-height: 100vh;
+    //   z-index: $zindex-header-mobile;
+    //   width: $sidebar-width;
+    //   margin-left: -#{$sidebar-width};
+    //   align-items: baseline;
+    //   @include transition($sidebar-transition);
 
-      .navbar-nav {
-        flex-direction: column;
-      }
+    //   .navbar-nav {
+    //     flex-direction: column;
+    //   }
 
-      .sidebar-full-icon {
-        display: none;
-      }
-    }
+    //   .sidebar-full-icon {
+    //     display: none;
+    //   }
+    // }
 
-    .brand-link {
-      animation: none;
-    }
+    // .brand-link {
+    //   animation: none;
+    // }
 
-    .sidebar-full-icon,
-    .header-full-icon {
-      display: block;
-    }
+    // .sidebar-full-icon,
+    // .header-full-icon {
+    //   display: block;
+    // }
   }
 
   .sidebar-open {
@@ -55,11 +55,11 @@
     }
   }
 
-  @include media-breakpoint-down(md) {
-    .header-mobile-open {
-      .main-header {
-        margin-left: 0;
-      }
-    }
-  }
+  // @include media-breakpoint-down(md) {
+  //   .header-mobile-open {
+  //     .main-header {
+  //       margin-left: 0;
+  //     }
+  //   }
+  // }
 }

scss/layout/_sidebar-close.scss

@@ -2,11 +2,11 @@
   .main-sidebar {
     margin-left: -#{$sidebar-width};
   }
-  @include media-breakpoint-up(md) {
-    .main-brand {
-      margin-left: -#{$sidebar-width};
-    }
-  }
+  // @include media-breakpoint-up(md) {
+  //   .main-brand {
+  //     margin-left: -#{$sidebar-width};
+  //   }
+  // }
 }
 
 @include media-breakpoint-up(sm) {

scss/layout/_sidebar-horizontal.scss

@@ -19,7 +19,7 @@
       z-index: $zindex-sidebar-horizontal;
     }
 
-    .main-brand {
+    .brand-container {
       display: none;
     }
 

scss/layout/_wrapper.scss

@@ -8,7 +8,7 @@
   display: grid;
   grid-gap: 0;
   grid-template-areas:
-    "main-brand main-header"
+    "main-sidebar main-header"
     "main-sidebar content-wrapper"
     "main-sidebar main-footer";
   grid-template-columns: auto 1fr;

scss/mixins/_brand-variant.scss

@@ -2,7 +2,7 @@
   $brand-bg,
   $brand-color
 ) {
-  .main-brand {
+  .brand-container {
     background-color: $brand-bg;
     color: $brand-color;
   }

scss/parts/_core.scss

@@ -3,4 +3,3 @@
 //
 
 @import "../layout";
-@import "../miscellaneous";