mirror of
https://github.com/Nexoniarz/Niveus.git
synced 2026-11-03 04:34:26 +00:00
Add depth and light: glow, tiles, avatars, stats, steps, decks, skeletons, reveal
Tokens - --nv-color-glow role (light and dark) and a glow scale: --nv-glow-sm/md/lg, --nv-glow-blur-*, --nv-glow-spread-*, --nv-glow-strength - --nv-stagger (0ms under reduced motion) and --nv-duration-shimmer Components - Card: --lit (lit top edge in --nv-card-tint), --glow, --spotlight (light follows the pointer); light layers combine with every elevation - Tile: small raised key for a glyph or product mark; --solid, --glow, sizes - Avatar: raised disc with --ring / --glow, sizes, __status, avatar group - Stat: readings set into one recessed well (.nv-stat-group) - Steps: markers set into a rail; done steps light their stretch; vertical - Deck: one surface in front of stacked layers of its kind - Skeleton: recessed placeholder with a slow sweep, still under reduced motion - Text: .nv-text-lit and .nv-text-lit--accent Continuity - .nv-reveal / .nv-reveal-group: content arrives once as it scrolls into view (nv-arrive keyframe); niveus.js marks pending state, so nothing is hidden without the script or under reduced motion - niveus.js tracks the pointer for .nv-card--spotlight README and REFERENCE document every new class, token and attribute; tools/check.py passes and dist/ is rebuilt. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
parent
8de6e261de
commit
7908c55245
19 changed files with 1619 additions and 14 deletions
55
niveus/components/deck.css
Normal file
55
niveus/components/deck.css
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
/* ==========================================================================
|
||||
Niveus — Deck
|
||||
--------------------------------------------------------------------------
|
||||
<div class="nv-deck">
|
||||
<article class="nv-card">…</article>
|
||||
<div class="nv-deck__layer" aria-hidden="true"></div>
|
||||
<div class="nv-deck__layer" aria-hidden="true"></div>
|
||||
</div>
|
||||
|
||||
One surface in front of others of its kind: the current item of a set that
|
||||
has more behind it. The layers are cards seen edge-on, stepping back and
|
||||
dimming with distance, so the set has depth without anything having to
|
||||
move. Use it where "there are more of these" is part of the message — a
|
||||
showcase of products, a stack of notifications, a carousel at rest.
|
||||
|
||||
Everything in the deck shares one grid cell. The front surface is any
|
||||
element; the layers are decorative and hidden from assistive technology.
|
||||
Panels that swap (an .nv-tab-panel set) can live in the deck together:
|
||||
the hidden ones take no space.
|
||||
========================================================================== */
|
||||
|
||||
.nv-deck {
|
||||
--_step: var(--nv-space-3);
|
||||
|
||||
display: grid;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
/* Room above the front surface for the layers that peek out behind it. */
|
||||
padding-block-start: calc(var(--_step) * 2);
|
||||
}
|
||||
|
||||
.nv-deck > * {
|
||||
grid-area: 1 / 1;
|
||||
min-inline-size: 0;
|
||||
}
|
||||
|
||||
.nv-deck__layer {
|
||||
--_depth: 1;
|
||||
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-color: color-mix(in oklab, var(--nv-color-surface) 90%, transparent);
|
||||
background-image: var(--nv-sheen-surface);
|
||||
border: var(--nv-border-width) solid var(--nv-color-border-subtle);
|
||||
border-radius: var(--nv-radius-lg);
|
||||
box-shadow: var(--nv-bevel), var(--nv-outline), var(--nv-elevation-1);
|
||||
translate: 0 calc(var(--_step) * var(--_depth) * -1);
|
||||
scale: calc(1 - var(--_depth) * 0.05) 1;
|
||||
opacity: calc(1 - var(--_depth) * 0.3);
|
||||
}
|
||||
|
||||
.nv-deck__layer + .nv-deck__layer {
|
||||
--_depth: 2;
|
||||
z-index: -2;
|
||||
}
|
||||
Loading…
Reference in a new issue