mirror of
https://github.com/Nexoniarz/Niveus.git
synced 2026-11-03 12:44:26 +00:00
7908c55245
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>
157 lines
4.7 KiB
CSS
157 lines
4.7 KiB
CSS
/* ==========================================================================
|
|
Niveus — Steps
|
|
--------------------------------------------------------------------------
|
|
<ol class="nv-steps">
|
|
<li class="nv-steps__item" data-state="done">
|
|
<span class="nv-steps__marker">1</span>
|
|
<div class="nv-steps__body">
|
|
<h3 class="nv-steps__title">Listen</h3>
|
|
<p class="nv-steps__text">…</p>
|
|
</div>
|
|
</li>
|
|
</ol>
|
|
|
|
A sequence the user moves through: a process, an onboarding, an order's
|
|
progress. The steps sit on a rail — a groove cut into the surface — with
|
|
each marker a raised knob set into it. Finished steps light their stretch
|
|
of the rail, so progress reads as something filling up rather than as a
|
|
row of ticks.
|
|
|
|
.nv-steps horizontal; becomes vertical on narrow screens
|
|
.nv-steps--vertical always vertical
|
|
data-state="done" the step and its stretch of rail are lit
|
|
aria-current="step" the step in progress: lit marker, rail still dark
|
|
========================================================================== */
|
|
|
|
.nv-steps {
|
|
--_marker: 2.25rem;
|
|
--_rail: 6px;
|
|
--_gap: var(--nv-space-4);
|
|
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: minmax(0, 1fr);
|
|
gap: var(--_gap);
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.nv-steps__item {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--nv-space-3);
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
/* Each step draws the rail from its own marker to the next one, so a finished
|
|
step can light exactly its stretch and the rail never runs past the end. */
|
|
.nv-steps__item:not(:last-child)::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset-block-start: calc((var(--_marker) - var(--_rail)) / 2);
|
|
inset-inline-start: calc(var(--_marker) / 2);
|
|
inline-size: calc(100% + var(--_gap));
|
|
block-size: var(--_rail);
|
|
border-radius: var(--nv-radius-full);
|
|
background-color: var(--nv-color-surface-inset);
|
|
box-shadow: var(--nv-elevation-inset-sm), var(--nv-ledge);
|
|
transition: var(--nv-transition-surface);
|
|
}
|
|
|
|
.nv-steps__item[data-state="done"]:not(:last-child)::before {
|
|
background-color: var(--nv-color-accent);
|
|
background-image: var(--nv-sheen-filled);
|
|
box-shadow: var(--nv-glow-sm);
|
|
}
|
|
|
|
.nv-steps__marker {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: grid;
|
|
place-items: center;
|
|
flex: none;
|
|
inline-size: var(--_marker);
|
|
block-size: var(--_marker);
|
|
|
|
background-color: var(--nv-color-surface-elevated);
|
|
background-image: var(--nv-sheen-raised);
|
|
color: var(--nv-color-text-secondary);
|
|
font: var(--nv-font-label);
|
|
font-weight: var(--nv-font-weight-semibold);
|
|
font-variant-numeric: tabular-nums;
|
|
border-radius: var(--nv-radius-full);
|
|
box-shadow: var(--nv-bevel), var(--nv-outline), var(--nv-elevation-2);
|
|
transition: var(--nv-transition-surface);
|
|
}
|
|
|
|
.nv-steps__item[data-state="done"] > .nv-steps__marker,
|
|
.nv-steps__item[aria-current="step"] > .nv-steps__marker {
|
|
background-color: var(--nv-color-accent);
|
|
background-image: var(--nv-sheen-filled);
|
|
color: var(--nv-color-on-accent);
|
|
box-shadow: var(--nv-bevel), var(--nv-outline), var(--nv-elevation-2), var(--nv-glow-md);
|
|
}
|
|
|
|
.nv-steps__body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--nv-space-1);
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
.nv-steps__title {
|
|
margin: 0;
|
|
font: var(--nv-font-title);
|
|
letter-spacing: var(--nv-letter-spacing-tight);
|
|
color: var(--nv-color-text-primary);
|
|
}
|
|
|
|
.nv-steps__text {
|
|
margin: 0;
|
|
font: var(--nv-font-caption);
|
|
color: var(--nv-color-text-secondary);
|
|
}
|
|
|
|
/* --- Vertical -------------------------------------------------------------------
|
|
Marker beside the text and the rail running down between markers. Also what
|
|
a horizontal sequence becomes once its columns are too narrow to read. */
|
|
|
|
.nv-steps--vertical {
|
|
grid-auto-flow: row;
|
|
grid-auto-columns: auto;
|
|
--_gap: var(--nv-space-5);
|
|
}
|
|
|
|
.nv-steps--vertical > .nv-steps__item {
|
|
flex-direction: row;
|
|
gap: var(--nv-space-4);
|
|
}
|
|
|
|
.nv-steps--vertical > .nv-steps__item:not(:last-child)::before {
|
|
inset-block-start: calc(var(--_marker) / 2);
|
|
inset-inline-start: calc((var(--_marker) - var(--_rail)) / 2);
|
|
inline-size: var(--_rail);
|
|
block-size: calc(100% + var(--_gap));
|
|
}
|
|
|
|
@media (max-width: 40rem) {
|
|
.nv-steps {
|
|
grid-auto-flow: row;
|
|
grid-auto-columns: auto;
|
|
--_gap: var(--nv-space-5);
|
|
}
|
|
|
|
.nv-steps > .nv-steps__item {
|
|
flex-direction: row;
|
|
gap: var(--nv-space-4);
|
|
}
|
|
|
|
.nv-steps > .nv-steps__item:not(:last-child)::before {
|
|
inset-block-start: calc(var(--_marker) / 2);
|
|
inset-inline-start: calc((var(--_marker) - var(--_rail)) / 2);
|
|
inline-size: var(--_rail);
|
|
block-size: calc(100% + var(--_gap));
|
|
}
|
|
}
|