mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-03-03 12:20:15 +01:00
refactor(iot): status cards
This commit is contained in:
Sergey Andrievskiy
parent
616bfad6cb
commit
ce019a1bc5
3 changed files with 85 additions and 188 deletions
|
|
@ -1,7 +1,6 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xxxl-3 col-md-6" *ngFor="let statusCard of statusCards">
|
<div class="col-xxxl-3 col-md-6" *ngFor="let statusCard of statusCards">
|
||||||
<ngx-status-card [title]="statusCard.title"
|
<ngx-status-card [title]="statusCard.title" [type]="statusCard.type">
|
||||||
[type]="statusCard.type">
|
|
||||||
<i [ngClass]="statusCard.iconClass"></i>
|
<i [ngClass]="statusCard.iconClass"></i>
|
||||||
</ngx-status-card>
|
</ngx-status-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,184 +1,82 @@
|
||||||
//@import '../../../@theme/styles/themes';
|
@import '../../../@theme/styles/themes';
|
||||||
////@import '~@nebular/bootstrap/styles/hero-buttons';
|
|
||||||
//
|
@include nb-install-component() {
|
||||||
//@include nb-install-component() {
|
nb-card {
|
||||||
// nb-card {
|
flex-direction: row;
|
||||||
// flex-direction: row;
|
align-items: center;
|
||||||
// align-items: center;
|
height: 6rem;
|
||||||
// height: 6rem;
|
overflow: visible;
|
||||||
// overflow: visible;
|
|
||||||
//
|
.icon-container {
|
||||||
// $bevel: btn-hero-bevel(nb-theme(card-bg));
|
height: 100%;
|
||||||
// $shadow: nb-theme(btn-hero-shadow);
|
padding: 0.625rem;
|
||||||
// box-shadow: $bevel, $shadow;
|
}
|
||||||
//
|
|
||||||
// .icon-container {
|
.icon {
|
||||||
// height: 100%;
|
display: flex;
|
||||||
// padding: 0.625rem;
|
align-items: center;
|
||||||
// }
|
justify-content: center;
|
||||||
//
|
width: 5.75rem;
|
||||||
// .icon {
|
height: 4.75rem;
|
||||||
// display: flex;
|
font-size: 3.75rem;
|
||||||
// align-items: center;
|
border-radius: nb-theme(card-border-radius);
|
||||||
// justify-content: center;
|
transition: width 0.4s ease;
|
||||||
// width: 5.75rem;
|
transform: translate3d(0, 0, 0);
|
||||||
// height: 4.75rem;
|
-webkit-transform-style: preserve-3d;
|
||||||
// font-size: 3.75rem;
|
-webkit-backface-visibility: hidden;
|
||||||
// border-radius: nb-theme(card-border-radius);
|
color: nb-theme(text-alternate-color);
|
||||||
// transition: width 0.4s ease;
|
|
||||||
// transform: translate3d(0, 0, 0);
|
@each $status in nb-get-statuses() {
|
||||||
// -webkit-transform-style: preserve-3d;
|
&.status-#{$status} {
|
||||||
// -webkit-backface-visibility: hidden;
|
$left-color: nb-theme(button-hero-#{$status}-left-background-color);
|
||||||
// color: nb-theme(color-white);
|
$right-color: nb-theme(button-hero-#{$status}-right-background-color);
|
||||||
//
|
background-image: linear-gradient(to right, $left-color, $right-color);
|
||||||
// &.primary {
|
|
||||||
// @include btn-hero-primary-gradient();
|
&:hover {
|
||||||
// @include btn-hero-primary-bevel-glow-shadow();
|
$left-hover-color: nb-theme(button-hero-#{$status}-hover-left-background-color);
|
||||||
// }
|
$right-hover-color: nb-theme(button-hero-#{$status}-hover-right-background-color);
|
||||||
// &.success {
|
background-image: linear-gradient(to right, $left-hover-color, $right-hover-color);
|
||||||
// @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();
|
&.off {
|
||||||
// }
|
color: nb-theme(text-hint-color);
|
||||||
// &.warning {
|
|
||||||
// @include btn-hero-warning-gradient();
|
.title,
|
||||||
// @include btn-hero-warning-bevel-glow-shadow();
|
.icon {
|
||||||
// }
|
color: nb-theme(text-hint-color);
|
||||||
// &.danger {
|
}
|
||||||
// @include btn-hero-danger-gradient();
|
|
||||||
// @include btn-hero-danger-bevel-glow-shadow();
|
@each $status in nb-get-statuses() {
|
||||||
// }
|
.icon.status-#{$status} {
|
||||||
// &.secondary {
|
box-shadow: none;
|
||||||
// @include btn-hero-secondary-bg();
|
background-image: linear-gradient(to right, transparent, transparent);
|
||||||
// @include btn-hero-secondary-bevel-glow-shadow();
|
}
|
||||||
// color: nb-theme(card-fg);
|
}
|
||||||
// }
|
}
|
||||||
//
|
|
||||||
// @include nb-for-theme(corporate) {
|
.details {
|
||||||
// &.primary,
|
display: flex;
|
||||||
// &.success,
|
flex-direction: column;
|
||||||
// &.info,
|
justify-content: center;
|
||||||
// &.warning,
|
height: 100%;
|
||||||
// &.danger,
|
@include nb-ltr(padding, 0 0.5rem 0 0.75rem);
|
||||||
// &.secondary {
|
@include nb-rtl(padding, 0 0.75rem 0 0.5rem);
|
||||||
// box-shadow: none;
|
border-left: 1px solid transparent;
|
||||||
// }
|
}
|
||||||
// }
|
|
||||||
// }
|
.title {
|
||||||
//
|
margin: 0;
|
||||||
// &:hover {
|
}
|
||||||
// //background: lighten(nb-theme(card-bg), 5%);
|
|
||||||
//
|
.status {
|
||||||
// .icon {
|
text-transform: uppercase;
|
||||||
// &.primary {
|
font-family: nb-theme(text-paragraph-2-font-family);
|
||||||
// background-image: btn-hero-primary-light-gradient();
|
font-size: nb-theme(text-paragraph-2-font-size);
|
||||||
// }
|
font-weight: nb-theme(text-paragraph-2-font-weight);
|
||||||
// &.success {
|
line-height: nb-theme(text-paragraph-2-line-height);
|
||||||
// background-image: btn-hero-success-light-gradient();
|
}
|
||||||
// }
|
}
|
||||||
// &.info {
|
}
|
||||||
// background-image: btn-hero-info-light-gradient();
|
|
||||||
// }
|
|
||||||
// &.warning {
|
|
||||||
// background-image: btn-hero-warning-light-gradient();
|
|
||||||
// }
|
|
||||||
// &.danger {
|
|
||||||
// background-image: btn-hero-danger-light-gradient();
|
|
||||||
// }
|
|
||||||
// &.secondary {
|
|
||||||
// background-image: btn-hero-secondary-light-gradient();
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// &.off {
|
|
||||||
// color: nb-theme(card-fg);
|
|
||||||
//
|
|
||||||
// .icon {
|
|
||||||
// color: nb-theme(card-fg);
|
|
||||||
//
|
|
||||||
// &.primary, &.success, &.info, &.warning, &.danger {
|
|
||||||
// box-shadow: none;
|
|
||||||
// background-image: linear-gradient(to right, transparent, transparent);
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// &.secondary {
|
|
||||||
// background: transparent;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// .title {
|
|
||||||
// color: nb-theme(card-fg);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// .details {
|
|
||||||
// display: flex;
|
|
||||||
// flex-direction: column;
|
|
||||||
// justify-content: center;
|
|
||||||
// height: 100%;
|
|
||||||
// @include nb-ltr(padding, 0 0.5rem 0 0.75rem);
|
|
||||||
// @include nb-rtl(padding, 0 0.75rem 0 0.5rem);
|
|
||||||
// border-left: 1px solid transparent;
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// .title {
|
|
||||||
// font-family: nb-theme(font-secondary);
|
|
||||||
// font-size: 1.25rem;
|
|
||||||
// font-weight: nb-theme(font-weight-bold);
|
|
||||||
// color: nb-theme(card-fg-heading);
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// .status {
|
|
||||||
// font-size: 1rem;
|
|
||||||
// font-weight: nb-theme(font-weight-light);
|
|
||||||
// text-transform: uppercase;
|
|
||||||
// color: nb-theme(card-fg);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// @include nb-for-theme(cosmic) {
|
|
||||||
// nb-card {
|
|
||||||
// &.off .icon-container {
|
|
||||||
// @include nb-ltr(border-right, 1px solid nb-theme(separator));
|
|
||||||
// @include nb-rtl(border-left, 1px solid nb-theme(separator));
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// .icon-container {
|
|
||||||
// padding: 0;
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// .details {
|
|
||||||
// @include nb-ltr(padding-left, 1.25rem);
|
|
||||||
// @include nb-rtl(padding-right, 1.25rem);
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// .icon {
|
|
||||||
// width: 7rem;
|
|
||||||
// height: 100%;
|
|
||||||
// font-size: 4.5rem;
|
|
||||||
// @include nb-ltr(border-radius, nb-theme(card-border-radius) 0 0 nb-theme(card-border-radius));
|
|
||||||
// @include nb-rtl(border-radius, 0 nb-theme(card-border-radius) nb-theme(card-border-radius) 0);
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// .title {
|
|
||||||
// font-weight: nb-theme(font-weight-bolder);
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// .status {
|
|
||||||
// font-weight: nb-theme(font-weight-light);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// @include nb-for-theme(corporate) {
|
|
||||||
// nb-card {
|
|
||||||
// .icon-container {
|
|
||||||
// height: auto;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
//}
|
|
||||||
|
|
|
||||||
|
|
@ -6,13 +6,13 @@ import { Component, Input } from '@angular/core';
|
||||||
template: `
|
template: `
|
||||||
<nb-card (click)="on = !on" [ngClass]="{'off': !on}">
|
<nb-card (click)="on = !on" [ngClass]="{'off': !on}">
|
||||||
<div class="icon-container">
|
<div class="icon-container">
|
||||||
<div class="icon {{ type }}">
|
<div class="icon status-{{ type }}">
|
||||||
<ng-content></ng-content>
|
<ng-content></ng-content>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="details">
|
<div class="details">
|
||||||
<div class="title">{{ title }}</div>
|
<div class="title h5">{{ title }}</div>
|
||||||
<div class="status">{{ on ? 'ON' : 'OFF' }}</div>
|
<div class="status">{{ on ? 'ON' : 'OFF' }}</div>
|
||||||
</div>
|
</div>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue