okonomi_ui_kit 0.1.10 → 0.1.11
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.
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: b6b5c9889118d0c98bea77960f48a3ff9fb1fa514c5d4ebd9295efce29b63ab8
|
4
|
+
data.tar.gz: 11b96764a850723bc49e3219357525ef8027325b36877dac95b21cb727d0b336
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 2af055854b937f8e833e13faa2a9499442e0308c8f821dcaf3376c2127b37316320b0984e549e3a0f6a5d38693d4fac019ec13c4b329f2b04ba3a91e4fcc0597
|
7
|
+
data.tar.gz: 84f37782710b0c70b2f395cdd03735d0d0535beb0a1e640ca770b96620d1b14bdd93d382424f460f03d4adb701daf9894cc8a9078378c275e4544eb71f92393e
|
@@ -382,6 +382,9 @@
|
|
382
382
|
.top-0 {
|
383
383
|
top: calc(var(--spacing) * 0);
|
384
384
|
}
|
385
|
+
.top-1 {
|
386
|
+
top: calc(var(--spacing) * 1);
|
387
|
+
}
|
385
388
|
.top-1\/2 {
|
386
389
|
top: calc(1/2 * 100%);
|
387
390
|
}
|
@@ -451,6 +454,24 @@
|
|
451
454
|
max-width: 96rem;
|
452
455
|
}
|
453
456
|
}
|
457
|
+
.-m-4 {
|
458
|
+
margin: calc(var(--spacing) * -4);
|
459
|
+
}
|
460
|
+
.-m-8 {
|
461
|
+
margin: calc(var(--spacing) * -8);
|
462
|
+
}
|
463
|
+
.m-2 {
|
464
|
+
margin: calc(var(--spacing) * 2);
|
465
|
+
}
|
466
|
+
.m-4 {
|
467
|
+
margin: calc(var(--spacing) * 4);
|
468
|
+
}
|
469
|
+
.m-8 {
|
470
|
+
margin: calc(var(--spacing) * 8);
|
471
|
+
}
|
472
|
+
.m-\[1\.5rem\] {
|
473
|
+
margin: 1.5rem;
|
474
|
+
}
|
454
475
|
.-mx-2 {
|
455
476
|
margin-inline: calc(var(--spacing) * -2);
|
456
477
|
}
|
@@ -460,6 +481,15 @@
|
|
460
481
|
.-mx-6 {
|
461
482
|
margin-inline: calc(var(--spacing) * -6);
|
462
483
|
}
|
484
|
+
.-mx-8 {
|
485
|
+
margin-inline: calc(var(--spacing) * -8);
|
486
|
+
}
|
487
|
+
.mx-4 {
|
488
|
+
margin-inline: calc(var(--spacing) * 4);
|
489
|
+
}
|
490
|
+
.mx-8 {
|
491
|
+
margin-inline: calc(var(--spacing) * 8);
|
492
|
+
}
|
463
493
|
.mx-auto {
|
464
494
|
margin-inline: auto;
|
465
495
|
}
|
@@ -469,6 +499,15 @@
|
|
469
499
|
.my-2 {
|
470
500
|
margin-block: calc(var(--spacing) * 2);
|
471
501
|
}
|
502
|
+
.my-4 {
|
503
|
+
margin-block: calc(var(--spacing) * 4);
|
504
|
+
}
|
505
|
+
.my-8 {
|
506
|
+
margin-block: calc(var(--spacing) * 8);
|
507
|
+
}
|
508
|
+
.mt-0 {
|
509
|
+
margin-top: calc(var(--spacing) * 0);
|
510
|
+
}
|
472
511
|
.mt-0\.5 {
|
473
512
|
margin-top: calc(var(--spacing) * 0.5);
|
474
513
|
}
|
@@ -490,6 +529,9 @@
|
|
490
529
|
.mt-6 {
|
491
530
|
margin-top: calc(var(--spacing) * 6);
|
492
531
|
}
|
532
|
+
.mt-8 {
|
533
|
+
margin-top: calc(var(--spacing) * 8);
|
534
|
+
}
|
493
535
|
.mt-auto {
|
494
536
|
margin-top: auto;
|
495
537
|
}
|
@@ -508,6 +550,9 @@
|
|
508
550
|
.mr-3 {
|
509
551
|
margin-right: calc(var(--spacing) * 3);
|
510
552
|
}
|
553
|
+
.mr-8 {
|
554
|
+
margin-right: calc(var(--spacing) * 8);
|
555
|
+
}
|
511
556
|
.mb-1 {
|
512
557
|
margin-bottom: calc(var(--spacing) * 1);
|
513
558
|
}
|
@@ -529,6 +574,12 @@
|
|
529
574
|
.mb-12 {
|
530
575
|
margin-bottom: calc(var(--spacing) * 12);
|
531
576
|
}
|
577
|
+
.-ml-4 {
|
578
|
+
margin-left: calc(var(--spacing) * -4);
|
579
|
+
}
|
580
|
+
.-ml-8 {
|
581
|
+
margin-left: calc(var(--spacing) * -8);
|
582
|
+
}
|
532
583
|
.-ml-px {
|
533
584
|
margin-left: -1px;
|
534
585
|
}
|
@@ -541,6 +592,9 @@
|
|
541
592
|
.ml-4 {
|
542
593
|
margin-left: calc(var(--spacing) * 4);
|
543
594
|
}
|
595
|
+
.ml-8 {
|
596
|
+
margin-left: calc(var(--spacing) * 8);
|
597
|
+
}
|
544
598
|
.ml-auto {
|
545
599
|
margin-left: auto;
|
546
600
|
}
|
@@ -574,6 +628,10 @@
|
|
574
628
|
.aspect-video {
|
575
629
|
aspect-ratio: var(--aspect-video);
|
576
630
|
}
|
631
|
+
.size-3 {
|
632
|
+
width: calc(var(--spacing) * 3);
|
633
|
+
height: calc(var(--spacing) * 3);
|
634
|
+
}
|
577
635
|
.size-3\.5 {
|
578
636
|
width: calc(var(--spacing) * 3.5);
|
579
637
|
height: calc(var(--spacing) * 3.5);
|
@@ -730,6 +788,9 @@
|
|
730
788
|
.max-w-sm {
|
731
789
|
max-width: var(--container-sm);
|
732
790
|
}
|
791
|
+
.min-w-0 {
|
792
|
+
min-width: calc(var(--spacing) * 0);
|
793
|
+
}
|
733
794
|
.min-w-\[20px\] {
|
734
795
|
min-width: 20px;
|
735
796
|
}
|
@@ -739,15 +800,25 @@
|
|
739
800
|
.flex-1 {
|
740
801
|
flex: 1;
|
741
802
|
}
|
803
|
+
.flex-shrink {
|
804
|
+
flex-shrink: 1;
|
805
|
+
}
|
742
806
|
.flex-shrink-0 {
|
743
807
|
flex-shrink: 0;
|
744
808
|
}
|
745
809
|
.shrink-0 {
|
746
810
|
flex-shrink: 0;
|
747
811
|
}
|
812
|
+
.border-collapse {
|
813
|
+
border-collapse: collapse;
|
814
|
+
}
|
748
815
|
.origin-top-right {
|
749
816
|
transform-origin: top right;
|
750
817
|
}
|
818
|
+
.-translate-y-1 {
|
819
|
+
--tw-translate-y: calc(var(--spacing) * -1);
|
820
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
821
|
+
}
|
751
822
|
.-translate-y-1\/2 {
|
752
823
|
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
|
753
824
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
@@ -868,6 +939,23 @@
|
|
868
939
|
.gap-8 {
|
869
940
|
gap: calc(var(--spacing) * 8);
|
870
941
|
}
|
942
|
+
.gap-\[30px\] {
|
943
|
+
gap: 30px;
|
944
|
+
}
|
945
|
+
.-space-y-2 {
|
946
|
+
:where(& > :not(:last-child)) {
|
947
|
+
--tw-space-y-reverse: 0;
|
948
|
+
margin-block-start: calc(calc(var(--spacing) * -2) * var(--tw-space-y-reverse));
|
949
|
+
margin-block-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-y-reverse)));
|
950
|
+
}
|
951
|
+
}
|
952
|
+
.-space-y-8 {
|
953
|
+
:where(& > :not(:last-child)) {
|
954
|
+
--tw-space-y-reverse: 0;
|
955
|
+
margin-block-start: calc(calc(var(--spacing) * -8) * var(--tw-space-y-reverse));
|
956
|
+
margin-block-end: calc(calc(var(--spacing) * -8) * calc(1 - var(--tw-space-y-reverse)));
|
957
|
+
}
|
958
|
+
}
|
871
959
|
.space-y-1 {
|
872
960
|
:where(& > :not(:last-child)) {
|
873
961
|
--tw-space-y-reverse: 0;
|
@@ -923,6 +1011,23 @@
|
|
923
1011
|
.gap-x-4 {
|
924
1012
|
column-gap: calc(var(--spacing) * 4);
|
925
1013
|
}
|
1014
|
+
.gap-x-8 {
|
1015
|
+
column-gap: calc(var(--spacing) * 8);
|
1016
|
+
}
|
1017
|
+
.-space-x-4 {
|
1018
|
+
:where(& > :not(:last-child)) {
|
1019
|
+
--tw-space-x-reverse: 0;
|
1020
|
+
margin-inline-start: calc(calc(var(--spacing) * -4) * var(--tw-space-x-reverse));
|
1021
|
+
margin-inline-end: calc(calc(var(--spacing) * -4) * calc(1 - var(--tw-space-x-reverse)));
|
1022
|
+
}
|
1023
|
+
}
|
1024
|
+
.-space-x-8 {
|
1025
|
+
:where(& > :not(:last-child)) {
|
1026
|
+
--tw-space-x-reverse: 0;
|
1027
|
+
margin-inline-start: calc(calc(var(--spacing) * -8) * var(--tw-space-x-reverse));
|
1028
|
+
margin-inline-end: calc(calc(var(--spacing) * -8) * calc(1 - var(--tw-space-x-reverse)));
|
1029
|
+
}
|
1030
|
+
}
|
926
1031
|
.-space-x-px {
|
927
1032
|
:where(& > :not(:last-child)) {
|
928
1033
|
--tw-space-x-reverse: 0;
|
@@ -951,12 +1056,25 @@
|
|
951
1056
|
margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
|
952
1057
|
}
|
953
1058
|
}
|
1059
|
+
.space-x-8 {
|
1060
|
+
:where(& > :not(:last-child)) {
|
1061
|
+
--tw-space-x-reverse: 0;
|
1062
|
+
margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
|
1063
|
+
margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
|
1064
|
+
}
|
1065
|
+
}
|
1066
|
+
.gap-y-2 {
|
1067
|
+
row-gap: calc(var(--spacing) * 2);
|
1068
|
+
}
|
954
1069
|
.gap-y-5 {
|
955
1070
|
row-gap: calc(var(--spacing) * 5);
|
956
1071
|
}
|
957
1072
|
.gap-y-7 {
|
958
1073
|
row-gap: calc(var(--spacing) * 7);
|
959
1074
|
}
|
1075
|
+
.gap-y-8 {
|
1076
|
+
row-gap: calc(var(--spacing) * 8);
|
1077
|
+
}
|
960
1078
|
.divide-y {
|
961
1079
|
:where(& > :not(:last-child)) {
|
962
1080
|
--tw-divide-y-reverse: 0;
|
@@ -1172,6 +1290,9 @@
|
|
1172
1290
|
.border-yellow-600 {
|
1173
1291
|
border-color: var(--color-yellow-600);
|
1174
1292
|
}
|
1293
|
+
.bg-black {
|
1294
|
+
background-color: var(--color-black);
|
1295
|
+
}
|
1175
1296
|
.bg-black\/50 {
|
1176
1297
|
background-color: color-mix(in srgb, #000 50%, transparent);
|
1177
1298
|
@supports (color: color-mix(in lab, red, red)) {
|
@@ -1319,6 +1440,9 @@
|
|
1319
1440
|
.p-\[1px\] {
|
1320
1441
|
padding: 1px;
|
1321
1442
|
}
|
1443
|
+
.p-\[20px\] {
|
1444
|
+
padding: 20px;
|
1445
|
+
}
|
1322
1446
|
.px-1 {
|
1323
1447
|
padding-inline: calc(var(--spacing) * 1);
|
1324
1448
|
}
|
@@ -1337,6 +1461,12 @@
|
|
1337
1461
|
.px-6 {
|
1338
1462
|
padding-inline: calc(var(--spacing) * 6);
|
1339
1463
|
}
|
1464
|
+
.px-8 {
|
1465
|
+
padding-inline: calc(var(--spacing) * 8);
|
1466
|
+
}
|
1467
|
+
.py-0 {
|
1468
|
+
padding-block: calc(var(--spacing) * 0);
|
1469
|
+
}
|
1340
1470
|
.py-0\.5 {
|
1341
1471
|
padding-block: calc(var(--spacing) * 0.5);
|
1342
1472
|
}
|
@@ -1373,12 +1503,24 @@
|
|
1373
1503
|
.pt-5 {
|
1374
1504
|
padding-top: calc(var(--spacing) * 5);
|
1375
1505
|
}
|
1506
|
+
.pt-6 {
|
1507
|
+
padding-top: calc(var(--spacing) * 6);
|
1508
|
+
}
|
1509
|
+
.pt-8 {
|
1510
|
+
padding-top: calc(var(--spacing) * 8);
|
1511
|
+
}
|
1512
|
+
.pr-2 {
|
1513
|
+
padding-right: calc(var(--spacing) * 2);
|
1514
|
+
}
|
1376
1515
|
.pr-3 {
|
1377
1516
|
padding-right: calc(var(--spacing) * 3);
|
1378
1517
|
}
|
1379
1518
|
.pr-4 {
|
1380
1519
|
padding-right: calc(var(--spacing) * 4);
|
1381
1520
|
}
|
1521
|
+
.pr-8 {
|
1522
|
+
padding-right: calc(var(--spacing) * 8);
|
1523
|
+
}
|
1382
1524
|
.pr-10 {
|
1383
1525
|
padding-right: calc(var(--spacing) * 10);
|
1384
1526
|
}
|
@@ -1388,15 +1530,27 @@
|
|
1388
1530
|
.pr-20 {
|
1389
1531
|
padding-right: calc(var(--spacing) * 20);
|
1390
1532
|
}
|
1533
|
+
.pb-1 {
|
1534
|
+
padding-bottom: calc(var(--spacing) * 1);
|
1535
|
+
}
|
1391
1536
|
.pb-4 {
|
1392
1537
|
padding-bottom: calc(var(--spacing) * 4);
|
1393
1538
|
}
|
1539
|
+
.pb-8 {
|
1540
|
+
padding-bottom: calc(var(--spacing) * 8);
|
1541
|
+
}
|
1542
|
+
.pl-2 {
|
1543
|
+
padding-left: calc(var(--spacing) * 2);
|
1544
|
+
}
|
1394
1545
|
.pl-3 {
|
1395
1546
|
padding-left: calc(var(--spacing) * 3);
|
1396
1547
|
}
|
1397
1548
|
.pl-4 {
|
1398
1549
|
padding-left: calc(var(--spacing) * 4);
|
1399
1550
|
}
|
1551
|
+
.pl-8 {
|
1552
|
+
padding-left: calc(var(--spacing) * 8);
|
1553
|
+
}
|
1400
1554
|
.pl-10 {
|
1401
1555
|
padding-left: calc(var(--spacing) * 10);
|
1402
1556
|
}
|
@@ -1722,6 +1876,14 @@
|
|
1722
1876
|
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
1723
1877
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
1724
1878
|
}
|
1879
|
+
.ring-4 {
|
1880
|
+
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
1881
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
1882
|
+
}
|
1883
|
+
.ring-8 {
|
1884
|
+
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
1885
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
1886
|
+
}
|
1725
1887
|
.ring-blue-500 {
|
1726
1888
|
--tw-ring-color: var(--color-blue-500);
|
1727
1889
|
}
|
@@ -1734,16 +1896,37 @@
|
|
1734
1896
|
.ring-gray-300 {
|
1735
1897
|
--tw-ring-color: var(--color-gray-300);
|
1736
1898
|
}
|
1899
|
+
.ring-green-600 {
|
1900
|
+
--tw-ring-color: var(--color-green-600);
|
1901
|
+
}
|
1737
1902
|
.ring-red-400 {
|
1738
1903
|
--tw-ring-color: var(--color-red-400);
|
1739
1904
|
}
|
1740
1905
|
.ring-red-500 {
|
1741
1906
|
--tw-ring-color: var(--color-red-500);
|
1742
1907
|
}
|
1908
|
+
.ring-offset-1 {
|
1909
|
+
--tw-ring-offset-width: 1px;
|
1910
|
+
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
1911
|
+
}
|
1743
1912
|
.ring-offset-2 {
|
1744
1913
|
--tw-ring-offset-width: 2px;
|
1745
1914
|
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
1746
1915
|
}
|
1916
|
+
.ring-offset-4 {
|
1917
|
+
--tw-ring-offset-width: 4px;
|
1918
|
+
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
1919
|
+
}
|
1920
|
+
.ring-offset-8 {
|
1921
|
+
--tw-ring-offset-width: 8px;
|
1922
|
+
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
1923
|
+
}
|
1924
|
+
.ring-offset-blue-500 {
|
1925
|
+
--tw-ring-offset-color: var(--color-blue-500);
|
1926
|
+
}
|
1927
|
+
.ring-offset-red-500 {
|
1928
|
+
--tw-ring-offset-color: var(--color-red-500);
|
1929
|
+
}
|
1747
1930
|
.outline {
|
1748
1931
|
outline-style: var(--tw-outline-style);
|
1749
1932
|
outline-width: 1px;
|
@@ -1828,6 +2011,12 @@
|
|
1828
2011
|
}
|
1829
2012
|
}
|
1830
2013
|
}
|
2014
|
+
.last\:border-0 {
|
2015
|
+
&:last-child {
|
2016
|
+
border-style: var(--tw-border-style);
|
2017
|
+
border-width: 0px;
|
2018
|
+
}
|
2019
|
+
}
|
1831
2020
|
.focus-within\:ring-1 {
|
1832
2021
|
&:focus-within {
|
1833
2022
|
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
@@ -1839,6 +2028,20 @@
|
|
1839
2028
|
--tw-ring-color: var(--color-gray-400);
|
1840
2029
|
}
|
1841
2030
|
}
|
2031
|
+
.hover\:m-2 {
|
2032
|
+
&:hover {
|
2033
|
+
@media (hover: hover) {
|
2034
|
+
margin: calc(var(--spacing) * 2);
|
2035
|
+
}
|
2036
|
+
}
|
2037
|
+
}
|
2038
|
+
.hover\:m-8 {
|
2039
|
+
&:hover {
|
2040
|
+
@media (hover: hover) {
|
2041
|
+
margin: calc(var(--spacing) * 8);
|
2042
|
+
}
|
2043
|
+
}
|
2044
|
+
}
|
1842
2045
|
.hover\:cursor-help {
|
1843
2046
|
&:hover {
|
1844
2047
|
@media (hover: hover) {
|
@@ -2070,6 +2273,41 @@
|
|
2070
2273
|
}
|
2071
2274
|
}
|
2072
2275
|
}
|
2276
|
+
.hover\:p-4 {
|
2277
|
+
&:hover {
|
2278
|
+
@media (hover: hover) {
|
2279
|
+
padding: calc(var(--spacing) * 4);
|
2280
|
+
}
|
2281
|
+
}
|
2282
|
+
}
|
2283
|
+
.hover\:p-8 {
|
2284
|
+
&:hover {
|
2285
|
+
@media (hover: hover) {
|
2286
|
+
padding: calc(var(--spacing) * 8);
|
2287
|
+
}
|
2288
|
+
}
|
2289
|
+
}
|
2290
|
+
.hover\:px-4 {
|
2291
|
+
&:hover {
|
2292
|
+
@media (hover: hover) {
|
2293
|
+
padding-inline: calc(var(--spacing) * 4);
|
2294
|
+
}
|
2295
|
+
}
|
2296
|
+
}
|
2297
|
+
.hover\:px-8 {
|
2298
|
+
&:hover {
|
2299
|
+
@media (hover: hover) {
|
2300
|
+
padding-inline: calc(var(--spacing) * 8);
|
2301
|
+
}
|
2302
|
+
}
|
2303
|
+
}
|
2304
|
+
.hover\:text-blue-500 {
|
2305
|
+
&:hover {
|
2306
|
+
@media (hover: hover) {
|
2307
|
+
color: var(--color-blue-500);
|
2308
|
+
}
|
2309
|
+
}
|
2310
|
+
}
|
2073
2311
|
.hover\:text-blue-800 {
|
2074
2312
|
&:hover {
|
2075
2313
|
@media (hover: hover) {
|
@@ -2178,6 +2416,11 @@
|
|
2178
2416
|
border-color: var(--color-indigo-500);
|
2179
2417
|
}
|
2180
2418
|
}
|
2419
|
+
.focus\:p-8 {
|
2420
|
+
&:focus {
|
2421
|
+
padding: calc(var(--spacing) * 8);
|
2422
|
+
}
|
2423
|
+
}
|
2181
2424
|
.focus\:ring-2 {
|
2182
2425
|
&:focus {
|
2183
2426
|
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
@@ -2444,6 +2687,11 @@
|
|
2444
2687
|
gap: calc(var(--spacing) * 4);
|
2445
2688
|
}
|
2446
2689
|
}
|
2690
|
+
.sm\:gap-8 {
|
2691
|
+
@media (width >= 40rem) {
|
2692
|
+
gap: calc(var(--spacing) * 8);
|
2693
|
+
}
|
2694
|
+
}
|
2447
2695
|
.sm\:p-0 {
|
2448
2696
|
@media (width >= 40rem) {
|
2449
2697
|
padding: calc(var(--spacing) * 0);
|
@@ -76,6 +76,40 @@ module OkonomiUiKit
|
|
76
76
|
[ /^items-(?:start|end|center|baseline|stretch)$/, :align_items ],
|
77
77
|
[ /^justify-(?:start|end|center|between|around|evenly)$/, :justify_content ],
|
78
78
|
|
79
|
+
# Spacing - Padding
|
80
|
+
[ /^p(?:-(?:\d+|px|\[\S+\]))?$/, :padding_all ],
|
81
|
+
[ /^px(?:-(?:\d+|px|\[\S+\]))?$/, :padding_x ],
|
82
|
+
[ /^py(?:-(?:\d+|px|\[\S+\]))?$/, :padding_y ],
|
83
|
+
[ /^pl(?:-(?:\d+|px|\[\S+\]))?$/, :padding_left ],
|
84
|
+
[ /^pr(?:-(?:\d+|px|\[\S+\]))?$/, :padding_right ],
|
85
|
+
[ /^pt(?:-(?:\d+|px|\[\S+\]))?$/, :padding_top ],
|
86
|
+
[ /^pb(?:-(?:\d+|px|\[\S+\]))?$/, :padding_bottom ],
|
87
|
+
|
88
|
+
# Spacing - Margin (including negative margins)
|
89
|
+
[ /^-?m(?:-(?:\d+|px|auto|\[\S+\]))?$/, :margin_all ],
|
90
|
+
[ /^-?mx(?:-(?:\d+|px|auto|\[\S+\]))?$/, :margin_x ],
|
91
|
+
[ /^-?my(?:-(?:\d+|px|auto|\[\S+\]))?$/, :margin_y ],
|
92
|
+
[ /^-?ml(?:-(?:\d+|px|auto|\[\S+\]))?$/, :margin_left ],
|
93
|
+
[ /^-?mr(?:-(?:\d+|px|auto|\[\S+\]))?$/, :margin_right ],
|
94
|
+
[ /^-?mt(?:-(?:\d+|px|auto|\[\S+\]))?$/, :margin_top ],
|
95
|
+
[ /^-?mb(?:-(?:\d+|px|auto|\[\S+\]))?$/, :margin_bottom ],
|
96
|
+
|
97
|
+
# Gap
|
98
|
+
[ /^gap(?:-(?:\d+|px|\[\S+\]))?$/, :gap_all ],
|
99
|
+
[ /^gap-x(?:-(?:\d+|px|\[\S+\]))?$/, :gap_x ],
|
100
|
+
[ /^gap-y(?:-(?:\d+|px|\[\S+\]))?$/, :gap_y ],
|
101
|
+
|
102
|
+
# Space between children
|
103
|
+
[ /^-?space-x(?:-(?:\d+|px|reverse|\[\S+\]))?$/, :space_x ],
|
104
|
+
[ /^-?space-y(?:-(?:\d+|px|reverse|\[\S+\]))?$/, :space_y ],
|
105
|
+
|
106
|
+
# Ring
|
107
|
+
[ /^ring(?:-(?:\d+|inset|\[\S+\]))?$/, :ring_width ],
|
108
|
+
[ /^ring-opacity-(?:\d{1,3}|\[.+\])$/, :ring_opacity ],
|
109
|
+
[ /^ring-(?:inherit|current|transparent|black|white|[a-z]+-(?:\d{2,3}|950)|\[[^\]]+\])$/, :ring_color ],
|
110
|
+
[ /^ring-offset(?:-(?:\d+|\[\S+\]))?$/, :ring_offset_width ],
|
111
|
+
[ /^ring-offset-(?:inherit|current|transparent|black|white|[a-z]+-(?:\d{2,3}|950)|\[[^\]]+\])$/, :ring_offset_color ],
|
112
|
+
|
79
113
|
# Borders
|
80
114
|
[ /^(?:border|border-(?:\d+|\[\S+\]))$/, :border_width_overall ],
|
81
115
|
[ /^border-[trblxy](?:-\d+|\[\S+\])?$/, :border_width_side ],
|