@helpwave/hightide 0.11.0 → 0.12.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.
- package/dist/index.d.mts +189 -44
- package/dist/index.d.ts +189 -44
- package/dist/index.js +15508 -14628
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +10706 -9843
- package/dist/index.mjs.map +1 -1
- package/dist/style/globals.css +474 -20
- package/dist/style/uncompiled/theme/components/app-page.css +116 -0
- package/dist/style/uncompiled/theme/components/avatar.css +33 -0
- package/dist/style/uncompiled/theme/components/card.css +78 -7
- package/dist/style/uncompiled/theme/components/checkbox.css +2 -1
- package/dist/style/uncompiled/theme/components/index.css +3 -1
- package/dist/style/uncompiled/theme/components/table.css +1 -1
- package/dist/style/uncompiled/theme/components/vertical-navigation.css +42 -0
- package/package.json +2 -2
package/dist/style/globals.css
CHANGED
|
@@ -335,6 +335,9 @@
|
|
|
335
335
|
.pointer-events-none {
|
|
336
336
|
pointer-events: none;
|
|
337
337
|
}
|
|
338
|
+
.collapse {
|
|
339
|
+
visibility: collapse;
|
|
340
|
+
}
|
|
338
341
|
.visible {
|
|
339
342
|
visibility: visible;
|
|
340
343
|
}
|
|
@@ -616,6 +619,10 @@
|
|
|
616
619
|
width: calc(var(--spacing) * 5);
|
|
617
620
|
height: calc(var(--spacing) * 5);
|
|
618
621
|
}
|
|
622
|
+
.size-6 {
|
|
623
|
+
width: calc(var(--spacing) * 6);
|
|
624
|
+
height: calc(var(--spacing) * 6);
|
|
625
|
+
}
|
|
619
626
|
.size-7 {
|
|
620
627
|
width: calc(var(--spacing) * 7);
|
|
621
628
|
height: calc(var(--spacing) * 7);
|
|
@@ -716,6 +723,12 @@
|
|
|
716
723
|
.min-h-9\/10 {
|
|
717
724
|
min-height: calc(9/10 * 100%);
|
|
718
725
|
}
|
|
726
|
+
.min-h-12 {
|
|
727
|
+
min-height: calc(var(--spacing) * 12);
|
|
728
|
+
}
|
|
729
|
+
.min-h-16 {
|
|
730
|
+
min-height: calc(var(--spacing) * 16);
|
|
731
|
+
}
|
|
719
732
|
.min-h-60 {
|
|
720
733
|
min-height: calc(var(--spacing) * 60);
|
|
721
734
|
}
|
|
@@ -752,6 +765,9 @@
|
|
|
752
765
|
.w-24 {
|
|
753
766
|
width: calc(var(--spacing) * 24);
|
|
754
767
|
}
|
|
768
|
+
.w-64 {
|
|
769
|
+
width: calc(var(--spacing) * 64);
|
|
770
|
+
}
|
|
755
771
|
.w-80 {
|
|
756
772
|
width: calc(var(--spacing) * 80);
|
|
757
773
|
}
|
|
@@ -815,6 +831,9 @@
|
|
|
815
831
|
.min-w-8 {
|
|
816
832
|
min-width: calc(var(--spacing) * 8);
|
|
817
833
|
}
|
|
834
|
+
.min-w-12 {
|
|
835
|
+
min-width: calc(var(--spacing) * 12);
|
|
836
|
+
}
|
|
818
837
|
.min-w-16 {
|
|
819
838
|
min-width: calc(var(--spacing) * 16);
|
|
820
839
|
}
|
|
@@ -2513,16 +2532,17 @@
|
|
|
2513
2532
|
}
|
|
2514
2533
|
}
|
|
2515
2534
|
@layer components {
|
|
2516
|
-
[data-name="card
|
|
2535
|
+
[data-name="card"] {
|
|
2517
2536
|
display: flex;
|
|
2518
2537
|
flex-direction: column;
|
|
2519
|
-
row-gap: calc(var(--spacing) *
|
|
2520
|
-
|
|
2538
|
+
row-gap: calc(var(--spacing) * 1);
|
|
2539
|
+
width: 100%;
|
|
2540
|
+
min-width: calc(var(--spacing) * 0);
|
|
2521
2541
|
transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
|
|
2522
2542
|
background-color: var(--coloring-solid-color,var(--coloring-color));
|
|
2523
2543
|
color: var(--coloring-solid-text,var(--coloring-on-color));
|
|
2524
|
-
|
|
2525
|
-
|
|
2544
|
+
--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
2545
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
2526
2546
|
--coloring-color: initial;
|
|
2527
2547
|
--coloring-on-color: initial;
|
|
2528
2548
|
--coloring-hover: initial;
|
|
@@ -2537,26 +2557,162 @@
|
|
|
2537
2557
|
--coloring-color: var(--color-surface);
|
|
2538
2558
|
--coloring-on-color: var(--color-on-surface);
|
|
2539
2559
|
--coloring-hover: var(--color-surface-hover);
|
|
2560
|
+
&[data-size="sm"] {
|
|
2561
|
+
border-radius: 0.25rem;
|
|
2562
|
+
padding-inline: calc(var(--spacing) * 2);
|
|
2563
|
+
padding-block: calc(var(--spacing) * 1);
|
|
2564
|
+
}
|
|
2565
|
+
&[data-size="md"] {
|
|
2566
|
+
border-radius: var(--radius-md);
|
|
2567
|
+
padding-inline: calc(var(--spacing) * 4);
|
|
2568
|
+
padding-block: calc(var(--spacing) * 2);
|
|
2569
|
+
}
|
|
2570
|
+
&[data-size="lg"] {
|
|
2571
|
+
border-radius: var(--radius-lg);
|
|
2572
|
+
padding-inline: calc(var(--spacing) * 8);
|
|
2573
|
+
padding-block: calc(var(--spacing) * 4);
|
|
2574
|
+
}
|
|
2540
2575
|
}
|
|
2541
|
-
[data-name="card-
|
|
2576
|
+
[data-name="action-card"], [data-name="navigation-card"] {
|
|
2542
2577
|
display: flex;
|
|
2543
2578
|
flex-direction: column;
|
|
2544
|
-
row-gap: calc(var(--spacing) *
|
|
2545
|
-
|
|
2546
|
-
|
|
2547
|
-
|
|
2548
|
-
|
|
2549
|
-
color: var(--
|
|
2579
|
+
row-gap: calc(var(--spacing) * 1);
|
|
2580
|
+
width: 100%;
|
|
2581
|
+
min-width: calc(var(--spacing) * 0);
|
|
2582
|
+
transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
|
|
2583
|
+
background-color: var(--coloring-solid-color,var(--coloring-color));
|
|
2584
|
+
color: var(--coloring-solid-text,var(--coloring-on-color));
|
|
2585
|
+
&:hover {
|
|
2586
|
+
@media (hover: hover) {
|
|
2587
|
+
background-color: var(--coloring-solid-hover,var(--coloring-hover));
|
|
2588
|
+
}
|
|
2589
|
+
}
|
|
2590
|
+
--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
2591
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
2592
|
+
--coloring-color: initial;
|
|
2593
|
+
--coloring-on-color: initial;
|
|
2594
|
+
--coloring-hover: initial;
|
|
2595
|
+
--coloring-text: initial;
|
|
2596
|
+
--coloring-text-hover: initial;
|
|
2597
|
+
--coloring-outline: initial;
|
|
2598
|
+
--coloring-outline-hover: initial;
|
|
2599
|
+
--coloring-tonal: initial;
|
|
2600
|
+
--coloring-tonal-background: initial;
|
|
2601
|
+
--coloring-tonal-text: initial;
|
|
2602
|
+
--coloring-tonal-hover: initial;
|
|
2603
|
+
--coloring-color: var(--color-surface);
|
|
2604
|
+
--coloring-on-color: var(--color-on-surface);
|
|
2605
|
+
--coloring-hover: var(--color-surface-hover);
|
|
2606
|
+
&[data-size="sm"] {
|
|
2607
|
+
border-radius: 0.25rem;
|
|
2608
|
+
padding-inline: calc(var(--spacing) * 2);
|
|
2609
|
+
padding-block: calc(var(--spacing) * 1);
|
|
2610
|
+
}
|
|
2611
|
+
&[data-size="md"] {
|
|
2612
|
+
border-radius: var(--radius-md);
|
|
2613
|
+
padding-inline: calc(var(--spacing) * 4);
|
|
2614
|
+
padding-block: calc(var(--spacing) * 2);
|
|
2615
|
+
}
|
|
2616
|
+
&[data-size="lg"] {
|
|
2617
|
+
border-radius: var(--radius-lg);
|
|
2618
|
+
padding-inline: calc(var(--spacing) * 8);
|
|
2619
|
+
padding-block: calc(var(--spacing) * 4);
|
|
2620
|
+
}
|
|
2550
2621
|
}
|
|
2551
|
-
[data-name="card-
|
|
2622
|
+
[data-name="card-header"] {
|
|
2623
|
+
display: flex;
|
|
2624
|
+
flex-direction: row;
|
|
2625
|
+
column-gap: calc(var(--spacing) * 2);
|
|
2626
|
+
width: 100%;
|
|
2627
|
+
min-width: calc(var(--spacing) * 0);
|
|
2628
|
+
align-items: center;
|
|
2629
|
+
}
|
|
2630
|
+
[data-name="card-content"] {
|
|
2552
2631
|
display: flex;
|
|
2553
2632
|
flex-direction: column;
|
|
2554
|
-
row-gap: calc(var(--spacing) *
|
|
2555
|
-
|
|
2556
|
-
|
|
2557
|
-
|
|
2558
|
-
|
|
2559
|
-
|
|
2633
|
+
row-gap: calc(var(--spacing) * 1);
|
|
2634
|
+
min-width: calc(var(--spacing) * 0);
|
|
2635
|
+
flex: 1;
|
|
2636
|
+
}
|
|
2637
|
+
[data-name="card-action"] {
|
|
2638
|
+
display: flex;
|
|
2639
|
+
flex-direction: column;
|
|
2640
|
+
row-gap: calc(var(--spacing) * 0);
|
|
2641
|
+
flex-shrink: 0;
|
|
2642
|
+
align-items: center;
|
|
2643
|
+
justify-content: center;
|
|
2644
|
+
color: var(--color-description);
|
|
2645
|
+
}
|
|
2646
|
+
[data-name="navigation-card-action"] {
|
|
2647
|
+
display: flex;
|
|
2648
|
+
flex-direction: column;
|
|
2649
|
+
row-gap: calc(var(--spacing) * 0);
|
|
2650
|
+
flex-shrink: 0;
|
|
2651
|
+
align-items: center;
|
|
2652
|
+
justify-content: center;
|
|
2653
|
+
color: var(--color-description);
|
|
2654
|
+
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
|
|
2655
|
+
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
2656
|
+
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
2657
|
+
&:is(:where(.group\/card):hover *) {
|
|
2658
|
+
@media (hover: hover) {
|
|
2659
|
+
color: var(--color-on-surface);
|
|
2660
|
+
}
|
|
2661
|
+
}
|
|
2662
|
+
}
|
|
2663
|
+
[data-name="card-title"] {
|
|
2664
|
+
font-family: var(--font-space);
|
|
2665
|
+
font-size: var(--text-lg);
|
|
2666
|
+
line-height: var(--tw-leading, var(--text-lg--line-height));
|
|
2667
|
+
--tw-font-weight: var(--font-weight-semibold);
|
|
2668
|
+
font-weight: var(--font-weight-semibold);
|
|
2669
|
+
}
|
|
2670
|
+
[data-name="card"][data-size="sm"] [data-name="card-title"], [data-name="action-card"][data-size="sm"] [data-name="card-title"], [data-name="navigation-card"][data-size="sm"] [data-name="card-title"] {
|
|
2671
|
+
font-family: var(--font-space);
|
|
2672
|
+
font-size: var(--text-base);
|
|
2673
|
+
line-height: var(--tw-leading, var(--text-base--line-height));
|
|
2674
|
+
--tw-font-weight: var(--font-weight-medium);
|
|
2675
|
+
font-weight: var(--font-weight-medium);
|
|
2676
|
+
}
|
|
2677
|
+
[data-name="card"][data-size="lg"] [data-name="card-title"], [data-name="action-card"][data-size="lg"] [data-name="card-title"], [data-name="navigation-card"][data-size="lg"] [data-name="card-title"] {
|
|
2678
|
+
font-family: var(--font-space);
|
|
2679
|
+
font-size: var(--text-2xl);
|
|
2680
|
+
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
|
2681
|
+
--tw-font-weight: var(--font-weight-semibold);
|
|
2682
|
+
font-weight: var(--font-weight-semibold);
|
|
2683
|
+
}
|
|
2684
|
+
[data-name="card-description"] {
|
|
2685
|
+
font-size: var(--text-base);
|
|
2686
|
+
line-height: var(--tw-leading, var(--text-base--line-height));
|
|
2687
|
+
--tw-font-weight: var(--font-weight-normal);
|
|
2688
|
+
font-weight: var(--font-weight-normal);
|
|
2689
|
+
color: var(--color-description);
|
|
2690
|
+
}
|
|
2691
|
+
[data-name="action-card"] {
|
|
2692
|
+
&:not([data-disabled]) {
|
|
2693
|
+
cursor: pointer;
|
|
2694
|
+
}
|
|
2695
|
+
&[data-disabled] {
|
|
2696
|
+
cursor: not-allowed;
|
|
2697
|
+
--coloring-color: initial;
|
|
2698
|
+
--coloring-on-color: initial;
|
|
2699
|
+
--coloring-hover: initial;
|
|
2700
|
+
--coloring-text: initial;
|
|
2701
|
+
--coloring-text-hover: initial;
|
|
2702
|
+
--coloring-outline: initial;
|
|
2703
|
+
--coloring-outline-hover: initial;
|
|
2704
|
+
--coloring-tonal: initial;
|
|
2705
|
+
--coloring-tonal-background: initial;
|
|
2706
|
+
--coloring-tonal-text: initial;
|
|
2707
|
+
--coloring-tonal-hover: initial;
|
|
2708
|
+
--coloring-color: var(--color-disabled);
|
|
2709
|
+
--coloring-on-color: var(--color-on-disabled);
|
|
2710
|
+
--coloring-hover: var(--color-disabled);
|
|
2711
|
+
--coloring-text-hover: transparent;
|
|
2712
|
+
}
|
|
2713
|
+
}
|
|
2714
|
+
[data-name="navigation-card"] {
|
|
2715
|
+
cursor: pointer;
|
|
2560
2716
|
}
|
|
2561
2717
|
}
|
|
2562
2718
|
@layer components {
|
|
@@ -2952,6 +3108,7 @@
|
|
|
2952
3108
|
&[data-sticky] {
|
|
2953
3109
|
position: sticky;
|
|
2954
3110
|
top: calc(var(--spacing) * 0);
|
|
3111
|
+
z-index: 10;
|
|
2955
3112
|
}
|
|
2956
3113
|
}
|
|
2957
3114
|
[data-name="table-body-row"] {
|
|
@@ -3260,6 +3417,50 @@
|
|
|
3260
3417
|
white-space: nowrap;
|
|
3261
3418
|
font-size: calc(var(--size) * 2 / 3);
|
|
3262
3419
|
}
|
|
3420
|
+
[data-name="avatar-with-status"] {
|
|
3421
|
+
position: relative;
|
|
3422
|
+
display: inline-flex;
|
|
3423
|
+
}
|
|
3424
|
+
[data-name="avatar-with-status-dot"] {
|
|
3425
|
+
position: absolute;
|
|
3426
|
+
right: calc(var(--spacing) * 0);
|
|
3427
|
+
bottom: calc(var(--spacing) * 0);
|
|
3428
|
+
z-index: 1;
|
|
3429
|
+
border-radius: calc(infinity * 1px);
|
|
3430
|
+
--tw-border-style: solid;
|
|
3431
|
+
border-style: solid;
|
|
3432
|
+
border-color: var(--color-background);
|
|
3433
|
+
&[data-size="xs"] {
|
|
3434
|
+
width: calc(var(--spacing) * 3);
|
|
3435
|
+
height: calc(var(--spacing) * 3);
|
|
3436
|
+
border-style: var(--tw-border-style);
|
|
3437
|
+
border-width: 1.5px;
|
|
3438
|
+
}
|
|
3439
|
+
&[data-size="sm"] {
|
|
3440
|
+
width: calc(var(--spacing) * 3.5);
|
|
3441
|
+
height: calc(var(--spacing) * 3.5);
|
|
3442
|
+
border-style: var(--tw-border-style);
|
|
3443
|
+
border-width: 2px;
|
|
3444
|
+
}
|
|
3445
|
+
&[data-size="md"] {
|
|
3446
|
+
width: calc(var(--spacing) * 4);
|
|
3447
|
+
height: calc(var(--spacing) * 4);
|
|
3448
|
+
border-style: var(--tw-border-style);
|
|
3449
|
+
border-width: 2px;
|
|
3450
|
+
}
|
|
3451
|
+
&[data-size="lg"] {
|
|
3452
|
+
width: calc(var(--spacing) * 5);
|
|
3453
|
+
height: calc(var(--spacing) * 5);
|
|
3454
|
+
border-style: var(--tw-border-style);
|
|
3455
|
+
border-width: 2px;
|
|
3456
|
+
}
|
|
3457
|
+
&[data-online] {
|
|
3458
|
+
background-color: var(--color-positive);
|
|
3459
|
+
}
|
|
3460
|
+
&:not([data-online]) {
|
|
3461
|
+
background-color: var(--color-negative);
|
|
3462
|
+
}
|
|
3463
|
+
}
|
|
3263
3464
|
}
|
|
3264
3465
|
@layer components {
|
|
3265
3466
|
[data-name="chip"] {
|
|
@@ -3824,9 +4025,12 @@
|
|
|
3824
4025
|
row-gap: calc(var(--spacing) * 0);
|
|
3825
4026
|
align-items: center;
|
|
3826
4027
|
justify-content: center;
|
|
3827
|
-
border-radius: 0.25rem;
|
|
3828
4028
|
border-style: var(--tw-border-style);
|
|
3829
4029
|
border-width: 2px;
|
|
4030
|
+
border-radius: 0.25rem;
|
|
4031
|
+
&[data-rounded] {
|
|
4032
|
+
border-radius: calc(infinity * 1px);
|
|
4033
|
+
}
|
|
3830
4034
|
transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color 100ms ease-in-out, background-color 100ms ease-in-out;
|
|
3831
4035
|
&:not([data-disabled]) {
|
|
3832
4036
|
&:hover {
|
|
@@ -5879,6 +6083,256 @@
|
|
|
5879
6083
|
color: var(--color-description);
|
|
5880
6084
|
}
|
|
5881
6085
|
}
|
|
6086
|
+
@layer components {
|
|
6087
|
+
[data-name="vertical-navigation-tree"] {
|
|
6088
|
+
margin: calc(var(--spacing) * 0);
|
|
6089
|
+
display: flex;
|
|
6090
|
+
flex-direction: column;
|
|
6091
|
+
row-gap: calc(var(--spacing) * 2);
|
|
6092
|
+
list-style-type: none;
|
|
6093
|
+
padding: calc(var(--spacing) * 0);
|
|
6094
|
+
}
|
|
6095
|
+
[data-name="vertical-navigation-node"] {
|
|
6096
|
+
margin: calc(var(--spacing) * 0);
|
|
6097
|
+
cursor: pointer;
|
|
6098
|
+
list-style-type: none;
|
|
6099
|
+
border-radius: var(--radius-md);
|
|
6100
|
+
padding: calc(var(--spacing) * 0);
|
|
6101
|
+
--tw-outline-style: none;
|
|
6102
|
+
outline-style: none;
|
|
6103
|
+
}
|
|
6104
|
+
[data-name="vertical-navigation-group"] {
|
|
6105
|
+
margin: calc(var(--spacing) * 0);
|
|
6106
|
+
margin-block: calc(var(--spacing) * 0.5);
|
|
6107
|
+
margin-left: calc(var(--spacing) * 2.5);
|
|
6108
|
+
display: flex;
|
|
6109
|
+
flex-direction: column;
|
|
6110
|
+
row-gap: calc(var(--spacing) * 0);
|
|
6111
|
+
list-style-type: none;
|
|
6112
|
+
border-left-style: var(--tw-border-style);
|
|
6113
|
+
border-left-width: 1px;
|
|
6114
|
+
border-color: var(--color-border);
|
|
6115
|
+
padding-left: calc(var(--spacing) * 2.5);
|
|
6116
|
+
}
|
|
6117
|
+
[data-name="vertical-navigation-node-header"], [data-name="vertical-navigation-item"] {
|
|
6118
|
+
display: flex;
|
|
6119
|
+
flex-direction: row;
|
|
6120
|
+
column-gap: calc(var(--spacing) * 1);
|
|
6121
|
+
min-height: calc(var(--spacing) * 9);
|
|
6122
|
+
min-width: calc(var(--spacing) * 0);
|
|
6123
|
+
align-items: center;
|
|
6124
|
+
border-radius: var(--radius-md);
|
|
6125
|
+
padding-inline: calc(var(--spacing) * 2.5);
|
|
6126
|
+
padding-block: calc(var(--spacing) * 1.5);
|
|
6127
|
+
&:hover, &:focus-visible {
|
|
6128
|
+
background-color: color-mix(in srgb, #694BB4 15%, transparent);
|
|
6129
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
6130
|
+
background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
|
|
6131
|
+
}
|
|
6132
|
+
}
|
|
6133
|
+
}
|
|
6134
|
+
[data-name="vertical-navigation-node-header"] {
|
|
6135
|
+
justify-content: space-between;
|
|
6136
|
+
transition: var(--focus-outline-transition);
|
|
6137
|
+
&[data-active] {
|
|
6138
|
+
background-color: color-mix(in srgb, #694BB4 15%, transparent);
|
|
6139
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
6140
|
+
background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
|
|
6141
|
+
}
|
|
6142
|
+
&:is(:where(.group\/tree-node):focus-visible *) {
|
|
6143
|
+
outline: var(--focus-outline);
|
|
6144
|
+
outline-offset: var(--focus-outline-offset);
|
|
6145
|
+
box-shadow: var(--focus-box-shadow);
|
|
6146
|
+
border-color: var(--focus-border-color);
|
|
6147
|
+
}
|
|
6148
|
+
}
|
|
6149
|
+
}
|
|
6150
|
+
[data-name="vertical-navigation-item-link"] {
|
|
6151
|
+
display: flex;
|
|
6152
|
+
flex-direction: row;
|
|
6153
|
+
column-gap: calc(var(--spacing) * 2);
|
|
6154
|
+
width: 100%;
|
|
6155
|
+
align-items: center;
|
|
6156
|
+
justify-content: space-between;
|
|
6157
|
+
text-decoration-line: none;
|
|
6158
|
+
}
|
|
6159
|
+
}
|
|
6160
|
+
@layer components {
|
|
6161
|
+
[data-name="app-page"] {
|
|
6162
|
+
display: flex;
|
|
6163
|
+
flex-direction: row;
|
|
6164
|
+
column-gap: calc(var(--spacing) * 0);
|
|
6165
|
+
height: 100dvh;
|
|
6166
|
+
max-height: 100dvh;
|
|
6167
|
+
min-height: 100dvh;
|
|
6168
|
+
width: 100vw;
|
|
6169
|
+
overflow: hidden;
|
|
6170
|
+
overflow-x: hidden;
|
|
6171
|
+
}
|
|
6172
|
+
[data-name="app-sidebar-backdrop"] {
|
|
6173
|
+
position: fixed;
|
|
6174
|
+
inset: calc(var(--spacing) * 0);
|
|
6175
|
+
z-index: 40;
|
|
6176
|
+
touch-action: manipulation;
|
|
6177
|
+
background-color: var(--color-overlay-shadow);
|
|
6178
|
+
@media (width >= 64rem) {
|
|
6179
|
+
display: none;
|
|
6180
|
+
}
|
|
6181
|
+
}
|
|
6182
|
+
[data-name="app-sidebar-container"] {
|
|
6183
|
+
position: fixed;
|
|
6184
|
+
inset-block: calc(var(--spacing) * 0);
|
|
6185
|
+
height: 100vh;
|
|
6186
|
+
min-width: 100%;
|
|
6187
|
+
padding: calc(var(--spacing) * 4);
|
|
6188
|
+
padding-top: calc(max(env(safe-area-inset-top), var(--spacing) * 4));
|
|
6189
|
+
padding-bottom: calc(max(env(safe-area-inset-bottom), var(--spacing) * 4));
|
|
6190
|
+
@media (width >= 48rem) {
|
|
6191
|
+
min-width: calc(6/10 * 100%);
|
|
6192
|
+
}
|
|
6193
|
+
@media (width >= 64rem) {
|
|
6194
|
+
position: relative;
|
|
6195
|
+
max-width: calc(var(--spacing) * 64);
|
|
6196
|
+
min-width: calc(var(--spacing) * 56);
|
|
6197
|
+
}
|
|
6198
|
+
&:not([data-open]) {
|
|
6199
|
+
display: none;
|
|
6200
|
+
@media (width >= 64rem) {
|
|
6201
|
+
display: block;
|
|
6202
|
+
}
|
|
6203
|
+
}
|
|
6204
|
+
}
|
|
6205
|
+
[data-name="app-sidebar-content"] {
|
|
6206
|
+
position: relative;
|
|
6207
|
+
display: flex;
|
|
6208
|
+
flex-direction: column;
|
|
6209
|
+
row-gap: calc(var(--spacing) * 4);
|
|
6210
|
+
height: 100%;
|
|
6211
|
+
min-height: calc(var(--spacing) * 0);
|
|
6212
|
+
width: 100%;
|
|
6213
|
+
overflow: hidden;
|
|
6214
|
+
border-radius: var(--radius-lg);
|
|
6215
|
+
background-color: var(--color-surface);
|
|
6216
|
+
color: var(--color-on-surface);
|
|
6217
|
+
--shadow-right: 5px 0 5px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
|
|
6218
|
+
--shadow-left: -5px 0 5px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
|
|
6219
|
+
--shadow-top: 0 -5px 5px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
|
|
6220
|
+
--shadow-bottom: 0 5px 5px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
|
|
6221
|
+
box-shadow: var(--shadow-right, 0 0 0 transparent), var(--shadow-left, 0 0 0 transparent), var(--shadow-top, 0 0 0 transparent), var(--shadow-bottom, 0 0 0 transparent);
|
|
6222
|
+
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
|
6223
|
+
transition-property: transform, translate, scale, rotate;
|
|
6224
|
+
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
6225
|
+
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
6226
|
+
--tw-duration: 300ms;
|
|
6227
|
+
transition-duration: 300ms;
|
|
6228
|
+
--tw-ease: var(--ease-out);
|
|
6229
|
+
transition-timing-function: var(--ease-out);
|
|
6230
|
+
&:not([data-open]) {
|
|
6231
|
+
pointer-events: none;
|
|
6232
|
+
--tw-translate-x: -100%;
|
|
6233
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
6234
|
+
@media (width >= 64rem) {
|
|
6235
|
+
pointer-events: auto;
|
|
6236
|
+
--tw-translate-x: calc(var(--spacing) * 0);
|
|
6237
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
6238
|
+
}
|
|
6239
|
+
}
|
|
6240
|
+
&[data-open] {
|
|
6241
|
+
--tw-translate-x: calc(var(--spacing) * 0);
|
|
6242
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
6243
|
+
}
|
|
6244
|
+
}
|
|
6245
|
+
.app-sidebar-close-button {
|
|
6246
|
+
position: absolute;
|
|
6247
|
+
top: calc(var(--spacing) * 0.5);
|
|
6248
|
+
right: calc(var(--spacing) * 0.5);
|
|
6249
|
+
z-index: 10;
|
|
6250
|
+
@media (width >= 64rem) {
|
|
6251
|
+
display: none;
|
|
6252
|
+
}
|
|
6253
|
+
}
|
|
6254
|
+
.app-page-sidebar-with-navigation {
|
|
6255
|
+
display: flex;
|
|
6256
|
+
flex-direction: column;
|
|
6257
|
+
row-gap: calc(var(--spacing) * 0);
|
|
6258
|
+
height: 100%;
|
|
6259
|
+
min-height: calc(var(--spacing) * 0);
|
|
6260
|
+
padding-block: calc(var(--spacing) * 2);
|
|
6261
|
+
}
|
|
6262
|
+
.app-page-sidebar-with-navigation-header {
|
|
6263
|
+
margin-bottom: calc(var(--spacing) * 8);
|
|
6264
|
+
display: flex;
|
|
6265
|
+
flex-direction: column;
|
|
6266
|
+
row-gap: calc(var(--spacing) * 0);
|
|
6267
|
+
align-items: flex-start;
|
|
6268
|
+
padding-inline: calc(var(--spacing) * 3.25);
|
|
6269
|
+
@media (width >= 64rem) {
|
|
6270
|
+
align-items: center;
|
|
6271
|
+
}
|
|
6272
|
+
}
|
|
6273
|
+
.app-page-sidebar-with-navigation-scroll {
|
|
6274
|
+
min-height: calc(var(--spacing) * 0);
|
|
6275
|
+
flex: 1;
|
|
6276
|
+
overflow-y: scroll;
|
|
6277
|
+
overscroll-behavior-y: contain;
|
|
6278
|
+
padding-block: calc(var(--spacing) * 0.75);
|
|
6279
|
+
padding-right: calc(var(--spacing) * 0.75);
|
|
6280
|
+
padding-left: calc(var(--spacing) * 3.25);
|
|
6281
|
+
scrollbar-gutter: stable;
|
|
6282
|
+
}
|
|
6283
|
+
.app-page-sidebar-with-navigation-footer {
|
|
6284
|
+
display: flex;
|
|
6285
|
+
flex-direction: column;
|
|
6286
|
+
row-gap: calc(var(--spacing) * 0);
|
|
6287
|
+
padding-inline: calc(var(--spacing) * 3.25);
|
|
6288
|
+
padding-top: calc(var(--spacing) * 2);
|
|
6289
|
+
}
|
|
6290
|
+
[data-name="app-page-content"] {
|
|
6291
|
+
display: flex;
|
|
6292
|
+
flex-direction: column;
|
|
6293
|
+
row-gap: calc(var(--spacing) * 0);
|
|
6294
|
+
flex-grow: 1;
|
|
6295
|
+
overflow-y: auto;
|
|
6296
|
+
overscroll-behavior-y: contain;
|
|
6297
|
+
scrollbar-gutter: stable;
|
|
6298
|
+
@media (width >= 64rem) {
|
|
6299
|
+
padding-left: calc(var(--spacing) * 6);
|
|
6300
|
+
}
|
|
6301
|
+
}
|
|
6302
|
+
[data-name="app-page-header"] {
|
|
6303
|
+
position: sticky;
|
|
6304
|
+
top: calc(var(--spacing) * 0);
|
|
6305
|
+
right: calc(var(--spacing) * 0);
|
|
6306
|
+
z-index: 20;
|
|
6307
|
+
display: flex;
|
|
6308
|
+
flex-direction: row;
|
|
6309
|
+
column-gap: calc(var(--spacing) * 2);
|
|
6310
|
+
align-items: center;
|
|
6311
|
+
background-color: var(--color-background);
|
|
6312
|
+
padding: calc(var(--spacing) * 4);
|
|
6313
|
+
color: var(--color-on-background);
|
|
6314
|
+
@media (width >= 64rem) {
|
|
6315
|
+
padding-left: calc(var(--spacing) * 0);
|
|
6316
|
+
}
|
|
6317
|
+
}
|
|
6318
|
+
.app-page-menu-button {
|
|
6319
|
+
@media (width >= 64rem) {
|
|
6320
|
+
display: none;
|
|
6321
|
+
}
|
|
6322
|
+
}
|
|
6323
|
+
[data-name="app-page-main"] {
|
|
6324
|
+
display: flex;
|
|
6325
|
+
flex-direction: column;
|
|
6326
|
+
row-gap: calc(var(--spacing) * 2);
|
|
6327
|
+
padding-inline: calc(var(--spacing) * 4);
|
|
6328
|
+
@media (width >= 64rem) {
|
|
6329
|
+
padding-left: calc(var(--spacing) * 0);
|
|
6330
|
+
}
|
|
6331
|
+
}
|
|
6332
|
+
[data-name="app-page-main-spacer"] {
|
|
6333
|
+
min-height: calc(var(--spacing) * 16);
|
|
6334
|
+
}
|
|
6335
|
+
}
|
|
5882
6336
|
:root {
|
|
5883
6337
|
--spacing: 0.25rem;
|
|
5884
6338
|
--drawer-indent: calc(4 * var(--spacing));
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
[data-name="app-page"] {
|
|
3
|
+
@apply flex-row-0 h-dvh min-h-dvh max-h-dvh w-screen overflow-hidden overflow-x-hidden;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
[data-name="app-sidebar-backdrop"] {
|
|
7
|
+
@apply fixed inset-0 z-40 touch-manipulation bg-overlay-shadow;
|
|
8
|
+
|
|
9
|
+
@variant desktop {
|
|
10
|
+
@apply hidden;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
[data-name="app-sidebar-container"] {
|
|
15
|
+
@apply fixed inset-y-0 min-w-full h-screen p-4;
|
|
16
|
+
padding-top: calc(max(env(safe-area-inset-top), var(--spacing) * 4));
|
|
17
|
+
padding-bottom: calc(max(env(safe-area-inset-bottom), var(--spacing) * 4));
|
|
18
|
+
|
|
19
|
+
@variant tablet {
|
|
20
|
+
@apply min-w-6/10;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@variant desktop {
|
|
24
|
+
@apply relative min-w-56 max-w-64;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&:not([data-open]) {
|
|
28
|
+
@apply hidden;
|
|
29
|
+
|
|
30
|
+
@variant desktop {
|
|
31
|
+
@apply block;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
[data-name="app-sidebar-content"] {
|
|
37
|
+
@apply relative flex-col-4 rounded-lg bg-surface text-on-surface w-full h-full min-h-0 overflow-hidden shadow-around-md;
|
|
38
|
+
@apply transform transition-transform duration-300 ease-out;
|
|
39
|
+
|
|
40
|
+
&:not([data-open]) {
|
|
41
|
+
@apply -translate-x-full pointer-events-none;
|
|
42
|
+
|
|
43
|
+
@variant desktop {
|
|
44
|
+
@apply translate-x-0 pointer-events-auto;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&[data-open] {
|
|
49
|
+
@apply translate-x-0;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.app-sidebar-close-button {
|
|
54
|
+
@apply absolute top-0.5 right-0.5 z-10;
|
|
55
|
+
|
|
56
|
+
@variant desktop {
|
|
57
|
+
@apply hidden;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.app-page-sidebar-with-navigation {
|
|
62
|
+
@apply flex-col-0 h-full min-h-0 py-2;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.app-page-sidebar-with-navigation-header {
|
|
66
|
+
@apply flex-col-0 items-start px-3.25 mb-8;
|
|
67
|
+
|
|
68
|
+
@variant desktop {
|
|
69
|
+
@apply items-center;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.app-page-sidebar-with-navigation-scroll {
|
|
74
|
+
@apply flex-1 min-h-0 pl-3.25 pr-0.75 py-0.75 overflow-y-scroll overscroll-y-contain;
|
|
75
|
+
scrollbar-gutter: stable;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.app-page-sidebar-with-navigation-footer {
|
|
79
|
+
@apply flex-col-0 px-3.25 pt-2;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
[data-name="app-page-content"] {
|
|
83
|
+
@apply flex-col-0 grow overflow-y-auto overscroll-y-contain;
|
|
84
|
+
scrollbar-gutter: stable;
|
|
85
|
+
|
|
86
|
+
@variant desktop {
|
|
87
|
+
@apply pl-6;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
[data-name="app-page-header"] {
|
|
92
|
+
@apply sticky top-0 right-0 z-20 flex-row-2 items-center p-4 bg-background text-on-background;
|
|
93
|
+
|
|
94
|
+
@variant desktop {
|
|
95
|
+
@apply pl-0;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.app-page-menu-button {
|
|
100
|
+
@variant desktop {
|
|
101
|
+
@apply hidden;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
[data-name="app-page-main"] {
|
|
106
|
+
@apply flex-col-2 px-4;
|
|
107
|
+
|
|
108
|
+
@variant desktop {
|
|
109
|
+
@apply pl-0;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
[data-name="app-page-main-spacer"] {
|
|
114
|
+
@apply min-h-16;
|
|
115
|
+
}
|
|
116
|
+
}
|