@visns-studio/visns-components 5.12.11 → 5.12.13
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.
|
@@ -1,22 +1,58 @@
|
|
|
1
1
|
.schedulingTable {
|
|
2
2
|
width: 100%;
|
|
3
3
|
border-collapse: collapse;
|
|
4
|
-
margin: 0.
|
|
4
|
+
margin: 0.1em 0; // Minimal margin
|
|
5
5
|
|
|
6
6
|
th,
|
|
7
7
|
td {
|
|
8
|
-
padding: 0.
|
|
8
|
+
padding: 0.4rem 0.5rem; // Increased padding for better readability
|
|
9
9
|
text-align: left;
|
|
10
10
|
border: 1px solid rgba(var(--primary-rgb), 0.1);
|
|
11
|
+
line-height: 1.3; // Increased line height for better readability
|
|
12
|
+
vertical-align: middle; // Ensure vertical alignment
|
|
13
|
+
height: 40px; // Increased row height
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
// Additional high-specificity selectors to override any global styles
|
|
17
|
+
td input,
|
|
18
|
+
td select,
|
|
19
|
+
th input,
|
|
20
|
+
th select {
|
|
21
|
+
padding: 0.3rem 0.5rem !important;
|
|
22
|
+
margin: 0 !important;
|
|
23
|
+
font-size: 0.9rem !important;
|
|
24
|
+
height: 32px !important;
|
|
25
|
+
line-height: 1.2 !important;
|
|
26
|
+
border: 1px solid rgba(var(--primary-rgb), 0.1) !important;
|
|
27
|
+
box-sizing: border-box !important;
|
|
28
|
+
border-radius: 4px !important;
|
|
29
|
+
width: 100% !important;
|
|
30
|
+
appearance: none !important;
|
|
31
|
+
background: white !important;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
td select,
|
|
35
|
+
th select {
|
|
36
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M6 9L1 4h10z" fill="%23666"/></svg>') !important;
|
|
37
|
+
background-repeat: no-repeat !important;
|
|
38
|
+
background-position: right 0.5rem center !important;
|
|
39
|
+
background-size: 10px !important;
|
|
40
|
+
padding: 0.3rem 1.5rem 0.3rem 0.5rem !important;
|
|
41
|
+
cursor: pointer !important;
|
|
42
|
+
|
|
43
|
+
&::-ms-expand {
|
|
44
|
+
display: none !important;
|
|
45
|
+
}
|
|
11
46
|
}
|
|
12
47
|
|
|
13
48
|
th {
|
|
14
|
-
padding: 0.
|
|
15
|
-
font-size:
|
|
49
|
+
padding: 0.5rem 0.5rem; // Increased header padding
|
|
50
|
+
font-size: 1rem; // Larger font size for headers
|
|
16
51
|
font-weight: bold;
|
|
17
52
|
background-color: var(--primary-color);
|
|
18
53
|
color: white;
|
|
19
54
|
text-align: center;
|
|
55
|
+
height: 45px; // Increased header height
|
|
20
56
|
}
|
|
21
57
|
|
|
22
58
|
td {
|
|
@@ -28,25 +64,61 @@
|
|
|
28
64
|
}
|
|
29
65
|
}
|
|
30
66
|
|
|
31
|
-
/*
|
|
67
|
+
/* Updated styling for native input and select elements */
|
|
32
68
|
input,
|
|
33
69
|
select {
|
|
34
|
-
padding: 0.
|
|
35
|
-
margin: 0;
|
|
36
|
-
font-size: 0.
|
|
37
|
-
height:
|
|
38
|
-
line-height: 1;
|
|
39
|
-
border: 1px solid rgba(var(--primary-rgb), 0.1);
|
|
40
|
-
box-sizing: border-box;
|
|
70
|
+
padding: 0.3rem 0.5rem !important; // Increased padding for better usability
|
|
71
|
+
margin: 0 !important;
|
|
72
|
+
font-size: 0.9rem !important; // Larger font size for readability
|
|
73
|
+
height: 32px !important; // Increased height
|
|
74
|
+
line-height: 1.2 !important;
|
|
75
|
+
border: 1px solid rgba(var(--primary-rgb), 0.1) !important;
|
|
76
|
+
box-sizing: border-box !important;
|
|
77
|
+
border-radius: 4px !important; // Larger border radius
|
|
78
|
+
width: 100% !important;
|
|
79
|
+
appearance: none !important; // Remove default dropdown arrow for consistency
|
|
80
|
+
background: white !important;
|
|
81
|
+
|
|
82
|
+
// Custom dropdown arrow for select elements
|
|
83
|
+
&[type="select"],
|
|
84
|
+
&:not([type]) {
|
|
85
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M6 9L1 4h10z" fill="%23666"/></svg>') !important;
|
|
86
|
+
background-repeat: no-repeat !important;
|
|
87
|
+
background-position: right 0.5rem center !important;
|
|
88
|
+
background-size: 10px !important;
|
|
89
|
+
padding-right: 1.5rem !important;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
// Specific styling for select elements to match inputs exactly - with !important to override globals
|
|
94
|
+
select {
|
|
95
|
+
appearance: none !important;
|
|
96
|
+
background: white !important;
|
|
97
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M6 9L1 4h10z" fill="%23666"/></svg>') !important;
|
|
98
|
+
background-repeat: no-repeat !important;
|
|
99
|
+
background-position: right 0.5rem center !important;
|
|
100
|
+
background-size: 10px !important;
|
|
101
|
+
padding: 0.3rem 1.5rem 0.3rem 0.5rem !important; // Increased padding values
|
|
102
|
+
cursor: pointer !important;
|
|
103
|
+
|
|
104
|
+
// Remove default arrow on different browsers
|
|
105
|
+
&::-ms-expand {
|
|
106
|
+
display: none !important;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
&:focus {
|
|
110
|
+
outline: none !important;
|
|
111
|
+
border-color: var(--primary-color) !important;
|
|
112
|
+
}
|
|
41
113
|
}
|
|
42
114
|
}
|
|
43
115
|
|
|
44
116
|
.categoryRow {
|
|
45
117
|
background-color: rgba(var(--primary-rgb), 0.15);
|
|
46
|
-
font-size:
|
|
118
|
+
font-size: 0.9rem; // Further reduced font size
|
|
47
119
|
font-weight: bold;
|
|
48
120
|
text-align: left;
|
|
49
|
-
padding: 0.
|
|
121
|
+
padding: 0.35rem 0.5rem; // Further reduced padding
|
|
50
122
|
border-bottom: 2px solid var(--primary-color);
|
|
51
123
|
color: var(--primary-color);
|
|
52
124
|
}
|
|
@@ -161,17 +233,22 @@
|
|
|
161
233
|
width: max-content;
|
|
162
234
|
display: inline-block;
|
|
163
235
|
position: relative;
|
|
164
|
-
padding: 0.4rem 0.
|
|
236
|
+
padding: 0.4rem 0.8rem; /* Increased padding */
|
|
165
237
|
cursor: pointer;
|
|
166
|
-
font-size:
|
|
238
|
+
font-size: 0.9rem; /* Larger font size */
|
|
167
239
|
color: var(--tertiary-color);
|
|
168
240
|
text-decoration: none;
|
|
169
241
|
overflow: hidden;
|
|
170
242
|
background: var(--primary-color);
|
|
171
243
|
border: 1px solid rgba(var(--primary-color--rgb), 1.1);
|
|
172
|
-
border-radius:
|
|
244
|
+
border-radius: 4px; /* Larger border radius */
|
|
173
245
|
outline: none;
|
|
174
246
|
transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
|
|
247
|
+
height: 34px; /* Match input height */
|
|
248
|
+
line-height: 1.2;
|
|
249
|
+
display: flex;
|
|
250
|
+
align-items: center;
|
|
251
|
+
justify-content: center;
|
|
175
252
|
|
|
176
253
|
&:hover {
|
|
177
254
|
color: var(--primary-color);
|
|
@@ -186,14 +263,14 @@
|
|
|
186
263
|
flex-wrap: nowrap;
|
|
187
264
|
justify-content: flex-start;
|
|
188
265
|
align-items: center;
|
|
189
|
-
gap: 0.
|
|
266
|
+
gap: 0.3rem; // Increased gap
|
|
190
267
|
background: transparent !important; /* Ensure no background color interference */
|
|
191
268
|
|
|
192
269
|
span {
|
|
193
270
|
display: flex;
|
|
194
271
|
align-items: center;
|
|
195
272
|
position: relative;
|
|
196
|
-
width: 16px;
|
|
273
|
+
width: 16px; // Smaller icons for sort and trash
|
|
197
274
|
height: 16px;
|
|
198
275
|
|
|
199
276
|
svg {
|
|
@@ -216,11 +293,18 @@
|
|
|
216
293
|
margin: 0;
|
|
217
294
|
outline: none;
|
|
218
295
|
transition: all 0.2s ease;
|
|
296
|
+
width: 24px; // Larger color picker button
|
|
297
|
+
height: 24px;
|
|
219
298
|
|
|
220
299
|
&:hover {
|
|
221
300
|
opacity: 0.8;
|
|
222
301
|
transform: scale(1.05);
|
|
223
302
|
}
|
|
303
|
+
|
|
304
|
+
svg {
|
|
305
|
+
width: 18px; // Larger icon
|
|
306
|
+
height: 18px;
|
|
307
|
+
}
|
|
224
308
|
}
|
|
225
309
|
}
|
|
226
310
|
}
|
|
@@ -249,8 +333,8 @@
|
|
|
249
333
|
background-color: rgba(var(--secondary-rgb), 0.15);
|
|
250
334
|
font-weight: bold;
|
|
251
335
|
text-align: right;
|
|
252
|
-
padding: 0.
|
|
253
|
-
font-size: 0.
|
|
336
|
+
padding: 0.3em; // Further reduced padding
|
|
337
|
+
font-size: 0.75rem; // Further reduced font size
|
|
254
338
|
color: var(--primary-color);
|
|
255
339
|
border-top: 2px solid var(--primary-color);
|
|
256
340
|
}
|
|
@@ -431,23 +515,53 @@
|
|
|
431
515
|
}
|
|
432
516
|
}
|
|
433
517
|
|
|
434
|
-
/*
|
|
518
|
+
/* Ultra-compact styling for react-select components to match native elements */
|
|
435
519
|
.react-select__control {
|
|
436
|
-
min-height:
|
|
520
|
+
min-height: 18px; // Match native input height exactly
|
|
437
521
|
padding: 0;
|
|
438
|
-
font-size: 0.
|
|
522
|
+
font-size: 0.7rem; // Match native input font size
|
|
439
523
|
border: 1px solid rgba(var(--primary-rgb), 0.1);
|
|
440
524
|
box-sizing: border-box;
|
|
525
|
+
border-radius: 2px;
|
|
526
|
+
background: white;
|
|
527
|
+
|
|
528
|
+
&:hover {
|
|
529
|
+
border-color: rgba(var(--primary-rgb), 0.2);
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
&--is-focused {
|
|
533
|
+
border-color: var(--primary-color);
|
|
534
|
+
box-shadow: none;
|
|
535
|
+
}
|
|
441
536
|
}
|
|
442
537
|
|
|
443
538
|
.react-select__value-container {
|
|
444
|
-
padding: 0 0.
|
|
539
|
+
padding: 0.05rem 0.2rem; // Match native input padding exactly
|
|
445
540
|
margin: 0;
|
|
446
541
|
}
|
|
447
542
|
|
|
448
543
|
.react-select__input {
|
|
449
544
|
margin: 0;
|
|
450
545
|
padding: 0;
|
|
546
|
+
|
|
547
|
+
input {
|
|
548
|
+
font-size: 0.7rem !important;
|
|
549
|
+
height: 16px;
|
|
550
|
+
padding: 0;
|
|
551
|
+
margin: 0;
|
|
552
|
+
}
|
|
553
|
+
}
|
|
554
|
+
|
|
555
|
+
.react-select__single-value {
|
|
556
|
+
font-size: 0.7rem;
|
|
557
|
+
margin: 0;
|
|
558
|
+
color: inherit;
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
.react-select__placeholder {
|
|
562
|
+
font-size: 0.7rem;
|
|
563
|
+
margin: 0;
|
|
564
|
+
color: #999;
|
|
451
565
|
}
|
|
452
566
|
|
|
453
567
|
.react-select__indicator-separator {
|
|
@@ -455,7 +569,92 @@
|
|
|
455
569
|
}
|
|
456
570
|
|
|
457
571
|
.react-select__indicators {
|
|
458
|
-
padding: 0 0.
|
|
572
|
+
padding: 0 0.2rem; // Match native select padding
|
|
573
|
+
height: 16px;
|
|
574
|
+
|
|
575
|
+
svg {
|
|
576
|
+
width: 8px; // Match native select arrow size
|
|
577
|
+
height: 8px;
|
|
578
|
+
color: #666;
|
|
579
|
+
}
|
|
580
|
+
}
|
|
581
|
+
|
|
582
|
+
.react-select__dropdown-indicator {
|
|
583
|
+
padding: 0;
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
/* Ultra-compact styling for MultiSelect components to match native inputs */
|
|
587
|
+
.selectFullWidth {
|
|
588
|
+
width: 100%;
|
|
589
|
+
|
|
590
|
+
.react-select__control {
|
|
591
|
+
min-height: 18px; // Match native input height
|
|
592
|
+
height: 18px;
|
|
593
|
+
font-size: 0.7rem; // Match native input font size
|
|
594
|
+
border: 1px solid rgba(var(--primary-rgb), 0.1);
|
|
595
|
+
border-radius: 2px;
|
|
596
|
+
background: white;
|
|
597
|
+
|
|
598
|
+
&:hover {
|
|
599
|
+
border-color: rgba(var(--primary-rgb), 0.2);
|
|
600
|
+
}
|
|
601
|
+
|
|
602
|
+
&--is-focused {
|
|
603
|
+
border-color: var(--primary-color);
|
|
604
|
+
box-shadow: none;
|
|
605
|
+
}
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
.react-select__value-container {
|
|
609
|
+
padding: 0.05rem 0.2rem; // Match native input padding
|
|
610
|
+
height: 16px;
|
|
611
|
+
display: flex;
|
|
612
|
+
align-items: center;
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
.react-select__single-value {
|
|
616
|
+
font-size: 0.7rem; // Match native input font size
|
|
617
|
+
margin: 0;
|
|
618
|
+
color: inherit;
|
|
619
|
+
}
|
|
620
|
+
|
|
621
|
+
.react-select__placeholder {
|
|
622
|
+
font-size: 0.7rem; // Match native input font size
|
|
623
|
+
margin: 0;
|
|
624
|
+
color: #999;
|
|
625
|
+
}
|
|
626
|
+
|
|
627
|
+
.react-select__input-container {
|
|
628
|
+
height: 16px;
|
|
629
|
+
padding: 0;
|
|
630
|
+
margin: 0;
|
|
631
|
+
|
|
632
|
+
input {
|
|
633
|
+
font-size: 0.7rem !important;
|
|
634
|
+
height: 16px;
|
|
635
|
+
padding: 0;
|
|
636
|
+
margin: 0;
|
|
637
|
+
}
|
|
638
|
+
}
|
|
639
|
+
|
|
640
|
+
.react-select__indicators {
|
|
641
|
+
height: 16px;
|
|
642
|
+
padding: 0 0.2rem; // Match native select padding
|
|
643
|
+
}
|
|
644
|
+
|
|
645
|
+
.react-select__dropdown-indicator {
|
|
646
|
+
padding: 0;
|
|
647
|
+
|
|
648
|
+
svg {
|
|
649
|
+
width: 8px; // Match native select arrow size
|
|
650
|
+
height: 8px;
|
|
651
|
+
color: #666;
|
|
652
|
+
}
|
|
653
|
+
}
|
|
654
|
+
|
|
655
|
+
.react-select__indicator-separator {
|
|
656
|
+
display: none;
|
|
657
|
+
}
|
|
459
658
|
}
|
|
460
659
|
|
|
461
660
|
.newRow {
|
|
@@ -465,6 +664,149 @@
|
|
|
465
664
|
); /* Slightly lighter background */
|
|
466
665
|
border-top: 1px dashed rgba(var(--primary-rgb), 0.3);
|
|
467
666
|
border-bottom: 1px dashed rgba(var(--primary-rgb), 0.3);
|
|
667
|
+
|
|
668
|
+
/* Updated styling for new row inputs and selects */
|
|
669
|
+
input,
|
|
670
|
+
select {
|
|
671
|
+
height: 32px !important; // Increased height
|
|
672
|
+
padding: 0.3rem 0.5rem !important; // Increased padding
|
|
673
|
+
font-size: 0.9rem !important;
|
|
674
|
+
appearance: none !important;
|
|
675
|
+
background: white !important;
|
|
676
|
+
margin: 0 !important;
|
|
677
|
+
line-height: 1.2 !important;
|
|
678
|
+
border: 1px solid rgba(var(--primary-rgb), 0.1) !important;
|
|
679
|
+
box-sizing: border-box !important;
|
|
680
|
+
border-radius: 4px !important;
|
|
681
|
+
width: 100% !important;
|
|
682
|
+
|
|
683
|
+
// Ensure selects have dropdown arrow
|
|
684
|
+
&[type="select"],
|
|
685
|
+
&:not([type]) {
|
|
686
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M6 9L1 4h10z" fill="%23666"/></svg>') !important;
|
|
687
|
+
background-repeat: no-repeat !important;
|
|
688
|
+
background-position: right 0.5rem center !important;
|
|
689
|
+
background-size: 10px !important;
|
|
690
|
+
padding-right: 1.5rem !important;
|
|
691
|
+
}
|
|
692
|
+
}
|
|
693
|
+
|
|
694
|
+
select {
|
|
695
|
+
appearance: none !important;
|
|
696
|
+
background: white !important;
|
|
697
|
+
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M6 9L1 4h10z" fill="%23666"/></svg>') !important;
|
|
698
|
+
background-repeat: no-repeat !important;
|
|
699
|
+
background-position: right 0.5rem center !important;
|
|
700
|
+
background-size: 10px !important;
|
|
701
|
+
padding: 0.3rem 1.5rem 0.3rem 0.5rem !important; // Updated padding
|
|
702
|
+
cursor: pointer !important;
|
|
703
|
+
|
|
704
|
+
&::-ms-expand {
|
|
705
|
+
display: none !important;
|
|
706
|
+
}
|
|
707
|
+
}
|
|
708
|
+
}
|
|
709
|
+
|
|
710
|
+
/* Tooltip styles */
|
|
711
|
+
.tooltipContainer {
|
|
712
|
+
position: relative;
|
|
713
|
+
display: inline-flex;
|
|
714
|
+
align-items: center;
|
|
715
|
+
justify-content: center;
|
|
716
|
+
}
|
|
717
|
+
|
|
718
|
+
.tooltip {
|
|
719
|
+
position: absolute;
|
|
720
|
+
background: rgba(0, 0, 0, 0.9);
|
|
721
|
+
color: white;
|
|
722
|
+
padding: 6px 10px;
|
|
723
|
+
border-radius: 4px;
|
|
724
|
+
font-size: 0.75rem;
|
|
725
|
+
font-weight: 500;
|
|
726
|
+
white-space: nowrap;
|
|
727
|
+
z-index: 10000;
|
|
728
|
+
pointer-events: none;
|
|
729
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
730
|
+
transform: translateX(-50%);
|
|
731
|
+
|
|
732
|
+
&::before {
|
|
733
|
+
content: '';
|
|
734
|
+
position: absolute;
|
|
735
|
+
left: 50%;
|
|
736
|
+
border: 5px solid transparent;
|
|
737
|
+
transform: translateX(-50%);
|
|
738
|
+
}
|
|
739
|
+
|
|
740
|
+
&.tooltip-top {
|
|
741
|
+
transform: translateX(-50%) translateY(-100%);
|
|
742
|
+
margin-top: -5px;
|
|
743
|
+
|
|
744
|
+
&::before {
|
|
745
|
+
top: 100%;
|
|
746
|
+
border-top-color: rgba(0, 0, 0, 0.9);
|
|
747
|
+
}
|
|
748
|
+
}
|
|
749
|
+
|
|
750
|
+
&.tooltip-bottom {
|
|
751
|
+
transform: translateX(-50%) translateY(0%);
|
|
752
|
+
margin-top: 5px;
|
|
753
|
+
|
|
754
|
+
&::before {
|
|
755
|
+
bottom: 100%;
|
|
756
|
+
border-bottom-color: rgba(0, 0, 0, 0.9);
|
|
757
|
+
}
|
|
758
|
+
}
|
|
759
|
+
}
|
|
760
|
+
|
|
761
|
+
/* Checkbox styling */
|
|
762
|
+
.schedulingTable input[type="checkbox"] {
|
|
763
|
+
cursor: pointer;
|
|
764
|
+
width: 14px !important;
|
|
765
|
+
height: 14px !important;
|
|
766
|
+
min-width: 14px !important;
|
|
767
|
+
min-height: 14px !important;
|
|
768
|
+
max-width: 14px !important;
|
|
769
|
+
max-height: 14px !important;
|
|
770
|
+
margin: 0 !important;
|
|
771
|
+
padding: 0 !important;
|
|
772
|
+
accent-color: var(--primary-color);
|
|
773
|
+
vertical-align: middle;
|
|
774
|
+
flex-shrink: 0;
|
|
775
|
+
display: inline-block;
|
|
776
|
+
|
|
777
|
+
&:hover {
|
|
778
|
+
transform: scale(1.05);
|
|
779
|
+
}
|
|
780
|
+
}
|
|
781
|
+
|
|
782
|
+
/* Checkbox column specific styling */
|
|
783
|
+
.checkboxColumn {
|
|
784
|
+
width: 30px !important;
|
|
785
|
+
max-width: 30px !important;
|
|
786
|
+
min-width: 30px !important;
|
|
787
|
+
padding: 0.2rem !important;
|
|
788
|
+
text-align: center !important;
|
|
789
|
+
vertical-align: middle !important;
|
|
790
|
+
cursor: pointer !important;
|
|
791
|
+
user-select: none !important;
|
|
792
|
+
transition: background-color 0.2s ease !important;
|
|
793
|
+
|
|
794
|
+
/* Ensure checkbox container doesn't stretch */
|
|
795
|
+
display: table-cell !important;
|
|
796
|
+
|
|
797
|
+
&:hover {
|
|
798
|
+
background-color: rgba(var(--primary-rgb), 0.08) !important;
|
|
799
|
+
}
|
|
800
|
+
|
|
801
|
+
&:active {
|
|
802
|
+
background-color: rgba(var(--primary-rgb), 0.12) !important;
|
|
803
|
+
}
|
|
804
|
+
|
|
805
|
+
input[type="checkbox"] {
|
|
806
|
+
display: inline-block !important;
|
|
807
|
+
vertical-align: middle !important;
|
|
808
|
+
pointer-events: none !important; /* Prevent direct checkbox interaction */
|
|
809
|
+
}
|
|
468
810
|
}
|
|
469
811
|
|
|
470
812
|
.datasetSelector {
|