From 160009f70b74cee5d8d6641cdb0960be4f38b664 Mon Sep 17 00:00:00 2001
From: Daniel <50356015+danny007in@users.noreply.github.com>
Date: Fri, 14 May 2021 22:09:11 +0530
Subject: [PATCH] revert main-brand

---
 index.html                                    |  87 +++++++--
 scss/_custom-variables.scss                   |  24 ++-
 scss/_layout.scss                             |   2 +-
 scss/_small-box.scss                          | 165 ++++++++++++++++++
 scss/adminlte.scss                            |   2 +
 ..._main-brand.scss => _brand-container.scss} |  51 +++---
 scss/layout/_layout-fixed.scss                |  14 +-
 scss/layout/_layout-mobile.scss               |  72 ++++----
 scss/layout/_sidebar-close.scss               |  10 +-
 scss/layout/_sidebar-horizontal.scss          |   2 +-
 scss/layout/_wrapper.scss                     |   2 +-
 scss/mixins/_brand-variant.scss               |   2 +-
 scss/parts/_core.scss                         |   1 -
 13 files changed, 342 insertions(+), 92 deletions(-)
 create mode 100644 scss/_small-box.scss
 rename scss/layout/{_main-brand.scss => _brand-container.scss} (64%)

diff --git a/index.html b/index.html
index 6d30812ef..5faaeec9d 100644
--- a/index.html
+++ b/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>
diff --git a/scss/_custom-variables.scss b/scss/_custom-variables.scss
index 365479d71..8d4508bb5 100644
--- a/scss/_custom-variables.scss
+++ b/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;
diff --git a/scss/_layout.scss b/scss/_layout.scss
index 7d555d8c6..f383ab1ef 100644
--- a/scss/_layout.scss
+++ b/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";
diff --git a/scss/_small-box.scss b/scss/_small-box.scss
new file mode 100644
index 000000000..2feb88e4b
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/scss/adminlte.scss b/scss/adminlte.scss
index aa9a76e94..4e142c731 100644
--- a/scss/adminlte.scss
+++ b/scss/adminlte.scss
@@ -27,3 +27,5 @@
 @import "mixins";
 
 @import "parts/core";
+@import "small-box";
+@import "miscellaneous";
diff --git a/scss/layout/_main-brand.scss b/scss/layout/_brand-container.scss
similarity index 64%
rename from scss/layout/_main-brand.scss
rename to scss/layout/_brand-container.scss
index 726ece22d..a88de81fa 100644
--- a/scss/layout/_main-brand.scss
+++ b/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;
+//     }
+//   }
+// }
diff --git a/scss/layout/_layout-fixed.scss b/scss/layout/_layout-fixed.scss
index 74c6a1f5e..ef5dda7a0 100644
--- a/scss/layout/_layout-fixed.scss
+++ b/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;
diff --git a/scss/layout/_layout-mobile.scss b/scss/layout/_layout-mobile.scss
index 4976d5453..fdb977c8b 100644
--- a/scss/layout/_layout-mobile.scss
+++ b/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;
+  //     }
+  //   }
+  // }
 }
diff --git a/scss/layout/_sidebar-close.scss b/scss/layout/_sidebar-close.scss
index ffdbf4ba8..ca8dd359f 100644
--- a/scss/layout/_sidebar-close.scss
+++ b/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) {
diff --git a/scss/layout/_sidebar-horizontal.scss b/scss/layout/_sidebar-horizontal.scss
index f8a1b143a..a964683a6 100644
--- a/scss/layout/_sidebar-horizontal.scss
+++ b/scss/layout/_sidebar-horizontal.scss
@@ -19,7 +19,7 @@
       z-index: $zindex-sidebar-horizontal;
     }
 
-    .main-brand {
+    .brand-container {
       display: none;
     }
 
diff --git a/scss/layout/_wrapper.scss b/scss/layout/_wrapper.scss
index 72da48631..4267a2204 100644
--- a/scss/layout/_wrapper.scss
+++ b/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;
diff --git a/scss/mixins/_brand-variant.scss b/scss/mixins/_brand-variant.scss
index e6d2bef4d..d2ad9f1f1 100644
--- a/scss/mixins/_brand-variant.scss
+++ b/scss/mixins/_brand-variant.scss
@@ -2,7 +2,7 @@
   $brand-bg,
   $brand-color
 ) {
-  .main-brand {
+  .brand-container {
     background-color: $brand-bg;
     color: $brand-color;
   }
diff --git a/scss/parts/_core.scss b/scss/parts/_core.scss
index 1641ad5e8..788b0f3ce 100644
--- a/scss/parts/_core.scss
+++ b/scss/parts/_core.scss
@@ -3,4 +3,3 @@
 //
 
 @import "../layout";
-@import "../miscellaneous";