@wikex/admin-kit 0.3.0 → 0.4.0

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.
@@ -0,0 +1,724 @@
1
+ @mixin styles {
2
+ :root {
3
+ --layout-transition-easing: linear;
4
+ --layout-transition-duration: 120ms;
5
+ --layout-nav-mini-width: 88px;
6
+ --layout-nav-vertical-width: 300px;
7
+ --layout-nav-mobile-width: 288px;
8
+ --layout-header-mobile-height: 64px;
9
+ --layout-header-desktop-height: 72px;
10
+ --layout-nav-z-index: 40;
11
+ --layout-header-z-index: 39;
12
+ --nav-width: var(--layout-nav-vertical-width);
13
+ --minimal-header-height: var(--layout-header-desktop-height);
14
+ }
15
+
16
+ .template-default {
17
+ background: var(--minimal-background);
18
+ grid-template-columns: var(--nav-width) minmax(0, 1fr) !important;
19
+ min-height: 100vh;
20
+ overflow-x: clip;
21
+ transition: grid-template-columns var(--layout-transition-duration)
22
+ var(--layout-transition-easing);
23
+ }
24
+
25
+ .template-default__wrap {
26
+ min-width: 0;
27
+ padding-top: var(--layout-header-desktop-height);
28
+ }
29
+
30
+ .wikex-dashboard-nav {
31
+ align-self: start;
32
+ background: var(--minimal-background);
33
+ border-right: 1px solid var(--minimal-divider);
34
+ color: var(--minimal-text-primary);
35
+ display: flex;
36
+ flex-direction: column;
37
+ height: 100vh;
38
+ opacity: 0;
39
+ overflow: visible;
40
+ position: sticky;
41
+ top: 0;
42
+ transition:
43
+ opacity 120ms ease,
44
+ transform var(--layout-transition-duration) var(--layout-transition-easing),
45
+ width var(--layout-transition-duration) var(--layout-transition-easing);
46
+ width: var(--nav-width);
47
+ z-index: var(--layout-nav-z-index);
48
+
49
+ &--hydrated {
50
+ opacity: 1;
51
+ }
52
+
53
+ &__top {
54
+ align-items: center;
55
+ display: flex;
56
+ flex: 0 0 auto;
57
+ height: var(--layout-header-desktop-height);
58
+ justify-content: space-between;
59
+ padding: 0 28px;
60
+ }
61
+
62
+ &__logo {
63
+ align-items: center;
64
+ display: inline-flex;
65
+ min-height: 40px;
66
+ min-width: 40px;
67
+ text-decoration: none;
68
+ }
69
+
70
+ &__logo-icon,
71
+ &__mobile-close {
72
+ display: none;
73
+ }
74
+
75
+ &__scrollbar {
76
+ flex: 1 1 auto;
77
+ min-height: 0;
78
+ overflow-x: hidden;
79
+ overflow-y: auto;
80
+ padding: 8px 16px 24px;
81
+ scrollbar-color: var(--minimal-grey-400) transparent;
82
+ scrollbar-width: thin;
83
+ }
84
+
85
+ &__scrollbar::-webkit-scrollbar {
86
+ width: 5px;
87
+ }
88
+
89
+ &__scrollbar::-webkit-scrollbar-thumb {
90
+ background: var(--minimal-grey-400);
91
+ border-radius: 999px;
92
+ }
93
+
94
+ &__toggle {
95
+ align-items: center;
96
+ background: var(--minimal-background);
97
+ border: 1px solid var(--minimal-divider);
98
+ border-radius: 50%;
99
+ color: var(--minimal-text-secondary);
100
+ cursor: pointer;
101
+ display: flex;
102
+ height: 28px;
103
+ justify-content: center;
104
+ padding: 0;
105
+ position: absolute;
106
+ right: -14px;
107
+ top: calc(var(--layout-header-desktop-height) / 2 - 14px);
108
+ transition:
109
+ color 120ms ease,
110
+ background-color 120ms ease;
111
+ width: 28px;
112
+ z-index: 2;
113
+
114
+ &:hover {
115
+ background: var(--minimal-neutral);
116
+ color: var(--minimal-text-primary);
117
+ }
118
+
119
+ &:focus-visible {
120
+ box-shadow: var(--minimal-focus-ring);
121
+ }
122
+
123
+ svg {
124
+ height: 16px;
125
+ width: 16px;
126
+ }
127
+ }
128
+
129
+ &--mini {
130
+ .wikex-dashboard-nav__top {
131
+ justify-content: center;
132
+ padding-inline: 0;
133
+ }
134
+
135
+ .wikex-dashboard-nav__logo-full {
136
+ display: none;
137
+ }
138
+
139
+ .wikex-dashboard-nav__logo-icon {
140
+ display: inline-flex;
141
+ }
142
+
143
+ .wikex-dashboard-nav__scrollbar {
144
+ padding-inline: 8px;
145
+ }
146
+ }
147
+ }
148
+
149
+ .wikex-nav-section {
150
+ --nav-item-gap: 4px;
151
+ --nav-item-radius: 8px;
152
+ display: flex;
153
+ flex-direction: column;
154
+ gap: 12px;
155
+
156
+ &__group {
157
+ display: flex;
158
+ flex-direction: column;
159
+ gap: var(--nav-item-gap);
160
+ margin: 0;
161
+ padding: 0;
162
+ }
163
+
164
+ &__subheader {
165
+ color: var(--minimal-text-disabled);
166
+ font-size: 11px;
167
+ font-weight: 700;
168
+ letter-spacing: 0;
169
+ line-height: 20px;
170
+ margin: 0;
171
+ padding: 8px 12px;
172
+ text-transform: none;
173
+ }
174
+
175
+ &__item {
176
+ align-items: center;
177
+ border-radius: var(--nav-item-radius);
178
+ color: var(--minimal-text-secondary) !important;
179
+ display: flex;
180
+ font-size: 14px;
181
+ font-weight: 600;
182
+ min-height: 44px;
183
+ padding: 4px 8px 4px 12px;
184
+ text-decoration: none;
185
+ transition:
186
+ color 120ms ease,
187
+ background-color 120ms ease;
188
+
189
+ &:hover {
190
+ background: var(--minimal-action-hover);
191
+ color: var(--minimal-text-primary) !important;
192
+ }
193
+
194
+ &:focus-visible {
195
+ box-shadow: var(--minimal-focus-ring);
196
+ }
197
+
198
+ &--active {
199
+ background: rgb(214 181 111 / 10%);
200
+ color: var(--minimal-primary-dark) !important;
201
+ }
202
+ }
203
+
204
+ &__icon {
205
+ align-items: center;
206
+ display: inline-flex;
207
+ flex: 0 0 24px;
208
+ height: 24px;
209
+ justify-content: center;
210
+ margin-right: 12px;
211
+ width: 24px;
212
+
213
+ svg {
214
+ height: 22px;
215
+ width: 22px;
216
+ }
217
+ }
218
+
219
+ &__title {
220
+ min-width: 0;
221
+ overflow: hidden;
222
+ text-overflow: ellipsis;
223
+ white-space: nowrap;
224
+ }
225
+
226
+ &--mini {
227
+ .wikex-nav-section__subheader {
228
+ display: none;
229
+ }
230
+
231
+ .wikex-nav-section__group {
232
+ gap: 4px;
233
+ }
234
+
235
+ .wikex-nav-section__item {
236
+ flex-direction: column;
237
+ font-size: 10px;
238
+ justify-content: center;
239
+ line-height: 14px;
240
+ min-height: 56px;
241
+ padding: 8px 4px 6px;
242
+ text-align: center;
243
+ }
244
+
245
+ .wikex-nav-section__icon {
246
+ flex-basis: 22px;
247
+ height: 22px;
248
+ margin: 0 0 6px;
249
+ width: 22px;
250
+ }
251
+
252
+ .wikex-nav-section__title {
253
+ max-width: 72px;
254
+ }
255
+ }
256
+ }
257
+
258
+ html[data-theme='dark'] .wikex-nav-section__item--active {
259
+ color: var(--minimal-primary-light) !important;
260
+ }
261
+
262
+ .wikex-logo {
263
+ align-items: center;
264
+ display: inline-flex;
265
+
266
+ &__image {
267
+ display: block;
268
+ height: auto;
269
+ max-height: 42px;
270
+ max-width: 190px;
271
+ width: auto;
272
+ }
273
+
274
+ &--icon .wikex-logo__image {
275
+ height: 32px;
276
+ max-width: 32px;
277
+ width: 32px;
278
+ }
279
+ }
280
+
281
+ .wikex-dashboard-header {
282
+ backdrop-filter: blur(8px);
283
+ background: color-mix(in srgb, var(--minimal-background) 82%, transparent);
284
+ color: var(--minimal-text-primary);
285
+ height: var(--layout-header-desktop-height);
286
+ left: var(--nav-width);
287
+ position: fixed;
288
+ right: 0;
289
+ top: 0;
290
+ transition: left var(--layout-transition-duration) var(--layout-transition-easing);
291
+ z-index: var(--layout-header-z-index);
292
+
293
+ &::after {
294
+ border-radius: 50%;
295
+ bottom: 0;
296
+ box-shadow: var(--minimal-shadow-z4);
297
+ content: '';
298
+ height: 16px;
299
+ left: 24px;
300
+ opacity: 0.08;
301
+ pointer-events: none;
302
+ position: absolute;
303
+ right: 24px;
304
+ z-index: -1;
305
+ }
306
+
307
+ &__container {
308
+ align-items: center;
309
+ display: flex;
310
+ height: 100%;
311
+ padding: 0 var(--gutter-h);
312
+ }
313
+
314
+ &__left,
315
+ &__actions,
316
+ &__workspace,
317
+ &__workspace-copy {
318
+ align-items: center;
319
+ display: flex;
320
+ }
321
+
322
+ &__left {
323
+ min-width: 0;
324
+ }
325
+
326
+ &__actions {
327
+ gap: 8px;
328
+ margin-left: auto;
329
+ }
330
+
331
+ &__menu,
332
+ &__mobile-logo {
333
+ display: none;
334
+ }
335
+
336
+ &__workspace {
337
+ gap: 12px;
338
+ min-width: 0;
339
+ }
340
+
341
+ &__workspace-icon {
342
+ align-items: center;
343
+ background: var(--minimal-neutral);
344
+ border-radius: 10px;
345
+ color: var(--minimal-primary-dark);
346
+ display: flex;
347
+ height: 40px;
348
+ justify-content: center;
349
+ width: 40px;
350
+
351
+ svg {
352
+ height: 20px;
353
+ width: 20px;
354
+ }
355
+ }
356
+
357
+ &__workspace-copy {
358
+ align-items: flex-start;
359
+ flex-direction: column;
360
+ min-width: 0;
361
+
362
+ small {
363
+ color: var(--minimal-text-secondary);
364
+ font-size: 11px;
365
+ line-height: 16px;
366
+ }
367
+
368
+ strong {
369
+ font-size: 13px;
370
+ line-height: 20px;
371
+ max-width: 240px;
372
+ overflow: hidden;
373
+ text-overflow: ellipsis;
374
+ white-space: nowrap;
375
+ }
376
+ }
377
+ }
378
+
379
+ .wikex-account-button,
380
+ .wikex-dashboard-header__menu,
381
+ .wikex-dashboard-header__mobile-logo {
382
+ align-items: center;
383
+ background: transparent;
384
+ border: 0;
385
+ border-radius: 50%;
386
+ color: var(--minimal-text-secondary) !important;
387
+ cursor: pointer;
388
+ height: 40px;
389
+ justify-content: center;
390
+ padding: 0;
391
+ text-decoration: none;
392
+ width: 40px;
393
+
394
+ &:hover {
395
+ background: var(--minimal-action-hover);
396
+ color: var(--minimal-text-primary) !important;
397
+ }
398
+
399
+ &:focus-visible {
400
+ box-shadow: var(--minimal-focus-ring);
401
+ }
402
+ }
403
+
404
+ .wikex-account-button {
405
+ display: flex;
406
+
407
+ > span {
408
+ align-items: center;
409
+ background: linear-gradient(135deg, var(--minimal-primary), var(--minimal-primary-light));
410
+ border: 3px solid var(--minimal-paper);
411
+ border-radius: 50%;
412
+ box-shadow:
413
+ 0 0 0 1px var(--minimal-primary),
414
+ 0 0 0 4px rgb(214 181 111 / 12%);
415
+ color: #16120b;
416
+ display: flex;
417
+ font-size: 11px;
418
+ font-weight: 800;
419
+ height: 34px;
420
+ justify-content: center;
421
+ width: 34px;
422
+ }
423
+ }
424
+
425
+ .wikex-account-drawer {
426
+ &__backdrop {
427
+ background: rgb(20 26 33 / 18%);
428
+ border: 0;
429
+ cursor: default;
430
+ inset: 0;
431
+ opacity: 0;
432
+ padding: 0;
433
+ pointer-events: none;
434
+ position: fixed;
435
+ transition: opacity 180ms ease;
436
+ visibility: hidden;
437
+ z-index: 100;
438
+ }
439
+
440
+ &__panel {
441
+ background: var(--minimal-paper);
442
+ box-shadow: var(--minimal-shadow-z12);
443
+ display: flex;
444
+ flex-direction: column;
445
+ height: 100dvh;
446
+ max-width: calc(100vw - 32px);
447
+ position: fixed;
448
+ right: 0;
449
+ top: 0;
450
+ transform: translateX(105%);
451
+ transition: transform 220ms ease;
452
+ visibility: hidden;
453
+ width: 320px;
454
+ z-index: 101;
455
+ }
456
+
457
+ &--open {
458
+ .wikex-account-drawer__backdrop {
459
+ opacity: 1;
460
+ pointer-events: auto;
461
+ visibility: visible;
462
+ }
463
+
464
+ .wikex-account-drawer__panel {
465
+ transform: translateX(0);
466
+ visibility: visible;
467
+ }
468
+ }
469
+
470
+ &__close {
471
+ align-items: center;
472
+ background: transparent;
473
+ border: 0;
474
+ border-radius: 50%;
475
+ color: var(--minimal-text-secondary);
476
+ cursor: pointer;
477
+ display: flex;
478
+ height: 40px;
479
+ justify-content: center;
480
+ left: 12px;
481
+ padding: 0;
482
+ position: absolute;
483
+ top: 12px;
484
+ width: 40px;
485
+
486
+ &:hover {
487
+ background: var(--minimal-action-hover);
488
+ }
489
+
490
+ svg {
491
+ height: 20px;
492
+ width: 20px;
493
+ }
494
+ }
495
+
496
+ &__profile {
497
+ align-items: center;
498
+ display: flex;
499
+ flex-direction: column;
500
+ padding: 72px 24px 32px;
501
+
502
+ strong {
503
+ font-size: 15px;
504
+ margin-top: 18px;
505
+ }
506
+
507
+ small {
508
+ color: var(--minimal-text-secondary);
509
+ margin-top: 4px;
510
+ max-width: 100%;
511
+ overflow: hidden;
512
+ text-overflow: ellipsis;
513
+ white-space: nowrap;
514
+ }
515
+ }
516
+
517
+ &__avatar {
518
+ align-items: center;
519
+ background: linear-gradient(135deg, var(--minimal-primary), var(--minimal-primary-light));
520
+ border: 6px solid var(--minimal-paper);
521
+ border-radius: 50%;
522
+ box-shadow:
523
+ 0 0 0 1px var(--minimal-primary),
524
+ 0 0 0 8px rgb(214 181 111 / 10%);
525
+ color: #16120b;
526
+ display: flex;
527
+ font-size: 22px;
528
+ font-weight: 800;
529
+ height: 88px;
530
+ justify-content: center;
531
+ width: 88px;
532
+ }
533
+
534
+ &__menu {
535
+ border-bottom: 1px dashed var(--minimal-divider);
536
+ border-top: 1px dashed var(--minimal-divider);
537
+ padding: 24px 20px;
538
+ }
539
+
540
+ &__link {
541
+ align-items: center;
542
+ border-radius: var(--minimal-radius-sm);
543
+ color: var(--minimal-text-secondary) !important;
544
+ display: flex;
545
+ font-size: 13px;
546
+ font-weight: 600;
547
+ gap: 12px;
548
+ min-height: 44px;
549
+ padding: 8px 12px;
550
+ text-decoration: none;
551
+
552
+ &:hover {
553
+ background: var(--minimal-action-hover);
554
+ color: var(--minimal-text-primary) !important;
555
+ }
556
+
557
+ svg {
558
+ height: 20px;
559
+ width: 20px;
560
+ }
561
+ }
562
+
563
+ &__footer {
564
+ margin-top: auto;
565
+ padding: 20px;
566
+
567
+ .admin-sign-out {
568
+ background: rgb(255 86 48 / 8%);
569
+ color: var(--minimal-error) !important;
570
+ justify-content: center;
571
+ }
572
+ }
573
+ }
574
+
575
+ .wikex-auth-intro {
576
+ margin-bottom: 28px;
577
+ text-align: center;
578
+
579
+ &__eyebrow {
580
+ color: var(--minimal-primary-dark);
581
+ display: block;
582
+ font-size: 11px;
583
+ font-weight: 800;
584
+ letter-spacing: 0.08em;
585
+ margin-bottom: 12px;
586
+ text-transform: uppercase;
587
+ }
588
+
589
+ h1 {
590
+ font-size: 30px;
591
+ letter-spacing: -0.03em;
592
+ margin: 0;
593
+ }
594
+
595
+ p {
596
+ color: var(--minimal-text-secondary);
597
+ line-height: 1.7;
598
+ margin: 12px 0 0;
599
+ }
600
+ }
601
+
602
+ html.wikex-live-preview-switching .wikex-dashboard-header,
603
+ html.wikex-live-preview-switching .wikex-dashboard-nav {
604
+ transition: none !important;
605
+ }
606
+
607
+ @media (min-width: 1025px) {
608
+ html.wikex-visual-preview-active body {
609
+ .wikex-dashboard-nav {
610
+ opacity: 0;
611
+ pointer-events: none;
612
+ transform: translateX(-16px);
613
+ width: 0;
614
+ }
615
+
616
+ .wikex-dashboard-header {
617
+ display: none;
618
+ }
619
+ }
620
+ }
621
+
622
+ @media (max-width: 768px) {
623
+ :root {
624
+ --minimal-header-height: var(--layout-header-mobile-height);
625
+ --nav-width: 0px;
626
+ }
627
+
628
+ .template-default {
629
+ display: block;
630
+ grid-template-columns: minmax(0, 1fr) !important;
631
+ }
632
+
633
+ .template-default__wrap {
634
+ padding-top: var(--layout-header-mobile-height);
635
+ }
636
+
637
+ .wikex-dashboard-header {
638
+ height: var(--layout-header-mobile-height);
639
+ left: 0;
640
+
641
+ &__container {
642
+ padding-inline: 16px;
643
+ }
644
+
645
+ &__menu,
646
+ &__mobile-logo {
647
+ display: flex;
648
+ }
649
+
650
+ &__mobile-logo {
651
+ margin-left: 4px;
652
+ }
653
+
654
+ &__workspace {
655
+ display: none;
656
+ }
657
+ }
658
+
659
+ .wikex-dashboard-nav,
660
+ .wikex-dashboard-nav--mini {
661
+ box-shadow: 40px 0 80px -16px rgb(20 26 33 / 36%);
662
+ left: 0;
663
+ max-width: min(88vw, var(--layout-nav-mobile-width));
664
+ position: fixed;
665
+ transform: translateX(-105%);
666
+ width: min(88vw, var(--layout-nav-mobile-width));
667
+ z-index: 102;
668
+
669
+ &.wikex-dashboard-nav--open {
670
+ transform: translateX(0);
671
+ }
672
+
673
+ .wikex-dashboard-nav__top {
674
+ justify-content: space-between;
675
+ padding-inline: 24px 12px;
676
+ }
677
+
678
+ .wikex-dashboard-nav__logo-full,
679
+ .wikex-dashboard-nav__mobile-close {
680
+ display: inline-flex;
681
+ }
682
+
683
+ .wikex-dashboard-nav__logo-icon,
684
+ .wikex-dashboard-nav__toggle {
685
+ display: none;
686
+ }
687
+
688
+ .wikex-dashboard-nav__scrollbar {
689
+ padding-inline: 16px;
690
+ }
691
+
692
+ .wikex-nav-section__subheader {
693
+ display: block;
694
+ }
695
+
696
+ .wikex-nav-section__item {
697
+ flex-direction: row;
698
+ font-size: 14px;
699
+ justify-content: flex-start;
700
+ line-height: normal;
701
+ min-height: 44px;
702
+ padding: 4px 8px 4px 12px;
703
+ text-align: left;
704
+ }
705
+
706
+ .wikex-nav-section__icon {
707
+ flex-basis: 24px;
708
+ height: 24px;
709
+ margin: 0 12px 0 0;
710
+ width: 24px;
711
+ }
712
+
713
+ .wikex-nav-section__title {
714
+ max-width: none;
715
+ }
716
+ }
717
+ }
718
+
719
+ @media (max-width: 560px) {
720
+ .wikex-dashboard-header .admin-view-site {
721
+ display: none;
722
+ }
723
+ }
724
+ }
@@ -1,4 +1,5 @@
1
1
  @use './wikex-fonts';
2
+ @use './minimal-dashboard';
2
3
 
3
4
  /* Minimal UI 7.6.1 skin for Payload. Payload keeps all application behaviour. */
4
5
 
@@ -3020,6 +3021,8 @@ html:has(.live-preview-resizer--dragging) body {
3020
3021
  }
3021
3022
  }
3022
3023
 
3024
+ @include minimal-dashboard.styles;
3025
+
3023
3026
  @media (prefers-reduced-motion: reduce) {
3024
3027
  *,
3025
3028
  *::before,