mirror of
https://github.com/frappe/erpnext.git
synced 2026-09-09 23:39:28 +00:00
0610708d78
fix(banking): UI cleanup and better statement parsing (#58817)
* fix(banking): reset scroll on searching accounts
* fix(banking): show only past dates in date filter
* fix(banking): clean up line heights and remove beta badge
* fix(banking): show accurate count of import progress
fix(banking): show latest 20 imports instead of 10
* fix(banking): layout sizing needs to be preserved on page change
* fix(banking): cleaner bank balance UI
* fix(banking): correctly parse Cr/Dr values in statement importer
* Update banking/src/components/features/BankReconciliation/BankBalance.tsx
---------
(cherry picked from commit ebe5decb96)
Co-authored-by: Nikhil Kothari <nik.kothari22@live.com>
Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
95 lines
4.1 KiB
CSS
95 lines
4.1 KiB
CSS
/* Scroll-edge fade mask for horizontal scroll containers (the bank picker strip).
|
|
Ported from Raven's `scroll-fade-x`; imported by index.css, since Tailwind processes
|
|
`@utility` in imported files the same as in the entry file.
|
|
|
|
The scroll-timeline keyframes reveal each edge's fade only when there IS content to scroll
|
|
in that direction - no fade on the left edge when scrolled fully left, none on the right at
|
|
the end. `@property` makes the fade animate smoothly rather than jumping.
|
|
|
|
Without scroll-timeline support (Firefox) there is deliberately NO fade at all: the fade
|
|
vars stay at their 0px initial value and the gradient stops collapse to the edges. A static
|
|
both-edges fallback was tried in Raven and removed - on a container with nothing to scroll
|
|
it dimmed the edges anyway, promising content that didn't exist. */
|
|
|
|
@property --scroll-fade-l {
|
|
/* length-percentage, NOT length: the fade size is min(12%, …) - a percentage. A <length>
|
|
property rejects that value and reverts to initial-value (0px), zeroing the fade. */
|
|
syntax: "<length-percentage>";
|
|
inherits: false;
|
|
initial-value: 0px;
|
|
}
|
|
|
|
@property --scroll-fade-r {
|
|
syntax: "<length-percentage>";
|
|
inherits: false;
|
|
initial-value: 0px;
|
|
}
|
|
|
|
@keyframes scroll-fade-reveal-l {
|
|
from {
|
|
--scroll-fade-l: 0px;
|
|
}
|
|
|
|
to {
|
|
--scroll-fade-l: var(--_scroll-fade-size-l);
|
|
}
|
|
}
|
|
|
|
@keyframes scroll-fade-reveal-r {
|
|
from {
|
|
--scroll-fade-r: var(--_scroll-fade-size-r);
|
|
}
|
|
|
|
to {
|
|
--scroll-fade-r: 0px;
|
|
}
|
|
}
|
|
|
|
@utility scroll-fade-x {
|
|
--_scroll-fade-size-l: var(--scroll-fade-l-size,
|
|
var(--scroll-fade-size, min(12%, calc(var(--spacing, 0.25rem) * 10))));
|
|
--_scroll-fade-size-r: var(--scroll-fade-r-size,
|
|
var(--scroll-fade-size, min(12%, calc(var(--spacing, 0.25rem) * 10))));
|
|
/* Eased (smoothstep) alpha ramp, sampled finely so it reads as a smooth curve, NOT fading
|
|
all the way to transparent: the edge floors at 0.25 (content dims, never vanishes), ramping
|
|
up to a full 1 for the body. The opaque end MUST be 1 or everything would be permanently
|
|
dimmed. Stops collapse to the edge when the size animates to 0, so the true first/last card
|
|
is never dimmed at rest. Tune the floor - higher (~0.4) = subtler, lower (~0.1) = stronger. */
|
|
--scroll-fade-inline: linear-gradient(to right,
|
|
rgba(0, 0, 0, 0.25) 0,
|
|
rgba(0, 0, 0, 0.282) calc(var(--scroll-fade-l, 0px) * 0.125),
|
|
rgba(0, 0, 0, 0.367) calc(var(--scroll-fade-l, 0px) * 0.25),
|
|
rgba(0, 0, 0, 0.487) calc(var(--scroll-fade-l, 0px) * 0.375),
|
|
rgba(0, 0, 0, 0.625) calc(var(--scroll-fade-l, 0px) * 0.5),
|
|
rgba(0, 0, 0, 0.763) calc(var(--scroll-fade-l, 0px) * 0.625),
|
|
rgba(0, 0, 0, 0.883) calc(var(--scroll-fade-l, 0px) * 0.75),
|
|
rgba(0, 0, 0, 0.968) calc(var(--scroll-fade-l, 0px) * 0.875),
|
|
rgba(0, 0, 0, 1) var(--scroll-fade-l, 0px),
|
|
rgba(0, 0, 0, 1) calc(100% - var(--scroll-fade-r, 0px)),
|
|
rgba(0, 0, 0, 0.968) calc(100% - var(--scroll-fade-r, 0px) * 0.875),
|
|
rgba(0, 0, 0, 0.883) calc(100% - var(--scroll-fade-r, 0px) * 0.75),
|
|
rgba(0, 0, 0, 0.763) calc(100% - var(--scroll-fade-r, 0px) * 0.625),
|
|
rgba(0, 0, 0, 0.625) calc(100% - var(--scroll-fade-r, 0px) * 0.5),
|
|
rgba(0, 0, 0, 0.487) calc(100% - var(--scroll-fade-r, 0px) * 0.375),
|
|
rgba(0, 0, 0, 0.367) calc(100% - var(--scroll-fade-r, 0px) * 0.25),
|
|
rgba(0, 0, 0, 0.282) calc(100% - var(--scroll-fade-r, 0px) * 0.125),
|
|
rgba(0, 0, 0, 0.25) 100%);
|
|
-webkit-mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
|
|
mask-image: var(--scroll-fade-mask, var(--scroll-fade-inline));
|
|
-webkit-mask-composite: source-in;
|
|
mask-composite: intersect;
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
|
|
@supports (animation-timeline: scroll()) {
|
|
animation:
|
|
scroll-fade-reveal-l 1ms ease-in-out,
|
|
scroll-fade-reveal-r 1ms ease-in-out;
|
|
animation-timeline: scroll(self x), scroll(self x);
|
|
animation-range:
|
|
0 var(--scroll-fade-reveal, calc(var(--spacing, 0.25rem) * 24)),
|
|
calc(100% - var(--scroll-fade-reveal, calc(var(--spacing, 0.25rem) * 24))) 100%;
|
|
animation-fill-mode: both;
|
|
}
|
|
}
|