@rhavenside/baseline-ui 1.0.20 → 1.0.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/baseline.css +162 -12
- package/dist/baseline.css.map +1 -1
- package/dist/baseline.min.css +1 -1
- package/package.json +1 -1
- package/src/components/_sidebar.scss +188 -13
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
top: 0;
|
|
42
42
|
left: 0;
|
|
43
43
|
z-index: var(--z-index-sidebar);
|
|
44
|
-
width: 280px;
|
|
44
|
+
width: 280px; // Desktop default
|
|
45
45
|
height: 100vh;
|
|
46
46
|
display: flex;
|
|
47
47
|
flex-direction: column;
|
|
@@ -52,8 +52,36 @@
|
|
|
52
52
|
box-shadow: var(--glass-shadow-lg);
|
|
53
53
|
transform: translateX(-100%);
|
|
54
54
|
transition: transform var(--transition-duration-slow) var(--transition-ease-out);
|
|
55
|
-
overflow
|
|
56
|
-
|
|
55
|
+
overflow: hidden; // Let .bl-sidebar-nav handle scrolling
|
|
56
|
+
|
|
57
|
+
// Mobile: Breitere Sidebar für bessere Nutzbarkeit
|
|
58
|
+
@media (max-width: 767.98px) {
|
|
59
|
+
width: min(85%, 320px);
|
|
60
|
+
max-width: 90vw; // Sicherheitsgrenze
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
// Custom Scrollbar for sidebar container (fallback)
|
|
64
|
+
&::-webkit-scrollbar {
|
|
65
|
+
width: 6px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
&::-webkit-scrollbar-track {
|
|
69
|
+
background: transparent;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
&::-webkit-scrollbar-thumb {
|
|
73
|
+
background: var(--glass-bg-medium);
|
|
74
|
+
border-radius: 3px;
|
|
75
|
+
border: 1px solid var(--glass-border-light);
|
|
76
|
+
|
|
77
|
+
&:hover {
|
|
78
|
+
background: var(--glass-bg-heavy);
|
|
79
|
+
border-color: var(--glass-border-medium);
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
scrollbar-width: thin;
|
|
84
|
+
scrollbar-color: var(--glass-bg-medium) transparent;
|
|
57
85
|
|
|
58
86
|
// Desktop: Always visible, collapsible
|
|
59
87
|
@media (min-width: 768px) {
|
|
@@ -63,6 +91,7 @@
|
|
|
63
91
|
min-height: 100vh;
|
|
64
92
|
box-shadow: none;
|
|
65
93
|
border-right: 1px solid var(--glass-border-medium);
|
|
94
|
+
width: 280px; // Desktop bleibt 280px
|
|
66
95
|
}
|
|
67
96
|
|
|
68
97
|
// Sidebar Open (Mobile)
|
|
@@ -76,11 +105,21 @@
|
|
|
76
105
|
width: 64px;
|
|
77
106
|
|
|
78
107
|
.bl-sidebar-header h3,
|
|
79
|
-
.bl-sidebar-nav .bl-nav-link span:not(.bl-icon)
|
|
108
|
+
.bl-sidebar-nav .bl-nav-link span:not(.bl-icon),
|
|
109
|
+
.bl-nav-group-header {
|
|
80
110
|
opacity: 0;
|
|
81
111
|
width: 0;
|
|
82
112
|
overflow: hidden;
|
|
83
113
|
}
|
|
114
|
+
|
|
115
|
+
.bl-sidebar-nav .bl-nav-link {
|
|
116
|
+
justify-content: center;
|
|
117
|
+
padding: var(--spacing-sm);
|
|
118
|
+
|
|
119
|
+
.bl-icon {
|
|
120
|
+
margin: 0;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
84
123
|
}
|
|
85
124
|
}
|
|
86
125
|
|
|
@@ -162,19 +201,29 @@
|
|
|
162
201
|
display: flex;
|
|
163
202
|
align-items: center;
|
|
164
203
|
justify-content: space-between;
|
|
165
|
-
padding: var(--spacing-md);
|
|
166
|
-
border-bottom: 1px solid var(--glass-border-
|
|
204
|
+
padding: var(--spacing-lg) var(--spacing-md);
|
|
205
|
+
border-bottom: 1px solid var(--glass-border-medium);
|
|
167
206
|
background: var(--glass-bg-light);
|
|
168
207
|
backdrop-filter: blur(var(--glass-blur-sm));
|
|
169
208
|
-webkit-backdrop-filter: blur(var(--glass-blur-sm));
|
|
209
|
+
flex-shrink: 0; // Prevent header from shrinking
|
|
170
210
|
|
|
171
211
|
h3 {
|
|
172
212
|
margin: 0;
|
|
173
|
-
font-size: var(--font-size-
|
|
174
|
-
font-weight: var(--font-weight-
|
|
213
|
+
font-size: var(--font-size-xl);
|
|
214
|
+
font-weight: var(--font-weight-bold);
|
|
175
215
|
color: var(--color-text);
|
|
216
|
+
line-height: var(--line-height-tight);
|
|
176
217
|
transition: var(--transition-base);
|
|
177
218
|
}
|
|
219
|
+
|
|
220
|
+
// Version info styling (if present)
|
|
221
|
+
.bl-sidebar-version {
|
|
222
|
+
font-size: var(--font-size-xs);
|
|
223
|
+
color: var(--color-text-muted);
|
|
224
|
+
font-weight: var(--font-weight-normal);
|
|
225
|
+
margin-top: var(--spacing-xs);
|
|
226
|
+
}
|
|
178
227
|
}
|
|
179
228
|
|
|
180
229
|
// Sidebar Close Button
|
|
@@ -217,10 +266,39 @@
|
|
|
217
266
|
// Sidebar Navigation
|
|
218
267
|
.bl-sidebar-nav {
|
|
219
268
|
flex: 1;
|
|
220
|
-
padding: var(--spacing-
|
|
269
|
+
padding: var(--spacing-md);
|
|
221
270
|
overflow-y: auto;
|
|
222
271
|
overflow-x: hidden;
|
|
223
272
|
|
|
273
|
+
// Better touch targets on mobile
|
|
274
|
+
@media (max-width: 767.98px) {
|
|
275
|
+
padding: var(--spacing-sm);
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
// Custom Scrollbar (Webkit)
|
|
279
|
+
&::-webkit-scrollbar {
|
|
280
|
+
width: 6px;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
&::-webkit-scrollbar-track {
|
|
284
|
+
background: transparent;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
&::-webkit-scrollbar-thumb {
|
|
288
|
+
background: var(--glass-bg-medium);
|
|
289
|
+
border-radius: 3px;
|
|
290
|
+
border: 1px solid var(--glass-border-light);
|
|
291
|
+
|
|
292
|
+
&:hover {
|
|
293
|
+
background: var(--glass-bg-heavy);
|
|
294
|
+
border-color: var(--glass-border-medium);
|
|
295
|
+
}
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
// Firefox Scrollbar
|
|
299
|
+
scrollbar-width: thin;
|
|
300
|
+
scrollbar-color: var(--glass-bg-medium) transparent;
|
|
301
|
+
|
|
224
302
|
.bl-nav {
|
|
225
303
|
background: transparent;
|
|
226
304
|
border: none;
|
|
@@ -230,30 +308,127 @@
|
|
|
230
308
|
.bl-nav-link {
|
|
231
309
|
display: flex;
|
|
232
310
|
align-items: center;
|
|
233
|
-
gap: var(--spacing-
|
|
311
|
+
gap: var(--spacing-md);
|
|
234
312
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
313
|
+
margin-bottom: var(--spacing-xs);
|
|
235
314
|
border-radius: var(--tech-border-radius-sm);
|
|
236
315
|
transition: var(--transition-base);
|
|
316
|
+
position: relative;
|
|
317
|
+
font-size: var(--font-size-base);
|
|
318
|
+
line-height: var(--line-height-base);
|
|
319
|
+
color: var(--color-text);
|
|
320
|
+
text-decoration: none;
|
|
321
|
+
min-height: 40px; // Better touch target
|
|
322
|
+
|
|
323
|
+
@media (max-width: 767.98px) {
|
|
324
|
+
padding: var(--spacing-md);
|
|
325
|
+
min-height: 44px; // iOS touch target recommendation
|
|
326
|
+
}
|
|
237
327
|
|
|
238
328
|
span:not(.bl-icon) {
|
|
239
329
|
transition: var(--transition-base);
|
|
330
|
+
flex: 1;
|
|
240
331
|
}
|
|
241
332
|
|
|
242
333
|
.bl-icon {
|
|
243
334
|
flex-shrink: 0;
|
|
244
|
-
width:
|
|
245
|
-
height:
|
|
335
|
+
width: 18px;
|
|
336
|
+
height: 18px;
|
|
337
|
+
color: var(--color-text-muted);
|
|
338
|
+
transition: var(--transition-base);
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
&:hover {
|
|
342
|
+
background: var(--glass-bg-light);
|
|
343
|
+
color: var(--color-text);
|
|
344
|
+
transform: translateX(2px); // Subtle slide animation
|
|
345
|
+
|
|
346
|
+
.bl-icon {
|
|
347
|
+
color: var(--color-text);
|
|
348
|
+
}
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
&:active {
|
|
352
|
+
transform: translateX(1px);
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
&.bl-active {
|
|
356
|
+
background: var(--glass-bg-medium);
|
|
357
|
+
color: var(--color-text);
|
|
358
|
+
font-weight: var(--font-weight-medium);
|
|
359
|
+
padding-left: calc(var(--spacing-md) - 3px);
|
|
360
|
+
transform: translateX(0);
|
|
361
|
+
|
|
362
|
+
&::before {
|
|
363
|
+
content: '';
|
|
364
|
+
position: absolute;
|
|
365
|
+
left: 0;
|
|
366
|
+
top: 0;
|
|
367
|
+
bottom: 0;
|
|
368
|
+
width: 3px;
|
|
369
|
+
background: var(--color-accent);
|
|
370
|
+
border-radius: 0 var(--tech-border-radius-sm) var(--tech-border-radius-sm) 0;
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
.bl-icon {
|
|
374
|
+
color: var(--color-accent);
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
&:hover {
|
|
378
|
+
background: var(--glass-bg-heavy);
|
|
379
|
+
transform: translateX(0); // No slide when active
|
|
380
|
+
}
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
&:focus {
|
|
384
|
+
outline: 1px solid var(--color-border-focus);
|
|
385
|
+
outline-offset: -2px;
|
|
246
386
|
}
|
|
247
387
|
}
|
|
248
388
|
}
|
|
249
389
|
|
|
390
|
+
// Navigation Groups (Categories)
|
|
391
|
+
.bl-nav-group {
|
|
392
|
+
margin-bottom: var(--spacing-xl);
|
|
393
|
+
|
|
394
|
+
&:last-child {
|
|
395
|
+
margin-bottom: 0;
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
&:first-child {
|
|
399
|
+
margin-top: 0;
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
// Visual separator between groups (optional)
|
|
403
|
+
+ .bl-nav-group {
|
|
404
|
+
padding-top: var(--spacing-md);
|
|
405
|
+
border-top: 1px solid var(--glass-border-light);
|
|
406
|
+
margin-top: var(--spacing-lg);
|
|
407
|
+
}
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
.bl-nav-group-header {
|
|
411
|
+
padding: var(--spacing-sm) var(--spacing-md);
|
|
412
|
+
margin-bottom: var(--spacing-sm);
|
|
413
|
+
margin-top: 0;
|
|
414
|
+
font-size: var(--font-size-xs);
|
|
415
|
+
font-weight: var(--font-weight-semibold);
|
|
416
|
+
color: var(--color-text-muted);
|
|
417
|
+
text-transform: uppercase;
|
|
418
|
+
letter-spacing: var(--letter-spacing-wide);
|
|
419
|
+
line-height: var(--line-height-tight);
|
|
420
|
+
opacity: 0.8; // Subtle appearance
|
|
421
|
+
}
|
|
422
|
+
|
|
250
423
|
// Sidebar Footer (optional)
|
|
251
424
|
.bl-sidebar-footer {
|
|
252
425
|
padding: var(--spacing-md);
|
|
253
|
-
border-top: 1px solid var(--glass-border-
|
|
426
|
+
border-top: 1px solid var(--glass-border-medium);
|
|
254
427
|
background: var(--glass-bg-light);
|
|
255
428
|
backdrop-filter: blur(var(--glass-blur-sm));
|
|
256
429
|
-webkit-backdrop-filter: blur(var(--glass-blur-sm));
|
|
430
|
+
flex-shrink: 0; // Prevent footer from shrinking
|
|
431
|
+
margin-top: auto; // Push footer to bottom
|
|
257
432
|
}
|
|
258
433
|
|
|
259
434
|
// Body Scroll Lock (when sidebar is open on mobile)
|