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