gabriel / musehub public
_issues.scss
465 lines 8.5 KB
Raw
sha256:3ff952bf9840772755d63295c58e272a14a808035a2d93b7896ba8e0cf602171 fix(layout): two-column sticky sidebar scroll across all pa… Human minor ⚠ breaking 8 days ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Page: Issues (/*/issues + /*/issues/* + /*/issues/new)
3 // File: src/scss/pages/_issues.scss
4 //
5 // STRUCTURAL LAYOUT ONLY — zero colors, zero typography here.
6 // Visual rules live in components/_issues.scss.
7 // ─────────────────────────────────────────────────────────────────────────────
8
9 // ── Issue list page (.isl-*) ──────────────────────────────────────────────────
10
11 .isl-page {
12 display: flex;
13 flex-direction: column;
14 gap: var(--space-4);
15 }
16
17 .isl-layout {
18 display: grid;
19 grid-template-columns: 1fr 220px;
20 gap: var(--space-4);
21 align-items: start;
22 min-height: 0;
23
24 @media (max-width: 900px) { grid-template-columns: 1fr; }
25 }
26
27 .isl-main {
28 min-width: 0;
29 display: flex;
30 flex-direction: column;
31 gap: var(--space-3);
32 }
33
34 .isl-sidebar {
35 display: flex;
36 flex-direction: column;
37 gap: 0;
38 position: sticky;
39 top: calc(var(--sticky-offset, var(--header-height)) + var(--space-4));
40 max-height: calc(100dvh - var(--sticky-offset, var(--header-height)) - var(--space-4));
41 overflow-y: auto;
42 scrollbar-width: thin;
43 scrollbar-color: var(--border-default) transparent;
44
45 @media (max-width: 900px) {
46 position: static;
47 max-height: none;
48 overflow-y: visible;
49 display: none;
50 }
51 }
52
53 .isl-list { display: flex; flex-direction: column; }
54
55 .isl-row-body {
56 flex: 1;
57 min-width: 0;
58 display: flex;
59 flex-direction: column;
60 gap: 5px;
61 }
62
63 .isl-row-title-line {
64 display: flex;
65 align-items: baseline;
66 gap: 8px;
67 }
68
69 .isl-row-meta-line {
70 display: flex;
71 align-items: center;
72 gap: 6px;
73 flex-wrap: wrap;
74 }
75
76 .isl-row-intel-line {
77 display: flex;
78 align-items: center;
79 gap: 5px;
80 flex-wrap: wrap;
81 }
82
83 .isl-row-right {
84 display: flex;
85 flex-direction: column;
86 align-items: flex-end;
87 gap: 4px;
88 flex-shrink: 0;
89 }
90
91 .isl-empty {
92 display: flex;
93 flex-direction: column;
94 align-items: center;
95 justify-content: center;
96 padding: var(--space-12) var(--space-6);
97 text-align: center;
98 gap: var(--space-3);
99 }
100
101 .isl-pagination {
102 display: flex;
103 align-items: center;
104 justify-content: center;
105 gap: var(--space-2);
106 padding: var(--space-4) 0;
107 }
108
109 .isl-tpl-grid {
110 display: grid;
111 grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
112 gap: var(--space-3);
113 padding: var(--space-3) var(--space-4);
114 }
115
116 .isl-sb-list {
117 display: flex;
118 flex-direction: column;
119 gap: 0;
120 }
121
122 .isl-sb-labels { display: flex; flex-direction: column; gap: 4px; }
123 .isl-sb-people { display: flex; flex-direction: column; gap: 4px; }
124
125 .isl-sb-intel-list {
126 display: flex;
127 flex-direction: column;
128 gap: 2px;
129 }
130
131 .isl-sb-intel-body {
132 display: flex;
133 flex-direction: column;
134 gap: 2px;
135 flex: 1;
136 min-width: 0;
137 }
138
139 .isl-sb-agent-list {
140 display: flex;
141 flex-direction: column;
142 gap: 4px;
143 }
144
145 .isl-stat-strip {
146 display: flex;
147 align-items: center;
148 justify-content: space-between;
149 gap: var(--space-3);
150 flex-wrap: wrap;
151 }
152
153 .isl-stat-counts {
154 display: flex;
155 align-items: center;
156 gap: 6px;
157 flex-wrap: wrap;
158 }
159
160 .isl-strip-filters {
161 display: flex;
162 align-items: center;
163 gap: var(--space-2);
164 flex-shrink: 0;
165 }
166
167 .isl-tabs {
168 display: flex;
169 align-items: center;
170 }
171
172 .isl-filters {
173 display: flex;
174 align-items: center;
175 gap: var(--space-2);
176 margin-left: auto;
177 flex-wrap: wrap;
178 padding: var(--space-2) 0;
179 }
180
181 // ── Issue detail page (.isd-*) ─────────────────────────────────────────────────
182
183 .isd-page { min-height: 100dvh; }
184
185 .isd-hero-inner {
186 position: relative;
187 max-width: 1200px;
188 margin: 0 auto;
189 padding: var(--space-8) var(--space-6) var(--space-5);
190 }
191
192 .isd-eyebrow {
193 display: flex;
194 align-items: center;
195 justify-content: space-between;
196 gap: var(--space-3);
197 flex-wrap: wrap;
198 margin-bottom: var(--space-4);
199 }
200
201 .isd-eyebrow-left {
202 display: flex;
203 align-items: center;
204 gap: var(--space-2);
205 flex-wrap: wrap;
206 }
207
208 .isd-eyebrow-right {
209 display: flex;
210 align-items: center;
211 gap: var(--space-2);
212 flex-shrink: 0;
213 }
214
215 .isd-wrap {
216 max-width: 1200px;
217 margin: 0 auto;
218 padding: var(--space-5) var(--space-6) var(--space-10);
219 }
220
221 .isd-layout {
222 display: grid;
223 grid-template-columns: 1fr 280px;
224 gap: var(--space-6);
225 align-items: start;
226 min-height: 0;
227
228 @media (max-width: 900px) { grid-template-columns: 1fr; }
229 }
230
231 .isd-main { min-width: 0; }
232
233 .isd-sidebar {
234 display: flex;
235 flex-direction: column;
236 gap: 0;
237 position: sticky;
238 top: calc(var(--sticky-offset, var(--header-height)) + var(--space-4));
239 max-height: calc(100dvh - var(--sticky-offset, var(--header-height)) - var(--space-4));
240 overflow-y: auto;
241 scrollbar-width: thin;
242 scrollbar-color: var(--border-default) transparent;
243
244 @media (max-width: 900px) { position: static; max-height: none; overflow-y: visible; }
245 }
246
247 .isd-panel-hd {
248 display: flex;
249 align-items: center;
250 gap: var(--space-2);
251 padding: var(--space-3) var(--space-4);
252 }
253
254 .isd-anchor-addr {
255 display: flex;
256 align-items: center;
257 gap: 0;
258 flex: 1;
259 min-width: 0;
260 }
261
262 .isd-anchor-stats {
263 display: flex;
264 align-items: center;
265 gap: var(--space-2);
266 flex-shrink: 0;
267 }
268
269 .isd-body-hd {
270 display: flex;
271 align-items: center;
272 gap: var(--space-2);
273 padding: var(--space-3) var(--space-4);
274 }
275
276 .isd-event-replies {
277 display: flex;
278 flex-direction: column;
279 gap: 0;
280 }
281
282 .isd-event-empty {
283 display: flex;
284 align-items: center;
285 justify-content: center;
286 padding: var(--space-6) var(--space-4);
287 }
288
289 .isd-release-bd {
290 display: flex;
291 flex-direction: column;
292 gap: 4px;
293 padding: var(--space-2) var(--space-3);
294 }
295
296 .isd-rel-commit-top {
297 display: flex;
298 align-items: center;
299 gap: 6px;
300 }
301
302 .isd-rel-landed-in {
303 display: flex;
304 align-items: center;
305 gap: 5px;
306 flex-wrap: wrap;
307 }
308
309 .isd-ic-section {
310 display: flex;
311 flex-direction: column;
312 gap: 7px;
313 padding: 9px 12px;
314 }
315
316 .isd-ic-section-label {
317 display: flex;
318 align-items: center;
319 justify-content: space-between;
320 }
321
322 .isd-ic-blast-hero {
323 display: flex;
324 flex-direction: column;
325 gap: 6px;
326 }
327
328 .isd-ic-blast-nums {
329 display: flex;
330 align-items: baseline;
331 gap: 5px;
332 }
333
334 .isd-ic-grav-wrap {
335 display: flex;
336 align-items: center;
337 gap: 7px;
338 }
339
340 .isd-ic-grav-track {
341 flex: 1;
342 height: 10px;
343 overflow: hidden;
344 }
345
346 .isd-ic-co-syms {
347 display: flex;
348 align-items: center;
349 flex-wrap: wrap;
350 gap: 4px;
351 }
352
353 .isd-ic-churn-line {
354 display: flex;
355 align-items: baseline;
356 flex-wrap: wrap;
357 gap: 4px;
358 }
359
360 .isd-ic-sparkline {
361 display: flex;
362 align-items: flex-end;
363 gap: 2px;
364 height: 36px;
365 }
366
367 .isd-ic-issue-list {
368 display: flex;
369 flex-wrap: wrap;
370 gap: 4px;
371 }
372
373 // ── New issue page (.isn-*) ────────────────────────────────────────────────────
374
375 .isn-page {
376 max-width: 960px;
377 margin: 0 auto;
378 padding: var(--space-4) var(--space-3);
379 }
380
381 .isn-layout {
382 display: grid;
383 grid-template-columns: 1fr 240px;
384 gap: var(--space-4);
385 align-items: start;
386
387 @media (max-width: 720px) { grid-template-columns: 1fr; }
388 }
389
390 .isn-main { min-width: 0; }
391
392 .isn-card-header {
393 display: flex;
394 align-items: center;
395 justify-content: space-between;
396 padding: var(--space-3) var(--space-4);
397 }
398
399 .isn-card-body {
400 padding: var(--space-4);
401 display: flex;
402 flex-direction: column;
403 gap: var(--space-5);
404 }
405
406 .isn-section {
407 display: flex;
408 flex-direction: column;
409 gap: var(--space-3);
410 }
411
412 .isn-section-header {
413 display: flex;
414 align-items: center;
415 gap: var(--space-2);
416 }
417
418 .isn-cli-block {
419 display: flex;
420 flex-direction: column;
421 gap: var(--space-3);
422 }
423
424 .isn-cli-step {
425 display: flex;
426 gap: var(--space-3);
427 align-items: flex-start;
428 }
429
430 .isn-cli-step-body {
431 display: flex;
432 flex-direction: column;
433 gap: 6px;
434 flex: 1;
435 min-width: 0;
436 }
437
438 .isn-anatomy {
439 display: flex;
440 flex-direction: column;
441 }
442
443 .isn-anatomy-row {
444 display: flex;
445 gap: var(--space-3);
446 padding: var(--space-2) var(--space-3);
447 }
448
449 .isn-sidebar {
450 display: flex;
451 flex-direction: column;
452 gap: var(--space-3);
453 }
454
455 .isn-sb-section {
456 display: flex;
457 flex-direction: column;
458 gap: var(--space-2);
459 }
460
461 .isn-sb-links {
462 display: flex;
463 flex-direction: column;
464 gap: 4px;
465 }
File History 1 commit
sha256:3ff952bf9840772755d63295c58e272a14a808035a2d93b7896ba8e0cf602171 fix(layout): two-column sticky sidebar scroll across all pa… Human minor ⚠ 8 days ago