Jaanu423andClaude Sonnet 4.6
b7d009b22a
- Current Account: hero header with navy gradient, pill tabs, Nexora card layout for general tab, txn-tab/chg-tab table styles, bank statement passbook - Fixed Deposits: fd-* prefixed hero header, KPI tiles, pill tab nav, nx-card general tab layout, txn-tab transactions, chg-tab charges - Recurring Deposits: rd-* prefixed hero header with three KPI tiles, pill tab nav, nx-card general tab layout, txn-tab transactions, chg-tab charges - Fix: removed broken FA4-format icon references from action menu buttons Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
396 lines
8.2 KiB
SCSS
396 lines
8.2 KiB
SCSS
/**
|
|
* Copyright since 2025 Mifos Initiative
|
|
*
|
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
*/
|
|
|
|
$navy: #0d1b2a;
|
|
$blue: #1e88e5;
|
|
$blue-d: #1e40af;
|
|
$border: #e2e8f0;
|
|
|
|
.cur-view {
|
|
max-width: 1440px;
|
|
margin: 0 auto;
|
|
padding: 12px 20px 22px;
|
|
}
|
|
|
|
/* ─── Gradient hero header ──────────────────────────────────────────── */
|
|
.cur-hero {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto auto;
|
|
align-items: stretch;
|
|
gap: 14px;
|
|
padding: 12px 18px;
|
|
border-radius: 12px;
|
|
color: #fff;
|
|
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 45%, #4338ca 100%);
|
|
box-shadow: 0 6px 18px -10px rgb(15 23 42 / 35%);
|
|
overflow: hidden;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(circle at top right, rgb(255 255 255 / 12%) 0%, transparent 55%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
&__left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
&__avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
background: linear-gradient(135deg, rgb(255 255 255 / 22%) 0%, rgb(255 255 255 / 10%) 100%);
|
|
border: 1px solid rgb(255 255 255 / 28%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
flex-shrink: 0;
|
|
box-shadow: 0 3px 10px -3px rgb(0 0 0 / 25%);
|
|
}
|
|
|
|
&__info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
min-width: 0;
|
|
}
|
|
|
|
&__status-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
&__title {
|
|
margin: 0;
|
|
font-size: 15px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.01em;
|
|
color: #fff;
|
|
line-height: 1.15;
|
|
|
|
::ng-deep mifosx-long-text {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
&__meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 2px 18px;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
&__meta-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
color: rgb(255 255 255 / 90%);
|
|
}
|
|
|
|
&__meta-label {
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.07em;
|
|
color: rgb(255 255 255 / 60%);
|
|
font-weight: 600;
|
|
}
|
|
|
|
&__meta-value {
|
|
font-weight: 600;
|
|
color: #fff;
|
|
}
|
|
|
|
&__kpis {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: stretch;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
&__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
button {
|
|
width: 32px !important;
|
|
height: 32px !important;
|
|
min-width: 32px !important;
|
|
padding: 0 !important;
|
|
border-radius: 50% !important;
|
|
color: #fff !important;
|
|
background: rgb(255 255 255 / 10%) !important;
|
|
border: 1px solid rgb(255 255 255 / 22%) !important;
|
|
display: inline-flex !important;
|
|
align-items: center;
|
|
justify-content: center;
|
|
line-height: 1;
|
|
transition:
|
|
background 0.15s ease,
|
|
border-color 0.15s ease,
|
|
transform 0.12s ease;
|
|
|
|
::ng-deep fa-icon {
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
::ng-deep .mat-mdc-button-persistent-ripple,
|
|
::ng-deep .mat-mdc-button-touch-target {
|
|
border-radius: 50% !important;
|
|
}
|
|
}
|
|
|
|
button:hover {
|
|
background: rgb(255 255 255 / 22%) !important;
|
|
border-color: rgb(255 255 255 / 38%) !important;
|
|
}
|
|
|
|
button:active {
|
|
transform: scale(0.94);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Balance KPI tiles */
|
|
.cur-kpi {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
min-width: 130px;
|
|
padding: 7px 14px;
|
|
border-radius: 9px;
|
|
background: rgb(255 255 255 / 14%);
|
|
border: 1px solid rgb(255 255 255 / 22%);
|
|
backdrop-filter: blur(8px);
|
|
|
|
&__label {
|
|
font-size: 9.5px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.07em;
|
|
font-weight: 700;
|
|
color: rgb(255 255 255 / 75%);
|
|
}
|
|
|
|
&__value {
|
|
margin-top: 2px;
|
|
font-size: 15px;
|
|
font-weight: 800;
|
|
color: #fff;
|
|
font-variant-numeric: tabular-nums;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
&--available {
|
|
background: rgb(16 185 129 / 22%);
|
|
border-color: rgb(16 185 129 / 35%);
|
|
}
|
|
}
|
|
|
|
/* Status pill */
|
|
.cur-status-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
height: 18px;
|
|
padding: 0 8px;
|
|
border-radius: 999px;
|
|
background: rgb(16 185 129 / 24%);
|
|
border: 1px solid rgb(16 185 129 / 40%);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: #d1fae5;
|
|
|
|
&__dot {
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 50%;
|
|
background: #10b981;
|
|
box-shadow: 0 0 0 2px rgb(16 185 129 / 30%);
|
|
}
|
|
|
|
&--warn {
|
|
background: rgb(245 158 11 / 24%);
|
|
border-color: rgb(245 158 11 / 40%);
|
|
color: #fef3c7;
|
|
|
|
.cur-status-pill__dot {
|
|
background: #f59e0b;
|
|
box-shadow: 0 0 0 3px rgb(245 158 11 / 30%);
|
|
}
|
|
}
|
|
|
|
&.statussubmitted,
|
|
&.statuspending {
|
|
background: rgb(245 158 11 / 24%);
|
|
border-color: rgb(245 158 11 / 40%);
|
|
color: #fef3c7;
|
|
|
|
.cur-status-pill__dot {
|
|
background: #f59e0b;
|
|
}
|
|
}
|
|
|
|
&.statusclosed,
|
|
&.statusrejected,
|
|
&.statuswithdrawn {
|
|
background: rgb(239 68 68 / 24%);
|
|
border-color: rgb(239 68 68 / 40%);
|
|
color: #fee2e2;
|
|
|
|
.cur-status-pill__dot {
|
|
background: #ef4444;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ─── Pill-style tab navigation ─────────────────────────────────────── */
|
|
.cur-tabs {
|
|
margin-top: 18px;
|
|
background: #fff;
|
|
border: 1px solid $border;
|
|
border-radius: 14px;
|
|
padding: 6px;
|
|
box-shadow: 0 1px 3px rgb(15 23 42 / 4%);
|
|
overflow: hidden;
|
|
|
|
::ng-deep {
|
|
.mat-mdc-tab-link-container {
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
.mat-mdc-tab-links {
|
|
gap: 4px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.mdc-tab-indicator__content--underline,
|
|
.mat-mdc-tab-header-pagination-controls-enabled .mdc-tab-indicator__content--underline {
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cur-tab {
|
|
display: inline-flex !important;
|
|
align-items: center;
|
|
gap: 8px;
|
|
height: 38px !important;
|
|
min-width: 0 !important;
|
|
padding: 0 16px !important;
|
|
border-radius: 10px !important;
|
|
font-family: Inter, 'DM Sans', Roboto, sans-serif !important;
|
|
font-size: 13px !important;
|
|
font-weight: 600 !important;
|
|
letter-spacing: 0.01em !important;
|
|
color: #64748b !important;
|
|
background: transparent !important;
|
|
transition: all 0.15s ease;
|
|
white-space: nowrap;
|
|
border: 1px solid transparent !important;
|
|
opacity: 1 !important;
|
|
|
|
&__ic {
|
|
font-size: 12px;
|
|
color: inherit;
|
|
}
|
|
|
|
&:hover:not(.mdc-tab--active) {
|
|
background: #f1f5f9 !important;
|
|
color: $navy !important;
|
|
}
|
|
|
|
&.mdc-tab--active,
|
|
&.mat-mdc-tab-link-active {
|
|
background: linear-gradient(135deg, $blue 0%, $blue-d 100%) !important;
|
|
color: #fff !important;
|
|
box-shadow: 0 2px 6px -1px rgb(30 64 175 / 35%);
|
|
border-color: $blue-d !important;
|
|
|
|
::ng-deep .mdc-tab__text-label,
|
|
::ng-deep .mat-mdc-tab-link-content,
|
|
::ng-deep span,
|
|
.cur-tab__ic {
|
|
color: #fff !important;
|
|
opacity: 1 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cur-body {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
/* ─── Responsive ────────────────────────────────────────────────────── */
|
|
@media (width <= 1100px) {
|
|
.cur-hero {
|
|
grid-template-columns: 1fr;
|
|
|
|
&__kpis {
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
&__actions {
|
|
position: absolute;
|
|
top: 18px;
|
|
right: 18px;
|
|
}
|
|
}
|
|
|
|
.cur-kpi {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
}
|
|
|
|
@media (width <= 700px) {
|
|
.cur-view {
|
|
padding: 12px;
|
|
}
|
|
|
|
.cur-hero {
|
|
padding: 18px;
|
|
|
|
&__title {
|
|
font-size: 18px;
|
|
}
|
|
|
|
&__avatar {
|
|
width: 52px;
|
|
height: 52px;
|
|
font-size: 22px;
|
|
border-radius: 12px;
|
|
}
|
|
}
|
|
|
|
.cur-tab {
|
|
padding: 0 12px !important;
|
|
font-size: 12px !important;
|
|
}
|
|
}
|