@visns-studio/visns-components 5.11.2 → 5.11.4
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.
- package/README.md +55 -0
- package/package.json +1 -1
- package/src/components/crm/AssociationManager.jsx +431 -0
- package/src/components/crm/BusinessCardOcr.jsx +190 -6
- package/src/components/crm/ClientAssociationManager.jsx +362 -0
- package/src/components/crm/MergeEntity.jsx +1049 -0
- package/src/components/crm/MultiSelect.jsx +14 -3
- package/src/components/crm/Navigation.jsx +67 -8
- package/src/components/crm/cells/CellWithTooltip.jsx +35 -28
- package/src/components/crm/generic/GenericDetail.jsx +25 -0
- package/src/components/crm/generic/GenericReport.jsx +1457 -434
- package/src/components/crm/generic/styles/GenericReport.module.scss +598 -24
- package/src/components/crm/styles/AssociationManager.module.scss +364 -0
- package/src/components/crm/styles/BusinessCardOcr.module.scss +362 -94
- package/src/components/crm/styles/ClientAssociationManager.module.scss +290 -0
- package/src/components/crm/styles/MergeEntity.module.scss +690 -0
- package/src/components/crm/styles/MultiSelect.module.scss +18 -0
- package/src/components/crm/styles/Navigation.module.scss +148 -16
- package/src/components/crm/styles/global-datagrid.css +9 -0
- package/src/index.js +6 -0
|
@@ -278,6 +278,248 @@
|
|
|
278
278
|
}
|
|
279
279
|
}
|
|
280
280
|
|
|
281
|
+
// Business Templates Section
|
|
282
|
+
.businessTemplatesSection {
|
|
283
|
+
margin-bottom: 32px;
|
|
284
|
+
|
|
285
|
+
h3 {
|
|
286
|
+
font-size: 1.25rem;
|
|
287
|
+
font-weight: 600;
|
|
288
|
+
color: var(--header-color);
|
|
289
|
+
margin: 0 0 8px 0;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
p {
|
|
293
|
+
font-size: 0.875rem;
|
|
294
|
+
color: var(--paragraph-color);
|
|
295
|
+
margin: 0 0 20px 0;
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.templatesGrid {
|
|
300
|
+
display: grid;
|
|
301
|
+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
302
|
+
gap: 16px;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.templateCard {
|
|
306
|
+
background-color: var(--tertiary-color);
|
|
307
|
+
border: 2px solid var(--border-color);
|
|
308
|
+
border-radius: var(--radius);
|
|
309
|
+
padding: 20px;
|
|
310
|
+
cursor: pointer;
|
|
311
|
+
transition: all 0.2s ease;
|
|
312
|
+
position: relative;
|
|
313
|
+
overflow: hidden;
|
|
314
|
+
|
|
315
|
+
&:hover {
|
|
316
|
+
border-color: var(--primary-color);
|
|
317
|
+
box-shadow: var(--box-shadow-small);
|
|
318
|
+
transform: translateY(-2px);
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.templateIcon {
|
|
322
|
+
display: inline-flex;
|
|
323
|
+
align-items: flex-start;
|
|
324
|
+
justify-content: center;
|
|
325
|
+
width: 48px;
|
|
326
|
+
height: 48px;
|
|
327
|
+
background-color: var(--primary-color);
|
|
328
|
+
border-radius: var(--radius);
|
|
329
|
+
margin-bottom: 12px;
|
|
330
|
+
padding-top: 8px;
|
|
331
|
+
|
|
332
|
+
svg {
|
|
333
|
+
color: var(--tertiary-color);
|
|
334
|
+
}
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
.templateContent {
|
|
338
|
+
h4 {
|
|
339
|
+
margin: 0 0 8px 0;
|
|
340
|
+
font-size: 1.125rem;
|
|
341
|
+
font-weight: 600;
|
|
342
|
+
color: var(--header-color);
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
p {
|
|
346
|
+
margin: 0 0 12px 0;
|
|
347
|
+
font-size: 0.875rem;
|
|
348
|
+
color: var(--paragraph-color);
|
|
349
|
+
line-height: 1.4;
|
|
350
|
+
}
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
.templateTags {
|
|
354
|
+
display: flex;
|
|
355
|
+
flex-wrap: wrap;
|
|
356
|
+
gap: 6px;
|
|
357
|
+
margin-bottom: 12px;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
.templateTag {
|
|
361
|
+
background-color: var(--bg-color);
|
|
362
|
+
border: 1px solid var(--border-color);
|
|
363
|
+
border-radius: 12px;
|
|
364
|
+
padding: 4px 8px;
|
|
365
|
+
font-size: 0.75rem;
|
|
366
|
+
color: var(--paragraph-color);
|
|
367
|
+
font-weight: 500;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
.templateCategory {
|
|
371
|
+
position: absolute;
|
|
372
|
+
top: 12px;
|
|
373
|
+
right: 12px;
|
|
374
|
+
background-color: var(--primary-color);
|
|
375
|
+
color: var(--tertiary-color);
|
|
376
|
+
font-size: 0.75rem;
|
|
377
|
+
font-weight: 600;
|
|
378
|
+
padding: 4px 8px;
|
|
379
|
+
border-radius: 12px;
|
|
380
|
+
text-transform: uppercase;
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
@media (max-width: 768px) {
|
|
384
|
+
.templatesGrid {
|
|
385
|
+
grid-template-columns: 1fr;
|
|
386
|
+
}
|
|
387
|
+
}
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
// Template Quick Filters
|
|
391
|
+
.templateQuickFilters {
|
|
392
|
+
background-color: var(--tertiary-color);
|
|
393
|
+
border: 1px solid var(--border-color);
|
|
394
|
+
border-radius: var(--radius);
|
|
395
|
+
padding: 20px;
|
|
396
|
+
margin-bottom: 24px;
|
|
397
|
+
|
|
398
|
+
h4 {
|
|
399
|
+
margin: 0 0 16px 0;
|
|
400
|
+
font-size: 1rem;
|
|
401
|
+
font-weight: 600;
|
|
402
|
+
color: var(--header-color);
|
|
403
|
+
display: flex;
|
|
404
|
+
align-items: center;
|
|
405
|
+
gap: 8px;
|
|
406
|
+
}
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
.quickFiltersGrid {
|
|
410
|
+
display: grid;
|
|
411
|
+
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
412
|
+
gap: 12px;
|
|
413
|
+
|
|
414
|
+
@media (max-width: 768px) {
|
|
415
|
+
grid-template-columns: 1fr;
|
|
416
|
+
}
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
.quickFilterBtn {
|
|
420
|
+
display: flex;
|
|
421
|
+
align-items: center;
|
|
422
|
+
gap: 8px;
|
|
423
|
+
background-color: var(--bg-color);
|
|
424
|
+
border: 2px solid var(--border-color);
|
|
425
|
+
border-radius: var(--radius);
|
|
426
|
+
padding: 12px 16px;
|
|
427
|
+
font-size: 0.875rem;
|
|
428
|
+
font-weight: 500;
|
|
429
|
+
color: var(--paragraph-color);
|
|
430
|
+
cursor: pointer;
|
|
431
|
+
transition: all 0.2s ease;
|
|
432
|
+
text-align: left;
|
|
433
|
+
|
|
434
|
+
&:hover {
|
|
435
|
+
border-color: var(--primary-color);
|
|
436
|
+
background-color: var(--primary-color);
|
|
437
|
+
color: var(--tertiary-color);
|
|
438
|
+
transform: translateY(-1px);
|
|
439
|
+
box-shadow: var(--box-shadow-small);
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
svg {
|
|
443
|
+
flex-shrink: 0;
|
|
444
|
+
}
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
// Calculated Fields Badge
|
|
448
|
+
.calculatedBadge {
|
|
449
|
+
display: inline-block;
|
|
450
|
+
background-color: var(--primary-color);
|
|
451
|
+
color: var(--tertiary-color);
|
|
452
|
+
font-size: 0.75rem;
|
|
453
|
+
font-weight: 600;
|
|
454
|
+
padding: 2px 6px;
|
|
455
|
+
border-radius: 12px;
|
|
456
|
+
margin-left: 8px;
|
|
457
|
+
vertical-align: middle;
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
// Calculated Field Column Item Styling
|
|
461
|
+
.calculatedColumnItem {
|
|
462
|
+
display: flex;
|
|
463
|
+
flex-direction: column;
|
|
464
|
+
align-items: flex-start;
|
|
465
|
+
gap: 4px;
|
|
466
|
+
padding: 10px 12px; // Increased padding
|
|
467
|
+
background-color: var(--tertiary-color);
|
|
468
|
+
border-radius: var(--radius);
|
|
469
|
+
cursor: default;
|
|
470
|
+
transition: all 0.2s ease;
|
|
471
|
+
|
|
472
|
+
&:hover {
|
|
473
|
+
background-color: rgba(var(--success-rgb), 0.03);
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
.calculatedColumnHeader {
|
|
477
|
+
display: flex;
|
|
478
|
+
align-items: center;
|
|
479
|
+
gap: 6px;
|
|
480
|
+
width: 100%;
|
|
481
|
+
|
|
482
|
+
input[type='checkbox'] {
|
|
483
|
+
width: 16px;
|
|
484
|
+
height: 16px;
|
|
485
|
+
cursor: pointer;
|
|
486
|
+
accent-color: var(--primary-color);
|
|
487
|
+
flex-shrink: 0;
|
|
488
|
+
|
|
489
|
+
&:disabled {
|
|
490
|
+
cursor: not-allowed;
|
|
491
|
+
opacity: 0.8;
|
|
492
|
+
accent-color: var(--success-color);
|
|
493
|
+
}
|
|
494
|
+
}
|
|
495
|
+
|
|
496
|
+
.calculatedColumnName {
|
|
497
|
+
flex: 1;
|
|
498
|
+
font-size: 0.875rem;
|
|
499
|
+
font-weight: 500;
|
|
500
|
+
color: var(--header-color);
|
|
501
|
+
line-height: 1.3;
|
|
502
|
+
}
|
|
503
|
+
}
|
|
504
|
+
|
|
505
|
+
.calculatedColumnFormula {
|
|
506
|
+
margin-left: 22px; // Align with column name (checkbox width + gap)
|
|
507
|
+
font-size: 0.8rem; // Increased from 0.75rem
|
|
508
|
+
color: var(--paragraph-color);
|
|
509
|
+
background-color: var(--bg-color);
|
|
510
|
+
padding: 8px 12px; // Increased padding
|
|
511
|
+
border-radius: var(--radius);
|
|
512
|
+
border: 1px solid var(--border-color);
|
|
513
|
+
font-family: monospace;
|
|
514
|
+
line-height: 1.5; // Increased line height
|
|
515
|
+
word-break: break-all;
|
|
516
|
+
white-space: pre-wrap;
|
|
517
|
+
max-width: 100%;
|
|
518
|
+
overflow-wrap: break-word;
|
|
519
|
+
min-height: 40px; // Minimum height for better visibility
|
|
520
|
+
}
|
|
521
|
+
}
|
|
522
|
+
|
|
281
523
|
// Reports Dashboard
|
|
282
524
|
.reportsDashboard {
|
|
283
525
|
max-width: 800px;
|
|
@@ -510,45 +752,49 @@
|
|
|
510
752
|
content: '→';
|
|
511
753
|
position: absolute;
|
|
512
754
|
right: -20px;
|
|
513
|
-
top:
|
|
755
|
+
top: 32px; // Adjusted to align with icon center (icon is 40px, so center is at 20px + some margin)
|
|
514
756
|
color: var(--border-color);
|
|
515
757
|
font-size: 20px;
|
|
516
758
|
font-weight: bold;
|
|
517
759
|
z-index: 1;
|
|
518
|
-
transition:
|
|
760
|
+
transition: all 0.2s ease;
|
|
519
761
|
}
|
|
520
762
|
|
|
521
763
|
&.active {
|
|
522
|
-
background
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
764
|
+
// Larger background shade that properly contains the content
|
|
765
|
+
background-color: rgba(var(--primary-rgb), 0.1);
|
|
766
|
+
border-radius: calc(var(--radius) + 2px);
|
|
767
|
+
box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.2);
|
|
768
|
+
position: relative;
|
|
769
|
+
border: 1px solid rgba(var(--primary-rgb), 0.25);
|
|
770
|
+
padding: 8px 12px; // Add padding to create proper spacing
|
|
771
|
+
margin: -8px -12px; // Negative margin to maintain positioning
|
|
526
772
|
|
|
527
773
|
.stepIcon {
|
|
528
774
|
background-color: var(--primary-color);
|
|
529
775
|
color: var(--tertiary-color);
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
height: 48px;
|
|
534
|
-
font-size: 1.1em;
|
|
776
|
+
border: 2px solid var(--tertiary-color);
|
|
777
|
+
box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
|
|
778
|
+
// Keep same size as inactive steps
|
|
535
779
|
}
|
|
536
780
|
|
|
537
781
|
.stepTitle {
|
|
538
782
|
color: var(--primary-color);
|
|
539
|
-
font-weight:
|
|
540
|
-
font
|
|
783
|
+
font-weight: 600;
|
|
784
|
+
// Keep same font size as inactive steps
|
|
541
785
|
}
|
|
542
786
|
|
|
543
787
|
.stepDescription {
|
|
544
788
|
color: var(--primary-color);
|
|
545
789
|
opacity: 0.8;
|
|
790
|
+
// Keep same font size as inactive steps
|
|
546
791
|
}
|
|
547
792
|
|
|
548
|
-
//
|
|
793
|
+
// Arrow needs to account for the padding offset
|
|
549
794
|
&:not(:last-child)::after {
|
|
550
795
|
color: var(--primary-color);
|
|
551
796
|
font-weight: bold;
|
|
797
|
+
top: 40px; // 32px base + 8px padding offset
|
|
552
798
|
}
|
|
553
799
|
}
|
|
554
800
|
|
|
@@ -576,18 +822,37 @@
|
|
|
576
822
|
}
|
|
577
823
|
|
|
578
824
|
&:hover:not(.active) {
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
825
|
+
// Make hover identical to active state
|
|
826
|
+
background-color: rgba(var(--primary-rgb), 0.1);
|
|
827
|
+
border-radius: calc(var(--radius) + 2px);
|
|
828
|
+
box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.2);
|
|
829
|
+
position: relative;
|
|
830
|
+
border: 1px solid rgba(var(--primary-rgb), 0.25);
|
|
831
|
+
padding: 8px 12px;
|
|
832
|
+
margin: -8px -12px;
|
|
582
833
|
|
|
583
834
|
.stepIcon {
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
835
|
+
background-color: var(--primary-color);
|
|
836
|
+
color: var(--tertiary-color);
|
|
837
|
+
border: 2px solid var(--tertiary-color);
|
|
838
|
+
box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
|
|
587
839
|
}
|
|
588
840
|
|
|
589
841
|
.stepTitle {
|
|
590
842
|
color: var(--primary-color);
|
|
843
|
+
font-weight: 600;
|
|
844
|
+
}
|
|
845
|
+
|
|
846
|
+
.stepDescription {
|
|
847
|
+
color: var(--primary-color);
|
|
848
|
+
opacity: 0.8;
|
|
849
|
+
}
|
|
850
|
+
|
|
851
|
+
// Arrow needs to account for the padding offset
|
|
852
|
+
&:not(:last-child)::after {
|
|
853
|
+
color: var(--primary-color);
|
|
854
|
+
font-weight: bold;
|
|
855
|
+
top: 40px; // 32px base + 8px padding offset
|
|
591
856
|
}
|
|
592
857
|
}
|
|
593
858
|
}
|
|
@@ -1096,9 +1361,9 @@
|
|
|
1096
1361
|
display: grid;
|
|
1097
1362
|
grid-template-columns: repeat(
|
|
1098
1363
|
auto-fill,
|
|
1099
|
-
minmax(
|
|
1100
|
-
); //
|
|
1101
|
-
gap:
|
|
1364
|
+
minmax(300px, 1fr)
|
|
1365
|
+
); // Increased for calculated fields visibility
|
|
1366
|
+
gap: 12px; // Increased gap for better spacing
|
|
1102
1367
|
}
|
|
1103
1368
|
|
|
1104
1369
|
.columnItem {
|
|
@@ -1144,11 +1409,65 @@
|
|
|
1144
1409
|
background-color: rgba(var(--primary-rgb), 0.05);
|
|
1145
1410
|
border: 1px solid rgba(var(--primary-rgb), 0.2);
|
|
1146
1411
|
border-radius: var(--radius);
|
|
1147
|
-
text-align: center;
|
|
1148
1412
|
font-size: 0.875rem;
|
|
1149
1413
|
color: var(--primary-color);
|
|
1150
1414
|
}
|
|
1151
1415
|
|
|
1416
|
+
.selectedSummaryHeader {
|
|
1417
|
+
display: flex;
|
|
1418
|
+
align-items: center;
|
|
1419
|
+
justify-content: space-between;
|
|
1420
|
+
cursor: pointer;
|
|
1421
|
+
}
|
|
1422
|
+
|
|
1423
|
+
.expandToggle {
|
|
1424
|
+
background: none;
|
|
1425
|
+
border: none;
|
|
1426
|
+
color: var(--primary-color);
|
|
1427
|
+
cursor: pointer;
|
|
1428
|
+
padding: 4px;
|
|
1429
|
+
border-radius: var(--radius);
|
|
1430
|
+
transition: all 0.2s ease;
|
|
1431
|
+
|
|
1432
|
+
&:hover {
|
|
1433
|
+
background-color: rgba(var(--primary-rgb), 0.1);
|
|
1434
|
+
}
|
|
1435
|
+
}
|
|
1436
|
+
|
|
1437
|
+
.selectedFieldsList {
|
|
1438
|
+
margin-top: 12px;
|
|
1439
|
+
padding-top: 12px;
|
|
1440
|
+
border-top: 1px solid rgba(var(--primary-rgb), 0.2);
|
|
1441
|
+
display: grid;
|
|
1442
|
+
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
1443
|
+
gap: 8px;
|
|
1444
|
+
}
|
|
1445
|
+
|
|
1446
|
+
.selectedField {
|
|
1447
|
+
display: flex;
|
|
1448
|
+
align-items: center;
|
|
1449
|
+
font-size: 0.75rem;
|
|
1450
|
+
padding: 6px 8px;
|
|
1451
|
+
background-color: rgba(var(--primary-rgb), 0.08);
|
|
1452
|
+
border-radius: var(--radius);
|
|
1453
|
+
border: 1px solid rgba(var(--primary-rgb), 0.2);
|
|
1454
|
+
}
|
|
1455
|
+
|
|
1456
|
+
.selectedFieldTable {
|
|
1457
|
+
color: var(--paragraph-color);
|
|
1458
|
+
font-weight: 500;
|
|
1459
|
+
}
|
|
1460
|
+
|
|
1461
|
+
.selectedFieldDivider {
|
|
1462
|
+
color: var(--paragraph-color);
|
|
1463
|
+
margin: 0 2px;
|
|
1464
|
+
}
|
|
1465
|
+
|
|
1466
|
+
.selectedFieldColumn {
|
|
1467
|
+
color: var(--primary-color);
|
|
1468
|
+
font-weight: 500;
|
|
1469
|
+
}
|
|
1470
|
+
|
|
1152
1471
|
.tableColumnSections {
|
|
1153
1472
|
display: flex;
|
|
1154
1473
|
flex-direction: column;
|
|
@@ -1174,6 +1493,15 @@
|
|
|
1174
1493
|
font-size: 1.125rem;
|
|
1175
1494
|
font-weight: 600;
|
|
1176
1495
|
color: var(--header-color);
|
|
1496
|
+
line-height: 1.4;
|
|
1497
|
+
|
|
1498
|
+
// Style for disambiguated table names
|
|
1499
|
+
.tableDisambiguation {
|
|
1500
|
+
font-weight: 400;
|
|
1501
|
+
color: var(--paragraph-color);
|
|
1502
|
+
font-size: 0.9rem;
|
|
1503
|
+
margin-left: 4px;
|
|
1504
|
+
}
|
|
1177
1505
|
}
|
|
1178
1506
|
|
|
1179
1507
|
.tableColumnCount {
|
|
@@ -2725,3 +3053,249 @@
|
|
|
2725
3053
|
}
|
|
2726
3054
|
}
|
|
2727
3055
|
}
|
|
3056
|
+
|
|
3057
|
+
// Add Calculated Field Button
|
|
3058
|
+
.addCalculatedFieldButton {
|
|
3059
|
+
display: flex;
|
|
3060
|
+
align-items: center;
|
|
3061
|
+
gap: 6px;
|
|
3062
|
+
padding: 6px 12px;
|
|
3063
|
+
background-color: var(--primary-color);
|
|
3064
|
+
color: white;
|
|
3065
|
+
border: none;
|
|
3066
|
+
border-radius: var(--radius);
|
|
3067
|
+
font-size: 0.75rem;
|
|
3068
|
+
font-weight: 500;
|
|
3069
|
+
cursor: pointer;
|
|
3070
|
+
transition: all 0.2s ease;
|
|
3071
|
+
|
|
3072
|
+
&:hover {
|
|
3073
|
+
background-color: #1e40af; // Darker blue that contrasts well
|
|
3074
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
3075
|
+
transform: translateY(-1px);
|
|
3076
|
+
}
|
|
3077
|
+
|
|
3078
|
+
&:active {
|
|
3079
|
+
transform: translateY(0);
|
|
3080
|
+
}
|
|
3081
|
+
}
|
|
3082
|
+
|
|
3083
|
+
// Calculated Field Modal Styles
|
|
3084
|
+
.modalOverlay {
|
|
3085
|
+
position: fixed;
|
|
3086
|
+
top: 0;
|
|
3087
|
+
left: 0;
|
|
3088
|
+
right: 0;
|
|
3089
|
+
bottom: 0;
|
|
3090
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
3091
|
+
display: flex;
|
|
3092
|
+
align-items: center;
|
|
3093
|
+
justify-content: center;
|
|
3094
|
+
z-index: 9999;
|
|
3095
|
+
backdrop-filter: blur(4px);
|
|
3096
|
+
}
|
|
3097
|
+
|
|
3098
|
+
.calculatedFieldModal {
|
|
3099
|
+
background: var(--bg-color);
|
|
3100
|
+
border-radius: var(--radius);
|
|
3101
|
+
border: 1px solid var(--border-color);
|
|
3102
|
+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
3103
|
+
max-width: 600px;
|
|
3104
|
+
width: 90%;
|
|
3105
|
+
max-height: 90vh;
|
|
3106
|
+
overflow-y: auto;
|
|
3107
|
+
animation: modalSlideIn 0.3s ease-out;
|
|
3108
|
+
}
|
|
3109
|
+
|
|
3110
|
+
@keyframes modalSlideIn {
|
|
3111
|
+
from {
|
|
3112
|
+
opacity: 0;
|
|
3113
|
+
transform: translateY(-20px) scale(0.95);
|
|
3114
|
+
}
|
|
3115
|
+
to {
|
|
3116
|
+
opacity: 1;
|
|
3117
|
+
transform: translateY(0) scale(1);
|
|
3118
|
+
}
|
|
3119
|
+
}
|
|
3120
|
+
|
|
3121
|
+
.modalHeader {
|
|
3122
|
+
display: flex;
|
|
3123
|
+
align-items: center;
|
|
3124
|
+
justify-content: space-between;
|
|
3125
|
+
padding: 20px 24px 16px;
|
|
3126
|
+
border-bottom: 1px solid var(--border-color);
|
|
3127
|
+
|
|
3128
|
+
h3 {
|
|
3129
|
+
margin: 0;
|
|
3130
|
+
font-size: 1.25rem;
|
|
3131
|
+
font-weight: 600;
|
|
3132
|
+
color: var(--header-color);
|
|
3133
|
+
flex: 1;
|
|
3134
|
+
}
|
|
3135
|
+
}
|
|
3136
|
+
|
|
3137
|
+
.modalCloseButton {
|
|
3138
|
+
background: none;
|
|
3139
|
+
border: none;
|
|
3140
|
+
font-size: 1.25rem;
|
|
3141
|
+
cursor: pointer;
|
|
3142
|
+
color: var(--paragraph-color);
|
|
3143
|
+
padding: 4px;
|
|
3144
|
+
border-radius: var(--radius);
|
|
3145
|
+
line-height: 1;
|
|
3146
|
+
|
|
3147
|
+
&:hover {
|
|
3148
|
+
background-color: var(--tertiary-color);
|
|
3149
|
+
color: var(--header-color);
|
|
3150
|
+
}
|
|
3151
|
+
}
|
|
3152
|
+
|
|
3153
|
+
.modalBody {
|
|
3154
|
+
padding: 20px 24px;
|
|
3155
|
+
}
|
|
3156
|
+
|
|
3157
|
+
.formGroup {
|
|
3158
|
+
margin-bottom: 20px;
|
|
3159
|
+
|
|
3160
|
+
&:last-child {
|
|
3161
|
+
margin-bottom: 0;
|
|
3162
|
+
}
|
|
3163
|
+
|
|
3164
|
+
label {
|
|
3165
|
+
display: block;
|
|
3166
|
+
margin-bottom: 6px;
|
|
3167
|
+
font-weight: 500;
|
|
3168
|
+
color: var(--header-color);
|
|
3169
|
+
font-size: 0.875rem;
|
|
3170
|
+
}
|
|
3171
|
+
}
|
|
3172
|
+
|
|
3173
|
+
.formInput,
|
|
3174
|
+
.formSelect {
|
|
3175
|
+
width: 100%;
|
|
3176
|
+
padding: 10px 12px;
|
|
3177
|
+
border: 1px solid var(--border-color);
|
|
3178
|
+
border-radius: var(--radius);
|
|
3179
|
+
font-size: 0.875rem;
|
|
3180
|
+
background-color: var(--bg-color);
|
|
3181
|
+
color: var(--header-color);
|
|
3182
|
+
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
3183
|
+
|
|
3184
|
+
&:focus {
|
|
3185
|
+
outline: none;
|
|
3186
|
+
border-color: var(--primary-color);
|
|
3187
|
+
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
|
|
3188
|
+
}
|
|
3189
|
+
|
|
3190
|
+
&::placeholder {
|
|
3191
|
+
color: var(--paragraph-color);
|
|
3192
|
+
}
|
|
3193
|
+
}
|
|
3194
|
+
|
|
3195
|
+
.formulaTextarea {
|
|
3196
|
+
width: 100%;
|
|
3197
|
+
padding: 10px 12px;
|
|
3198
|
+
border: 1px solid var(--border-color);
|
|
3199
|
+
border-radius: var(--radius);
|
|
3200
|
+
font-size: 0.875rem;
|
|
3201
|
+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
3202
|
+
background-color: var(--bg-color);
|
|
3203
|
+
color: var(--header-color);
|
|
3204
|
+
resize: vertical;
|
|
3205
|
+
min-height: 80px;
|
|
3206
|
+
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
3207
|
+
|
|
3208
|
+
&:focus {
|
|
3209
|
+
outline: none;
|
|
3210
|
+
border-color: var(--primary-color);
|
|
3211
|
+
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
|
|
3212
|
+
}
|
|
3213
|
+
|
|
3214
|
+
&::placeholder {
|
|
3215
|
+
color: var(--paragraph-color);
|
|
3216
|
+
font-family: inherit;
|
|
3217
|
+
}
|
|
3218
|
+
}
|
|
3219
|
+
|
|
3220
|
+
.formulaHelp {
|
|
3221
|
+
margin-top: 8px;
|
|
3222
|
+
padding: 12px;
|
|
3223
|
+
background-color: var(--tertiary-color);
|
|
3224
|
+
border-radius: var(--radius);
|
|
3225
|
+
font-size: 0.75rem;
|
|
3226
|
+
|
|
3227
|
+
p {
|
|
3228
|
+
margin: 0 0 8px 0;
|
|
3229
|
+
font-weight: 500;
|
|
3230
|
+
color: var(--header-color);
|
|
3231
|
+
}
|
|
3232
|
+
|
|
3233
|
+
ul {
|
|
3234
|
+
margin: 0;
|
|
3235
|
+
padding-left: 16px;
|
|
3236
|
+
|
|
3237
|
+
li {
|
|
3238
|
+
margin-bottom: 4px;
|
|
3239
|
+
color: var(--paragraph-color);
|
|
3240
|
+
|
|
3241
|
+
&:last-child {
|
|
3242
|
+
margin-bottom: 0;
|
|
3243
|
+
}
|
|
3244
|
+
|
|
3245
|
+
code {
|
|
3246
|
+
background-color: var(--bg-color);
|
|
3247
|
+
padding: 2px 4px;
|
|
3248
|
+
border-radius: 3px;
|
|
3249
|
+
border: 1px solid var(--border-color);
|
|
3250
|
+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
3251
|
+
font-size: 0.7rem;
|
|
3252
|
+
color: var(--primary-color);
|
|
3253
|
+
}
|
|
3254
|
+
}
|
|
3255
|
+
}
|
|
3256
|
+
}
|
|
3257
|
+
|
|
3258
|
+
.modalFooter {
|
|
3259
|
+
display: flex;
|
|
3260
|
+
gap: 12px;
|
|
3261
|
+
padding: 16px 24px 20px;
|
|
3262
|
+
border-top: 1px solid var(--border-color);
|
|
3263
|
+
justify-content: flex-end;
|
|
3264
|
+
}
|
|
3265
|
+
|
|
3266
|
+
.cancelButton,
|
|
3267
|
+
.addButton {
|
|
3268
|
+
padding: 10px 20px;
|
|
3269
|
+
border-radius: var(--radius);
|
|
3270
|
+
font-size: 0.875rem;
|
|
3271
|
+
font-weight: 500;
|
|
3272
|
+
cursor: pointer;
|
|
3273
|
+
transition: all 0.2s ease;
|
|
3274
|
+
border: 1px solid transparent;
|
|
3275
|
+
}
|
|
3276
|
+
|
|
3277
|
+
.cancelButton {
|
|
3278
|
+
background-color: var(--tertiary-color);
|
|
3279
|
+
color: var(--paragraph-color);
|
|
3280
|
+
border-color: var(--border-color);
|
|
3281
|
+
|
|
3282
|
+
&:hover {
|
|
3283
|
+
background-color: var(--secondary-color);
|
|
3284
|
+
color: var(--header-color);
|
|
3285
|
+
}
|
|
3286
|
+
}
|
|
3287
|
+
|
|
3288
|
+
.addButton {
|
|
3289
|
+
background-color: var(--primary-color);
|
|
3290
|
+
color: white;
|
|
3291
|
+
border-color: var(--primary-color);
|
|
3292
|
+
|
|
3293
|
+
&:hover {
|
|
3294
|
+
background-color: var(--primary-dark-color);
|
|
3295
|
+
transform: translateY(-1px);
|
|
3296
|
+
}
|
|
3297
|
+
|
|
3298
|
+
&:active {
|
|
3299
|
+
transform: translateY(0);
|
|
3300
|
+
}
|
|
3301
|
+
}
|