feat(shares): one-voucher-per-slot receipt dialogs, Apply Additional Shares as a popup
Apply Collection and Apply Additional Shares settle the same Share Collection receipts for the same member, so they are now deliberately the same screen. Apply Collection takes exactly two receipts and no more: one for the share value, one for the entry fee, in two separate slots. They are different things -- the share receipt is money moving into share capital, while the fee receipt only proves the fee was already collected and is never posted a second time -- and picking both out of one ticked list made that distinction invisible. Apply Additional Shares moves from its own route to a dialog. It was a full page a clerk had to leave the account for and come back from, to fill in a short form with the member standing at the counter. Its old route, resolver case and action- host branch are removed rather than left behind as dead paths. Both screens now draw their receipts from a single pool, whether a receipt already names the member or is a voucher paid straight into a GL account; an unattributed one is attached at the moment it is picked, so what used to be an Attach in one table and a tick in another is one deliberate click. The by-voucher search and the GL-entry detail both sit behind buttons, as exceptions rather than permanent furniture. Dialog chrome and the receipt shape are shared (share-dialog.shared.scss, share-receipt-option.ts) so the two cannot drift apart again. Also fixes content being clipped at the dialog edges: the wrapper cancelled a 24px surface padding that the panel class had already zeroed, pushing every edge outside the surface where overflow:hidden cut it off, and the height cap sat on the scrolling body rather than the wrapper, letting the footer stack past the bottom of the viewport. Adds the product-wise share summary report (authorised, issued, available and unpaid shares, distinctive range and account count per product). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -0,0 +1,996 @@
|
||||
/**
|
||||
* 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/.
|
||||
*/
|
||||
|
||||
// Shared chrome for Apply Collection and Apply Additional Shares dialogs.
|
||||
// Each component @uses this, so every rule is emitted once per component
|
||||
// and stays scoped to it -- nothing here leaks into the global stylesheet.
|
||||
|
||||
/* ── Design tokens ─────────────────────────────────────────────────────── */
|
||||
|
||||
$primary: #1e3a8a;
|
||||
$primary-mid: #2448b0;
|
||||
$accent: #2563eb;
|
||||
$accent-soft: #eff6ff;
|
||||
$accent-border: #bfdbfe;
|
||||
|
||||
$text-main: #0f172a;
|
||||
$text-sub: #334155;
|
||||
$text-muted: #64748b;
|
||||
$border-color: #e2e8f0;
|
||||
$bg-page: #f8fafc;
|
||||
$bg-white: #fff;
|
||||
|
||||
$success: #059669;
|
||||
$success-bg: #ecfdf5;
|
||||
$success-border: #6ee7b7;
|
||||
|
||||
$danger: #dc2626;
|
||||
$danger-bg: #fef2f2;
|
||||
$danger-border: #fca5a5;
|
||||
|
||||
/* ── Utilities ─────────────────────────────────────────────────────────── */
|
||||
|
||||
.mono {
|
||||
font-family: 'Roboto Mono', 'Courier New', monospace;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* ── Dialog wrapper ────────────────────────────────────────────────────── */
|
||||
|
||||
.dialog-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 88vh;
|
||||
background: $bg-white;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Header ────────────────────────────────────────────────────────────── */
|
||||
|
||||
.dialog-header {
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
gap: 0.85rem;
|
||||
padding: 1.1rem 1.5rem;
|
||||
background: linear-gradient(135deg, $primary 0%, $primary-mid 60%, #3b5fc0 100%);
|
||||
color: #fff;
|
||||
|
||||
.header-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 9px;
|
||||
background: rgb(255 255 255 / 15%);
|
||||
border: 1px solid rgb(255 255 255 / 20%);
|
||||
|
||||
mat-icon {
|
||||
font-size: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.header-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.08rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0.18rem 0 0;
|
||||
font-size: 0.78rem;
|
||||
opacity: 0.78;
|
||||
}
|
||||
}
|
||||
|
||||
.header-close {
|
||||
color: rgb(255 255 255 / 80%);
|
||||
flex: none;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: rgb(255 255 255 / 12%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Body ──────────────────────────────────────────────────────────────── */
|
||||
|
||||
.dialog-body {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
gap: 1.1rem;
|
||||
min-height: 0;
|
||||
max-height: none !important;
|
||||
padding: 1.4rem 1.5rem !important;
|
||||
overflow-y: auto;
|
||||
background: $bg-page;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 99px;
|
||||
}
|
||||
}
|
||||
|
||||
.state-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.75rem;
|
||||
padding: 2rem 0;
|
||||
color: $text-muted;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Collection Summary Card (sc-* prefix)
|
||||
═══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.sc-card {
|
||||
border: 1px solid $accent-border;
|
||||
border-radius: 10px;
|
||||
background: $bg-white;
|
||||
// No overflow:hidden — it clips row content in certain flex contexts
|
||||
box-shadow: 0 2px 8px rgb(37 99 235 / 8%);
|
||||
}
|
||||
|
||||
/* ── Each item row (Share / Entry Fee) ─────────────────────────────────── */
|
||||
|
||||
.sc-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 0.85rem 1.15rem;
|
||||
background: $bg-white;
|
||||
border-left: 4px solid transparent;
|
||||
transition:
|
||||
background 0.15s,
|
||||
border-color 0.2s;
|
||||
|
||||
&.sc-sep {
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
|
||||
&.sc-ok {
|
||||
background: $success-bg;
|
||||
border-left-color: $success;
|
||||
}
|
||||
|
||||
&.sc-bad {
|
||||
background: $danger-bg;
|
||||
border-left-color: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
/* Left side: label + required amount */
|
||||
.sc-left {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.18rem;
|
||||
}
|
||||
|
||||
.sc-label {
|
||||
display: block;
|
||||
font-size: 0.86rem;
|
||||
font-weight: 700;
|
||||
color: $text-main;
|
||||
line-height: 1.3;
|
||||
min-height: 1em; // guarantees height even if content is empty
|
||||
}
|
||||
|
||||
.sc-sub {
|
||||
display: block;
|
||||
font-size: 0.72rem;
|
||||
color: $text-muted;
|
||||
line-height: 1.35;
|
||||
min-height: 1em;
|
||||
|
||||
b {
|
||||
font-weight: 600;
|
||||
color: $text-sub;
|
||||
}
|
||||
}
|
||||
|
||||
/* Right side: collected amount + badge */
|
||||
.sc-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.sc-val {
|
||||
font-family: 'Roboto Mono', 'Courier New', monospace;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 0.96rem;
|
||||
font-weight: 700;
|
||||
color: $text-muted;
|
||||
letter-spacing: -0.01em;
|
||||
transition: color 0.2s;
|
||||
|
||||
&.sc-val-ok {
|
||||
color: $success;
|
||||
}
|
||||
|
||||
&.sc-val-bad {
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
.sc-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 99px;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
|
||||
&.sc-tag-ok {
|
||||
background: $success-bg;
|
||||
color: $success;
|
||||
border: 1px solid $success-border;
|
||||
}
|
||||
|
||||
&.sc-tag-bad {
|
||||
background: $danger-bg;
|
||||
color: $danger;
|
||||
border: 1px solid $danger-border;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Total row ─────────────────────────────────────────────────────────── */
|
||||
|
||||
.sc-total-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 0.8rem 1.15rem;
|
||||
border-top: 1px solid $border-color;
|
||||
background: $bg-page;
|
||||
transition: background 0.2s;
|
||||
|
||||
&.sc-total-ok {
|
||||
background: $success-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.sc-total-lbl {
|
||||
font-size: 0.82rem;
|
||||
font-weight: 800;
|
||||
color: $text-main;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.sc-total-nums {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.sc-total-req {
|
||||
font-family: 'Roboto Mono', 'Courier New', monospace;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 500;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.sc-arrow {
|
||||
font-size: 0.8rem;
|
||||
color: #94a3b8;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.sc-total-got {
|
||||
font-family: 'Roboto Mono', 'Courier New', monospace;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
color: $text-muted;
|
||||
letter-spacing: -0.02em;
|
||||
transition: color 0.2s;
|
||||
|
||||
&.sc-total-got-ok {
|
||||
color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
.sc-status-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.2rem 0.65rem;
|
||||
border-radius: 99px;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.04em;
|
||||
white-space: nowrap;
|
||||
transition: all 0.2s;
|
||||
|
||||
&.sc-pill-ok {
|
||||
background: $success;
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 6px rgb(5 150 105 / 30%);
|
||||
}
|
||||
|
||||
&.sc-pill-pending {
|
||||
background: $border-color;
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── Receipt step slots ────────────────────────────────────────────────── */
|
||||
|
||||
.slot {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
padding: 1.1rem 1.25rem;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 10px;
|
||||
background: $bg-white;
|
||||
box-shadow: 0 1px 4px rgb(15 23 42 / 4%);
|
||||
transition: box-shadow 0.2s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 3px 12px rgb(15 23 42 / 7%);
|
||||
}
|
||||
}
|
||||
|
||||
.slot-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.slot-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, $primary 0%, $accent 100%);
|
||||
color: #fff;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
box-shadow: 0 2px 6px rgb(37 99 235 / 30%);
|
||||
}
|
||||
|
||||
.slot-title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
color: $text-main;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0.12rem 0 0;
|
||||
font-size: 0.72rem;
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.slot-search {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
flex: none;
|
||||
padding: 0.38rem 0.72rem;
|
||||
border: 1.5px solid $accent-border;
|
||||
border-radius: 7px;
|
||||
background: $accent-soft;
|
||||
color: $accent;
|
||||
font-size: 0.74rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
|
||||
mat-icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $accent;
|
||||
border-color: $accent;
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 8px rgb(37 99 235 / 25%);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Pickable option list ───────────────────────────────────────────────── */
|
||||
|
||||
.options {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
max-height: 210px;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 99px;
|
||||
}
|
||||
}
|
||||
|
||||
.option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
padding: 0.72rem 0.9rem;
|
||||
border: 1.5px solid $border-color;
|
||||
border-radius: 7px;
|
||||
cursor: pointer;
|
||||
background: $bg-white;
|
||||
transition: all 0.14s;
|
||||
|
||||
&:hover {
|
||||
border-color: $accent;
|
||||
background: $accent-soft;
|
||||
box-shadow: 0 2px 6px rgb(37 99 235 / 10%);
|
||||
}
|
||||
|
||||
&.option-busy {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.option-radio {
|
||||
flex: none;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid #cbd5e1;
|
||||
border-radius: 50%;
|
||||
transition: border-color 0.14s;
|
||||
|
||||
.option:hover & {
|
||||
border-color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
.option-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
|
||||
.option-voucher {
|
||||
font-size: 0.81rem;
|
||||
font-weight: 700;
|
||||
color: $text-main;
|
||||
}
|
||||
|
||||
.option-meta {
|
||||
font-size: 0.7rem;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.option-desc {
|
||||
font-size: 0.7rem;
|
||||
color: $text-muted;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.option-amount {
|
||||
flex: none;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
color: $text-main;
|
||||
}
|
||||
|
||||
.option-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
padding: 0;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 5px;
|
||||
background: transparent;
|
||||
color: $text-muted;
|
||||
cursor: pointer;
|
||||
transition: all 0.14s;
|
||||
|
||||
mat-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $accent;
|
||||
border-color: $accent;
|
||||
background: $accent-soft;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Chosen receipt ─────────────────────────────────────────────────────── */
|
||||
|
||||
.chosen {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 2px solid $success-border;
|
||||
border-radius: 9px;
|
||||
background: $success-bg;
|
||||
box-shadow: 0 2px 8px rgb(5 150 105 / 10%);
|
||||
|
||||
&.chosen-short {
|
||||
border-color: $danger-border;
|
||||
background: $danger-bg;
|
||||
box-shadow: 0 2px 8px rgb(220 38 38 / 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.chosen-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 7px;
|
||||
background: $success;
|
||||
|
||||
.chosen-short & {
|
||||
background: $danger;
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
font-size: 17px;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.chosen-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
|
||||
.chosen-voucher {
|
||||
font-size: 0.84rem;
|
||||
font-weight: 700;
|
||||
color: $text-main;
|
||||
}
|
||||
|
||||
.chosen-gl {
|
||||
font-size: 0.7rem;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.chosen-amount {
|
||||
flex: none;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 800;
|
||||
color: $text-main;
|
||||
font-family: 'Roboto Mono', 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.chosen-clear {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
padding: 0;
|
||||
border: 1px solid $danger-border;
|
||||
border-radius: 5px;
|
||||
background: transparent;
|
||||
color: #f87171;
|
||||
cursor: pointer;
|
||||
transition: all 0.14s;
|
||||
|
||||
mat-icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $danger;
|
||||
background: $danger-bg;
|
||||
border-color: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Slot notes ─────────────────────────────────────────────────────────── */
|
||||
|
||||
.slot-note {
|
||||
margin: 0;
|
||||
font-size: 0.74rem;
|
||||
font-weight: 500;
|
||||
|
||||
&.note-good {
|
||||
color: $success;
|
||||
}
|
||||
|
||||
&.note-bad {
|
||||
color: $danger;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&.note-muted {
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.slot-empty {
|
||||
margin: 0;
|
||||
padding: 0.8rem 1rem;
|
||||
border: 1.5px dashed $border-color;
|
||||
border-radius: 7px;
|
||||
background: $bg-page;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.55;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
/* ── Error alert ─────────────────────────────────────────────────────────── */
|
||||
|
||||
.alert {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
padding: 0.7rem 0.9rem;
|
||||
border: 1.5px solid $danger-border;
|
||||
border-radius: 7px;
|
||||
background: $danger-bg;
|
||||
color: $danger;
|
||||
font-size: 0.76rem;
|
||||
line-height: 1.45;
|
||||
|
||||
mat-icon {
|
||||
flex: none;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
font-size: 17px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Footer ─────────────────────────────────────────────────────────────── */
|
||||
|
||||
.dialog-actions {
|
||||
display: flex;
|
||||
flex: none;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
min-height: 0;
|
||||
padding: 1rem 1.5rem !important;
|
||||
margin: 0 !important;
|
||||
border-top: 1px solid $border-color;
|
||||
background: $bg-white;
|
||||
box-shadow: 0 -2px 8px rgb(15 23 42 / 5%);
|
||||
|
||||
// Both buttons: same height, same border-radius, same font
|
||||
button {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
gap: 0.3rem !important;
|
||||
height: 40px !important;
|
||||
min-width: 110px !important;
|
||||
padding: 0 1.1rem !important;
|
||||
border-radius: 8px !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 0.85rem !important;
|
||||
line-height: 1 !important;
|
||||
letter-spacing: 0.01em !important;
|
||||
|
||||
// Icon inside button — vertically center it and size it correctly
|
||||
mat-icon {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
width: 18px !important;
|
||||
height: 18px !important;
|
||||
font-size: 18px !important;
|
||||
line-height: 1 !important;
|
||||
vertical-align: middle !important;
|
||||
margin: 0 !important;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
mat-spinner {
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Stroked cancel button
|
||||
[mat-stroked-button] {
|
||||
border-color: $border-color !important;
|
||||
color: $text-sub !important;
|
||||
|
||||
&:hover {
|
||||
border-color: #94a3b8 !important;
|
||||
background: $bg-page !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Primary action button (enabled)
|
||||
[mat-flat-button][color='primary']:not([disabled]) {
|
||||
background: linear-gradient(135deg, $accent 0%, #1d4ed8 100%) !important;
|
||||
box-shadow: 0 2px 8px rgb(37 99 235 / 28%) !important;
|
||||
color: #fff !important;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 4px 14px rgb(37 99 235 / 40%) !important;
|
||||
transform: translateY(-1px) !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Primary action button (disabled)
|
||||
[mat-flat-button][color='primary'][disabled] {
|
||||
background: #e2e8f0 !important;
|
||||
color: #94a3b8 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Form fields (in search popup) ─────────────────────────────────────── */
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
|
||||
> span {
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
select,
|
||||
input {
|
||||
padding: 0.55rem 0.7rem;
|
||||
border: 1.5px solid $border-color;
|
||||
border-radius: 7px;
|
||||
font-size: 0.82rem;
|
||||
color: $text-main;
|
||||
background: #fff;
|
||||
outline: none;
|
||||
transition:
|
||||
border-color 0.14s,
|
||||
box-shadow 0.14s;
|
||||
|
||||
&:hover {
|
||||
border-color: #94a3b8;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $accent;
|
||||
box-shadow: 0 0 0 3px rgb(37 99 235 / 12%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Sub-popups ─────────────────────────────────────────────────────────── */
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1.5rem;
|
||||
background: rgb(15 23 42 / 55%);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.popup {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 460px;
|
||||
max-height: 80vh;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 50px -8px rgb(15 23 42 / 30%);
|
||||
animation: popup-in 0.15s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
@keyframes popup-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.96) translateY(8px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.85rem 0.85rem 0.85rem 1.2rem;
|
||||
border-bottom: 1px solid $border-color;
|
||||
background: $bg-page;
|
||||
|
||||
h3 {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
font-size: 0.92rem;
|
||||
font-weight: 700;
|
||||
color: $text-main;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.85rem;
|
||||
padding: 1.2rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.popup-foot {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.6rem;
|
||||
padding: 0.8rem 1.2rem;
|
||||
border-top: 1px solid $border-color;
|
||||
background: $bg-page;
|
||||
}
|
||||
|
||||
/* ── Receipt detail popup ───────────────────────────────────────────────── */
|
||||
|
||||
.detail-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
margin: 0;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
dt {
|
||||
flex: none;
|
||||
width: 110px;
|
||||
padding: 0.6rem 0.9rem;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: $text-muted;
|
||||
background: $bg-page;
|
||||
border-right: 1px solid $border-color;
|
||||
}
|
||||
|
||||
dd {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
padding: 0.6rem 0.9rem;
|
||||
font-size: 0.8rem;
|
||||
color: $text-main;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-heading {
|
||||
margin: 0.4rem 0 0.1rem;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.gl-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.76rem;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 7px;
|
||||
overflow: hidden;
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 0.45rem 0.6rem;
|
||||
border-bottom: 1px solid $border-color;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
th {
|
||||
font-size: 0.64rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: $text-muted;
|
||||
background: $bg-page;
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background: $accent-soft;
|
||||
}
|
||||
|
||||
.num {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user