gabriel / musehub public
_proposal-detail.scss
144 lines 3.1 KB
Raw
sha256:3ff952bf9840772755d63295c58e272a14a808035a2d93b7896ba8e0cf602171 fix(layout): two-column sticky sidebar scroll across all pa… Human minor ⚠ breaking 8 days ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Page: Proposal detail (/*/proposals/*)
3 // File: src/scss/pages/_proposal-detail.scss
4 //
5 // STRUCTURAL LAYOUT ONLY — zero colors, zero typography here.
6 // Visual rules live in components/_proposal-detail.scss.
7 // ─────────────────────────────────────────────────────────────────────────────
8
9 .prd-page {
10 display: flex;
11 flex-direction: column;
12 }
13
14 .prd-hero-inner {
15 position: relative;
16 max-width: 1200px;
17 margin: 0 auto;
18 padding: var(--space-8) var(--space-6) var(--space-5);
19 }
20
21 .prd-eyebrow {
22 display: flex;
23 align-items: center;
24 gap: var(--space-3);
25 flex-wrap: wrap;
26 margin-bottom: var(--space-4);
27 }
28
29 .prd-wrap {
30 display: flex;
31 flex-direction: column;
32 }
33
34 .prd-layout {
35 display: grid;
36 grid-template-columns: 1fr 240px;
37 gap: var(--space-6);
38 align-items: start;
39 min-height: 0;
40 padding: var(--space-4) var(--space-6) 0;
41 max-width: 1200px;
42 margin: 0 auto;
43 width: 100%;
44
45 @media (max-width: 900px) { grid-template-columns: 1fr; }
46 }
47
48 .prd-main {
49 min-width: 0;
50 padding-bottom: var(--space-10);
51 }
52
53 .proposal-sidebar {
54 display: flex;
55 flex-direction: column;
56 gap: 0;
57 position: sticky;
58 top: var(--sticky-offset, var(--header-height));
59 max-height: calc(100dvh - var(--sticky-offset, var(--header-height)) - var(--space-4));
60 overflow-y: auto;
61 scrollbar-width: thin;
62 scrollbar-color: var(--border-default) transparent;
63 padding-bottom: var(--space-10);
64
65 @media (max-width: 900px) { position: static; max-height: none; overflow-y: visible; }
66 }
67
68 .proposal-sym-columns {
69 display: flex;
70 gap: var(--space-4);
71 flex-wrap: wrap;
72 margin-bottom: var(--space-3);
73 }
74
75 .proposal-comment-form-actions {
76 display: flex;
77 justify-content: flex-end;
78 margin-top: var(--space-2);
79 }
80
81 .proposal-strategies {
82 display: flex;
83 flex-direction: column;
84 gap: 6px;
85 margin-bottom: var(--space-4);
86 }
87
88 .proposal-merge-actions {
89 display: flex;
90 align-items: center;
91 gap: var(--space-4);
92 flex-wrap: wrap;
93 }
94
95 .proposal-timeline {
96 display: flex;
97 flex-direction: column;
98 gap: 0;
99 }
100
101 .proposal-div-overview {
102 display: flex;
103 align-items: center;
104 gap: var(--space-4);
105 margin-bottom: var(--space-3);
106 }
107
108 .proposal-risk-band-inner {
109 position: relative;
110 display: flex;
111 align-items: center;
112 gap: 1.5rem;
113 padding: 0.85rem 1.25rem;
114 flex-wrap: wrap;
115 }
116
117 .proposal-risk-score {
118 display: flex;
119 align-items: center;
120 gap: 0.6rem;
121 flex-shrink: 0;
122 }
123
124 .proposal-risk-label-wrap {
125 display: flex;
126 flex-direction: column;
127 gap: 0.1rem;
128 }
129
130 .proposal-risk-dims {
131 display: flex;
132 align-items: center;
133 gap: 0;
134 flex-wrap: wrap;
135 flex: 1;
136 }
137
138 .proposal-risk-dim {
139 display: flex;
140 flex-direction: column;
141 align-items: center;
142 padding: 0 0.9rem;
143 &:first-child { padding-left: 0; }
144 }
File History 1 commit
sha256:3ff952bf9840772755d63295c58e272a14a808035a2d93b7896ba8e0cf602171 fix(layout): two-column sticky sidebar scroll across all pa… Human minor ⚠ 8 days ago