mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-17 16:00:14 +01:00
refactor(e-commerce): use nb-icon in tables
This commit is contained in:
parent
5943cfc7ac
commit
e2ef6a06cd
4 changed files with 8 additions and 34 deletions
|
|
@ -3,6 +3,7 @@
|
|||
<span class="caption">{{ item.date }}</span>
|
||||
<span>{{ item.value }}</span>
|
||||
<span class="delta" [class.up]="item.delta.up" [class.down]="!item.delta.up">
|
||||
<nb-icon [icon]="item.delta.up ? 'arrow-up' : 'arrow-down'" pack="eva"></nb-icon>
|
||||
{{ item.delta.value }}%
|
||||
</span>
|
||||
<ngx-traffic-bar [barData]="item.comparison" [successDelta]="item.delta.up">
|
||||
|
|
|
|||
|
|
@ -30,31 +30,16 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
right: 100%;
|
||||
@include nb-ltr(margin-right, 0.7rem);
|
||||
@include nb-rtl(margin-left, 0.7rem);
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
}
|
||||
|
||||
&.down {
|
||||
color: nb-theme(color-danger-default);
|
||||
|
||||
&::before {
|
||||
bottom: 5px;
|
||||
border-top: 6px solid nb-theme(color-danger-default);
|
||||
}
|
||||
}
|
||||
|
||||
&.up {
|
||||
color: nb-theme(color-success-default);
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 5px;
|
||||
border-bottom: 6px solid nb-theme(color-success-default);
|
||||
}
|
||||
nb-icon ::ng-deep svg {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
<div class="visited-percentages">
|
||||
<div class="caption">New visits, %</div>
|
||||
<div class="delta value" [class.up]="item.deltaUp" [class.down]="!item.deltaUp">
|
||||
<nb-icon [icon]="item.deltaUp ? 'arrow-up' : 'arrow-down'" pack="eva"></nb-icon>
|
||||
{{ item.newVisits }}%
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -38,29 +38,16 @@
|
|||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
right: 100%;
|
||||
@include nb-ltr(margin-right, 0.7rem);
|
||||
@include nb-rtl(margin-left, 0.7rem);
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
}
|
||||
|
||||
&.down {
|
||||
color: nb-theme(color-danger-default);
|
||||
|
||||
&::before {
|
||||
border-top: 6px solid nb-theme(color-danger-default);
|
||||
}
|
||||
}
|
||||
|
||||
&.up {
|
||||
color: nb-theme(color-success-default);
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-bottom: 6px solid nb-theme(color-success-default);
|
||||
}
|
||||
nb-icon ::ng-deep svg {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue