@adaptabletools/adaptable-react-aggrid-cjs 22.0.0-canary.1 → 22.0.0-canary.10

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.
Files changed (13) hide show
  1. package/index.css +1280 -1400
  2. package/index.css.map +1 -1
  3. package/package.json +2 -2
  4. package/src/components/AdaptableOptionsWizardView.d.ts +1 -1
  5. package/src/components/AdaptableOptionsWizardView.js +2 -2
  6. package/src/components/AdaptableProvider.d.ts +1 -1
  7. package/src/components/AdaptableReact.d.ts +1 -1
  8. package/src/components/AdaptableReact.js +2 -2
  9. package/src/components/useAdaptableState.d.ts +1 -1
  10. package/src/index.d.ts +4 -2
  11. package/src/index.js +10 -7
  12. package/themes/dark.css +30 -30
  13. package/themes/light.css +4 -2
package/index.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
2
2
  @layer properties;
3
- @layer adaptable.reset, adaptable.theme, adaptable.components, adaptable.utilities;
3
+ @layer adaptable.reset, adaptable.theming, adaptable.components, adaptable.utilities, adaptable.theme;
4
4
  @layer adaptable.reset {
5
5
  :focus-visible {
6
6
  outline: 2px solid var(--ab-color-focus);
@@ -138,12 +138,15 @@
138
138
  border: 0 solid;
139
139
  }
140
140
  }
141
- @layer adaptable.theme {
141
+ @layer adaptable.theming {
142
142
  :root, :host {
143
143
  --twa-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
144
144
  monospace;
145
145
  --twa-color-red-500: oklch(63.7% 0.237 25.331);
146
+ --twa-color-gray-400: oklch(70.7% 0.022 261.325);
146
147
  --twa-color-white: #fff;
148
+ --twa-text-xs: 0.75rem;
149
+ --twa-text-xs--line-height: calc(1 / 0.75);
147
150
  --twa-text-sm: 0.875rem;
148
151
  --twa-text-sm--line-height: calc(1.25 / 0.875);
149
152
  --twa-text-lg: 1.125rem;
@@ -152,7 +155,6 @@
152
155
  --twa-font-weight-medium: 500;
153
156
  --twa-font-weight-semibold: 600;
154
157
  --twa-font-weight-bold: 700;
155
- --twa-font-weight-extrabold: 800;
156
158
  --twa-leading-normal: 1.5;
157
159
  --twa-leading-relaxed: 1.625;
158
160
  --twa-radius-sm: 0.25rem;
@@ -307,12 +309,12 @@
307
309
  .twa\:mr-3 {
308
310
  margin-right: calc(var(--ab-base-space) * 3);
309
311
  }
312
+ .twa\:mr-4 {
313
+ margin-right: calc(var(--ab-base-space) * 4);
314
+ }
310
315
  .twa\:mr-\[2px\] {
311
316
  margin-right: 2px;
312
317
  }
313
- .twa\:mr-\[20px\] {
314
- margin-right: 20px;
315
- }
316
318
  .twa\:mb-0 {
317
319
  margin-bottom: calc(var(--ab-base-space) * 0);
318
320
  }
@@ -388,6 +390,12 @@
388
390
  width: 100%;
389
391
  height: 100%;
390
392
  }
393
+ .twa\:h-2 {
394
+ height: calc(var(--ab-base-space) * 2);
395
+ }
396
+ .twa\:h-7 {
397
+ height: calc(var(--ab-base-space) * 7);
398
+ }
391
399
  .twa\:h-\[0\.5px\] {
392
400
  height: 0.5px;
393
401
  }
@@ -406,9 +414,6 @@
406
414
  .twa\:h-\[33px\] {
407
415
  height: 33px;
408
416
  }
409
- .twa\:h-\[43px\] {
410
- height: 43px;
411
- }
412
417
  .twa\:h-\[90vh\] {
413
418
  height: 90vh;
414
419
  }
@@ -448,9 +453,6 @@
448
453
  .twa\:min-h-\[20px\] {
449
454
  min-height: 20px;
450
455
  }
451
- .twa\:min-h-\[40px\] {
452
- min-height: 40px;
453
- }
454
456
  .twa\:min-h-\[48px\] {
455
457
  min-height: 48px;
456
458
  }
@@ -475,6 +477,9 @@
475
477
  .twa\:w-1\/3 {
476
478
  width: calc(1/3 * 100%);
477
479
  }
480
+ .twa\:w-20 {
481
+ width: calc(var(--ab-base-space) * 20);
482
+ }
478
483
  .twa\:w-24 {
479
484
  width: calc(var(--ab-base-space) * 24);
480
485
  }
@@ -508,6 +513,9 @@
508
513
  .twa\:w-\[100px\] {
509
514
  width: 100px;
510
515
  }
516
+ .twa\:w-\[140px\] {
517
+ width: 140px;
518
+ }
511
519
  .twa\:w-\[150px\] {
512
520
  width: 150px;
513
521
  }
@@ -517,6 +525,9 @@
517
525
  .twa\:w-\[200px\] {
518
526
  width: 200px;
519
527
  }
528
+ .twa\:w-\[215px\] {
529
+ width: 215px;
530
+ }
520
531
  .twa\:w-\[280px\] {
521
532
  width: 280px;
522
533
  }
@@ -529,9 +540,6 @@
529
540
  .twa\:w-\[600px\] {
530
541
  width: 600px;
531
542
  }
532
- .twa\:w-auto {
533
- width: auto;
534
- }
535
543
  .twa\:w-fit {
536
544
  width: fit-content;
537
545
  }
@@ -559,6 +567,12 @@
559
567
  .twa\:max-w-\[160px\] {
560
568
  max-width: 160px;
561
569
  }
570
+ .twa\:max-w-\[200px\] {
571
+ max-width: 200px;
572
+ }
573
+ .twa\:max-w-\[215px\] {
574
+ max-width: 215px;
575
+ }
562
576
  .twa\:max-w-\[300px\] {
563
577
  max-width: 300px;
564
578
  }
@@ -592,30 +606,33 @@
592
606
  .twa\:min-w-\[10rem\] {
593
607
  min-width: 10rem;
594
608
  }
595
- .twa\:min-w-\[20rem\] {
596
- min-width: 20rem;
597
- }
598
609
  .twa\:min-w-\[20vw\] {
599
610
  min-width: 20vw;
600
611
  }
601
612
  .twa\:min-w-\[40px\] {
602
613
  min-width: 40px;
603
614
  }
615
+ .twa\:min-w-\[44px\] {
616
+ min-width: 44px;
617
+ }
604
618
  .twa\:min-w-\[50\%\] {
605
619
  min-width: 50%;
606
620
  }
621
+ .twa\:min-w-\[50px\] {
622
+ min-width: 50px;
623
+ }
607
624
  .twa\:min-w-\[80px\] {
608
625
  min-width: 80px;
609
626
  }
627
+ .twa\:min-w-\[100px\] {
628
+ min-width: 100px;
629
+ }
610
630
  .twa\:min-w-\[140px\] {
611
631
  min-width: 140px;
612
632
  }
613
633
  .twa\:min-w-\[148px\] {
614
634
  min-width: 148px;
615
635
  }
616
- .twa\:min-w-\[150px\] {
617
- min-width: 150px;
618
- }
619
636
  .twa\:min-w-\[160px\] {
620
637
  min-width: 160px;
621
638
  }
@@ -625,6 +642,9 @@
625
642
  .twa\:min-w-\[200px\] {
626
643
  min-width: 200px;
627
644
  }
645
+ .twa\:min-w-\[215px\] {
646
+ min-width: 215px;
647
+ }
628
648
  .twa\:min-w-\[250px\] {
629
649
  min-width: 250px;
630
650
  }
@@ -634,6 +654,9 @@
634
654
  .twa\:min-w-\[400px\] {
635
655
  min-width: 400px;
636
656
  }
657
+ .twa\:min-w-\[486px\] {
658
+ min-width: 486px;
659
+ }
637
660
  .twa\:min-w-max {
638
661
  min-width: max-content;
639
662
  }
@@ -664,6 +687,9 @@
664
687
  .twa\:flex-none {
665
688
  flex: none;
666
689
  }
690
+ .twa\:flex-shrink-0 {
691
+ flex-shrink: 0;
692
+ }
667
693
  .twa\:basis-\[50\%\] {
668
694
  flex-basis: 50%;
669
695
  }
@@ -730,9 +756,6 @@
730
756
  .twa\:place-items-center {
731
757
  place-items: center;
732
758
  }
733
- .twa\:place-items-stretch {
734
- place-items: stretch;
735
- }
736
759
  .twa\:items-baseline {
737
760
  align-items: baseline;
738
761
  }
@@ -814,6 +837,9 @@
814
837
  .twa\:overflow-y-visible {
815
838
  overflow-y: visible;
816
839
  }
840
+ .twa\:rounded {
841
+ border-radius: 0.25rem;
842
+ }
817
843
  .twa\:rounded-\[100\%\] {
818
844
  border-radius: 100%;
819
845
  }
@@ -865,7 +891,9 @@
865
891
  }
866
892
  .twa\:border-primarydark\/30 {
867
893
  border-color: var(--ab-color-primarydark);
868
- @supports (color: color-mix(in lab, red, red)) {
894
+ }
895
+ @supports (color: color-mix(in lab, red, red)) {
896
+ .twa\:border-primarydark\/30 {
869
897
  border-color: color-mix(in oklab, var(--ab-color-primarydark) 30%, transparent);
870
898
  }
871
899
  }
@@ -874,7 +902,9 @@
874
902
  }
875
903
  .twa\:border-b-text-on-defaultbackground\/20 {
876
904
  border-bottom-color: var(--ab-color-text-on-defaultbackground);
877
- @supports (color: color-mix(in lab, red, red)) {
905
+ }
906
+ @supports (color: color-mix(in lab, red, red)) {
907
+ .twa\:border-b-text-on-defaultbackground\/20 {
878
908
  border-bottom-color: color-mix(in oklab, var(--ab-color-text-on-defaultbackground) 20%, transparent);
879
909
  }
880
910
  }
@@ -928,7 +958,9 @@
928
958
  }
929
959
  .twa\:bg-inputborder\/50 {
930
960
  background-color: var(--ab-color-inputborder);
931
- @supports (color: color-mix(in lab, red, red)) {
961
+ }
962
+ @supports (color: color-mix(in lab, red, red)) {
963
+ .twa\:bg-inputborder\/50 {
932
964
  background-color: color-mix(in oklab, var(--ab-color-inputborder) 50%, transparent);
933
965
  }
934
966
  }
@@ -940,7 +972,9 @@
940
972
  }
941
973
  .twa\:bg-primarydark\/20 {
942
974
  background-color: var(--ab-color-primarydark);
943
- @supports (color: color-mix(in lab, red, red)) {
975
+ }
976
+ @supports (color: color-mix(in lab, red, red)) {
977
+ .twa\:bg-primarydark\/20 {
944
978
  background-color: color-mix(in oklab, var(--ab-color-primarydark) 20%, transparent);
945
979
  }
946
980
  }
@@ -956,6 +990,9 @@
956
990
  .twa\:bg-warn {
957
991
  background-color: var(--ab-color-warn);
958
992
  }
993
+ .twa\:bg-white {
994
+ background-color: var(--twa-color-white);
995
+ }
959
996
  .twa\:fill-current {
960
997
  fill: currentcolor;
961
998
  }
@@ -1028,6 +1065,9 @@
1028
1065
  .twa\:pt-0 {
1029
1066
  padding-top: calc(var(--ab-base-space) * 0);
1030
1067
  }
1068
+ .twa\:pt-1 {
1069
+ padding-top: calc(var(--ab-base-space) * 1);
1070
+ }
1031
1071
  .twa\:pt-2 {
1032
1072
  padding-top: calc(var(--ab-base-space) * 2);
1033
1073
  }
@@ -1103,6 +1143,10 @@
1103
1143
  font-size: var(--twa-text-sm);
1104
1144
  line-height: var(--tw-leading, var(--twa-text-sm--line-height));
1105
1145
  }
1146
+ .twa\:text-xs {
1147
+ font-size: var(--twa-text-xs);
1148
+ line-height: var(--tw-leading, var(--twa-text-xs--line-height));
1149
+ }
1106
1150
  .twa\:text-0 {
1107
1151
  font-size: var(--ab-font-size-0);
1108
1152
  }
@@ -1121,6 +1165,10 @@
1121
1165
  .twa\:text-5 {
1122
1166
  font-size: var(--ab-font-size-5);
1123
1167
  }
1168
+ .twa\:leading-4 {
1169
+ --tw-leading: calc(var(--ab-base-space) * 4);
1170
+ line-height: calc(var(--ab-base-space) * 4);
1171
+ }
1124
1172
  .twa\:leading-none {
1125
1173
  --tw-leading: 1;
1126
1174
  line-height: 1;
@@ -1137,10 +1185,6 @@
1137
1185
  --tw-font-weight: var(--twa-font-weight-bold);
1138
1186
  font-weight: var(--twa-font-weight-bold);
1139
1187
  }
1140
- .twa\:font-extrabold {
1141
- --tw-font-weight: var(--twa-font-weight-extrabold);
1142
- font-weight: var(--twa-font-weight-extrabold);
1143
- }
1144
1188
  .twa\:font-medium {
1145
1189
  --tw-font-weight: var(--twa-font-weight-medium);
1146
1190
  font-weight: var(--twa-font-weight-medium);
@@ -1156,6 +1200,9 @@
1156
1200
  .twa\:text-nowrap {
1157
1201
  text-wrap: nowrap;
1158
1202
  }
1203
+ .twa\:text-ellipsis {
1204
+ text-overflow: ellipsis;
1205
+ }
1159
1206
  .twa\:whitespace-nowrap {
1160
1207
  white-space: nowrap;
1161
1208
  }
@@ -1186,6 +1233,9 @@
1186
1233
  .twa\:text-error {
1187
1234
  color: var(--ab-color-error);
1188
1235
  }
1236
+ .twa\:text-gray-400 {
1237
+ color: var(--twa-color-gray-400);
1238
+ }
1189
1239
  .twa\:text-info {
1190
1240
  color: var(--ab-color-info);
1191
1241
  }
@@ -1302,511 +1352,337 @@
1302
1352
  .twa\:text-shadow-\[0_1px_0_\#fff\] {
1303
1353
  text-shadow: 0 1px 0 var(--tw-text-shadow-color, #fff);
1304
1354
  }
1305
- .twa\:\*\:z-1 {
1306
- :is(& > *) {
1307
- z-index: 1;
1308
- }
1309
- }
1310
- .twa\:\*\:m-0 {
1311
- :is(& > *) {
1312
- margin: calc(var(--ab-base-space) * 0);
1313
- }
1355
+ :is(.twa\:\*\:z-1 > *) {
1356
+ z-index: 1;
1314
1357
  }
1315
- .twa\:\*\:min-h-\[400px\] {
1316
- :is(& > *) {
1317
- min-height: 400px;
1318
- }
1358
+ :is(.twa\:\*\:m-0 > *) {
1359
+ margin: calc(var(--ab-base-space) * 0);
1319
1360
  }
1320
- .twa\:\*\:min-w-\[400px\] {
1321
- :is(& > *) {
1322
- min-width: 400px;
1323
- }
1361
+ :is(.twa\:\*\:min-h-\[400px\] > *) {
1362
+ min-height: 400px;
1324
1363
  }
1325
- .twa\:\*\:flex-1 {
1326
- :is(& > *) {
1327
- flex: 1;
1328
- }
1364
+ :is(.twa\:\*\:min-w-\[400px\] > *) {
1365
+ min-width: 400px;
1329
1366
  }
1330
- .twa\:\*\:rounded-standard {
1331
- :is(& > *) {
1332
- border-radius: var(--ab__border-radius);
1333
- }
1367
+ :is(.twa\:\*\:flex-1 > *) {
1368
+ flex: 1;
1334
1369
  }
1335
- .twa\:\*\:p-1 {
1336
- :is(& > *) {
1337
- padding: calc(var(--ab-base-space) * 1);
1338
- }
1370
+ :is(.twa\:\*\:rounded-standard > *) {
1371
+ border-radius: var(--ab__border-radius);
1339
1372
  }
1340
- .twa\:\*\:p-3 {
1341
- :is(& > *) {
1342
- padding: calc(var(--ab-base-space) * 3);
1343
- }
1373
+ :is(.twa\:\*\:p-1 > *) {
1374
+ padding: calc(var(--ab-base-space) * 1);
1344
1375
  }
1345
- .twa\:\*\:outline-0 {
1346
- :is(& > *) {
1347
- outline-style: var(--tw-outline-style);
1348
- outline-width: 0px;
1349
- }
1376
+ :is(.twa\:\*\:p-3 > *) {
1377
+ padding: calc(var(--ab-base-space) * 3);
1350
1378
  }
1351
- .twa\:not-focus-within\:\[--ab-focus-light__box-shadow\:none\] {
1352
- &:not(*:focus-within) {
1353
- --ab-focus-light__box-shadow: none;
1354
- }
1379
+ :is(.twa\:\*\:outline-0 > *) {
1380
+ outline-style: var(--tw-outline-style);
1381
+ outline-width: 0px;
1355
1382
  }
1356
- .twa\:not-focus-within\:\[--ab-focus__box-shadow\:none\] {
1357
- &:not(*:focus-within) {
1358
- --ab-focus__box-shadow: none;
1359
- }
1383
+ .twa\:not-focus-within\:\[--ab-focus-light__box-shadow\:none\]:not(*:focus-within) {
1384
+ --ab-focus-light__box-shadow: none;
1360
1385
  }
1361
- .twa\:group-focus-within\:shadow-\(--ab-focus__box-shadow\) {
1362
- &:is(:where(.twa\:group):focus-within *) {
1363
- --tw-shadow: var(--ab-focus__box-shadow);
1364
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1365
- }
1386
+ .twa\:not-focus-within\:\[--ab-focus__box-shadow\:none\]:not(*:focus-within) {
1387
+ --ab-focus__box-shadow: none;
1366
1388
  }
1367
- .twa\:before\:pointer-events-none {
1368
- &::before {
1369
- content: var(--tw-content);
1370
- pointer-events: none;
1371
- }
1389
+ .twa\:group-focus-within\:shadow-\(--ab-focus__box-shadow\):is(:where(.twa\:group):focus-within *) {
1390
+ --tw-shadow: var(--ab-focus__box-shadow);
1391
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1372
1392
  }
1373
- .twa\:before\:absolute {
1374
- &::before {
1375
- content: var(--tw-content);
1376
- position: absolute;
1377
- }
1393
+ .twa\:before\:pointer-events-none::before {
1394
+ content: var(--tw-content);
1395
+ pointer-events: none;
1378
1396
  }
1379
- .twa\:before\:inset-0 {
1380
- &::before {
1381
- content: var(--tw-content);
1382
- inset: calc(var(--ab-base-space) * 0);
1383
- }
1397
+ .twa\:before\:absolute::before {
1398
+ content: var(--tw-content);
1399
+ position: absolute;
1384
1400
  }
1385
- .twa\:before\:inset-1 {
1386
- &::before {
1387
- content: var(--tw-content);
1388
- inset: calc(var(--ab-base-space) * 1);
1389
- }
1401
+ .twa\:before\:inset-0::before {
1402
+ content: var(--tw-content);
1403
+ inset: calc(var(--ab-base-space) * 0);
1390
1404
  }
1391
- .twa\:before\:z-0 {
1392
- &::before {
1393
- content: var(--tw-content);
1394
- z-index: 0;
1395
- }
1405
+ .twa\:before\:inset-1::before {
1406
+ content: var(--tw-content);
1407
+ inset: calc(var(--ab-base-space) * 1);
1396
1408
  }
1397
- .twa\:before\:z-20 {
1398
- &::before {
1399
- content: var(--tw-content);
1400
- z-index: 20;
1401
- }
1409
+ .twa\:before\:z-0::before {
1410
+ content: var(--tw-content);
1411
+ z-index: 0;
1402
1412
  }
1403
- .twa\:before\:block {
1404
- &::before {
1405
- content: var(--tw-content);
1406
- display: block;
1407
- }
1413
+ .twa\:before\:z-20::before {
1414
+ content: var(--tw-content);
1415
+ z-index: 20;
1408
1416
  }
1409
- .twa\:before\:size-\[24px\] {
1410
- &::before {
1411
- content: var(--tw-content);
1412
- width: 24px;
1413
- height: 24px;
1414
- }
1417
+ .twa\:before\:block::before {
1418
+ content: var(--tw-content);
1419
+ display: block;
1415
1420
  }
1416
- .twa\:before\:rounded-\[inherit\] {
1417
- &::before {
1418
- content: var(--tw-content);
1419
- border-radius: inherit;
1420
- }
1421
+ .twa\:before\:size-\[24px\]::before {
1422
+ content: var(--tw-content);
1423
+ width: 24px;
1424
+ height: 24px;
1421
1425
  }
1422
- .twa\:before\:rounded-standard {
1423
- &::before {
1424
- content: var(--tw-content);
1425
- border-radius: var(--ab__border-radius);
1426
- }
1426
+ .twa\:before\:rounded-\[inherit\]::before {
1427
+ content: var(--tw-content);
1428
+ border-radius: inherit;
1427
1429
  }
1428
- .twa\:before\:bg-white {
1429
- &::before {
1430
- content: var(--tw-content);
1431
- background-color: var(--twa-color-white);
1432
- }
1430
+ .twa\:before\:rounded-standard::before {
1431
+ content: var(--tw-content);
1432
+ border-radius: var(--ab__border-radius);
1433
1433
  }
1434
- .twa\:before\:opacity-0 {
1435
- &::before {
1436
- content: var(--tw-content);
1437
- opacity: 0%;
1438
- }
1434
+ .twa\:before\:bg-white::before {
1435
+ content: var(--tw-content);
1436
+ background-color: var(--twa-color-white);
1439
1437
  }
1440
- .twa\:before\:shadow-\(--ab-focus-light__box-shadow\) {
1441
- &::before {
1442
- content: var(--tw-content);
1443
- --tw-shadow: var(--ab-focus-light__box-shadow);
1444
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1445
- }
1438
+ .twa\:before\:opacity-0::before {
1439
+ content: var(--tw-content);
1440
+ opacity: 0%;
1446
1441
  }
1447
- .twa\:before\:shadow-\(--ab-focus__box-shadow\) {
1448
- &::before {
1449
- content: var(--tw-content);
1450
- --tw-shadow: var(--ab-focus__box-shadow);
1451
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1452
- }
1442
+ .twa\:before\:shadow-\(--ab-focus-light__box-shadow\)::before {
1443
+ content: var(--tw-content);
1444
+ --tw-shadow: var(--ab-focus-light__box-shadow);
1445
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1453
1446
  }
1454
- .twa\:before\:transition-opacity {
1455
- &::before {
1456
- content: var(--tw-content);
1457
- transition-property: opacity;
1458
- transition-timing-function: var(--tw-ease, var(--twa-default-transition-timing-function));
1459
- transition-duration: var(--tw-duration, var(--twa-default-transition-duration));
1460
- }
1447
+ .twa\:before\:shadow-\(--ab-focus__box-shadow\)::before {
1448
+ content: var(--tw-content);
1449
+ --tw-shadow: var(--ab-focus__box-shadow);
1450
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1461
1451
  }
1462
- .twa\:before\:duration-200 {
1463
- &::before {
1464
- content: var(--tw-content);
1465
- --tw-duration: 200ms;
1466
- transition-duration: 200ms;
1467
- }
1452
+ .twa\:before\:transition-opacity::before {
1453
+ content: var(--tw-content);
1454
+ transition-property: opacity;
1455
+ transition-timing-function: var(--tw-ease, var(--twa-default-transition-timing-function));
1456
+ transition-duration: var(--tw-duration, var(--twa-default-transition-duration));
1468
1457
  }
1469
- .twa\:before\:content-\[\"\"\] {
1470
- &::before {
1471
- --tw-content: "";
1472
- content: var(--tw-content);
1473
- }
1458
+ .twa\:before\:duration-200::before {
1459
+ content: var(--tw-content);
1460
+ --tw-duration: 200ms;
1461
+ transition-duration: 200ms;
1474
1462
  }
1475
- .twa\:after\:pointer-events-none {
1476
- &::after {
1477
- content: var(--tw-content);
1478
- pointer-events: none;
1479
- }
1463
+ .twa\:before\:content-\[\"\"\]::before {
1464
+ --tw-content: "";
1465
+ content: var(--tw-content);
1480
1466
  }
1481
- .twa\:after\:absolute {
1482
- &::after {
1483
- content: var(--tw-content);
1484
- position: absolute;
1485
- }
1467
+ .twa\:after\:pointer-events-none::after {
1468
+ content: var(--tw-content);
1469
+ pointer-events: none;
1486
1470
  }
1487
- .twa\:after\:inset-0 {
1488
- &::after {
1489
- content: var(--tw-content);
1490
- inset: calc(var(--ab-base-space) * 0);
1491
- }
1471
+ .twa\:after\:absolute::after {
1472
+ content: var(--tw-content);
1473
+ position: absolute;
1492
1474
  }
1493
- .twa\:after\:rounded-standard {
1494
- &::after {
1495
- content: var(--tw-content);
1496
- border-radius: var(--ab__border-radius);
1497
- }
1475
+ .twa\:after\:inset-0::after {
1476
+ content: var(--tw-content);
1477
+ inset: calc(var(--ab-base-space) * 0);
1498
1478
  }
1499
- .twa\:after\:border-2 {
1500
- &::after {
1501
- content: var(--tw-content);
1502
- border-style: var(--tw-border-style);
1503
- border-width: 2px;
1504
- }
1479
+ .twa\:after\:rounded-standard::after {
1480
+ content: var(--tw-content);
1481
+ border-radius: var(--ab__border-radius);
1505
1482
  }
1506
- .twa\:after\:border-accent {
1507
- &::after {
1508
- content: var(--tw-content);
1509
- border-color: var(--ab-color-accent);
1510
- }
1483
+ .twa\:after\:border-2::after {
1484
+ content: var(--tw-content);
1485
+ border-style: var(--tw-border-style);
1486
+ border-width: 2px;
1511
1487
  }
1512
- .twa\:after\:bg-accent\/15 {
1513
- &::after {
1514
- content: var(--tw-content);
1515
- background-color: var(--ab-color-accent);
1516
- @supports (color: color-mix(in lab, red, red)) {
1517
- background-color: color-mix(in oklab, var(--ab-color-accent) 15%, transparent);
1518
- }
1519
- }
1488
+ .twa\:after\:border-accent::after {
1489
+ content: var(--tw-content);
1490
+ border-color: var(--ab-color-accent);
1520
1491
  }
1521
- .twa\:not-first\:after\:absolute {
1522
- &:not(*:first-child) {
1523
- &::after {
1524
- content: var(--tw-content);
1525
- position: absolute;
1526
- }
1527
- }
1492
+ .twa\:after\:bg-accent\/15::after {
1493
+ content: var(--tw-content);
1494
+ background-color: var(--ab-color-accent);
1528
1495
  }
1529
- .twa\:not-first\:after\:top-1\/2 {
1530
- &:not(*:first-child) {
1531
- &::after {
1532
- content: var(--tw-content);
1533
- top: calc(1/2 * 100%);
1534
- }
1496
+ @supports (color: color-mix(in lab, red, red)) {
1497
+ .twa\:after\:bg-accent\/15::after {
1498
+ background-color: color-mix(in oklab, var(--ab-color-accent) 15%, transparent);
1535
1499
  }
1536
1500
  }
1537
- .twa\:not-first\:after\:-left-px {
1538
- &:not(*:first-child) {
1539
- &::after {
1540
- content: var(--tw-content);
1541
- left: -1px;
1542
- }
1543
- }
1501
+ .twa\:not-first\:after\:absolute:not(*:first-child)::after {
1502
+ content: var(--tw-content);
1503
+ position: absolute;
1544
1504
  }
1545
- .twa\:not-first\:after\:h-\[10px\] {
1546
- &:not(*:first-child) {
1547
- &::after {
1548
- content: var(--tw-content);
1549
- height: 10px;
1550
- }
1551
- }
1505
+ .twa\:not-first\:after\:top-1\/2:not(*:first-child)::after {
1506
+ content: var(--tw-content);
1507
+ top: calc(1/2 * 100%);
1552
1508
  }
1553
- .twa\:not-first\:after\:-translate-y-1\/2 {
1554
- &:not(*:first-child) {
1555
- &::after {
1556
- content: var(--tw-content);
1557
- --tw-translate-y: calc(calc(1/2 * 100%) * -1);
1558
- translate: var(--tw-translate-x) var(--tw-translate-y);
1559
- }
1560
- }
1509
+ .twa\:not-first\:after\:-left-px:not(*:first-child)::after {
1510
+ content: var(--tw-content);
1511
+ left: -1px;
1561
1512
  }
1562
- .twa\:not-first\:after\:border-l-2 {
1563
- &:not(*:first-child) {
1564
- &::after {
1565
- content: var(--tw-content);
1566
- border-left-style: var(--tw-border-style);
1567
- border-left-width: 2px;
1568
- }
1569
- }
1513
+ .twa\:not-first\:after\:h-\[10px\]:not(*:first-child)::after {
1514
+ content: var(--tw-content);
1515
+ height: 10px;
1570
1516
  }
1571
- .twa\:not-first\:after\:border-accent-foreground {
1572
- &:not(*:first-child) {
1573
- &::after {
1574
- content: var(--tw-content);
1575
- border-color: var(--ab-color-accent-foreground);
1576
- }
1577
- }
1517
+ .twa\:not-first\:after\:-translate-y-1\/2:not(*:first-child)::after {
1518
+ content: var(--tw-content);
1519
+ --tw-translate-y: calc(calc(1/2 * 100%) * -1);
1520
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1578
1521
  }
1579
- .twa\:not-first\:after\:content-\[\"\"\] {
1580
- &:not(*:first-child) {
1581
- &::after {
1582
- --tw-content: "";
1583
- content: var(--tw-content);
1584
- }
1585
- }
1522
+ .twa\:not-first\:after\:border-l-2:not(*:first-child)::after {
1523
+ content: var(--tw-content);
1524
+ border-left-style: var(--tw-border-style);
1525
+ border-left-width: 2px;
1586
1526
  }
1587
- .twa\:focus-within\:shadow-\(--ab-focus__box-shadow\) {
1588
- &:focus-within {
1589
- --tw-shadow: var(--ab-focus__box-shadow);
1590
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1591
- }
1527
+ .twa\:not-first\:after\:border-accent-foreground:not(*:first-child)::after {
1528
+ content: var(--tw-content);
1529
+ border-color: var(--ab-color-accent-foreground);
1592
1530
  }
1593
- .twa\:focus-within\:outline-2 {
1594
- &:focus-within {
1595
- outline-style: var(--tw-outline-style);
1596
- outline-width: 2px;
1597
- }
1531
+ .twa\:not-first\:after\:content-\[\"\"\]:not(*:first-child)::after {
1532
+ --tw-content: "";
1533
+ content: var(--tw-content);
1598
1534
  }
1599
- .twa\:focus-within\:outline-offset-1 {
1600
- &:focus-within {
1601
- outline-offset: 1px;
1602
- }
1535
+ .twa\:focus-within\:shadow-\(--ab-focus__box-shadow\):focus-within {
1536
+ --tw-shadow: var(--ab-focus__box-shadow);
1537
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1603
1538
  }
1604
- .twa\:focus-within\:outline-accent {
1605
- &:focus-within {
1606
- outline-color: var(--ab-color-accent);
1607
- }
1539
+ .twa\:focus-within\:outline-2:focus-within {
1540
+ outline-style: var(--tw-outline-style);
1541
+ outline-width: 2px;
1608
1542
  }
1609
- .twa\:\*\:focus-within\:shadow-\(--ab-focus__box-shadow\) {
1610
- :is(& > *) {
1611
- &:focus-within {
1612
- --tw-shadow: var(--ab-focus__box-shadow);
1613
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1614
- }
1615
- }
1543
+ .twa\:focus-within\:outline-offset-1:focus-within {
1544
+ outline-offset: 1px;
1616
1545
  }
1617
- .twa\:\*\:focus-within\:outline-2 {
1618
- :is(& > *) {
1619
- &:focus-within {
1620
- outline-style: var(--tw-outline-style);
1621
- outline-width: 2px;
1622
- }
1623
- }
1546
+ .twa\:focus-within\:outline-accent:focus-within {
1547
+ outline-color: var(--ab-color-accent);
1624
1548
  }
1625
- .twa\:\*\:focus-within\:outline-offset-1 {
1626
- :is(& > *) {
1627
- &:focus-within {
1628
- outline-offset: 1px;
1629
- }
1630
- }
1549
+ :is(.twa\:\*\:focus-within\:shadow-\(--ab-focus__box-shadow\) > *):focus-within {
1550
+ --tw-shadow: var(--ab-focus__box-shadow);
1551
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1631
1552
  }
1632
- .twa\:\*\:focus-within\:outline-accent {
1633
- :is(& > *) {
1634
- &:focus-within {
1635
- outline-color: var(--ab-color-accent);
1636
- }
1637
- }
1553
+ :is(.twa\:\*\:focus-within\:outline-2 > *):focus-within {
1554
+ outline-style: var(--tw-outline-style);
1555
+ outline-width: 2px;
1638
1556
  }
1639
- .twa\:hover\:cursor-pointer {
1640
- &:hover {
1641
- @media (hover: hover) {
1642
- cursor: pointer;
1643
- }
1644
- }
1557
+ :is(.twa\:\*\:focus-within\:outline-offset-1 > *):focus-within {
1558
+ outline-offset: 1px;
1645
1559
  }
1646
- .twa\:hover\:bg-accent {
1647
- &:hover {
1648
- @media (hover: hover) {
1649
- background-color: var(--ab-color-accent);
1650
- }
1651
- }
1560
+ :is(.twa\:\*\:focus-within\:outline-accent > *):focus-within {
1561
+ outline-color: var(--ab-color-accent);
1652
1562
  }
1653
- .twa\:hover\:bg-accent\/90 {
1654
- &:hover {
1655
- @media (hover: hover) {
1656
- background-color: var(--ab-color-accent);
1657
- @supports (color: color-mix(in lab, red, red)) {
1658
- background-color: color-mix(in oklab, var(--ab-color-accent) 90%, transparent);
1659
- }
1660
- }
1563
+ @media (hover: hover) {
1564
+ .twa\:hover\:cursor-pointer:hover {
1565
+ cursor: pointer;
1661
1566
  }
1662
1567
  }
1663
- .twa\:hover\:bg-primary {
1664
- &:hover {
1665
- @media (hover: hover) {
1666
- background-color: var(--ab-color-primary);
1667
- }
1568
+ @media (hover: hover) {
1569
+ .twa\:hover\:bg-accent:hover {
1570
+ background-color: var(--ab-color-accent);
1668
1571
  }
1669
1572
  }
1670
- .twa\:hover\:bg-primarylight {
1671
- &:hover {
1672
- @media (hover: hover) {
1673
- background-color: var(--ab-color-primarylight);
1674
- }
1573
+ @media (hover: hover) {
1574
+ .twa\:hover\:bg-accent\/90:hover {
1575
+ background-color: var(--ab-color-accent);
1675
1576
  }
1676
- }
1677
- .twa\:hover\:text-accent-foreground {
1678
- &:hover {
1679
- @media (hover: hover) {
1680
- color: var(--ab-color-accent-foreground);
1577
+ @supports (color: color-mix(in lab, red, red)) {
1578
+ .twa\:hover\:bg-accent\/90:hover {
1579
+ background-color: color-mix(in oklab, var(--ab-color-accent) 90%, transparent);
1681
1580
  }
1682
1581
  }
1683
1582
  }
1684
- .twa\:hover\:text-text-on-primary {
1685
- &:hover {
1686
- @media (hover: hover) {
1687
- color: var(--ab-color-text-on-primary);
1688
- }
1583
+ @media (hover: hover) {
1584
+ .twa\:hover\:bg-primary:hover {
1585
+ background-color: var(--ab-color-primary);
1689
1586
  }
1690
1587
  }
1691
- .twa\:hover\:opacity-85 {
1692
- &:hover {
1693
- @media (hover: hover) {
1694
- opacity: 85%;
1695
- }
1588
+ @media (hover: hover) {
1589
+ .twa\:hover\:bg-primarylight:hover {
1590
+ background-color: var(--ab-color-primarylight);
1696
1591
  }
1697
1592
  }
1698
- .twa\:hover\:not-disabled\:shadow-\(--ab-cmp-simple-button__hover-box-shadow\) {
1699
- &:hover {
1700
- @media (hover: hover) {
1701
- &:not(*:disabled) {
1702
- --tw-shadow: var(--ab-cmp-simple-button__hover-box-shadow);
1703
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1704
- }
1705
- }
1593
+ @media (hover: hover) {
1594
+ .twa\:hover\:text-accent-foreground:hover {
1595
+ color: var(--ab-color-accent-foreground);
1706
1596
  }
1707
1597
  }
1708
- .twa\:hover\:before\:bg-current {
1709
- &:hover {
1710
- @media (hover: hover) {
1711
- &::before {
1712
- content: var(--tw-content);
1713
- background-color: currentcolor;
1714
- }
1715
- }
1598
+ @media (hover: hover) {
1599
+ .twa\:hover\:text-text-on-primary:hover {
1600
+ color: var(--ab-color-text-on-primary);
1716
1601
  }
1717
1602
  }
1718
- .twa\:hover\:before\:opacity-15 {
1719
- &:hover {
1720
- @media (hover: hover) {
1721
- &::before {
1722
- content: var(--tw-content);
1723
- opacity: 15%;
1724
- }
1725
- }
1603
+ @media (hover: hover) {
1604
+ .twa\:hover\:opacity-85:hover {
1605
+ opacity: 85%;
1726
1606
  }
1727
1607
  }
1728
- .twa\:focus\:shadow-\(--ab-focus__box-shadow\) {
1729
- &:focus {
1730
- --tw-shadow: var(--ab-focus__box-shadow);
1608
+ @media (hover: hover) {
1609
+ .twa\:hover\:not-disabled\:shadow-\(--ab-cmp-simple-button__hover-box-shadow\):hover:not(*:disabled) {
1610
+ --tw-shadow: var(--ab-cmp-simple-button__hover-box-shadow);
1731
1611
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1732
1612
  }
1733
1613
  }
1734
- .twa\:focus\:outline-0 {
1735
- &:focus {
1736
- outline-style: var(--tw-outline-style);
1737
- outline-width: 0px;
1614
+ @media (hover: hover) {
1615
+ .twa\:hover\:before\:bg-current:hover::before {
1616
+ content: var(--tw-content);
1617
+ background-color: currentcolor;
1738
1618
  }
1739
1619
  }
1740
- .twa\:focus\:outline-2 {
1741
- &:focus {
1742
- outline-style: var(--tw-outline-style);
1743
- outline-width: 2px;
1620
+ @media (hover: hover) {
1621
+ .twa\:hover\:before\:opacity-15:hover::before {
1622
+ content: var(--tw-content);
1623
+ opacity: 15%;
1744
1624
  }
1745
1625
  }
1746
- .twa\:focus\:outline-offset-1 {
1747
- &:focus {
1748
- outline-offset: 1px;
1749
- }
1626
+ .twa\:focus\:shadow-\(--ab-focus__box-shadow\):focus {
1627
+ --tw-shadow: var(--ab-focus__box-shadow);
1628
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1750
1629
  }
1751
- .twa\:focus\:outline-accent {
1752
- &:focus {
1753
- outline-color: var(--ab-color-accent);
1754
- }
1630
+ .twa\:focus\:outline-0:focus {
1631
+ outline-style: var(--tw-outline-style);
1632
+ outline-width: 0px;
1755
1633
  }
1756
- .twa\:focus\:outline-none {
1757
- &:focus {
1758
- --tw-outline-style: none;
1759
- outline-style: none;
1760
- }
1634
+ .twa\:focus\:outline-2:focus {
1635
+ outline-style: var(--tw-outline-style);
1636
+ outline-width: 2px;
1761
1637
  }
1762
- .twa\:\*\:data-\[checked\=true\]\:bg-accent {
1763
- :is(& > *) {
1764
- &[data-checked="true"] {
1765
- background-color: var(--ab-color-accent);
1766
- }
1767
- }
1638
+ .twa\:focus\:outline-offset-1:focus {
1639
+ outline-offset: 1px;
1768
1640
  }
1769
- .twa\:\*\:data-\[checked\=true\]\:text-accent-foreground {
1770
- :is(& > *) {
1771
- &[data-checked="true"] {
1772
- color: var(--ab-color-accent-foreground);
1773
- }
1774
- }
1641
+ .twa\:focus\:outline-accent:focus {
1642
+ outline-color: var(--ab-color-accent);
1643
+ }
1644
+ .twa\:focus\:outline-none:focus {
1645
+ --tw-outline-style: none;
1646
+ outline-style: none;
1647
+ }
1648
+ [data-checked="true"]:is(.twa\:\*\:data-\[checked\=true\]\:bg-accent > *) {
1649
+ background-color: var(--ab-color-accent);
1650
+ }
1651
+ [data-checked="true"]:is(.twa\:\*\:data-\[checked\=true\]\:text-accent-foreground > *) {
1652
+ color: var(--ab-color-accent-foreground);
1775
1653
  }
1776
- .twa\:md\:grid-cols-\[1fr_1fr\] {
1777
- @media (width >= 48rem) {
1654
+ @media (width >= 48rem) {
1655
+ .twa\:md\:grid-cols-\[1fr_1fr\] {
1778
1656
  grid-template-columns: 1fr 1fr;
1779
1657
  }
1780
1658
  }
1781
- .twa\:md\:justify-between {
1782
- @media (width >= 48rem) {
1659
+ @media (width >= 48rem) {
1660
+ .twa\:md\:justify-between {
1783
1661
  justify-content: space-between;
1784
1662
  }
1785
1663
  }
1786
- .twa\:md\:gap-3 {
1787
- @media (width >= 48rem) {
1664
+ @media (width >= 48rem) {
1665
+ .twa\:md\:gap-3 {
1788
1666
  gap: calc(var(--ab-base-space) * 3);
1789
1667
  }
1790
1668
  }
1791
- .twa\:lg\:grid {
1792
- @media (width >= 64rem) {
1669
+ @media (width >= 64rem) {
1670
+ .twa\:lg\:grid {
1793
1671
  display: grid;
1794
1672
  }
1795
1673
  }
1796
- .twa\:lg\:flex-row {
1797
- @media (width >= 64rem) {
1674
+ @media (width >= 64rem) {
1675
+ .twa\:lg\:flex-row {
1798
1676
  flex-direction: row;
1799
1677
  }
1800
1678
  }
1801
- .twa\:lg\:gap-3 {
1802
- @media (width >= 64rem) {
1679
+ @media (width >= 64rem) {
1680
+ .twa\:lg\:gap-3 {
1803
1681
  gap: calc(var(--ab-base-space) * 3);
1804
1682
  }
1805
1683
  }
1806
- .twa\:\[\&_svg\]\:align-middle {
1807
- & svg {
1808
- vertical-align: middle;
1809
- }
1684
+ .twa\:\[\&_svg\]\:align-middle svg {
1685
+ vertical-align: middle;
1810
1686
  }
1811
1687
  }
1812
1688
  @layer adaptable.components {
@@ -2281,9 +2157,13 @@
2281
2157
  --infinite-column-header-height: 30px;
2282
2158
  --infinite-grouping-toolbar-reject-background: var(--infinite-grouping-toolbar-background);
2283
2159
  --infinite-grouping-toolbar-active-background: var(--infinite-grouping-toolbar-color);
2284
- @supports (color: color-mix(in lab, red, red)) {
2160
+ }
2161
+ @supports (color: color-mix(in lab, red, red)) {
2162
+ :root {
2285
2163
  --infinite-grouping-toolbar-active-background: color-mix(in srgb, var(--infinite-grouping-toolbar-color), transparent calc(100% - var(--infinite-grouping-toolbar-active-background-alpha) * 100%));
2286
2164
  }
2165
+ }
2166
+ :root {
2287
2167
  --infinite-grouping-toolbar-active-background-alpha: .15;
2288
2168
  --infinite-grouping-toolbar-color: var(--infinite-cell-color);
2289
2169
  --infinite-grouping-toolbar-padding: var(--infinite-space-3);
@@ -2293,9 +2173,13 @@
2293
2173
  --infinite-grouping-toolbar-item-border-radius: var(--infinite-border-radius);
2294
2174
  --infinite-grouping-toolbar-item-active-border: 1px solid var(--infinite-accent-color);
2295
2175
  --infinite-grouping-toolbar-item-active-background: var(--infinite-grouping-toolbar-color);
2296
- @supports (color: color-mix(in lab, red, red)) {
2176
+ }
2177
+ @supports (color: color-mix(in lab, red, red)) {
2178
+ :root {
2297
2179
  --infinite-grouping-toolbar-item-active-background: color-mix(in srgb, var(--infinite-grouping-toolbar-color), transparent calc(100% - var(--infinite-grouping-toolbar-active-background-alpha) * 100%));
2298
2180
  }
2181
+ }
2182
+ :root {
2299
2183
  --infinite-grouping-toolbar-item-active-background-alpha: .15;
2300
2184
  --infinite-active-cell-indicator-inset: var(--infinite-cell-border-width);
2301
2185
  --infinite-cell-border-width: 1px;
@@ -2316,13 +2200,21 @@
2316
2200
  --infinite-active-cell-background-alpha: .25;
2317
2201
  --infinite-active-cell-background-alpha--table-unfocused: .1;
2318
2202
  --infinite-selected-cell-background-default: var(--infinite-selected-cell-background, var(--infinite-active-cell-background, var(--infinite-selected-cell-border-color, var(--infinite-active-cell-border-color, var(--infinite-active-row-border-color, var(--infinite-accent-color))))));
2319
- @supports (color: color-mix(in lab, red, red)) {
2203
+ }
2204
+ @supports (color: color-mix(in lab, red, red)) {
2205
+ :root {
2320
2206
  --infinite-selected-cell-background-default: var(--infinite-selected-cell-background, var(--infinite-active-cell-background, color-mix(in srgb, var(--infinite-selected-cell-border-color, var(--infinite-active-cell-border-color, var(--infinite-active-row-border-color, var(--infinite-accent-color)))), transparent calc(100% - var(--infinite-selected-cell-background-alpha, var(--infinite-active-cell-background-alpha, var(--infinite-active-row-background-alpha))) * 100%))));
2321
2207
  }
2208
+ }
2209
+ :root {
2322
2210
  --infinite-active-cell-background-default: var(--infinite-active-cell-background, var(--infinite-active-cell-border-color, var(--infinite-accent-color)));
2323
- @supports (color: color-mix(in lab, red, red)) {
2211
+ }
2212
+ @supports (color: color-mix(in lab, red, red)) {
2213
+ :root {
2324
2214
  --infinite-active-cell-background-default: var(--infinite-active-cell-background, color-mix(in srgb, var(--infinite-active-cell-border-color, var(--infinite-accent-color)), transparent calc(100% - var(--infinite-active-cell-background-alpha) * 100%)));
2325
2215
  }
2216
+ }
2217
+ :root {
2326
2218
  --infinite-row-odd-background: #f6f6f6;
2327
2219
  --infinite-row-disabled-opacity: .5;
2328
2220
  --infinite-row-disabled-background: #eeeeee;
@@ -2430,9 +2322,13 @@
2430
2322
  --infinite-column-header-height: 30px;
2431
2323
  --infinite-grouping-toolbar-reject-background: var(--infinite-grouping-toolbar-background);
2432
2324
  --infinite-grouping-toolbar-active-background: var(--infinite-grouping-toolbar-color);
2433
- @supports (color: color-mix(in lab, red, red)) {
2325
+ }
2326
+ @supports (color: color-mix(in lab, red, red)) {
2327
+ .infinite-theme-mode--light,.infinite-theme-mode--light:root {
2434
2328
  --infinite-grouping-toolbar-active-background: color-mix(in srgb, var(--infinite-grouping-toolbar-color), transparent calc(100% - var(--infinite-grouping-toolbar-active-background-alpha) * 100%));
2435
2329
  }
2330
+ }
2331
+ .infinite-theme-mode--light,.infinite-theme-mode--light:root {
2436
2332
  --infinite-grouping-toolbar-active-background-alpha: .15;
2437
2333
  --infinite-grouping-toolbar-color: var(--infinite-cell-color);
2438
2334
  --infinite-grouping-toolbar-padding: var(--infinite-space-3);
@@ -2442,9 +2338,13 @@
2442
2338
  --infinite-grouping-toolbar-item-border-radius: var(--infinite-border-radius);
2443
2339
  --infinite-grouping-toolbar-item-active-border: 1px solid var(--infinite-accent-color);
2444
2340
  --infinite-grouping-toolbar-item-active-background: var(--infinite-grouping-toolbar-color);
2445
- @supports (color: color-mix(in lab, red, red)) {
2341
+ }
2342
+ @supports (color: color-mix(in lab, red, red)) {
2343
+ .infinite-theme-mode--light,.infinite-theme-mode--light:root {
2446
2344
  --infinite-grouping-toolbar-item-active-background: color-mix(in srgb, var(--infinite-grouping-toolbar-color), transparent calc(100% - var(--infinite-grouping-toolbar-active-background-alpha) * 100%));
2447
2345
  }
2346
+ }
2347
+ .infinite-theme-mode--light,.infinite-theme-mode--light:root {
2448
2348
  --infinite-grouping-toolbar-item-active-background-alpha: .15;
2449
2349
  --infinite-active-cell-indicator-inset: var(--infinite-cell-border-width);
2450
2350
  --infinite-cell-border-width: 1px;
@@ -2465,13 +2365,21 @@
2465
2365
  --infinite-active-cell-background-alpha: .25;
2466
2366
  --infinite-active-cell-background-alpha--table-unfocused: .1;
2467
2367
  --infinite-selected-cell-background-default: var(--infinite-selected-cell-background, var(--infinite-active-cell-background, var(--infinite-selected-cell-border-color, var(--infinite-active-cell-border-color, var(--infinite-active-row-border-color, var(--infinite-accent-color))))));
2468
- @supports (color: color-mix(in lab, red, red)) {
2368
+ }
2369
+ @supports (color: color-mix(in lab, red, red)) {
2370
+ .infinite-theme-mode--light,.infinite-theme-mode--light:root {
2469
2371
  --infinite-selected-cell-background-default: var(--infinite-selected-cell-background, var(--infinite-active-cell-background, color-mix(in srgb, var(--infinite-selected-cell-border-color, var(--infinite-active-cell-border-color, var(--infinite-active-row-border-color, var(--infinite-accent-color)))), transparent calc(100% - var(--infinite-selected-cell-background-alpha, var(--infinite-active-cell-background-alpha, var(--infinite-active-row-background-alpha))) * 100%))));
2470
2372
  }
2373
+ }
2374
+ .infinite-theme-mode--light,.infinite-theme-mode--light:root {
2471
2375
  --infinite-active-cell-background-default: var(--infinite-active-cell-background, var(--infinite-active-cell-border-color, var(--infinite-accent-color)));
2472
- @supports (color: color-mix(in lab, red, red)) {
2376
+ }
2377
+ @supports (color: color-mix(in lab, red, red)) {
2378
+ .infinite-theme-mode--light,.infinite-theme-mode--light:root {
2473
2379
  --infinite-active-cell-background-default: var(--infinite-active-cell-background, color-mix(in srgb, var(--infinite-active-cell-border-color, var(--infinite-accent-color)), transparent calc(100% - var(--infinite-active-cell-background-alpha) * 100%)));
2474
2380
  }
2381
+ }
2382
+ .infinite-theme-mode--light,.infinite-theme-mode--light:root {
2475
2383
  --infinite-row-odd-background: #f6f6f6;
2476
2384
  --infinite-row-disabled-opacity: .5;
2477
2385
  --infinite-row-disabled-background: #eeeeee;
@@ -2614,9 +2522,13 @@
2614
2522
  --infinite-column-header-height: 30px;
2615
2523
  --infinite-grouping-toolbar-reject-background: var(--infinite-grouping-toolbar-background);
2616
2524
  --infinite-grouping-toolbar-active-background: var(--infinite-grouping-toolbar-color);
2617
- @supports (color: color-mix(in lab, red, red)) {
2618
- --infinite-grouping-toolbar-active-background: color-mix(in srgb, var(--infinite-grouping-toolbar-color), transparent calc(100% - var(--infinite-grouping-toolbar-active-background-alpha) * 100%));
2619
- }
2525
+ }
2526
+ @supports (color: color-mix(in lab, red, red)) {
2527
+ .infinite-theme-name--default:root,.infinite-theme-name--default {
2528
+ --infinite-grouping-toolbar-active-background: color-mix(in srgb, var(--infinite-grouping-toolbar-color), transparent calc(100% - var(--infinite-grouping-toolbar-active-background-alpha) * 100%));
2529
+ }
2530
+ }
2531
+ .infinite-theme-name--default:root,.infinite-theme-name--default {
2620
2532
  --infinite-grouping-toolbar-active-background-alpha: .15;
2621
2533
  --infinite-grouping-toolbar-color: var(--infinite-cell-color);
2622
2534
  --infinite-grouping-toolbar-padding: var(--infinite-space-3);
@@ -2626,9 +2538,13 @@
2626
2538
  --infinite-grouping-toolbar-item-border-radius: var(--infinite-border-radius);
2627
2539
  --infinite-grouping-toolbar-item-active-border: 1px solid var(--infinite-accent-color);
2628
2540
  --infinite-grouping-toolbar-item-active-background: var(--infinite-grouping-toolbar-color);
2629
- @supports (color: color-mix(in lab, red, red)) {
2541
+ }
2542
+ @supports (color: color-mix(in lab, red, red)) {
2543
+ .infinite-theme-name--default:root,.infinite-theme-name--default {
2630
2544
  --infinite-grouping-toolbar-item-active-background: color-mix(in srgb, var(--infinite-grouping-toolbar-color), transparent calc(100% - var(--infinite-grouping-toolbar-active-background-alpha) * 100%));
2631
2545
  }
2546
+ }
2547
+ .infinite-theme-name--default:root,.infinite-theme-name--default {
2632
2548
  --infinite-grouping-toolbar-item-active-background-alpha: .15;
2633
2549
  --infinite-active-cell-indicator-inset: var(--infinite-cell-border-width);
2634
2550
  --infinite-cell-border-width: 1px;
@@ -2649,13 +2565,21 @@
2649
2565
  --infinite-active-cell-background-alpha: .25;
2650
2566
  --infinite-active-cell-background-alpha--table-unfocused: .1;
2651
2567
  --infinite-selected-cell-background-default: var(--infinite-selected-cell-background, var(--infinite-active-cell-background, var(--infinite-selected-cell-border-color, var(--infinite-active-cell-border-color, var(--infinite-active-row-border-color, var(--infinite-accent-color))))));
2652
- @supports (color: color-mix(in lab, red, red)) {
2568
+ }
2569
+ @supports (color: color-mix(in lab, red, red)) {
2570
+ .infinite-theme-name--default:root,.infinite-theme-name--default {
2653
2571
  --infinite-selected-cell-background-default: var(--infinite-selected-cell-background, var(--infinite-active-cell-background, color-mix(in srgb, var(--infinite-selected-cell-border-color, var(--infinite-active-cell-border-color, var(--infinite-active-row-border-color, var(--infinite-accent-color)))), transparent calc(100% - var(--infinite-selected-cell-background-alpha, var(--infinite-active-cell-background-alpha, var(--infinite-active-row-background-alpha))) * 100%))));
2654
2572
  }
2573
+ }
2574
+ .infinite-theme-name--default:root,.infinite-theme-name--default {
2655
2575
  --infinite-active-cell-background-default: var(--infinite-active-cell-background, var(--infinite-active-cell-border-color, var(--infinite-accent-color)));
2656
- @supports (color: color-mix(in lab, red, red)) {
2576
+ }
2577
+ @supports (color: color-mix(in lab, red, red)) {
2578
+ .infinite-theme-name--default:root,.infinite-theme-name--default {
2657
2579
  --infinite-active-cell-background-default: var(--infinite-active-cell-background, color-mix(in srgb, var(--infinite-active-cell-border-color, var(--infinite-accent-color)), transparent calc(100% - var(--infinite-active-cell-background-alpha) * 100%)));
2658
2580
  }
2581
+ }
2582
+ .infinite-theme-name--default:root,.infinite-theme-name--default {
2659
2583
  --infinite-row-odd-background: #f6f6f6;
2660
2584
  --infinite-row-disabled-opacity: .5;
2661
2585
  --infinite-row-disabled-background: #eeeeee;
@@ -2763,9 +2687,13 @@
2763
2687
  --infinite-column-header-height: 30px;
2764
2688
  --infinite-grouping-toolbar-reject-background: var(--infinite-grouping-toolbar-background);
2765
2689
  --infinite-grouping-toolbar-active-background: var(--infinite-grouping-toolbar-color);
2766
- @supports (color: color-mix(in lab, red, red)) {
2690
+ }
2691
+ @supports (color: color-mix(in lab, red, red)) {
2692
+ .infinite-theme-mode--light.infinite-theme-mode--light.infinite-theme-name--default.infinite-theme-name--default,.infinite-theme-mode--light .infinite-theme-name--default,.infinite-theme-mode--light.infinite-theme-mode--light .infinite-theme-name--default,.infinite-theme-name--default .infinite-theme-mode--light,.infinite-theme-name--default .infinite-theme-mode--light.infinite-theme-mode--light {
2767
2693
  --infinite-grouping-toolbar-active-background: color-mix(in srgb, var(--infinite-grouping-toolbar-color), transparent calc(100% - var(--infinite-grouping-toolbar-active-background-alpha) * 100%));
2768
2694
  }
2695
+ }
2696
+ .infinite-theme-mode--light.infinite-theme-mode--light.infinite-theme-name--default.infinite-theme-name--default,.infinite-theme-mode--light .infinite-theme-name--default,.infinite-theme-mode--light.infinite-theme-mode--light .infinite-theme-name--default,.infinite-theme-name--default .infinite-theme-mode--light,.infinite-theme-name--default .infinite-theme-mode--light.infinite-theme-mode--light {
2769
2697
  --infinite-grouping-toolbar-active-background-alpha: .15;
2770
2698
  --infinite-grouping-toolbar-color: var(--infinite-cell-color);
2771
2699
  --infinite-grouping-toolbar-padding: var(--infinite-space-3);
@@ -2775,9 +2703,13 @@
2775
2703
  --infinite-grouping-toolbar-item-border-radius: var(--infinite-border-radius);
2776
2704
  --infinite-grouping-toolbar-item-active-border: 1px solid var(--infinite-accent-color);
2777
2705
  --infinite-grouping-toolbar-item-active-background: var(--infinite-grouping-toolbar-color);
2778
- @supports (color: color-mix(in lab, red, red)) {
2706
+ }
2707
+ @supports (color: color-mix(in lab, red, red)) {
2708
+ .infinite-theme-mode--light.infinite-theme-mode--light.infinite-theme-name--default.infinite-theme-name--default,.infinite-theme-mode--light .infinite-theme-name--default,.infinite-theme-mode--light.infinite-theme-mode--light .infinite-theme-name--default,.infinite-theme-name--default .infinite-theme-mode--light,.infinite-theme-name--default .infinite-theme-mode--light.infinite-theme-mode--light {
2779
2709
  --infinite-grouping-toolbar-item-active-background: color-mix(in srgb, var(--infinite-grouping-toolbar-color), transparent calc(100% - var(--infinite-grouping-toolbar-active-background-alpha) * 100%));
2780
2710
  }
2711
+ }
2712
+ .infinite-theme-mode--light.infinite-theme-mode--light.infinite-theme-name--default.infinite-theme-name--default,.infinite-theme-mode--light .infinite-theme-name--default,.infinite-theme-mode--light.infinite-theme-mode--light .infinite-theme-name--default,.infinite-theme-name--default .infinite-theme-mode--light,.infinite-theme-name--default .infinite-theme-mode--light.infinite-theme-mode--light {
2781
2713
  --infinite-grouping-toolbar-item-active-background-alpha: .15;
2782
2714
  --infinite-active-cell-indicator-inset: var(--infinite-cell-border-width);
2783
2715
  --infinite-cell-border-width: 1px;
@@ -2798,13 +2730,21 @@
2798
2730
  --infinite-active-cell-background-alpha: .25;
2799
2731
  --infinite-active-cell-background-alpha--table-unfocused: .1;
2800
2732
  --infinite-selected-cell-background-default: var(--infinite-selected-cell-background, var(--infinite-active-cell-background, var(--infinite-selected-cell-border-color, var(--infinite-active-cell-border-color, var(--infinite-active-row-border-color, var(--infinite-accent-color))))));
2801
- @supports (color: color-mix(in lab, red, red)) {
2733
+ }
2734
+ @supports (color: color-mix(in lab, red, red)) {
2735
+ .infinite-theme-mode--light.infinite-theme-mode--light.infinite-theme-name--default.infinite-theme-name--default,.infinite-theme-mode--light .infinite-theme-name--default,.infinite-theme-mode--light.infinite-theme-mode--light .infinite-theme-name--default,.infinite-theme-name--default .infinite-theme-mode--light,.infinite-theme-name--default .infinite-theme-mode--light.infinite-theme-mode--light {
2802
2736
  --infinite-selected-cell-background-default: var(--infinite-selected-cell-background, var(--infinite-active-cell-background, color-mix(in srgb, var(--infinite-selected-cell-border-color, var(--infinite-active-cell-border-color, var(--infinite-active-row-border-color, var(--infinite-accent-color)))), transparent calc(100% - var(--infinite-selected-cell-background-alpha, var(--infinite-active-cell-background-alpha, var(--infinite-active-row-background-alpha))) * 100%))));
2803
2737
  }
2738
+ }
2739
+ .infinite-theme-mode--light.infinite-theme-mode--light.infinite-theme-name--default.infinite-theme-name--default,.infinite-theme-mode--light .infinite-theme-name--default,.infinite-theme-mode--light.infinite-theme-mode--light .infinite-theme-name--default,.infinite-theme-name--default .infinite-theme-mode--light,.infinite-theme-name--default .infinite-theme-mode--light.infinite-theme-mode--light {
2804
2740
  --infinite-active-cell-background-default: var(--infinite-active-cell-background, var(--infinite-active-cell-border-color, var(--infinite-accent-color)));
2805
- @supports (color: color-mix(in lab, red, red)) {
2741
+ }
2742
+ @supports (color: color-mix(in lab, red, red)) {
2743
+ .infinite-theme-mode--light.infinite-theme-mode--light.infinite-theme-name--default.infinite-theme-name--default,.infinite-theme-mode--light .infinite-theme-name--default,.infinite-theme-mode--light.infinite-theme-mode--light .infinite-theme-name--default,.infinite-theme-name--default .infinite-theme-mode--light,.infinite-theme-name--default .infinite-theme-mode--light.infinite-theme-mode--light {
2806
2744
  --infinite-active-cell-background-default: var(--infinite-active-cell-background, color-mix(in srgb, var(--infinite-active-cell-border-color, var(--infinite-accent-color)), transparent calc(100% - var(--infinite-active-cell-background-alpha) * 100%)));
2807
2745
  }
2746
+ }
2747
+ .infinite-theme-mode--light.infinite-theme-mode--light.infinite-theme-name--default.infinite-theme-name--default,.infinite-theme-mode--light .infinite-theme-name--default,.infinite-theme-mode--light.infinite-theme-mode--light .infinite-theme-name--default,.infinite-theme-name--default .infinite-theme-mode--light,.infinite-theme-name--default .infinite-theme-mode--light.infinite-theme-mode--light {
2808
2748
  --infinite-row-odd-background: #f6f6f6;
2809
2749
  --infinite-row-disabled-opacity: .5;
2810
2750
  --infinite-row-disabled-background: #eeeeee;
@@ -3501,7 +3441,9 @@
3501
3441
  right: 0;
3502
3442
  border: var(--infinite-active-row-border, var(--infinite-active-row-border-width, var(--infinite-active-cell-border-width)) var(--infinite-active-row-border-style, var(--infinite-active-cell-border-style)) var(--infinite-active-row-border-color, var(--infinite-active-cell-border-color, var(--infinite-accent-color))));
3503
3443
  background: var(--infinite-active-row-background, var(--infinite-active-cell-background, var(--infinite-active-row-border-color, var(--infinite-active-cell-border-color, var(--infinite-accent-color)))));
3504
- @supports (color: color-mix(in lab, red, red)) {
3444
+ }
3445
+ @supports (color: color-mix(in lab, red, red)) {
3446
+ .j26lrx0 {
3505
3447
  background: var(--infinite-active-row-background, var(--infinite-active-cell-background, color-mix(in srgb, var(--infinite-active-row-border-color, var(--infinite-active-cell-border-color, var(--infinite-accent-color))), transparent calc(100% - var(--infinite-active-row-background-alpha, var(--infinite-active-cell-background-alpha)) * 100%))));
3506
3448
  }
3507
3449
  }
@@ -3692,14 +3634,6 @@
3692
3634
  :root {
3693
3635
  --ab-base-space: 4px;
3694
3636
  --ab-base-font-size: 1rem;
3695
- --ab-space-0: 0px;
3696
- --ab-space-1: var(--ab-base-space);
3697
- --ab-space-2: calc(var(--ab-base-space) * 2);
3698
- --ab-space-3: calc(var(--ab-base-space) * 4);
3699
- --ab-space-4: calc(var(--ab-base-space) * 8);
3700
- --ab-space-5: calc(var(--ab-base-space) * 16);
3701
- --ab-space-6: calc(var(--ab-base-space) * 32);
3702
- --ab-space-7: calc(var(--ab-base-space) * 64);
3703
3637
  --ab-font-size-0: calc(var(--ab-base-font-size) * 0.5);
3704
3638
  --ab-font-size-1: calc(var(--ab-base-font-size) * 0.625);
3705
3639
  --ab-font-size-2: calc(var(--ab-base-font-size) * 0.75);
@@ -3710,7 +3644,7 @@
3710
3644
  --ab-font-size-7: calc(var(--ab-base-font-size) * 2.25);
3711
3645
  --ab-input-height: 36px;
3712
3646
  --ab__font-family: inherit;
3713
- --ab__border-radius: var(--ab-space-1);
3647
+ --ab__border-radius: var(--ab-base-space);
3714
3648
  --ab-color-inputborder: var(--ab-color-primarydark);
3715
3649
  --ab-color-inputcolor: var(--ab-color-text-on-primary);
3716
3650
  --ab-color-error: #dc3545;
@@ -3818,15 +3752,15 @@
3818
3752
  --ab-cmp-checkbox--checked__background: var(--ag-background-color);
3819
3753
  --ab-cmp-checkbox__border-color: var(--ab-cmp-checkbox--check__color);
3820
3754
  --ab-cmp-checkbox--check-indeterminate__color: var(--ab-cmp-checkbox__border-color);
3821
- &.ab-CheckBox--indeterminate {
3822
- --ab-cmp-checkbox--check__color: var(
3755
+ }
3756
+ .ab-CheckBox--variant-agGrid.ab-CheckBox--indeterminate {
3757
+ --ab-cmp-checkbox--check__color: var(
3823
3758
  --ag-checkbox-checked-color,
3824
3759
  var(--ag-balham-active-color, #0091ea)
3825
3760
  );
3826
- }
3827
- &.ab-CheckBox--unchecked {
3828
- --ab-cmp-checkbox__border-color: var(--ag-checkbox-unchecked-color);
3829
- }
3761
+ }
3762
+ .ab-CheckBox--variant-agGrid.ab-CheckBox--unchecked {
3763
+ --ab-cmp-checkbox__border-color: var(--ag-checkbox-unchecked-color);
3830
3764
  }
3831
3765
  .ab-QueryBuilder__expression {
3832
3766
  background-color: var(--ab-cmp-query-builder-expression__background);
@@ -3835,23 +3769,23 @@
3835
3769
  }
3836
3770
  .ab-QueryBuilder-predicate-editor {
3837
3771
  position: relative;
3838
- &:before {
3839
- content: '';
3840
- position: absolute;
3841
- top: 20px;
3842
- left: -10px;
3843
- width: 10px;
3844
- height: 0px;
3845
- border-top: var(--ab-cmp-query-builder__border);
3846
- }
3847
- &:after {
3848
- content: '';
3849
- position: absolute;
3850
- top: 1px;
3851
- bottom: 0;
3852
- border-left: var(--ab-cmp-query-builder__border);
3853
- left: -12px;
3854
- }
3772
+ }
3773
+ .ab-QueryBuilder-predicate-editor:before {
3774
+ content: '';
3775
+ position: absolute;
3776
+ top: 20px;
3777
+ left: -10px;
3778
+ width: 10px;
3779
+ height: 0px;
3780
+ border-top: var(--ab-cmp-query-builder__border);
3781
+ }
3782
+ .ab-QueryBuilder-predicate-editor:after {
3783
+ content: '';
3784
+ position: absolute;
3785
+ top: 1px;
3786
+ bottom: 0;
3787
+ border-left: var(--ab-cmp-query-builder__border);
3788
+ left: -12px;
3855
3789
  }
3856
3790
  .ab-QueryBuilder-predicate-editor--child .ab-QueryBuilder-predicate-editor__children-wrapper {
3857
3791
  margin-left: 25px;
@@ -3862,34 +3796,34 @@
3862
3796
  }
3863
3797
  .ab-QueryBuilder-predicate-editor--root {
3864
3798
  padding-left: 20px;
3865
- &:before {
3866
- left: 10px;
3867
- }
3868
- &:after {
3869
- left: 10px;
3870
- top: 20px;
3871
- }
3799
+ }
3800
+ .ab-QueryBuilder-predicate-editor--root:before {
3801
+ left: 10px;
3802
+ }
3803
+ .ab-QueryBuilder-predicate-editor--root:after {
3804
+ left: 10px;
3805
+ top: 20px;
3872
3806
  }
3873
3807
  .ab-QueryBuilder-predicate-editor__root-actions {
3874
3808
  padding-top: 10px;
3875
- &:before {
3876
- content: '';
3877
- display: block;
3878
- position: absolute;
3879
- border-bottom: var(--ab-cmp-query-builder__border);
3880
- bottom: 14px;
3881
- left: 9px;
3882
- height: 0px;
3883
- width: 13px;
3884
- }
3885
- &:after {
3886
- content: '';
3887
- position: absolute;
3888
- border-left: var(--ab-cmp-query-builder__border);
3889
- height: 21px;
3890
- bottom: 16px;
3891
- left: 8px;
3892
- }
3809
+ }
3810
+ .ab-QueryBuilder-predicate-editor__root-actions:before {
3811
+ content: '';
3812
+ display: block;
3813
+ position: absolute;
3814
+ border-bottom: var(--ab-cmp-query-builder__border);
3815
+ bottom: 14px;
3816
+ left: 9px;
3817
+ height: 0px;
3818
+ width: 13px;
3819
+ }
3820
+ .ab-QueryBuilder-predicate-editor__root-actions:after {
3821
+ content: '';
3822
+ position: absolute;
3823
+ border-left: var(--ab-cmp-query-builder__border);
3824
+ height: 21px;
3825
+ bottom: 16px;
3826
+ left: 8px;
3893
3827
  }
3894
3828
  :root {
3895
3829
  --ab-cmp-dropdown__color: var(--ab-color-inputcolor);
@@ -3899,7 +3833,7 @@
3899
3833
  --ab-cmp-dropdown__fill: var(--ab-color-text-on-defaultbackground);
3900
3834
  --ab-cmp-dropdown__font-size: var(--ab-font-size-2);
3901
3835
  --ab-cmp-dropdown__font-family: var(--ab__font-family);
3902
- --ab-cmp-dropdown__padding: var(--ab-space-2);
3836
+ --ab-cmp-dropdown__padding: calc(var(--ab-base-space) * 2);
3903
3837
  }
3904
3838
  :root {
3905
3839
  --ab-cmp-select__font-size: var(--ab-font-size-3);
@@ -3929,7 +3863,7 @@
3929
3863
  :root {
3930
3864
  --ab-cmp-dropdownbutton-list__border: none;
3931
3865
  --ab-cmp-dropdownbutton-list__background: var(--ab-color-primarylight);
3932
- --ab-cmp-dropdownbutton-list-item__padding: var(--ab-space-2);
3866
+ --ab-cmp-dropdownbutton-list-item__padding: calc(var(--ab-base-space) * 2);
3933
3867
  --ab-cmp-dropdownbutton-list-item-hover__background: var(--ab-color-primary);
3934
3868
  --ab-cmp-dropdownbutton-list-item-hover__color: var(--ab-color-text-on-primary);
3935
3869
  --ab-cmp-dropdownbutton-list-item-active__background: var(--ab-color-primarydark);
@@ -3947,7 +3881,7 @@
3947
3881
  --ab-cmp-field-wrap__border-radius: var(--ab-cmp-input__border-radius);
3948
3882
  }
3949
3883
  :root {
3950
- --ab-cmp-input__padding: var(--ab-space-2);
3884
+ --ab-cmp-input__padding: calc(var(--ab-base-space) * 2);
3951
3885
  --ab-cmp-input__color: var(--ab-color-inputcolor);
3952
3886
  --ab-cmp-input__background: var(--ab-color-defaultbackground);
3953
3887
  --ab-cmp-input__border-radius: var(--ab__border-radius);
@@ -3962,7 +3896,7 @@
3962
3896
  --ab-cmp-modal-backdrop__background: var(--ab-color-shadow);
3963
3897
  }
3964
3898
  :root {
3965
- --ab-cmp-tabs__padding: var(--ab-space-2);
3899
+ --ab-cmp-tabs__padding: calc(var(--ab-base-space) * 2);
3966
3900
  --ab-cmp-tabs-strip__background: var(--ab-color-defaultbackground);
3967
3901
  --ab-cmp-tabs-active__background: var(--ab-color-primarylight);
3968
3902
  }
@@ -3974,7 +3908,7 @@
3974
3908
  --ab-cmp-panel__max-height: 80vh;
3975
3909
  --ab-cmp-panel__border: 1px solid var(--ab-color-inputborder);
3976
3910
  --ab-cmp-panel-icon__fill: var(--ab-icon-fill);
3977
- --ab-cmp-panel_header__padding: var(--ab-space-2);
3911
+ --ab-cmp-panel_header__padding: calc(var(--ab-base-space) * 2);
3978
3912
  --ab-cmp-panel_header__color: var(--ab-color-text-on-primary);
3979
3913
  --ab-cmp-panel_header--variant-primary__background: var(--ab-color-accent);
3980
3914
  --ab-cmp-panel_header--variant-primary__color: var(--ab-color-accent-foreground);
@@ -3990,7 +3924,7 @@
3990
3924
  0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
3991
3925
  }
3992
3926
  :root {
3993
- --ab-cmp-textarea__padding: var(--ab-space-1) var(--ab-space-2);
3927
+ --ab-cmp-textarea__padding: var(--ab-base-space) calc(var(--ab-base-space) * 2);
3994
3928
  --ab-cmp-textarea__border-radius: var(--ab__border-radius);
3995
3929
  --ab-cmp-textarea__border: 1px solid var(--ab-color-inputborder);
3996
3930
  --ab-cmp-textarea__color: var(--ab-cmp-input__color);
@@ -4007,8 +3941,8 @@
4007
3941
  --ab-cmp-tooltip__font-size: var(--ab-font-size-2);
4008
3942
  }
4009
3943
  :root {
4010
- --ab-cmp-file-droppable__padding: var(--ab-space-5);
4011
- --ab-cmp-file-droppable__margin: var(--ab-space-1);
3944
+ --ab-cmp-file-droppable__padding: calc(var(--ab-base-space) * 16);
3945
+ --ab-cmp-file-droppable__margin: var(--ab-base-space);
4012
3946
  --ab-cmp-file-droppable__background: var(--ab-color-primary);
4013
3947
  --ab-cmp-file-droppable__color: var(--ab-color-text-on-primary);
4014
3948
  --ab-cmp-file-droppable__outline: 2px dashed var(--ab-cmp-file-droppable__color);
@@ -4075,7 +4009,7 @@
4075
4009
  --ab-cmp-progress-indicator__font-size: var(--ab-font-size-4);
4076
4010
  --ab-cmp-progress-indicator__font-style: italic;
4077
4011
  --ab-cmp-progress-indicator__font-family: var(--ab__font-family);
4078
- --ab-cmp-progress-indicator__padding: var(--ab-space-3);
4012
+ --ab-cmp-progress-indicator__padding: calc(var(--ab-base-space) * 4);
4079
4013
  --ab-cmp-progress-indicator__background: var(--ab-color-primary);
4080
4014
  --ab-cmp-progress-indicator__color: var(--ab-color-text-on-primary);
4081
4015
  }
@@ -4087,17 +4021,17 @@
4087
4021
  --ab-cmp-icon-selector__popup__color: var(--ab-color-inputcolor);
4088
4022
  --ab-cmp-icon-selector__popup__background: var(--ab-color-defaultbackground);
4089
4023
  --ab-cmp-icon-selector__popup__border: 1px solid var(--ab-color-inputborder);
4090
- --ab-cmp-icon-selector__popup__padding: var(--ab-space-2);
4024
+ --ab-cmp-icon-selector__popup__padding: calc(var(--ab-base-space) * 2);
4091
4025
  --ab-cmp-icon-selector__popup__border-radius: var(--ab__border-radius);
4092
4026
  }
4093
4027
  :root {
4094
- --adaptable-quick-search-floating-padding: var(--ab-space-1) var(--ab-space-2);
4028
+ --adaptable-quick-search-floating-padding: var(--ab-base-space) calc(var(--ab-base-space) * 2);
4095
4029
  --adaptable-quick-search-floating-width: 200px;
4096
4030
  }
4097
4031
  :root {
4098
4032
  --ab-cmp-note-popup-background-color: var(--ab-color-defaultbackground);
4099
- --ab-cmp-note-popup-padding: var(--ab-space-4);
4100
- --ab-cmp-note-popup-border-radius: var(--ab-space-2);
4033
+ --ab-cmp-note-popup-padding: calc(var(--ab-base-space) * 8);
4034
+ --ab-cmp-note-popup-border-radius: calc(var(--ab-base-space) * 2);
4101
4035
  --ab-cmp-note-popup-border: 1px solid var(--ab-color-primarydark);
4102
4036
  --ab-cmp-note-popup-min-width: 160px;
4103
4037
  --ab-CellNote-triangle-color: var(--ab-color-accent);
@@ -4111,8 +4045,8 @@
4111
4045
  --ab-cmp-listgroupitem-cell__font-size: var(--ab-font-size-3);
4112
4046
  }
4113
4047
  :root {
4114
- --ab-cmp-wizard__padding: var(--ab-space-5);
4115
- --ab-cmp-wizard__margin: var(--ab-space-1);
4048
+ --ab-cmp-wizard__padding: calc(var(--ab-base-space) * 16);
4049
+ --ab-cmp-wizard__margin: var(--ab-base-space);
4116
4050
  --ab-cmp-wizard__background: var(--ab-color-primary);
4117
4051
  --ab-cmp-wizard__color: var(--ab-color-text-on-primary);
4118
4052
  }
@@ -4129,8 +4063,8 @@
4129
4063
  --ab-cmp-dashboardpanel_header__color: var(--ab-color-text-on-primarydark);
4130
4064
  --ab-cmp-dashboardpanel__fill: var(--ab-color-text-on-primary);
4131
4065
  --ab-cmp-dashboardpanel__color: currentColor;
4132
- --ab-cmp-dashboardpanel_header__padding: var(--ab-space-0);
4133
- --ab-cmp-dashboardpanel_body__padding: var(--ab-space-1);
4066
+ --ab-cmp-dashboardpanel_header__padding: 0px;
4067
+ --ab-cmp-dashboardpanel_body__padding: var(--ab-base-space);
4134
4068
  --ab-cmp-dashboardpanel__border: none;
4135
4069
  }
4136
4070
  :root {
@@ -4176,38 +4110,38 @@
4176
4110
  --ab-cmp-adaptable-popup__height: 90vh;
4177
4111
  --ab-cmp-adaptable-popup__max-height: 1200px;
4178
4112
  --ab-cmp-adaptable-popup__box-shadow: 2px 2px 14px 0px rgb(0 0 0 / 26%);
4179
- --ab-cmp-adaptable-popup-navigation-list__padding: var(--ab-space-1) var(--ab-space-2);
4113
+ --ab-cmp-adaptable-popup-navigation-list__padding: var(--ab-base-space) calc(var(--ab-base-space) * 2);
4180
4114
  --ab-cmp-adaptable-popup-navigation-list__font-size: var(--ab-font-size-3);
4181
- --ab-cmp-adaptable-popup-navigation-list-item__padding: var(--ab-space-0) var(--ab-space-1);
4182
- --ab-cmp-adaptable-popup-navigation-list-item__margin-bottom: var(--ab-space-2) var(--ab-space-2);
4115
+ --ab-cmp-adaptable-popup-navigation-list-item__padding: 0px var(--ab-base-space);
4116
+ --ab-cmp-adaptable-popup-navigation-list-item__margin-bottom: calc(var(--ab-base-space) * 2) calc(var(--ab-base-space) * 2);
4183
4117
  --ab-cmp-adaptable-popup-navigation-list-item-separator__border: 1px solid
4184
4118
  var(--ab-color-primarydark);
4185
- --ab-cmp-adaptable-popup-navigation-list-item-separator__margin: var(--ab-space-2)
4186
- var(--ab-space-2);
4187
- --ab-cmp-adaptable-popup-navigation-list-item-icon__margin-right: var(--ab-space-2);
4119
+ --ab-cmp-adaptable-popup-navigation-list-item-separator__margin: calc(var(--ab-base-space) * 2)
4120
+ calc(var(--ab-base-space) * 2);
4121
+ --ab-cmp-adaptable-popup-navigation-list-item-icon__margin-right: calc(var(--ab-base-space) * 2);
4188
4122
  --ab-cmp-adaptable-popup-panel-title__font-size: var(--ab-font-size-5);
4189
4123
  }
4190
4124
  :root {
4191
4125
  --ab-cmp-adaptable-window-popup__box-shadow: var(--ab-cmp-adaptable-popup__box-shadow);
4192
4126
  }
4193
4127
  :root {
4194
- --ab-cmp-adaptable-object-list-tag__margin-right: var(--ab-space-2);
4195
- --ab-cmp-adaptable-object-list-tag__margin-top: var(--ab-space-2);
4128
+ --ab-cmp-adaptable-object-list-tag__margin-right: calc(var(--ab-base-space) * 2);
4129
+ --ab-cmp-adaptable-object-list-tag__margin-top: calc(var(--ab-base-space) * 2);
4196
4130
  --ab-cmp-adaptable-object-list-item__background-color: var(--ab-color-defaultbackground);
4197
- --ab-cmp-adaptable-object-list-item__padding: var(--ab-space-3) var(--ab-space-3);
4131
+ --ab-cmp-adaptable-object-list-item__padding: calc(var(--ab-base-space) * 4) calc(var(--ab-base-space) * 4);
4198
4132
  --ab-cmp-adaptable-object-list-item-label__width: 130px;
4199
4133
  --ab-cmp-adaptable-object-list-item-tag__padding: 6px 12px;
4200
4134
  --ab-cmp-adaptable-object-compact-list__background: var(--ab-color-primarylight);
4201
- --ab-cmp-adaptable-object-compact-list__padding: var(--ab-space-2);
4135
+ --ab-cmp-adaptable-object-compact-list__padding: calc(var(--ab-base-space) * 2);
4202
4136
  --ab-cmp-adaptable-object-compact-list-item__background: var(--ab-color-defaultbackground);
4203
- --ab-cmp-adaptable-object-compact-list-item__padding: var(--ab-space-1);
4204
- --ab-cmp-adaptable-object-compact-list-item__margin-bottom: var(--ab-space-2);
4205
- --ab-cmp-adaptable-object-compact-list__header__padding: var(--ab-space-2);
4206
- --ab-cmp-adaptable-object-compact-list__header__margin-bottom: var(--ab-space-1);
4137
+ --ab-cmp-adaptable-object-compact-list-item__padding: var(--ab-base-space);
4138
+ --ab-cmp-adaptable-object-compact-list-item__margin-bottom: calc(var(--ab-base-space) * 2);
4139
+ --ab-cmp-adaptable-object-compact-list__header__padding: calc(var(--ab-base-space) * 2);
4140
+ --ab-cmp-adaptable-object-compact-list__header__margin-bottom: var(--ab-base-space);
4207
4141
  --ab-cmp-adaptable-object-compact-list__header__font-size: var(--ab-font-size-4);
4208
4142
  --ab-cmp-adaptable-object-compact-list-item-name__width: 95px;
4209
- --ab-cmp-adaptable-object-compact-list-item-name__padding: var(--ab-space-1);
4210
- --ab-cmp-adaptable-object-compact-list-item-name__margin-right: var(--ab-space-1);
4143
+ --ab-cmp-adaptable-object-compact-list-item-name__padding: var(--ab-base-space);
4144
+ --ab-cmp-adaptable-object-compact-list-item-name__margin-right: var(--ab-base-space);
4211
4145
  --ab-cmp-adaptable-object-compact-list-item-name__font-size: var(--ab-font-size-4);
4212
4146
  }
4213
4147
  :root {
@@ -4221,7 +4155,7 @@
4221
4155
  --ab-cmp-system-status-list-text__font-weight: bold;
4222
4156
  --ab-cmp-system-status-list-text__font-size: var(--ab-font-size-2);
4223
4157
  --ab-cmp-system-status-list-text__color: var(--ab-color-accent-foreground);
4224
- --ab-cmp-system-status-list-text__padding: var(--ab-space-2);
4158
+ --ab-cmp-system-status-list-text__padding: calc(var(--ab-base-space) * 2);
4225
4159
  }
4226
4160
  :root {
4227
4161
  --ab-cmp-dashboard-module-selector-background: var(--ab-color-defaultbackground);
@@ -4231,7 +4165,7 @@
4231
4165
  --ab-cmp-dashboard-pinned-toolbar-border: 1px solid #656565;
4232
4166
  }
4233
4167
  :root {
4234
- --ab-cmp-adaptable-statusbar-sub-panel__padding: var(--ab-space-1) var(--ab-space-2);
4168
+ --ab-cmp-adaptable-statusbar-sub-panel__padding: var(--ab-base-space) calc(var(--ab-base-space) * 2);
4235
4169
  --ab-cmp-adaptable-statusbar-sub-panel-icon__background-color-hover: var(--ab-color-primary);
4236
4170
  --ab-cmp-adaptable-statusbar__color: var(--ab-color-text-on-primary);
4237
4171
  --ab-cmp-adaptable-statusbar__font-weight: 400;
@@ -4267,10 +4201,7 @@
4267
4201
  --ab-cmp-expression-editor-input-dropdown-functions-list__border-radius: var(--ab__border-radius);
4268
4202
  }
4269
4203
  :root {
4270
- --ab-cmp-quickfilter__font-size: var(--ab-font-size-1);
4271
- --ab-cmp-quickfilter__border: 1px solid var(--ab-color-primarydark);
4272
- --ab-cmp-quickfilter__background: var(--ab-color-defaultbackground);
4273
- --ab-cmp-quickfilter-selected-options-text__font-weight: bold;
4204
+ --ab-cmp-floatingfilter-selected-options-text__font-weight: bold;
4274
4205
  }
4275
4206
  :root {
4276
4207
  --ab-cmp-column-filter-input__font-size: var(--ab-font-size-1);
@@ -4299,23 +4230,19 @@
4299
4230
  .ab-Comment {
4300
4231
  border-bottom: 1px solid var(--ab-color-primarydark);
4301
4232
  }
4302
- .ab-Cell-Comment {
4303
- &:before {
4304
- content: '';
4305
- position: absolute;
4306
- top: 0;
4307
- right: 0;
4308
- width: 0;
4309
- height: 0;
4310
- border-style: solid;
4311
- border-width: 0 8px 8px 0;
4312
- border-color: transparent var(--ab-CellComment-triangle-color) transparent transparent;
4313
- }
4233
+ .ab-Cell-Comment:before {
4234
+ content: '';
4235
+ position: absolute;
4236
+ top: 0;
4237
+ right: 0;
4238
+ width: 0;
4239
+ height: 0;
4240
+ border-style: solid;
4241
+ border-width: 0 8px 8px 0;
4242
+ border-color: transparent var(--ab-CellComment-triangle-color) transparent transparent;
4314
4243
  }
4315
- .ab-Cell-Comment.ab-Cell-Note {
4316
- &:before {
4317
- border-color: transparent var(--ab-CellComment-CellNote-triangle-color) transparent transparent;
4318
- }
4244
+ .ab-Cell-Comment.ab-Cell-Note:before {
4245
+ border-color: transparent var(--ab-CellComment-CellNote-triangle-color) transparent transparent;
4319
4246
  }
4320
4247
  input.ab-Radio-input {
4321
4248
  appearance: none;
@@ -4368,20 +4295,18 @@
4368
4295
  .ab-Select-MenulistSearchContainer {
4369
4296
  background-color: var(--ab-cmp-select-multi-value__background);
4370
4297
  }
4371
- [data-name='menu-container'] .ab-Select-CheckboxColumn {
4372
- .InfiniteCheckBox {
4373
- margin-block: 0px;
4374
- margin-inline: var(--ab-space-1);
4375
- }
4376
- .InfiniteCell_content {
4377
- display: flex;
4378
- align-items: center;
4379
- }
4380
- .InfiniteCell_content_value {
4381
- white-space: nowrap;
4382
- overflow: hidden;
4383
- text-overflow: ellipsis;
4384
- }
4298
+ :is([data-name='menu-container'] .ab-Select-CheckboxColumn) .InfiniteCheckBox {
4299
+ margin-block: 0px;
4300
+ margin-inline: var(--ab-base-space);
4301
+ }
4302
+ :is([data-name='menu-container'] .ab-Select-CheckboxColumn) .InfiniteCell_content {
4303
+ display: flex;
4304
+ align-items: center;
4305
+ }
4306
+ :is([data-name='menu-container'] .ab-Select-CheckboxColumn) .InfiniteCell_content_value {
4307
+ white-space: nowrap;
4308
+ overflow: hidden;
4309
+ text-overflow: ellipsis;
4385
4310
  }
4386
4311
  [data-name='menu-container'] .ab-Select-MenuContainer-Resizable {
4387
4312
  box-shadow: var(--ab-cmp-select-menu__box-shadow);
@@ -4407,26 +4332,22 @@
4407
4332
  align-items: center;
4408
4333
  flex-flow: row nowrap;
4409
4334
  }
4410
- [data-name='menu-container'] .ab-Select-MenulistSearch {
4411
- &:focus {
4412
- box-shadow: none;
4413
- }
4335
+ :is([data-name='menu-container'] .ab-Select-MenulistSearch):focus {
4336
+ box-shadow: none;
4414
4337
  }
4415
- .ab-Table {
4416
- td, th {
4417
- padding: var(--ab-space-2);
4418
- }
4419
- th {
4420
- border-bottom: 2px solid var(--ab-color-primarydark);
4421
- }
4422
- tr:not(last-child) td {
4423
- border-bottom: 1px solid var(--ab-color-primarylight);
4424
- }
4338
+ .ab-Table td,.ab-Table th {
4339
+ padding: calc(var(--ab-base-space) * 2);
4340
+ }
4341
+ .ab-Table th {
4342
+ border-bottom: 2px solid var(--ab-color-primarydark);
4343
+ }
4344
+ .ab-Table tr:not(last-child) td {
4345
+ border-bottom: 1px solid var(--ab-color-primarylight);
4346
+ }
4347
+ .ab-CheckBox,.ab-CheckBox *,.ab-CheckBox *:before,.ab-CheckBox *:after {
4348
+ box-sizing: border-box;
4425
4349
  }
4426
4350
  .ab-CheckBox {
4427
- &, & *, *:before, *:after {
4428
- box-sizing: border-box;
4429
- }
4430
4351
  display: inline-flex;
4431
4352
  flex-flow: row;
4432
4353
  align-items: center;
@@ -4435,9 +4356,9 @@
4435
4356
  }
4436
4357
  .ab-CheckBox--checked {
4437
4358
  --ab-cmp-checkbox__background: var(--ab-cmp-checkbox--checked__background);
4438
- .ab-CheckBox__square {
4439
- border-color: var(--ab-cmp-checkbox--checked__border-color);
4440
- }
4359
+ }
4360
+ .ab-CheckBox--checked .ab-CheckBox__square {
4361
+ border-color: var(--ab-cmp-checkbox--checked__border-color);
4441
4362
  }
4442
4363
  .ab-CheckBox--indeterminate {
4443
4364
  --ab-cmp-checkbox--check__color: var(--ab-cmp-checkbox--check-indeterminate__color);
@@ -4457,49 +4378,43 @@
4457
4378
  font-size: 0;
4458
4379
  position: relative;
4459
4380
  pointer-events: none;
4460
- &:after {
4461
- opacity: 1;
4462
- transition-duration: 0.1s;
4463
- transition-timing-function: ease-in;
4464
- transition-property: opacity;
4465
- content: '';
4466
- display: block;
4467
- margin: auto;
4468
- width: calc((var(--ab-cmp-checkbox--check-size) - 4px) / 2);
4469
- height: calc(var(--ab-cmp-checkbox--check-size) - 4px);
4470
- border: solid var(--ab-cmp-checkbox--check__color);
4471
- border-width: 0 2px 2px 0;
4472
- transform: rotate(45deg);
4473
- border-radius: 1px;
4474
- }
4475
4381
  }
4476
- .ab-CheckBox__square--unchecked {
4477
- &::after {
4478
- opacity: 0;
4479
- }
4382
+ .ab-CheckBox__square:after {
4383
+ opacity: 1;
4384
+ transition-duration: 0.1s;
4385
+ transition-timing-function: ease-in;
4386
+ transition-property: opacity;
4387
+ content: '';
4388
+ display: block;
4389
+ margin: auto;
4390
+ width: calc((var(--ab-cmp-checkbox--check-size) - 4px) / 2);
4391
+ height: calc(var(--ab-cmp-checkbox--check-size) - 4px);
4392
+ border: solid var(--ab-cmp-checkbox--check__color);
4393
+ border-width: 0 2px 2px 0;
4394
+ transform: rotate(45deg);
4395
+ border-radius: 1px;
4396
+ }
4397
+ .ab-CheckBox__square--unchecked::after {
4398
+ opacity: 0;
4480
4399
  }
4481
- .ab-CheckBox__square--indeterminate {
4482
- &:after {
4483
- transform: rotate(0deg);
4484
- position: absolute;
4485
- top: 2px;
4486
- bottom: 2px;
4487
- right: 2px;
4488
- left: 2px;
4489
- border: none;
4490
- width: auto;
4491
- height: auto;
4492
- background: var(--ab-cmp-checkbox--check__color);
4493
- border-radius: var(--ab-cmp-checkbox--check-indeterminate-radius);
4494
- }
4400
+ .ab-CheckBox__square--indeterminate:after {
4401
+ transform: rotate(0deg);
4402
+ position: absolute;
4403
+ top: 2px;
4404
+ bottom: 2px;
4405
+ right: 2px;
4406
+ left: 2px;
4407
+ border: none;
4408
+ width: auto;
4409
+ height: auto;
4410
+ background: var(--ab-cmp-checkbox--check__color);
4411
+ border-radius: var(--ab-cmp-checkbox--check-indeterminate-radius);
4495
4412
  }
4496
4413
  .ab-CheckBox--disabled {
4497
4414
  opacity: 0.5;
4498
4415
  }
4499
- .ab-CheckBox--readonly {
4500
- .ab-CheckBox__square {
4501
- opacity: 0.5;
4502
- }
4416
+ .ab-CheckBox--readonly .ab-CheckBox__square {
4417
+ opacity: 0.5;
4503
4418
  }
4504
4419
  .ab-CheckBox-input:not(.ag-checkbox-input) {
4505
4420
  width: 100%;
@@ -4526,15 +4441,15 @@
4526
4441
  max-width: 300px;
4527
4442
  font-family: var(--ab-cmp-dropdown__font-family);
4528
4443
  font-size: var(--ab-cmp-dropdown__font-size);
4529
- select {
4530
- font-family: inherit;
4531
- font-size: inherit;
4532
- position: absolute;
4533
- cursor: pointer;
4534
- }
4535
- .ab-SimpleButton {
4536
- color: var(--ab-cmp-dropdown__color) !important;
4537
- }
4444
+ }
4445
+ .ab-Dropdown select {
4446
+ font-family: inherit;
4447
+ font-size: inherit;
4448
+ position: absolute;
4449
+ cursor: pointer;
4450
+ }
4451
+ .ab-Dropdown .ab-SimpleButton {
4452
+ color: var(--ab-cmp-dropdown__color) !important;
4538
4453
  }
4539
4454
  .ab-Dropdown--disabled {
4540
4455
  opacity: 0.5;
@@ -4554,10 +4469,8 @@
4554
4469
  white-space: nowrap;
4555
4470
  flex: 1;
4556
4471
  }
4557
- .ab-Dropdown--empty {
4558
- .ab-Dropdown__text {
4559
- color: var(--ab-color-text-on-defaultbackground);
4560
- }
4472
+ .ab-Dropdown--empty .ab-Dropdown__text {
4473
+ color: var(--ab-color-text-on-defaultbackground);
4561
4474
  }
4562
4475
  .ab-DropdownButton {
4563
4476
  position: relative;
@@ -4567,7 +4480,7 @@
4567
4480
  }
4568
4481
  .ab-DropdownButton__list {
4569
4482
  text-align: start;
4570
- padding: var(--ab-space-1) 0;
4483
+ padding: var(--ab-base-space) 0;
4571
4484
  box-shadow: var(--ab-cmp-dropdownbutton-list__box-shadow);
4572
4485
  overflow: auto;
4573
4486
  border: var(--ab-cmp-dropdownbutton-list__border);
@@ -4597,9 +4510,9 @@
4597
4510
  color: var(--ab-cmp-dropdownbutton-list-item-hover__color);
4598
4511
  fill: currentColor;
4599
4512
  cursor: pointer;
4600
- .glyphicon.glyphicon {
4601
- color: inherit;
4602
- }
4513
+ }
4514
+ .ab-DropdownButton__list-item--clickable:hover .glyphicon.glyphicon {
4515
+ color: inherit;
4603
4516
  }
4604
4517
  .ab-DropdownButton__separator td {
4605
4518
  border-bottom: var(--ab-cmp-dropdownbutton-list-separator__border);
@@ -4611,18 +4524,18 @@
4611
4524
  background: var(--ab-cmp-field-wrap__background);
4612
4525
  overflow: hidden;
4613
4526
  fill: var(--ab-cmp-field-wrap__fill);
4614
- &:focus-within {
4615
- box-shadow: var(--ab-focus__box-shadow);
4616
- }
4617
- & input, & select, & > * {
4618
- border: none;
4619
- flex: 1;
4620
- --ab-input-height: calc(var(--ab-input-height) - 2px);
4621
- }
4622
- & input, & select, & .ab-Dropdown {
4623
- outline: none !important;
4624
- box-shadow: none !important;
4625
- }
4527
+ }
4528
+ .ab-FieldWrap:focus-within {
4529
+ box-shadow: var(--ab-focus__box-shadow);
4530
+ }
4531
+ .ab-FieldWrap input,.ab-FieldWrap select,.ab-FieldWrap > * {
4532
+ border: none;
4533
+ flex: 1;
4534
+ --ab-input-height: calc(var(--ab-input-height) - 2px);
4535
+ }
4536
+ .ab-FieldWrap input,.ab-FieldWrap select,.ab-FieldWrap .ab-Dropdown {
4537
+ outline: none !important;
4538
+ box-shadow: none !important;
4626
4539
  }
4627
4540
  .ab-FormLayout {
4628
4541
  display: grid;
@@ -4639,34 +4552,34 @@
4639
4552
  border: var(--ab-cmp-input__border);
4640
4553
  font-family: var(--ab-cmp-input__font-family);
4641
4554
  font-size: var(--ab-cmp-input__font-size);
4642
- &:focus {
4643
- box-shadow: var(--ab-focus__box-shadow);
4644
- outline: var(--ab-focus__outline);
4645
- }
4646
- &::-webkit-input-placeholder {
4647
- color: var(--ab-cmp-input--placeholder__color);
4648
- opacity: var(--ab-cmp-input--placeholder__opacity);
4649
- }
4650
- &:-moz-placeholder {
4651
- color: var(--ab-cmp-input--placeholder__color);
4652
- opacity: var(--ab-cmp-input--placeholder__opacity);
4653
- }
4654
- &::-moz-placeholder {
4655
- color: var(--ab-cmp-input--placeholder__color);
4656
- opacity: var(--ab-cmp-input--placeholder__opacity);
4657
- }
4658
- &:-ms-input-placeholder {
4659
- color: var(--ab-cmp-input--placeholder__color);
4660
- opacity: var(--ab-cmp-input--placeholder__opacity);
4661
- }
4662
- &::-ms-input-placeholder {
4663
- color: var(--ab-cmp-input--placeholder__color);
4664
- opacity: var(--ab-cmp-input--placeholder__opacity);
4665
- }
4666
- &::placeholder {
4667
- color: var(--ab-cmp-input--placeholder__color);
4668
- opacity: var(--ab-cmp-input--placeholder__opacity);
4669
- }
4555
+ }
4556
+ .ab-Input:focus {
4557
+ box-shadow: var(--ab-focus__box-shadow);
4558
+ outline: var(--ab-focus__outline);
4559
+ }
4560
+ .ab-Input::-webkit-input-placeholder {
4561
+ color: var(--ab-cmp-input--placeholder__color);
4562
+ opacity: var(--ab-cmp-input--placeholder__opacity);
4563
+ }
4564
+ .ab-Input:-moz-placeholder {
4565
+ color: var(--ab-cmp-input--placeholder__color);
4566
+ opacity: var(--ab-cmp-input--placeholder__opacity);
4567
+ }
4568
+ .ab-Input::-moz-placeholder {
4569
+ color: var(--ab-cmp-input--placeholder__color);
4570
+ opacity: var(--ab-cmp-input--placeholder__opacity);
4571
+ }
4572
+ .ab-Input:-ms-input-placeholder {
4573
+ color: var(--ab-cmp-input--placeholder__color);
4574
+ opacity: var(--ab-cmp-input--placeholder__opacity);
4575
+ }
4576
+ .ab-Input::-ms-input-placeholder {
4577
+ color: var(--ab-cmp-input--placeholder__color);
4578
+ opacity: var(--ab-cmp-input--placeholder__opacity);
4579
+ }
4580
+ .ab-Input::placeholder {
4581
+ color: var(--ab-cmp-input--placeholder__color);
4582
+ opacity: var(--ab-cmp-input--placeholder__opacity);
4670
4583
  }
4671
4584
  input[type='number'].ab-Input::-webkit-outer-spin-button, input[type='number'].ab-Input::-webkit-inner-spin-button {
4672
4585
  -webkit-appearance: none;
@@ -4678,10 +4591,8 @@
4678
4591
  bottom: 0;
4679
4592
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="4 0 18 18" version="1.1"><path fill="%23656565" d="M7 10l5 5 5-5z" transform="translate(0, 2)"/><path fill="%23656565" d="M7 14l5-5 5 5z" transform="translate(0, -6)"/></svg>') no-repeat center center;
4680
4593
  }
4681
- input[type='number'].ab-Input:focus, input[type='number'].ab-Input:hover {
4682
- &::-webkit-inner-spin-button, &::-webkit-inner-spin-button:active {
4683
- opacity: 1;
4684
- }
4594
+ :is(input[type='number'].ab-Input:focus,input[type='number'].ab-Input:hover)::-webkit-inner-spin-button,:is(input[type='number'].ab-Input:focus,input[type='number'].ab-Input:hover)::-webkit-inner-spin-button:active {
4595
+ opacity: 1;
4685
4596
  }
4686
4597
  input[type='number'].ab-Input.ab-Input--no-arrows {
4687
4598
  appearance: textfield;
@@ -4689,23 +4600,6 @@
4689
4600
  input[type='number'].ab-Input.ab-Input--no-arrows::-webkit-outer-spin-button, input[type='number'].ab-Input.ab-Input--no-arrows::-webkit-inner-spin-button {
4690
4601
  display: none;
4691
4602
  }
4692
- .ab-cmp-input-group {
4693
- > :first-child, > :first-child.ab-FieldWrap.ab-Datepicker {
4694
- --ab-cmp-input__border-radius: var(--ab__border-radius) 0 0 var(--ab__border-radius);
4695
- --ab-cmp-select__border-radius: var(--ab__border-radius) 0 0 var(--ab__border-radius);
4696
- --ab-cmp-field-wrap__border-radius: 0 var(--ab__border-radius) var(--ab__border-radius) 0;
4697
- }
4698
- > :last-child {
4699
- --ab-cmp-input__border-radius: 0 var(--ab__border-radius) var(--ab__border-radius) 0;
4700
- --ab-cmp-select__border-radius: 0 var(--ab__border-radius) var(--ab__border-radius) 0;
4701
- --ab-cmp-field-wrap__border-radius: 0 var(--ab__border-radius) var(--ab__border-radius) 0;
4702
- }
4703
- > :not(:first-child):not(:last-child) {
4704
- --ab-cmp-input__border-radius: var(--ab__border-radius);
4705
- --ab-cmp-select__border-radius: var(--ab__border-radius);
4706
- --ab-cmp-field-wrap__border-radius: 0 var(--ab__border-radius) var(--ab__border-radius) 0;
4707
- }
4708
- }
4709
4603
  .ab-cmp-modal-window {
4710
4604
  font-family: var(--ab__font-family);
4711
4605
  }
@@ -4720,13 +4614,11 @@
4720
4614
  z-index: 10;
4721
4615
  overflow: visible;
4722
4616
  }
4723
- .ab-Tabs__Tab {
4724
- &:focus {
4725
- &:after {
4726
- box-shadow: var(--ab-focus__box-shadow);
4727
- }
4728
- outline: none;
4729
- }
4617
+ .ab-Tabs__Tab:focus:after {
4618
+ box-shadow: var(--ab-focus__box-shadow);
4619
+ }
4620
+ .ab-Tabs__Tab:focus {
4621
+ outline: none;
4730
4622
  }
4731
4623
  .ab-Tabs__Tab--active + .ab-Tabs__Filler, .ab-Tabs__Tab--active + .ab-Tabs__Tab {
4732
4624
  border-bottom-left-radius: var(--ab__border-radius);
@@ -4734,31 +4626,31 @@
4734
4626
  .ab-Tabs__Tab--active {
4735
4627
  position: relative;
4736
4628
  z-index: 30;
4737
- &:after {
4738
- content: '';
4739
- pointer-events: none;
4740
- position: absolute;
4741
- top: 0;
4742
- bottom: 5px;
4743
- right: 0;
4744
- left: 0;
4745
- z-index: -2;
4746
- border-top-left-radius: var(--ab__border-radius);
4747
- border-top-right-radius: var(--ab__border-radius);
4748
- }
4749
- &:before {
4750
- content: '';
4751
- position: absolute;
4752
- pointer-events: none;
4753
- border-top-left-radius: var(--ab__border-radius);
4754
- border-top-right-radius: var(--ab__border-radius);
4755
- z-index: -1;
4756
- left: 0;
4757
- top: 0;
4758
- width: 100%;
4759
- height: 100%;
4760
- background: var(--ab-cmp-tabs-active__background);
4761
- }
4629
+ }
4630
+ .ab-Tabs__Tab--active:after {
4631
+ content: '';
4632
+ pointer-events: none;
4633
+ position: absolute;
4634
+ top: 0;
4635
+ bottom: 5px;
4636
+ right: 0;
4637
+ left: 0;
4638
+ z-index: -2;
4639
+ border-top-left-radius: var(--ab__border-radius);
4640
+ border-top-right-radius: var(--ab__border-radius);
4641
+ }
4642
+ .ab-Tabs__Tab--active:before {
4643
+ content: '';
4644
+ position: absolute;
4645
+ pointer-events: none;
4646
+ border-top-left-radius: var(--ab__border-radius);
4647
+ border-top-right-radius: var(--ab__border-radius);
4648
+ z-index: -1;
4649
+ left: 0;
4650
+ top: 0;
4651
+ width: 100%;
4652
+ height: 100%;
4653
+ background: var(--ab-cmp-tabs-active__background);
4762
4654
  }
4763
4655
  .ab-Tabs__Strip {
4764
4656
  background: var(--ab-cmp-tabs-active__background);
@@ -4776,14 +4668,16 @@
4776
4668
  }
4777
4669
  .ab-Panel {
4778
4670
  max-height: var(--ab-cmp-panel__max-height);
4779
- .glyphicon {
4780
- -webkit-text-fill-color: var(--ab-cmp-panel-icon__fill);
4781
- fill: var(--ab-cmp-panel-icon__fill);
4782
- }
4671
+ }
4672
+ .ab-Panel .glyphicon {
4673
+ -webkit-text-fill-color: var(--ab-cmp-panel-icon__fill);
4674
+ fill: var(--ab-cmp-panel-icon__fill);
4675
+ }
4676
+ .ab-Panel {
4783
4677
  font-size: var(--ab-cmp-panel__font-size);
4784
4678
  }
4785
4679
  .ab-Panel--variant-modern {
4786
- --ab-cmp-panel__border-radius: var(--ab-space-1);
4680
+ --ab-cmp-panel__border-radius: var(--ab-base-space);
4787
4681
  }
4788
4682
  .ab-Panel__header {
4789
4683
  flex: none;
@@ -4831,34 +4725,34 @@
4831
4725
  font-family: var(--ab-cmp-textarea__font-family);
4832
4726
  font-size: var(--ab-cmp-textarea__font-size);
4833
4727
  background: var(--ab-cmp-textarea__background);
4834
- &[disabled] {
4835
- background: var(--ab-cmp-textarea--disabled__background);
4836
- }
4837
- &:focus {
4838
- box-shadow: var(--ab-focus__box-shadow);
4839
- outline: var(--ab-focus__outline);
4840
- }
4728
+ }
4729
+ .ab-Textarea[disabled] {
4730
+ background: var(--ab-cmp-textarea--disabled__background);
4731
+ }
4732
+ .ab-Textarea:focus {
4733
+ box-shadow: var(--ab-focus__box-shadow);
4734
+ outline: var(--ab-focus__outline);
4841
4735
  }
4842
4736
  .ab-Tooltip {
4843
4737
  pointer-events: none;
4844
- padding: var(--ab-space-1) var(--ab-space-2);
4738
+ padding: var(--ab-base-space) calc(var(--ab-base-space) * 2);
4845
4739
  box-shadow: 2px 2px 10px hsla(0, 0%, 0%, 0.1);
4846
4740
  white-space: nowrap;
4847
4741
  font-size: var(--ab-cmp-tooltip__font-size);
4848
4742
  color: var(--ab-cmp-tooltip__color);
4849
- &:before {
4850
- border: var(--ab-cmp-tooltip__border);
4851
- content: '';
4852
- position: absolute;
4853
- border-radius: var(--ab__border-radius);
4854
- width: 100%;
4855
- height: 100%;
4856
- left: 0;
4857
- top: 0;
4858
- opacity: var(--ab-cmp-tooltip__opacity);
4859
- background: var(--ab-cmp-tooltip__background);
4860
- z-index: -1;
4861
- }
4743
+ }
4744
+ .ab-Tooltip:before {
4745
+ border: var(--ab-cmp-tooltip__border);
4746
+ content: '';
4747
+ position: absolute;
4748
+ border-radius: var(--ab__border-radius);
4749
+ width: 100%;
4750
+ height: 100%;
4751
+ left: 0;
4752
+ top: 0;
4753
+ opacity: var(--ab-cmp-tooltip__opacity);
4754
+ background: var(--ab-cmp-tooltip__background);
4755
+ z-index: -1;
4862
4756
  }
4863
4757
  .ab-FileDroppable {
4864
4758
  --ab-cmp-file-droppable__transition: fill 0.15s ease-in-out, color 0.15s ease-in-out,
@@ -4872,31 +4766,29 @@
4872
4766
  outline: var(--ab-cmp-file-droppable__outline);
4873
4767
  outline-offset: var(--ab-cmp-file-droppable__outline-offset);
4874
4768
  background: var(--ab-cmp-file-droppable__background);
4875
- &, input, button, .ab-SimpleButton {
4876
- transition: var(--ab-cmp-file-droppable__transition);
4877
- fill: currentColor;
4878
- }
4879
- &, input, button {
4880
- color: var(--ab-cmp-file-droppable__color);
4881
- }
4882
- &.ab-FileDroppable--drag-over {
4883
- outline-offset: var(--ab-cmp-file-droppable--drag-over__outline-offset);
4884
- outline: var(--ab-cmp-file-droppable--drag-over__outline);
4885
- background: var(--ab-cmp-file-droppable--drag-over__background);
4886
- color: var(--ab-cmp-file-droppable--drag-over__color);
4887
- * {
4888
- pointer-events: none;
4889
- }
4890
- }
4891
- &, *, *:before, *:after {
4892
- box-sizing: border-box;
4893
- }
4894
4769
  }
4895
- .ab-WizardPanel {
4896
- & > .ab-Panel__body {
4897
- display: flex;
4898
- flex-flow: column;
4899
- }
4770
+ .ab-FileDroppable,.ab-FileDroppable input,.ab-FileDroppable button,.ab-FileDroppable .ab-SimpleButton {
4771
+ transition: var(--ab-cmp-file-droppable__transition);
4772
+ fill: currentColor;
4773
+ }
4774
+ .ab-FileDroppable,.ab-FileDroppable input,.ab-FileDroppable button {
4775
+ color: var(--ab-cmp-file-droppable__color);
4776
+ }
4777
+ .ab-FileDroppable.ab-FileDroppable--drag-over {
4778
+ outline-offset: var(--ab-cmp-file-droppable--drag-over__outline-offset);
4779
+ outline: var(--ab-cmp-file-droppable--drag-over__outline);
4780
+ background: var(--ab-cmp-file-droppable--drag-over__background);
4781
+ color: var(--ab-cmp-file-droppable--drag-over__color);
4782
+ }
4783
+ .ab-FileDroppable.ab-FileDroppable--drag-over * {
4784
+ pointer-events: none;
4785
+ }
4786
+ .ab-FileDroppable,.ab-FileDroppable *,.ab-FileDroppable *:before,.ab-FileDroppable *:after {
4787
+ box-sizing: border-box;
4788
+ }
4789
+ .ab-WizardPanel > .ab-Panel__body {
4790
+ display: flex;
4791
+ flex-flow: column;
4900
4792
  }
4901
4793
  .ab-Dashboard {
4902
4794
  z-index: 1000;
@@ -4904,15 +4796,15 @@
4904
4796
  background: var(--ab-dashboard-gap__background);
4905
4797
  color: var(--ab-dashboard__color);
4906
4798
  font-family: var(--ab-dashboard__font-family);
4907
- .ab-Input {
4908
- border: none;
4909
- }
4910
- .ab-DashboardToolbar__QuickSearch__text .ab-Input {
4911
- padding: var(--ab-space-1);
4912
- }
4913
- .ab-StateManagement__Clear-Button, .ab-StateManagement__Load-Button, .ab-StateManagement__Export-Dropdown {
4914
- margin-left: var(--ab-space-1);
4915
- }
4799
+ }
4800
+ .ab-Dashboard .ab-Input {
4801
+ border: none;
4802
+ }
4803
+ .ab-Dashboard .ab-DashboardToolbar__QuickSearch__text .ab-Input {
4804
+ padding: var(--ab-base-space);
4805
+ }
4806
+ .ab-Dashboard .ab-StateManagement__Clear-Button,.ab-Dashboard .ab-StateManagement__Load-Button,.ab-Dashboard .ab-StateManagement__Export-Dropdown {
4807
+ margin-left: var(--ab-base-space);
4916
4808
  }
4917
4809
  .ab-Dashboard--inline:not(.ab-Dashboard--collapsed) {
4918
4810
  display: flex;
@@ -4923,7 +4815,7 @@
4923
4815
  background: var(--ab-dashboard-header__background);
4924
4816
  color: var(--ab-dashboard-header__color);
4925
4817
  height: 40px;
4926
- padding: 0 var(--ab-space-2);
4818
+ padding: 0 calc(var(--ab-base-space) * 2);
4927
4819
  }
4928
4820
  .ab-Dashboard__header-left, .ab-Dashboard__header-right {
4929
4821
  display: flex;
@@ -4939,13 +4831,13 @@
4939
4831
  .ab-Dashboard__title {
4940
4832
  display: flex;
4941
4833
  align-items: center;
4942
- padding: 0 var(--ab-space-3);
4834
+ padding: 0 calc(var(--ab-base-space) * 3);
4943
4835
  font-weight: bold;
4944
4836
  font-size: var(--ab-font-size-4);
4945
4837
  }
4946
4838
  .ab-Dashboard__tabs {
4947
4839
  align-self: flex-end;
4948
- margin-left: var(--ab-space-2);
4840
+ margin-left: calc(var(--ab-base-space) * 2);
4949
4841
  }
4950
4842
  .ab-Dashboard__tab {
4951
4843
  border: none;
@@ -4979,7 +4871,7 @@
4979
4871
  display: flex;
4980
4872
  flex-direction: column;
4981
4873
  align-self: stretch;
4982
- padding: var(--ab-space-2);
4874
+ padding: calc(var(--ab-base-space) * 2);
4983
4875
  border-left: 1px solid var(--ab-dashboard__border);
4984
4876
  }
4985
4877
  .ab-Dashboard__toolbar {
@@ -4993,7 +4885,7 @@
4993
4885
  font-size: var(--ab-font-size-3);
4994
4886
  }
4995
4887
  .ab-Dashboard__toolbar-content {
4996
- padding: var(--ab-space-2) var(--ab-space-2) var(--ab-space-1) var(--ab-space-2);
4888
+ padding: calc(var(--ab-base-space) * 2) calc(var(--ab-base-space) * 2) var(--ab-base-space) calc(var(--ab-base-space) * 2);
4997
4889
  display: flex;
4998
4890
  }
4999
4891
  .ab-Dashboard__toolbar.ab-Dashboard__home-toolbar {
@@ -5001,9 +4893,9 @@
5001
4893
  background: var(--ab-dashboard-header__background);
5002
4894
  padding-top: var(--ab-dashboard-gap-size);
5003
4895
  padding-bottom: var(--ab-dashboard-gap-size);
5004
- .ab-Dashboard__toolbar-title {
5005
- opacity: 1;
5006
- }
4896
+ }
4897
+ .ab-Dashboard__toolbar.ab-Dashboard__home-toolbar .ab-Dashboard__toolbar-title {
4898
+ opacity: 1;
5007
4899
  }
5008
4900
  .ab-TreeDropdown {
5009
4901
  position: relative;
@@ -5016,248 +4908,264 @@
5016
4908
  flex-flow: row;
5017
4909
  align-items: center;
5018
4910
  }
5019
- .ab-Datepicker-Overlay {
5020
- .rdp-root {
5021
- --rdp-accent-color: blue;
5022
- --rdp-accent-background-color: #f0f0ff;
5023
- --rdp-day-height: 44px;
5024
- --rdp-day-width: 44px;
5025
- --rdp-day_button-border-radius: 100%;
5026
- --rdp-day_button-border: 2px solid transparent;
5027
- --rdp-day_button-height: 42px;
5028
- --rdp-day_button-width: 42px;
5029
- --rdp-selected-border: 2px solid var(--rdp-accent-color);
5030
- --rdp-disabled-opacity: 0.5;
5031
- --rdp-outside-opacity: 0.75;
5032
- --rdp-today-color: var(--rdp-accent-color);
5033
- --rdp-dropdown-gap: 0.5rem;
5034
- --rdp-months-gap: 2rem;
5035
- --rdp-nav_button-disabled-opacity: 0.5;
5036
- --rdp-nav_button-height: 2.25rem;
5037
- --rdp-nav_button-width: 2.25rem;
5038
- --rdp-nav-height: 2.75rem;
5039
- --rdp-range_middle-background-color: var(--rdp-accent-background-color);
5040
- --rdp-range_middle-color: inherit;
5041
- --rdp-range_start-color: white;
5042
- --rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%);
5043
- --rdp-range_start-date-background-color: var(--rdp-accent-color);
5044
- --rdp-range_end-background: linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%);
5045
- --rdp-range_end-color: white;
5046
- --rdp-range_end-date-background-color: var(--rdp-accent-color);
5047
- --rdp-week_number-border-radius: 100%;
5048
- --rdp-week_number-border: 2px solid transparent;
5049
- --rdp-week_number-height: var(--rdp-day-height);
5050
- --rdp-week_number-opacity: 0.75;
5051
- --rdp-week_number-width: var(--rdp-day-width);
5052
- --rdp-weeknumber-text-align: center;
5053
- --rdp-weekday-opacity: 0.75;
5054
- --rdp-weekday-padding: 0.5rem 0rem;
5055
- --rdp-weekday-text-align: center;
5056
- --rdp-gradient-direction: 90deg;
5057
- }
5058
- .rdp-root[dir="rtl"] {
5059
- --rdp-gradient-direction: -90deg;
5060
- }
5061
- .rdp-root[data-broadcast-calendar="true"] {
5062
- --rdp-outside-opacity: unset;
5063
- }
5064
- .rdp-root {
5065
- position: relative;
5066
- box-sizing: border-box;
5067
- }
5068
- .rdp-root * {
5069
- box-sizing: border-box;
5070
- }
5071
- .rdp-day {
5072
- width: var(--rdp-day-width);
5073
- height: var(--rdp-day-height);
5074
- text-align: center;
5075
- }
5076
- .rdp-day_button {
5077
- background: none;
5078
- padding: 0;
5079
- margin: 0;
5080
- cursor: pointer;
5081
- font: inherit;
5082
- color: inherit;
5083
- justify-content: center;
5084
- align-items: center;
5085
- display: flex;
5086
- width: var(--rdp-day_button-width);
5087
- height: var(--rdp-day_button-height);
5088
- border: var(--rdp-day_button-border);
5089
- border-radius: var(--rdp-day_button-border-radius);
5090
- }
5091
- .rdp-day_button:disabled {
5092
- cursor: revert;
5093
- }
5094
- .rdp-caption_label {
5095
- z-index: 1;
5096
- position: relative;
5097
- display: inline-flex;
5098
- align-items: center;
5099
- white-space: nowrap;
5100
- border: 0;
5101
- }
5102
- .rdp-dropdown:focus-visible ~ .rdp-caption_label {
5103
- outline: 5px auto Highlight;
5104
- outline: 5px auto -webkit-focus-ring-color;
5105
- }
5106
- .rdp-button_next, .rdp-button_previous {
5107
- border: none;
5108
- background: none;
5109
- padding: 0;
5110
- margin: 0;
5111
- cursor: pointer;
5112
- font: inherit;
5113
- color: inherit;
5114
- -moz-appearance: none;
5115
- -webkit-appearance: none;
5116
- display: inline-flex;
5117
- align-items: center;
5118
- justify-content: center;
5119
- position: relative;
5120
- appearance: none;
5121
- width: var(--rdp-nav_button-width);
5122
- height: var(--rdp-nav_button-height);
5123
- }
5124
- .rdp-button_next:disabled, .rdp-button_previous:disabled {
5125
- cursor: revert;
5126
- opacity: var(--rdp-nav_button-disabled-opacity);
5127
- }
5128
- .rdp-chevron {
5129
- display: inline-block;
5130
- fill: var(--rdp-accent-color);
5131
- }
5132
- .rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
5133
- transform: rotate(180deg);
5134
- }
5135
- .rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
5136
- transform: rotate(180deg);
5137
- transform-origin: 50%;
5138
- }
5139
- .rdp-dropdowns {
5140
- position: relative;
5141
- display: inline-flex;
5142
- align-items: center;
5143
- gap: var(--rdp-dropdown-gap);
5144
- }
5145
- .rdp-dropdown {
5146
- z-index: 2;
5147
- opacity: 0;
5148
- appearance: none;
5149
- position: absolute;
5150
- inset-block-start: 0;
5151
- inset-block-end: 0;
5152
- inset-inline-start: 0;
5153
- width: 100%;
5154
- margin: 0;
5155
- padding: 0;
5156
- cursor: inherit;
5157
- border: none;
5158
- line-height: inherit;
5159
- }
5160
- .rdp-dropdown_root {
5161
- position: relative;
5162
- display: inline-flex;
5163
- align-items: center;
5164
- }
5165
- .rdp-dropdown_root[data-disabled="true"] .rdp-chevron {
5166
- opacity: var(--rdp-disabled-opacity);
5167
- }
5168
- .rdp-month_caption {
5169
- display: flex;
5170
- align-content: center;
5171
- height: var(--rdp-nav-height);
5172
- font-weight: bold;
5173
- font-size: large;
5174
- }
5175
- .rdp-months {
5176
- position: relative;
5177
- display: flex;
5178
- flex-wrap: wrap;
5179
- gap: var(--rdp-months-gap);
5180
- max-width: fit-content;
5181
- }
5182
- .rdp-month_grid {
5183
- border-collapse: collapse;
5184
- }
5185
- .rdp-nav {
5186
- position: absolute;
5187
- inset-block-start: 0;
5188
- inset-inline-end: 0;
5189
- display: flex;
5190
- align-items: center;
5191
- height: var(--rdp-nav-height);
5192
- }
5193
- .rdp-weekday {
5194
- opacity: var(--rdp-weekday-opacity);
5195
- padding: var(--rdp-weekday-padding);
5196
- font-weight: 500;
5197
- font-size: smaller;
5198
- text-align: var(--rdp-weekday-text-align);
5199
- text-transform: var(--rdp-weekday-text-transform);
5200
- }
5201
- .rdp-week_number {
5202
- opacity: var(--rdp-week_number-opacity);
5203
- font-weight: 400;
5204
- font-size: small;
5205
- height: var(--rdp-week_number-height);
5206
- width: var(--rdp-week_number-width);
5207
- border: var(--rdp-week_number-border);
5208
- border-radius: var(--rdp-week_number-border-radius);
5209
- text-align: var(--rdp-weeknumber-text-align);
5210
- }
5211
- .rdp-today:not(.rdp-outside) {
5212
- color: var(--rdp-today-color);
5213
- }
5214
- .rdp-selected {
5215
- font-weight: bold;
5216
- font-size: large;
5217
- }
5218
- .rdp-selected .rdp-day_button {
5219
- border: var(--rdp-selected-border);
5220
- }
5221
- .rdp-outside {
5222
- opacity: var(--rdp-outside-opacity);
5223
- }
5224
- .rdp-disabled {
5225
- opacity: var(--rdp-disabled-opacity);
5226
- }
5227
- .rdp-hidden {
5228
- visibility: hidden;
5229
- color: var(--rdp-range_start-color);
5230
- }
5231
- .rdp-range_start {
5232
- background: var(--rdp-range_start-background);
5233
- }
5234
- .rdp-range_start .rdp-day_button {
5235
- background-color: var(--rdp-range_start-date-background-color);
5236
- color: var(--rdp-range_start-color);
5237
- }
5238
- .rdp-range_middle {
5239
- background-color: var(--rdp-range_middle-background-color);
5240
- }
5241
- .rdp-range_middle .rdp-day_button {
5242
- border-color: transparent;
5243
- border: unset;
5244
- border-radius: unset;
5245
- color: var(--rdp-range_middle-color);
5246
- }
5247
- .rdp-range_end {
5248
- background: var(--rdp-range_end-background);
5249
- color: var(--rdp-range_end-color);
5250
- }
5251
- .rdp-range_end .rdp-day_button {
5252
- color: var(--rdp-range_start-color);
5253
- background-color: var(--rdp-range_end-date-background-color);
5254
- }
5255
- .rdp-range_start.rdp-range_end {
5256
- background: revert;
5257
- }
5258
- .rdp-focusable {
5259
- cursor: pointer;
5260
- }
4911
+ .ab-cmp-input-group > :first-child,.ab-cmp-input-group > .ab-FieldWrap.ab-Datepicker:first-child {
4912
+ --ab-cmp-input__border-radius: var(--ab__border-radius) 0 0 var(--ab__border-radius);
4913
+ --ab-cmp-select__border-radius: var(--ab__border-radius) 0 0 var(--ab__border-radius);
4914
+ --ab-cmp-simple-button__border-radius: var(--ab__border-radius) 0 0 var(--ab__border-radius);
4915
+ --ab-cmp-field-wrap__border-radius: 0 var(--ab__border-radius) var(--ab__border-radius) 0;
4916
+ }
4917
+ .ab-cmp-input-group > :last-child {
4918
+ --ab-cmp-input__border-radius: 0 var(--ab__border-radius) var(--ab__border-radius) 0;
4919
+ --ab-cmp-select__border-radius: 0 var(--ab__border-radius) var(--ab__border-radius) 0;
4920
+ --ab-cmp-simple-button__border-radius: 0 var(--ab__border-radius) var(--ab__border-radius) 0;
4921
+ --ab-cmp-field-wrap__border-radius: 0 var(--ab__border-radius) var(--ab__border-radius) 0;
4922
+ }
4923
+ .ab-cmp-input-group > :not(:first-child):not(:last-child) {
4924
+ --ab-cmp-input__border-radius: var(--ab__border-radius);
4925
+ --ab-cmp-select__border-radius: var(--ab__border-radius);
4926
+ --ab-cmp-simple-button__border-radius: var(--ab__border-radius);
4927
+ --ab-cmp-field-wrap__border-radius: 0 var(--ab__border-radius) var(--ab__border-radius) 0;
4928
+ }
4929
+ .ab-Datepicker-Overlay .rdp-root {
4930
+ --rdp-accent-color: blue;
4931
+ --rdp-accent-background-color: #f0f0ff;
4932
+ --rdp-day-height: 44px;
4933
+ --rdp-day-width: 44px;
4934
+ --rdp-day_button-border-radius: 100%;
4935
+ --rdp-day_button-border: 2px solid transparent;
4936
+ --rdp-day_button-height: 42px;
4937
+ --rdp-day_button-width: 42px;
4938
+ --rdp-selected-border: 2px solid var(--rdp-accent-color);
4939
+ --rdp-disabled-opacity: 0.5;
4940
+ --rdp-outside-opacity: 0.75;
4941
+ --rdp-today-color: var(--rdp-accent-color);
4942
+ --rdp-dropdown-gap: 0.5rem;
4943
+ --rdp-months-gap: 2rem;
4944
+ --rdp-nav_button-disabled-opacity: 0.5;
4945
+ --rdp-nav_button-height: 2.25rem;
4946
+ --rdp-nav_button-width: 2.25rem;
4947
+ --rdp-nav-height: 2.75rem;
4948
+ --rdp-range_middle-background-color: var(--rdp-accent-background-color);
4949
+ --rdp-range_middle-color: inherit;
4950
+ --rdp-range_start-color: white;
4951
+ --rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%);
4952
+ --rdp-range_start-date-background-color: var(--rdp-accent-color);
4953
+ --rdp-range_end-background: linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%);
4954
+ --rdp-range_end-color: white;
4955
+ --rdp-range_end-date-background-color: var(--rdp-accent-color);
4956
+ --rdp-week_number-border-radius: 100%;
4957
+ --rdp-week_number-border: 2px solid transparent;
4958
+ --rdp-week_number-height: var(--rdp-day-height);
4959
+ --rdp-week_number-opacity: 0.75;
4960
+ --rdp-week_number-width: var(--rdp-day-width);
4961
+ --rdp-weeknumber-text-align: center;
4962
+ --rdp-weekday-opacity: 0.75;
4963
+ --rdp-weekday-padding: 0.5rem 0rem;
4964
+ --rdp-weekday-text-align: center;
4965
+ --rdp-gradient-direction: 90deg;
4966
+ }
4967
+ .ab-Datepicker-Overlay .rdp-root[dir="rtl"] {
4968
+ --rdp-gradient-direction: -90deg;
4969
+ }
4970
+ .ab-Datepicker-Overlay .rdp-root[data-broadcast-calendar="true"] {
4971
+ --rdp-outside-opacity: unset;
4972
+ }
4973
+ .ab-Datepicker-Overlay .rdp-root {
4974
+ position: relative;
4975
+ box-sizing: border-box;
4976
+ }
4977
+ .ab-Datepicker-Overlay .rdp-root * {
4978
+ box-sizing: border-box;
4979
+ }
4980
+ .ab-Datepicker-Overlay .rdp-day {
4981
+ width: var(--rdp-day-width);
4982
+ height: var(--rdp-day-height);
4983
+ text-align: center;
4984
+ }
4985
+ .ab-Datepicker-Overlay .rdp-day_button {
4986
+ background: none;
4987
+ padding: 0;
4988
+ margin: 0;
4989
+ cursor: pointer;
4990
+ font: inherit;
4991
+ color: inherit;
4992
+ justify-content: center;
4993
+ align-items: center;
4994
+ display: flex;
4995
+ width: var(--rdp-day_button-width);
4996
+ height: var(--rdp-day_button-height);
4997
+ border: var(--rdp-day_button-border);
4998
+ border-radius: var(--rdp-day_button-border-radius);
4999
+ }
5000
+ .ab-Datepicker-Overlay .rdp-day_button:disabled {
5001
+ cursor: revert;
5002
+ }
5003
+ .ab-Datepicker-Overlay .rdp-caption_label {
5004
+ z-index: 1;
5005
+ position: relative;
5006
+ display: inline-flex;
5007
+ align-items: center;
5008
+ white-space: nowrap;
5009
+ border: 0;
5010
+ }
5011
+ .ab-Datepicker-Overlay .rdp-dropdown:focus-visible ~ .rdp-caption_label {
5012
+ outline: 5px auto Highlight;
5013
+ outline: 5px auto -webkit-focus-ring-color;
5014
+ }
5015
+ .ab-Datepicker-Overlay .rdp-button_next,.ab-Datepicker-Overlay .rdp-button_previous {
5016
+ border: none;
5017
+ background: none;
5018
+ padding: 0;
5019
+ margin: 0;
5020
+ cursor: pointer;
5021
+ font: inherit;
5022
+ color: inherit;
5023
+ -moz-appearance: none;
5024
+ -webkit-appearance: none;
5025
+ display: inline-flex;
5026
+ align-items: center;
5027
+ justify-content: center;
5028
+ position: relative;
5029
+ appearance: none;
5030
+ width: var(--rdp-nav_button-width);
5031
+ height: var(--rdp-nav_button-height);
5032
+ }
5033
+ .ab-Datepicker-Overlay .rdp-button_next:disabled,.ab-Datepicker-Overlay .rdp-button_previous:disabled {
5034
+ cursor: revert;
5035
+ opacity: var(--rdp-nav_button-disabled-opacity);
5036
+ }
5037
+ .ab-Datepicker-Overlay .rdp-chevron {
5038
+ display: inline-block;
5039
+ fill: var(--rdp-accent-color);
5040
+ }
5041
+ .ab-Datepicker-Overlay .rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
5042
+ transform: rotate(180deg);
5043
+ }
5044
+ .ab-Datepicker-Overlay .rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
5045
+ transform: rotate(180deg);
5046
+ transform-origin: 50%;
5047
+ }
5048
+ .ab-Datepicker-Overlay .rdp-dropdowns {
5049
+ position: relative;
5050
+ display: inline-flex;
5051
+ align-items: center;
5052
+ gap: var(--rdp-dropdown-gap);
5053
+ }
5054
+ .ab-Datepicker-Overlay .rdp-dropdown {
5055
+ z-index: 2;
5056
+ opacity: 0;
5057
+ appearance: none;
5058
+ position: absolute;
5059
+ inset-block-start: 0;
5060
+ inset-block-end: 0;
5061
+ inset-inline-start: 0;
5062
+ width: 100%;
5063
+ margin: 0;
5064
+ padding: 0;
5065
+ cursor: inherit;
5066
+ border: none;
5067
+ line-height: inherit;
5068
+ }
5069
+ .ab-Datepicker-Overlay .rdp-dropdown_root {
5070
+ position: relative;
5071
+ display: inline-flex;
5072
+ align-items: center;
5073
+ }
5074
+ .ab-Datepicker-Overlay .rdp-dropdown_root[data-disabled="true"] .rdp-chevron {
5075
+ opacity: var(--rdp-disabled-opacity);
5076
+ }
5077
+ .ab-Datepicker-Overlay .rdp-month_caption {
5078
+ display: flex;
5079
+ align-content: center;
5080
+ height: var(--rdp-nav-height);
5081
+ font-weight: bold;
5082
+ font-size: large;
5083
+ }
5084
+ .ab-Datepicker-Overlay .rdp-months {
5085
+ position: relative;
5086
+ display: flex;
5087
+ flex-wrap: wrap;
5088
+ gap: var(--rdp-months-gap);
5089
+ max-width: fit-content;
5090
+ }
5091
+ .ab-Datepicker-Overlay .rdp-month_grid {
5092
+ border-collapse: collapse;
5093
+ }
5094
+ .ab-Datepicker-Overlay .rdp-nav {
5095
+ position: absolute;
5096
+ inset-block-start: 0;
5097
+ inset-inline-end: 0;
5098
+ display: flex;
5099
+ align-items: center;
5100
+ height: var(--rdp-nav-height);
5101
+ }
5102
+ .ab-Datepicker-Overlay .rdp-weekday {
5103
+ opacity: var(--rdp-weekday-opacity);
5104
+ padding: var(--rdp-weekday-padding);
5105
+ font-weight: 500;
5106
+ font-size: smaller;
5107
+ text-align: var(--rdp-weekday-text-align);
5108
+ text-transform: var(--rdp-weekday-text-transform);
5109
+ }
5110
+ .ab-Datepicker-Overlay .rdp-week_number {
5111
+ opacity: var(--rdp-week_number-opacity);
5112
+ font-weight: 400;
5113
+ font-size: small;
5114
+ height: var(--rdp-week_number-height);
5115
+ width: var(--rdp-week_number-width);
5116
+ border: var(--rdp-week_number-border);
5117
+ border-radius: var(--rdp-week_number-border-radius);
5118
+ text-align: var(--rdp-weeknumber-text-align);
5119
+ }
5120
+ .ab-Datepicker-Overlay .rdp-today:not(.rdp-outside) {
5121
+ color: var(--rdp-today-color);
5122
+ }
5123
+ .ab-Datepicker-Overlay .rdp-selected {
5124
+ font-weight: bold;
5125
+ font-size: large;
5126
+ }
5127
+ .ab-Datepicker-Overlay .rdp-selected .rdp-day_button {
5128
+ border: var(--rdp-selected-border);
5129
+ }
5130
+ .ab-Datepicker-Overlay .rdp-outside {
5131
+ opacity: var(--rdp-outside-opacity);
5132
+ }
5133
+ .ab-Datepicker-Overlay .rdp-disabled {
5134
+ opacity: var(--rdp-disabled-opacity);
5135
+ }
5136
+ .ab-Datepicker-Overlay .rdp-hidden {
5137
+ visibility: hidden;
5138
+ color: var(--rdp-range_start-color);
5139
+ }
5140
+ .ab-Datepicker-Overlay .rdp-range_start {
5141
+ background: var(--rdp-range_start-background);
5142
+ }
5143
+ .ab-Datepicker-Overlay .rdp-range_start .rdp-day_button {
5144
+ background-color: var(--rdp-range_start-date-background-color);
5145
+ color: var(--rdp-range_start-color);
5146
+ }
5147
+ .ab-Datepicker-Overlay .rdp-range_middle {
5148
+ background-color: var(--rdp-range_middle-background-color);
5149
+ }
5150
+ .ab-Datepicker-Overlay .rdp-range_middle .rdp-day_button {
5151
+ border-color: transparent;
5152
+ border: unset;
5153
+ border-radius: unset;
5154
+ color: var(--rdp-range_middle-color);
5155
+ }
5156
+ .ab-Datepicker-Overlay .rdp-range_end {
5157
+ background: var(--rdp-range_end-background);
5158
+ color: var(--rdp-range_end-color);
5159
+ }
5160
+ .ab-Datepicker-Overlay .rdp-range_end .rdp-day_button {
5161
+ color: var(--rdp-range_start-color);
5162
+ background-color: var(--rdp-range_end-date-background-color);
5163
+ }
5164
+ .ab-Datepicker-Overlay .rdp-range_start.rdp-range_end {
5165
+ background: revert;
5166
+ }
5167
+ .ab-Datepicker-Overlay .rdp-focusable {
5168
+ cursor: pointer;
5261
5169
  }
5262
5170
  .ab-Datepicker-Overlay {
5263
5171
  border: var(--ab-cmp-datepicker__border);
@@ -5267,68 +5175,66 @@
5267
5175
  outline: var(--ab-focus__outline);
5268
5176
  border-radius: var(--ab__border-radius);
5269
5177
  color: var(--ab-color-text-on-defaultbackground);
5270
- .rdp-root {
5271
- --rdp-cell-size: var(--ab-cmp-datepicker__cell-size);
5272
- --rdp-accent-color: var(--ab-cmp-datepicker__selected-color);
5273
- --rdp-background-color: var(--ab-cmp-datepicker__hover-color);
5274
- --rdp-outline: 2px solid var(--ab-cmp-datepicker__selected-color);
5275
- --rdp-day_button-height: 30px;
5276
- --rdp-day_button-width: 30px;
5277
- --rdp-day-height: auto;
5278
- margin: 1em;
5279
- font-size: var(--ab-cmp-datepicker__font-size);
5280
- font-family: var(--ab-cmp-datepicker__font-family);
5281
- .rdp-month_grid {
5282
- border-collapse: separate;
5283
- }
5284
- .rdp-weeknumber, .rdp-day {
5285
- border-radius: var(--ab-cmp-datepicker__day-border-radius);
5286
- }
5287
- .rdp-day {
5288
- border: var(--ab-cmp-datepicker__day-border-width) solid transparent;
5289
- }
5290
- .rdp-day.rdp-focused:not([disabled]), .rdp-day.rdp-focused:focus:not([disabled]), .rdp-day.rdp-focused:active:not([disabled]), .rdp-day.rdp-focused:hover:not([disabled]) {
5291
- color: var(--ab-cmp-datepicker__active-text-color);
5292
- background: var(--ab-cmp-datepicker__active-color);
5293
- border: var(--ab-cmp-datepicker__active-border);
5294
- border-radius: var(--ab-cmp-datepicker__active-border-radius);
5295
- button {
5296
- border: none;
5297
- outline: none;
5298
- }
5299
- }
5300
- .rdp-day.rdp-selected:not([disabled]), .rdp-day.rdp-selected:focus:not([disabled]), .rdp-day.rdp-selected:active:not([disabled]), .rdp-day.rdp-selected:hover:not([disabled]) {
5301
- color: var(--ab-cmp-datepicker__selected-text-color);
5302
- background: var(--ab-cmp-datepicker__selected-color);
5303
- border: var(--ab-cmp-datepicker__selected-border);
5304
- border-radius: var(--ab-cmp-datepicker__selected-border-radius);
5305
- font-size: inherit;
5306
- }
5307
- .rdp-caption_label {
5308
- font-size: 90%;
5309
- }
5310
- .rdp-nav_button {
5311
- color: var(--ab-color-text-on-primary);
5312
- }
5313
- .rdp-table {
5314
- width: 100%;
5315
- max-width: none;
5316
- }
5317
- .rdp-day.rdp-outside {
5318
- opacity: 0.4;
5319
- }
5320
- .rdp-today {
5321
- border: var(--rdp-outline);
5322
- }
5323
- .rdp-row {
5324
- td:nth-child(8), td:nth-child(9), td:nth-child(10), td:nth-child(11), td:nth-child(12), td:nth-child(13), td:nth-child(14) {
5325
- display: none;
5326
- }
5327
- }
5328
- &.rdp-with_weeknumber .rdp-row td:nth-child(8) {
5329
- display: table-cell;
5330
- }
5331
- }
5178
+ }
5179
+ .ab-Datepicker-Overlay .rdp-root {
5180
+ --rdp-cell-size: var(--ab-cmp-datepicker__cell-size);
5181
+ --rdp-accent-color: var(--ab-cmp-datepicker__selected-color);
5182
+ --rdp-background-color: var(--ab-cmp-datepicker__hover-color);
5183
+ --rdp-outline: 2px solid var(--ab-cmp-datepicker__selected-color);
5184
+ --rdp-day_button-height: 30px;
5185
+ --rdp-day_button-width: 30px;
5186
+ --rdp-day-height: auto;
5187
+ margin: 1em;
5188
+ font-size: var(--ab-cmp-datepicker__font-size);
5189
+ font-family: var(--ab-cmp-datepicker__font-family);
5190
+ }
5191
+ :is(.ab-Datepicker-Overlay .rdp-root) .rdp-month_grid {
5192
+ border-collapse: separate;
5193
+ }
5194
+ :is(.ab-Datepicker-Overlay .rdp-root) .rdp-weeknumber,:is(.ab-Datepicker-Overlay .rdp-root) .rdp-day {
5195
+ border-radius: var(--ab-cmp-datepicker__day-border-radius);
5196
+ }
5197
+ :is(.ab-Datepicker-Overlay .rdp-root) .rdp-day {
5198
+ border: var(--ab-cmp-datepicker__day-border-width) solid transparent;
5199
+ }
5200
+ :is(.ab-Datepicker-Overlay .rdp-root) .rdp-day.rdp-focused:not([disabled]),:is(.ab-Datepicker-Overlay .rdp-root) .rdp-day.rdp-focused:focus:not([disabled]),:is(.ab-Datepicker-Overlay .rdp-root) .rdp-day.rdp-focused:active:not([disabled]),:is(.ab-Datepicker-Overlay .rdp-root) .rdp-day.rdp-focused:hover:not([disabled]) {
5201
+ color: var(--ab-cmp-datepicker__active-text-color);
5202
+ background: var(--ab-cmp-datepicker__active-color);
5203
+ border: var(--ab-cmp-datepicker__active-border);
5204
+ border-radius: var(--ab-cmp-datepicker__active-border-radius);
5205
+ }
5206
+ :is(:is(.ab-Datepicker-Overlay .rdp-root) .rdp-day.rdp-focused:not([disabled]),:is(.ab-Datepicker-Overlay .rdp-root) .rdp-day.rdp-focused:focus:not([disabled]),:is(.ab-Datepicker-Overlay .rdp-root) .rdp-day.rdp-focused:active:not([disabled]),:is(.ab-Datepicker-Overlay .rdp-root) .rdp-day.rdp-focused:hover:not([disabled])) button {
5207
+ border: none;
5208
+ outline: none;
5209
+ }
5210
+ :is(.ab-Datepicker-Overlay .rdp-root) .rdp-day.rdp-selected:not([disabled]),:is(.ab-Datepicker-Overlay .rdp-root) .rdp-day.rdp-selected:focus:not([disabled]),:is(.ab-Datepicker-Overlay .rdp-root) .rdp-day.rdp-selected:active:not([disabled]),:is(.ab-Datepicker-Overlay .rdp-root) .rdp-day.rdp-selected:hover:not([disabled]) {
5211
+ color: var(--ab-cmp-datepicker__selected-text-color);
5212
+ background: var(--ab-cmp-datepicker__selected-color);
5213
+ border: var(--ab-cmp-datepicker__selected-border);
5214
+ border-radius: var(--ab-cmp-datepicker__selected-border-radius);
5215
+ font-size: inherit;
5216
+ }
5217
+ :is(.ab-Datepicker-Overlay .rdp-root) .rdp-caption_label {
5218
+ font-size: 90%;
5219
+ }
5220
+ :is(.ab-Datepicker-Overlay .rdp-root) .rdp-nav_button {
5221
+ color: var(--ab-color-text-on-primary);
5222
+ }
5223
+ :is(.ab-Datepicker-Overlay .rdp-root) .rdp-table {
5224
+ width: 100%;
5225
+ max-width: none;
5226
+ }
5227
+ :is(.ab-Datepicker-Overlay .rdp-root) .rdp-day.rdp-outside {
5228
+ opacity: 0.4;
5229
+ }
5230
+ :is(.ab-Datepicker-Overlay .rdp-root) .rdp-today {
5231
+ border: var(--rdp-outline);
5232
+ }
5233
+ :is(:is(.ab-Datepicker-Overlay .rdp-root) .rdp-row) td:nth-child(8),:is(:is(.ab-Datepicker-Overlay .rdp-root) .rdp-row) td:nth-child(9),:is(:is(.ab-Datepicker-Overlay .rdp-root) .rdp-row) td:nth-child(10),:is(:is(.ab-Datepicker-Overlay .rdp-root) .rdp-row) td:nth-child(11),:is(:is(.ab-Datepicker-Overlay .rdp-root) .rdp-row) td:nth-child(12),:is(:is(.ab-Datepicker-Overlay .rdp-root) .rdp-row) td:nth-child(13),:is(:is(.ab-Datepicker-Overlay .rdp-root) .rdp-row) td:nth-child(14) {
5234
+ display: none;
5235
+ }
5236
+ .rdp-with_weeknumber:is(.ab-Datepicker-Overlay .rdp-root) .rdp-row td:nth-child(8) {
5237
+ display: table-cell;
5332
5238
  }
5333
5239
  .ab-ToggleButton__slider {
5334
5240
  transition: 0.1s;
@@ -5336,11 +5242,11 @@
5336
5242
  .ab-ToggleButton__slider:before {
5337
5243
  will-change: transform right;
5338
5244
  right: 100%;
5339
- transform: translateX(calc(100% + var(--ab-space-1)));
5245
+ transform: translateX(calc(100% + var(--ab-base-space)));
5340
5246
  transition: 0.2s;
5341
5247
  }
5342
5248
  .ab-ToggleButton__input:checked + .ab-ToggleButton__slider:before {
5343
- right: var(--ab-space-1);
5249
+ right: var(--ab-base-space);
5344
5250
  transform: translateX(0px);
5345
5251
  }
5346
5252
  .ab-Loader {
@@ -5399,7 +5305,7 @@
5399
5305
  display: flex;
5400
5306
  flex-direction: column;
5401
5307
  box-sizing: border-box;
5402
- margin-right: var(--ab-space-2);
5308
+ margin-right: calc(var(--ab-base-space) * 2);
5403
5309
  width: var(--ab-cmp-module-module-selector__tab-item__width);
5404
5310
  border: var(--ab-cmp-module-module-selector__tab-item__border);
5405
5311
  border-radius: var(--ab-cmp-module-module-selector__tab-item__border-radius);
@@ -5407,14 +5313,14 @@
5407
5313
  .ab-ModuleSelector__TabItem__header {
5408
5314
  display: flex;
5409
5315
  align-items: center;
5410
- padding: var(--ab-space-1);
5316
+ padding: var(--ab-base-space);
5411
5317
  border-bottom: var(--ab-cmp-module-module-selector__tab-item__border);
5412
5318
  }
5413
5319
  .ab-ModuleSelector__TabItem__header-input {
5414
5320
  flex: 1;
5415
5321
  width: 100%;
5416
- margin-left: var(--ab-space-1);
5417
- margin-right: var(--ab-space-1);
5322
+ margin-left: var(--ab-base-space);
5323
+ margin-right: var(--ab-base-space);
5418
5324
  align-self: stretch;
5419
5325
  background: transparent;
5420
5326
  border: none;
@@ -5429,89 +5335,92 @@
5429
5335
  .ab-ModuleSelector__ToolbarItem {
5430
5336
  border: var(--ab-cmp-module-module-selector__toolbar-item__border);
5431
5337
  }
5432
- .ab-ColorPicker-range {
5433
- &[type='range'] {
5434
- width: 120px;
5435
- margin: 0px 0;
5436
- height: 20px;
5437
- padding: 0;
5438
- background-color: transparent;
5439
- -webkit-appearance: none;
5440
- }
5441
- &[type='range']:focus {
5442
- outline: none;
5443
- }
5444
- &[type='range']::-webkit-slider-runnable-track {
5445
- background: none;
5446
- border: 0;
5447
- width: 100%;
5448
- height: 20px;
5449
- cursor: pointer;
5450
- }
5451
- &[type='range']::-webkit-slider-thumb {
5452
- margin-top: 0px;
5453
- width: 20px;
5454
- height: 20px;
5455
- background: #ffffff;
5456
- border: 1px solid #000000;
5457
- border-radius: 20px;
5458
- cursor: pointer;
5459
- -webkit-appearance: none;
5460
- }
5461
- &[type='range']:focus::-webkit-slider-runnable-track {
5462
- background: none;
5463
- }
5464
- &[type='range']::-moz-range-track {
5465
- background: none;
5466
- border: 0;
5467
- width: 100%;
5468
- height: 20px;
5469
- cursor: pointer;
5470
- }
5471
- &[type='range']::-moz-range-thumb {
5472
- width: 20px;
5473
- height: 20px;
5474
- background: #ffffff;
5475
- border: 1px solid #000000;
5476
- border-radius: 20px;
5477
- cursor: pointer;
5478
- }
5479
- &[type='range']::-ms-track {
5480
- background: transparent;
5481
- border-color: transparent;
5482
- border-width: 1px 0;
5483
- color: transparent;
5484
- width: 100%;
5485
- height: 20px;
5486
- cursor: pointer;
5487
- }
5488
- &[type='range']::-ms-fill-lower {
5489
- background: #43429e;
5490
- border: 0;
5491
- }
5492
- &[type='range']::-ms-fill-upper {
5493
- background: none;
5494
- border: 0;
5495
- }
5496
- &[type='range']::-ms-thumb {
5497
- width: 20px;
5498
- height: 20px;
5499
- background: #ffffff;
5500
- border: 1px solid #000000;
5501
- border-radius: 20px;
5502
- cursor: pointer;
5503
- margin-top: 0px;
5504
- }
5505
- &[type='range']:focus::-ms-fill-lower {
5506
- background: none;
5507
- }
5508
- &[type='range']:focus::-ms-fill-upper {
5509
- background: none;
5510
- }
5511
- @supports (-ms-ime-align: auto) {
5512
- &[type='range'] {
5513
- margin: 0;
5514
- }
5338
+ .ab-ColorPicker-range[type='range'] {
5339
+ width: 120px;
5340
+ margin: 0;
5341
+ height: 12px !important;
5342
+ min-height: 12px !important;
5343
+ padding: 0;
5344
+ border-radius: 6px;
5345
+ -webkit-appearance: none;
5346
+ appearance: none;
5347
+ }
5348
+ .ab-ColorPicker-range[type='range']:focus {
5349
+ outline: none;
5350
+ }
5351
+ .ab-ColorPicker-range[type='range']::-webkit-slider-runnable-track {
5352
+ background: transparent;
5353
+ border: 0;
5354
+ width: 100%;
5355
+ height: 12px;
5356
+ cursor: pointer;
5357
+ }
5358
+ .ab-ColorPicker-range[type='range']::-webkit-slider-thumb {
5359
+ margin-top: -4px;
5360
+ width: 20px;
5361
+ height: 20px;
5362
+ background: #ffffff;
5363
+ border: 1px solid #000000;
5364
+ border-radius: 50%;
5365
+ cursor: pointer;
5366
+ -webkit-appearance: none;
5367
+ box-sizing: border-box;
5368
+ }
5369
+ .ab-ColorPicker-range[type='range']:focus::-webkit-slider-runnable-track {
5370
+ background: none;
5371
+ }
5372
+ .ab-ColorPicker-range[type='range']::-moz-range-track {
5373
+ background: transparent;
5374
+ border: 0;
5375
+ width: 100%;
5376
+ height: 12px;
5377
+ cursor: pointer;
5378
+ }
5379
+ .ab-ColorPicker-range[type='range']::-moz-range-thumb {
5380
+ width: 20px;
5381
+ height: 20px;
5382
+ background: #ffffff;
5383
+ border: 1px solid #000000;
5384
+ border-radius: 50%;
5385
+ cursor: pointer;
5386
+ box-sizing: border-box;
5387
+ }
5388
+ .ab-ColorPicker-range[type='range']::-ms-track {
5389
+ background: transparent;
5390
+ border-color: transparent;
5391
+ border-width: 1px 0;
5392
+ color: transparent;
5393
+ width: 100%;
5394
+ height: 12px;
5395
+ cursor: pointer;
5396
+ }
5397
+ .ab-ColorPicker-range[type='range']::-ms-fill-lower {
5398
+ background: #43429e;
5399
+ border: 0;
5400
+ }
5401
+ .ab-ColorPicker-range[type='range']::-ms-fill-upper {
5402
+ background: none;
5403
+ border: 0;
5404
+ }
5405
+ .ab-ColorPicker-range[type='range']::-ms-thumb {
5406
+ width: 20px;
5407
+ height: 20px;
5408
+ background: #ffffff;
5409
+ border: 1px solid #000000;
5410
+ border-radius: 50%;
5411
+ cursor: pointer;
5412
+ margin-top: 0px;
5413
+ box-sizing: border-box;
5414
+ }
5415
+ .ab-ColorPicker-range[type='range']:focus::-ms-fill-lower {
5416
+ background: none;
5417
+ }
5418
+ .ab-ColorPicker-range[type='range']:focus::-ms-fill-upper {
5419
+ background: none;
5420
+ }
5421
+ @supports (-ms-ime-align: auto) {
5422
+ .ab-ColorPicker-range[type='range'] {
5423
+ margin: 0;
5515
5424
  }
5516
5425
  }
5517
5426
  .ab-AdaptableOptions {
@@ -5531,7 +5440,7 @@
5531
5440
  font-size: var(--ab-cmp-system-status-list-text__font-size);
5532
5441
  color: var(--ab-cmp-system-status-list-text__color);
5533
5442
  padding: var(--ab-cmp-system-status-list-text__padding);
5534
- margin-right: var(--ab-space-2);
5443
+ margin-right: calc(var(--ab-base-space) * 2);
5535
5444
  }
5536
5445
  .ab-DashboardToolbar__SystemStatus__text--expandable {
5537
5446
  cursor: pointer;
@@ -5539,25 +5448,23 @@
5539
5448
  .ab-DashboardToolbar__SystemStatus__further-information {
5540
5449
  white-space: normal;
5541
5450
  }
5542
- .ab-ObjectCollection__list {
5543
- & > * {
5544
- background: var(--ab-cmp-listgroupitem__background);
5545
- color: var(--ab-cmp-listgroupitem__color);
5546
- }
5547
- & > *:nth-child(2n + 1) {
5548
- background: var(--ab-cmp-listgroupitem--odd__background);
5549
- color: var(--ab-cmp-listgroupitem--odd__color);
5550
- }
5451
+ .ab-ObjectCollection__list > * {
5452
+ background: var(--ab-cmp-listgroupitem__background);
5453
+ color: var(--ab-cmp-listgroupitem__color);
5454
+ }
5455
+ .ab-ObjectCollection__list > *:nth-child(2n + 1) {
5456
+ background: var(--ab-cmp-listgroupitem--odd__background);
5457
+ color: var(--ab-cmp-listgroupitem--odd__color);
5551
5458
  }
5552
5459
  .ab-AdaptableObjectRow {
5553
5460
  align-items: center;
5554
5461
  background: var(--ab-cmp-listgroupitem__background);
5555
5462
  color: var(--ab-cmp-listgroupitem__color);
5556
5463
  border-radius: var(--ab-cmp-listgroupitem__border-radius);
5557
- &:nth-child(2n + 1) {
5558
- background: var(--ab-cmp-listgroupitem--odd__background);
5559
- color: var(--ab-cmp-listgroupitem--odd__color);
5560
- }
5464
+ }
5465
+ .ab-AdaptableObjectRow:nth-child(2n + 1) {
5466
+ background: var(--ab-cmp-listgroupitem--odd__background);
5467
+ color: var(--ab-cmp-listgroupitem--odd__color);
5561
5468
  }
5562
5469
  .ab-AdaptableObjectRow--is-suspended {
5563
5470
  text-decoration: line-through;
@@ -5578,37 +5485,31 @@
5578
5485
  font-family: var(--ab__font-family);
5579
5486
  --ab-popover-triangle-size: 10px;
5580
5487
  }
5581
- .ab-Overlay--show-triangle > .ab-Popover {
5582
- &:before {
5583
- content: '';
5584
- position: absolute;
5585
- width: 0;
5586
- height: 0;
5587
- border-style: solid;
5588
- }
5488
+ :is(.ab-Overlay--show-triangle > .ab-Popover):before {
5489
+ content: '';
5490
+ position: absolute;
5491
+ width: 0;
5492
+ height: 0;
5493
+ border-style: solid;
5589
5494
  }
5590
- .ab-Overlay--position-bottom.ab-Overlay--show-triangle > .ab-Popover {
5591
- &:before {
5592
- border-width: 0 calc(var(--ab-popover-triangle-size) / 2) var(--ab-popover-triangle-size) calc(var(--ab-popover-triangle-size) / 2);
5593
- border-color: transparent transparent var(--ab-cmp-popover__background) transparent;
5594
- left: 50%;
5595
- top: calc(var(--ab-popover-triangle-size) * -1);
5596
- transform: translate3d(calc(var(--ab-popover-triangle-size) * -0.5), 0px, 0px);
5597
- }
5495
+ :is(.ab-Overlay--position-bottom.ab-Overlay--show-triangle > .ab-Popover):before {
5496
+ border-width: 0 calc(var(--ab-popover-triangle-size) / 2) var(--ab-popover-triangle-size) calc(var(--ab-popover-triangle-size) / 2);
5497
+ border-color: transparent transparent var(--ab-cmp-popover__background) transparent;
5498
+ left: 50%;
5499
+ top: calc(var(--ab-popover-triangle-size) * -1);
5500
+ transform: translate3d(calc(var(--ab-popover-triangle-size) * -0.5), 0px, 0px);
5598
5501
  }
5599
- .ab-Overlay--position-top.ab-Overlay--show-triangle > .ab-Popover {
5600
- &:before {
5601
- border-width: var(--ab-popover-triangle-size) calc(var(--ab-popover-triangle-size) / 2) 0 calc(var(--ab-popover-triangle-size) / 2);
5602
- border-color: var(--ab-cmp-popover__background) transparent transparent transparent;
5603
- left: 50%;
5604
- bottom: calc(var(--ab-popover-triangle-size) * -1);
5605
- transform: translate3d(calc(var(--ab-popover-triangle-size) * -0.5), 0px, 0px);
5606
- }
5502
+ :is(.ab-Overlay--position-top.ab-Overlay--show-triangle > .ab-Popover):before {
5503
+ border-width: var(--ab-popover-triangle-size) calc(var(--ab-popover-triangle-size) / 2) 0 calc(var(--ab-popover-triangle-size) / 2);
5504
+ border-color: var(--ab-cmp-popover__background) transparent transparent transparent;
5505
+ left: 50%;
5506
+ bottom: calc(var(--ab-popover-triangle-size) * -1);
5507
+ transform: translate3d(calc(var(--ab-popover-triangle-size) * -0.5), 0px, 0px);
5508
+ }
5509
+ .ab-NocodeWizard,.ab-NocodeWizard *,.ab-NocodeWizard *:before,.ab-NocodeWizard *:after {
5510
+ box-sizing: border-box;
5607
5511
  }
5608
5512
  .ab-NocodeWizard {
5609
- &, *, *:before, *:after {
5610
- box-sizing: border-box;
5611
- }
5612
5513
  padding: var(--ab-cmp-wizard__padding);
5613
5514
  margin: var(--ab-cmp-wizard__margin);
5614
5515
  background: var(--ab-cmp-wizard__background);
@@ -5622,7 +5523,7 @@
5622
5523
  }
5623
5524
  .ab-Button.ab-Button {
5624
5525
  border-radius: var(--ab-cmp-button-border-radius);
5625
- padding: var(--ab-space-2);
5526
+ padding: calc(var(--ab-base-space) * 2);
5626
5527
  }
5627
5528
  .ab-Button.ab-Button--enabled {
5628
5529
  cursor: pointer;
@@ -5632,15 +5533,13 @@
5632
5533
  opacity: var(--ab-cmp-button-disabled-opacity);
5633
5534
  background: var(--ab-cmp-button-disabled-background);
5634
5535
  }
5635
- .ab-DashboardPanel {
5636
- .ab-CheckBox:not(.ab-dd-checkbox), .ab-SimpleButton.ab-SimpleButton--tone-neutral:not(.ab-DropdownButton) {
5637
- fill: currentColor;
5638
- color: var(--ab-cmp-dashboardpanel_header__color);
5639
- border-color: currentColor;
5640
- }
5641
- .glyphicon.glyphicon {
5642
- color: var(--ab-cmp-dashboardpanel__fill);
5643
- }
5536
+ .ab-DashboardPanel .ab-CheckBox:not(.ab-dd-checkbox),.ab-DashboardPanel .ab-SimpleButton.ab-SimpleButton--tone-neutral:not(.ab-DropdownButton) {
5537
+ fill: currentColor;
5538
+ color: var(--ab-cmp-dashboardpanel_header__color);
5539
+ border-color: currentColor;
5540
+ }
5541
+ .ab-DashboardPanel .glyphicon.glyphicon {
5542
+ color: var(--ab-cmp-dashboardpanel__fill);
5644
5543
  }
5645
5544
  .ab-ToolPanelPanel {
5646
5545
  color: var(--ab-cmp-toolpanelpanel__color);
@@ -5648,42 +5547,42 @@
5648
5547
  border: var(--ab-cmp-toolpanelpanel__border);
5649
5548
  }
5650
5549
  .ab-Dashboard__application-icon {
5651
- margin-right: var(--ab-space-2);
5550
+ margin-right: calc(var(--ab-base-space) * 2);
5652
5551
  }
5653
5552
  .ab-Dashboard-Popup__Module-Selector {
5654
5553
  background: var(--ab-cmp-dashboard-module-selector-background);
5655
5554
  }
5656
5555
  .ab-Dashboard__pinned-container {
5657
5556
  border-right: var(--ab-cmp-dashboard-pinned-toolbar-border);
5658
- &:last-child {
5659
- border-right: 0;
5660
- }
5557
+ }
5558
+ .ab-Dashboard__pinned-container:last-child {
5559
+ border-right: 0;
5661
5560
  }
5662
5561
  .ab-ToolPanel {
5663
5562
  flex: 1 1 0;
5664
5563
  min-width: 0;
5665
5564
  color: var(--ab-cmp-toolpanel__color);
5666
5565
  font-family: var(--ab-cmp-toolpanel__font-family);
5667
- .ab-ToolPanel__header {
5668
- background: var(--ab-cmp-toolpanel-header__background);
5669
- color: var(--ab-cmp-toolpanel-header__color);
5670
- }
5671
- .ab-ToolPanel__header__buttons {
5672
- grid-gap: var(--ab-cmp-toolpanel-header__grid-gap);
5673
- }
5674
- .ab-ToolPanel__custom-content__buttons {
5675
- display: flex;
5676
- flex-direction: row;
5677
- flex-wrap: wrap;
5678
- grid-gap: var(--ab-cmp-toolpanel-header__grid-gap);
5679
- }
5680
- .ab-StateManagement__Clear-Button, .ab-StateManagement__Load-Button {
5681
- justify-content: center;
5682
- flex: 1;
5683
- }
5684
- .ab-StateManagement__Clear-Button, .ab-StateManagement__Load-Button, .ab-StateManagement__Export-Dropdown {
5685
- margin-bottom: var(--ab-space-1);
5686
- }
5566
+ }
5567
+ .ab-ToolPanel .ab-ToolPanel__header {
5568
+ background: var(--ab-cmp-toolpanel-header__background);
5569
+ color: var(--ab-cmp-toolpanel-header__color);
5570
+ }
5571
+ .ab-ToolPanel .ab-ToolPanel__header__buttons {
5572
+ grid-gap: var(--ab-cmp-toolpanel-header__grid-gap);
5573
+ }
5574
+ .ab-ToolPanel .ab-ToolPanel__custom-content__buttons {
5575
+ display: flex;
5576
+ flex-direction: row;
5577
+ flex-wrap: wrap;
5578
+ grid-gap: var(--ab-cmp-toolpanel-header__grid-gap);
5579
+ }
5580
+ .ab-ToolPanel .ab-StateManagement__Clear-Button,.ab-ToolPanel .ab-StateManagement__Load-Button {
5581
+ justify-content: center;
5582
+ flex: 1;
5583
+ }
5584
+ .ab-ToolPanel .ab-StateManagement__Clear-Button,.ab-ToolPanel .ab-StateManagement__Load-Button,.ab-ToolPanel .ab-StateManagement__Export-Dropdown {
5585
+ margin-bottom: var(--ab-base-space);
5687
5586
  }
5688
5587
  .ab-CustomSortWizard__SortOrder .ab-Loader__text {
5689
5588
  font-size: var(--ab-cmp-custom-sort-wizard-loader__font-size);
@@ -5721,9 +5620,9 @@
5721
5620
  }
5722
5621
  .ab-Adaptable-Popup--settings-popup {
5723
5622
  height: var(--ab-cmp-adaptable-popup--settings__height);
5724
- .ab-Dialog__close-button {
5725
- top: 9px;
5726
- }
5623
+ }
5624
+ .ab-Adaptable-Popup--settings-popup .ab-Dialog__close-button {
5625
+ top: 9px;
5727
5626
  }
5728
5627
  .ab-Adaptable-Popup__Panel {
5729
5628
  width: 100%;
@@ -5746,12 +5645,12 @@
5746
5645
  .ab-Window-Modal {
5747
5646
  max-height: 100%;
5748
5647
  box-shadow: var(--ab-cmp-adaptable-window-popup__box-shadow);
5749
- .ab-Dialog__close-button {
5750
- top: 3px;
5751
- }
5752
- .ab-Panel {
5753
- max-height: initial;
5754
- }
5648
+ }
5649
+ .ab-Window-Modal .ab-Dialog__close-button {
5650
+ top: 3px;
5651
+ }
5652
+ .ab-Window-Modal .ab-Panel {
5653
+ max-height: initial;
5755
5654
  }
5756
5655
  .ab-Adaptable-Object-List__Item {
5757
5656
  background-color: var(--ab-cmp-adaptable-object-list-item__background-color);
@@ -5762,25 +5661,25 @@
5762
5661
  padding: var(--ab-cmp-adaptable-object-compact-list__padding);
5763
5662
  background: var(--ab-cmp-adaptable-object-compact-list__background);
5764
5663
  max-height: 70vh;
5765
- .ab-Adaptable-Object-Compact-List__Header {
5766
- padding: var(--ab-cmp-adaptable-object-compact-list__header__padding);
5767
- margin-bottom: var(--ab-cmp-adaptable-object-compact-list__header__margin-bottom);
5768
- }
5769
- .ab-Adaptable-Object-Compact-List__Title {
5770
- font-size: var(--ab-font-size-4);
5771
- }
5772
- .ab-Adaptable-Object-Compact-List__Body {
5773
- overflow: auto;
5774
- height: 100%;
5775
- }
5776
- .ab-Adaptable-Object-Compact-List__Item {
5777
- padding: var(--ab-cmp-adaptable-object-compact-list-item__padding);
5778
- margin-bottom: var(--ab-cmp-adaptable-object-compact-list-item__margin-bottom);
5779
- background: var(--ab-cmp-adaptable-object-compact-list-item__background);
5780
- &:last-child {
5781
- margin-bottom: 0;
5782
- }
5783
- }
5664
+ }
5665
+ .ab-Adaptable-Object-Compact-List .ab-Adaptable-Object-Compact-List__Header {
5666
+ padding: var(--ab-cmp-adaptable-object-compact-list__header__padding);
5667
+ margin-bottom: var(--ab-cmp-adaptable-object-compact-list__header__margin-bottom);
5668
+ }
5669
+ .ab-Adaptable-Object-Compact-List .ab-Adaptable-Object-Compact-List__Title {
5670
+ font-size: var(--ab-font-size-4);
5671
+ }
5672
+ .ab-Adaptable-Object-Compact-List .ab-Adaptable-Object-Compact-List__Body {
5673
+ overflow: auto;
5674
+ height: 100%;
5675
+ }
5676
+ .ab-Adaptable-Object-Compact-List .ab-Adaptable-Object-Compact-List__Item {
5677
+ padding: var(--ab-cmp-adaptable-object-compact-list-item__padding);
5678
+ margin-bottom: var(--ab-cmp-adaptable-object-compact-list-item__margin-bottom);
5679
+ background: var(--ab-cmp-adaptable-object-compact-list-item__background);
5680
+ }
5681
+ :is(.ab-Adaptable-Object-Compact-List .ab-Adaptable-Object-Compact-List__Item):last-child {
5682
+ margin-bottom: 0;
5784
5683
  }
5785
5684
  .ab-Adaptable-Object-List__Item__edit-property {
5786
5685
  visibility: hidden;
@@ -5791,11 +5690,9 @@
5791
5690
  }
5792
5691
  .ab-Adaptable-Object-List__Item__label {
5793
5692
  width: var(--ab-cmp-adaptable-object-list-item-label__width);
5794
- &:hover {
5795
- .ab-Adaptable-Object-List__Item__edit-property {
5796
- visibility: visible;
5797
- }
5798
- }
5693
+ }
5694
+ .ab-Adaptable-Object-List__Item__label:hover .ab-Adaptable-Object-List__Item__edit-property {
5695
+ visibility: visible;
5799
5696
  }
5800
5697
  .ab-Adaptable-Object-Compact-List__Item__Name {
5801
5698
  width: var(--ab-cmp-adaptable-object-compact-list-item-name__width);
@@ -5820,9 +5717,9 @@
5820
5717
  right: 4px;
5821
5718
  overflow: hidden;
5822
5719
  border-radius: var(--ab__border-radius);
5823
- margin-right: var(--ab-space-1);
5824
- margin-top: var(--ab-space-1);
5825
- padding: 0 var(--ab-space-2);
5720
+ margin-right: var(--ab-base-space);
5721
+ margin-top: var(--ab-base-space);
5722
+ padding: 0 calc(var(--ab-base-space) * 2);
5826
5723
  font-size: var(--ab-font-size-2);
5827
5724
  }
5828
5725
  .ab-ReorderDraggable {
@@ -5842,18 +5739,16 @@
5842
5739
  background: none;
5843
5740
  font-weight: 400;
5844
5741
  border-right: var(--ab-cmp-adaptable-statusbar__border);
5845
- &:last-child {
5846
- border-right: 0;
5847
- }
5848
- &, .ab-SimpleButton {
5849
- color: var(--ab-cmp-adaptable-statusbar__color);
5850
- }
5851
5742
  }
5852
- button.ab-StatusBar__SubPanel {
5853
- &:hover {
5854
- background-color: var(--ab-cmp-adaptable-statusbar-sub-panel-icon__background-color-hover);
5855
- cursor: pointer;
5856
- }
5743
+ .ab-StatusBar__SubPanel:last-child {
5744
+ border-right: 0;
5745
+ }
5746
+ .ab-StatusBar__SubPanel,.ab-StatusBar__SubPanel .ab-SimpleButton {
5747
+ color: var(--ab-cmp-adaptable-statusbar__color);
5748
+ }
5749
+ button.ab-StatusBar__SubPanel:hover {
5750
+ background-color: var(--ab-cmp-adaptable-statusbar-sub-panel-icon__background-color-hover);
5751
+ cursor: pointer;
5857
5752
  }
5858
5753
  .ab-Shared-Entity-Shared-Object {
5859
5754
  border: var(--ab-cmp-adaptable-shared-entity-shared-object__border);
@@ -5888,32 +5783,22 @@
5888
5783
  border: var(--ab-note-popup-border);
5889
5784
  min-width: var(--ab-note-popup-min-width);
5890
5785
  }
5891
- .ab-Cell-Note {
5892
- &:before {
5893
- content: '';
5894
- position: absolute;
5895
- top: 0;
5896
- right: 0;
5897
- width: 0;
5898
- height: 0;
5899
- border-style: solid;
5900
- border-width: 0 8px 8px 0;
5901
- border-color: transparent var(--ab-CellNote-triangle-color) transparent transparent;
5902
- }
5786
+ .ab-Cell-Note:before {
5787
+ content: '';
5788
+ position: absolute;
5789
+ top: 0;
5790
+ right: 0;
5791
+ width: 0;
5792
+ height: 0;
5793
+ border-style: solid;
5794
+ border-width: 0 8px 8px 0;
5795
+ border-color: transparent var(--ab-CellNote-triangle-color) transparent transparent;
5903
5796
  }
5904
5797
  :root {
5905
5798
  --ab-Dataimport-validation-error__border: 1px dashed var(--ab-color-error);
5906
5799
  }
5907
- .ab-QuickFilter {
5908
- overflow-y: auto;
5909
- font-size: var(--ab-cmp-quickfilter__font-size);
5910
- border: var(--ab-cmp-quickfilter__border);
5911
- background: var(--ab-cmp-quickfilter__background);
5912
- }
5913
- .ab-QuickFilter__dropdown {
5914
- white-space: nowrap;
5915
- max-height: 60vh;
5916
- overflow-y: auto;
5800
+ .ab-ListBoxFilterForm {
5801
+ width: 100%;
5917
5802
  }
5918
5803
  .ab-FloatingFilter {
5919
5804
  font-size: var(--ab-cmp-column-filter-input__font-size);
@@ -6584,10 +6469,10 @@
6584
6469
  .ab-ActionColumn {
6585
6470
  height: 100%;
6586
6471
  display: flex;
6587
- column-gap: var(--ab-space-1);
6588
- & > button.ab-SimpleButton {
6589
- height: 100%;
6590
- }
6472
+ column-gap: var(--ab-base-space);
6473
+ }
6474
+ .ab-ActionColumn > button.ab-SimpleButton {
6475
+ height: 100%;
6591
6476
  }
6592
6477
  .Toastify__toast-container {
6593
6478
  border-style: none;
@@ -6625,65 +6510,57 @@
6625
6510
  .Toastify__toast--error {
6626
6511
  --ab-toast-cmp__shadow-color: var(--ab-color-error);
6627
6512
  }
6628
- .ab--custom-mac-like-scrollbars {
6629
- .ab-Grid *, .ag-root *, .ab-Dashboard, .ab-Dashboard *, .ab-Panel, .ab-Panel *, .ab-Modal, .ab-Modal * {
6630
- &::-webkit-scrollbar {
6631
- background-color: rgba(0, 0, 0, 0);
6632
- border-radius: 100px;
6633
- }
6634
- &::-webkit-scrollbar:vertical {
6635
- width: var(--ab-custom-scrollbar-size);
6636
- }
6637
- &::-webkit-scrollbar:horizontal {
6638
- height: var(--ab-custom-scrollbar-size);
6639
- }
6640
- &::-webkit-scrollbar:hover {
6641
- background-color: rgba(0, 0, 0, 0.09);
6642
- }
6643
- &::-webkit-scrollbar-thumb {
6644
- background: rgba(0, 0, 0, 0.5);
6645
- border-radius: 100px;
6646
- background-clip: padding-box;
6647
- border: 2px solid rgba(0, 0, 0, 0);
6648
- }
6649
- &::-webkit-scrollbar-thumb:vertical {
6650
- min-height: var(--ab-custom-scrollbar-size);
6651
- }
6652
- &::-webkit-scrollbar-thumb:horizontal {
6653
- min-width: var(--ab-custom-scrollbar-size);
6654
- }
6655
- &::-webkit-scrollbar-thumb:active {
6656
- background: rgba(0, 0, 0, 0.61);
6657
- border-radius: 100px;
6658
- }
6659
- }
6513
+ :is(.ab--custom-mac-like-scrollbars .ab-Grid *,.ab--custom-mac-like-scrollbars .ag-root *,.ab--custom-mac-like-scrollbars .ab-Dashboard,.ab--custom-mac-like-scrollbars .ab-Dashboard *,.ab--custom-mac-like-scrollbars .ab-Panel,.ab--custom-mac-like-scrollbars .ab-Panel *,.ab--custom-mac-like-scrollbars .ab-Modal,.ab--custom-mac-like-scrollbars .ab-Modal *)::-webkit-scrollbar {
6514
+ background-color: rgba(0, 0, 0, 0);
6515
+ border-radius: 100px;
6516
+ }
6517
+ :is(.ab--custom-mac-like-scrollbars .ab-Grid *,.ab--custom-mac-like-scrollbars .ag-root *,.ab--custom-mac-like-scrollbars .ab-Dashboard,.ab--custom-mac-like-scrollbars .ab-Dashboard *,.ab--custom-mac-like-scrollbars .ab-Panel,.ab--custom-mac-like-scrollbars .ab-Panel *,.ab--custom-mac-like-scrollbars .ab-Modal,.ab--custom-mac-like-scrollbars .ab-Modal *)::-webkit-scrollbar:vertical {
6518
+ width: var(--ab-custom-scrollbar-size);
6519
+ }
6520
+ :is(.ab--custom-mac-like-scrollbars .ab-Grid *,.ab--custom-mac-like-scrollbars .ag-root *,.ab--custom-mac-like-scrollbars .ab-Dashboard,.ab--custom-mac-like-scrollbars .ab-Dashboard *,.ab--custom-mac-like-scrollbars .ab-Panel,.ab--custom-mac-like-scrollbars .ab-Panel *,.ab--custom-mac-like-scrollbars .ab-Modal,.ab--custom-mac-like-scrollbars .ab-Modal *)::-webkit-scrollbar:horizontal {
6521
+ height: var(--ab-custom-scrollbar-size);
6522
+ }
6523
+ :is(.ab--custom-mac-like-scrollbars .ab-Grid *,.ab--custom-mac-like-scrollbars .ag-root *,.ab--custom-mac-like-scrollbars .ab-Dashboard,.ab--custom-mac-like-scrollbars .ab-Dashboard *,.ab--custom-mac-like-scrollbars .ab-Panel,.ab--custom-mac-like-scrollbars .ab-Panel *,.ab--custom-mac-like-scrollbars .ab-Modal,.ab--custom-mac-like-scrollbars .ab-Modal *)::-webkit-scrollbar:hover {
6524
+ background-color: rgba(0, 0, 0, 0.09);
6525
+ }
6526
+ :is(.ab--custom-mac-like-scrollbars .ab-Grid *,.ab--custom-mac-like-scrollbars .ag-root *,.ab--custom-mac-like-scrollbars .ab-Dashboard,.ab--custom-mac-like-scrollbars .ab-Dashboard *,.ab--custom-mac-like-scrollbars .ab-Panel,.ab--custom-mac-like-scrollbars .ab-Panel *,.ab--custom-mac-like-scrollbars .ab-Modal,.ab--custom-mac-like-scrollbars .ab-Modal *)::-webkit-scrollbar-thumb {
6527
+ background: rgba(0, 0, 0, 0.5);
6528
+ border-radius: 100px;
6529
+ background-clip: padding-box;
6530
+ border: 2px solid rgba(0, 0, 0, 0);
6531
+ }
6532
+ :is(.ab--custom-mac-like-scrollbars .ab-Grid *,.ab--custom-mac-like-scrollbars .ag-root *,.ab--custom-mac-like-scrollbars .ab-Dashboard,.ab--custom-mac-like-scrollbars .ab-Dashboard *,.ab--custom-mac-like-scrollbars .ab-Panel,.ab--custom-mac-like-scrollbars .ab-Panel *,.ab--custom-mac-like-scrollbars .ab-Modal,.ab--custom-mac-like-scrollbars .ab-Modal *)::-webkit-scrollbar-thumb:vertical {
6533
+ min-height: var(--ab-custom-scrollbar-size);
6534
+ }
6535
+ :is(.ab--custom-mac-like-scrollbars .ab-Grid *,.ab--custom-mac-like-scrollbars .ag-root *,.ab--custom-mac-like-scrollbars .ab-Dashboard,.ab--custom-mac-like-scrollbars .ab-Dashboard *,.ab--custom-mac-like-scrollbars .ab-Panel,.ab--custom-mac-like-scrollbars .ab-Panel *,.ab--custom-mac-like-scrollbars .ab-Modal,.ab--custom-mac-like-scrollbars .ab-Modal *)::-webkit-scrollbar-thumb:horizontal {
6536
+ min-width: var(--ab-custom-scrollbar-size);
6537
+ }
6538
+ :is(.ab--custom-mac-like-scrollbars .ab-Grid *,.ab--custom-mac-like-scrollbars .ag-root *,.ab--custom-mac-like-scrollbars .ab-Dashboard,.ab--custom-mac-like-scrollbars .ab-Dashboard *,.ab--custom-mac-like-scrollbars .ab-Panel,.ab--custom-mac-like-scrollbars .ab-Panel *,.ab--custom-mac-like-scrollbars .ab-Modal,.ab--custom-mac-like-scrollbars .ab-Modal *)::-webkit-scrollbar-thumb:active {
6539
+ background: rgba(0, 0, 0, 0.61);
6540
+ border-radius: 100px;
6660
6541
  }
6661
6542
  .ag-details-row {
6662
6543
  display: flex;
6663
6544
  flex-flow: column;
6664
- .ag-details-grid {
6665
- flex: 1;
6666
- }
6667
6545
  }
6668
- .ab-wait-for-progress-indicator {
6669
- &.ab-Grid {
6670
- pointer-events: none;
6671
- }
6546
+ .ag-details-row .ag-details-grid {
6547
+ flex: 1;
6548
+ }
6549
+ .ab-wait-for-progress-indicator.ab-Grid {
6550
+ pointer-events: none;
6672
6551
  }
6673
6552
  .ab__ng-wrapper {
6674
6553
  display: flex;
6675
6554
  flex-flow: var(--ab_flex-direction);
6676
6555
  }
6677
6556
  .ag-header-cell:has(.ab-FloatingFilter) {
6678
- padding: var(--ab-space-1) !important;
6557
+ padding: var(--ab-base-space) !important;
6679
6558
  }
6680
6559
  .ag-group-floating-filter:has(.ab-FloatingFilter) {
6681
6560
  height: 100% !important;
6682
6561
  }
6683
- .ag-group-floating-filter {
6684
- .ag-react-container {
6685
- width: 100% !important;
6686
- }
6562
+ .ag-group-floating-filter .ag-react-container {
6563
+ width: 100% !important;
6687
6564
  }
6688
6565
  .ab-header__align-center .ag-header-cell-label {
6689
6566
  justify-content: center;
@@ -6694,8 +6571,11 @@
6694
6571
  .ab-header__align-left .ag-header-cell-label {
6695
6572
  justify-content: flex-start;
6696
6573
  }
6574
+ .ag-side-bar .ag-react-container {
6575
+ width: 100%;
6576
+ }
6697
6577
  }
6698
- @layer adaptable.theme {
6578
+ @layer adaptable.theming {
6699
6579
  html.ab--theme-light {
6700
6580
  --ab-theme-loaded: light;
6701
6581
  }