mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-18 00:10: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 class="caption">{{ item.date }}</span>
|
||||||
<span>{{ item.value }}</span>
|
<span>{{ item.value }}</span>
|
||||||
<span class="delta" [class.up]="item.delta.up" [class.down]="!item.delta.up">
|
<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 }}%
|
{{ item.delta.value }}%
|
||||||
</span>
|
</span>
|
||||||
<ngx-traffic-bar [barData]="item.comparison" [successDelta]="item.delta.up">
|
<ngx-traffic-bar [barData]="item.comparison" [successDelta]="item.delta.up">
|
||||||
|
|
|
||||||
|
|
@ -30,31 +30,16 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
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 {
|
&.down {
|
||||||
color: nb-theme(color-danger-default);
|
color: nb-theme(color-danger-default);
|
||||||
|
|
||||||
&::before {
|
|
||||||
bottom: 5px;
|
|
||||||
border-top: 6px solid nb-theme(color-danger-default);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.up {
|
&.up {
|
||||||
color: nb-theme(color-success-default);
|
color: nb-theme(color-success-default);
|
||||||
|
}
|
||||||
|
|
||||||
&::before {
|
nb-icon ::ng-deep svg {
|
||||||
top: 5px;
|
vertical-align: top;
|
||||||
border-bottom: 6px solid nb-theme(color-success-default);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -22,6 +22,7 @@
|
||||||
<div class="visited-percentages">
|
<div class="visited-percentages">
|
||||||
<div class="caption">New visits, %</div>
|
<div class="caption">New visits, %</div>
|
||||||
<div class="delta value" [class.up]="item.deltaUp" [class.down]="!item.deltaUp">
|
<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 }}%
|
{{ item.newVisits }}%
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -38,29 +38,16 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: relative;
|
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 {
|
&.down {
|
||||||
color: nb-theme(color-danger-default);
|
color: nb-theme(color-danger-default);
|
||||||
|
|
||||||
&::before {
|
|
||||||
border-top: 6px solid nb-theme(color-danger-default);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.up {
|
&.up {
|
||||||
color: nb-theme(color-success-default);
|
color: nb-theme(color-success-default);
|
||||||
|
}
|
||||||
|
|
||||||
&::before {
|
nb-icon ::ng-deep svg {
|
||||||
border-bottom: 6px solid nb-theme(color-success-default);
|
vertical-align: top;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue