niteshandClaude Sonnet 5
2cc8d979ba
backdrop-filter on the list-embedded review popup was making it a new containing block for its own nested position:fixed dialogs (Validate, Reject, Confirm-Submit), confining them to the popup's box instead of the viewport — replaced the blur with a plain darker overlay. Also adds a permanent Client Compliance card (KYC status, risk category, open AML alerts) on the review screen so a manager can see it without opening the Validate popup. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
65 lines
1.6 KiB
SCSS
65 lines
1.6 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/.
|
|
*/
|
|
|
|
@keyframes swr-list-popup-fade {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes swr-list-popup-zoom {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.97) translateY(10px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1) translateY(0);
|
|
}
|
|
}
|
|
|
|
.swr-list-popup-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
// No backdrop-filter here: filter/backdrop-filter on an ancestor makes browsers treat it as a new
|
|
// containing block for `position: fixed` descendants — the embedded review screen inside this popup
|
|
// renders its OWN fixed-position dialogs (Validate, Reject, Confirm-Submit), which would then be
|
|
// confined to this backdrop's box instead of the real viewport. Extra opacity on the background
|
|
// color compensates for the loss of the blur look.
|
|
background: rgb(15 25 45 / 65%);
|
|
z-index: 1100;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding: 32px 20px;
|
|
overflow-y: auto;
|
|
animation: swr-list-popup-fade 0.2s ease-out;
|
|
}
|
|
|
|
.swr-list-popup-panel {
|
|
background: #f7f9fc;
|
|
border-radius: 16px;
|
|
width: 100%;
|
|
max-width: 1100px;
|
|
box-shadow: 0 24px 60px rgb(0 0 0 / 25%);
|
|
animation: swr-list-popup-zoom 0.25s ease-out;
|
|
padding: 4px;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.swr-list-popup-backdrop,
|
|
.swr-list-popup-panel {
|
|
animation: none;
|
|
}
|
|
}
|