Skip to content

Commit b1e3d73

Browse files
OksamiesOksamies
committed
Add packageVersion pages
1 parent b13130b commit b1e3d73

File tree

5 files changed

+1804
-0
lines changed

5 files changed

+1804
-0
lines changed

‎apps/cyberstorm-remix/app/p/packageVersion.css‎

Lines changed: 331 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,331 @@
1+
@layer nimbus-layout {
2+
.package-version__main {
3+
display: flex;
4+
gap: var(--gap-3xl);
5+
align-items: flex-start;
6+
align-self: stretch;
7+
}
8+
9+
.package-version__package-section {
10+
position: relative;
11+
display: flex;
12+
flex: 1 0 0;
13+
flex-direction: column;
14+
gap: 8px;
15+
align-items: center;
16+
align-items: flex-start;
17+
align-self: stretch;
18+
justify-content: flex-start;
19+
}
20+
21+
.package-version__actions {
22+
position: absolute;
23+
top: -5rem;
24+
right: 3rem;
25+
display: flex;
26+
flex-direction: column;
27+
gap: var(--gap-md);
28+
align-items: flex-end;
29+
justify-content: center;
30+
}
31+
32+
.package-version-management-tools {
33+
display: flex;
34+
gap: var(--gap-xs);
35+
align-items: center;
36+
}
37+
38+
.package-version-management-tools__island {
39+
display: flex;
40+
gap: 6px;
41+
align-items: center;
42+
justify-content: flex-end;
43+
padding: var(--space-8);
44+
border: 2px dashed var(--color-surface-a10);
45+
border-radius: var(--radius-xl);
46+
background: var(--color-surface-1);
47+
}
48+
49+
.review-package__body {
50+
align-items: stretch;
51+
}
52+
53+
.review-package__block {
54+
display: flex;
55+
flex-direction: column;
56+
gap: 1rem;
57+
align-items: flex-start;
58+
}
59+
60+
.review-package__label {
61+
color: var(--color-text-primary);
62+
font-weight: 700;
63+
font-size: 1rem;
64+
font-style: normal;
65+
line-height: normal;
66+
}
67+
68+
.review-package__textarea {
69+
> textarea {
70+
width: 100%;
71+
height: 10rem;
72+
}
73+
}
74+
75+
.review-package__footer {
76+
justify-content: space-between;
77+
}
78+
79+
.report-package__body {
80+
align-items: stretch;
81+
}
82+
83+
.report-package__block {
84+
display: flex;
85+
flex-direction: column;
86+
gap: 1rem;
87+
align-items: flex-start;
88+
}
89+
90+
.report-package__label {
91+
color: var(--color-text-primary);
92+
font-weight: var(--font-weight-regular);
93+
font-size: var(--font-size-body-lg);
94+
font-style: normal;
95+
line-height: var(--line-height-md);
96+
}
97+
98+
.report-package__textarea {
99+
> textarea {
100+
width: 100%;
101+
height: 10rem;
102+
}
103+
}
104+
105+
.report-package__footer {
106+
justify-content: flex-end;
107+
}
108+
109+
.package-version__package-content-section {
110+
display: flex;
111+
flex: 1 0 0;
112+
flex-direction: column;
113+
gap: var(--gap-xl);
114+
align-items: flex-start;
115+
padding-top: 1rem;
116+
overflow-x: scroll;
117+
scrollbar-width: none;
118+
}
119+
120+
.package-version__page-header-skeleton {
121+
height: 10rem;
122+
}
123+
124+
.package-version__nav-skeleton {
125+
height: 47px;
126+
}
127+
128+
.package-version__content {
129+
display: flex;
130+
flex: 1 0 0;
131+
flex-direction: column;
132+
gap: var(--gap-3xl);
133+
align-items: flex-start;
134+
align-self: stretch;
135+
}
136+
137+
.package-version-sidebar {
138+
position: sticky;
139+
top: var(--header-height);
140+
display: flex;
141+
flex-direction: column;
142+
flex-shrink: 0;
143+
gap: var(--gap-md);
144+
align-items: flex-start;
145+
padding-top: var(--gap-md);
146+
}
147+
148+
.package-version-sidebar__skeleton {
149+
width: 20rem;
150+
height: 21.4rem;
151+
}
152+
153+
.package-version-sidebar__install-skeleton {
154+
width: 20rem;
155+
height: 3.56rem;
156+
}
157+
158+
.package-version-sidebar__install {
159+
justify-content: center;
160+
width: 100%;
161+
}
162+
163+
.package-version-sidebar__main {
164+
display: flex;
165+
flex-direction: column;
166+
gap: var(--gap-md);
167+
align-items: flex-start;
168+
align-self: stretch;
169+
}
170+
171+
.package-version-sidebar__actions-skeleton {
172+
width: 20rem;
173+
height: 2.25rem;
174+
}
175+
176+
.package-version-sidebar__actions {
177+
display: flex;
178+
gap: var(--gap-xs);
179+
align-items: flex-start;
180+
align-self: stretch;
181+
}
182+
183+
.package-version-sidebar__download {
184+
flex-grow: 1;
185+
justify-content: center;
186+
}
187+
188+
.package-version-sidebar__meta {
189+
display: flex;
190+
flex-direction: column;
191+
gap: var(--gap-3xs);
192+
align-items: flex-start;
193+
align-self: stretch;
194+
195+
> :first-child {
196+
border-radius: var(--radius-md) var(--radius-md) 0 0;
197+
}
198+
199+
> :last-child {
200+
border-radius: 0 0 var(--radius-md) var(--radius-md);
201+
}
202+
}
203+
204+
.package-version-sidebar__item {
205+
display: flex;
206+
gap: var(--gap-3xl);
207+
align-items: center;
208+
align-self: stretch;
209+
padding: var(--space-8) var(--space-12);
210+
background: var(--color-surface-default);
211+
}
212+
213+
.package-version-sidebar__label {
214+
color: var(--color-text-tertiary);
215+
font-weight: var(--font-weight-bold);
216+
font-size: var(--font-size-body-sm);
217+
line-height: normal;
218+
}
219+
220+
.package-version-sidebar__content {
221+
flex: 1 0 0;
222+
color: var(--color-text-primary);
223+
font-weight: var(--font-weight-bold);
224+
font-size: var(--font-size-body-sm);
225+
line-height: normal;
226+
text-align: right;
227+
}
228+
229+
.package-version-sidebar__dependency-string-wrapper {
230+
display: flex;
231+
flex: 1 0 0;
232+
gap: var(--gap-xs);
233+
align-items: center;
234+
justify-content: flex-end;
235+
}
236+
237+
.package-version-sidebar__dependency-string {
238+
max-width: 15ch;
239+
240+
/* overflow-x: clip; */
241+
color: var(--color-text-primary);
242+
font-weight: var(--font-weight-bold);
243+
font-size: var(--font-size-body-sm);
244+
245+
/* white-space: nowrap; */
246+
247+
/* text-overflow: ellipsis; */
248+
word-break: break-word;
249+
}
250+
251+
.package-version-sidebar__boxes-skeleton {
252+
width: 20rem;
253+
height: 11rem;
254+
}
255+
256+
.package-version-sidebar__categories {
257+
display: flex;
258+
flex-direction: column;
259+
gap: var(--gap-md);
260+
align-items: flex-start;
261+
align-self: stretch;
262+
padding: var(--space-16);
263+
border-radius: var(--radius-md);
264+
background-color: var(--color-surface-default);
265+
}
266+
267+
.package-version-sidebar__header {
268+
display: flex;
269+
align-items: center;
270+
align-self: stretch;
271+
}
272+
273+
.package-version-sidebar__body {
274+
display: flex;
275+
flex: 1 1 0;
276+
flex-wrap: wrap;
277+
gap: var(--gap-xs);
278+
align-content: flex-start;
279+
align-items: flex-start;
280+
align-self: stretch;
281+
min-width: 100px;
282+
max-width: 300px;
283+
}
284+
285+
.package-version__narrow-actions {
286+
display: none;
287+
flex-direction: column;
288+
gap: 0.5rem;
289+
align-items: flex-start;
290+
align-self: stretch;
291+
}
292+
293+
.package-version__drawer-button {
294+
width: 100%;
295+
}
296+
297+
@media (width < 41rem) {
298+
.package-version__actions {
299+
position: unset;
300+
top: unset;
301+
right: unset;
302+
display: flex;
303+
flex: 1 1 0;
304+
}
305+
306+
.package-version-management-tools {
307+
flex: 1 1 0;
308+
flex-flow: row wrap;
309+
}
310+
}
311+
312+
/* Sidebar narrow/wide switch breakpoint */
313+
@media (width <= 990px) {
314+
.package-version-sidebar {
315+
display: none;
316+
}
317+
318+
.package-version__narrow-actions {
319+
display: flex;
320+
}
321+
322+
.package-version {
323+
flex-wrap: wrap;
324+
overflow: unset;
325+
}
326+
327+
.package-version__main {
328+
min-width: 100%;
329+
}
330+
}
331+
}

0 commit comments

Comments
 (0)