refactor(e-commerce): use nb-icon in tables

This commit is contained in:
Sergey Andrievskiy 2019-06-18 13:16:51 +03:00
parent 5943cfc7ac
commit e2ef6a06cd
4 changed files with 8 additions and 34 deletions

View file

@ -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">

View file

@ -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;
}
}

View file

@ -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>

View file

@ -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;
}
}
}