mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-17 07:50:12 +01:00
fix(dashboard): improve status cards styles
This commit is contained in:
KostyaDanovsky
parent
d8b7c81f46
commit
43aaef8210
2 changed files with 97 additions and 50 deletions
|
|
@ -6,69 +6,116 @@
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 6rem;
|
height: 6rem;
|
||||||
box-shadow: 0 3px 0 0 #322f70, 4px 0 18px 0 rgba(19, 19, 94, 0.4);
|
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
color: nga-theme(card-fg-heading);
|
||||||
|
|
||||||
position: relative;
|
$bevel: btn-hero-bevel(nga-theme(card-bg));
|
||||||
&::before {
|
$shadow: btn-hero-shadow();
|
||||||
position: absolute;
|
box-shadow: $bevel, $shadow;
|
||||||
content: '';
|
transition: all 0.1s ease-out;
|
||||||
height: calc(100% + 3px);
|
|
||||||
width: 100%;
|
$border-radius: nga-theme(card-border-radius);
|
||||||
left: 0;
|
.icon-container {
|
||||||
top: 0;
|
font-size: 4em;
|
||||||
background: rgba(0, 0, 0, 0.1);
|
padding: 0.5rem 1.75rem;
|
||||||
border-radius: nga-theme(card-border-radius);
|
border-radius: $border-radius 0 0 $border-radius;
|
||||||
|
transition: all 0.1s ease-out, color 0s;
|
||||||
|
|
||||||
|
&.primary {
|
||||||
|
@include btn-hero-primary-gradient();
|
||||||
|
@include btn-hero-primary-bevel-glow-shadow();
|
||||||
|
}
|
||||||
|
&.success {
|
||||||
|
@include btn-hero-success-gradient();
|
||||||
|
@include btn-hero-success-bevel-glow-shadow();
|
||||||
|
}
|
||||||
|
&.info {
|
||||||
|
@include btn-hero-info-gradient();
|
||||||
|
@include btn-hero-info-bevel-glow-shadow();
|
||||||
|
}
|
||||||
|
&.warning {
|
||||||
|
@include btn-hero-warning-gradient();
|
||||||
|
@include btn-hero-warning-bevel-glow-shadow();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.on {
|
&:hover {
|
||||||
box-shadow: inset 0 3px 9px 0 #322f70, 4px 0 18px 0 rgba(19, 19, 94, 0.4);
|
background: lighten(nga-theme(card-bg), 5%);
|
||||||
|
|
||||||
.icon-container {
|
.icon-container {
|
||||||
box-shadow: none;
|
&.primary {
|
||||||
|
background-image: btn-hero-primary-light-gradient();
|
||||||
|
}
|
||||||
&.success {
|
&.success {
|
||||||
box-shadow: inset 0 5px 9px 0 #00967d,
|
background-image: btn-hero-success-light-gradient();
|
||||||
0 4px 10px 0 rgba(33, 7, 77, 0.5),
|
}
|
||||||
0 2px 12px 0 rgba(35, 255, 181, 0.6);
|
&.info {
|
||||||
|
background-image: btn-hero-info-light-gradient();
|
||||||
|
}
|
||||||
|
&.warning {
|
||||||
|
background-image: btn-hero-warning-light-gradient();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&::before {
|
}
|
||||||
display: none;
|
|
||||||
|
&:active {
|
||||||
|
box-shadow: none;
|
||||||
|
background: nga-theme(card-bg);
|
||||||
|
|
||||||
|
.icon-container {
|
||||||
|
&.primary, &.success, &.info, &.warning {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
&.primary {
|
||||||
|
background-image: btn-hero-primary-dark-gradient();
|
||||||
|
}
|
||||||
|
&.success {
|
||||||
|
background-image: btn-hero-success-dark-gradient();
|
||||||
|
}
|
||||||
|
&.info {
|
||||||
|
background-image: btn-hero-info-dark-gradient();
|
||||||
|
}
|
||||||
|
&.warning {
|
||||||
|
background-image: btn-hero-warning-dark-gradient();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.icon-container {
|
&.off {
|
||||||
font-size: 4em;
|
color: nga-theme(card-fg);
|
||||||
padding: 0.5rem 1.75rem;
|
|
||||||
color: nga-theme(card-foreground);
|
|
||||||
border-radius: nga-theme(card-border-radius) 0 0 nga-theme(card-border-radius);
|
|
||||||
|
|
||||||
&.primary {
|
.icon-container {
|
||||||
@include btn-hero-primary();
|
&.primary, &.success, &.info, &.warning {
|
||||||
}
|
box-shadow: none;
|
||||||
&.success {
|
background-image: linear-gradient(to right, transparent, transparent);
|
||||||
@include btn-hero-success();
|
}
|
||||||
}
|
}
|
||||||
&.info {
|
|
||||||
@include btn-hero-info();
|
|
||||||
}
|
|
||||||
&.warning {
|
|
||||||
@include btn-hero-warning();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.details {
|
.details {
|
||||||
margin-left: 1.5rem;
|
border-left: 1px solid nga-theme(separator);
|
||||||
}
|
}
|
||||||
.title {
|
.status {
|
||||||
font-size: 1.5rem;
|
color: nga-theme(card-fg);
|
||||||
}
|
}
|
||||||
.status {
|
}
|
||||||
font-size: 1.125rem;
|
|
||||||
font-weight: nga-theme(font-weight-light);
|
.details {
|
||||||
text-transform: uppercase;
|
display: flex;
|
||||||
color: nga-theme(card-foreground-secondary);
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
border-left: 1px solid transparent;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
.status {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
font-weight: nga-theme(font-weight-light);
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: nga-theme(card-fg-heading);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@ import { Component } from '@angular/core';
|
||||||
template: `
|
template: `
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-3" *ngFor="let card of statusCards">
|
<div class="col-lg-3" *ngFor="let card of statusCards">
|
||||||
<nga-card (click)="card.on = !card.on" [ngClass]="{'on': card.on}">
|
<nga-card (click)="card.on = !card.on" [ngClass]="{'off': !card.on}">
|
||||||
<div class="icon-container {{card.type}}">
|
<div class="icon-container {{card.type}}">
|
||||||
<i class="{{card.icon}}"></i>
|
<i class="{{card.icon}}"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue