Files
edr-platform/apps/edr-freight-web/backoffice/src/components/overview/summary/overview-summary.css
2026-08-13 12:44:06 +00:00

66 lines
1.5 KiB
CSS

/* Staggered fade-up entrance for the overview bands. Delay is set inline per
band; disabled entirely for reduced-motion users. */
.ov-band {
animation: ov-rise 420ms ease-out both;
}
@keyframes ov-rise {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.ov-band {
animation: none;
}
}
/* ---- Shared card chrome (SummaryCard) ---- */
.ov-card {
display: block;
height: 100%;
background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
border: 1px solid var(--mantine-color-edr-border-0);
border-radius: 20px;
padding: 20px;
color: inherit;
text-decoration: none;
box-shadow:
0 1px 2px rgba(16, 32, 47, 0.04),
0 12px 32px -18px rgba(16, 32, 47, 0.14);
transition:
box-shadow 180ms ease,
transform 180ms ease,
border-color 180ms ease;
}
/* The lift is a click affordance — only linked cards get it. */
.ov-card--link:hover {
box-shadow:
0 2px 4px rgba(16, 32, 47, 0.05),
0 20px 44px -18px rgba(16, 32, 47, 0.2);
border-color: var(--mantine-color-edr-green-2);
transform: translateY(-2px);
}
/* Soft inset panel for grouping content inside a card. */
.ov-inset {
background: var(--mantine-color-gray-0);
border: 1px solid var(--mantine-color-gray-1);
border-radius: 14px;
}
/* Interactive list row inside a card. */
.ov-row {
border-radius: 12px;
transition: background 140ms ease;
}
.ov-row:hover {
background: var(--mantine-color-gray-0);
}