@visns-studio/visns-components 5.5.1 → 5.5.2

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.
@@ -86,12 +86,47 @@
86
86
  border-bottom: 1px solid var(--border-color, #e5e7eb);
87
87
  }
88
88
 
89
+ .titleContainer {
90
+ display: flex;
91
+ justify-content: space-between;
92
+ align-items: center;
93
+ margin-bottom: 8px;
94
+ }
95
+
89
96
  .crmtitle h1 {
90
97
  color: var(--heading-color, #1f2937);
91
98
  font-size: 1.5em;
92
99
  font-weight: 600;
93
100
  padding: 0;
94
- margin: 0 0 8px 0;
101
+ margin: 0;
102
+ }
103
+
104
+ .helpButtons {
105
+ display: flex;
106
+ gap: 8px;
107
+ }
108
+
109
+ .helpButton {
110
+ display: flex;
111
+ align-items: center;
112
+ gap: 6px;
113
+ background-color: #f3f4f6;
114
+ border: 1px solid var(--border-color, #e5e7eb);
115
+ border-radius: 4px;
116
+ padding: 6px 10px;
117
+ font-size: 0.8em;
118
+ color: var(--paragraph-color, #4b5563);
119
+ cursor: pointer;
120
+ transition: all 0.2s ease;
121
+
122
+ &:hover {
123
+ background-color: #e5e7eb;
124
+ color: var(--heading-color, #1f2937);
125
+ }
126
+
127
+ svg {
128
+ color: var(--primary-color, #2563eb);
129
+ }
95
130
  }
96
131
 
97
132
  .titleInfo {
@@ -118,6 +153,48 @@
118
153
  font-size: 1.1em;
119
154
  font-weight: 600;
120
155
  margin-bottom: 12px;
156
+ margin-top: 0;
157
+ }
158
+
159
+ .reportSection .sectionHeader {
160
+ display: flex;
161
+ justify-content: space-between;
162
+ align-items: center;
163
+ margin-bottom: 12px;
164
+ padding: 8px 12px;
165
+ background-color: #f9fafb;
166
+ border: 1px solid var(--border-color, #e5e7eb);
167
+ border-radius: 6px;
168
+
169
+ h3 {
170
+ margin: 0;
171
+ font-size: 1em;
172
+ font-weight: 600;
173
+ }
174
+
175
+ .toggleBtn {
176
+ background: none;
177
+ border: none;
178
+ color: var(--primary-color, #2563eb);
179
+ cursor: pointer;
180
+ font-size: 0.9rem;
181
+ padding: 2px 6px;
182
+ border-radius: 4px;
183
+ display: flex;
184
+ align-items: center;
185
+ justify-content: center;
186
+ transition: all 0.2s ease;
187
+ width: 24px;
188
+ height: 24px;
189
+
190
+ &:hover {
191
+ background-color: rgba(37, 99, 235, 0.1);
192
+ }
193
+
194
+ &.toggleBtnActive {
195
+ background-color: rgba(37, 99, 235, 0.1);
196
+ }
197
+ }
121
198
  }
122
199
 
123
200
  .sectionTitle {
@@ -233,13 +310,28 @@
233
310
  padding: 0;
234
311
  }
235
312
 
313
+ .addManualJoinContainer {
314
+ margin: 12px 0 8px;
315
+ }
316
+
317
+ .joinTablesContainer {
318
+ background-color: transparent;
319
+ padding: 0;
320
+ margin-bottom: 16px;
321
+ }
322
+
236
323
  .joinSection {
237
- margin-top: 16px;
324
+ margin-top: 8px;
238
325
  padding: 16px;
239
326
  border: 1px solid var(--border-color, #e5e7eb);
240
327
  border-radius: 6px;
241
- background-color: #f9fafb;
242
- margin-bottom: 16px;
328
+ background-color: white;
329
+ margin-bottom: 8px;
330
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
331
+
332
+ &:first-child {
333
+ margin-top: 0;
334
+ }
243
335
  }
244
336
 
245
337
  .joinHeader {
@@ -300,43 +392,68 @@
300
392
  }
301
393
 
302
394
  .addJoinButtonContainer {
303
- padding: 16px 0;
395
+ padding: 8px 0 16px;
304
396
  border-bottom: 1px solid var(--border-color, #e5e7eb);
305
397
  margin-bottom: 16px;
306
398
 
307
399
  .suggestedJoinsSection {
308
400
  margin-top: 1rem;
309
401
  text-align: left;
310
- border: 1px solid #e5e7eb;
311
402
  border-radius: 0.375rem;
312
- padding: 0.5rem;
313
- background-color: #f9fafb;
403
+ background-color: white;
314
404
  margin-bottom: 1rem;
315
405
 
316
- h4 {
317
- margin-top: 0;
318
- margin-bottom: 0.25rem;
319
- font-size: 0.9rem;
320
- color: var(--primary-color, #2563eb);
406
+ .sectionHeader {
321
407
  display: flex;
408
+ justify-content: space-between;
322
409
  align-items: center;
410
+ margin-bottom: 0.5rem;
411
+ padding: 8px 12px;
412
+ background-color: #f9fafb;
413
+ border: 1px solid var(--border-color, #e5e7eb);
414
+ border-radius: 6px;
415
+
416
+ h4 {
417
+ margin-top: 0;
418
+ margin-bottom: 0;
419
+ font-size: 0.9rem;
420
+ font-weight: 600;
421
+ color: var(--heading-color, #1f2937);
422
+ display: flex;
423
+ align-items: center;
424
+ }
425
+
426
+ .toggleBtn {
427
+ background: none;
428
+ border: none;
429
+ color: var(--primary-color, #2563eb);
430
+ cursor: pointer;
431
+ font-size: 0.9rem;
432
+ padding: 2px 6px;
433
+ border-radius: 4px;
434
+ display: flex;
435
+ align-items: center;
436
+ justify-content: center;
437
+ transition: all 0.2s ease;
438
+ width: 24px;
439
+ height: 24px;
323
440
 
324
- &::before {
325
- content: '';
326
- display: inline-block;
327
- width: 4px;
328
- height: 16px;
329
- background-color: var(--primary-color, #2563eb);
330
- margin-right: 8px;
331
- border-radius: 2px;
441
+ &:hover {
442
+ background-color: rgba(37, 99, 235, 0.1);
443
+ }
444
+
445
+ &.toggleBtnActive {
446
+ background-color: rgba(37, 99, 235, 0.1);
447
+ }
332
448
  }
333
449
  }
334
450
 
335
451
  .helpText {
336
- margin-top: 0;
452
+ margin-top: 0.5rem;
337
453
  margin-bottom: 0.5rem;
338
454
  font-size: 0.75rem;
339
455
  color: #6b7280;
456
+ padding: 0 12px;
340
457
 
341
458
  .ratingInfo {
342
459
  display: block;
@@ -352,7 +469,7 @@
352
469
  gap: 0.5rem;
353
470
  max-height: 200px;
354
471
  overflow-y: auto;
355
- padding-right: 0.5rem;
472
+ padding: 0 12px 12px;
356
473
 
357
474
  .suggestedJoinItem {
358
475
  display: flex;
@@ -0,0 +1,85 @@
1
+ /* Custom styles for SweetAlert2 popups */
2
+
3
+ .swal2-popup {
4
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
5
+ Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
6
+ border-radius: 6px;
7
+ padding: 18px;
8
+ }
9
+
10
+ .swal2-title {
11
+ font-size: 18px !important;
12
+ font-weight: 600 !important;
13
+ color: #1f2937 !important;
14
+ margin-bottom: 12px !important;
15
+ padding: 0 !important;
16
+ }
17
+
18
+ .swal2-html-container {
19
+ text-align: left !important;
20
+ font-size: 14px !important;
21
+ color: #4b5563 !important;
22
+ margin: 0 !important;
23
+ padding: 0 !important;
24
+ line-height: 1.4 !important;
25
+ }
26
+
27
+ .swal2-confirm {
28
+ background-color: #2563eb !important;
29
+ border-radius: 4px !important;
30
+ font-weight: 500 !important;
31
+ padding: 6px 14px !important;
32
+ font-size: 13px !important;
33
+ }
34
+
35
+ .swal2-confirm:focus {
36
+ box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3) !important;
37
+ }
38
+
39
+ /* Make the modal more compact */
40
+ .swal2-popup.swal2-modal {
41
+ max-width: 90%;
42
+ }
43
+
44
+ /* Reduce spacing between elements */
45
+ .swal2-icon {
46
+ margin: 0 auto 10px !important;
47
+ }
48
+
49
+ /* Adjust content spacing */
50
+ .swal2-content {
51
+ padding: 0 !important;
52
+ }
53
+
54
+ /* Override browser default font-size clamp for lists */
55
+ .swal2-html-container ul,
56
+ .swal2-html-container ol,
57
+ .swal2-html-container li {
58
+ font-size: 14px !important;
59
+ line-height: 1.4 !important;
60
+ font-size: clamp(
61
+ 14px,
62
+ 14px,
63
+ 14px
64
+ ) !important; /* Force override browser clamp */
65
+ }
66
+
67
+ /* Ensure consistent styling for all text elements */
68
+ .swal2-html-container p,
69
+ .swal2-html-container span,
70
+ .swal2-html-container div,
71
+ .swal2-html-container h4 {
72
+ font-size: inherit !important;
73
+ line-height: inherit !important;
74
+ }
75
+
76
+ /* Target the specific browser clamp issue */
77
+ #swal2-html-container ul {
78
+ font-size: 14px !important;
79
+ font-size: clamp(14px, 14px, 14px) !important;
80
+ }
81
+
82
+ #swal2-html-container li {
83
+ font-size: 14px !important;
84
+ font-size: clamp(14px, 14px, 14px) !important;
85
+ }