lisone/AdminLTE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added overlay for small-box & info-box

Browse Source 
- moved overlay code to _miscellaneous to save lines & centralize it since its not only for card
 - changed code to flex center instead of position absolute
 - changed icon color & modified the color for dark
 - removed icon font size to use fa-lg, fa-2x, ...
 - updated widgets demo
This commit is contained in:
REJack
2019-06-26 15:14:53 +02:00
parent 7e5ac7051e
commit c99806c497
7 changed files with 188 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
build/scss/_cards.scss
View File

@@ -78,41 +78,6 @@ html.maximized-card {
overflow: hidden;
}
.card,
.overlay-wrapper {
// Box overlay for LOADING STATE effect
> .overlay,
> .loading-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.overlay {
z-index: 50;
background: rgba(255, 255, 255, 0.7);
@include border-radius($border-radius);
> .fa,
> .fas,
> .far,
> .fab {
position: absolute;
top: 50%;
left: 50%;
margin-left: -15px;
margin-top: -15px;
color: #000;
font-size: 30px;
}
}
.overlay.dark {
background: rgba(0, 0, 0, 0.5);
}
}
// Add clearfix to header, body and footer
.card-header,
.card-body,

42
build/scss/_miscellaneous.scss
View File

@@ -416,3 +416,45 @@ a.text-muted:hover {
flex: 1;
}
// Overlays for Card, InfoBox & SmallBox
.card,
.overlay-wrapper,
.info-box,
.small-box {
// Box overlay for LOADING STATE effect
> .overlay,
> .loading-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.overlay {
display: flex;
justify-content: center;
align-items: center;
z-index: 50;
background: rgba(255, 255, 255, 0.7);
@include border-radius($border-radius);
> .fa,
> .fas,
> .far,
> .fab {
color: $gray-800;
}
&.dark {
background: rgba(0, 0, 0, 0.5);
> .fa,
> .fas,
> .far,
> .fab {
color: $gray-400;
}
}
}
}

112
dist/css/adminlte.css vendored
View File

@@ -12736,46 +12736,6 @@ html.maximized-card {
overflow: hidden;
}
.card > .overlay,
.card > .loading-img,
.overlay-wrapper > .overlay,
.overlay-wrapper > .loading-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.card .overlay,
.overlay-wrapper .overlay {
z-index: 50;
background: rgba(255, 255, 255, 0.7);
border-radius: 0.25rem;
}
.card .overlay > .fa,
.card .overlay > .fas,
.card .overlay > .far,
.card .overlay > .fab,
.overlay-wrapper .overlay > .fa,
.overlay-wrapper .overlay > .fas,
.overlay-wrapper .overlay > .far,
.overlay-wrapper .overlay > .fab {
position: absolute;
top: 50%;
left: 50%;
margin-left: -15px;
margin-top: -15px;
color: #000;
font-size: 30px;
}
.card .overlay.dark,
.overlay-wrapper .overlay.dark {
background: rgba(0, 0, 0, 0.5);
}
.card-header::after,
.card-body::after,
.card-footer::after {
@@ -16684,6 +16644,78 @@ a.text-muted:hover {
flex: 1;
}
.card > .overlay,
.card > .loading-img,
.overlay-wrapper > .overlay,
.overlay-wrapper > .loading-img,
.info-box > .overlay,
.info-box > .loading-img,
.small-box > .overlay,
.small-box > .loading-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.card .overlay,
.overlay-wrapper .overlay,
.info-box .overlay,
.small-box .overlay {
display: flex;
justify-content: center;
align-items: center;
z-index: 50;
background: rgba(255, 255, 255, 0.7);
border-radius: 0.25rem;
}
.card .overlay > .fa,
.card .overlay > .fas,
.card .overlay > .far,
.card .overlay > .fab,
.overlay-wrapper .overlay > .fa,
.overlay-wrapper .overlay > .fas,
.overlay-wrapper .overlay > .far,
.overlay-wrapper .overlay > .fab,
.info-box .overlay > .fa,
.info-box .overlay > .fas,
.info-box .overlay > .far,
.info-box .overlay > .fab,
.small-box .overlay > .fa,
.small-box .overlay > .fas,
.small-box .overlay > .far,
.small-box .overlay > .fab {
color: #343a40;
}
.card .overlay.dark,
.overlay-wrapper .overlay.dark,
.info-box .overlay.dark,
.small-box .overlay.dark {
background: rgba(0, 0, 0, 0.5);
}
.card .overlay.dark > .fa,
.card .overlay.dark > .fas,
.card .overlay.dark > .far,
.card .overlay.dark > .fab,
.overlay-wrapper .overlay.dark > .fa,
.overlay-wrapper .overlay.dark > .fas,
.overlay-wrapper .overlay.dark > .far,
.overlay-wrapper .overlay.dark > .fab,
.info-box .overlay.dark > .fa,
.info-box .overlay.dark > .fas,
.info-box .overlay.dark > .far,
.info-box .overlay.dark > .fab,
.small-box .overlay.dark > .fa,
.small-box .overlay.dark > .fas,
.small-box .overlay.dark > .far,
.small-box .overlay.dark > .fab {
color: #ced4da;
}
/*
* Misc: print
* -----------

2
dist/css/adminlte.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/adminlte.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/adminlte.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

76
pages/widgets.html
View File

@@ -857,6 +857,55 @@
</div>
<!-- /.row -->
<!-- Small Box (Stat card) -->
<div class="row">
<div class="col-lg-3 col-6">
<!-- small card -->
<div class="small-box bg-info">
<!-- Loading (remove the following to stop the loading)-->
<div class="overlay">
<i class="fas fa-3x fa-sync-alt"></i>
</div>
<!-- end loading -->
<div class="inner">
<h3>150</h3>
<p>New Orders</p>
</div>
<div class="icon">
<i class="fas fa-shopping-cart"></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 card -->
<div class="small-box bg-success">
<!-- Loading (remove the following to stop the loading)-->
<div class="overlay dark">
<i class="fas fa-3x fa-sync-alt"></i>
</div>
<!-- end loading -->
<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>
<!-- /.row -->
<!-- =========================================================== -->
<h4 class="mb-2 mt-4">Cards</h4>
<h5 class="mb-2">Abilities</h5>
@@ -951,10 +1000,9 @@
<h3 class="card-title">All together</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="maximize"><i class="fas fa-expand"></i>
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
</button>
<button type="button" class="btn btn-tool" data-widget="maximize"><i class="fas fa-expand"></i></button>
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i></button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i></button>
</div>
<!-- /.card-tools -->
</div>
@@ -978,7 +1026,25 @@
<!-- /.card-body -->
<!-- Loading (remove the following to stop the loading)-->
<div class="overlay">
<i class="fas fa-sync-alt"></i>
<i class="fas fa-2x fa-sync-alt"></i>
</div>
<!-- end loading -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card card-warning">
<div class="card-header">
<h3 class="card-title">Loading state (dark)</h3>
</div>
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
<!-- Loading (remove the following to stop the loading)-->
<div class="overlay dark">
<i class="fas fa-2x fa-sync-alt"></i>
</div>
<!-- end loading -->
</div>