@aortl/admin-css 0.7.0 → 0.8.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/admin.css +217 -42
- package/dist/admin.min.css +1 -1
- package/dist/admin.scoped.css +213 -42
- package/dist/admin.scoped.min.css +52 -17
- package/package.json +1 -1
- package/src/components/button-group.css +33 -26
- package/src/components/dialog.css +5 -1
- package/src/components/index.css +2 -0
- package/src/components/indicator.css +113 -0
- package/src/components/kbd.css +47 -0
- package/src/components/menu.css +32 -0
- package/src/components/property-list.css +9 -4
- package/src/theme.css +15 -15
package/dist/admin.css
CHANGED
|
@@ -33,21 +33,21 @@
|
|
|
33
33
|
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
34
34
|
--default-font-family: var(--font-sans);
|
|
35
35
|
--default-mono-font-family: var(--font-mono);
|
|
36
|
-
--color-paper: #
|
|
37
|
-
--color-black: #
|
|
38
|
-
--color-base-50: #
|
|
39
|
-
--color-base-100: #
|
|
40
|
-
--color-base-150: #
|
|
41
|
-
--color-base-200: #
|
|
42
|
-
--color-base-300: #
|
|
43
|
-
--color-base-400: #
|
|
44
|
-
--color-base-500: #
|
|
45
|
-
--color-base-600: #
|
|
46
|
-
--color-base-700: #
|
|
47
|
-
--color-base-800: #
|
|
48
|
-
--color-base-850: #
|
|
49
|
-
--color-base-900: #
|
|
50
|
-
--color-base-950: #
|
|
36
|
+
--color-paper: #ffffff;
|
|
37
|
+
--color-black: #0f0f0f;
|
|
38
|
+
--color-base-50: #fafafa;
|
|
39
|
+
--color-base-100: #f4f4f4;
|
|
40
|
+
--color-base-150: #e7e7e7;
|
|
41
|
+
--color-base-200: #d4d4d4;
|
|
42
|
+
--color-base-300: #b3b3b3;
|
|
43
|
+
--color-base-400: #9b9b9b;
|
|
44
|
+
--color-base-500: #848484;
|
|
45
|
+
--color-base-600: #6c6c6c;
|
|
46
|
+
--color-base-700: #555555;
|
|
47
|
+
--color-base-800: #3e3e3e;
|
|
48
|
+
--color-base-850: #333333;
|
|
49
|
+
--color-base-900: #272727;
|
|
50
|
+
--color-base-950: #1b1b1b;
|
|
51
51
|
--color-red-50: #ffe1d5;
|
|
52
52
|
--color-red-100: #ffcabb;
|
|
53
53
|
--color-red-150: #fdb2a2;
|
|
@@ -373,6 +373,15 @@
|
|
|
373
373
|
white-space: nowrap;
|
|
374
374
|
border-width: 0;
|
|
375
375
|
}
|
|
376
|
+
.absolute {
|
|
377
|
+
position: absolute;
|
|
378
|
+
}
|
|
379
|
+
.fixed {
|
|
380
|
+
position: fixed;
|
|
381
|
+
}
|
|
382
|
+
.relative {
|
|
383
|
+
position: relative;
|
|
384
|
+
}
|
|
376
385
|
.sticky {
|
|
377
386
|
position: sticky;
|
|
378
387
|
}
|
|
@@ -397,12 +406,18 @@
|
|
|
397
406
|
.block {
|
|
398
407
|
display: block;
|
|
399
408
|
}
|
|
409
|
+
.flex {
|
|
410
|
+
display: flex;
|
|
411
|
+
}
|
|
400
412
|
.grid {
|
|
401
413
|
display: grid;
|
|
402
414
|
}
|
|
403
415
|
.hidden {
|
|
404
416
|
display: none;
|
|
405
417
|
}
|
|
418
|
+
.inline {
|
|
419
|
+
display: inline;
|
|
420
|
+
}
|
|
406
421
|
.table {
|
|
407
422
|
display: table;
|
|
408
423
|
}
|
|
@@ -415,6 +430,15 @@
|
|
|
415
430
|
.transform {
|
|
416
431
|
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
|
417
432
|
}
|
|
433
|
+
.overflow-hidden {
|
|
434
|
+
overflow: hidden;
|
|
435
|
+
}
|
|
436
|
+
.rounded {
|
|
437
|
+
border-radius: 0.25rem;
|
|
438
|
+
}
|
|
439
|
+
.rounded-md {
|
|
440
|
+
border-radius: var(--radius-md);
|
|
441
|
+
}
|
|
418
442
|
.text-right {
|
|
419
443
|
text-align: right;
|
|
420
444
|
}
|
|
@@ -808,6 +832,136 @@
|
|
|
808
832
|
user-select: none;
|
|
809
833
|
}
|
|
810
834
|
}
|
|
835
|
+
@layer components {
|
|
836
|
+
.kbd {
|
|
837
|
+
display: inline-flex;
|
|
838
|
+
height: 1.4em;
|
|
839
|
+
min-width: 1.25em;
|
|
840
|
+
align-items: center;
|
|
841
|
+
justify-content: center;
|
|
842
|
+
border-radius: 0.25rem;
|
|
843
|
+
border-style: var(--tw-border-style);
|
|
844
|
+
border-width: 1px;
|
|
845
|
+
border-color: var(--color-border);
|
|
846
|
+
background-color: var(--color-surface-strong);
|
|
847
|
+
padding-inline: 0.35em;
|
|
848
|
+
vertical-align: middle;
|
|
849
|
+
font-family: var(--font-mono);
|
|
850
|
+
font-size: 0.75em;
|
|
851
|
+
--tw-leading: 1;
|
|
852
|
+
line-height: 1;
|
|
853
|
+
white-space: nowrap;
|
|
854
|
+
color: var(--color-text-muted);
|
|
855
|
+
font-variant-numeric: tabular-nums;
|
|
856
|
+
}
|
|
857
|
+
.kbd-group {
|
|
858
|
+
display: inline-flex;
|
|
859
|
+
align-items: center;
|
|
860
|
+
gap: calc(var(--spacing) * 1);
|
|
861
|
+
vertical-align: middle;
|
|
862
|
+
}
|
|
863
|
+
.btn .kbd, .menu-item .kbd {
|
|
864
|
+
color: currentColor;
|
|
865
|
+
background-color: currentColor;
|
|
866
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
867
|
+
background-color: color-mix(in srgb, currentColor 12%, transparent);
|
|
868
|
+
}
|
|
869
|
+
border-color: currentColor;
|
|
870
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
871
|
+
border-color: color-mix(in srgb, currentColor 22%, transparent);
|
|
872
|
+
}
|
|
873
|
+
}
|
|
874
|
+
.btn > .kbd-group {
|
|
875
|
+
opacity: 0.85;
|
|
876
|
+
}
|
|
877
|
+
.menu-item > .kbd-group {
|
|
878
|
+
margin-inline-start: auto;
|
|
879
|
+
}
|
|
880
|
+
.btn-group-vertical > .btn > .kbd-group {
|
|
881
|
+
margin-inline-start: auto;
|
|
882
|
+
}
|
|
883
|
+
}
|
|
884
|
+
@layer components {
|
|
885
|
+
.indicator {
|
|
886
|
+
position: relative;
|
|
887
|
+
display: inline-flex;
|
|
888
|
+
width: max-content;
|
|
889
|
+
}
|
|
890
|
+
.indicator:has(> .btn), .indicator:has(> .input) {
|
|
891
|
+
--indicator-offset: 2px;
|
|
892
|
+
}
|
|
893
|
+
.indicator:has(> .card) {
|
|
894
|
+
--indicator-offset: 6px;
|
|
895
|
+
}
|
|
896
|
+
.indicator-item {
|
|
897
|
+
position: absolute;
|
|
898
|
+
z-index: 1;
|
|
899
|
+
white-space: nowrap;
|
|
900
|
+
top: var(--indicator-top, 0);
|
|
901
|
+
bottom: var(--indicator-bottom, auto);
|
|
902
|
+
inset-inline-start: var(--indicator-start, auto);
|
|
903
|
+
inset-inline-end: var(--indicator-end, 0);
|
|
904
|
+
transform: translate(var(--indicator-tx, 50%), var(--indicator-ty, -50%)) translate( var(--indicator-offset-x, calc(-1 * var(--indicator-offset, 0px))), var(--indicator-offset-y, var(--indicator-offset, 0px)) );
|
|
905
|
+
}
|
|
906
|
+
.indicator-start {
|
|
907
|
+
--indicator-start: 0;
|
|
908
|
+
--indicator-end: auto;
|
|
909
|
+
--indicator-tx: -50%;
|
|
910
|
+
--indicator-offset-x: var(--indicator-offset, 0px);
|
|
911
|
+
}
|
|
912
|
+
.indicator-center {
|
|
913
|
+
--indicator-start: 50%;
|
|
914
|
+
--indicator-end: auto;
|
|
915
|
+
--indicator-tx: -50%;
|
|
916
|
+
--indicator-offset-x: 0px;
|
|
917
|
+
}
|
|
918
|
+
.indicator-end {
|
|
919
|
+
--indicator-start: auto;
|
|
920
|
+
--indicator-end: 0;
|
|
921
|
+
--indicator-tx: 50%;
|
|
922
|
+
--indicator-offset-x: calc(-1 * var(--indicator-offset, 0px));
|
|
923
|
+
}
|
|
924
|
+
.indicator-top {
|
|
925
|
+
--indicator-top: 0;
|
|
926
|
+
--indicator-bottom: auto;
|
|
927
|
+
--indicator-ty: -50%;
|
|
928
|
+
--indicator-offset-y: var(--indicator-offset, 0px);
|
|
929
|
+
}
|
|
930
|
+
.indicator-middle {
|
|
931
|
+
--indicator-top: 50%;
|
|
932
|
+
--indicator-bottom: auto;
|
|
933
|
+
--indicator-ty: -50%;
|
|
934
|
+
--indicator-offset-y: 0px;
|
|
935
|
+
}
|
|
936
|
+
.indicator-bottom {
|
|
937
|
+
--indicator-top: auto;
|
|
938
|
+
--indicator-bottom: 0;
|
|
939
|
+
--indicator-ty: 50%;
|
|
940
|
+
--indicator-offset-y: calc(-1 * var(--indicator-offset, 0px));
|
|
941
|
+
}
|
|
942
|
+
.indicator-dot {
|
|
943
|
+
display: inline-block;
|
|
944
|
+
height: calc(var(--spacing) * 2);
|
|
945
|
+
width: calc(var(--spacing) * 2);
|
|
946
|
+
border-radius: calc(infinity * 1px);
|
|
947
|
+
background-color: var(--color-text-muted);
|
|
948
|
+
}
|
|
949
|
+
.indicator-dot-info {
|
|
950
|
+
background-color: var(--color-info);
|
|
951
|
+
}
|
|
952
|
+
.indicator-dot-success {
|
|
953
|
+
background-color: var(--color-success);
|
|
954
|
+
}
|
|
955
|
+
.indicator-dot-warning {
|
|
956
|
+
background-color: var(--color-warning);
|
|
957
|
+
}
|
|
958
|
+
.indicator-dot-danger {
|
|
959
|
+
background-color: var(--color-danger);
|
|
960
|
+
}
|
|
961
|
+
.indicator-dot-primary {
|
|
962
|
+
background-color: var(--color-primary);
|
|
963
|
+
}
|
|
964
|
+
}
|
|
811
965
|
@layer components {
|
|
812
966
|
.spinner {
|
|
813
967
|
display: inline-block;
|
|
@@ -1094,6 +1248,10 @@
|
|
|
1094
1248
|
gap: 0.5rem;
|
|
1095
1249
|
min-width: 0;
|
|
1096
1250
|
}
|
|
1251
|
+
.property-list-compact .property-list-label, .property-list-compact .property-list-value {
|
|
1252
|
+
padding: 0.125rem 0.5rem;
|
|
1253
|
+
min-height: 1.5rem;
|
|
1254
|
+
}
|
|
1097
1255
|
.property-list-value-numeric {
|
|
1098
1256
|
justify-content: flex-end;
|
|
1099
1257
|
--tw-numeric-spacing: tabular-nums;
|
|
@@ -1136,12 +1294,12 @@
|
|
|
1136
1294
|
padding: 0.125rem;
|
|
1137
1295
|
transition: opacity 100ms ease, color 100ms ease;
|
|
1138
1296
|
}
|
|
1139
|
-
.property-list-
|
|
1297
|
+
.property-list-value-copyable .property-list-copy {
|
|
1140
1298
|
display: inline-flex;
|
|
1141
1299
|
opacity: 0;
|
|
1142
1300
|
pointer-events: none;
|
|
1143
1301
|
}
|
|
1144
|
-
.property-list-
|
|
1302
|
+
.property-list-label:has(+ .property-list-value-copyable):hover + .property-list-value .property-list-copy, .property-list-value-copyable:hover .property-list-copy, .property-list-copy:focus-visible, .property-list-copy[data-copied] {
|
|
1145
1303
|
opacity: 1;
|
|
1146
1304
|
pointer-events: auto;
|
|
1147
1305
|
}
|
|
@@ -1306,17 +1464,6 @@
|
|
|
1306
1464
|
z-index: 10;
|
|
1307
1465
|
}
|
|
1308
1466
|
}
|
|
1309
|
-
.btn-group > .btn:not(:first-child) {
|
|
1310
|
-
margin-left: -1px;
|
|
1311
|
-
}
|
|
1312
|
-
.btn-group > .btn:first-child {
|
|
1313
|
-
border-top-left-radius: var(--radius-lg);
|
|
1314
|
-
border-bottom-left-radius: var(--radius-lg);
|
|
1315
|
-
}
|
|
1316
|
-
.btn-group > .btn:last-child {
|
|
1317
|
-
border-top-right-radius: var(--radius-lg);
|
|
1318
|
-
border-bottom-right-radius: var(--radius-lg);
|
|
1319
|
-
}
|
|
1320
1467
|
.btn-group > .menu {
|
|
1321
1468
|
position: relative;
|
|
1322
1469
|
&:focus-visible {
|
|
@@ -1324,21 +1471,21 @@
|
|
|
1324
1471
|
}
|
|
1325
1472
|
display: inline-flex;
|
|
1326
1473
|
}
|
|
1327
|
-
.btn-group > .menu:not(:first-child) {
|
|
1328
|
-
margin-left: -1px;
|
|
1329
|
-
}
|
|
1330
1474
|
.btn-group > .menu > .menu-trigger {
|
|
1331
1475
|
border-radius: 0;
|
|
1332
1476
|
}
|
|
1333
|
-
.btn-group > .
|
|
1477
|
+
.btn-group:not(.btn-group-vertical) > .btn:not(:first-child), .btn-group:not(.btn-group-vertical) > .menu:not(:first-child) {
|
|
1478
|
+
margin-left: -1px;
|
|
1479
|
+
}
|
|
1480
|
+
.btn-group:not(.btn-group-vertical) > .btn:first-child, .btn-group:not(.btn-group-vertical) > .menu:first-child > .menu-trigger {
|
|
1334
1481
|
border-top-left-radius: var(--radius-lg);
|
|
1335
1482
|
border-bottom-left-radius: var(--radius-lg);
|
|
1336
1483
|
}
|
|
1337
|
-
.btn-group > .menu:last-child > .menu-trigger {
|
|
1484
|
+
.btn-group:not(.btn-group-vertical) > .btn:last-child, .btn-group:not(.btn-group-vertical) > .menu:last-child > .menu-trigger {
|
|
1338
1485
|
border-top-right-radius: var(--radius-lg);
|
|
1339
1486
|
border-bottom-right-radius: var(--radius-lg);
|
|
1340
1487
|
}
|
|
1341
|
-
.btn-group > .btn:not(:first-child), .btn-group > .menu:not(:first-child) > .menu-trigger {
|
|
1488
|
+
.btn-group:not(.btn-group-vertical) > .btn:not(:first-child), .btn-group:not(.btn-group-vertical) > .menu:not(:first-child) > .menu-trigger {
|
|
1342
1489
|
border-left-color: currentColor;
|
|
1343
1490
|
@supports (color: color-mix(in lab, red, red)) {
|
|
1344
1491
|
border-left-color: color-mix(in srgb, currentColor 25%, transparent);
|
|
@@ -1348,20 +1495,26 @@
|
|
|
1348
1495
|
display: inline-flex;
|
|
1349
1496
|
flex-direction: column;
|
|
1350
1497
|
}
|
|
1351
|
-
.btn-group-vertical > .btn
|
|
1498
|
+
.btn-group-vertical > .btn {
|
|
1499
|
+
justify-content: flex-start;
|
|
1500
|
+
}
|
|
1501
|
+
.btn-group-vertical > .btn:not(:first-child), .btn-group-vertical > .menu:not(:first-child) {
|
|
1352
1502
|
margin-top: -1px;
|
|
1353
|
-
margin-left: calc(var(--spacing) * 0);
|
|
1354
1503
|
}
|
|
1355
|
-
.btn-group-vertical > .btn:first-child {
|
|
1504
|
+
.btn-group-vertical > .btn:first-child, .btn-group-vertical > .menu:first-child > .menu-trigger {
|
|
1356
1505
|
border-top-left-radius: var(--radius-lg);
|
|
1357
1506
|
border-top-right-radius: var(--radius-lg);
|
|
1358
|
-
border-bottom-left-radius: 0;
|
|
1359
1507
|
}
|
|
1360
|
-
.btn-group-vertical > .btn:last-child {
|
|
1361
|
-
border-top-right-radius: 0;
|
|
1508
|
+
.btn-group-vertical > .btn:last-child, .btn-group-vertical > .menu:last-child > .menu-trigger {
|
|
1362
1509
|
border-bottom-right-radius: var(--radius-lg);
|
|
1363
1510
|
border-bottom-left-radius: var(--radius-lg);
|
|
1364
1511
|
}
|
|
1512
|
+
.btn-group-vertical > .btn:not(:first-child), .btn-group-vertical > .menu:not(:first-child) > .menu-trigger {
|
|
1513
|
+
border-top-color: currentColor;
|
|
1514
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1515
|
+
border-top-color: color-mix(in srgb, currentColor 25%, transparent);
|
|
1516
|
+
}
|
|
1517
|
+
}
|
|
1365
1518
|
}
|
|
1366
1519
|
@layer components {
|
|
1367
1520
|
.input {
|
|
@@ -2089,7 +2242,6 @@
|
|
|
2089
2242
|
.dialog {
|
|
2090
2243
|
margin: auto;
|
|
2091
2244
|
flex-direction: column;
|
|
2092
|
-
overflow: hidden;
|
|
2093
2245
|
border-radius: var(--radius-xl);
|
|
2094
2246
|
border-style: var(--tw-border-style);
|
|
2095
2247
|
border-width: 1px;
|
|
@@ -2177,6 +2329,8 @@
|
|
|
2177
2329
|
background-color: var(--color-surface-muted);
|
|
2178
2330
|
padding-inline: calc(var(--spacing) * 5);
|
|
2179
2331
|
padding-block: calc(var(--spacing) * 3);
|
|
2332
|
+
border-bottom-left-radius: inherit;
|
|
2333
|
+
border-bottom-right-radius: inherit;
|
|
2180
2334
|
}
|
|
2181
2335
|
.dialog-close {
|
|
2182
2336
|
display: inline-flex;
|
|
@@ -2548,6 +2702,27 @@
|
|
|
2548
2702
|
--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));
|
|
2549
2703
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
2550
2704
|
}
|
|
2705
|
+
@supports (anchor-name: --x) {
|
|
2706
|
+
.menu {
|
|
2707
|
+
anchor-scope: --menu-trigger;
|
|
2708
|
+
}
|
|
2709
|
+
.menu-trigger {
|
|
2710
|
+
anchor-name: --menu-trigger;
|
|
2711
|
+
}
|
|
2712
|
+
.menu-popup {
|
|
2713
|
+
position: fixed;
|
|
2714
|
+
position-anchor: --menu-trigger;
|
|
2715
|
+
top: anchor(bottom);
|
|
2716
|
+
left: anchor(left);
|
|
2717
|
+
position-try-fallbacks: --menu-popup-flip-up;
|
|
2718
|
+
}
|
|
2719
|
+
}
|
|
2720
|
+
@position-try --menu-popup-flip-up {
|
|
2721
|
+
top: auto;
|
|
2722
|
+
bottom: anchor(top);
|
|
2723
|
+
margin-top: 0;
|
|
2724
|
+
margin-bottom: 0.25rem;
|
|
2725
|
+
}
|
|
2551
2726
|
.menu-item {
|
|
2552
2727
|
display: flex;
|
|
2553
2728
|
width: 100%;
|
|
@@ -3070,7 +3245,7 @@
|
|
|
3070
3245
|
position: fixed;
|
|
3071
3246
|
inset: calc(var(--spacing) * 0);
|
|
3072
3247
|
z-index: 40;
|
|
3073
|
-
background-color: color-mix(in srgb, #
|
|
3248
|
+
background-color: color-mix(in srgb, #0f0f0f 40%, transparent);
|
|
3074
3249
|
@supports (color: color-mix(in lab, red, red)) {
|
|
3075
3250
|
background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
|
|
3076
3251
|
}
|