@visns-studio/visns-components 5.7.7 → 5.7.9

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.
@@ -4,7 +4,7 @@
4
4
  align-items: flex-start;
5
5
  flex-wrap: nowrap;
6
6
  height: auto;
7
- gap: 1rem;
7
+ gap: 0.5rem;
8
8
  }
9
9
 
10
10
  .grid__row {
@@ -13,7 +13,7 @@
13
13
  align-items: flex-start;
14
14
  flex-wrap: nowrap;
15
15
  height: auto;
16
- gap: 1rem;
16
+ gap: 0.5rem;
17
17
  }
18
18
 
19
19
  .grid__three {
@@ -51,8 +51,8 @@
51
51
  overflow: visible;
52
52
  position: relative;
53
53
  padding: 2px;
54
- margin: 8px 0;
55
- box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
54
+ margin: 4px 0;
55
+ box-shadow: 0 5px 20px rgba(var(--primary-rgb), 0.05);
56
56
  }
57
57
 
58
58
  .grid__dashfull {
@@ -76,55 +76,7 @@
76
76
  gap: 0.5rem;
77
77
  }
78
78
 
79
- .grid__subnav {
80
- flex: 1;
81
- background: white;
82
- border-radius: var(--br);
83
- box-sizing: border-box;
84
- padding: 5px;
85
- margin: 8px 0;
86
- height: auto;
87
- box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
88
- }
89
-
90
- .grid__subnav > ul {
91
- width: 100%;
92
- list-style: none;
93
- padding: 0;
94
- margin: 0;
95
- display: flex;
96
- flex-wrap: wrap;
97
- }
98
-
99
- .grid__subnav > ul li {
100
- width: 100%;
101
- margin-bottom: 3px;
102
- }
103
-
104
- .grid__subnav > ul li a {
105
- width: 100%;
106
- padding: 0.35rem 1rem;
107
- box-sizing: border-box;
108
- display: block;
109
- text-decoration: none;
110
- background: rgba(var(--primary-rgb), 0.05);
111
- color: var(--primary-color);
112
- border-radius: 5px;
113
- transition: background 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
114
- outline: none;
115
- cursor: pointer;
116
- }
117
-
118
- .grid__subnav > ul li:hover a {
119
- background: var(--primary-color);
120
- color: var(--background-color);
121
- }
122
-
123
- .grid__subnav > ul li .subactive {
124
- font-weight: 700;
125
- background: var(--primary-color);
126
- color: var(--background-color);
127
- }
79
+ /* Removed grid__subnav styles as we're using ActionButtons component instead */
128
80
 
129
81
  .grid__minheight {
130
82
  min-height: 300px;
@@ -135,15 +87,17 @@
135
87
  }
136
88
 
137
89
  .grid__subcontent {
138
- flex: 0 1 80%;
90
+ flex: 1;
139
91
  background: var(--tertiary-color);
140
92
  border-radius: var(--br);
141
- border: 1px solid rgba(var(--primary-rgb), 0.05);
93
+ border: 1px solid rgba(var(--primary-rgb), 0.1);
142
94
  box-sizing: border-box;
143
- padding: 2px;
144
- margin: 8px 0;
95
+ padding: 0;
96
+ margin: 4px 0;
145
97
  height: auto;
146
98
  position: relative;
99
+ box-shadow: 0 3px 10px rgba(var(--primary-rgb), 0.05);
100
+ overflow: hidden;
147
101
  }
148
102
 
149
103
  .grid__subcontent h2 {
@@ -262,6 +216,55 @@
262
216
  }
263
217
  }
264
218
 
219
+ .quoteWrapper {
220
+ width: 100%;
221
+ max-width: 1200px;
222
+ margin: 0 auto;
223
+ padding: 0;
224
+ box-sizing: border-box;
225
+ background-color: white;
226
+ border: 1px solid #e0e0e0;
227
+ }
228
+
229
+ .quoteTopSection {
230
+ display: flex;
231
+ justify-content: space-between;
232
+ align-items: center;
233
+ width: 100%;
234
+ padding: 25px;
235
+ box-sizing: border-box;
236
+ margin-bottom: 0;
237
+ border-bottom: 1px solid rgba(var(--primary-rgb), 0.1);
238
+ }
239
+
240
+ .quoteIdentifier {
241
+ flex: 1;
242
+ }
243
+
244
+ .quoteTitle {
245
+ font-size: 1.3rem;
246
+ font-weight: 600;
247
+ color: var(--primary-color);
248
+ margin: 0;
249
+ display: flex;
250
+ align-items: center;
251
+ gap: 8px;
252
+ }
253
+
254
+ .quoteNumber {
255
+ font-weight: 700;
256
+ color: var(--primary-color);
257
+ margin-left: 5px;
258
+ }
259
+
260
+ .actionButtonsContainer {
261
+ flex: 0 0 auto;
262
+ margin: 0;
263
+ padding: 0;
264
+ box-sizing: border-box;
265
+ min-width: 50%;
266
+ }
267
+
265
268
  .titleInfo {
266
269
  position: absolute;
267
270
  right: 2em;
@@ -276,12 +279,14 @@
276
279
  width: 100%;
277
280
  max-width: 1450px;
278
281
  margin: 0 auto;
279
- margin-bottom: 20px;
282
+ margin-bottom: 15px;
280
283
  box-sizing: border-box;
281
284
  display: flex;
282
285
  flex-wrap: wrap;
283
- border: 1px solid rgba(var(--primary-rgb), 0.65);
284
- border-radius: 3px;
286
+ border: 1px solid rgba(var(--primary-rgb), 0.2);
287
+ border-radius: var(--br);
288
+ background-color: white;
289
+ box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.05);
285
290
  }
286
291
 
287
292
  .qitem {
@@ -289,26 +294,32 @@
289
294
  display: flex;
290
295
  flex-wrap: wrap;
291
296
  box-sizing: border-box;
292
- padding: 30px;
293
- border-bottom: 1px solid rgba(var(--primary-rgb), 0.65);
297
+ padding: 15px 20px;
298
+ border-bottom: 1px solid rgba(var(--primary-rgb), 0.15);
294
299
  color: var(--paragraph-color);
295
300
 
301
+ &:last-child {
302
+ border-bottom: none;
303
+ }
304
+
296
305
  &__half {
297
306
  width: 50%;
298
307
  box-sizing: border-box;
299
308
 
300
309
  .qtitle {
301
310
  display: block;
302
- font-size: 2rem;
311
+ font-size: 1.75rem;
303
312
  text-align: right;
304
313
  color: var(--primary-color);
314
+ font-weight: 600;
305
315
  }
306
316
 
307
317
  .qno,
308
318
  .qdate {
309
319
  display: block;
310
- font-size: 1rem;
320
+ font-size: 0.9rem;
311
321
  text-align: right;
322
+ line-height: 1.4;
312
323
  }
313
324
 
314
325
  .qdate {
@@ -317,6 +328,13 @@
317
328
 
318
329
  .qvisns {
319
330
  text-align: right;
331
+ line-height: 1.4;
332
+ font-size: 0.9rem;
333
+ }
334
+
335
+ .qdetails {
336
+ line-height: 1.4;
337
+ font-size: 0.9rem;
320
338
  }
321
339
  }
322
340
 
@@ -348,113 +366,429 @@
348
366
  }
349
367
  }
350
368
 
351
- .quoteimg {
352
- img {
353
- width: 100%;
354
- max-width: 250px;
355
- height: auto;
356
- display: block;
369
+ .quoteLogoContainer {
370
+ flex: 0 0 30%;
371
+ padding-right: 20px;
372
+ }
373
+
374
+ .quoteLogo {
375
+ max-width: 180px;
376
+ height: auto;
377
+ display: block;
378
+ }
379
+
380
+ .quoteTitleContainer {
381
+ flex: 0 0 70%;
382
+ text-align: right;
383
+ }
384
+
385
+ .quoteBigNumber {
386
+ font-size: 1.6rem;
387
+ color: var(--primary-color);
388
+ margin: 0 0 5px 0;
389
+ font-weight: 600;
390
+ }
391
+
392
+ .quoteDate {
393
+ font-size: 0.9rem;
394
+ color: var(--paragraph-color);
395
+ }
396
+
397
+ .quoteParties {
398
+ display: flex;
399
+ justify-content: space-between;
400
+ margin: 25px 0;
401
+ border-top: 1px solid rgba(var(--primary-rgb), 0.1);
402
+ border-bottom: 1px solid rgba(var(--primary-rgb), 0.1);
403
+ padding: 20px 0;
404
+ background-color: rgba(var(--primary-rgb), 0.02);
405
+ border-radius: var(--br, 4px);
406
+ }
407
+
408
+ .quoteParty {
409
+ flex: 0 0 48%;
410
+ padding: 0 15px;
411
+
412
+ &:first-child {
413
+ text-align: left;
357
414
  }
415
+
416
+ &:last-child {
417
+ text-align: right;
418
+ }
419
+ }
420
+
421
+ .partyTitle {
422
+ font-size: 0.95rem;
423
+ font-weight: 600;
424
+ color: var(--primary-color);
425
+ margin: 0 0 8px 0;
426
+ padding-bottom: 5px;
427
+ border-bottom: 1px dashed rgba(var(--primary-rgb), 0.1);
428
+ text-align: inherit; /* Inherit text alignment from parent */
429
+ }
430
+
431
+ .partyDetails {
432
+ font-size: 0.9rem;
433
+ line-height: 1.5;
434
+ color: var(--paragraph-color);
435
+ text-align: inherit; /* Inherit text alignment from parent */
358
436
  }
359
437
 
360
438
  .quotestatus {
361
439
  width: 100%;
362
- padding: 30px;
363
- text-align: center;
364
- font-size: 1.65em;
440
+ padding: 10px 25px;
441
+ display: flex;
442
+ justify-content: space-between;
443
+ align-items: center;
444
+ font-size: 1em;
365
445
  box-sizing: border-box;
446
+ background-color: var(--primary-color, #1a3d66);
447
+ color: var(--tertiary-color, white);
448
+ border-radius: 0;
449
+ margin-bottom: 0;
450
+ box-shadow: none;
451
+
452
+ .statusLeft,
453
+ .statusRight {
454
+ display: flex;
455
+ align-items: center;
456
+ }
457
+
458
+ .statusRight {
459
+ font-weight: 500;
460
+ }
366
461
 
367
462
  .q__accepted {
368
- color: #84c333;
463
+ color: var(--tertiary-color, white);
464
+ font-weight: 600;
465
+ background-color: #84c333;
466
+ padding: 4px 12px;
467
+ border-radius: 20px;
468
+ display: inline-block;
469
+ font-size: 0.9em;
369
470
  }
370
471
 
371
472
  .q__pending {
372
- color: #d4c141;
473
+ color: var(--tertiary-color, white);
474
+ font-weight: 600;
475
+ background-color: #d4c141;
476
+ padding: 4px 12px;
477
+ border-radius: 20px;
478
+ display: inline-block;
479
+ font-size: 0.9em;
373
480
  }
374
481
 
375
482
  .q__declined {
376
- color: #c33333;
483
+ color: var(--tertiary-color, white);
484
+ font-weight: 600;
485
+ background-color: #c33333;
486
+ padding: 4px 12px;
487
+ border-radius: 20px;
488
+ display: inline-block;
489
+ font-size: 0.9em;
490
+ }
491
+
492
+ .ticketId {
493
+ font-size: 0.85em;
494
+ opacity: 0.9;
495
+ margin-left: 5px;
496
+ }
497
+
498
+ .quoteReference {
499
+ font-size: 0.9em;
500
+ opacity: 0.9;
501
+ font-weight: 500;
377
502
  }
378
503
  }
379
504
 
380
- .splitheader {
381
- background: var(--primary-color) !important;
382
- border-bottom: 1px solid #dfe3eb;
505
+ .quoteContent {
506
+ background-color: white;
507
+ border-radius: 0;
508
+ box-shadow: none;
509
+ padding: 25px;
510
+ margin-bottom: 0;
383
511
  }
384
512
 
385
- .splittitle {
386
- font-size: 0.975em;
387
- text-transform: uppercase;
388
- font-weight: 700;
389
- color: #3dd87c;
390
- padding: 0;
513
+ .quoteHeaderSection {
514
+ display: flex;
515
+ justify-content: space-between;
516
+ align-items: center;
517
+ margin-bottom: 20px;
518
+ }
519
+
520
+ .quoteItems {
521
+ margin-top: 30px;
522
+ }
523
+
524
+ .termsSection {
525
+ margin-top: 30px;
526
+ padding: 20px;
527
+ border-top: 1px solid rgba(var(--primary-rgb), 0.1);
528
+ background-color: rgba(var(--primary-rgb), 0.02);
529
+ border-radius: var(--br, 4px);
530
+ }
531
+
532
+ .termsTitle {
533
+ font-size: 1rem;
534
+ font-weight: 600;
535
+ color: var(--primary-color);
536
+ margin: 0 0 15px 0;
537
+ padding-bottom: 8px;
538
+ border-bottom: 1px dashed rgba(var(--primary-rgb), 0.1);
539
+ }
540
+
541
+ .termsContent {
542
+ font-size: 0.9rem;
543
+ line-height: 1.6;
544
+ color: var(--paragraph-color);
545
+ white-space: pre-wrap;
546
+ }
547
+
548
+ .quoteTableSection {
549
+ margin-bottom: 25px;
550
+ }
551
+
552
+ .tableTitle {
553
+ font-size: 1rem;
554
+ font-weight: 600;
555
+ color: var(--tertiary-color, white);
391
556
  margin: 0;
557
+ padding: 10px 15px;
558
+ background-color: var(--primary-color, #1a3d66);
559
+ border-radius: 0;
560
+ border: none;
392
561
  }
393
562
 
394
- .content-table {
563
+ .quoteTable {
395
564
  width: 100%;
565
+ table-layout: fixed; /* Ensures consistent column widths across tables */
396
566
  border-collapse: collapse;
397
- margin: 0 auto;
398
- font-size: 1em;
399
- border-radius: 5px 5px 0 0;
567
+ font-size: 0.9rem;
568
+ border-radius: 0;
400
569
  overflow: hidden;
401
570
  border: none;
402
- border-spacing: 0;
403
- border-collapse: collapse;
404
571
  box-sizing: border-box;
572
+ box-shadow: none;
573
+ margin-bottom: 25px;
574
+ }
575
+
576
+ .tableHeader {
577
+ background-color: #4fbfa5;
578
+ color: white;
579
+ text-align: left;
580
+ font-weight: 600;
581
+ font-size: 0.85rem;
582
+ padding: 10px 15px;
583
+ border-bottom: none;
405
584
 
406
- thead {
407
- display: table-row-group;
585
+ &:first-child {
586
+ border-top-left-radius: 0;
408
587
  }
409
588
 
410
- thead tr {
411
- background: var(--table-color);
412
- color: var(--primary-color);
413
- text-align: left;
414
- font-weight: 700;
415
- text-transform: capitalize;
416
- font-size: 1em;
589
+ &:last-child {
590
+ border-top-right-radius: 0;
417
591
  }
418
592
 
419
- .filterRow {
420
- th {
421
- padding: 5px;
422
- }
593
+ &[style*='text-align: right'] {
594
+ text-align: right;
423
595
  }
424
596
 
425
- th,
426
- td {
427
- font-size: 0.95em;
428
- padding: 8px 15px;
429
- color: var(--paragraph-color);
430
- border-right: 1px solid var(--table-border);
431
- line-height: 1;
432
- border-spacing: 0;
433
- border-collapse: collapse;
597
+ &[style*='text-align: center'] {
598
+ text-align: center;
599
+ }
600
+ }
434
601
 
435
- &:last-of-type {
436
- border-right: none;
437
- }
602
+ .tableRow {
603
+ border-bottom: 1px solid rgba(var(--primary-rgb), 0.05);
604
+ transition: background-color 0.2s ease;
605
+ background-color: white;
606
+
607
+ &:hover {
608
+ background-color: rgba(var(--primary-rgb), 0.02);
609
+ }
610
+
611
+ &:last-child {
612
+ border-bottom: none;
613
+ }
614
+
615
+ &:nth-child(odd) {
616
+ background-color: #f9f9f9;
617
+ }
618
+ }
438
619
 
620
+ .tableCell {
621
+ padding: 12px 15px;
622
+ color: var(--paragraph-color);
623
+ font-size: 0.85rem;
624
+ line-height: 1.4;
625
+ vertical-align: middle;
626
+
627
+ &[style*='text-align: right'] {
628
+ font-weight: 600;
629
+ }
630
+
631
+ &[style*='text-align: center'] {
632
+ text-align: center !important;
633
+ }
634
+ }
635
+
636
+ .subtotalRow {
637
+ background-color: rgba(var(--primary-rgb), 0.05);
638
+ border-top: 1px solid rgba(var(--primary-rgb), 0.1);
639
+
640
+ &:hover {
641
+ background-color: rgba(var(--primary-rgb), 0.05);
642
+ }
643
+ }
644
+
645
+ .subtotalLabel {
646
+ padding: 12px 15px;
647
+ text-align: right;
648
+ font-weight: 600;
649
+ color: var(--primary-color);
650
+ font-size: 0.9rem;
651
+ }
652
+
653
+ .subtotalValue {
654
+ padding: 12px 15px;
655
+ text-align: right;
656
+ font-weight: 700;
657
+ color: var(--primary-color);
658
+ font-size: 0.9rem;
659
+ white-space: nowrap; /* Prevents wrapping of the value */
660
+ }
661
+
662
+ /* Responsive styles */
663
+ @media (max-width: 768px) {
664
+ .quoteWrapper {
665
+ padding: 0 10px;
666
+ }
667
+
668
+ .quoteTopSection {
669
+ flex-direction: column;
670
+ align-items: flex-start;
671
+ gap: 15px;
672
+ padding: 10px 0;
673
+ }
674
+
675
+ .quoteIdentifier {
676
+ width: 100%;
677
+ margin-bottom: 0;
678
+ }
679
+
680
+ .actionButtonsContainer {
681
+ width: 100%;
682
+ min-width: 100%;
683
+ }
684
+
685
+ .quotestatus {
686
+ flex-direction: column;
687
+ align-items: flex-start;
688
+ gap: 8px;
689
+ font-size: 0.9em;
690
+ padding: 10px 15px;
691
+ }
692
+
693
+ .statusLeft,
694
+ .statusRight {
695
+ width: 100%;
696
+ }
697
+
698
+ .statusRight {
699
+ margin-top: 5px;
700
+ }
701
+
702
+ .quoteContent {
703
+ padding: 15px;
704
+ }
705
+
706
+ .quoteHeaderSection {
707
+ flex-direction: column;
708
+ }
709
+
710
+ .quoteLogoContainer {
711
+ flex: 0 0 100%;
712
+ padding-right: 0;
713
+ margin-bottom: 15px;
714
+ text-align: center;
715
+ }
716
+
717
+ .quoteLogo {
718
+ max-width: 150px;
719
+ margin: 0 auto;
720
+ }
721
+
722
+ .quoteTitleContainer {
723
+ flex: 0 0 100%;
724
+ text-align: center;
725
+ }
726
+
727
+ .quoteBigNumber {
728
+ font-size: 1.4rem;
729
+ }
730
+
731
+ .quoteParties {
732
+ flex-direction: column;
733
+ gap: 20px;
734
+ padding: 15px 0;
735
+ }
736
+
737
+ .quoteParty {
738
+ flex: 0 0 100%;
739
+ padding: 0 10px;
740
+
741
+ &:first-child,
439
742
  &:last-child {
440
- border-right: none;
743
+ text-align: left;
441
744
  }
442
745
  }
443
746
 
444
- td {
445
- .tdaction {
446
- background: #f0f0f0;
447
- display: block;
448
- line-height: 1;
449
- padding: 0.05rem;
450
- border-radius: 5px;
451
- margin: 0 0.25rem;
452
- }
747
+ .partyTitle {
748
+ font-size: 0.9rem;
749
+ }
750
+
751
+ .partyDetails {
752
+ font-size: 0.85rem;
753
+ }
754
+
755
+ .tableTitle {
756
+ font-size: 0.9rem;
757
+ padding: 8px 12px;
758
+ }
759
+
760
+ .quoteTable {
761
+ font-size: 0.8rem;
762
+ }
763
+
764
+ .tableHeader {
765
+ padding: 8px 10px;
766
+ font-size: 0.8rem;
767
+ }
768
+
769
+ .tableCell {
770
+ padding: 8px 10px;
771
+ font-size: 0.8rem;
772
+ }
773
+
774
+ .subtotalLabel,
775
+ .subtotalValue {
776
+ padding: 8px 10px;
777
+ font-size: 0.85rem;
778
+ }
779
+
780
+ .termsSection {
781
+ padding: 15px;
782
+ margin-top: 20px;
783
+ }
784
+
785
+ .termsTitle {
786
+ font-size: 0.9rem;
787
+ margin-bottom: 10px;
453
788
  }
454
789
 
455
- tbody tr {
456
- border-bottom: 1px solid var(--table-border);
457
- cursor: pointer;
458
- background: var(--tertiary-color);
790
+ .termsContent {
791
+ font-size: 0.85rem;
792
+ line-height: 1.5;
459
793
  }
460
794
  }