@@ -9,9 +9,7 @@
|
||||
<div class="inv-container">
|
||||
<!-- Header -->
|
||||
<div class="inv-header">
|
||||
<button mat-stroked-button [routerLink]="['../']" class="inv-back">
|
||||
<i class="fas fa-arrow-left"></i> Back
|
||||
</button>
|
||||
<button mat-stroked-button [routerLink]="['../']" class="inv-back"><i class="fas fa-arrow-left"></i> Back</button>
|
||||
<h2 class="inv-header__title">Investors</h2>
|
||||
</div>
|
||||
|
||||
@@ -165,24 +163,40 @@
|
||||
<h4 class="inv-financials__title">{{ 'labels.inputs.Details' | translate }}</h4>
|
||||
<div class="inv-financials__grid">
|
||||
<div class="inv-financials__row">
|
||||
<span class="inv-financials__label">{{ 'labels.inputs.Principal Outstanding' | translate }}</span>
|
||||
<span class="inv-financials__amount">{{ record.details.totalPrincipalOutstanding | formatNumber }}</span>
|
||||
<span class="inv-financials__label">{{
|
||||
'labels.inputs.Principal Outstanding' | translate
|
||||
}}</span>
|
||||
<span class="inv-financials__amount">{{
|
||||
record.details.totalPrincipalOutstanding | formatNumber
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="inv-financials__row">
|
||||
<span class="inv-financials__label">{{ 'labels.inputs.Interest Outstanding' | translate }}</span>
|
||||
<span class="inv-financials__amount">{{ record.details.totalInterestOutstanding | formatNumber }}</span>
|
||||
<span class="inv-financials__label">{{
|
||||
'labels.inputs.Interest Outstanding' | translate
|
||||
}}</span>
|
||||
<span class="inv-financials__amount">{{
|
||||
record.details.totalInterestOutstanding | formatNumber
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="inv-financials__row">
|
||||
<span class="inv-financials__label">{{ 'labels.inputs.Fees Outstanding' | translate }}</span>
|
||||
<span class="inv-financials__amount">{{ record.details.totalFeeChargesOutstanding | formatNumber }}</span>
|
||||
<span class="inv-financials__amount">{{
|
||||
record.details.totalFeeChargesOutstanding | formatNumber
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="inv-financials__row">
|
||||
<span class="inv-financials__label">{{ 'labels.inputs.Penalties Outstanding' | translate }}</span>
|
||||
<span class="inv-financials__amount">{{ record.details.totalPenaltyChargesOutstanding | formatNumber }}</span>
|
||||
<span class="inv-financials__label">{{
|
||||
'labels.inputs.Penalties Outstanding' | translate
|
||||
}}</span>
|
||||
<span class="inv-financials__amount">{{
|
||||
record.details.totalPenaltyChargesOutstanding | formatNumber
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="inv-financials__row inv-financials__row--total">
|
||||
<span class="inv-financials__label">{{ 'labels.inputs.Outstanding' | translate }}</span>
|
||||
<span class="inv-financials__amount">{{ record.details.totalOutstanding | formatNumber }}</span>
|
||||
<span class="inv-financials__amount">{{
|
||||
record.details.totalOutstanding | formatNumber
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="inv-financials__row">
|
||||
<span class="inv-financials__label">{{ 'labels.inputs.Overpaid' | translate }}</span>
|
||||
|
||||
@@ -44,9 +44,14 @@ $gray-900: #202124;
|
||||
border-color: $border !important;
|
||||
color: $gray-500 !important;
|
||||
|
||||
i { margin-right: 6px; }
|
||||
i {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
&:hover { color: $primary !important; border-color: $primary !important; }
|
||||
&:hover {
|
||||
color: $primary !important;
|
||||
border-color: $primary !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Card
|
||||
@@ -92,8 +97,13 @@ $gray-900: #202124;
|
||||
gap: 4px 16px;
|
||||
padding: 16px 24px;
|
||||
|
||||
@media (max-width: 768px) { grid-template-columns: 1fr; }
|
||||
@media (max-width: 1024px) and (min-width: 769px) { grid-template-columns: repeat(2, 1fr); }
|
||||
@media (width <= 768px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
@media (width <= 1024px) and (width >= 769px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.inv-field {
|
||||
@@ -105,7 +115,9 @@ $gray-900: #202124;
|
||||
align-items: center;
|
||||
padding-top: 4px;
|
||||
|
||||
@media (max-width: 768px) { padding-top: 0; }
|
||||
@media (width <= 768px) {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.inv-search-btn {
|
||||
@@ -116,7 +128,10 @@ $gray-900: #202124;
|
||||
width: 100%;
|
||||
box-shadow: 0 1px 3px rgba($primary, 0.3) !important;
|
||||
|
||||
i { margin-right: 6px; font-size: 12px; }
|
||||
i {
|
||||
margin-right: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// Results area
|
||||
@@ -141,7 +156,9 @@ $gray-900: #202124;
|
||||
}
|
||||
|
||||
@keyframes inv-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Accordion & Panels
|
||||
@@ -210,7 +227,9 @@ $gray-900: #202124;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
@media (max-width: 600px) { grid-template-columns: 1fr; }
|
||||
@media (width <= 600px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
|
||||
Reference in New Issue
Block a user