gabriel / musehub public
_nav.scss
218 lines 5.6 KB
Raw
sha256:34035d72cef530c1ab9d6a6f53be18d803dde705fc3157617d70352a96d0747b Merge branch 'fix/wire-push-external-parent-manifest' into dev Human 8 days ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Component: Nav
3 // File: src/scss/components/_nav.scss
4 //
5 // Variants: .tabs .tab-list .tab .tab-panel .tab-btn .tab-btn.tab-active
6 // .sort-btn .sort-btn.sort-active .sidebar-section
7 // Tokens: --border-default, --color-accent, --text-primary, --text-muted
8 // Usage: <ul class="tab-list"><li class="tab is-active">…</li></ul>
9 //
10 // Notes: Topbar / navbar CSS lives in _layout.scss (structural).
11 // Tab underline uses --color-accent — consistent with active states.
12 // ─────────────────────────────────────────────────────────────────────────────
13
14 // Site nav — top navigation bar
15 .site-nav {
16 display: flex;
17 align-items: center;
18 gap: var(--space-4);
19 padding: 0 var(--space-6);
20 height: var(--header-height, 52px);
21 background: var(--bg-base);
22 border-bottom: 1px solid var(--border-subtle);
23 position: sticky;
24 top: 0;
25 z-index: var(--z-sticky);
26 }
27
28 .site-nav__logo {
29 display: flex;
30 align-items: center;
31 gap: var(--space-2);
32 text-decoration: none;
33 color: var(--text-primary);
34 font-weight: var(--weight-semibold);
35 flex-shrink: 0;
36 }
37
38 .site-nav__links {
39 display: flex;
40 align-items: center;
41 gap: var(--space-1);
42 flex: 1;
43
44 a {
45 font-size: var(--text-sm);
46 color: var(--text-muted);
47 text-decoration: none;
48 padding: 4px var(--space-2);
49 border-radius: var(--radius-sm);
50 transition: color var(--transition-fast), background var(--transition-fast);
51
52 &:hover { color: var(--text-primary); background: var(--bg-overlay); }
53 &.active { color: var(--text-primary); }
54 }
55 }
56
57 .site-nav__actions {
58 display: flex;
59 align-items: center;
60 gap: var(--space-2);
61 margin-left: auto;
62 flex-shrink: 0;
63 }
64
65 // Breadcrumb
66 .breadcrumb {
67 display: flex;
68 align-items: center;
69 gap: var(--space-1);
70 flex-wrap: wrap;
71 font-size: var(--text-sm);
72 }
73
74 .breadcrumb__item {
75 color: var(--text-muted);
76 text-decoration: none;
77
78 &:hover { color: var(--text-primary); }
79 &:last-child { color: var(--text-primary); }
80 }
81
82 .breadcrumb__sep {
83 color: var(--border-default);
84 user-select: none;
85 }
86
87 // Sidebar nav
88 .sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
89
90 .sidebar-nav__item {
91 display: flex;
92 align-items: center;
93 gap: var(--space-2);
94 padding: 6px var(--space-3);
95 border-radius: var(--radius-sm);
96 font-size: var(--text-sm);
97 color: var(--text-muted);
98 text-decoration: none;
99 transition: color var(--transition-fast), background var(--transition-fast);
100
101 &:hover { color: var(--text-primary); background: var(--bg-overlay); }
102
103 &--active {
104 color: var(--text-primary);
105 background: var(--bg-overlay);
106 font-weight: var(--weight-medium);
107 }
108 }
109
110 .tabs { margin-bottom: var(--space-4); }
111
112 .tab-list {
113 display: flex;
114 border-bottom: 1px solid var(--border-default);
115 list-style: none;
116 }
117
118 .tab {
119 padding: var(--space-2) var(--space-4);
120 font-size: var(--text-base);
121 font-weight: var(--weight-medium);
122 color: var(--text-muted);
123 cursor: pointer;
124 border-bottom: 2px solid transparent;
125 margin-bottom: -1px;
126 transition: color var(--transition-base), border-color var(--transition-base);
127 white-space: nowrap;
128
129 &:hover { color: var(--text-primary); }
130 &.is-active,
131 &.tab--active { color: var(--text-primary); border-bottom-color: var(--color-accent); }
132 }
133
134 .tab-panel { display: none; padding-top: var(--space-4); }
135 .tab-panel.is-active { display: block; }
136
137 // Open/Closed tab buttons (issue list, proposal list)
138 .tab-btn {
139 background: none;
140 border: none;
141 border-bottom: 2px solid transparent;
142 padding: var(--space-2) var(--space-4);
143 font-size: var(--text-sm);
144 color: var(--text-muted);
145 cursor: pointer;
146 transition: color var(--transition-base), border-color var(--transition-base);
147
148 &:hover { color: var(--text-primary); }
149
150 &.tab-active {
151 color: var(--text-primary);
152 border-bottom-color: var(--color-accent);
153 font-weight: var(--weight-semibold);
154 }
155 }
156
157 .tab-count {
158 display: inline-block;
159 background: var(--bg-hover);
160 border-radius: var(--radius-full);
161 font-size: var(--text-xs);
162 padding: 0 6px;
163 margin-left: 4px;
164 color: var(--text-muted);
165 }
166
167 // Sort buttons
168 .sort-btn {
169 padding: 4px 10px;
170 border-radius: var(--radius-md);
171 border: 1px solid var(--border-default);
172 background: var(--bg-overlay);
173 color: var(--text-secondary);
174 font-size: 12px;
175 cursor: pointer;
176
177 &:hover { border-color: var(--color-accent); color: var(--color-accent); }
178
179 &.sort-active {
180 background: var(--color-accent);
181 color: #fff;
182 border-color: var(--color-accent);
183 }
184 }
185
186 .sort-controls .sort-active,
187 .filter-bar .sort-active {
188 background: var(--color-accent);
189 color: #fff;
190 border-color: var(--color-accent);
191 }
192
193 // Sidebar section
194 .sidebar-section {
195 margin-bottom: var(--space-3);
196 padding-bottom: var(--space-3);
197 border-bottom: 1px solid var(--border-default);
198
199 &:last-child { border-bottom: none; }
200 }
201
202 .sidebar-count {
203 font-size: 10px;
204 background: var(--bg-hover);
205 color: var(--text-muted);
206 border-radius: 8px;
207 padding: 0 5px;
208 }
209
210 .sidebar-section-title {
211 font-family: var(--font-mono);
212 font-size: 10px;
213 font-weight: var(--weight-bold);
214 color: var(--color-accent);
215 text-transform: uppercase;
216 letter-spacing: 1.5px;
217 margin: 0 0 var(--space-2) 0;
218 }
File History 14 commits
sha256:34035d72cef530c1ab9d6a6f53be18d803dde705fc3157617d70352a96d0747b Merge branch 'fix/wire-push-external-parent-manifest' into dev Human 8 days ago
sha256:fc04e4cae9e1774d6a21b65c45daeed0e6787eb581d13aa1b03bfe9384a34226 Merge branch 'fix/two-column-scroll-layout' into dev Human 8 days ago
sha256:408916fc5973ba59c6e4eebaa80ebdcc801c0a63205651e25009d11548f79454 chore: bump version to 0.2.0.dev2 — nightly.2, matching muse Sonnet 4.6 patch 11 days ago
sha256:d035733f21ccff27735fddebfbbe0ed24565a32a22db8de5885402262671ecd2 chore: bump version to 0.2.0rc15 for musehub#113 fix release Sonnet 4.6 patch 14 days ago
sha256:0032d6cfa33bc3c8367436ad768e7dd0e339b4332153160247da8266cb5fa352 Merge branch 'task/version-tags-phase3-server' into dev Human 17 days ago
sha256:4669620efda9ff41c55bdefd1f7bfe1c239d468428744c84ead9957e5a003a53 merge: rescue snapshot-recovery hardening (c00aa21d) into d… Opus 4.8 minor ⚠ 29 days ago
sha256:a59da49c4611b970fc4b6ae48678ce4943261c213a07ddbd73ce9201df869b4a fix: remove false-positive proposal_comments index drop fro… Sonnet 4.6 patch 33 days ago
sha256:0a240d6dbff234f07d98a28a4a9a68db702f3f9ff9260196f24219bdb1c0b6f3 feat: render markdown mists as HTML with heading anchor links Sonnet 4.6 patch 34 days ago
sha256:24a7d47486ebc4ebd1832830580e177ec6f877b48dced8c000e198cdec4ce9d6 Merge 'task/bump-version-rc12' into 'dev' — proposal: Bump … Human 35 days ago
sha256:b9ff931d147e0114a1f17060f415b89ed551c170a91ff226c70437aa5c85f9ee Merge 'task/bump-version-rc12' into 'dev' — proposal: Bump … Human 35 days ago
sha256:d1122d21e73471879b460037b22c0b50fded7c423444a176f248428f75dac39c Merge 'task/fix-issue-pagination-cursor' into 'dev' — propo… Human 35 days ago
sha256:01e18975e73d2b3cd5b6db7929c895bef9aa6e0d4391dc5b2adfc548b41318dd Merge 'feat/adding-debug-logs-to-staging' into 'dev' — prop… Human 35 days ago
sha256:6b1949fc2797ca4c1936a637a4cbfec828ef56cf52398a2e74ca3c4f494e728f fix: use wire_bytes not mpack_bytes_raw in compute_object_b… Sonnet 4.6 patch 48 days ago
sha256:b99f2455dc346966d040133f5203297e6e3ef5803a93728a2c30568d0a0f7583 rename: delta_add → delta_upsert across wire format, models… Sonnet 4.6 patch 50 days ago