Home Explore Help
Register Sign In
wilson.silva
/
AdminLte
mirror of https://github.com/almasaeed2010/AdminLTE
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

small box reworked

Daniel 2 years ago
parent
c30b554b00
commit
2d8a3cfc62
5 changed files with 50 additions and 69 deletions
Split View Show Diff Stats
  1. 13 13
      src/html/pages/index.astro
  2. 9 4
      src/html/pages/index3.astro
  3. 0 1
      src/html/pages/widgets/info-box.astro
  4. 14 13
      src/html/pages/widgets/small-box.astro
  5. 14 38
      src/scss/_small-box.scss

+ 13 - 13
src/html/pages/index.astro
View File 

@@ -15,7 +15,6 @@ const page = 'index'
 
 <html lang="en">
 
   <head>
 
     <Head title={title} path={path} />
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
 
   </head>
 
 
   <body class="layout-fixed bg-body-tertiary">
 
@@ -51,9 +50,9 @@ const page = 'index'
 
 
                     <p>New Orders</p>
 
                   </div>
 
-                  <div class="icon">
 
-                    <i class="inner-icon ion ion-bag"></i>
 
-                  </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>
 
@@ -66,9 +65,9 @@ const page = 'index'
 
 
                     <p>Bounce Rate</p>
 
                   </div>
 
-                  <div class="icon">
 
-                    <i class="inner-icon ion ion-stats-bars"></i>
 
-                  </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>
 
@@ -81,9 +80,9 @@ const page = 'index'
 
 
                     <p>User Registrations</p>
 
                   </div>
 
-                  <div class="icon">
 
-                    <i class="inner-icon ion ion-person-add"></i>
 
-                  </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>
 
@@ -96,9 +95,10 @@ const page = 'index'
 
 
                     <p>Unique Visitors</p>
 
                   </div>
 
-                  <div class="icon">
 
-                    <i class="inner-icon ion ion-pie-graph"></i>
 
-                  </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>

+ 9 - 4
src/html/pages/index3.astro
View File 

@@ -14,7 +14,6 @@ const page = 'index3'
 
 <html lang="en">
 
   <head>
 
     <Head title={title} path={path} />
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
 
   </head>
 
 
   <body class="layout-fixed bg-body-tertiary">
 
@@ -243,7 +242,9 @@ const page = 'index3'
 
                   <div class="card-body">
 
                     <div class="d-flex justify-content-between align-items-center border-bottom mb-3">
 
                       <p class="text-success fs-2">
 
-                        <i class="ion ion-ios-refresh-empty"></i>
 
+                        <svg height="32" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
 
+                          <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3"></path>
 
+                        </svg>
 
                       </p>
 
                       <p class="d-flex flex-column text-end">
 
                         <span class="fw-bold">
 
@@ -255,7 +256,9 @@ const page = 'index3'
 
                     <!-- /.d-flex -->
 
                     <div class="d-flex justify-content-between align-items-center border-bottom mb-3">
 
                       <p class="text-warning fs-2">
 
-                        <i class="ion ion-ios-cart-outline"></i>
 
+                        <svg height="32" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
 
+                          <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"></path>
 
+                        </svg>
 
                       </p>
 
                       <p class="d-flex flex-column text-end">
 
                         <span class="fw-bold">
 
@@ -267,7 +270,9 @@ const page = 'index3'
 
                     <!-- /.d-flex -->
 
                     <div class="d-flex justify-content-between align-items-center mb-0">
 
                       <p class="text-danger fs-2">
 
-                        <i class="ion ion-ios-people-outline"></i>
 
+                        <svg height="32" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
 
+                          <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"></path>
 
+                        </svg>
 
                       </p>
 
                       <p class="d-flex flex-column text-end">
 
                         <span class="fw-bold">

+ 0 - 1
src/html/pages/widgets/info-box.astro
View File 

@@ -13,7 +13,6 @@ const page = 'info-box'
 
 <html lang="en">
 
   <head>
 
     <Head title={title} />
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
 
   </head>
 
   <body class="layout-fixed bg-body-tertiary">
 
     <div class="app-wrapper">

+ 14 - 13
src/html/pages/widgets/small-box.astro
View File 

@@ -13,7 +13,6 @@ const page = 'small-box'
 
 <html lang="en">
 
   <head>
 
     <Head title={title} />
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
 
   </head>
 
   <body class="layout-fixed bg-body-tertiary">
 
     <div class="app-wrapper">
 
@@ -41,6 +40,7 @@ const page = 'small-box'
 
           <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 -->
 
@@ -50,9 +50,9 @@ const page = 'small-box'
 
 
                     <p>New Orders</p>
 
                   </div>
 
-                  <div class="icon">
 
-                    <i class="inner-icon ion ion-bag"></i>
 
-                  </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>
 
@@ -65,9 +65,9 @@ const page = 'small-box'
 
 
                     <p>Bounce Rate</p>
 
                   </div>
 
-                  <div class="icon">
 
-                    <i class="inner-icon ion ion-stats-bars"></i>
 
-                  </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>
 
@@ -80,9 +80,9 @@ const page = 'small-box'
 
 
                     <p>User Registrations</p>
 
                   </div>
 
-                  <div class="icon">
 
-                    <i class="inner-icon ion ion-person-add"></i>
 
-                  </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>
 
@@ -95,9 +95,10 @@ const page = 'small-box'
 
 
                     <p>Unique Visitors</p>
 
                   </div>
 
-                  <div class="icon">
 
-                    <i class="inner-icon ion ion-pie-graph"></i>
 
-                  </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>

+ 14 - 38
src/scss/_small-box.scss
View File 

@@ -5,10 +5,11 @@
 
 .small-box {
 
   @include border-radius($border-radius);
 
   @include box-shadow($lte-card-shadow);
 
-
 
   position: relative;
 
   display: block;
 
   margin-bottom: 1.25rem;
 
+  --bs-link-color-rgb: none;
 
+  --bs-heading-color: none;
 
 
   // content wrapper
 
   > .inner {
 
@@ -20,14 +21,12 @@
 
     z-index: 10;
 
     display: block;
 
     padding: 3px 0;
 
-    color: rgba($white, .8);
 
     text-align: center;
 
     text-decoration: none;
 
-    background-color: rgba($black, .1);
 
+    background-color: rgba($black, .07);
 
 
     &:hover {
 
-      color: $white;
 
-      background-color: rgba($black, .15);
 
+      background-color: rgba($black, .1);
 
     }
 
   }
 
 
@@ -92,30 +91,15 @@
 
   }
 
 
   // the icon
 
-  .icon {
 
+  .small-box-icon {
 
+    position: absolute;
 
+    top: 15px;
 
+    right: 15px;
 
     z-index: 0;
 
+    height: 70px;
 
+    font-size: 70px;
 
     color: rgba($black, .15);
 
-
 
-    > i {
 
-      position: absolute;
 
-      top: 15px;
 
-      right: 15px;
 
-      font-size: 90px;
 
-      @include transition(transform $lte-transition-speed linear);
 
-
 
-      &.inner-icon {
 
-        top: 20px;
 
-        font-size: 70px;
 
-      }
 
-    }
 
-
 
-    svg {
 
-      position: absolute;
 
-      top: 15px;
 
-      right: 15px;
 
-      font-size: 70px;
 
-      @include transition(transform $lte-transition-speed linear);
 
-    }
 
+    @include transition(transform $lte-transition-speed linear);
 
   }
 
 
   // Small box hover state
 
@@ -123,16 +107,8 @@
 
     text-decoration: none;
 
 
     // Animate icons on small box hover
 
-    .icon {
 
-      > i {
 
-        &,
 
-        &.inner-icon {
 
-          transform: scale(1.1);
 
-        }
 
-      }
 
-      > svg {
 
-        transform: scale(1.1);
 
-      }
 
+    .small-box-icon {
 
+      transform: scale(1.1);
 
     }
 
   }
 
 }
 
@@ -142,7 +118,7 @@
 
   .small-box {
 
     text-align: center;
 
 
-    .icon {
 
+    .small-box-icon {
 
       display: none;
 
     }