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