BFPOWER/cybersteel
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed navigation press animations

Browse Source
This commit is contained in:
Zachary Levy
2026-08-11 13:54:33 -07:00
parent 96fc643cb7
commit 83d11f5d99
1 changed files with 18 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
preview/components-nav.html
+18 -9
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<!-- @dsCard group="Brand" name="Navigation" subtitle="T10 Lit Divider locked for top tabs; side nav pending" viewport="960x160" --> <!-- @dsCard group="Brand" name="Navigation" subtitle="T10 Lit Divider + text-snap press (P4) for top tabs and side nav" viewport="960x160" -->
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
@@ -90,7 +90,7 @@
border-radius: 2px; border-radius: 2px;
} }
.product-name { .wordmark {
font-family: var(--font-display, 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif); font-family: var(--font-display, 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
font-size: 13px; font-size: 13px;
font-weight: 700; letter-spacing: 0.18em; font-weight: 700; letter-spacing: 0.18em;
@@ -126,7 +126,7 @@
border-bottom: 1px solid var(--border, #7c6f64); border-bottom: 1px solid var(--border, #7c6f64);
padding: 0 12px; padding: 0 12px;
} }
.topnav .product-name { .topnav .wordmark {
display: flex; align-items: center; display: flex; align-items: center;
padding: 0 16px 0 8px; padding: 0 16px 0 8px;
margin-right: 8px; margin-right: 8px;
@@ -142,10 +142,14 @@
text-transform: uppercase; text-transform: uppercase;
color: var(--fg-caption, #cebd9e); color: var(--fg-caption, #cebd9e);
cursor: pointer; cursor: pointer;
transition: color var(--transition-hover, 150ms ease-out); transition: color var(--transition-hover, 150ms ease-out), background var(--transition-ui, 180ms ease-out);
height: 100%; height: 100%;
} }
.tab:hover { color: var(--fg-body, #f2e2ba); } .tab:hover { color: var(--fg-body, #f2e2ba); }
.tab:active {
color: var(--gold-bright, #fabd2f);
transition: color var(--transition-press, 55ms ease-out);
}
.tab.active { color: var(--fg-heading, #fbf1c7); } .tab.active { color: var(--fg-heading, #fbf1c7); }
.tab.active::after { .tab.active::after {
content: ""; position: absolute; content: ""; position: absolute;
@@ -168,7 +172,7 @@
padding: 12px 0; padding: 12px 0;
display: flex; flex-direction: column; display: flex; flex-direction: column;
} }
.sb-product-name { .sb-wordmark {
padding: 4px 20px 16px; padding: 4px 20px 16px;
border-bottom: 1px solid var(--border-subtle, #665c54); border-bottom: 1px solid var(--border-subtle, #665c54);
margin-bottom: 8px; margin-bottom: 8px;
@@ -190,6 +194,7 @@
transition: color var(--transition-hover, 150ms ease-out); transition: color var(--transition-hover, 150ms ease-out);
} }
.sb-item:hover { color: var(--fg-body, #f2e2ba); } .sb-item:hover { color: var(--fg-body, #f2e2ba); }
.sb-item:active { color: var(--gold-bright, #fabd2f); transition: color var(--transition-press, 55ms ease-out); }
.sb-item.active { color: var(--fg-heading, #fbf1c7); font-weight: 600; } .sb-item.active { color: var(--fg-heading, #fbf1c7); font-weight: 600; }
</style> </style>
</head> </head>
@@ -206,13 +211,13 @@
<div class="pattern-head"> <div class="pattern-head">
<div class="pattern-num">01</div> <div class="pattern-num">01</div>
<div class="pattern-title">Top Tabs</div> <div class="pattern-title">Top Tabs</div>
<div class="pattern-desc">Lit divider — the bottom rule glows gold under the active tab.</div> <div class="pattern-desc">Lit divider — the bottom rule glows gold under the active tab. Press: label snaps gold-bright at 55ms, releases at 180ms. Click to try.</div>
<div class="pattern-status status-locked">✓ Locked</div> <div class="pattern-status status-locked">✓ Locked</div>
</div> </div>
<div class="frame"> <div class="frame">
<div class="topframe"> <div class="topframe">
<div class="topnav"> <div class="topnav">
<div class="product-name">Cybersteel</div> <div class="wordmark">Cybersteel</div>
<div class="tab active">Dashboard</div> <div class="tab active">Dashboard</div>
<div class="tab">Nodes</div> <div class="tab">Nodes</div>
<div class="tab">Builds</div> <div class="tab">Builds</div>
@@ -230,13 +235,13 @@
<div class="pattern-head"> <div class="pattern-head">
<div class="pattern-num">02</div> <div class="pattern-num">02</div>
<div class="pattern-title">Side Nav</div> <div class="pattern-title">Side Nav</div>
<div class="pattern-desc">Bare brightness — active item is cream &amp; bold; rest are muted.</div> <div class="pattern-desc">Bare brightness — active item is cream &amp; bold; rest are muted. Same text-snap press.</div>
<div class="pattern-status status-locked">✓ Locked</div> <div class="pattern-status status-locked">✓ Locked</div>
</div> </div>
<div class="frame"> <div class="frame">
<div class="sideframe"> <div class="sideframe">
<nav class="sidebar"> <nav class="sidebar">
<div class="sb-product-name product-name">Cybersteel</div> <div class="sb-wordmark wordmark">Cybersteel</div>
<div class="sb-section">Operate</div> <div class="sb-section">Operate</div>
<div class="sb-item active">Dashboard</div> <div class="sb-item active">Dashboard</div>
<div class="sb-item">Nodes</div> <div class="sb-item">Nodes</div>
@@ -255,5 +260,9 @@
</div> </div>
</section> </section>
<script>
document.querySelectorAll('.topnav .tab').forEach(function(t){t.addEventListener('click',function(){document.querySelectorAll('.topnav .tab').forEach(function(o){o.classList.remove('active');});t.classList.add('active');});});
document.querySelectorAll('.sidebar .sb-item').forEach(function(t){t.addEventListener('click',function(){document.querySelectorAll('.sidebar .sb-item').forEach(function(o){o.classList.remove('active');});t.classList.add('active');});});
</script>
</body> </body>
</html> </html>