okonomi_ui_kit 0.1.10 → 0.1.12
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 +4 -4
- data/app/assets/builds/okonomi_ui_kit/application.tailwind.css +258 -0
- data/app/helpers/okonomi_ui_kit/components/button_to.rb +1 -1
- data/app/helpers/okonomi_ui_kit/components/navigation.rb +10 -2
- data/app/helpers/okonomi_ui_kit/components/progress_bar.rb +86 -0
- data/app/helpers/okonomi_ui_kit/t_w_merge.rb +34 -0
- data/app/views/okonomi/components/navigation/_link.html.erb +1 -10
- data/app/views/okonomi/components/progress_bar/_progress_bar.html.erb +15 -0
- data/lib/okonomi_ui_kit/version.rb +1 -1
- metadata +4 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 551db2538043fad1c9fd39808d842e59677d1d24e63594062a5a9ef2192c8a4c
|
|
4
|
+
data.tar.gz: ca47522f33cb4bbbb4a41ebefc1f71ae456859f26a619ec1d710675d21f8bfd2
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 101472f2cb7772ae3d003d608350823f66aac3c72af5d83ffe4eb57034d946702d40444b632ac2ab23d1f593cdb075e98b4a228cd5387198533837734fea0d38
|
|
7
|
+
data.tar.gz: 0e9ec912fc8c2c1a4d1dbc867b1b6a991bcb4c18e45a739e3aef92e58978ece45d3e09419cbf4e52898475f1ea00e23d4aeb29ed321336c8a923c5a96afe1557
|
|
@@ -142,6 +142,7 @@
|
|
|
142
142
|
--tracking-wider: 0.05em;
|
|
143
143
|
--leading-tight: 1.25;
|
|
144
144
|
--leading-relaxed: 1.625;
|
|
145
|
+
--radius-xs: 0.125rem;
|
|
145
146
|
--radius-sm: 0.25rem;
|
|
146
147
|
--radius-md: 0.375rem;
|
|
147
148
|
--radius-lg: 0.5rem;
|
|
@@ -382,6 +383,9 @@
|
|
|
382
383
|
.top-0 {
|
|
383
384
|
top: calc(var(--spacing) * 0);
|
|
384
385
|
}
|
|
386
|
+
.top-1 {
|
|
387
|
+
top: calc(var(--spacing) * 1);
|
|
388
|
+
}
|
|
385
389
|
.top-1\/2 {
|
|
386
390
|
top: calc(1/2 * 100%);
|
|
387
391
|
}
|
|
@@ -451,6 +455,24 @@
|
|
|
451
455
|
max-width: 96rem;
|
|
452
456
|
}
|
|
453
457
|
}
|
|
458
|
+
.-m-4 {
|
|
459
|
+
margin: calc(var(--spacing) * -4);
|
|
460
|
+
}
|
|
461
|
+
.-m-8 {
|
|
462
|
+
margin: calc(var(--spacing) * -8);
|
|
463
|
+
}
|
|
464
|
+
.m-2 {
|
|
465
|
+
margin: calc(var(--spacing) * 2);
|
|
466
|
+
}
|
|
467
|
+
.m-4 {
|
|
468
|
+
margin: calc(var(--spacing) * 4);
|
|
469
|
+
}
|
|
470
|
+
.m-8 {
|
|
471
|
+
margin: calc(var(--spacing) * 8);
|
|
472
|
+
}
|
|
473
|
+
.m-\[1\.5rem\] {
|
|
474
|
+
margin: 1.5rem;
|
|
475
|
+
}
|
|
454
476
|
.-mx-2 {
|
|
455
477
|
margin-inline: calc(var(--spacing) * -2);
|
|
456
478
|
}
|
|
@@ -460,6 +482,15 @@
|
|
|
460
482
|
.-mx-6 {
|
|
461
483
|
margin-inline: calc(var(--spacing) * -6);
|
|
462
484
|
}
|
|
485
|
+
.-mx-8 {
|
|
486
|
+
margin-inline: calc(var(--spacing) * -8);
|
|
487
|
+
}
|
|
488
|
+
.mx-4 {
|
|
489
|
+
margin-inline: calc(var(--spacing) * 4);
|
|
490
|
+
}
|
|
491
|
+
.mx-8 {
|
|
492
|
+
margin-inline: calc(var(--spacing) * 8);
|
|
493
|
+
}
|
|
463
494
|
.mx-auto {
|
|
464
495
|
margin-inline: auto;
|
|
465
496
|
}
|
|
@@ -469,6 +500,15 @@
|
|
|
469
500
|
.my-2 {
|
|
470
501
|
margin-block: calc(var(--spacing) * 2);
|
|
471
502
|
}
|
|
503
|
+
.my-4 {
|
|
504
|
+
margin-block: calc(var(--spacing) * 4);
|
|
505
|
+
}
|
|
506
|
+
.my-8 {
|
|
507
|
+
margin-block: calc(var(--spacing) * 8);
|
|
508
|
+
}
|
|
509
|
+
.mt-0 {
|
|
510
|
+
margin-top: calc(var(--spacing) * 0);
|
|
511
|
+
}
|
|
472
512
|
.mt-0\.5 {
|
|
473
513
|
margin-top: calc(var(--spacing) * 0.5);
|
|
474
514
|
}
|
|
@@ -490,6 +530,9 @@
|
|
|
490
530
|
.mt-6 {
|
|
491
531
|
margin-top: calc(var(--spacing) * 6);
|
|
492
532
|
}
|
|
533
|
+
.mt-8 {
|
|
534
|
+
margin-top: calc(var(--spacing) * 8);
|
|
535
|
+
}
|
|
493
536
|
.mt-auto {
|
|
494
537
|
margin-top: auto;
|
|
495
538
|
}
|
|
@@ -508,6 +551,9 @@
|
|
|
508
551
|
.mr-3 {
|
|
509
552
|
margin-right: calc(var(--spacing) * 3);
|
|
510
553
|
}
|
|
554
|
+
.mr-8 {
|
|
555
|
+
margin-right: calc(var(--spacing) * 8);
|
|
556
|
+
}
|
|
511
557
|
.mb-1 {
|
|
512
558
|
margin-bottom: calc(var(--spacing) * 1);
|
|
513
559
|
}
|
|
@@ -529,6 +575,12 @@
|
|
|
529
575
|
.mb-12 {
|
|
530
576
|
margin-bottom: calc(var(--spacing) * 12);
|
|
531
577
|
}
|
|
578
|
+
.-ml-4 {
|
|
579
|
+
margin-left: calc(var(--spacing) * -4);
|
|
580
|
+
}
|
|
581
|
+
.-ml-8 {
|
|
582
|
+
margin-left: calc(var(--spacing) * -8);
|
|
583
|
+
}
|
|
532
584
|
.-ml-px {
|
|
533
585
|
margin-left: -1px;
|
|
534
586
|
}
|
|
@@ -541,6 +593,9 @@
|
|
|
541
593
|
.ml-4 {
|
|
542
594
|
margin-left: calc(var(--spacing) * 4);
|
|
543
595
|
}
|
|
596
|
+
.ml-8 {
|
|
597
|
+
margin-left: calc(var(--spacing) * 8);
|
|
598
|
+
}
|
|
544
599
|
.ml-auto {
|
|
545
600
|
margin-left: auto;
|
|
546
601
|
}
|
|
@@ -574,6 +629,10 @@
|
|
|
574
629
|
.aspect-video {
|
|
575
630
|
aspect-ratio: var(--aspect-video);
|
|
576
631
|
}
|
|
632
|
+
.size-3 {
|
|
633
|
+
width: calc(var(--spacing) * 3);
|
|
634
|
+
height: calc(var(--spacing) * 3);
|
|
635
|
+
}
|
|
577
636
|
.size-3\.5 {
|
|
578
637
|
width: calc(var(--spacing) * 3.5);
|
|
579
638
|
height: calc(var(--spacing) * 3.5);
|
|
@@ -730,6 +789,9 @@
|
|
|
730
789
|
.max-w-sm {
|
|
731
790
|
max-width: var(--container-sm);
|
|
732
791
|
}
|
|
792
|
+
.min-w-0 {
|
|
793
|
+
min-width: calc(var(--spacing) * 0);
|
|
794
|
+
}
|
|
733
795
|
.min-w-\[20px\] {
|
|
734
796
|
min-width: 20px;
|
|
735
797
|
}
|
|
@@ -739,15 +801,25 @@
|
|
|
739
801
|
.flex-1 {
|
|
740
802
|
flex: 1;
|
|
741
803
|
}
|
|
804
|
+
.flex-shrink {
|
|
805
|
+
flex-shrink: 1;
|
|
806
|
+
}
|
|
742
807
|
.flex-shrink-0 {
|
|
743
808
|
flex-shrink: 0;
|
|
744
809
|
}
|
|
745
810
|
.shrink-0 {
|
|
746
811
|
flex-shrink: 0;
|
|
747
812
|
}
|
|
813
|
+
.border-collapse {
|
|
814
|
+
border-collapse: collapse;
|
|
815
|
+
}
|
|
748
816
|
.origin-top-right {
|
|
749
817
|
transform-origin: top right;
|
|
750
818
|
}
|
|
819
|
+
.-translate-y-1 {
|
|
820
|
+
--tw-translate-y: calc(var(--spacing) * -1);
|
|
821
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
822
|
+
}
|
|
751
823
|
.-translate-y-1\/2 {
|
|
752
824
|
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
|
|
753
825
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
@@ -868,6 +940,23 @@
|
|
|
868
940
|
.gap-8 {
|
|
869
941
|
gap: calc(var(--spacing) * 8);
|
|
870
942
|
}
|
|
943
|
+
.gap-\[30px\] {
|
|
944
|
+
gap: 30px;
|
|
945
|
+
}
|
|
946
|
+
.-space-y-2 {
|
|
947
|
+
:where(& > :not(:last-child)) {
|
|
948
|
+
--tw-space-y-reverse: 0;
|
|
949
|
+
margin-block-start: calc(calc(var(--spacing) * -2) * var(--tw-space-y-reverse));
|
|
950
|
+
margin-block-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-y-reverse)));
|
|
951
|
+
}
|
|
952
|
+
}
|
|
953
|
+
.-space-y-8 {
|
|
954
|
+
:where(& > :not(:last-child)) {
|
|
955
|
+
--tw-space-y-reverse: 0;
|
|
956
|
+
margin-block-start: calc(calc(var(--spacing) * -8) * var(--tw-space-y-reverse));
|
|
957
|
+
margin-block-end: calc(calc(var(--spacing) * -8) * calc(1 - var(--tw-space-y-reverse)));
|
|
958
|
+
}
|
|
959
|
+
}
|
|
871
960
|
.space-y-1 {
|
|
872
961
|
:where(& > :not(:last-child)) {
|
|
873
962
|
--tw-space-y-reverse: 0;
|
|
@@ -923,6 +1012,23 @@
|
|
|
923
1012
|
.gap-x-4 {
|
|
924
1013
|
column-gap: calc(var(--spacing) * 4);
|
|
925
1014
|
}
|
|
1015
|
+
.gap-x-8 {
|
|
1016
|
+
column-gap: calc(var(--spacing) * 8);
|
|
1017
|
+
}
|
|
1018
|
+
.-space-x-4 {
|
|
1019
|
+
:where(& > :not(:last-child)) {
|
|
1020
|
+
--tw-space-x-reverse: 0;
|
|
1021
|
+
margin-inline-start: calc(calc(var(--spacing) * -4) * var(--tw-space-x-reverse));
|
|
1022
|
+
margin-inline-end: calc(calc(var(--spacing) * -4) * calc(1 - var(--tw-space-x-reverse)));
|
|
1023
|
+
}
|
|
1024
|
+
}
|
|
1025
|
+
.-space-x-8 {
|
|
1026
|
+
:where(& > :not(:last-child)) {
|
|
1027
|
+
--tw-space-x-reverse: 0;
|
|
1028
|
+
margin-inline-start: calc(calc(var(--spacing) * -8) * var(--tw-space-x-reverse));
|
|
1029
|
+
margin-inline-end: calc(calc(var(--spacing) * -8) * calc(1 - var(--tw-space-x-reverse)));
|
|
1030
|
+
}
|
|
1031
|
+
}
|
|
926
1032
|
.-space-x-px {
|
|
927
1033
|
:where(& > :not(:last-child)) {
|
|
928
1034
|
--tw-space-x-reverse: 0;
|
|
@@ -951,12 +1057,25 @@
|
|
|
951
1057
|
margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
|
|
952
1058
|
}
|
|
953
1059
|
}
|
|
1060
|
+
.space-x-8 {
|
|
1061
|
+
:where(& > :not(:last-child)) {
|
|
1062
|
+
--tw-space-x-reverse: 0;
|
|
1063
|
+
margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
|
|
1064
|
+
margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
|
|
1065
|
+
}
|
|
1066
|
+
}
|
|
1067
|
+
.gap-y-2 {
|
|
1068
|
+
row-gap: calc(var(--spacing) * 2);
|
|
1069
|
+
}
|
|
954
1070
|
.gap-y-5 {
|
|
955
1071
|
row-gap: calc(var(--spacing) * 5);
|
|
956
1072
|
}
|
|
957
1073
|
.gap-y-7 {
|
|
958
1074
|
row-gap: calc(var(--spacing) * 7);
|
|
959
1075
|
}
|
|
1076
|
+
.gap-y-8 {
|
|
1077
|
+
row-gap: calc(var(--spacing) * 8);
|
|
1078
|
+
}
|
|
960
1079
|
.divide-y {
|
|
961
1080
|
:where(& > :not(:last-child)) {
|
|
962
1081
|
--tw-divide-y-reverse: 0;
|
|
@@ -1016,6 +1135,9 @@
|
|
|
1016
1135
|
.rounded-xl {
|
|
1017
1136
|
border-radius: var(--radius-xl);
|
|
1018
1137
|
}
|
|
1138
|
+
.rounded-xs {
|
|
1139
|
+
border-radius: var(--radius-xs);
|
|
1140
|
+
}
|
|
1019
1141
|
.rounded-l-md {
|
|
1020
1142
|
border-top-left-radius: var(--radius-md);
|
|
1021
1143
|
border-bottom-left-radius: var(--radius-md);
|
|
@@ -1172,6 +1294,9 @@
|
|
|
1172
1294
|
.border-yellow-600 {
|
|
1173
1295
|
border-color: var(--color-yellow-600);
|
|
1174
1296
|
}
|
|
1297
|
+
.bg-black {
|
|
1298
|
+
background-color: var(--color-black);
|
|
1299
|
+
}
|
|
1175
1300
|
.bg-black\/50 {
|
|
1176
1301
|
background-color: color-mix(in srgb, #000 50%, transparent);
|
|
1177
1302
|
@supports (color: color-mix(in lab, red, red)) {
|
|
@@ -1226,6 +1351,9 @@
|
|
|
1226
1351
|
background-color: color-mix(in oklab, var(--color-gray-500) 75%, transparent);
|
|
1227
1352
|
}
|
|
1228
1353
|
}
|
|
1354
|
+
.bg-gray-600 {
|
|
1355
|
+
background-color: var(--color-gray-600);
|
|
1356
|
+
}
|
|
1229
1357
|
.bg-gray-900 {
|
|
1230
1358
|
background-color: var(--color-gray-900);
|
|
1231
1359
|
}
|
|
@@ -1319,6 +1447,9 @@
|
|
|
1319
1447
|
.p-\[1px\] {
|
|
1320
1448
|
padding: 1px;
|
|
1321
1449
|
}
|
|
1450
|
+
.p-\[20px\] {
|
|
1451
|
+
padding: 20px;
|
|
1452
|
+
}
|
|
1322
1453
|
.px-1 {
|
|
1323
1454
|
padding-inline: calc(var(--spacing) * 1);
|
|
1324
1455
|
}
|
|
@@ -1337,6 +1468,12 @@
|
|
|
1337
1468
|
.px-6 {
|
|
1338
1469
|
padding-inline: calc(var(--spacing) * 6);
|
|
1339
1470
|
}
|
|
1471
|
+
.px-8 {
|
|
1472
|
+
padding-inline: calc(var(--spacing) * 8);
|
|
1473
|
+
}
|
|
1474
|
+
.py-0 {
|
|
1475
|
+
padding-block: calc(var(--spacing) * 0);
|
|
1476
|
+
}
|
|
1340
1477
|
.py-0\.5 {
|
|
1341
1478
|
padding-block: calc(var(--spacing) * 0.5);
|
|
1342
1479
|
}
|
|
@@ -1373,12 +1510,24 @@
|
|
|
1373
1510
|
.pt-5 {
|
|
1374
1511
|
padding-top: calc(var(--spacing) * 5);
|
|
1375
1512
|
}
|
|
1513
|
+
.pt-6 {
|
|
1514
|
+
padding-top: calc(var(--spacing) * 6);
|
|
1515
|
+
}
|
|
1516
|
+
.pt-8 {
|
|
1517
|
+
padding-top: calc(var(--spacing) * 8);
|
|
1518
|
+
}
|
|
1519
|
+
.pr-2 {
|
|
1520
|
+
padding-right: calc(var(--spacing) * 2);
|
|
1521
|
+
}
|
|
1376
1522
|
.pr-3 {
|
|
1377
1523
|
padding-right: calc(var(--spacing) * 3);
|
|
1378
1524
|
}
|
|
1379
1525
|
.pr-4 {
|
|
1380
1526
|
padding-right: calc(var(--spacing) * 4);
|
|
1381
1527
|
}
|
|
1528
|
+
.pr-8 {
|
|
1529
|
+
padding-right: calc(var(--spacing) * 8);
|
|
1530
|
+
}
|
|
1382
1531
|
.pr-10 {
|
|
1383
1532
|
padding-right: calc(var(--spacing) * 10);
|
|
1384
1533
|
}
|
|
@@ -1388,15 +1537,27 @@
|
|
|
1388
1537
|
.pr-20 {
|
|
1389
1538
|
padding-right: calc(var(--spacing) * 20);
|
|
1390
1539
|
}
|
|
1540
|
+
.pb-1 {
|
|
1541
|
+
padding-bottom: calc(var(--spacing) * 1);
|
|
1542
|
+
}
|
|
1391
1543
|
.pb-4 {
|
|
1392
1544
|
padding-bottom: calc(var(--spacing) * 4);
|
|
1393
1545
|
}
|
|
1546
|
+
.pb-8 {
|
|
1547
|
+
padding-bottom: calc(var(--spacing) * 8);
|
|
1548
|
+
}
|
|
1549
|
+
.pl-2 {
|
|
1550
|
+
padding-left: calc(var(--spacing) * 2);
|
|
1551
|
+
}
|
|
1394
1552
|
.pl-3 {
|
|
1395
1553
|
padding-left: calc(var(--spacing) * 3);
|
|
1396
1554
|
}
|
|
1397
1555
|
.pl-4 {
|
|
1398
1556
|
padding-left: calc(var(--spacing) * 4);
|
|
1399
1557
|
}
|
|
1558
|
+
.pl-8 {
|
|
1559
|
+
padding-left: calc(var(--spacing) * 8);
|
|
1560
|
+
}
|
|
1400
1561
|
.pl-10 {
|
|
1401
1562
|
padding-left: calc(var(--spacing) * 10);
|
|
1402
1563
|
}
|
|
@@ -1678,6 +1839,9 @@
|
|
|
1678
1839
|
.opacity-100 {
|
|
1679
1840
|
opacity: 100%;
|
|
1680
1841
|
}
|
|
1842
|
+
.mix-blend-difference {
|
|
1843
|
+
mix-blend-mode: difference;
|
|
1844
|
+
}
|
|
1681
1845
|
.shadow {
|
|
1682
1846
|
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
1683
1847
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
@@ -1722,6 +1886,14 @@
|
|
|
1722
1886
|
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
1723
1887
|
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
1724
1888
|
}
|
|
1889
|
+
.ring-4 {
|
|
1890
|
+
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
1891
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
1892
|
+
}
|
|
1893
|
+
.ring-8 {
|
|
1894
|
+
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
1895
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
1896
|
+
}
|
|
1725
1897
|
.ring-blue-500 {
|
|
1726
1898
|
--tw-ring-color: var(--color-blue-500);
|
|
1727
1899
|
}
|
|
@@ -1734,16 +1906,37 @@
|
|
|
1734
1906
|
.ring-gray-300 {
|
|
1735
1907
|
--tw-ring-color: var(--color-gray-300);
|
|
1736
1908
|
}
|
|
1909
|
+
.ring-green-600 {
|
|
1910
|
+
--tw-ring-color: var(--color-green-600);
|
|
1911
|
+
}
|
|
1737
1912
|
.ring-red-400 {
|
|
1738
1913
|
--tw-ring-color: var(--color-red-400);
|
|
1739
1914
|
}
|
|
1740
1915
|
.ring-red-500 {
|
|
1741
1916
|
--tw-ring-color: var(--color-red-500);
|
|
1742
1917
|
}
|
|
1918
|
+
.ring-offset-1 {
|
|
1919
|
+
--tw-ring-offset-width: 1px;
|
|
1920
|
+
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
1921
|
+
}
|
|
1743
1922
|
.ring-offset-2 {
|
|
1744
1923
|
--tw-ring-offset-width: 2px;
|
|
1745
1924
|
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
1746
1925
|
}
|
|
1926
|
+
.ring-offset-4 {
|
|
1927
|
+
--tw-ring-offset-width: 4px;
|
|
1928
|
+
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
1929
|
+
}
|
|
1930
|
+
.ring-offset-8 {
|
|
1931
|
+
--tw-ring-offset-width: 8px;
|
|
1932
|
+
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
1933
|
+
}
|
|
1934
|
+
.ring-offset-blue-500 {
|
|
1935
|
+
--tw-ring-offset-color: var(--color-blue-500);
|
|
1936
|
+
}
|
|
1937
|
+
.ring-offset-red-500 {
|
|
1938
|
+
--tw-ring-offset-color: var(--color-red-500);
|
|
1939
|
+
}
|
|
1747
1940
|
.outline {
|
|
1748
1941
|
outline-style: var(--tw-outline-style);
|
|
1749
1942
|
outline-width: 1px;
|
|
@@ -1828,6 +2021,12 @@
|
|
|
1828
2021
|
}
|
|
1829
2022
|
}
|
|
1830
2023
|
}
|
|
2024
|
+
.last\:border-0 {
|
|
2025
|
+
&:last-child {
|
|
2026
|
+
border-style: var(--tw-border-style);
|
|
2027
|
+
border-width: 0px;
|
|
2028
|
+
}
|
|
2029
|
+
}
|
|
1831
2030
|
.focus-within\:ring-1 {
|
|
1832
2031
|
&:focus-within {
|
|
1833
2032
|
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
@@ -1839,6 +2038,20 @@
|
|
|
1839
2038
|
--tw-ring-color: var(--color-gray-400);
|
|
1840
2039
|
}
|
|
1841
2040
|
}
|
|
2041
|
+
.hover\:m-2 {
|
|
2042
|
+
&:hover {
|
|
2043
|
+
@media (hover: hover) {
|
|
2044
|
+
margin: calc(var(--spacing) * 2);
|
|
2045
|
+
}
|
|
2046
|
+
}
|
|
2047
|
+
}
|
|
2048
|
+
.hover\:m-8 {
|
|
2049
|
+
&:hover {
|
|
2050
|
+
@media (hover: hover) {
|
|
2051
|
+
margin: calc(var(--spacing) * 8);
|
|
2052
|
+
}
|
|
2053
|
+
}
|
|
2054
|
+
}
|
|
1842
2055
|
.hover\:cursor-help {
|
|
1843
2056
|
&:hover {
|
|
1844
2057
|
@media (hover: hover) {
|
|
@@ -2070,6 +2283,41 @@
|
|
|
2070
2283
|
}
|
|
2071
2284
|
}
|
|
2072
2285
|
}
|
|
2286
|
+
.hover\:p-4 {
|
|
2287
|
+
&:hover {
|
|
2288
|
+
@media (hover: hover) {
|
|
2289
|
+
padding: calc(var(--spacing) * 4);
|
|
2290
|
+
}
|
|
2291
|
+
}
|
|
2292
|
+
}
|
|
2293
|
+
.hover\:p-8 {
|
|
2294
|
+
&:hover {
|
|
2295
|
+
@media (hover: hover) {
|
|
2296
|
+
padding: calc(var(--spacing) * 8);
|
|
2297
|
+
}
|
|
2298
|
+
}
|
|
2299
|
+
}
|
|
2300
|
+
.hover\:px-4 {
|
|
2301
|
+
&:hover {
|
|
2302
|
+
@media (hover: hover) {
|
|
2303
|
+
padding-inline: calc(var(--spacing) * 4);
|
|
2304
|
+
}
|
|
2305
|
+
}
|
|
2306
|
+
}
|
|
2307
|
+
.hover\:px-8 {
|
|
2308
|
+
&:hover {
|
|
2309
|
+
@media (hover: hover) {
|
|
2310
|
+
padding-inline: calc(var(--spacing) * 8);
|
|
2311
|
+
}
|
|
2312
|
+
}
|
|
2313
|
+
}
|
|
2314
|
+
.hover\:text-blue-500 {
|
|
2315
|
+
&:hover {
|
|
2316
|
+
@media (hover: hover) {
|
|
2317
|
+
color: var(--color-blue-500);
|
|
2318
|
+
}
|
|
2319
|
+
}
|
|
2320
|
+
}
|
|
2073
2321
|
.hover\:text-blue-800 {
|
|
2074
2322
|
&:hover {
|
|
2075
2323
|
@media (hover: hover) {
|
|
@@ -2178,6 +2426,11 @@
|
|
|
2178
2426
|
border-color: var(--color-indigo-500);
|
|
2179
2427
|
}
|
|
2180
2428
|
}
|
|
2429
|
+
.focus\:p-8 {
|
|
2430
|
+
&:focus {
|
|
2431
|
+
padding: calc(var(--spacing) * 8);
|
|
2432
|
+
}
|
|
2433
|
+
}
|
|
2181
2434
|
.focus\:ring-2 {
|
|
2182
2435
|
&:focus {
|
|
2183
2436
|
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
@@ -2444,6 +2697,11 @@
|
|
|
2444
2697
|
gap: calc(var(--spacing) * 4);
|
|
2445
2698
|
}
|
|
2446
2699
|
}
|
|
2700
|
+
.sm\:gap-8 {
|
|
2701
|
+
@media (width >= 40rem) {
|
|
2702
|
+
gap: calc(var(--spacing) * 8);
|
|
2703
|
+
}
|
|
2704
|
+
}
|
|
2447
2705
|
.sm\:p-0 {
|
|
2448
2706
|
@media (width >= 40rem) {
|
|
2449
2707
|
padding: calc(var(--spacing) * 0);
|
|
@@ -74,14 +74,22 @@ module OkonomiUiKit
|
|
|
74
74
|
@links = []
|
|
75
75
|
end
|
|
76
76
|
|
|
77
|
-
def nav_link(title, path, icon: nil, initials: nil, exact: false)
|
|
77
|
+
def nav_link(title, path, icon: nil, initials: nil, exact: false, target: nil)
|
|
78
|
+
options = {
|
|
79
|
+
exact: exact,
|
|
80
|
+
class: style(:link, :base),
|
|
81
|
+
active_class: style(:link, :active)
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
options[:target] = target if target.present?
|
|
85
|
+
|
|
78
86
|
@links << view.tag.li do
|
|
79
87
|
view.render "okonomi/components/navigation/link",
|
|
80
88
|
path: path,
|
|
81
89
|
title: title,
|
|
82
90
|
icon: icon,
|
|
83
91
|
initials: initials,
|
|
84
|
-
|
|
92
|
+
options: options,
|
|
85
93
|
style_helper: self
|
|
86
94
|
end
|
|
87
95
|
end
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
module OkonomiUiKit
|
|
2
|
+
module Components
|
|
3
|
+
class ProgressBar < OkonomiUiKit::Component
|
|
4
|
+
def render(value, options = {})
|
|
5
|
+
options = options.with_indifferent_access
|
|
6
|
+
|
|
7
|
+
# Extract options
|
|
8
|
+
color = (options.delete(:color) || :primary).to_sym
|
|
9
|
+
size = (options.delete(:size) || :md).to_sym
|
|
10
|
+
text = options.delete(:text)
|
|
11
|
+
|
|
12
|
+
# Ensure value is between 0 and 1
|
|
13
|
+
value = [ [ value.to_f, 0.0 ].max, 1.0 ].min
|
|
14
|
+
percentage = (value * 100).round
|
|
15
|
+
|
|
16
|
+
# Build classes
|
|
17
|
+
container_classes = tw_merge(
|
|
18
|
+
style(:container, :root),
|
|
19
|
+
style(:container, :sizes, size),
|
|
20
|
+
options.delete(:class)
|
|
21
|
+
)
|
|
22
|
+
|
|
23
|
+
bar_classes = tw_merge(
|
|
24
|
+
style(:bar, :root),
|
|
25
|
+
style(:bar, :colors, color),
|
|
26
|
+
style(:bar, :sizes, size),
|
|
27
|
+
percentage < 100 ? "animate-pulse" : nil
|
|
28
|
+
)
|
|
29
|
+
|
|
30
|
+
text_classes = tw_merge(
|
|
31
|
+
style(:text, :root),
|
|
32
|
+
style(:text, :sizes, size)
|
|
33
|
+
)
|
|
34
|
+
|
|
35
|
+
view.render(
|
|
36
|
+
template_path,
|
|
37
|
+
value: value,
|
|
38
|
+
percentage: percentage,
|
|
39
|
+
text: text,
|
|
40
|
+
container_classes: container_classes,
|
|
41
|
+
bar_classes: bar_classes,
|
|
42
|
+
text_classes: text_classes,
|
|
43
|
+
options: options
|
|
44
|
+
)
|
|
45
|
+
end
|
|
46
|
+
|
|
47
|
+
register_styles :default do
|
|
48
|
+
{
|
|
49
|
+
container: {
|
|
50
|
+
root: "w-full bg-gray-200 rounded-sm overflow-hidden relative",
|
|
51
|
+
sizes: {
|
|
52
|
+
sm: "h-2",
|
|
53
|
+
md: "h-4",
|
|
54
|
+
lg: "h-6"
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
bar: {
|
|
58
|
+
root: "h-full transition-all duration-300 ease-out",
|
|
59
|
+
colors: {
|
|
60
|
+
primary: "bg-primary-600",
|
|
61
|
+
secondary: "bg-secondary-600",
|
|
62
|
+
success: "bg-success-600",
|
|
63
|
+
danger: "bg-danger-600",
|
|
64
|
+
warning: "bg-warning-600",
|
|
65
|
+
info: "bg-info-600",
|
|
66
|
+
default: "bg-gray-600"
|
|
67
|
+
},
|
|
68
|
+
sizes: {
|
|
69
|
+
sm: "h-2",
|
|
70
|
+
md: "h-4",
|
|
71
|
+
lg: "h-6"
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
text: {
|
|
75
|
+
root: "absolute inset-0 flex items-center justify-center font-medium text-white mix-blend-difference",
|
|
76
|
+
sizes: {
|
|
77
|
+
sm: "text-xs",
|
|
78
|
+
md: "text-sm",
|
|
79
|
+
lg: "text-base"
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
end
|
|
84
|
+
end
|
|
85
|
+
end
|
|
86
|
+
end
|
|
@@ -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 ],
|
|
@@ -1,13 +1,4 @@
|
|
|
1
|
-
<%
|
|
2
|
-
# Get the main view context that has access to helpers
|
|
3
|
-
view_context = style_helper.view
|
|
4
|
-
|
|
5
|
-
options = {
|
|
6
|
-
exact: defined?(exact) ? exact : false,
|
|
7
|
-
class: style_helper.style(:link, :base),
|
|
8
|
-
active_class: style_helper.style(:link, :active)
|
|
9
|
-
}
|
|
10
|
-
%>
|
|
1
|
+
<% view_context = style_helper.view %>
|
|
11
2
|
<%= view_context.active_link_to path, options do %>
|
|
12
3
|
<% if defined?(initials) && initials.present? %>
|
|
13
4
|
<span class="<%= style_helper.style(:link, :initials, :base) %>"><%= initials %></span>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<div
|
|
2
|
+
role="progressbar"
|
|
3
|
+
aria-valuenow="<%= percentage %>"
|
|
4
|
+
aria-valuemin="0"
|
|
5
|
+
aria-valuemax="100"
|
|
6
|
+
class="<%= container_classes %>"
|
|
7
|
+
<%= tag.attributes(options) %>
|
|
8
|
+
>
|
|
9
|
+
<div class="<%= bar_classes %>" style="width: <%= percentage %>%"></div>
|
|
10
|
+
<% if text.present? %>
|
|
11
|
+
<div class="<%= text_classes %>">
|
|
12
|
+
<%= text %>
|
|
13
|
+
</div>
|
|
14
|
+
<% end %>
|
|
15
|
+
</div>
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: okonomi_ui_kit
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.12
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Okonomi GmbH
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2025-08-
|
|
11
|
+
date: 2025-08-06 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -1397,6 +1397,7 @@ files:
|
|
|
1397
1397
|
- app/helpers/okonomi_ui_kit/components/page.rb
|
|
1398
1398
|
- app/helpers/okonomi_ui_kit/components/page_header.rb
|
|
1399
1399
|
- app/helpers/okonomi_ui_kit/components/page_section.rb
|
|
1400
|
+
- app/helpers/okonomi_ui_kit/components/progress_bar.rb
|
|
1400
1401
|
- app/helpers/okonomi_ui_kit/components/table.rb
|
|
1401
1402
|
- app/helpers/okonomi_ui_kit/components/typography.rb
|
|
1402
1403
|
- app/helpers/okonomi_ui_kit/config.rb
|
|
@@ -1434,6 +1435,7 @@ files:
|
|
|
1434
1435
|
- app/views/okonomi/components/page/_page.html.erb
|
|
1435
1436
|
- app/views/okonomi/components/page_header/_page_header.html.erb
|
|
1436
1437
|
- app/views/okonomi/components/page_section/_page_section.html.erb
|
|
1438
|
+
- app/views/okonomi/components/progress_bar/_progress_bar.html.erb
|
|
1437
1439
|
- app/views/okonomi/components/table/_table.html.erb
|
|
1438
1440
|
- app/views/okonomi/components/typography/_typography.html.erb
|
|
1439
1441
|
- app/views/okonomi/forms/tailwind/_checkbox_label.html.erb
|