github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

small box reworked

pull/4925/head
Daniel 2023-02-21 14:26:04 +05:30
parent c30b554b00
commit 2d8a3cfc62
5 changed files with 50 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
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>

13
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">

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">

27
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>

52
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;
}