ngx-vector-components 6.2.0 → 6.3.0

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.
Files changed (34) hide show
  1. package/CHANGELOG.md +3033 -3018
  2. package/README.md +35 -35
  3. package/assets/icons/chevron_down_icon.svg +3 -3
  4. package/assets/icons/home_menu_icon.svg +3 -3
  5. package/assets/icons/logout_icon.svg +9 -9
  6. package/assets/icons/menu_footer_icon.svg +3 -3
  7. package/assets/icons/menu_hamburguer_icon.svg +3 -3
  8. package/assets/icons/terms_of_use_icon.svg +9 -9
  9. package/assets/icons/vector_admin_icon.svg +4 -4
  10. package/assets/icons/vector_fintech_icon.svg +3 -3
  11. package/assets/icons/vector_logtech_icon.svg +6 -6
  12. package/assets/icons/vector_marketplace_icon.svg +3 -3
  13. package/assets/images/bunge_logo.svg +23 -23
  14. package/assets/images/cofco_logo.svg +117 -117
  15. package/assets/images/emote_bad.svg +6 -6
  16. package/assets/images/emote_cool.svg +5 -5
  17. package/assets/images/emote_nice.svg +5 -5
  18. package/assets/images/success_sign.svg +4 -4
  19. package/assets/images/vector-logo-horizontal-inverse-color.svg +13 -13
  20. package/assets/images/vector_logo_horizontal.svg +13 -13
  21. package/assets/images/warn_sign.svg +4 -4
  22. package/assets/styles/_fonts.scss +114 -114
  23. package/assets/styles/_mixins.scss +7 -7
  24. package/assets/styles/_primeng-custom-theme.scss +1860 -1860
  25. package/assets/styles/_spinner.scss +36 -36
  26. package/assets/styles/_styles.scss +134 -134
  27. package/assets/styles/_variables.scss +61 -61
  28. package/fesm2022/ngx-vector-components.mjs +91 -66
  29. package/fesm2022/ngx-vector-components.mjs.map +1 -1
  30. package/lib/components/badge/badge.component.d.ts +1 -1
  31. package/lib/components/fields/data-table/data-table.component.d.ts +5 -2
  32. package/lib/components/fields/text-field/text-field.component.d.ts +1 -1
  33. package/lib/models/profile.model.d.ts +6 -2
  34. package/package.json +1 -1
@@ -1,1860 +1,1860 @@
1
- .ch {
2
- cursor: help;
3
- }
4
- .cp {
5
- cursor: pointer;
6
- }
7
- .p-focus,
8
- .p-element:focus {
9
- box-shadow: none !important;
10
- }
11
-
12
- .field {
13
- margin-bottom: 0rem !important;
14
- }
15
-
16
- .p-button.p-button-icon-only {
17
- padding: 0.4rem 0 !important;
18
- }
19
-
20
- .p-button:hover:not(:disabled) .p-button-icon,
21
- .p-button.success .p-button-icon {
22
- color: #fff !important;
23
- }
24
-
25
- .p-button.p-button-link {
26
- color: var(--theme-dark);
27
- background: transparent;
28
- border: transparent;
29
- }
30
- .p-button.p-button-link:enabled:hover {
31
- background: transparent;
32
- color: var(--theme-dark);
33
- border-color: transparent;
34
- }
35
- .p-button.p-button-link:enabled:hover .p-button-label {
36
- text-decoration: none;
37
- }
38
- .p-button.p-button-link:enabled:focus {
39
- background: transparent;
40
- box-shadow: 0 0 0 0.2rem #a6d5fa;
41
- border-color: transparent;
42
- }
43
- .p-button.p-button-link:enabled:active {
44
- background: transparent;
45
- color: var(--theme-dark);
46
- border-color: transparent;
47
- }
48
-
49
- p-button {
50
- width: 100%;
51
- border-width: 2px;
52
- border-radius: var(--border-radius);
53
- background-color: var(--theme-dark);
54
- border-color: var(--theme-dark);
55
- color: #ffffff;
56
- box-shadow: 0px 5px 5px rgba(0, 70, 232, 0.5);
57
-
58
- button {
59
- width: 100% !important;
60
- }
61
-
62
- &.round {
63
- button {
64
- border-radius: 8px;
65
- }
66
- }
67
-
68
- &:hover:not(:disabled) {
69
- background-color: #003049;
70
- border-color: #003049;
71
- }
72
-
73
- &:focus {
74
- box-shadow: none;
75
- }
76
-
77
- &:disabled {
78
- cursor: not-allowed;
79
- }
80
- .no-shadow {
81
- box-shadow: none;
82
- }
83
-
84
- .p-button {
85
- border-width: 2px !important;
86
- }
87
-
88
- .default {
89
- background-color: #ffffff;
90
- border-color: var(--theme-dark);
91
-
92
- .p-button-label {
93
- color: var(--theme-dark);
94
- }
95
-
96
- .p-button-icon {
97
- color: var(--theme-dark);
98
- }
99
-
100
- &:hover:not(:disabled) {
101
- background-color: var(--theme-dark);
102
- border-color: var(--theme-dark);
103
- .p-button-label {
104
- color: #ffffff;
105
- }
106
- }
107
- }
108
-
109
- .default-filled {
110
- background-color: var(--theme-primary);
111
- border-color: var(--theme-primary);
112
- .p-button-label {
113
- color: #ffffff;
114
- }
115
- .p-button-icon {
116
- color: #ffffff;
117
- }
118
-
119
- &:hover:not(:disabled) {
120
- background-color: var(--theme-dark);
121
- border-color: var(--theme-dark);
122
- }
123
- }
124
-
125
- .cancel {
126
- background-color: #ffffff;
127
- border-color: var(--error-color);
128
- .p-button-label {
129
- color: var(--error-color);
130
- }
131
- .p-button-icon {
132
- color: var(--error-color);
133
- }
134
-
135
- &:hover:not(:disabled) {
136
- background-color: var(--error-color-dark);
137
- border-color: var(--error-color-dark);
138
- .p-button-label {
139
- color: #ffffff;
140
- }
141
- }
142
- }
143
-
144
- .cancel-filled {
145
- background-color: var(--error-color);
146
- border-color: var(--error-color);
147
- .p-button-label {
148
- color: #ffffff;
149
- }
150
-
151
- .p-button-icon {
152
- color: #ffffff;
153
- }
154
-
155
- &:hover:not(:disabled) {
156
- background-color: var(--error-color-dark);
157
- border-color: var(--error-color-dark);
158
- }
159
- }
160
-
161
- .success {
162
- background-color: var(--success-color);
163
- border-color: var(--success-color);
164
- .p-button-label {
165
- color: #fff;
166
- }
167
- .p-button-icon {
168
- color: #fff;
169
- }
170
-
171
- &:hover:not(:disabled) {
172
- background-color: var(--success-color-dark);
173
- border-color: var(--success-color-dark);
174
- }
175
- }
176
-
177
- .light-outline {
178
- background-color: var(--background);
179
- border-color: var(--gray-medium);
180
- .p-button-label {
181
- color: var(--success-color);
182
- }
183
- .p-button-icon {
184
- color: var(--success-color);
185
- }
186
-
187
- &:hover:not(:disabled) {
188
- background-color: var(--success-color-dark);
189
- border-color: var(--success-color-dark);
190
- .p-button-label {
191
- color: #fff;
192
- }
193
- }
194
- }
195
-
196
- .success-outlined {
197
- background-color: #ffffff;
198
- border-color: var(--success-color);
199
-
200
- .p-button-label {
201
- color: var(--success-color);
202
- }
203
- .p-button-icon {
204
- color: var(--success-color);
205
- }
206
-
207
- &:hover:not(:disabled) {
208
- background-color: var(--success-color-dark);
209
- border-color: var(--success-color-dark);
210
-
211
- .p-button-label {
212
- color: #fff;
213
- }
214
- }
215
- }
216
-
217
- .default-outlined {
218
- background-color: #ffffff;
219
- border-color: var(--theme-light);
220
-
221
- .p-button-label {
222
- color: var(--theme-light);
223
- }
224
- .p-button-icon {
225
- color: var(--theme-light);
226
- }
227
-
228
- &:hover:not(:disabled) {
229
- background-color: var(--theme-primary);
230
- border-color: var(--theme-primary);
231
-
232
- .p-button-label {
233
- color: #fff;
234
- }
235
- }
236
- }
237
- .default-outlined-gray {
238
- background-color: #ffffff;
239
- border-color: var(--gray-medium);
240
-
241
- .p-button-label {
242
- color: var(--theme-light);
243
- }
244
- .p-button-icon {
245
- color: var(--theme-light);
246
- }
247
-
248
- &:hover:not(:disabled) {
249
- background-color: var(--theme-primary);
250
- border-color: var(--theme-primary);
251
-
252
- .p-button-label {
253
- color: #fff;
254
- }
255
- }
256
- }
257
- .default-outlined-gray-icon-red {
258
- background-color: #ffffff;
259
- border-color: var(--gray-medium);
260
-
261
- .p-button-label {
262
- color: var(--theme-light);
263
- }
264
- .p-button-icon {
265
- color: var(--cancel-color);
266
- }
267
-
268
- &:hover:not(:disabled) {
269
- background-color: var(--cancel-color);
270
- border-color: var(--cancel-color);
271
-
272
- .p-button-label {
273
- color: #fff;
274
- }
275
- }
276
- }
277
- .default-outlined-gray-icon-gray {
278
- background-color: #ffffff;
279
- border-color: var(--gray-medium);
280
-
281
- .p-button-label {
282
- color: var(--form-labels-color);
283
- }
284
- .p-button-icon {
285
- color: var(--form-labels-color);
286
- }
287
-
288
- &:hover:not(:disabled) {
289
- background-color: var(--gray-medium);
290
- border-color: var(--gray-medium);
291
-
292
- .p-button-label {
293
- color: var(--form-labels-color);
294
- }
295
- .p-button-icon {
296
- color: var(--form-labels-color);
297
- }
298
- }
299
- }
300
- }
301
-
302
- .p-inputgroup {
303
- display: flex;
304
- align-items: stretch;
305
- width: 100%;
306
-
307
- > input,
308
- > p-inputmask {
309
- flex: 1 1 auto;
310
- width: 1%;
311
- }
312
-
313
- vector-button {
314
- flex: 0 0 auto;
315
-
316
- p-button,
317
- button {
318
- width: auto !important;
319
- }
320
- }
321
- }
322
-
323
- .p-input-icon-left,
324
- .p-input-icon-right {
325
- position: relative;
326
- }
327
-
328
- .p-input-icon-left > i,
329
- .p-input-icon-left > svg {
330
- position: absolute;
331
- top: 50%;
332
- left: 0.75rem;
333
- margin-top: -0.5rem;
334
- z-index: 1;
335
- }
336
-
337
- .p-input-icon-right > i,
338
- .p-input-icon-right > svg {
339
- position: absolute;
340
- top: 50%;
341
- right: 0.75rem;
342
- margin-top: -0.5rem;
343
- z-index: 1;
344
- }
345
-
346
- .p-autocomplete-input {
347
- border-right: none !important;
348
- border-top-right-radius: 0px !important;
349
- border-bottom-right-radius: 0px !important;
350
- padding: 6px 0px 6px 12px !important;
351
-
352
- &:focus + .p-autocomplete-dropdown {
353
- background-color: #ffffff !important;
354
- border-right: 2px solid var(--theme-dark) !important;
355
- border-top: 2px solid var(--theme-dark) !important;
356
- border-bottom: 2px solid var(--theme-dark) !important;
357
- }
358
- }
359
-
360
- .p-inputwrapper-focus .p-autocomplete-dropdown {
361
- background-color: #ffffff !important;
362
- border-right: 2px solid var(--theme-dark) !important;
363
- border-top: 2px solid var(--theme-dark) !important;
364
- border-bottom: 2px solid var(--theme-dark) !important;
365
- }
366
-
367
- .p-autocomplete-dropdown {
368
- background-color: var(--gray-light) !important;
369
- border: none !important;
370
- margin-left: -1px !important;
371
- border-top-right-radius: var(--border-radius) !important;
372
- border-bottom-right-radius: var(--border-radius) !important;
373
- color: var(--gray-dark) !important;
374
- padding-bottom: 5px !important;
375
- }
376
-
377
- .p-select,
378
- .p-multiselect {
379
- height: 40px;
380
- background-color: var(--gray-medium) !important;
381
-
382
- .p-select-label,
383
- .p-multiselect-label {
384
- font-family: 'Poppins';
385
- color: var(--theme-dark) !important;
386
- font-weight: 500;
387
- display: flex;
388
- align-items: center;
389
- }
390
- }
391
-
392
- .p-paginator .p-select {
393
- width: auto !important;
394
- height: auto !important;
395
- background-color: transparent !important;
396
- border: 1px solid var(--gray-medium) !important;
397
- border-radius: 8px !important;
398
-
399
- .p-select-label {
400
- padding: 8px 12px !important;
401
- color: var(--theme-dark) !important;
402
- font-weight: 600;
403
- }
404
-
405
- .p-select-dropdown {
406
- color: var(--theme-dark) !important;
407
- }
408
- }
409
-
410
- .p-paginator .p-paginator-first,
411
- .p-paginator .p-paginator-prev,
412
- .p-paginator .p-paginator-next,
413
- .p-paginator .p-paginator-last {
414
- color: var(--theme-dark) !important;
415
- }
416
-
417
- p-inputnumber:not(.currency-input).ng-touched.ng-invalid input.p-inputnumber-input {
418
- border-color: var(--error-color) !important;
419
- background-color: var(--error-color-transparent) !important;
420
- }
421
-
422
- p-inputnumber.currency-input:not(.outlined) {
423
- &.ng-touched.ng-invalid input.p-inputnumber-input {
424
- color: var(--error-color) !important;
425
- }
426
-
427
- &.rounded input.p-inputnumber-input {
428
- font-size: 1rem !important;
429
- }
430
-
431
- input.p-inputnumber-input {
432
- font-size: 2em !important;
433
- border: none !important;
434
- font-weight: 600 !important;
435
- background-color: #ffffff !important;
436
- color: var(--theme-dark) !important;
437
- width: 100% !important;
438
- padding: 0px !important;
439
- height: 2em !important;
440
-
441
- &:focus {
442
- outline: 0 !important;
443
- box-shadow: none !important;
444
- }
445
- }
446
- }
447
-
448
- .p-inputnumber-buttons-horizontal,
449
- .p-inputnumber.p-inputnumber-horizontal {
450
- display: flex !important;
451
- flex-direction: row !important;
452
- align-items: stretch !important;
453
- width: 100% !important;
454
-
455
- p-button,
456
- .p-inputnumber-button-group {
457
- width: auto !important;
458
- background: transparent !important;
459
- border: none !important;
460
- box-shadow: none !important;
461
- display: inline-flex !important;
462
- align-items: stretch !important;
463
- }
464
-
465
- .p-inputnumber-input {
466
- flex: 1 1 auto !important;
467
- min-width: 0 !important;
468
- text-align: center !important;
469
- border-radius: 0 !important;
470
- }
471
-
472
- .p-inputnumber-button,
473
- button.p-inputnumber-increment-button,
474
- button.p-inputnumber-decrement-button,
475
- .p-button {
476
- width: 36px !important;
477
- min-width: 36px !important;
478
- flex: 0 0 36px !important;
479
- padding: 0 !important;
480
- color: var(--theme-primary) !important;
481
- border: none !important;
482
- border-radius: 0 !important;
483
- background: var(--gray-light) !important;
484
- box-shadow: none !important;
485
- display: inline-flex !important;
486
- align-items: center !important;
487
- justify-content: center !important;
488
-
489
- &:hover:not(:disabled) {
490
- background: var(--gray-medium) !important;
491
- color: var(--theme-dark) !important;
492
- }
493
-
494
- &:focus,
495
- &:focus-visible {
496
- outline: none !important;
497
- box-shadow: none !important;
498
- }
499
-
500
- span,
501
- .p-button-icon,
502
- svg {
503
- color: inherit !important;
504
- font-weight: 600 !important;
505
- border-radius: 0 !important;
506
- }
507
- }
508
-
509
- .p-inputnumber-decrement-button,
510
- .p-inputnumber-button:first-of-type {
511
- border-top-left-radius: 0 !important;
512
- border-bottom-left-radius: 0 !important;
513
- border-top-right-radius: 0 !important;
514
- border-bottom-right-radius: 0 !important;
515
- }
516
-
517
- .p-inputnumber-increment-button,
518
- .p-inputnumber-button:last-of-type {
519
- border-top-right-radius: 0 !important;
520
- border-bottom-right-radius: 0 !important;
521
- border-top-left-radius: 0 !important;
522
- border-bottom-left-radius: 0 !important;
523
- }
524
- }
525
-
526
- .p-multiselect {
527
- padding: 6px 0px 6px 12px !important;
528
-
529
- .p-multiselect-label {
530
- padding: 0.3rem 0.5rem 0 0 !important;
531
- }
532
-
533
- .p-multiselect-trigger {
534
- width: 12px !important;
535
- &:hover {
536
- color: #fff !important;
537
- }
538
- }
539
-
540
- // PrimeNG 19: display="chip" renderiza <p-chip styleClass="p-multiselect-chip"> dentro do .p-multiselect-label
541
- // Deixar inline, compacto, igual QA (PrimeNG 17 era assim por padrão)
542
- &.p-multiselect-display-chip {
543
- .p-multiselect-label {
544
- display: inline-flex !important;
545
- flex-wrap: wrap !important;
546
- align-items: center !important;
547
- gap: 4px !important;
548
- padding: 0.15rem 0.5rem 0.15rem 0 !important;
549
- min-height: 28px !important;
550
- }
551
-
552
- .p-multiselect-chip-item {
553
- display: inline-flex !important;
554
- align-items: center !important;
555
- }
556
-
557
- .p-multiselect-chip,
558
- .p-chip {
559
- height: 24px !important;
560
- padding: 0 6px 0 10px !important;
561
- background: #ffffff !important;
562
- border: 1px solid #e5e7eb !important;
563
- border-radius: 16px !important;
564
- font-size: 12px !important;
565
- font-weight: 500 !important;
566
- line-height: 1 !important;
567
- color: var(--theme-dark) !important;
568
- gap: 4px !important;
569
- display: inline-flex !important;
570
- align-items: center !important;
571
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
572
-
573
- .p-chip-label,
574
- .p-multiselect-chip-label {
575
- max-width: 140px !important;
576
- overflow: hidden !important;
577
- text-overflow: ellipsis !important;
578
- white-space: nowrap !important;
579
- color: inherit !important;
580
- }
581
-
582
- .p-chip-remove-icon,
583
- .p-multiselect-chip-icon,
584
- svg {
585
- width: 14px !important;
586
- height: 14px !important;
587
- color: var(--theme-dark) !important;
588
- opacity: 0.6 !important;
589
- cursor: pointer !important;
590
-
591
- &:hover {
592
- opacity: 1 !important;
593
- }
594
- }
595
- }
596
- }
597
- }
598
-
599
- input.p-inputtext:not(.currency-input),
600
- .p-inputtextarea,
601
- .p-textarea,
602
- .p-multiselect {
603
- &:not(:focus) {
604
- border: none !important;
605
- background-color: var(--gray-light) !important;
606
- }
607
- width: 100%;
608
- padding: 6px 12px 6px 12px !important;
609
- border-top-right-radius: var(--border-radius);
610
- border-bottom-right-radius: var(--border-radius);
611
- border-top-left-radius: var(--border-radius);
612
- border-bottom-left-radius: var(--border-radius);
613
- height: 40px;
614
- font-size: 0.9em !important;
615
- color: var(--theme-dark) !important;
616
- font-weight: 500;
617
-
618
- &:disabled {
619
- cursor: not-allowed;
620
- opacity: 0.6;
621
- }
622
-
623
- &:focus {
624
- outline: 0 !important;
625
- box-shadow: none !important;
626
- border: 2px solid var(--theme-dark);
627
- background-color: #ffffff;
628
- }
629
-
630
- &:hover,
631
- &:focus:not(.ng-invalid):not(.p-inputmask) {
632
- border-color: var(--theme-dark) !important;
633
- }
634
-
635
- &::placeholder {
636
- color: var(--theme-dark);
637
- opacity: 0.8;
638
- }
639
-
640
- &.ng-touched.ng-invalid {
641
- border-color: var(--error-color) !important;
642
- background-color: var(--error-color-transparent) !important;
643
- }
644
-
645
- &:not(.ng-invalid) {
646
- border-color: var(--theme-dark) !important;
647
- }
648
- }
649
-
650
- .p-inputtextarea,
651
- .p-textarea {
652
- padding-right: 62px !important;
653
- resize: none;
654
- height: unset !important;
655
- }
656
-
657
- .p-datepicker {
658
- width: 100% !important;
659
- .p-inputtext {
660
- color: var(--theme-dark) !important;
661
- font-weight: 600 !important;
662
- margin-left: -1px !important;
663
- border-top-right-radius: 0px !important;
664
- border-bottom-right-radius: 0px !important;
665
-
666
- &:focus {
667
- border-right: none !important;
668
-
669
- + .p-datepicker-dropdown {
670
- border-right: 2px solid var(--theme-dark) !important;
671
- border-top: 2px solid var(--theme-dark) !important;
672
- border-bottom: 2px solid var(--theme-dark) !important;
673
- background-color: #ffffff !important;
674
- }
675
- }
676
- }
677
-
678
- .p-datepicker-dropdown {
679
- background-color: var(--gray-light) !important;
680
- border: none !important;
681
- border-top-right-radius: var(--border-radius) !important;
682
- border-bottom-right-radius: var(--border-radius) !important;
683
-
684
- span {
685
- color: var(--theme-dark) !important;
686
- }
687
- }
688
- }
689
- p-datepicker.ng-touched.ng-invalid {
690
- .p-datepicker {
691
- width: 100% !important;
692
- input.p-inputtext:not(.currency-input),
693
- .p-inputtextarea {
694
- &:not(:focus) {
695
- border: none !important;
696
- background-color: var(--error-color-transparent) !important;
697
- }
698
- }
699
- }
700
-
701
- .p-datepicker-dropdown {
702
- border-color: var(--error-color) !important;
703
- background-color: var(--error-color-transparent) !important;
704
- }
705
-
706
- .p-focus {
707
- input.p-inputtext:not(.currency-input),
708
- .p-inputtextarea {
709
- border-color: var(--error-color) !important;
710
- background-color: var(--error-color-transparent) !important;
711
- }
712
- .p-datepicker-dropdown {
713
- border-right: 2px solid var(--error-color) !important;
714
- border-top: 2px solid var(--error-color) !important;
715
- border-bottom: 2px solid var(--error-color) !important;
716
- background-color: var(--error-color-transparent) !important;
717
- }
718
- }
719
- }
720
-
721
- p-inputmask {
722
- flex: 1;
723
- }
724
- p-inputmask.ng-touched.ng-invalid input {
725
- border-color: var(--error-color) !important;
726
- background-color: var(--error-color-transparent) !important;
727
- }
728
-
729
- p-inputnumber:not(.currency-input),
730
- p-inputnumber.outlined {
731
- display: block !important;
732
-
733
- span {
734
- width: 100%;
735
- }
736
- }
737
-
738
- p-inputnumber .text-centered input {
739
- text-align: center;
740
- }
741
-
742
- p-radiobutton.ng-touched.ng-invalid .p-radiobutton-box {
743
- border-color: var(--error-color) !important;
744
- }
745
-
746
- .p-radiobutton {
747
- width: 24px;
748
- height: 24px;
749
-
750
- .p-radiobutton-box {
751
- border: 2px solid #d1d5db !important;
752
- background: #ffffff !important;
753
- box-shadow: none !important;
754
- }
755
-
756
- &:not(.p-disabled):hover .p-radiobutton-box {
757
- border-color: #1545de !important;
758
- }
759
-
760
- &.p-radiobutton-checked .p-radiobutton-box {
761
- border-color: #1545de !important;
762
- background: #1545de !important;
763
-
764
- .p-radiobutton-icon {
765
- background: #ffffff !important;
766
- }
767
- }
768
-
769
- .p-radiobutton-input:focus-visible + .p-radiobutton-box,
770
- &.p-focus .p-radiobutton-box {
771
- border-color: #1545de !important;
772
- box-shadow: 0 0 0 3px #ced9fa !important;
773
- }
774
- }
775
-
776
- .p-steps .p-steps-item.p-highlight {
777
- background-color: transparent !important;
778
-
779
- .p-menu-item-link .p-steps-number {
780
- color: #fff !important;
781
- background-color: var(--theme-medium) !important;
782
- }
783
- }
784
-
785
- .p-menu-list {
786
- padding: 0px !important;
787
- }
788
-
789
- .p-menu-item-link {
790
- padding: 0.75rem 1rem !important;
791
- }
792
-
793
- .p-steps .p-steps-item:not(.p-highlight) {
794
- .p-steps-title {
795
- opacity: 0.4 !important;
796
- }
797
-
798
- .p-menu-item-link .p-steps-number {
799
- color: var(--theme-medium) !important;
800
- }
801
- }
802
-
803
- .p-steps .p-steps-item .p-steps-title {
804
- color: var(--theme-medium) !important;
805
- }
806
-
807
- .p-steps .p-steps-item.p-disabled {
808
- opacity: 1 !important;
809
- }
810
-
811
- .p-steps .p-steps-item .p-menu-item-link {
812
- background: transparent !important;
813
-
814
- .p-steps-number {
815
- min-width: 2.6rem !important;
816
- height: 2.6rem !important;
817
- font-size: 1rem !important;
818
- border: 2px solid var(--theme-medium) !important;
819
- }
820
- }
821
-
822
- .p-steps ul > li:nth-child(1):only-child::before {
823
- content: unset !important;
824
- }
825
-
826
- .p-steps ul > li:not(:only-child)::before {
827
- border: 1px dashed var(--theme-medium) !important;
828
- }
829
-
830
- .p-steps .p-steps-item:first-child:before {
831
- width: 50% !important;
832
- left: 50% !important;
833
- }
834
-
835
- .p-steps .p-steps-item:last-child:before {
836
- width: 50% !important;
837
- }
838
-
839
- .p-steps .p-steps-item.checked .p-steps-title {
840
- color: var(--success-color-dark) !important;
841
- }
842
-
843
- .p-steps .p-steps-item.checked .p-menu-item-link .p-steps-number {
844
- background-color: var(--success-color-dark) !important;
845
- color: #fff !important;
846
- border: 2px solid var(--success-color-dark) !important;
847
- }
848
-
849
- .p-steps .p-steps-item .p-menu-item-link .p-steps-number.disabled {
850
- color: var(--gray-dark) !important;
851
- border: 2px solid var(--gray-dark) !important;
852
- }
853
-
854
- .p-highlight {
855
- background-color: var(--theme-primary) !important;
856
- border-color: var(--theme-primary) !important;
857
- }
858
-
859
- .p-button:focus {
860
- box-shadow: unset !important;
861
- }
862
-
863
- .p-button.button {
864
- display: flex !important;
865
- flex-direction: row !important;
866
- justify-content: center !important;
867
-
868
- .p-button-label {
869
- flex: unset !important;
870
- }
871
- }
872
-
873
- .p-datepicker-panel {
874
- border: 2px solid var(--theme-dark) !important;
875
- border-radius: var(--border-radius) !important;
876
- z-index: 15000 !important;
877
-
878
- .p-datepicker-weekday {
879
- color: var(--theme-dark) !important;
880
- }
881
-
882
- .p-datepicker-day {
883
- color: var(--font-color) !important;
884
-
885
- &:focus {
886
- box-shadow: unset !important;
887
- }
888
- }
889
-
890
- .p-datepicker-day-selected {
891
- color: #ffffff !important;
892
- }
893
-
894
- p-button {
895
- width: auto !important;
896
- background: transparent !important;
897
- box-shadow: none !important;
898
-
899
- button {
900
- width: auto !important;
901
- min-width: 2rem !important;
902
- background: transparent !important;
903
- border: none !important;
904
- box-shadow: none !important;
905
- color: var(--theme-dark) !important;
906
-
907
- &:hover:not(:disabled) {
908
- background: var(--gray-light) !important;
909
- border: none !important;
910
- }
911
- }
912
-
913
- .p-button-icon {
914
- color: var(--theme-dark) !important;
915
- }
916
- }
917
- }
918
-
919
- .p-toast {
920
- .p-toast-message {
921
- border-radius: 12px !important;
922
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
923
- border: none !important;
924
- padding: 16px !important;
925
- color: #1f2937 !important;
926
- }
927
-
928
- .p-toast-message-content {
929
- gap: 12px !important;
930
- align-items: center !important;
931
- padding: 0 !important;
932
- }
933
-
934
- .p-toast-message-text {
935
- gap: 4px !important;
936
- }
937
-
938
- .p-toast-summary {
939
- color: #111827 !important;
940
- font-family: 'Poppins', 'Inter', sans-serif !important;
941
- font-weight: 600 !important;
942
- font-size: 14px !important;
943
- }
944
-
945
- .p-toast-detail {
946
- color: #4b5563 !important;
947
- font-family: 'Poppins', 'Inter', sans-serif !important;
948
- font-weight: 400 !important;
949
- font-size: 12px !important;
950
- }
951
-
952
- .p-toast-message-icon {
953
- width: 40px !important;
954
- height: 40px !important;
955
- min-width: 40px !important;
956
- border-radius: 50% !important;
957
- display: inline-flex !important;
958
- align-items: center !important;
959
- justify-content: center !important;
960
- color: #ffffff !important;
961
-
962
- svg,
963
- .p-icon {
964
- width: 22px !important;
965
- height: 22px !important;
966
- color: #ffffff !important;
967
- fill: #ffffff !important;
968
- }
969
- }
970
-
971
- .p-toast-message-warn {
972
- background: #fde6c0 !important;
973
- .p-toast-message-icon {
974
- background: #f59e0b !important;
975
- }
976
- }
977
-
978
- .p-toast-message-error {
979
- background: #fee2e2 !important;
980
- .p-toast-message-icon {
981
- background: #ef4444 !important;
982
- }
983
- }
984
-
985
- .p-toast-message-success {
986
- background: #dcfce7 !important;
987
- .p-toast-message-icon {
988
- background: #22c55e !important;
989
- }
990
- }
991
-
992
- p-button,
993
- .p-toast-close-button {
994
- width: auto !important;
995
- background: transparent !important;
996
- border: none !important;
997
- box-shadow: none !important;
998
- align-self: center !important;
999
-
1000
- button {
1001
- width: 2rem !important;
1002
- min-width: 2rem !important;
1003
- height: 2rem !important;
1004
- padding: 0 !important;
1005
- background: transparent !important;
1006
- border: none !important;
1007
- box-shadow: none !important;
1008
- color: #6b7280 !important;
1009
- border-radius: 50% !important;
1010
-
1011
- &:hover:not(:disabled) {
1012
- background: rgba(0, 0, 0, 0.06) !important;
1013
- border: none !important;
1014
- color: #1f2937 !important;
1015
- }
1016
- }
1017
-
1018
- .p-button-icon,
1019
- .p-toast-close-icon {
1020
- color: inherit !important;
1021
- width: 1rem !important;
1022
- height: 1rem !important;
1023
- }
1024
- }
1025
- }
1026
-
1027
- .p-overlaypanel:not(.background-white) {
1028
- background-color: #01529b !important;
1029
- }
1030
-
1031
- .p-overlaypanel-content {
1032
- padding: 6px 8px 6px 8px !important;
1033
- }
1034
-
1035
- .p-overlaypanel::after,
1036
- .p-overlaypanel::before {
1037
- border-bottom-color: #01529b !important;
1038
- }
1039
-
1040
- .p-dialog:not(.p-confirm-dialog) {
1041
- .p-dialog-header {
1042
- padding: 3px !important;
1043
- border-top-left-radius: 9px !important;
1044
- border-top-right-radius: 9px !important;
1045
- }
1046
-
1047
- .p-dialog-content {
1048
- border-bottom-left-radius: 9px !important;
1049
- border-bottom-right-radius: 9px !important;
1050
- }
1051
- }
1052
-
1053
- .p-dialog .p-dialog-header .p-dialog-title {
1054
- font-size: 1em !important;
1055
- text-align: center !important;
1056
- }
1057
-
1058
- .p-dialog-header-close-icon {
1059
- font-weight: 600 !important;
1060
- }
1061
-
1062
- .p-dialog .p-dialog-header p-button,
1063
- .p-drawer .p-drawer-header p-button {
1064
- width: auto !important;
1065
- background: transparent !important;
1066
- box-shadow: none !important;
1067
-
1068
- button {
1069
- width: 2rem !important;
1070
- height: 2rem !important;
1071
- min-width: 2rem !important;
1072
- padding: 0 !important;
1073
- border-radius: 50% !important;
1074
- background: transparent !important;
1075
- border: none !important;
1076
- box-shadow: none !important;
1077
- color: var(--gray-dark) !important;
1078
- transition:
1079
- background-color 0.15s ease,
1080
- color 0.15s ease;
1081
- }
1082
-
1083
- &:hover button:not(:disabled) {
1084
- background: var(--gray-light) !important;
1085
- color: var(--theme-dark) !important;
1086
- }
1087
-
1088
- .p-dialog-header-close-icon,
1089
- .p-button-icon {
1090
- font-size: 1rem !important;
1091
- }
1092
- }
1093
-
1094
- .p-confirm-dialog {
1095
- .p-dialog-footer .actions {
1096
- display: flex;
1097
- align-items: center;
1098
- justify-content: flex-end;
1099
- gap: 20px;
1100
- }
1101
-
1102
- .p-confirm-dialog-icon {
1103
- display: none !important;
1104
- }
1105
-
1106
- .p-confirm-dialog-message {
1107
- margin-left: 0px !important;
1108
- }
1109
- }
1110
-
1111
- .p-selectbutton {
1112
- display: inline-flex !important;
1113
- align-items: center !important;
1114
- gap: 4px !important;
1115
- padding: 4px !important;
1116
- height: 42px !important;
1117
- background-color: var(--gray-light) !important;
1118
- border-radius: 12px !important;
1119
- width: fit-content !important;
1120
-
1121
- .p-togglebutton {
1122
- display: inline-flex !important;
1123
- align-items: center !important;
1124
- height: 34px !important;
1125
- margin: 0 !important;
1126
- padding: 0 16px !important;
1127
- border: none !important;
1128
- border-radius: 8px !important;
1129
- background: transparent !important;
1130
- transition: all 0.2s ease;
1131
-
1132
- .p-togglebutton-content {
1133
- gap: 6px !important;
1134
- font-size: 14px !important;
1135
- font-weight: 500 !important;
1136
- line-height: 1 !important;
1137
- }
1138
-
1139
- .p-togglebutton-label,
1140
- .p-togglebutton-icon {
1141
- color: var(--theme-dark) !important;
1142
- }
1143
-
1144
- &:not(.p-togglebutton-checked) {
1145
- background-color: transparent !important;
1146
- }
1147
-
1148
- &.p-togglebutton-checked {
1149
- background-color: #ffffff !important;
1150
- box-shadow:
1151
- 0 1px 2px 0 rgba(17, 55, 178, 0.1),
1152
- 0 2px 4px 0 rgba(17, 55, 178, 0.1),
1153
- 0 4px 8px 0 rgba(17, 55, 178, 0.1) !important;
1154
-
1155
- .p-togglebutton-label,
1156
- .p-togglebutton-icon {
1157
- color: var(--brand-blue) !important;
1158
- font-weight: 600 !important;
1159
- }
1160
- }
1161
-
1162
- &:disabled,
1163
- &.p-disabled {
1164
- background-color: transparent !important;
1165
- box-shadow: none !important;
1166
-
1167
- .p-togglebutton-label,
1168
- .p-togglebutton-icon {
1169
- color: var(--gray-dark) !important;
1170
- }
1171
- }
1172
- }
1173
- }
1174
-
1175
- vector-select-button-field.is-secondary {
1176
- .p-selectbutton {
1177
- background-color: var(--brand-light) !important;
1178
- border-radius: 9999px !important;
1179
- }
1180
-
1181
- .p-togglebutton {
1182
- padding: 0 20px !important;
1183
- border-radius: 9999px !important;
1184
- }
1185
- }
1186
-
1187
- .p-multiselect-overlay:not(.has-filter) .p-multiselect-header p-checkbox::after {
1188
- content: 'Selecionar Todos';
1189
- display: inline-block;
1190
- margin-left: 0.5rem;
1191
- color: var(--theme-dark);
1192
- font-weight: 500;
1193
- white-space: nowrap;
1194
- }
1195
-
1196
- .p-multiselect-header {
1197
- .p-checkbox {
1198
- width: max-content;
1199
- }
1200
- }
1201
-
1202
- p-checkbox.rounded-checkbox,
1203
- .rounded-checkbox {
1204
- --p-checkbox-border-radius: 50%;
1205
- --p-checkbox-checked-border-radius: 50%;
1206
- }
1207
-
1208
- .rounded-checkbox .p-checkbox,
1209
- .rounded-checkbox .p-checkbox.p-checkbox-checked {
1210
- background: transparent !important;
1211
- border-radius: 50% !important;
1212
- }
1213
-
1214
- .rounded-checkbox .p-checkbox-input {
1215
- background: transparent !important;
1216
- border-radius: 50% !important;
1217
- }
1218
-
1219
- .rounded-checkbox .p-checkbox-box,
1220
- .rounded-checkbox .p-checkbox.p-checkbox-checked .p-checkbox-box {
1221
- border-radius: 50% !important;
1222
- border: none !important;
1223
- overflow: hidden !important;
1224
- }
1225
-
1226
- .rounded-checkbox .p-checkbox:not(.p-checkbox-checked) .p-checkbox-box {
1227
- background-color: var(--gray-light) !important;
1228
- }
1229
-
1230
- .rounded-checkbox .p-checkbox.p-checkbox-checked .p-checkbox-box {
1231
- background-color: var(--brand-blue) !important;
1232
- }
1233
-
1234
- p-checkbox.rounded-checkbox .p-checkbox-icon,
1235
- .rounded-checkbox .p-checkbox-icon {
1236
- font-size: 0.8em !important;
1237
- padding-top: 2px !important;
1238
- }
1239
-
1240
- .p-checkbox-box.p-highlight,
1241
- .p-checkbox.p-checkbox-checked .p-checkbox-box {
1242
- background: var(--brand-blue) !important;
1243
- border-color: var(--brand-blue) !important;
1244
- }
1245
-
1246
- .p-checkbox-box {
1247
- border-width: 2px !important;
1248
- border-color: var(--gray-dark) !important;
1249
-
1250
- &:hover:not(.p-highlight) {
1251
- border-color: var(--gray-dark) !important;
1252
- }
1253
- }
1254
-
1255
- .p-select,
1256
- .p-autocomplete {
1257
- width: 100%;
1258
- }
1259
- p-autocomplete.ng-touched.ng-invalid {
1260
- input.p-inputtext:not(.currency-input),
1261
- .p-inputtextarea {
1262
- &:not(:focus) {
1263
- border: none !important;
1264
- background-color: var(--error-color-transparent) !important;
1265
- }
1266
-
1267
- &:focus:not(.ng-invalid):not(.p-inputmask) {
1268
- border-color: var(--error-color) !important;
1269
- }
1270
- }
1271
- }
1272
-
1273
- p-autocomplete.ng-touched.ng-invalid .p-autocomplete-dropdown,
1274
- p-multiselect.ng-touched.ng-invalid .p-multiselect {
1275
- border-color: var(--error-color) !important;
1276
- background-color: var(--error-color-transparent) !important;
1277
- }
1278
-
1279
- .p-select-overlay,
1280
- .p-autocomplete-panel,
1281
- .p-multiselect-overlay {
1282
- // max-width: 250px !important;
1283
- min-width: 100%;
1284
- border: 1px solid var(--theme-dark) !important;
1285
- margin-top: -2px !important;
1286
- border-radius: var(--border-radius) !important;
1287
-
1288
- & .p-autocomplete-items,
1289
- & .p-multiselect-list {
1290
- padding-top: 0px !important;
1291
- padding-bottom: 0px !important;
1292
- padding-right: 1px !important;
1293
- }
1294
-
1295
- &::-webkit-scrollbar {
1296
- width: 5px;
1297
- }
1298
-
1299
- &::-webkit-scrollbar-track {
1300
- background: var(--gray-light);
1301
- }
1302
-
1303
- &::-webkit-scrollbar-thumb {
1304
- background: var(--theme-dark);
1305
- border-radius: 8px;
1306
- }
1307
-
1308
- &::-webkit-scrollbar-thumb:hover {
1309
- background: var(--theme-dark);
1310
- }
1311
- }
1312
-
1313
- .p-select-option,
1314
- .p-autocomplete-item,
1315
- .p-multiselect-item {
1316
- text-overflow: ellipsis;
1317
- color: var(--theme-dark) !important;
1318
-
1319
- &:hover {
1320
- background-color: var(--theme-dark) !important;
1321
- color: #ffffff !important;
1322
- }
1323
- }
1324
-
1325
- .p-select,
1326
- .p-multiselect {
1327
- border: none !important;
1328
- .p-highlight {
1329
- background-color: #ffffff !important;
1330
- }
1331
- }
1332
- .p-select-overlay .p-select-list .p-select-option.p-highlight,
1333
- .p-multiselect-overlay .p-multiselect-list .p-multiselect-item.p-highlight {
1334
- background-color: var(--theme-dark) !important;
1335
- color: #ffffff !important;
1336
- }
1337
-
1338
- .p-slider {
1339
- background-color: #01529b;
1340
- .p-slider-range {
1341
- background-color: var(--success-color) !important;
1342
- border-radius: inherit !important;
1343
- }
1344
- .p-slider-handle {
1345
- border-color: var(--success-color) !important;
1346
-
1347
- &:hover {
1348
- background-color: var(--success-color) !important;
1349
- }
1350
- &:focus {
1351
- box-shadow: unset !important;
1352
- }
1353
- }
1354
- }
1355
-
1356
- .p-fileupload {
1357
- p-messages,
1358
- p-message {
1359
- display: none !important;
1360
- }
1361
-
1362
- .p-fileupload-filelabel,
1363
- [class*='filelabel'] {
1364
- display: none !important;
1365
- }
1366
-
1367
- input[type='file'] {
1368
- position: absolute !important;
1369
- width: 1px !important;
1370
- height: 1px !important;
1371
- padding: 0 !important;
1372
- margin: 0 !important;
1373
- overflow: hidden !important;
1374
- clip: rect(0, 0, 0, 0) !important;
1375
- white-space: nowrap !important;
1376
- border: 0 !important;
1377
- opacity: 0 !important;
1378
- }
1379
-
1380
- p-button {
1381
- width: 100% !important;
1382
- background: transparent !important;
1383
- border: none !important;
1384
- box-shadow: none !important;
1385
- }
1386
-
1387
- .p-fileupload-choose-button,
1388
- .p-fileupload-choose {
1389
- background: transparent !important;
1390
- border: 1px solid var(--theme-dark) !important;
1391
- border-radius: 30px !important;
1392
- box-shadow: none !important;
1393
- color: var(--theme-dark) !important;
1394
- width: 100% !important;
1395
- padding: 0.875rem 1.5rem !important;
1396
- font-weight: 600 !important;
1397
- justify-content: center !important;
1398
- gap: 0.5rem !important;
1399
-
1400
- &:hover:not(:disabled) {
1401
- background: var(--theme-dark) !important;
1402
- border-color: var(--theme-dark) !important;
1403
- color: #ffffff !important;
1404
-
1405
- .p-button-label,
1406
- .p-button-icon {
1407
- color: #ffffff !important;
1408
- }
1409
- }
1410
-
1411
- .p-button-label {
1412
- color: inherit !important;
1413
- flex: 0 0 auto !important;
1414
- max-width: unset !important;
1415
- overflow: visible !important;
1416
- }
1417
-
1418
- .p-button-icon {
1419
- color: inherit !important;
1420
- }
1421
- }
1422
- }
1423
-
1424
- vector-data-table {
1425
- vector-panel.data-table-panel .p-panel,
1426
- vector-panel.data-table-panel .p-panel-content,
1427
- vector-panel.data-table-panel .p-panel-content > div {
1428
- border-radius: 15px !important;
1429
- }
1430
-
1431
- p-table {
1432
- .p-datatable-wrapper {
1433
- }
1434
-
1435
- .p-datatable-table {
1436
- border-radius: 15px !important;
1437
- }
1438
-
1439
- // PrimeNG 18 removeu o responsiveLayout: o .p-column-title (header embutido
1440
- // em cada celula por getCellContent) precisa ser escondido manualmente.
1441
- .p-column-title {
1442
- display: none;
1443
- }
1444
-
1445
- .p-datatable-thead {
1446
- border-radius: 15px !important;
1447
- z-index: 0 !important;
1448
-
1449
- .header {
1450
- th {
1451
- white-space: normal !important;
1452
- position: relative;
1453
- padding: 10px 10px 10px 35px !important;
1454
- background-color: var(--gray-light) !important;
1455
- color: #1f2937 !important;
1456
-
1457
- > div {
1458
- gap: 8px;
1459
- }
1460
-
1461
- &:first-child {
1462
- border-top-left-radius: 15px !important;
1463
- padding: 10px !important;
1464
- }
1465
-
1466
- &:last-child {
1467
- border-top-right-radius: 15px !important;
1468
- }
1469
-
1470
- p-sorticon {
1471
- svg {
1472
- height: 0.85rem !important;
1473
- width: 0.85rem !important;
1474
- }
1475
-
1476
- sortamountupalticon svg,
1477
- sortamountdownicon svg {
1478
- color: var(--theme-primary) !important;
1479
- }
1480
- }
1481
-
1482
- &.p-highlight {
1483
- color: var(--theme-primary) !important;
1484
- }
1485
- }
1486
- }
1487
- }
1488
-
1489
- .p-datatable-tbody {
1490
- tr.p-highlight {
1491
- background-color: #eff6ff !important;
1492
- }
1493
- }
1494
-
1495
- .row {
1496
- background: transparent !important;
1497
-
1498
- .cell {
1499
- white-space: normal !important;
1500
-
1501
- .boolean-value-positive {
1502
- color: var(--success-color);
1503
- }
1504
-
1505
- .boolean-value-negative {
1506
- color: var(--error-color);
1507
- }
1508
-
1509
- .status-table-field {
1510
- font-size: 1.4em;
1511
- }
1512
-
1513
- .table-button {
1514
- cursor: pointer;
1515
- color: var(--theme-primary);
1516
- }
1517
- }
1518
-
1519
- .no-results {
1520
- border-bottom-left-radius: 15px;
1521
- border-bottom-right-radius: 15px;
1522
- }
1523
- }
1524
-
1525
- .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
1526
- color: #fff !important;
1527
- }
1528
-
1529
- .p-paginator-bottom {
1530
- border-radius: 15px !important;
1531
- }
1532
- }
1533
-
1534
- p-tabview {
1535
- .p-tabpanels {
1536
- display: none !important;
1537
- }
1538
-
1539
- .p-tablist .p-tab {
1540
- justify-content: center;
1541
-
1542
- &.p-tab-active {
1543
- color: var(--theme-primary) !important;
1544
- }
1545
- }
1546
- }
1547
-
1548
- vector-panel p-panel .p-panel .p-panel-content {
1549
- padding: 0px !important;
1550
- }
1551
- }
1552
-
1553
- .success {
1554
- color: var(--success-color);
1555
- }
1556
- .error {
1557
- color: var(--error-color);
1558
- }
1559
- .warning {
1560
- color: var(--warning-color);
1561
- }
1562
- .info {
1563
- color: var(--theme-light);
1564
- }
1565
-
1566
- p-tabview {
1567
- background: transparent !important;
1568
-
1569
- .p-tabpanels,
1570
- .p-tabpanel,
1571
- .p-tabview-panel {
1572
- background: transparent !important;
1573
- }
1574
-
1575
- .p-tablist-tab-list {
1576
- background: none !important;
1577
- .p-tab.p-tab-active {
1578
- border-color: var(--theme-primary) !important;
1579
- }
1580
-
1581
- .p-tab {
1582
- border-top-right-radius: 0px !important;
1583
- border-top-left-radius: 0px !important;
1584
- color: var(--theme-primary) !important;
1585
-
1586
- &:hover {
1587
- border-color: var(--theme-primary) !important;
1588
- border-bottom-width: 2px !important;
1589
- }
1590
- }
1591
- .p-tablist-active-bar {
1592
- height: 2px !important;
1593
- background: var(--theme-primary) !important;
1594
- }
1595
- }
1596
- }
1597
-
1598
- .p-accordion {
1599
- .p-accordionpanel {
1600
- margin: 20px 0;
1601
- border: none !important;
1602
- background: transparent !important;
1603
- border-radius: 16px !important;
1604
- box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.06) !important;
1605
- overflow: hidden;
1606
- }
1607
-
1608
- .p-accordionheader {
1609
- position: relative !important;
1610
- border: none !important;
1611
- border-radius: 0 !important;
1612
- box-shadow: none !important;
1613
- background: #ffffff !important;
1614
- color: var(--theme-dark) !important;
1615
- padding: 1.25rem 1.5rem !important;
1616
- font-weight: 600 !important;
1617
-
1618
- &:hover {
1619
- background: #ffffff !important;
1620
- color: var(--theme-dark) !important;
1621
- }
1622
-
1623
- &:focus,
1624
- &:focus-visible {
1625
- outline: none !important;
1626
- box-shadow: none !important;
1627
- }
1628
- }
1629
-
1630
- .p-accordionheader-toggle-icon {
1631
- position: absolute !important;
1632
- right: 1.5rem !important;
1633
- top: 50% !important;
1634
- left: auto !important;
1635
- margin: 0 !important;
1636
- color: var(--theme-dark) !important;
1637
- transform: translateY(-50%) rotate(-90deg);
1638
- transition: transform 0.2s ease;
1639
- }
1640
-
1641
- .p-accordionheader[aria-expanded='true'] .p-accordionheader-toggle-icon {
1642
- transform: translateY(-50%) rotate(0deg);
1643
- }
1644
-
1645
- .p-accordioncontent {
1646
- border: none !important;
1647
- background: #ffffff !important;
1648
- }
1649
-
1650
- .p-accordioncontent-content {
1651
- border: none !important;
1652
- background: #ffffff !important;
1653
- border-radius: 0 !important;
1654
- box-shadow: none !important;
1655
- padding: 0 1.5rem 1.5rem !important;
1656
- color: inherit !important;
1657
- }
1658
- }
1659
-
1660
- .p-chip {
1661
- display: inline-block;
1662
- padding: 0 16px !important;
1663
- height: 40px;
1664
- font-weight: 500;
1665
- font-size: 13px;
1666
- line-height: 40px;
1667
- border-radius: 25px !important;
1668
- background-color: #e5e5ea !important;
1669
- color: #002463 !important;
1670
- opacity: 0.5;
1671
-
1672
- span {
1673
- border: 2px solid;
1674
- border-radius: 50%;
1675
- width: 25px;
1676
- height: 25px;
1677
- margin-left: 5px;
1678
- margin-top: 7px;
1679
- color: #abaab5;
1680
-
1681
- i {
1682
- position: relative;
1683
- top: -11px;
1684
- left: -6px;
1685
- font-size: 12px;
1686
- }
1687
- }
1688
-
1689
- .closebtn {
1690
- padding-left: 10px;
1691
- font-weight: bold;
1692
- float: right;
1693
- font-size: 20px;
1694
- cursor: pointer;
1695
- }
1696
-
1697
- .closebtn:hover {
1698
- color: #000;
1699
- }
1700
- }
1701
-
1702
- .p-menu.p-menu-overlay {
1703
- width: fit-content;
1704
- padding: 8px 0;
1705
- border-radius: 8px;
1706
- background-color: #ffffff !important;
1707
- border: 1px solid #d9dbe9 !important;
1708
- box-shadow:
1709
- 0 1px 2px 0 rgba(31, 41, 55, 0.1),
1710
- 0 2px 4px 0 rgba(31, 41, 55, 0.1),
1711
- 0 4px 8px 0 rgba(31, 41, 55, 0.1),
1712
- 0 8px 16px 0 rgba(31, 41, 55, 0.1);
1713
-
1714
- ul {
1715
- display: flex;
1716
- flex-direction: column;
1717
- max-height: 200px !important;
1718
- overflow-y: auto;
1719
- overflow-x: hidden;
1720
-
1721
- &::-webkit-scrollbar {
1722
- width: 16px;
1723
- }
1724
- &::-webkit-scrollbar-track {
1725
- background: transparent;
1726
- }
1727
- &::-webkit-scrollbar-thumb {
1728
- background: var(--theme-medium);
1729
- border-radius: 10px;
1730
- border: 5px solid transparent;
1731
- background-clip: padding-box;
1732
- }
1733
-
1734
- li {
1735
- border-radius: 4px;
1736
- }
1737
-
1738
- .p-menu-item-content {
1739
- border-radius: 4px;
1740
- background-color: transparent !important;
1741
- }
1742
-
1743
- .p-menu-item-link {
1744
- border-radius: 4px;
1745
- }
1746
-
1747
- .p-menu-item-icon,
1748
- .p-menu-item-label {
1749
- color: #434560 !important;
1750
- }
1751
-
1752
- .p-menu-item-label {
1753
- font-weight: 500 !important;
1754
- }
1755
-
1756
- .p-menu-item-content:hover,
1757
- .p-menu-item.p-focus .p-menu-item-content {
1758
- background-color: var(--theme-medium) !important;
1759
-
1760
- .p-menu-item-icon,
1761
- .p-menu-item-label {
1762
- color: #ffffff !important;
1763
- }
1764
- }
1765
- }
1766
- }
1767
-
1768
- .p-toggleswitch {
1769
- flex: 0 0 auto;
1770
- }
1771
-
1772
- .p-toggleswitch.p-focus .p-toggleswitch-slider {
1773
- box-shadow: none !important;
1774
- }
1775
-
1776
- .p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {
1777
- background-color: var(--theme-primary) !important;
1778
- }
1779
-
1780
- .custom-field-text {
1781
- input[type='text'],
1782
- input[type='password'] {
1783
- border-radius: 6px;
1784
- color: #757b8a !important;
1785
-
1786
- &:focus:not(.ng-invalid):not(.p-inputmask) {
1787
- border: 2px solid #6690f3 !important;
1788
- }
1789
- &:not(.ng-invalid) {
1790
- border: 2px solid #e1e4ea !important;
1791
- }
1792
- }
1793
- &.input-otp {
1794
- justify-content: center;
1795
-
1796
- input[type='text'] {
1797
- padding: 10px;
1798
- min-height: 54px;
1799
- width: 46px;
1800
- font-size: 1.6em !important;
1801
- font-weight: 600;
1802
- color: #363636 !important;
1803
-
1804
- @media screen and (max-width: 576px) {
1805
- padding: 0;
1806
- width: 40px;
1807
- font-size: 1.2em !important;
1808
- font-weight: 600;
1809
- }
1810
- }
1811
- }
1812
- &.uppercase {
1813
- input[type='text'] {
1814
- text-transform: uppercase;
1815
- }
1816
- span {
1817
- text-transform: none;
1818
- }
1819
- }
1820
- &.centered {
1821
- input[type='text'] {
1822
- text-align: center;
1823
- }
1824
- }
1825
- &.size-lg {
1826
- input[type='text'] {
1827
- font-size: 1.3em !important;
1828
- }
1829
- }
1830
- }
1831
-
1832
- .vector-text {
1833
- &.uppercase {
1834
- input[type='text'] {
1835
- text-transform: uppercase;
1836
- }
1837
- span {
1838
- text-transform: none;
1839
- }
1840
- }
1841
- }
1842
-
1843
- .multiselect-flags {
1844
- .p-multiselect-overlay .p-multiselect-list {
1845
- .p-multiselect-item {
1846
- span {
1847
- color: #757b8a;
1848
- }
1849
- &:hover {
1850
- background: #e1e4ea !important;
1851
- }
1852
- &:not(.p-highlight):not(.p-disabled).p-focus {
1853
- background: #e1e4ea !important;
1854
- }
1855
- &.p-highlight {
1856
- background: #e1e4ea !important;
1857
- }
1858
- }
1859
- }
1860
- }
1
+ .ch {
2
+ cursor: help;
3
+ }
4
+ .cp {
5
+ cursor: pointer;
6
+ }
7
+ .p-focus,
8
+ .p-element:focus {
9
+ box-shadow: none !important;
10
+ }
11
+
12
+ .field {
13
+ margin-bottom: 0rem !important;
14
+ }
15
+
16
+ .p-button.p-button-icon-only {
17
+ padding: 0.4rem 0 !important;
18
+ }
19
+
20
+ .p-button:hover:not(:disabled) .p-button-icon,
21
+ .p-button.success .p-button-icon {
22
+ color: #fff !important;
23
+ }
24
+
25
+ .p-button.p-button-link {
26
+ color: var(--theme-dark);
27
+ background: transparent;
28
+ border: transparent;
29
+ }
30
+ .p-button.p-button-link:enabled:hover {
31
+ background: transparent;
32
+ color: var(--theme-dark);
33
+ border-color: transparent;
34
+ }
35
+ .p-button.p-button-link:enabled:hover .p-button-label {
36
+ text-decoration: none;
37
+ }
38
+ .p-button.p-button-link:enabled:focus {
39
+ background: transparent;
40
+ box-shadow: 0 0 0 0.2rem #a6d5fa;
41
+ border-color: transparent;
42
+ }
43
+ .p-button.p-button-link:enabled:active {
44
+ background: transparent;
45
+ color: var(--theme-dark);
46
+ border-color: transparent;
47
+ }
48
+
49
+ p-button {
50
+ width: 100%;
51
+ border-width: 2px;
52
+ border-radius: var(--border-radius);
53
+ background-color: var(--theme-dark);
54
+ border-color: var(--theme-dark);
55
+ color: #ffffff;
56
+ box-shadow: 0px 5px 5px rgba(0, 70, 232, 0.5);
57
+
58
+ button {
59
+ width: 100% !important;
60
+ }
61
+
62
+ &.round {
63
+ button {
64
+ border-radius: 8px;
65
+ }
66
+ }
67
+
68
+ &:hover:not(:disabled) {
69
+ background-color: #003049;
70
+ border-color: #003049;
71
+ }
72
+
73
+ &:focus {
74
+ box-shadow: none;
75
+ }
76
+
77
+ &:disabled {
78
+ cursor: not-allowed;
79
+ }
80
+ .no-shadow {
81
+ box-shadow: none;
82
+ }
83
+
84
+ .p-button {
85
+ border-width: 2px !important;
86
+ }
87
+
88
+ .default {
89
+ background-color: #ffffff;
90
+ border-color: var(--theme-dark);
91
+
92
+ .p-button-label {
93
+ color: var(--theme-dark);
94
+ }
95
+
96
+ .p-button-icon {
97
+ color: var(--theme-dark);
98
+ }
99
+
100
+ &:hover:not(:disabled) {
101
+ background-color: var(--theme-dark);
102
+ border-color: var(--theme-dark);
103
+ .p-button-label {
104
+ color: #ffffff;
105
+ }
106
+ }
107
+ }
108
+
109
+ .default-filled {
110
+ background-color: var(--theme-primary);
111
+ border-color: var(--theme-primary);
112
+ .p-button-label {
113
+ color: #ffffff;
114
+ }
115
+ .p-button-icon {
116
+ color: #ffffff;
117
+ }
118
+
119
+ &:hover:not(:disabled) {
120
+ background-color: var(--theme-dark);
121
+ border-color: var(--theme-dark);
122
+ }
123
+ }
124
+
125
+ .cancel {
126
+ background-color: #ffffff;
127
+ border-color: var(--error-color);
128
+ .p-button-label {
129
+ color: var(--error-color);
130
+ }
131
+ .p-button-icon {
132
+ color: var(--error-color);
133
+ }
134
+
135
+ &:hover:not(:disabled) {
136
+ background-color: var(--error-color-dark);
137
+ border-color: var(--error-color-dark);
138
+ .p-button-label {
139
+ color: #ffffff;
140
+ }
141
+ }
142
+ }
143
+
144
+ .cancel-filled {
145
+ background-color: var(--error-color);
146
+ border-color: var(--error-color);
147
+ .p-button-label {
148
+ color: #ffffff;
149
+ }
150
+
151
+ .p-button-icon {
152
+ color: #ffffff;
153
+ }
154
+
155
+ &:hover:not(:disabled) {
156
+ background-color: var(--error-color-dark);
157
+ border-color: var(--error-color-dark);
158
+ }
159
+ }
160
+
161
+ .success {
162
+ background-color: var(--success-color);
163
+ border-color: var(--success-color);
164
+ .p-button-label {
165
+ color: #fff;
166
+ }
167
+ .p-button-icon {
168
+ color: #fff;
169
+ }
170
+
171
+ &:hover:not(:disabled) {
172
+ background-color: var(--success-color-dark);
173
+ border-color: var(--success-color-dark);
174
+ }
175
+ }
176
+
177
+ .light-outline {
178
+ background-color: var(--background);
179
+ border-color: var(--gray-medium);
180
+ .p-button-label {
181
+ color: var(--success-color);
182
+ }
183
+ .p-button-icon {
184
+ color: var(--success-color);
185
+ }
186
+
187
+ &:hover:not(:disabled) {
188
+ background-color: var(--success-color-dark);
189
+ border-color: var(--success-color-dark);
190
+ .p-button-label {
191
+ color: #fff;
192
+ }
193
+ }
194
+ }
195
+
196
+ .success-outlined {
197
+ background-color: #ffffff;
198
+ border-color: var(--success-color);
199
+
200
+ .p-button-label {
201
+ color: var(--success-color);
202
+ }
203
+ .p-button-icon {
204
+ color: var(--success-color);
205
+ }
206
+
207
+ &:hover:not(:disabled) {
208
+ background-color: var(--success-color-dark);
209
+ border-color: var(--success-color-dark);
210
+
211
+ .p-button-label {
212
+ color: #fff;
213
+ }
214
+ }
215
+ }
216
+
217
+ .default-outlined {
218
+ background-color: #ffffff;
219
+ border-color: var(--theme-light);
220
+
221
+ .p-button-label {
222
+ color: var(--theme-light);
223
+ }
224
+ .p-button-icon {
225
+ color: var(--theme-light);
226
+ }
227
+
228
+ &:hover:not(:disabled) {
229
+ background-color: var(--theme-primary);
230
+ border-color: var(--theme-primary);
231
+
232
+ .p-button-label {
233
+ color: #fff;
234
+ }
235
+ }
236
+ }
237
+ .default-outlined-gray {
238
+ background-color: #ffffff;
239
+ border-color: var(--gray-medium);
240
+
241
+ .p-button-label {
242
+ color: var(--theme-light);
243
+ }
244
+ .p-button-icon {
245
+ color: var(--theme-light);
246
+ }
247
+
248
+ &:hover:not(:disabled) {
249
+ background-color: var(--theme-primary);
250
+ border-color: var(--theme-primary);
251
+
252
+ .p-button-label {
253
+ color: #fff;
254
+ }
255
+ }
256
+ }
257
+ .default-outlined-gray-icon-red {
258
+ background-color: #ffffff;
259
+ border-color: var(--gray-medium);
260
+
261
+ .p-button-label {
262
+ color: var(--theme-light);
263
+ }
264
+ .p-button-icon {
265
+ color: var(--cancel-color);
266
+ }
267
+
268
+ &:hover:not(:disabled) {
269
+ background-color: var(--cancel-color);
270
+ border-color: var(--cancel-color);
271
+
272
+ .p-button-label {
273
+ color: #fff;
274
+ }
275
+ }
276
+ }
277
+ .default-outlined-gray-icon-gray {
278
+ background-color: #ffffff;
279
+ border-color: var(--gray-medium);
280
+
281
+ .p-button-label {
282
+ color: var(--form-labels-color);
283
+ }
284
+ .p-button-icon {
285
+ color: var(--form-labels-color);
286
+ }
287
+
288
+ &:hover:not(:disabled) {
289
+ background-color: var(--gray-medium);
290
+ border-color: var(--gray-medium);
291
+
292
+ .p-button-label {
293
+ color: var(--form-labels-color);
294
+ }
295
+ .p-button-icon {
296
+ color: var(--form-labels-color);
297
+ }
298
+ }
299
+ }
300
+ }
301
+
302
+ .p-inputgroup {
303
+ display: flex;
304
+ align-items: stretch;
305
+ width: 100%;
306
+
307
+ > input,
308
+ > p-inputmask {
309
+ flex: 1 1 auto;
310
+ width: 1%;
311
+ }
312
+
313
+ vector-button {
314
+ flex: 0 0 auto;
315
+
316
+ p-button,
317
+ button {
318
+ width: auto !important;
319
+ }
320
+ }
321
+ }
322
+
323
+ .p-input-icon-left,
324
+ .p-input-icon-right {
325
+ position: relative;
326
+ }
327
+
328
+ .p-input-icon-left > i,
329
+ .p-input-icon-left > svg {
330
+ position: absolute;
331
+ top: 50%;
332
+ left: 0.75rem;
333
+ margin-top: -0.5rem;
334
+ z-index: 1;
335
+ }
336
+
337
+ .p-input-icon-right > i,
338
+ .p-input-icon-right > svg {
339
+ position: absolute;
340
+ top: 50%;
341
+ right: 0.75rem;
342
+ margin-top: -0.5rem;
343
+ z-index: 1;
344
+ }
345
+
346
+ .p-autocomplete-input {
347
+ border-right: none !important;
348
+ border-top-right-radius: 0px !important;
349
+ border-bottom-right-radius: 0px !important;
350
+ padding: 6px 0px 6px 12px !important;
351
+
352
+ &:focus + .p-autocomplete-dropdown {
353
+ background-color: #ffffff !important;
354
+ border-right: 2px solid var(--theme-dark) !important;
355
+ border-top: 2px solid var(--theme-dark) !important;
356
+ border-bottom: 2px solid var(--theme-dark) !important;
357
+ }
358
+ }
359
+
360
+ .p-inputwrapper-focus .p-autocomplete-dropdown {
361
+ background-color: #ffffff !important;
362
+ border-right: 2px solid var(--theme-dark) !important;
363
+ border-top: 2px solid var(--theme-dark) !important;
364
+ border-bottom: 2px solid var(--theme-dark) !important;
365
+ }
366
+
367
+ .p-autocomplete-dropdown {
368
+ background-color: var(--gray-light) !important;
369
+ border: none !important;
370
+ margin-left: -1px !important;
371
+ border-top-right-radius: var(--border-radius) !important;
372
+ border-bottom-right-radius: var(--border-radius) !important;
373
+ color: var(--gray-dark) !important;
374
+ padding-bottom: 5px !important;
375
+ }
376
+
377
+ .p-select,
378
+ .p-multiselect {
379
+ height: 40px;
380
+ background-color: var(--gray-medium) !important;
381
+
382
+ .p-select-label,
383
+ .p-multiselect-label {
384
+ font-family: 'Poppins';
385
+ color: var(--theme-dark) !important;
386
+ font-weight: 500;
387
+ display: flex;
388
+ align-items: center;
389
+ }
390
+ }
391
+
392
+ .p-paginator .p-select {
393
+ width: auto !important;
394
+ height: auto !important;
395
+ background-color: transparent !important;
396
+ border: 1px solid var(--gray-medium) !important;
397
+ border-radius: 8px !important;
398
+
399
+ .p-select-label {
400
+ padding: 8px 12px !important;
401
+ color: var(--theme-dark) !important;
402
+ font-weight: 600;
403
+ }
404
+
405
+ .p-select-dropdown {
406
+ color: var(--theme-dark) !important;
407
+ }
408
+ }
409
+
410
+ .p-paginator .p-paginator-first,
411
+ .p-paginator .p-paginator-prev,
412
+ .p-paginator .p-paginator-next,
413
+ .p-paginator .p-paginator-last {
414
+ color: var(--theme-dark) !important;
415
+ }
416
+
417
+ p-inputnumber:not(.currency-input).ng-touched.ng-invalid input.p-inputnumber-input {
418
+ border-color: var(--error-color) !important;
419
+ background-color: var(--error-color-transparent) !important;
420
+ }
421
+
422
+ p-inputnumber.currency-input:not(.outlined) {
423
+ &.ng-touched.ng-invalid input.p-inputnumber-input {
424
+ color: var(--error-color) !important;
425
+ }
426
+
427
+ &.rounded input.p-inputnumber-input {
428
+ font-size: 1rem !important;
429
+ }
430
+
431
+ input.p-inputnumber-input {
432
+ font-size: 2em !important;
433
+ border: none !important;
434
+ font-weight: 600 !important;
435
+ background-color: #ffffff !important;
436
+ color: var(--theme-dark) !important;
437
+ width: 100% !important;
438
+ padding: 0px !important;
439
+ height: 2em !important;
440
+
441
+ &:focus {
442
+ outline: 0 !important;
443
+ box-shadow: none !important;
444
+ }
445
+ }
446
+ }
447
+
448
+ .p-inputnumber-buttons-horizontal,
449
+ .p-inputnumber.p-inputnumber-horizontal {
450
+ display: flex !important;
451
+ flex-direction: row !important;
452
+ align-items: stretch !important;
453
+ width: 100% !important;
454
+
455
+ p-button,
456
+ .p-inputnumber-button-group {
457
+ width: auto !important;
458
+ background: transparent !important;
459
+ border: none !important;
460
+ box-shadow: none !important;
461
+ display: inline-flex !important;
462
+ align-items: stretch !important;
463
+ }
464
+
465
+ .p-inputnumber-input {
466
+ flex: 1 1 auto !important;
467
+ min-width: 0 !important;
468
+ text-align: center !important;
469
+ border-radius: 0 !important;
470
+ }
471
+
472
+ .p-inputnumber-button,
473
+ button.p-inputnumber-increment-button,
474
+ button.p-inputnumber-decrement-button,
475
+ .p-button {
476
+ width: 36px !important;
477
+ min-width: 36px !important;
478
+ flex: 0 0 36px !important;
479
+ padding: 0 !important;
480
+ color: var(--theme-primary) !important;
481
+ border: none !important;
482
+ border-radius: 0 !important;
483
+ background: var(--gray-light) !important;
484
+ box-shadow: none !important;
485
+ display: inline-flex !important;
486
+ align-items: center !important;
487
+ justify-content: center !important;
488
+
489
+ &:hover:not(:disabled) {
490
+ background: var(--gray-medium) !important;
491
+ color: var(--theme-dark) !important;
492
+ }
493
+
494
+ &:focus,
495
+ &:focus-visible {
496
+ outline: none !important;
497
+ box-shadow: none !important;
498
+ }
499
+
500
+ span,
501
+ .p-button-icon,
502
+ svg {
503
+ color: inherit !important;
504
+ font-weight: 600 !important;
505
+ border-radius: 0 !important;
506
+ }
507
+ }
508
+
509
+ .p-inputnumber-decrement-button,
510
+ .p-inputnumber-button:first-of-type {
511
+ border-top-left-radius: 0 !important;
512
+ border-bottom-left-radius: 0 !important;
513
+ border-top-right-radius: 0 !important;
514
+ border-bottom-right-radius: 0 !important;
515
+ }
516
+
517
+ .p-inputnumber-increment-button,
518
+ .p-inputnumber-button:last-of-type {
519
+ border-top-right-radius: 0 !important;
520
+ border-bottom-right-radius: 0 !important;
521
+ border-top-left-radius: 0 !important;
522
+ border-bottom-left-radius: 0 !important;
523
+ }
524
+ }
525
+
526
+ .p-multiselect {
527
+ padding: 6px 0px 6px 12px !important;
528
+
529
+ .p-multiselect-label {
530
+ padding: 0.3rem 0.5rem 0 0 !important;
531
+ }
532
+
533
+ .p-multiselect-trigger {
534
+ width: 12px !important;
535
+ &:hover {
536
+ color: #fff !important;
537
+ }
538
+ }
539
+
540
+ // PrimeNG 19: display="chip" renderiza <p-chip styleClass="p-multiselect-chip"> dentro do .p-multiselect-label
541
+ // Deixar inline, compacto, igual QA (PrimeNG 17 era assim por padrão)
542
+ &.p-multiselect-display-chip {
543
+ .p-multiselect-label {
544
+ display: inline-flex !important;
545
+ flex-wrap: wrap !important;
546
+ align-items: center !important;
547
+ gap: 4px !important;
548
+ padding: 0.15rem 0.5rem 0.15rem 0 !important;
549
+ min-height: 28px !important;
550
+ }
551
+
552
+ .p-multiselect-chip-item {
553
+ display: inline-flex !important;
554
+ align-items: center !important;
555
+ }
556
+
557
+ .p-multiselect-chip,
558
+ .p-chip {
559
+ height: 24px !important;
560
+ padding: 0 6px 0 10px !important;
561
+ background: #ffffff !important;
562
+ border: 1px solid #e5e7eb !important;
563
+ border-radius: 16px !important;
564
+ font-size: 12px !important;
565
+ font-weight: 500 !important;
566
+ line-height: 1 !important;
567
+ color: var(--theme-dark) !important;
568
+ gap: 4px !important;
569
+ display: inline-flex !important;
570
+ align-items: center !important;
571
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
572
+
573
+ .p-chip-label,
574
+ .p-multiselect-chip-label {
575
+ max-width: 140px !important;
576
+ overflow: hidden !important;
577
+ text-overflow: ellipsis !important;
578
+ white-space: nowrap !important;
579
+ color: inherit !important;
580
+ }
581
+
582
+ .p-chip-remove-icon,
583
+ .p-multiselect-chip-icon,
584
+ svg {
585
+ width: 14px !important;
586
+ height: 14px !important;
587
+ color: var(--theme-dark) !important;
588
+ opacity: 0.6 !important;
589
+ cursor: pointer !important;
590
+
591
+ &:hover {
592
+ opacity: 1 !important;
593
+ }
594
+ }
595
+ }
596
+ }
597
+ }
598
+
599
+ input.p-inputtext:not(.currency-input),
600
+ .p-inputtextarea,
601
+ .p-textarea,
602
+ .p-multiselect {
603
+ &:not(:focus) {
604
+ border: none !important;
605
+ background-color: var(--gray-light) !important;
606
+ }
607
+ width: 100%;
608
+ padding: 6px 12px 6px 12px !important;
609
+ border-top-right-radius: var(--border-radius);
610
+ border-bottom-right-radius: var(--border-radius);
611
+ border-top-left-radius: var(--border-radius);
612
+ border-bottom-left-radius: var(--border-radius);
613
+ height: 40px;
614
+ font-size: 0.9em !important;
615
+ color: var(--theme-dark) !important;
616
+ font-weight: 500;
617
+
618
+ &:disabled {
619
+ cursor: not-allowed;
620
+ opacity: 0.6;
621
+ }
622
+
623
+ &:focus {
624
+ outline: 0 !important;
625
+ box-shadow: none !important;
626
+ border: 2px solid var(--theme-dark);
627
+ background-color: #ffffff;
628
+ }
629
+
630
+ &:hover,
631
+ &:focus:not(.ng-invalid):not(.p-inputmask) {
632
+ border-color: var(--theme-dark) !important;
633
+ }
634
+
635
+ &::placeholder {
636
+ color: var(--theme-dark);
637
+ opacity: 0.8;
638
+ }
639
+
640
+ &.ng-touched.ng-invalid {
641
+ border-color: var(--error-color) !important;
642
+ background-color: var(--error-color-transparent) !important;
643
+ }
644
+
645
+ &:not(.ng-invalid) {
646
+ border-color: var(--theme-dark) !important;
647
+ }
648
+ }
649
+
650
+ .p-inputtextarea,
651
+ .p-textarea {
652
+ padding-right: 62px !important;
653
+ resize: none;
654
+ height: unset !important;
655
+ }
656
+
657
+ .p-datepicker {
658
+ width: 100% !important;
659
+ .p-inputtext {
660
+ color: var(--theme-dark) !important;
661
+ font-weight: 600 !important;
662
+ margin-left: -1px !important;
663
+ border-top-right-radius: 0px !important;
664
+ border-bottom-right-radius: 0px !important;
665
+
666
+ &:focus {
667
+ border-right: none !important;
668
+
669
+ + .p-datepicker-dropdown {
670
+ border-right: 2px solid var(--theme-dark) !important;
671
+ border-top: 2px solid var(--theme-dark) !important;
672
+ border-bottom: 2px solid var(--theme-dark) !important;
673
+ background-color: #ffffff !important;
674
+ }
675
+ }
676
+ }
677
+
678
+ .p-datepicker-dropdown {
679
+ background-color: var(--gray-light) !important;
680
+ border: none !important;
681
+ border-top-right-radius: var(--border-radius) !important;
682
+ border-bottom-right-radius: var(--border-radius) !important;
683
+
684
+ span {
685
+ color: var(--theme-dark) !important;
686
+ }
687
+ }
688
+ }
689
+ p-datepicker.ng-touched.ng-invalid {
690
+ .p-datepicker {
691
+ width: 100% !important;
692
+ input.p-inputtext:not(.currency-input),
693
+ .p-inputtextarea {
694
+ &:not(:focus) {
695
+ border: none !important;
696
+ background-color: var(--error-color-transparent) !important;
697
+ }
698
+ }
699
+ }
700
+
701
+ .p-datepicker-dropdown {
702
+ border-color: var(--error-color) !important;
703
+ background-color: var(--error-color-transparent) !important;
704
+ }
705
+
706
+ .p-focus {
707
+ input.p-inputtext:not(.currency-input),
708
+ .p-inputtextarea {
709
+ border-color: var(--error-color) !important;
710
+ background-color: var(--error-color-transparent) !important;
711
+ }
712
+ .p-datepicker-dropdown {
713
+ border-right: 2px solid var(--error-color) !important;
714
+ border-top: 2px solid var(--error-color) !important;
715
+ border-bottom: 2px solid var(--error-color) !important;
716
+ background-color: var(--error-color-transparent) !important;
717
+ }
718
+ }
719
+ }
720
+
721
+ p-inputmask {
722
+ flex: 1;
723
+ }
724
+ p-inputmask.ng-touched.ng-invalid input {
725
+ border-color: var(--error-color) !important;
726
+ background-color: var(--error-color-transparent) !important;
727
+ }
728
+
729
+ p-inputnumber:not(.currency-input),
730
+ p-inputnumber.outlined {
731
+ display: block !important;
732
+
733
+ span {
734
+ width: 100%;
735
+ }
736
+ }
737
+
738
+ p-inputnumber .text-centered input {
739
+ text-align: center;
740
+ }
741
+
742
+ p-radiobutton.ng-touched.ng-invalid .p-radiobutton-box {
743
+ border-color: var(--error-color) !important;
744
+ }
745
+
746
+ .p-radiobutton {
747
+ width: 24px;
748
+ height: 24px;
749
+
750
+ .p-radiobutton-box {
751
+ border: 2px solid #d1d5db !important;
752
+ background: #ffffff !important;
753
+ box-shadow: none !important;
754
+ }
755
+
756
+ &:not(.p-disabled):hover .p-radiobutton-box {
757
+ border-color: #1545de !important;
758
+ }
759
+
760
+ &.p-radiobutton-checked .p-radiobutton-box {
761
+ border-color: #1545de !important;
762
+ background: #1545de !important;
763
+
764
+ .p-radiobutton-icon {
765
+ background: #ffffff !important;
766
+ }
767
+ }
768
+
769
+ .p-radiobutton-input:focus-visible + .p-radiobutton-box,
770
+ &.p-focus .p-radiobutton-box {
771
+ border-color: #1545de !important;
772
+ box-shadow: 0 0 0 3px #ced9fa !important;
773
+ }
774
+ }
775
+
776
+ .p-steps .p-steps-item.p-highlight {
777
+ background-color: transparent !important;
778
+
779
+ .p-menu-item-link .p-steps-number {
780
+ color: #fff !important;
781
+ background-color: var(--theme-medium) !important;
782
+ }
783
+ }
784
+
785
+ .p-menu-list {
786
+ padding: 0px !important;
787
+ }
788
+
789
+ .p-menu-item-link {
790
+ padding: 0.75rem 1rem !important;
791
+ }
792
+
793
+ .p-steps .p-steps-item:not(.p-highlight) {
794
+ .p-steps-title {
795
+ opacity: 0.4 !important;
796
+ }
797
+
798
+ .p-menu-item-link .p-steps-number {
799
+ color: var(--theme-medium) !important;
800
+ }
801
+ }
802
+
803
+ .p-steps .p-steps-item .p-steps-title {
804
+ color: var(--theme-medium) !important;
805
+ }
806
+
807
+ .p-steps .p-steps-item.p-disabled {
808
+ opacity: 1 !important;
809
+ }
810
+
811
+ .p-steps .p-steps-item .p-menu-item-link {
812
+ background: transparent !important;
813
+
814
+ .p-steps-number {
815
+ min-width: 2.6rem !important;
816
+ height: 2.6rem !important;
817
+ font-size: 1rem !important;
818
+ border: 2px solid var(--theme-medium) !important;
819
+ }
820
+ }
821
+
822
+ .p-steps ul > li:nth-child(1):only-child::before {
823
+ content: unset !important;
824
+ }
825
+
826
+ .p-steps ul > li:not(:only-child)::before {
827
+ border: 1px dashed var(--theme-medium) !important;
828
+ }
829
+
830
+ .p-steps .p-steps-item:first-child:before {
831
+ width: 50% !important;
832
+ left: 50% !important;
833
+ }
834
+
835
+ .p-steps .p-steps-item:last-child:before {
836
+ width: 50% !important;
837
+ }
838
+
839
+ .p-steps .p-steps-item.checked .p-steps-title {
840
+ color: var(--success-color-dark) !important;
841
+ }
842
+
843
+ .p-steps .p-steps-item.checked .p-menu-item-link .p-steps-number {
844
+ background-color: var(--success-color-dark) !important;
845
+ color: #fff !important;
846
+ border: 2px solid var(--success-color-dark) !important;
847
+ }
848
+
849
+ .p-steps .p-steps-item .p-menu-item-link .p-steps-number.disabled {
850
+ color: var(--gray-dark) !important;
851
+ border: 2px solid var(--gray-dark) !important;
852
+ }
853
+
854
+ .p-highlight {
855
+ background-color: var(--theme-primary) !important;
856
+ border-color: var(--theme-primary) !important;
857
+ }
858
+
859
+ .p-button:focus {
860
+ box-shadow: unset !important;
861
+ }
862
+
863
+ .p-button.button {
864
+ display: flex !important;
865
+ flex-direction: row !important;
866
+ justify-content: center !important;
867
+
868
+ .p-button-label {
869
+ flex: unset !important;
870
+ }
871
+ }
872
+
873
+ .p-datepicker-panel {
874
+ border: 2px solid var(--theme-dark) !important;
875
+ border-radius: var(--border-radius) !important;
876
+ z-index: 15000 !important;
877
+
878
+ .p-datepicker-weekday {
879
+ color: var(--theme-dark) !important;
880
+ }
881
+
882
+ .p-datepicker-day {
883
+ color: var(--font-color) !important;
884
+
885
+ &:focus {
886
+ box-shadow: unset !important;
887
+ }
888
+ }
889
+
890
+ .p-datepicker-day-selected {
891
+ color: #ffffff !important;
892
+ }
893
+
894
+ p-button {
895
+ width: auto !important;
896
+ background: transparent !important;
897
+ box-shadow: none !important;
898
+
899
+ button {
900
+ width: auto !important;
901
+ min-width: 2rem !important;
902
+ background: transparent !important;
903
+ border: none !important;
904
+ box-shadow: none !important;
905
+ color: var(--theme-dark) !important;
906
+
907
+ &:hover:not(:disabled) {
908
+ background: var(--gray-light) !important;
909
+ border: none !important;
910
+ }
911
+ }
912
+
913
+ .p-button-icon {
914
+ color: var(--theme-dark) !important;
915
+ }
916
+ }
917
+ }
918
+
919
+ .p-toast {
920
+ .p-toast-message {
921
+ border-radius: 12px !important;
922
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
923
+ border: none !important;
924
+ padding: 16px !important;
925
+ color: #1f2937 !important;
926
+ }
927
+
928
+ .p-toast-message-content {
929
+ gap: 12px !important;
930
+ align-items: center !important;
931
+ padding: 0 !important;
932
+ }
933
+
934
+ .p-toast-message-text {
935
+ gap: 4px !important;
936
+ }
937
+
938
+ .p-toast-summary {
939
+ color: #111827 !important;
940
+ font-family: 'Poppins', 'Inter', sans-serif !important;
941
+ font-weight: 600 !important;
942
+ font-size: 14px !important;
943
+ }
944
+
945
+ .p-toast-detail {
946
+ color: #4b5563 !important;
947
+ font-family: 'Poppins', 'Inter', sans-serif !important;
948
+ font-weight: 400 !important;
949
+ font-size: 12px !important;
950
+ }
951
+
952
+ .p-toast-message-icon {
953
+ width: 40px !important;
954
+ height: 40px !important;
955
+ min-width: 40px !important;
956
+ border-radius: 50% !important;
957
+ display: inline-flex !important;
958
+ align-items: center !important;
959
+ justify-content: center !important;
960
+ color: #ffffff !important;
961
+
962
+ svg,
963
+ .p-icon {
964
+ width: 22px !important;
965
+ height: 22px !important;
966
+ color: #ffffff !important;
967
+ fill: #ffffff !important;
968
+ }
969
+ }
970
+
971
+ .p-toast-message-warn {
972
+ background: #fde6c0 !important;
973
+ .p-toast-message-icon {
974
+ background: #f59e0b !important;
975
+ }
976
+ }
977
+
978
+ .p-toast-message-error {
979
+ background: #fee2e2 !important;
980
+ .p-toast-message-icon {
981
+ background: #ef4444 !important;
982
+ }
983
+ }
984
+
985
+ .p-toast-message-success {
986
+ background: #dcfce7 !important;
987
+ .p-toast-message-icon {
988
+ background: #22c55e !important;
989
+ }
990
+ }
991
+
992
+ p-button,
993
+ .p-toast-close-button {
994
+ width: auto !important;
995
+ background: transparent !important;
996
+ border: none !important;
997
+ box-shadow: none !important;
998
+ align-self: center !important;
999
+
1000
+ button {
1001
+ width: 2rem !important;
1002
+ min-width: 2rem !important;
1003
+ height: 2rem !important;
1004
+ padding: 0 !important;
1005
+ background: transparent !important;
1006
+ border: none !important;
1007
+ box-shadow: none !important;
1008
+ color: #6b7280 !important;
1009
+ border-radius: 50% !important;
1010
+
1011
+ &:hover:not(:disabled) {
1012
+ background: rgba(0, 0, 0, 0.06) !important;
1013
+ border: none !important;
1014
+ color: #1f2937 !important;
1015
+ }
1016
+ }
1017
+
1018
+ .p-button-icon,
1019
+ .p-toast-close-icon {
1020
+ color: inherit !important;
1021
+ width: 1rem !important;
1022
+ height: 1rem !important;
1023
+ }
1024
+ }
1025
+ }
1026
+
1027
+ .p-overlaypanel:not(.background-white) {
1028
+ background-color: #01529b !important;
1029
+ }
1030
+
1031
+ .p-overlaypanel-content {
1032
+ padding: 6px 8px 6px 8px !important;
1033
+ }
1034
+
1035
+ .p-overlaypanel::after,
1036
+ .p-overlaypanel::before {
1037
+ border-bottom-color: #01529b !important;
1038
+ }
1039
+
1040
+ .p-dialog:not(.p-confirm-dialog) {
1041
+ .p-dialog-header {
1042
+ padding: 3px !important;
1043
+ border-top-left-radius: 9px !important;
1044
+ border-top-right-radius: 9px !important;
1045
+ }
1046
+
1047
+ .p-dialog-content {
1048
+ border-bottom-left-radius: 9px !important;
1049
+ border-bottom-right-radius: 9px !important;
1050
+ }
1051
+ }
1052
+
1053
+ .p-dialog .p-dialog-header .p-dialog-title {
1054
+ font-size: 1em !important;
1055
+ text-align: center !important;
1056
+ }
1057
+
1058
+ .p-dialog-header-close-icon {
1059
+ font-weight: 600 !important;
1060
+ }
1061
+
1062
+ .p-dialog .p-dialog-header p-button,
1063
+ .p-drawer .p-drawer-header p-button {
1064
+ width: auto !important;
1065
+ background: transparent !important;
1066
+ box-shadow: none !important;
1067
+
1068
+ button {
1069
+ width: 2rem !important;
1070
+ height: 2rem !important;
1071
+ min-width: 2rem !important;
1072
+ padding: 0 !important;
1073
+ border-radius: 50% !important;
1074
+ background: transparent !important;
1075
+ border: none !important;
1076
+ box-shadow: none !important;
1077
+ color: var(--gray-dark) !important;
1078
+ transition:
1079
+ background-color 0.15s ease,
1080
+ color 0.15s ease;
1081
+ }
1082
+
1083
+ &:hover button:not(:disabled) {
1084
+ background: var(--gray-light) !important;
1085
+ color: var(--theme-dark) !important;
1086
+ }
1087
+
1088
+ .p-dialog-header-close-icon,
1089
+ .p-button-icon {
1090
+ font-size: 1rem !important;
1091
+ }
1092
+ }
1093
+
1094
+ .p-confirm-dialog {
1095
+ .p-dialog-footer .actions {
1096
+ display: flex;
1097
+ align-items: center;
1098
+ justify-content: flex-end;
1099
+ gap: 20px;
1100
+ }
1101
+
1102
+ .p-confirm-dialog-icon {
1103
+ display: none !important;
1104
+ }
1105
+
1106
+ .p-confirm-dialog-message {
1107
+ margin-left: 0px !important;
1108
+ }
1109
+ }
1110
+
1111
+ .p-selectbutton {
1112
+ display: inline-flex !important;
1113
+ align-items: center !important;
1114
+ gap: 4px !important;
1115
+ padding: 4px !important;
1116
+ height: 42px !important;
1117
+ background-color: var(--gray-light) !important;
1118
+ border-radius: 12px !important;
1119
+ width: fit-content !important;
1120
+
1121
+ .p-togglebutton {
1122
+ display: inline-flex !important;
1123
+ align-items: center !important;
1124
+ height: 34px !important;
1125
+ margin: 0 !important;
1126
+ padding: 0 16px !important;
1127
+ border: none !important;
1128
+ border-radius: 8px !important;
1129
+ background: transparent !important;
1130
+ transition: all 0.2s ease;
1131
+
1132
+ .p-togglebutton-content {
1133
+ gap: 6px !important;
1134
+ font-size: 14px !important;
1135
+ font-weight: 500 !important;
1136
+ line-height: 1 !important;
1137
+ }
1138
+
1139
+ .p-togglebutton-label,
1140
+ .p-togglebutton-icon {
1141
+ color: var(--theme-dark) !important;
1142
+ }
1143
+
1144
+ &:not(.p-togglebutton-checked) {
1145
+ background-color: transparent !important;
1146
+ }
1147
+
1148
+ &.p-togglebutton-checked {
1149
+ background-color: #ffffff !important;
1150
+ box-shadow:
1151
+ 0 1px 2px 0 rgba(17, 55, 178, 0.1),
1152
+ 0 2px 4px 0 rgba(17, 55, 178, 0.1),
1153
+ 0 4px 8px 0 rgba(17, 55, 178, 0.1) !important;
1154
+
1155
+ .p-togglebutton-label,
1156
+ .p-togglebutton-icon {
1157
+ color: var(--brand-blue) !important;
1158
+ font-weight: 600 !important;
1159
+ }
1160
+ }
1161
+
1162
+ &:disabled,
1163
+ &.p-disabled {
1164
+ background-color: transparent !important;
1165
+ box-shadow: none !important;
1166
+
1167
+ .p-togglebutton-label,
1168
+ .p-togglebutton-icon {
1169
+ color: var(--gray-dark) !important;
1170
+ }
1171
+ }
1172
+ }
1173
+ }
1174
+
1175
+ vector-select-button-field.is-secondary {
1176
+ .p-selectbutton {
1177
+ background-color: var(--brand-light) !important;
1178
+ border-radius: 9999px !important;
1179
+ }
1180
+
1181
+ .p-togglebutton {
1182
+ padding: 0 20px !important;
1183
+ border-radius: 9999px !important;
1184
+ }
1185
+ }
1186
+
1187
+ .p-multiselect-overlay:not(.has-filter) .p-multiselect-header p-checkbox::after {
1188
+ content: 'Selecionar Todos';
1189
+ display: inline-block;
1190
+ margin-left: 0.5rem;
1191
+ color: var(--theme-dark);
1192
+ font-weight: 500;
1193
+ white-space: nowrap;
1194
+ }
1195
+
1196
+ .p-multiselect-header {
1197
+ .p-checkbox {
1198
+ width: max-content;
1199
+ }
1200
+ }
1201
+
1202
+ p-checkbox.rounded-checkbox,
1203
+ .rounded-checkbox {
1204
+ --p-checkbox-border-radius: 50%;
1205
+ --p-checkbox-checked-border-radius: 50%;
1206
+ }
1207
+
1208
+ .rounded-checkbox .p-checkbox,
1209
+ .rounded-checkbox .p-checkbox.p-checkbox-checked {
1210
+ background: transparent !important;
1211
+ border-radius: 50% !important;
1212
+ }
1213
+
1214
+ .rounded-checkbox .p-checkbox-input {
1215
+ background: transparent !important;
1216
+ border-radius: 50% !important;
1217
+ }
1218
+
1219
+ .rounded-checkbox .p-checkbox-box,
1220
+ .rounded-checkbox .p-checkbox.p-checkbox-checked .p-checkbox-box {
1221
+ border-radius: 50% !important;
1222
+ border: none !important;
1223
+ overflow: hidden !important;
1224
+ }
1225
+
1226
+ .rounded-checkbox .p-checkbox:not(.p-checkbox-checked) .p-checkbox-box {
1227
+ background-color: var(--gray-light) !important;
1228
+ }
1229
+
1230
+ .rounded-checkbox .p-checkbox.p-checkbox-checked .p-checkbox-box {
1231
+ background-color: var(--brand-blue) !important;
1232
+ }
1233
+
1234
+ p-checkbox.rounded-checkbox .p-checkbox-icon,
1235
+ .rounded-checkbox .p-checkbox-icon {
1236
+ font-size: 0.8em !important;
1237
+ padding-top: 2px !important;
1238
+ }
1239
+
1240
+ .p-checkbox-box.p-highlight,
1241
+ .p-checkbox.p-checkbox-checked .p-checkbox-box {
1242
+ background: var(--brand-blue) !important;
1243
+ border-color: var(--brand-blue) !important;
1244
+ }
1245
+
1246
+ .p-checkbox-box {
1247
+ border-width: 2px !important;
1248
+ border-color: var(--gray-dark) !important;
1249
+
1250
+ &:hover:not(.p-highlight) {
1251
+ border-color: var(--gray-dark) !important;
1252
+ }
1253
+ }
1254
+
1255
+ .p-select,
1256
+ .p-autocomplete {
1257
+ width: 100%;
1258
+ }
1259
+ p-autocomplete.ng-touched.ng-invalid {
1260
+ input.p-inputtext:not(.currency-input),
1261
+ .p-inputtextarea {
1262
+ &:not(:focus) {
1263
+ border: none !important;
1264
+ background-color: var(--error-color-transparent) !important;
1265
+ }
1266
+
1267
+ &:focus:not(.ng-invalid):not(.p-inputmask) {
1268
+ border-color: var(--error-color) !important;
1269
+ }
1270
+ }
1271
+ }
1272
+
1273
+ p-autocomplete.ng-touched.ng-invalid .p-autocomplete-dropdown,
1274
+ p-multiselect.ng-touched.ng-invalid .p-multiselect {
1275
+ border-color: var(--error-color) !important;
1276
+ background-color: var(--error-color-transparent) !important;
1277
+ }
1278
+
1279
+ .p-select-overlay,
1280
+ .p-autocomplete-panel,
1281
+ .p-multiselect-overlay {
1282
+ // max-width: 250px !important;
1283
+ min-width: 100%;
1284
+ border: 1px solid var(--theme-dark) !important;
1285
+ margin-top: -2px !important;
1286
+ border-radius: var(--border-radius) !important;
1287
+
1288
+ & .p-autocomplete-items,
1289
+ & .p-multiselect-list {
1290
+ padding-top: 0px !important;
1291
+ padding-bottom: 0px !important;
1292
+ padding-right: 1px !important;
1293
+ }
1294
+
1295
+ &::-webkit-scrollbar {
1296
+ width: 5px;
1297
+ }
1298
+
1299
+ &::-webkit-scrollbar-track {
1300
+ background: var(--gray-light);
1301
+ }
1302
+
1303
+ &::-webkit-scrollbar-thumb {
1304
+ background: var(--theme-dark);
1305
+ border-radius: 8px;
1306
+ }
1307
+
1308
+ &::-webkit-scrollbar-thumb:hover {
1309
+ background: var(--theme-dark);
1310
+ }
1311
+ }
1312
+
1313
+ .p-select-option,
1314
+ .p-autocomplete-item,
1315
+ .p-multiselect-item {
1316
+ text-overflow: ellipsis;
1317
+ color: var(--theme-dark) !important;
1318
+
1319
+ &:hover {
1320
+ background-color: var(--theme-dark) !important;
1321
+ color: #ffffff !important;
1322
+ }
1323
+ }
1324
+
1325
+ .p-select,
1326
+ .p-multiselect {
1327
+ border: none !important;
1328
+ .p-highlight {
1329
+ background-color: #ffffff !important;
1330
+ }
1331
+ }
1332
+ .p-select-overlay .p-select-list .p-select-option.p-highlight,
1333
+ .p-multiselect-overlay .p-multiselect-list .p-multiselect-item.p-highlight {
1334
+ background-color: var(--theme-dark) !important;
1335
+ color: #ffffff !important;
1336
+ }
1337
+
1338
+ .p-slider {
1339
+ background-color: #01529b;
1340
+ .p-slider-range {
1341
+ background-color: var(--success-color) !important;
1342
+ border-radius: inherit !important;
1343
+ }
1344
+ .p-slider-handle {
1345
+ border-color: var(--success-color) !important;
1346
+
1347
+ &:hover {
1348
+ background-color: var(--success-color) !important;
1349
+ }
1350
+ &:focus {
1351
+ box-shadow: unset !important;
1352
+ }
1353
+ }
1354
+ }
1355
+
1356
+ .p-fileupload {
1357
+ p-messages,
1358
+ p-message {
1359
+ display: none !important;
1360
+ }
1361
+
1362
+ .p-fileupload-filelabel,
1363
+ [class*='filelabel'] {
1364
+ display: none !important;
1365
+ }
1366
+
1367
+ input[type='file'] {
1368
+ position: absolute !important;
1369
+ width: 1px !important;
1370
+ height: 1px !important;
1371
+ padding: 0 !important;
1372
+ margin: 0 !important;
1373
+ overflow: hidden !important;
1374
+ clip: rect(0, 0, 0, 0) !important;
1375
+ white-space: nowrap !important;
1376
+ border: 0 !important;
1377
+ opacity: 0 !important;
1378
+ }
1379
+
1380
+ p-button {
1381
+ width: 100% !important;
1382
+ background: transparent !important;
1383
+ border: none !important;
1384
+ box-shadow: none !important;
1385
+ }
1386
+
1387
+ .p-fileupload-choose-button,
1388
+ .p-fileupload-choose {
1389
+ background: transparent !important;
1390
+ border: 1px solid var(--theme-dark) !important;
1391
+ border-radius: 30px !important;
1392
+ box-shadow: none !important;
1393
+ color: var(--theme-dark) !important;
1394
+ width: 100% !important;
1395
+ padding: 0.875rem 1.5rem !important;
1396
+ font-weight: 600 !important;
1397
+ justify-content: center !important;
1398
+ gap: 0.5rem !important;
1399
+
1400
+ &:hover:not(:disabled) {
1401
+ background: var(--theme-dark) !important;
1402
+ border-color: var(--theme-dark) !important;
1403
+ color: #ffffff !important;
1404
+
1405
+ .p-button-label,
1406
+ .p-button-icon {
1407
+ color: #ffffff !important;
1408
+ }
1409
+ }
1410
+
1411
+ .p-button-label {
1412
+ color: inherit !important;
1413
+ flex: 0 0 auto !important;
1414
+ max-width: unset !important;
1415
+ overflow: visible !important;
1416
+ }
1417
+
1418
+ .p-button-icon {
1419
+ color: inherit !important;
1420
+ }
1421
+ }
1422
+ }
1423
+
1424
+ vector-data-table {
1425
+ vector-panel.data-table-panel .p-panel,
1426
+ vector-panel.data-table-panel .p-panel-content,
1427
+ vector-panel.data-table-panel .p-panel-content > div {
1428
+ border-radius: 15px !important;
1429
+ }
1430
+
1431
+ p-table {
1432
+ .p-datatable-wrapper {
1433
+ }
1434
+
1435
+ .p-datatable-table {
1436
+ border-radius: 15px !important;
1437
+ }
1438
+
1439
+ // PrimeNG 18 removeu o responsiveLayout: o .p-column-title (header embutido
1440
+ // em cada celula por getCellContent) precisa ser escondido manualmente.
1441
+ .p-column-title {
1442
+ display: none;
1443
+ }
1444
+
1445
+ .p-datatable-thead {
1446
+ border-radius: 15px !important;
1447
+ z-index: 0 !important;
1448
+
1449
+ .header {
1450
+ th {
1451
+ white-space: normal !important;
1452
+ position: relative;
1453
+ padding: 10px 10px 10px 35px !important;
1454
+ background-color: var(--gray-light) !important;
1455
+ color: #1f2937 !important;
1456
+
1457
+ > div {
1458
+ gap: 8px;
1459
+ }
1460
+
1461
+ &:first-child {
1462
+ border-top-left-radius: 15px !important;
1463
+ padding: 10px !important;
1464
+ }
1465
+
1466
+ &:last-child {
1467
+ border-top-right-radius: 15px !important;
1468
+ }
1469
+
1470
+ p-sorticon {
1471
+ svg {
1472
+ height: 0.85rem !important;
1473
+ width: 0.85rem !important;
1474
+ }
1475
+
1476
+ sortamountupalticon svg,
1477
+ sortamountdownicon svg {
1478
+ color: var(--theme-primary) !important;
1479
+ }
1480
+ }
1481
+
1482
+ &.p-highlight {
1483
+ color: var(--theme-primary) !important;
1484
+ }
1485
+ }
1486
+ }
1487
+ }
1488
+
1489
+ .p-datatable-tbody {
1490
+ tr.p-highlight {
1491
+ background-color: #eff6ff !important;
1492
+ }
1493
+ }
1494
+
1495
+ .row {
1496
+ background: transparent !important;
1497
+
1498
+ .cell {
1499
+ white-space: normal !important;
1500
+
1501
+ .boolean-value-positive {
1502
+ color: var(--success-color);
1503
+ }
1504
+
1505
+ .boolean-value-negative {
1506
+ color: var(--error-color);
1507
+ }
1508
+
1509
+ .status-table-field {
1510
+ font-size: 1.4em;
1511
+ }
1512
+
1513
+ .table-button {
1514
+ cursor: pointer;
1515
+ color: var(--theme-primary);
1516
+ }
1517
+ }
1518
+
1519
+ .no-results {
1520
+ border-bottom-left-radius: 15px;
1521
+ border-bottom-right-radius: 15px;
1522
+ }
1523
+ }
1524
+
1525
+ .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
1526
+ color: #fff !important;
1527
+ }
1528
+
1529
+ .p-paginator-bottom {
1530
+ border-radius: 15px !important;
1531
+ }
1532
+ }
1533
+
1534
+ p-tabview {
1535
+ .p-tabpanels {
1536
+ display: none !important;
1537
+ }
1538
+
1539
+ .p-tablist .p-tab {
1540
+ justify-content: center;
1541
+
1542
+ &.p-tab-active {
1543
+ color: var(--theme-primary) !important;
1544
+ }
1545
+ }
1546
+ }
1547
+
1548
+ vector-panel p-panel .p-panel .p-panel-content {
1549
+ padding: 0px !important;
1550
+ }
1551
+ }
1552
+
1553
+ .success {
1554
+ color: var(--success-color);
1555
+ }
1556
+ .error {
1557
+ color: var(--error-color);
1558
+ }
1559
+ .warning {
1560
+ color: var(--warning-color);
1561
+ }
1562
+ .info {
1563
+ color: var(--theme-light);
1564
+ }
1565
+
1566
+ p-tabview {
1567
+ background: transparent !important;
1568
+
1569
+ .p-tabpanels,
1570
+ .p-tabpanel,
1571
+ .p-tabview-panel {
1572
+ background: transparent !important;
1573
+ }
1574
+
1575
+ .p-tablist-tab-list {
1576
+ background: none !important;
1577
+ .p-tab.p-tab-active {
1578
+ border-color: var(--theme-primary) !important;
1579
+ }
1580
+
1581
+ .p-tab {
1582
+ border-top-right-radius: 0px !important;
1583
+ border-top-left-radius: 0px !important;
1584
+ color: var(--theme-primary) !important;
1585
+
1586
+ &:hover {
1587
+ border-color: var(--theme-primary) !important;
1588
+ border-bottom-width: 2px !important;
1589
+ }
1590
+ }
1591
+ .p-tablist-active-bar {
1592
+ height: 2px !important;
1593
+ background: var(--theme-primary) !important;
1594
+ }
1595
+ }
1596
+ }
1597
+
1598
+ .p-accordion {
1599
+ .p-accordionpanel {
1600
+ margin: 20px 0;
1601
+ border: none !important;
1602
+ background: transparent !important;
1603
+ border-radius: 16px !important;
1604
+ box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.06) !important;
1605
+ overflow: hidden;
1606
+ }
1607
+
1608
+ .p-accordionheader {
1609
+ position: relative !important;
1610
+ border: none !important;
1611
+ border-radius: 0 !important;
1612
+ box-shadow: none !important;
1613
+ background: #ffffff !important;
1614
+ color: var(--theme-dark) !important;
1615
+ padding: 1.25rem 1.5rem !important;
1616
+ font-weight: 600 !important;
1617
+
1618
+ &:hover {
1619
+ background: #ffffff !important;
1620
+ color: var(--theme-dark) !important;
1621
+ }
1622
+
1623
+ &:focus,
1624
+ &:focus-visible {
1625
+ outline: none !important;
1626
+ box-shadow: none !important;
1627
+ }
1628
+ }
1629
+
1630
+ .p-accordionheader-toggle-icon {
1631
+ position: absolute !important;
1632
+ right: 1.5rem !important;
1633
+ top: 50% !important;
1634
+ left: auto !important;
1635
+ margin: 0 !important;
1636
+ color: var(--theme-dark) !important;
1637
+ transform: translateY(-50%) rotate(-90deg);
1638
+ transition: transform 0.2s ease;
1639
+ }
1640
+
1641
+ .p-accordionheader[aria-expanded='true'] .p-accordionheader-toggle-icon {
1642
+ transform: translateY(-50%) rotate(0deg);
1643
+ }
1644
+
1645
+ .p-accordioncontent {
1646
+ border: none !important;
1647
+ background: #ffffff !important;
1648
+ }
1649
+
1650
+ .p-accordioncontent-content {
1651
+ border: none !important;
1652
+ background: #ffffff !important;
1653
+ border-radius: 0 !important;
1654
+ box-shadow: none !important;
1655
+ padding: 0 1.5rem 1.5rem !important;
1656
+ color: inherit !important;
1657
+ }
1658
+ }
1659
+
1660
+ .p-chip {
1661
+ display: inline-block;
1662
+ padding: 0 16px !important;
1663
+ height: 40px;
1664
+ font-weight: 500;
1665
+ font-size: 13px;
1666
+ line-height: 40px;
1667
+ border-radius: 25px !important;
1668
+ background-color: #e5e5ea !important;
1669
+ color: #002463 !important;
1670
+ opacity: 0.5;
1671
+
1672
+ span {
1673
+ border: 2px solid;
1674
+ border-radius: 50%;
1675
+ width: 25px;
1676
+ height: 25px;
1677
+ margin-left: 5px;
1678
+ margin-top: 7px;
1679
+ color: #abaab5;
1680
+
1681
+ i {
1682
+ position: relative;
1683
+ top: -11px;
1684
+ left: -6px;
1685
+ font-size: 12px;
1686
+ }
1687
+ }
1688
+
1689
+ .closebtn {
1690
+ padding-left: 10px;
1691
+ font-weight: bold;
1692
+ float: right;
1693
+ font-size: 20px;
1694
+ cursor: pointer;
1695
+ }
1696
+
1697
+ .closebtn:hover {
1698
+ color: #000;
1699
+ }
1700
+ }
1701
+
1702
+ .p-menu.p-menu-overlay {
1703
+ width: fit-content;
1704
+ padding: 8px 0;
1705
+ border-radius: 8px;
1706
+ background-color: #ffffff !important;
1707
+ border: 1px solid #d9dbe9 !important;
1708
+ box-shadow:
1709
+ 0 1px 2px 0 rgba(31, 41, 55, 0.1),
1710
+ 0 2px 4px 0 rgba(31, 41, 55, 0.1),
1711
+ 0 4px 8px 0 rgba(31, 41, 55, 0.1),
1712
+ 0 8px 16px 0 rgba(31, 41, 55, 0.1);
1713
+
1714
+ ul {
1715
+ display: flex;
1716
+ flex-direction: column;
1717
+ max-height: 200px !important;
1718
+ overflow-y: auto;
1719
+ overflow-x: hidden;
1720
+
1721
+ &::-webkit-scrollbar {
1722
+ width: 16px;
1723
+ }
1724
+ &::-webkit-scrollbar-track {
1725
+ background: transparent;
1726
+ }
1727
+ &::-webkit-scrollbar-thumb {
1728
+ background: var(--theme-medium);
1729
+ border-radius: 10px;
1730
+ border: 5px solid transparent;
1731
+ background-clip: padding-box;
1732
+ }
1733
+
1734
+ li {
1735
+ border-radius: 4px;
1736
+ }
1737
+
1738
+ .p-menu-item-content {
1739
+ border-radius: 4px;
1740
+ background-color: transparent !important;
1741
+ }
1742
+
1743
+ .p-menu-item-link {
1744
+ border-radius: 4px;
1745
+ }
1746
+
1747
+ .p-menu-item-icon,
1748
+ .p-menu-item-label {
1749
+ color: #434560 !important;
1750
+ }
1751
+
1752
+ .p-menu-item-label {
1753
+ font-weight: 500 !important;
1754
+ }
1755
+
1756
+ .p-menu-item-content:hover,
1757
+ .p-menu-item.p-focus .p-menu-item-content {
1758
+ background-color: var(--theme-medium) !important;
1759
+
1760
+ .p-menu-item-icon,
1761
+ .p-menu-item-label {
1762
+ color: #ffffff !important;
1763
+ }
1764
+ }
1765
+ }
1766
+ }
1767
+
1768
+ .p-toggleswitch {
1769
+ flex: 0 0 auto;
1770
+ }
1771
+
1772
+ .p-toggleswitch.p-focus .p-toggleswitch-slider {
1773
+ box-shadow: none !important;
1774
+ }
1775
+
1776
+ .p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {
1777
+ background-color: var(--theme-primary) !important;
1778
+ }
1779
+
1780
+ .custom-field-text {
1781
+ input[type='text'],
1782
+ input[type='password'] {
1783
+ border-radius: 6px;
1784
+ color: #757b8a !important;
1785
+
1786
+ &:focus:not(.ng-invalid):not(.p-inputmask) {
1787
+ border: 2px solid #6690f3 !important;
1788
+ }
1789
+ &:not(.ng-invalid) {
1790
+ border: 2px solid #e1e4ea !important;
1791
+ }
1792
+ }
1793
+ &.input-otp {
1794
+ justify-content: center;
1795
+
1796
+ input[type='text'] {
1797
+ padding: 10px;
1798
+ min-height: 54px;
1799
+ width: 46px;
1800
+ font-size: 1.6em !important;
1801
+ font-weight: 600;
1802
+ color: #363636 !important;
1803
+
1804
+ @media screen and (max-width: 576px) {
1805
+ padding: 0;
1806
+ width: 40px;
1807
+ font-size: 1.2em !important;
1808
+ font-weight: 600;
1809
+ }
1810
+ }
1811
+ }
1812
+ &.uppercase {
1813
+ input[type='text'] {
1814
+ text-transform: uppercase;
1815
+ }
1816
+ span {
1817
+ text-transform: none;
1818
+ }
1819
+ }
1820
+ &.centered {
1821
+ input[type='text'] {
1822
+ text-align: center;
1823
+ }
1824
+ }
1825
+ &.size-lg {
1826
+ input[type='text'] {
1827
+ font-size: 1.3em !important;
1828
+ }
1829
+ }
1830
+ }
1831
+
1832
+ .vector-text {
1833
+ &.uppercase {
1834
+ input[type='text'] {
1835
+ text-transform: uppercase;
1836
+ }
1837
+ span {
1838
+ text-transform: none;
1839
+ }
1840
+ }
1841
+ }
1842
+
1843
+ .multiselect-flags {
1844
+ .p-multiselect-overlay .p-multiselect-list {
1845
+ .p-multiselect-item {
1846
+ span {
1847
+ color: #757b8a;
1848
+ }
1849
+ &:hover {
1850
+ background: #e1e4ea !important;
1851
+ }
1852
+ &:not(.p-highlight):not(.p-disabled).p-focus {
1853
+ background: #e1e4ea !important;
1854
+ }
1855
+ &.p-highlight {
1856
+ background: #e1e4ea !important;
1857
+ }
1858
+ }
1859
+ }
1860
+ }