KYC management: stage-wise notices, pagination, RD base chart
This commit is contained in:
@@ -158,7 +158,10 @@ $mono: 'IBM Plex Mono', 'Roboto Mono', monospace;
|
||||
// ===== Summary Cards =====
|
||||
.summary-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
// Five cards only while each can still hold its figure. A seventy-crore NDTL printed to the
|
||||
// paise needs room, and fixed fifths cut it off at the card edge — the figures were there and
|
||||
// unreadable. Below that width the row wraps to fewer, wider cards instead.
|
||||
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
|
||||
gap: 14px;
|
||||
padding: 20px 28px;
|
||||
}
|
||||
@@ -167,8 +170,12 @@ $mono: 'IBM Plex Mono', 'Roboto Mono', monospace;
|
||||
background: $surface;
|
||||
border: 1px solid $border;
|
||||
border-radius: 12px;
|
||||
padding: 16px 18px;
|
||||
// 18px of side padding on a fifth of the row left the figure barely more than half the card.
|
||||
padding: 16px 14px;
|
||||
position: relative;
|
||||
// A grid item will not shrink below its content by default, which is how a long figure pushed
|
||||
// its own card wider than its column and off the edge of the dialog.
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
transition: box-shadow 0.2s;
|
||||
|
||||
@@ -210,16 +217,29 @@ $mono: 'IBM Plex Mono', 'Roboto Mono', monospace;
|
||||
font-size: 10px;
|
||||
color: $ink3;
|
||||
font-family: $mono;
|
||||
letter-spacing: 1px;
|
||||
// Tightened from 1px: on a five-up row the tracking alone pushed "NET DEMAND & TIME LIABILITIES
|
||||
// (NDTL)" onto a third line and squeezed the figure beneath it.
|
||||
letter-spacing: 0.4px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 6px;
|
||||
// Wraps rather than clipping — a heading that reads "ASSETS WITH BANKIN" names nothing.
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.sc-value {
|
||||
font-size: 20px;
|
||||
// Sized to the card rather than fixed: a figure that outgrows its box is worse than a smaller
|
||||
// one, because the digits that fall off the right are the ones that distinguish it. Floors at
|
||||
// 14px so a long figure shrinks rather than wraps mid-number.
|
||||
font-size: clamp(14px, 1.45vw, 20px);
|
||||
font-weight: 600;
|
||||
color: $ink;
|
||||
font-family: $mono;
|
||||
// Figures are read by lining their digits up; a proportional fallback would stagger them.
|
||||
font-variant-numeric: tabular-nums;
|
||||
// A rupee figure never breaks across lines — "₹6,35,05," over "967.50" reads as two numbers.
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.cr {
|
||||
@@ -232,12 +252,16 @@ $mono: 'IBM Plex Mono', 'Roboto Mono', monospace;
|
||||
.sc-change {
|
||||
font-size: 11px;
|
||||
margin-top: 4px;
|
||||
line-height: 1.35;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.sc-sub {
|
||||
font-size: 11px;
|
||||
color: $ink3;
|
||||
margin-top: 4px;
|
||||
line-height: 1.35;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.up {
|
||||
@@ -869,3 +893,112 @@ $slr-b: #bae6fd;
|
||||
line-height: 1.6;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
/* ── Reserve accounts, as they stand today ── */
|
||||
.pill-held {
|
||||
background: #0b5394;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Required against held, per ratio — read before the accounts, because a desk asks how big the
|
||||
gap is before asking which account to cover it from. */
|
||||
.held-ratios {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 16px 20px 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.held-ratio {
|
||||
flex: 1 1 260px;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-left: 4px solid #137333;
|
||||
border-radius: 8px;
|
||||
background: #f8faf9;
|
||||
}
|
||||
|
||||
/* A ratio that is not met is the thing this tab exists to surface. */
|
||||
.held-ratio--short {
|
||||
border-left-color: #c5221f;
|
||||
background: #fdf6f6;
|
||||
}
|
||||
|
||||
.held-ratio__name {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: #5f6368;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.held-ratio__grid {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 4px 14px;
|
||||
font-size: 13px;
|
||||
|
||||
span {
|
||||
color: #5f6368;
|
||||
}
|
||||
|
||||
strong {
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
}
|
||||
|
||||
.held-short {
|
||||
color: #c5221f;
|
||||
}
|
||||
|
||||
/* An account the filed return does not read. Named rather than hidden: the money is real and can
|
||||
be moved, but it settles nothing on the form. */
|
||||
.held-chip {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
padding: 1px 7px;
|
||||
border-radius: 10px;
|
||||
background: #fff4e5;
|
||||
color: #b06000;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.held-move {
|
||||
padding: 5px 12px;
|
||||
border: 1px solid #0b5394;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
color: #0b5394;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background: #0b5394;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/* What is held against each requirement, under the requirement itself. */
|
||||
.crr-calc-held {
|
||||
margin-top: 4px;
|
||||
font-size: 11px;
|
||||
color: $ink3;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* A ratio that is not met — on a compliance bar this is the one thing that must not be missed. */
|
||||
.crr-calc--short {
|
||||
border-color: $red;
|
||||
}
|
||||
|
||||
.crr-short,
|
||||
.sc-short {
|
||||
color: $red;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user