Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 23:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(dashboard): improve status cards styles

Browse source
This commit is contained in:
KostyaDanovsky 2017-07-06 17:28:58 +03:00
parent d8b7c81f46
commit 43aaef8210
2 changed files with 97 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

121
src/app/pages/dashboard/status-cards/status-cards.component.scss
View file

@ -6,61 +6,107 @@
flex-direction: row;
align-items: center;
height: 6rem;
box-shadow: 0 3px 0 0 #322f70, 4px 0 18px 0 rgba(19, 19, 94, 0.4);
overflow: visible;
cursor: pointer;
color: nga-theme(card-fg-heading);
position: relative;
&::before {
position: absolute;
content: '';
height: calc(100% + 3px);
width: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.1);
border-radius: nga-theme(card-border-radius);
}
&.on {
box-shadow: inset 0 3px 9px 0 #322f70, 4px 0 18px 0 rgba(19, 19, 94, 0.4);
.icon-container {
box-shadow: none;
&.success {
box-shadow: inset 0 5px 9px 0 #00967d,
0 4px 10px 0 rgba(33, 7, 77, 0.5),
0 2px 12px 0 rgba(35, 255, 181, 0.6);
}
}
&::before {
display: none;
}
}
}
$bevel: btn-hero-bevel(nga-theme(card-bg));
$shadow: btn-hero-shadow();
box-shadow: $bevel, $shadow;
transition: all 0.1s ease-out;
$border-radius: nga-theme(card-border-radius);
.icon-container {
font-size: 4em;
padding: 0.5rem 1.75rem;
color: nga-theme(card-foreground);
border-radius: nga-theme(card-border-radius) 0 0 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();
@include btn-hero-primary-gradient();
@include btn-hero-primary-bevel-glow-shadow();
}
&.success {
@include btn-hero-success();
@include btn-hero-success-gradient();
@include btn-hero-success-bevel-glow-shadow();
}
&.info {
@include btn-hero-info();
@include btn-hero-info-gradient();
@include btn-hero-info-bevel-glow-shadow();
}
&.warning {
@include btn-hero-warning();
@include btn-hero-warning-gradient();
@include btn-hero-warning-bevel-glow-shadow();
}
}
&:hover {
background: lighten(nga-theme(card-bg), 5%);
.icon-container {
&.primary {
background-image: btn-hero-primary-light-gradient();
}
&.success {
background-image: btn-hero-success-light-gradient();
}
&.info {
background-image: btn-hero-info-light-gradient();
}
&.warning {
background-image: btn-hero-warning-light-gradient();
}
}
}
&: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();
}
}
}
&.off {
color: nga-theme(card-fg);
.icon-container {
&.primary, &.success, &.info, &.warning {
box-shadow: none;
background-image: linear-gradient(to right, transparent, transparent);
}
}
.details {
margin-left: 1.5rem;
border-left: 1px solid nga-theme(separator);
}
.status {
color: nga-theme(card-fg);
}
}
.details {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
padding-left: 1.5rem;
border-left: 1px solid transparent;
}
.title {
font-size: 1.5rem;
@ -69,6 +115,7 @@
font-size: 1.125rem;
font-weight: nga-theme(font-weight-light);
text-transform: uppercase;
color: nga-theme(card-foreground-secondary);
color: nga-theme(card-fg-heading);
}
}
}

2
src/app/pages/dashboard/status-cards/status-cards.component.ts
View file

@ -6,7 +6,7 @@ import { Component } from '@angular/core';
template: `
<div class="row">
<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}}">
<i class="{{card.icon}}"></i>
</div>