@visns-studio/visns-components 5.6.4 → 5.6.6
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.
|
@@ -145,7 +145,8 @@
|
|
|
145
145
|
}
|
|
146
146
|
|
|
147
147
|
.reportSection {
|
|
148
|
-
padding-bottom:
|
|
148
|
+
padding-bottom: 0;
|
|
149
|
+
margin-bottom: 16px;
|
|
149
150
|
}
|
|
150
151
|
|
|
151
152
|
.reportSection h3 {
|
|
@@ -160,11 +161,11 @@
|
|
|
160
161
|
display: flex;
|
|
161
162
|
justify-content: space-between;
|
|
162
163
|
align-items: center;
|
|
163
|
-
margin-bottom:
|
|
164
|
+
margin-bottom: 0;
|
|
164
165
|
padding: 8px 12px;
|
|
165
166
|
background-color: #f9fafb;
|
|
166
167
|
border: 1px solid var(--border-color, #e5e7eb);
|
|
167
|
-
border-radius:
|
|
168
|
+
border-radius: 0;
|
|
168
169
|
|
|
169
170
|
h3 {
|
|
170
171
|
margin: 0;
|
|
@@ -175,7 +176,11 @@
|
|
|
175
176
|
.sectionHeaderActions {
|
|
176
177
|
display: flex;
|
|
177
178
|
align-items: center;
|
|
178
|
-
gap:
|
|
179
|
+
gap: 12px;
|
|
180
|
+
|
|
181
|
+
.btn {
|
|
182
|
+
margin: 0;
|
|
183
|
+
}
|
|
179
184
|
}
|
|
180
185
|
|
|
181
186
|
.helpButton {
|
|
@@ -344,15 +349,26 @@
|
|
|
344
349
|
.joinTablesContainer {
|
|
345
350
|
background-color: transparent;
|
|
346
351
|
padding: 0;
|
|
347
|
-
margin-bottom:
|
|
352
|
+
margin-bottom: 0;
|
|
353
|
+
margin-top: 0;
|
|
354
|
+
|
|
355
|
+
// When inside a filterGroup, add a border
|
|
356
|
+
.filterGroup & {
|
|
357
|
+
border: 1px solid var(--border-color, #e5e7eb);
|
|
358
|
+
border-top: none;
|
|
359
|
+
border-radius: 0;
|
|
360
|
+
padding: 20px;
|
|
361
|
+
background-color: #f9fafb;
|
|
362
|
+
}
|
|
348
363
|
}
|
|
349
364
|
|
|
350
365
|
// Filter group styles
|
|
351
366
|
.filterGroup {
|
|
352
367
|
margin-bottom: 16px;
|
|
353
|
-
border:
|
|
354
|
-
border-radius:
|
|
368
|
+
border: none;
|
|
369
|
+
border-radius: 0;
|
|
355
370
|
overflow: hidden;
|
|
371
|
+
margin-top: 0;
|
|
356
372
|
}
|
|
357
373
|
|
|
358
374
|
.filterGroupHeader {
|
|
@@ -361,7 +377,8 @@
|
|
|
361
377
|
align-items: center;
|
|
362
378
|
padding: 12px 16px;
|
|
363
379
|
background-color: #f3f4f6;
|
|
364
|
-
border
|
|
380
|
+
border: 1px solid var(--border-color, #e5e7eb);
|
|
381
|
+
border-radius: 0;
|
|
365
382
|
}
|
|
366
383
|
|
|
367
384
|
.filterGroupTitle {
|
|
@@ -401,7 +418,7 @@
|
|
|
401
418
|
padding: 12px 16px;
|
|
402
419
|
background-color: #f9fafb;
|
|
403
420
|
border: 1px solid var(--border-color, #e5e7eb);
|
|
404
|
-
border-
|
|
421
|
+
border-top: none;
|
|
405
422
|
}
|
|
406
423
|
|
|
407
424
|
.mainFilterOperator {
|
|
@@ -518,20 +535,161 @@
|
|
|
518
535
|
font-style: italic;
|
|
519
536
|
font-size: 0.9em;
|
|
520
537
|
background-color: #f9fafb;
|
|
538
|
+
border: 1px solid var(--border-color, #e5e7eb);
|
|
539
|
+
border-top: none;
|
|
540
|
+
border-radius: 0;
|
|
521
541
|
}
|
|
522
542
|
|
|
523
543
|
.joinSection {
|
|
524
|
-
margin-top:
|
|
544
|
+
margin-top: 0;
|
|
525
545
|
padding: 16px;
|
|
526
546
|
border: 1px solid var(--border-color, #e5e7eb);
|
|
527
|
-
border-radius:
|
|
547
|
+
border-radius: 0;
|
|
528
548
|
background-color: white;
|
|
529
|
-
margin-bottom:
|
|
549
|
+
margin-bottom: 0;
|
|
530
550
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
531
551
|
|
|
532
552
|
&:first-child {
|
|
533
553
|
margin-top: 0;
|
|
534
554
|
}
|
|
555
|
+
|
|
556
|
+
// When inside a filterGroup, style for better visual distinction
|
|
557
|
+
.filterGroup .joinTablesContainer & {
|
|
558
|
+
border: 1px solid var(--border-color, #e5e7eb);
|
|
559
|
+
border-radius: 6px;
|
|
560
|
+
background-color: white;
|
|
561
|
+
margin: 0 0 16px 0;
|
|
562
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
563
|
+
position: relative;
|
|
564
|
+
|
|
565
|
+
&:last-child {
|
|
566
|
+
margin-bottom: 0;
|
|
567
|
+
}
|
|
568
|
+
|
|
569
|
+
// Add a left border with a distinct color for visual emphasis
|
|
570
|
+
border-left: 3px solid var(--primary-color, #2563eb);
|
|
571
|
+
|
|
572
|
+
// Add alternating background colors for even better distinction
|
|
573
|
+
&:nth-child(odd) {
|
|
574
|
+
background-color: white;
|
|
575
|
+
}
|
|
576
|
+
|
|
577
|
+
&:nth-child(even) {
|
|
578
|
+
background-color: #f9fafb;
|
|
579
|
+
}
|
|
580
|
+
|
|
581
|
+
// Add a numbered indicator for each filter
|
|
582
|
+
&::before {
|
|
583
|
+
content: attr(data-filter-index);
|
|
584
|
+
position: absolute;
|
|
585
|
+
top: -10px;
|
|
586
|
+
left: -10px;
|
|
587
|
+
width: 24px;
|
|
588
|
+
height: 24px;
|
|
589
|
+
background-color: var(--primary-color, #2563eb);
|
|
590
|
+
color: white;
|
|
591
|
+
border-radius: 50%;
|
|
592
|
+
display: flex;
|
|
593
|
+
align-items: center;
|
|
594
|
+
justify-content: center;
|
|
595
|
+
font-size: 0.8em;
|
|
596
|
+
font-weight: bold;
|
|
597
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
598
|
+
z-index: 1;
|
|
599
|
+
}
|
|
600
|
+
}
|
|
601
|
+
|
|
602
|
+
// Style for sort criteria
|
|
603
|
+
&[data-sort-index] {
|
|
604
|
+
border: 1px solid var(--border-color, #e5e7eb);
|
|
605
|
+
border-radius: 0;
|
|
606
|
+
background-color: white;
|
|
607
|
+
margin: 0;
|
|
608
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
609
|
+
position: relative;
|
|
610
|
+
|
|
611
|
+
&:last-child {
|
|
612
|
+
margin-bottom: 0;
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
// Add a left border with a distinct color for visual emphasis
|
|
616
|
+
border-left: 3px solid var(--primary-color, #2563eb);
|
|
617
|
+
|
|
618
|
+
// Add alternating background colors for even better distinction
|
|
619
|
+
&:nth-child(odd) {
|
|
620
|
+
background-color: white;
|
|
621
|
+
}
|
|
622
|
+
|
|
623
|
+
&:nth-child(even) {
|
|
624
|
+
background-color: #f9fafb;
|
|
625
|
+
}
|
|
626
|
+
|
|
627
|
+
// Add a numbered indicator for each sort criterion
|
|
628
|
+
&::before {
|
|
629
|
+
content: attr(data-sort-index);
|
|
630
|
+
position: absolute;
|
|
631
|
+
top: -10px;
|
|
632
|
+
left: -10px;
|
|
633
|
+
width: 24px;
|
|
634
|
+
height: 24px;
|
|
635
|
+
background-color: var(--primary-color, #2563eb);
|
|
636
|
+
color: white;
|
|
637
|
+
border-radius: 50%;
|
|
638
|
+
display: flex;
|
|
639
|
+
align-items: center;
|
|
640
|
+
justify-content: center;
|
|
641
|
+
font-size: 0.8em;
|
|
642
|
+
font-weight: bold;
|
|
643
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
644
|
+
z-index: 1;
|
|
645
|
+
}
|
|
646
|
+
}
|
|
647
|
+
|
|
648
|
+
// Style for join tables
|
|
649
|
+
&[data-join-index] {
|
|
650
|
+
border: 1px solid var(--border-color, #e5e7eb);
|
|
651
|
+
border-radius: 0;
|
|
652
|
+
background-color: white;
|
|
653
|
+
margin: 0;
|
|
654
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
655
|
+
position: relative;
|
|
656
|
+
|
|
657
|
+
&:last-child {
|
|
658
|
+
margin-bottom: 0;
|
|
659
|
+
}
|
|
660
|
+
|
|
661
|
+
// Add a left border with a distinct color for visual emphasis
|
|
662
|
+
border-left: 3px solid var(--primary-color, #2563eb);
|
|
663
|
+
|
|
664
|
+
// Add alternating background colors for even better distinction
|
|
665
|
+
&:nth-child(odd) {
|
|
666
|
+
background-color: white;
|
|
667
|
+
}
|
|
668
|
+
|
|
669
|
+
&:nth-child(even) {
|
|
670
|
+
background-color: #f9fafb;
|
|
671
|
+
}
|
|
672
|
+
|
|
673
|
+
// Add a numbered indicator for each join
|
|
674
|
+
&::before {
|
|
675
|
+
content: attr(data-join-index);
|
|
676
|
+
position: absolute;
|
|
677
|
+
top: -10px;
|
|
678
|
+
left: -10px;
|
|
679
|
+
width: 24px;
|
|
680
|
+
height: 24px;
|
|
681
|
+
background-color: var(--primary-color, #2563eb);
|
|
682
|
+
color: white;
|
|
683
|
+
border-radius: 50%;
|
|
684
|
+
display: flex;
|
|
685
|
+
align-items: center;
|
|
686
|
+
justify-content: center;
|
|
687
|
+
font-size: 0.8em;
|
|
688
|
+
font-weight: bold;
|
|
689
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
690
|
+
z-index: 1;
|
|
691
|
+
}
|
|
692
|
+
}
|
|
535
693
|
}
|
|
536
694
|
|
|
537
695
|
.joinHeader {
|
|
@@ -548,6 +706,75 @@
|
|
|
548
706
|
color: var(--heading-color, #1f2937);
|
|
549
707
|
font-weight: 600;
|
|
550
708
|
}
|
|
709
|
+
|
|
710
|
+
// When inside a filterGroup, style for better visual distinction
|
|
711
|
+
.filterGroup .joinTablesContainer .joinSection & {
|
|
712
|
+
background-color: #f3f4f6;
|
|
713
|
+
padding: 12px 16px;
|
|
714
|
+
margin: -16px -16px 12px -16px;
|
|
715
|
+
border-radius: 5px 5px 0 0;
|
|
716
|
+
border-bottom: 1px solid var(--border-color, #e5e7eb);
|
|
717
|
+
|
|
718
|
+
h4 {
|
|
719
|
+
color: var(--primary-color, #2563eb);
|
|
720
|
+
font-weight: 600;
|
|
721
|
+
display: flex;
|
|
722
|
+
align-items: center;
|
|
723
|
+
|
|
724
|
+
&::before {
|
|
725
|
+
content: 'Filter ' attr(data-filter-index);
|
|
726
|
+
font-weight: 700;
|
|
727
|
+
margin-right: 8px;
|
|
728
|
+
color: var(--primary-color, #2563eb);
|
|
729
|
+
}
|
|
730
|
+
}
|
|
731
|
+
}
|
|
732
|
+
|
|
733
|
+
// Style for sort criteria
|
|
734
|
+
.joinTablesContainer .joinSection[data-sort-index] & {
|
|
735
|
+
background-color: #f3f4f6;
|
|
736
|
+
padding: 12px 16px;
|
|
737
|
+
margin: -16px -16px 12px -16px;
|
|
738
|
+
border-radius: 5px 5px 0 0;
|
|
739
|
+
border-bottom: 1px solid var(--border-color, #e5e7eb);
|
|
740
|
+
|
|
741
|
+
h4 {
|
|
742
|
+
color: var(--primary-color, #2563eb);
|
|
743
|
+
font-weight: 600;
|
|
744
|
+
display: flex;
|
|
745
|
+
align-items: center;
|
|
746
|
+
|
|
747
|
+
&::before {
|
|
748
|
+
content: 'Sort ' attr(data-sort-index);
|
|
749
|
+
font-weight: 700;
|
|
750
|
+
margin-right: 8px;
|
|
751
|
+
color: var(--primary-color, #2563eb);
|
|
752
|
+
}
|
|
753
|
+
}
|
|
754
|
+
}
|
|
755
|
+
|
|
756
|
+
// Style for join tables
|
|
757
|
+
.joinTablesContainer .joinSection[data-join-index] & {
|
|
758
|
+
background-color: #f3f4f6;
|
|
759
|
+
padding: 12px 16px;
|
|
760
|
+
margin: -16px -16px 12px -16px;
|
|
761
|
+
border-radius: 5px 5px 0 0;
|
|
762
|
+
border-bottom: 1px solid var(--border-color, #e5e7eb);
|
|
763
|
+
|
|
764
|
+
h4 {
|
|
765
|
+
color: var(--primary-color, #2563eb);
|
|
766
|
+
font-weight: 600;
|
|
767
|
+
display: flex;
|
|
768
|
+
align-items: center;
|
|
769
|
+
|
|
770
|
+
&::before {
|
|
771
|
+
content: 'Join ' attr(data-join-index);
|
|
772
|
+
font-weight: 700;
|
|
773
|
+
margin-right: 8px;
|
|
774
|
+
color: var(--primary-color, #2563eb);
|
|
775
|
+
}
|
|
776
|
+
}
|
|
777
|
+
}
|
|
551
778
|
}
|
|
552
779
|
|
|
553
780
|
.removeJoinBtn {
|
|
@@ -589,6 +816,27 @@
|
|
|
589
816
|
color: var(--paragraph-color, #4b5563);
|
|
590
817
|
font-weight: 500;
|
|
591
818
|
}
|
|
819
|
+
|
|
820
|
+
// When inside a filter, add more spacing and styling
|
|
821
|
+
.filterGroup .joinTablesContainer .joinSection & {
|
|
822
|
+
margin-bottom: 16px;
|
|
823
|
+
|
|
824
|
+
label {
|
|
825
|
+
font-weight: 600;
|
|
826
|
+
color: var(--heading-color, #1f2937);
|
|
827
|
+
margin-bottom: 6px;
|
|
828
|
+
}
|
|
829
|
+
|
|
830
|
+
select,
|
|
831
|
+
input {
|
|
832
|
+
border-color: #d1d5db;
|
|
833
|
+
|
|
834
|
+
&:focus {
|
|
835
|
+
border-color: var(--primary-color, #2563eb);
|
|
836
|
+
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
|
|
837
|
+
}
|
|
838
|
+
}
|
|
839
|
+
}
|
|
592
840
|
}
|
|
593
841
|
|
|
594
842
|
.addJoinButtonContainer {
|
|
@@ -1095,7 +1343,7 @@
|
|
|
1095
1343
|
display: flex;
|
|
1096
1344
|
justify-content: space-between;
|
|
1097
1345
|
align-items: center;
|
|
1098
|
-
margin-bottom:
|
|
1346
|
+
margin-bottom: 0;
|
|
1099
1347
|
}
|
|
1100
1348
|
|
|
1101
1349
|
.sectionHeader h3 {
|
|
@@ -318,6 +318,7 @@ input[type='file'] {
|
|
|
318
318
|
bottom: 15px;
|
|
319
319
|
right: 20px;
|
|
320
320
|
width: auto;
|
|
321
|
+
z-index: 100;
|
|
321
322
|
}
|
|
322
323
|
|
|
323
324
|
.polActions button {
|
|
@@ -327,6 +328,53 @@ input[type='file'] {
|
|
|
327
328
|
margin: 0 0.15em;
|
|
328
329
|
}
|
|
329
330
|
|
|
331
|
+
/* For in-place editing mode */
|
|
332
|
+
:global(.inPlaceEdit) {
|
|
333
|
+
background-color: rgba(245, 247, 250, 0.7);
|
|
334
|
+
border-radius: 5px;
|
|
335
|
+
padding: 10px;
|
|
336
|
+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
|
|
337
|
+
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
338
|
+
margin-bottom: 20px;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
:global(.inPlaceEdit) [class*='gridtxt__header'] {
|
|
342
|
+
background-color: rgba(0, 0, 0, 0.03);
|
|
343
|
+
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
344
|
+
padding: 10px 15px;
|
|
345
|
+
margin-bottom: 15px;
|
|
346
|
+
border-radius: 4px 4px 0 0;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
:global(.inPlaceEdit) .polActions {
|
|
350
|
+
position: static;
|
|
351
|
+
display: flex;
|
|
352
|
+
justify-content: flex-end;
|
|
353
|
+
align-items: center;
|
|
354
|
+
margin-top: 15px;
|
|
355
|
+
margin-bottom: 10px;
|
|
356
|
+
padding: 0 15px;
|
|
357
|
+
width: 100%;
|
|
358
|
+
gap: 10px;
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
:global(.inPlaceEdit) .polActions button {
|
|
362
|
+
margin: 0;
|
|
363
|
+
min-width: 120px;
|
|
364
|
+
border-radius: 4px;
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
/* Style for cancel button hover state */
|
|
368
|
+
:global(.inPlaceEdit) button[style*='color: #d32f2f']:hover {
|
|
369
|
+
background-color: #ffebee !important;
|
|
370
|
+
border-color: #ef9a9a !important;
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
/* Hide the save button at the bottom of the form when in in-place edit mode */
|
|
374
|
+
:global(.inPlaceEdit) .formcontainer > .polActions {
|
|
375
|
+
display: none;
|
|
376
|
+
}
|
|
377
|
+
|
|
330
378
|
.buttonContainer {
|
|
331
379
|
display: flex;
|
|
332
380
|
justify-content: center;
|