gabriel / musehub public
_nav.scss
218 lines 5.6 KB
Raw
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ breaking 1 day 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 1 commit
sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ 1 day ago