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

View file

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

View file

@ -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 {
border-bottom: 6px solid nb-theme(color-success-default);
} }
nb-icon ::ng-deep svg {
vertical-align: top;
} }
} }
} }