Edwin van den Houdt
5027f099cf
- animate.enter/leave on aanvraag cards and upload rows (native Angular, no @angular/animations) - reduced-motion: skip animation → instant removal - api-client: null-body statuses (204/205/304) must pass null to Response() Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
112 lines
4.9 KiB
SCSS
112 lines
4.9 KiB
SCSS
/* Rijkshuisstijl design tokens (already themed) + Utrecht/RHC component CSS.
|
|
ponytail: we import the published CSS instead of hand-writing styles — the
|
|
whole point is that the design system gives us Rijkshuisstijl for free. */
|
|
@import '@rijkshuisstijl-community/design-tokens/dist/index.css'; /* .rhc-theme tokens */
|
|
@import '@rijkshuisstijl-community/design-tokens/dist/lintblauw/index.css'; /* .lintblauw palette */
|
|
@import '@rijkshuisstijl-community/components-css/dist/index.css'; /* component classes */
|
|
|
|
html, body { margin: 0; min-height: 100%; }
|
|
/* Rijkshuisstijl pages sit on white; cards/panels carry the subtle grey. */
|
|
body { background: var(--rhc-color-wit); color: var(--rhc-color-foreground-default); }
|
|
|
|
/* App theme layer: a few app-specific measures RHC has no token for (content/form
|
|
widths), defined ONCE here and mapped onto RHC where possible. Components reference
|
|
these tokens instead of raw values. */
|
|
:root {
|
|
--app-content-max: 67rem; /* readable page column */
|
|
--app-form-max: 32rem; /* default wizard form width */
|
|
--app-form-narrow: 32rem; /* page-shell narrow variant */
|
|
--app-skip-link-offset: -999px; /* off-screen skip link */
|
|
--app-sidebar-width: 15rem; /* overview side navigation */
|
|
}
|
|
|
|
/* App utility classes: centralise the repeated inline layout idioms so components stay
|
|
token-based and free of raw values. */
|
|
.app-form { max-inline-size: var(--app-form-max); }
|
|
.app-button-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--rhc-space-max-md);
|
|
align-items: center;
|
|
}
|
|
.app-button-row--spaced { margin-block-start: var(--rhc-space-max-xl); }
|
|
/* vertical rhythm between stacked blocks */
|
|
.app-stack > * + * { margin-block-start: var(--rhc-space-max-xl); }
|
|
.app-section { margin-block-start: var(--rhc-space-max-2xl); }
|
|
.app-text-subtle { color: var(--rhc-color-foreground-subtle); }
|
|
/* responsive card grid: cards wrap and stretch, gap from the spacing scale */
|
|
.app-card-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
|
|
gap: var(--rhc-space-max-xl);
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Overview ("Mijn omgeving") layout: side navigation + main column. Collapses to
|
|
a single column on narrow viewports (nav stacks above the content). */
|
|
.app-overview {
|
|
display: grid;
|
|
grid-template-columns: var(--app-sidebar-width) minmax(0, 1fr);
|
|
gap: var(--rhc-space-max-3xl);
|
|
align-items: start;
|
|
}
|
|
@media (max-width: 48rem) {
|
|
.app-overview { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* Rijkshuisstijl form panel: the subtle-grey block a form sits in (see the
|
|
rijksoverheid.nl contact-form reference). */
|
|
.app-form-panel {
|
|
background: var(--rhc-color-cool-grey-100);
|
|
border-radius: var(--rhc-border-radius-md);
|
|
padding: var(--rhc-space-max-2xl);
|
|
}
|
|
/* Vertical rhythm between fields projected into a form panel. Global (not
|
|
component-scoped) so it reaches projected content past view encapsulation. */
|
|
.app-form-panel > * + * { margin-block-start: var(--rhc-space-max-xl); }
|
|
|
|
/* Bordered info box (outline, no fill) — e.g. a "Vragen?" contact block. */
|
|
.app-info-box {
|
|
border: var(--rhc-border-width-sm) solid var(--rhc-color-border-default);
|
|
border-radius: var(--rhc-border-radius-md);
|
|
padding: var(--rhc-space-max-xl);
|
|
}
|
|
|
|
/* Route transitions (withViewTransitions): cross-fade the routed CONTENT only.
|
|
The chrome gets its own stable view-transition-name so it's lifted out of the
|
|
`root` snapshot and stays put while the content fades. */
|
|
app-site-header { view-transition-name: site-header; }
|
|
app-site-footer { view-transition-name: site-footer; }
|
|
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
animation-duration: 180ms;
|
|
animation-timing-function: ease;
|
|
}
|
|
|
|
/* List-item enter/leave for lists that add/remove at runtime (aanvraag cards, upload
|
|
rows). Used via Angular's native `animate.enter`/`animate.leave` — no @angular/animations. */
|
|
@keyframes app-item-enter { from { opacity: 0; transform: translateY(-0.5rem); } to { opacity: 1; transform: none; } }
|
|
@keyframes app-item-leave {
|
|
from { opacity: 1; max-block-size: 50rem; }
|
|
to { opacity: 0; transform: translateY(-0.25rem); max-block-size: 0; margin-block: 0; padding-block: 0; }
|
|
}
|
|
.app-item-enter { animation: app-item-enter 220ms ease both; }
|
|
.app-item-leave {
|
|
display: block; /* collapse needs block formatting (host is inline/flex by default) */
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
/* ponytail: 50rem max-height hack; if an item is taller the collapse eases slightly late — measure height in JS then. */
|
|
animation: app-item-leave 260ms ease both;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
::view-transition-group(*),
|
|
::view-transition-old(*),
|
|
::view-transition-new(*) { animation: none !important; }
|
|
/* No animation → Angular removes the leaving node immediately (instant, no motion). */
|
|
.app-item-enter, .app-item-leave { animation: none; }
|
|
}
|