sccoreui 6.2.96 → 6.2.98

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.
@@ -1,2862 +0,0 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @import url("./assets/theme.css");
4
- @import url("./assets/sccoreui.css");
5
- @import url("./assets/flex.css");
6
- @import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap");
7
- @import url("./assets/sccoreicons.css");
8
-
9
- // variables
10
-
11
- @font-face {
12
- font-family: "RobotoBold";
13
- src: url("./assets/fonts/Roboto-Bold.ttf") format("truetype");
14
- font-weight: 700;
15
- font-style: italic;
16
- }
17
-
18
- @font-face {
19
- font-family: "RobotoMedium";
20
- src: url("./assets/fonts/Roboto-Medium.ttf") format("truetype");
21
- font-weight: normal;
22
- font-style: normal;
23
- }
24
-
25
- @font-face {
26
- font-family: "RobotoItalic";
27
- src: url("./assets/fonts/Roboto-Italic.ttf") format("truetype");
28
- font-weight: normal;
29
- font-style: normal;
30
- }
31
-
32
- @font-face {
33
- font-family: "RobotoRegular";
34
- src: url("./assets/fonts/Roboto-Regular.ttf") format("truetype");
35
- font-weight: normal;
36
- font-style: normal;
37
- }
38
-
39
- :root {
40
- --fw-600: 600;
41
- --fw-400: 400;
42
- --fs-24: 24px;
43
- --fs-18: 18px;
44
- --fs-16: 16px;
45
- --lh: 24px;
46
- --fs-14: 14px;
47
- --grey-bg: #101828;
48
- --border-none: border-none;
49
- --box-shadow-none: none;
50
- --_primary-800: #0e184f;
51
- --_primary-700: #111c5b;
52
- --_primary-600: #132067;
53
- --_primary-500: #162578;
54
- --_primary-400: #243dc6;
55
- --_primary-300: #d0d5dd;
56
- --_primary-100: #ced4f6;
57
- --_primary-200: #8794db;
58
- --_primary-50: #e2e5fa;
59
- --_primary-25: #f5f6fd;
60
-
61
- --_gray-700: #344054;
62
- --_gray-800: #1d2939;
63
- --_gray-200: #eaecf0;
64
- --_gray-300: #d0d5dd;
65
- --_gray-50: #f9fafb;
66
- --_base-white: #fff;
67
-
68
- --_text-secondary-600: #475467;
69
- --_outline-800: #1d2939;
70
- --_outline-200: #eaecf0;
71
- --_outline-300: #d0d5dd;
72
- --_outline-50: #f9fafb;
73
- --_base-white: #fff;
74
- }
75
-
76
- @mixin flex($justify: flex-start, $align: center, $direction: row) {
77
- display: flex;
78
- justify-content: $justify;
79
- align-items: $align;
80
- flex-direction: $direction;
81
- }
82
-
83
- @mixin auto__h($height: 0px) {
84
- height: calc(100vh - $height);
85
- overflow-y: auto;
86
- }
87
-
88
- @mixin grid__responsive($minWidth: 350px, $maxWidth: 500px) {
89
- display: var(--_d-grid);
90
- grid-template-columns: repeat(auto-fill, min($minWidth, $maxWidth));
91
- width: 100%;
92
- & > div {
93
- width: 100%;
94
- }
95
- }
96
-
97
- .p-button {
98
- border: 0 !important;
99
- &.btn-primary {
100
- background-color: var(--primary-500);
101
- color: var(--_base-white);
102
- padding: 8px 14px;
103
- &:hover {
104
- background-color: var(--primary-700);
105
- }
106
- &:focus {
107
- background-color: var(--primary-700);
108
- }
109
- &:disabled {
110
- background-color: var(--primary-200);
111
- color: var(--_base-white);
112
- }
113
- }
114
-
115
- &.btn-text-outline {
116
- background-color: var(--_bg-white);
117
- color: var(--gray-700);
118
- padding: 8px 14px;
119
- border: 1px solid var(--gray-300) !important;
120
- svg {
121
- path {
122
- stroke: var(--gray-700);
123
- }
124
- }
125
- &:has(svg) {
126
- display: flex;
127
- align-items: center;
128
- gap: 8px;
129
- }
130
- &:hover {
131
- background-color: var(--primary-25) !important;
132
- border: 1px solid var(--primary-100) !important;
133
- color: var(--primary-400) !important;
134
- svg {
135
- path {
136
- stroke: var(--primary-400);
137
- }
138
- }
139
- }
140
- &:focus {
141
- background-color: var(--primary-25) !important;
142
- color: var(--primary-600) !important;
143
- }
144
- &:disabled {
145
- color: var(--gray-300);
146
- }
147
- }
148
-
149
- &.btn-secondary {
150
- background-color: var(--primary-50);
151
- color: var(--primary-500);
152
- padding: 8px 14px;
153
- &:hover {
154
- background-color: var(--primary-100) !important;
155
- color: var(--primary-800) !important;
156
- }
157
- &:focus {
158
- background-color: var(--primary-100);
159
- }
160
- &:disabled {
161
- background-color: var(--primary-50);
162
- color: var(--gray-300);
163
- }
164
- }
165
-
166
- &.btn-text {
167
- background-color: var(--_base-white);
168
- color: var(--gray-600);
169
- padding: 8px 14px;
170
- border: 0 !important;
171
- font-weight: 600;
172
- &:hover {
173
- background-color: var(--gray-50) !important;
174
- color: var(--gray-700) !important;
175
- }
176
- &:focus {
177
- background-color: var(--gray-50);
178
- color: var(--gray-700);
179
- border: 0px !important;
180
- }
181
- &:disabled {
182
- background-color: var(--primary-50) !important;
183
- color: var(--gray-300);
184
- }
185
- }
186
- &.btn-text-primary {
187
- background-color: var(--_base-white);
188
- color: var(--primary-400);
189
- padding: 8px 14px;
190
- border: 0 !important;
191
- display: flex;
192
- gap: 4px;
193
- align-items: center;
194
- &:hover {
195
- background-color: var(--primary-25) !important;
196
- color: var(--primary-600) !important;
197
- svg {
198
- path {
199
- stroke: var(--primary-600);
200
- }
201
- }
202
- }
203
- &:focus {
204
- background-color: var(--primary-25) !important;
205
- color: var(--primary-600) !important;
206
- }
207
- // &:disabled {
208
- // color: var(--gray-300);
209
- // }
210
-
211
- svg {
212
- path {
213
- stroke: var(--primary-400);
214
- }
215
- }
216
- }
217
- }
218
-
219
- // height and width utility classes
220
-
221
- .h-40 {
222
- height: 40px;
223
- }
224
-
225
- .h-44 {
226
- height: 44px !important;
227
- }
228
-
229
- // @font-face {
230
- // font-family: "Lato";
231
- // }
232
-
233
- // @font-face {
234
- // font-family: "Lato";
235
- // font-weight: 600;
236
- // src: url("./assets/fonts/Lato-Regular.ttf") format("truetype");
237
- // }
238
-
239
- body {
240
- font-family: "Lato", sans-serif;
241
- -webkit-font-smoothing: antialiased;
242
- -moz-osx-font-smoothing: grayscale;
243
- line-height: 20px;
244
- padding: 0;
245
- margin: 0;
246
- color: var(--gray-700);
247
- }
248
-
249
- code {
250
- font-family: "Lato", sans-serif;
251
- }
252
-
253
- .pr-60 {
254
- padding-right: 60px !important;
255
- }
256
-
257
- .delete-action {
258
- &:hover {
259
- transition: all 0.4 ease-in-out;
260
- transform: scale(1.2);
261
- svg {
262
- path {
263
- stroke: var(--red-400);
264
- }
265
- }
266
- }
267
- }
268
-
269
- // h1 {
270
- // font-size: var(--fs-24);
271
- // font-weight: var(--fw-600);
272
- // }
273
-
274
- // h2 {
275
- // font-size: var(--fs-18);
276
- // font-weight: var(--fw-600);
277
- // }
278
-
279
- // h3 {
280
- // font-size: var(--fs-16);
281
- // font-weight: var(--fw-400);
282
- // }
283
-
284
- // ============= Button styles =============== //
285
- // .btn-primary {
286
- // @include btn(primary);
287
- // }
288
-
289
- // .btn-secondary {
290
- // @include btn(secondary);
291
- // }
292
-
293
- // .btn-outline {
294
- // @include btn(outline);
295
- // }
296
-
297
- // .btn-text {
298
- // @include btn(text);
299
- // }
300
-
301
- // ============= custom progress steps =============== //
302
-
303
- .progress-container {
304
- isolation: isolate;
305
-
306
- &::before {
307
- content: "";
308
- background-color: var(--gray-200);
309
- position: absolute;
310
- z-index: -1;
311
- }
312
-
313
- &.horizontal::before {
314
- height: 2px;
315
- width: 100%;
316
- top: 11%;
317
- }
318
-
319
- &.vertical::before {
320
- height: 100%;
321
- width: 2px;
322
- left: 5%;
323
- top: 0;
324
- }
325
- }
326
-
327
- .progressbar {
328
- z-index: -1;
329
- transition: all 0.6s ease;
330
-
331
- &.horizontal {
332
- left: 0;
333
- height: 2px;
334
- top: 11%;
335
- }
336
-
337
- &.vertical {
338
- width: 2px;
339
- left: 5%;
340
- top: 0;
341
- }
342
- }
343
-
344
- // .col-gr-icon-lg {
345
- // width: 20px;
346
- // animation: scaleImgLarge 0.4s forwards;
347
- // }
348
-
349
- // .col-gr-icon-sm {
350
- // width: 0px;
351
- // animation: scaleImgsmall 0.4s forwards;
352
- // }
353
-
354
- // @keyframes scaleImgLarge {
355
- // 0% {
356
- // width: 0;
357
- // }
358
- // 100% {
359
- // width: 20px;
360
- // }
361
- // }
362
-
363
- // @keyframes scaleImgsmall {
364
- // 100% {
365
- // width: 20px;
366
- // }
367
- // 0% {
368
- // width: 0px;
369
- // }
370
- // }
371
-
372
- .col-gr-icon {
373
- width: 0;
374
- transition: width 0.4s ease;
375
- }
376
-
377
- .col-gr-icon-active {
378
- width: 20px;
379
- transition: width 0.4s ease; /* Ensure transition applies both ways */
380
- }
381
-
382
- .no-content {
383
- text-align: center;
384
- padding: 10px;
385
- }
386
-
387
- .progress-step-item {
388
- &.horizontal {
389
- &:nth-of-type(1) {
390
- transform: translateX(-50%);
391
- }
392
-
393
- &:last-child {
394
- transform: translateX(50%);
395
- }
396
- }
397
-
398
- &.vertical {
399
- transform: translateY(50%);
400
-
401
- &:nth-of-type(1) {
402
- transform: translateY(-5%);
403
- }
404
-
405
- &:last-child {
406
- transform: translateY(100%);
407
- }
408
- }
409
- }
410
-
411
- .disabled {
412
- cursor: not-allowed;
413
- pointer-events: none;
414
- opacity: 0.2;
415
- }
416
-
417
- // CUSTOM multiselect style started
418
- .Multi_select_dropdown_panel {
419
- .p-multiselect-header {
420
- display: block;
421
- padding: 8px 0;
422
-
423
- .p-checkbox,
424
- .p-multiselect-close {
425
- display: none;
426
- }
427
-
428
- .p-multiselect-filter-container {
429
- .p-inputtext {
430
- padding-right: 12px;
431
- padding-left: 1.75rem;
432
- }
433
-
434
- .p-multiselect-filter-icon {
435
- left: 0.55rem;
436
- }
437
- }
438
- }
439
-
440
- .p-multiselect-items-wrapper {
441
- .p-multiselect-item.p-highlight {
442
- &::after {
443
- content: "";
444
- width: 14px;
445
- height: 6px;
446
- border-left: 2px solid #132067;
447
- border-bottom: 2px solid #132067;
448
- transform: rotate(-45deg);
449
- position: absolute;
450
- right: 10px;
451
- }
452
- }
453
- }
454
- }
455
-
456
- .bulk-action-feature {
457
- .p-overlaypanel-content {
458
- padding: 0 !important;
459
- border-radius: 6px !important;
460
- }
461
- }
462
-
463
- .column_group_overlay {
464
- overflow: hidden;
465
-
466
- .p-overlaypanel-content {
467
- padding: 0px !important;
468
- }
469
- }
470
-
471
- .list-items {
472
- padding: 4px;
473
- border: 0;
474
-
475
- .p-treenode-content {
476
- padding: 2px !important;
477
- }
478
-
479
- .p-treenode-droppoint {
480
- height: 2px;
481
- }
482
- }
483
-
484
- .sc_custom_multiselect {
485
- width: max-content;
486
-
487
- * {
488
- color: #344054;
489
- font-weight: 700;
490
- }
491
-
492
- .left_section_item {
493
- left: 1rem;
494
- }
495
-
496
- .right_section_item {
497
- right: 1rem;
498
- }
499
-
500
- .selected_moreThan_one {
501
- right: 40px;
502
- }
503
-
504
- .p-inputwrapper-filled {
505
- background: #f5f6fd;
506
- border: 1px solid #8190e8;
507
- }
508
-
509
- .p-multiselect {
510
- max-width: 100%;
511
- width: max-content !important;
512
-
513
- .p-multiselect-label {
514
- padding: 0;
515
- padding-left: 44px;
516
- max-width: 100%;
517
-
518
- .p-multiselect-token {
519
- border: none;
520
- width: 100%;
521
- min-width: 100%;
522
- background: none;
523
- padding-left: 0;
524
-
525
- .p-multiselect-token-label {
526
- width: 100%;
527
- white-space: nowrap;
528
- overflow: hidden;
529
- text-overflow: ellipsis;
530
- }
531
- }
532
-
533
- svg {
534
- display: none;
535
- }
536
- }
537
- }
538
-
539
- .p-multiselect-trigger {
540
- width: 2rem;
541
-
542
- svg {
543
- display: none;
544
- }
545
- }
546
- }
547
-
548
- .no_icon {
549
- .p-multiselect-label {
550
- padding-left: 16px !important;
551
- }
552
- }
553
-
554
- .status_dropdown {
555
- .p-multiselect {
556
- .p-multiselect-label {
557
- padding-left: 34px;
558
- }
559
- }
560
-
561
- .select_status_prv {
562
- ul {
563
- li {
564
- width: 10px;
565
- height: 10px;
566
- border-radius: 8px;
567
- position: absolute;
568
- transform: translateY(-50%);
569
- }
570
-
571
- li.all {
572
- background: #667085;
573
- }
574
-
575
- li:nth-child(2) {
576
- left: 6px;
577
- }
578
-
579
- li:nth-child(3) {
580
- left: 12px;
581
- }
582
- }
583
- }
584
- }
585
- .table_filters_1 {
586
- height: auto;
587
- display: flex;
588
- justify-content: center;
589
- align-items: center;
590
- padding: 10px 0px !important;
591
-
592
- .chip_comp {
593
- height: 44px !important;
594
- border: 1px solid var(--gray-300);
595
- overflow-y: auto;
596
- .p-inputtext {
597
- padding: 6px 20px 7px 20px;
598
- height: 44px !important;
599
- border-top-left-radius: 0px !important;
600
- border-top-right-radius: 0px !important;
601
- }
602
- }
603
-
604
- .p-chips-multiple-container {
605
- padding: 7px 10px 6px 10px;
606
- width: 100%;
607
- // max-height: 40px !important;
608
- border-top-left-radius: 0 !important;
609
- border-bottom-left-radius: 0 !important;
610
- overflow: auto;
611
- height: 44px;
612
-
613
- &:not(.p-disabled):hover {
614
- border-color: var(--gray-300);
615
- }
616
-
617
- &:not(.p-disabled).p-focus {
618
- box-shadow: none;
619
- }
620
- }
621
- }
622
-
623
- .conditional_btn {
624
- height: 30px;
625
- width: 30px;
626
- display: flex;
627
- justify-content: center;
628
- align-items: center;
629
- // &:hover {
630
- // background-color: var(--primary-25);
631
- // border-radius: 6px;
632
- // }
633
- }
634
-
635
- .multi-pl-32 {
636
- padding-left: 40px;
637
- border: 1px solid red;
638
- }
639
-
640
- .selected_multile {
641
- .p-multiselect-token-label {
642
- padding-right: 18px;
643
- }
644
- }
645
-
646
- .selected_multile.selected_num_2 {
647
- .p-multiselect .p-multiselect-label {
648
- padding-left: 44px;
649
- }
650
- }
651
-
652
- .selected_attributes {
653
- height: calc(100vh - 180px);
654
- overflow-y: auto;
655
- }
656
-
657
- .selected_multile.selected_num_3,
658
- .selected_multile.moreThanThreeItems {
659
- .p-multiselect .p-multiselect-label {
660
- padding-left: 44px;
661
- }
662
- }
663
-
664
- .mutli_select_status {
665
- .p-multiselect-label {
666
- padding-left: 44px !important;
667
- }
668
- }
669
-
670
- .status_dropdown.selected_multile {
671
- .left_section_item {
672
- max-width: 28px;
673
- overflow: hidden;
674
- height: 11px;
675
- width: -webkit-fill-available;
676
- align-items: center;
677
- display: flex;
678
- }
679
- }
680
-
681
- .status_dropdown_item.Active::before {
682
- background: #12b76a;
683
- }
684
-
685
- .status_dropdown_item.Inactive::before {
686
- background: #f04438;
687
- }
688
-
689
- .status_dropdown_item.Draft::before {
690
- background: #162578;
691
- }
692
-
693
- .status_dropdown_item {
694
- .status_dot {
695
- width: 10px;
696
- height: 10px;
697
- border-radius: 50px;
698
- position: absolute;
699
- transform: translateY(-50%);
700
- top: 50%;
701
- left: 10px;
702
- }
703
- }
704
-
705
- .custom_date_picker_sec {
706
- .custom_date_picker {
707
- .p-inputtext {
708
- padding-right: 16px;
709
- width: 130px;
710
- }
711
-
712
- .p-inputtext {
713
- &:enabled {
714
- &:focus {
715
- box-shadow: none !important;
716
- border-color: #d0d5dd !important;
717
- }
718
- }
719
- }
720
-
721
- .p-datepicker-trigger {
722
- &:focus {
723
- box-shadow: none !important;
724
- border-color: #d0d5dd !important;
725
- }
726
- }
727
- }
728
-
729
- .custom_date_picker.multiple {
730
- .p-inputtext {
731
- width: 236px;
732
- }
733
- }
734
-
735
- .clear_icon_sec {
736
- right: 32px;
737
- }
738
- }
739
-
740
- .date_filter {
741
- margin: 0;
742
- position: absolute;
743
- top: 0;
744
- left: 0px;
745
- background: #fff;
746
- height: 100%;
747
- padding: 4px 16px;
748
-
749
- li {
750
- height: 40px;
751
-
752
- &:hover {
753
- background: #f9fafb;
754
- }
755
- }
756
-
757
- .active {
758
- background: #f9fafb;
759
- }
760
- }
761
-
762
- div:has(ul.date_filter) .p-datepicker-group-container {
763
- padding-left: 116px;
764
- margin: -8px;
765
- }
766
-
767
- .bottom_date_filters {
768
- width: calc(100% - 116px);
769
- border-left: 1px solid #dee2e6;
770
- }
771
-
772
- div:has(ul.date_filter)
773
- .p-datepicker-group-container
774
- .p-datepicker
775
- table
776
- td
777
- > span {
778
- width: 40px;
779
- height: 40px;
780
- }
781
-
782
- div:has(ul.date_filter) .p-datepicker-group-container .p-datepicker-group {
783
- width: 328px;
784
- max-width: 328px;
785
- padding: 8px 20px !important;
786
- border: 1px solid #dee2e6;
787
- border-top: 0;
788
- }
789
-
790
- div:has(ul.date_filter) .p-datepicker-group-container div:nth-child(2) {
791
- border-right: 0;
792
- }
793
-
794
- div:has(ul.date_filter) .p-datepicker-group-container table td {
795
- padding: 0;
796
- }
797
-
798
- div:has(ul.date_filter) .p-datepicker-footer {
799
- margin: -8px;
800
- }
801
-
802
- .panel_status {
803
- .p-multiselect-filter-container {
804
- display: none;
805
- }
806
-
807
- .p-multiselect-header {
808
- padding: 0 !important;
809
- border-bottom: 0;
810
- }
811
- }
812
-
813
- .p-multiselect-panel {
814
- .p-multiselect-items {
815
- padding: 6px;
816
- min-width: 140px !important;
817
- }
818
- }
819
-
820
- .panel_withIcon.p-multiselect-panel {
821
- .p-multiselect-items {
822
- .p-multiselect-item {
823
- padding: 0 10px;
824
- }
825
- }
826
- }
827
-
828
- .Multi_select_dropdown_panel.hidePanelHeader {
829
- .p-multiselect-header {
830
- display: none;
831
- }
832
- }
833
-
834
- .errorField {
835
- color: var(--red-500);
836
- height: 20px;
837
- }
838
-
839
- .full_form_field {
840
- // width: 37.125rem;
841
- width: 100%;
842
- }
843
-
844
- .form_field {
845
- // width: 18.063rem;
846
- width: 100%;
847
- &:has(.p-multiselect-token) {
848
- .p-multiselect-label {
849
- padding-left: 6px;
850
- }
851
- }
852
- }
853
-
854
- .PhoneInput {
855
- background: #ffffff;
856
- border: 1px solid var(--gray-300);
857
- transition: background-color 0.2s, color 0.2s, border-color 0.2s,
858
- box-shadow 0.2s;
859
- border-radius: 8px;
860
- box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
861
- padding-top: 10px;
862
- padding-bottom: 10px;
863
- padding-right: 12px;
864
- padding-left: 0px;
865
- height: 40px;
866
-
867
- :focus-visible {
868
- outline: none;
869
- }
870
-
871
- &:focus-within {
872
- outline: 0 none;
873
- outline-offset: 0;
874
- box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05),
875
- 0px 0px 0px 2px var(--primary-100);
876
- border-radius: 8px;
877
- border: 1px solid var(--primary-300);
878
- }
879
-
880
- .PhoneInputInput {
881
- border: none;
882
- }
883
- }
884
-
885
- .PhoneInputCountry {
886
- .PhoneInputCountryIcon--border {
887
- box-shadow: none;
888
- background-color: #ffffff;
889
- }
890
-
891
- .PhoneInputCountryIconImg {
892
- width: 20px;
893
- height: 20px;
894
- object-fit: cover;
895
- border-radius: 100%;
896
- position: absolute;
897
- top: 0;
898
- }
899
- }
900
-
901
- .phoneNumberClass {
902
- margin-left: 14.5rem;
903
- }
904
-
905
- #customCountryDropDown {
906
- .p-dropdown {
907
- border: none;
908
- box-shadow: none;
909
- background: none;
910
- padding: 0;
911
-
912
- .p-dropdown-label {
913
- padding: 0;
914
- padding-right: 4px;
915
- }
916
-
917
- .p-dropdown-trigger {
918
- padding-top: 20px;
919
- }
920
-
921
- .p-dropdown-trigger[aria-expanded="true"] {
922
- padding-bottom: 20px;
923
- }
924
- }
925
- }
926
-
927
- .customNumberField {
928
- .p-inputnumber-input {
929
- padding-left: 24px;
930
- }
931
- }
932
-
933
- .text-editor {
934
- button {
935
- &::after {
936
- content: none !important;
937
- }
938
- }
939
- }
940
-
941
- button#formatULOptions-1:hover::before,
942
- button#formatULOptions-1.fr-btn-hover::before,
943
- button#formatULOptions-1.fr-active::before,
944
- button#formatOLOptions-1:hover::before,
945
- button#formatOLOptions-1.fr-btn-hover::before,
946
- button#formatOLOptions-1.fr-active::before {
947
- content: "";
948
- border: 2px solid gray;
949
- border-left: 0;
950
- border-top: 0;
951
- width: 6px;
952
- height: 6px;
953
- position: absolute;
954
- left: 2px;
955
- top: 39%;
956
- transform: rotate(45deg);
957
- }
958
-
959
- .fr-toolbar .fr-btn-grp {
960
- display: inline-block;
961
- margin: 0 0px 0 12px !important;
962
- }
963
-
964
- .fr-buttons.fr-tabs {
965
- display: none;
966
- }
967
-
968
- .fr-element {
969
- padding: 12px !important;
970
- }
971
-
972
- .fr-command.fr-btn
973
- + .fr-dropdown-menu
974
- .fr-dropdown-wrapper
975
- .fr-dropdown-content
976
- ul.fr-dropdown-list
977
- li
978
- a.fr-active {
979
- background: #f9fafb !important;
980
- }
981
-
982
- button[data-cmd="fontFamily"]:focus {
983
- box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05),
984
- 0px 0px 0px 2px var(--primary-100);
985
- border: 1px solid var(--primary-300) !important;
986
- background: none !important;
987
- }
988
-
989
- .text-editor {
990
- border: 1px solid #d0d5dd;
991
- border-radius: 10px;
992
-
993
- * {
994
- border: none !important;
995
- }
996
- }
997
-
998
- .text-editor.focus-text-editor {
999
- box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05),
1000
- 0px 0px 0px 4px var(--primary-100);
1001
- border: 1px solid var(--primary-300) !important;
1002
- }
1003
-
1004
- .text-editor.p-invalid.focus-text-editor {
1005
- box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--red-100);
1006
- border: 1px solid var(--red-300) !important;
1007
- }
1008
-
1009
- button[data-cmd="fontFamily"] {
1010
- border: 1px solid var(--gray-300) !important;
1011
-
1012
- &::before {
1013
- content: "";
1014
- border: 1.8px solid #0b0c12;
1015
- border-left: 0;
1016
- border-top: 0;
1017
- width: 7px;
1018
- height: 7px;
1019
- position: absolute;
1020
- right: 8px;
1021
- top: 39%;
1022
- transform: rotate(45deg);
1023
- }
1024
- }
1025
-
1026
- .fr-toolbar .fr-btn-grp {
1027
- margin-right: 0px;
1028
- margin-left: 8px;
1029
- }
1030
-
1031
- .fr-wrapper .fr-placeholder {
1032
- color: #667085 !important;
1033
- }
1034
-
1035
- button[aria-expanded="true"] {
1036
- &::before {
1037
- top: 48%;
1038
- transform: rotate(-136deg);
1039
- }
1040
- }
1041
-
1042
- /// Custon treeDropdownSelect style
1043
- .treeNoCollaps {
1044
- li {
1045
- padding-left: 0 !important;
1046
- padding-right: 0 !important;
1047
- }
1048
-
1049
- .p-tree-toggler {
1050
- display: none;
1051
- }
1052
-
1053
- .treeBadge {
1054
- background: var(--Gray-100, #f2f4f7) !important;
1055
- }
1056
-
1057
- .p-treenode-content:hover {
1058
- background: var(--Primary-25, #f5f6fd) !important;
1059
- }
1060
-
1061
- .p-treenode-content:hover .treeItem,
1062
- .p-treenode-content:focus .treeItem {
1063
- color: var(--primary-400);
1064
-
1065
- .treeBadge {
1066
- color: var(--Primary-400, #243dc6) !important;
1067
- background: var(--Primary-50, #e2e5fa) !important;
1068
- }
1069
- }
1070
-
1071
- .p-treenode-content:hover svg path,
1072
- .p-treenode-content:focus svg path {
1073
- stroke: var(--primary-400) !important;
1074
- }
1075
-
1076
- .p-treenode-content:focus {
1077
- box-shadow: none !important;
1078
- outline: none !important;
1079
- background: var(--Primary-25, #f5f6fd) !important;
1080
-
1081
- .treeBadge {
1082
- color: var(--Primary-400, #243dc6) !important;
1083
- background: var(--Primary-50, #e2e5fa) !important;
1084
- }
1085
- }
1086
- }
1087
-
1088
- /// Custon treeDropdownSelect style end /////////////////
1089
-
1090
- /////// Custom list_box_dropdown ///////////
1091
-
1092
- .icon-30x30 {
1093
- height: 30px !important;
1094
- width: 30px !important;
1095
- }
1096
-
1097
- .icon-38x38 {
1098
- height: 38px !important;
1099
- width: 38px !important;
1100
- display: flex;
1101
- justify-content: center;
1102
- align-items: center;
1103
- }
1104
-
1105
- .icon-40x40 {
1106
- height: 40px !important;
1107
- width: 40px !important;
1108
- display: flex;
1109
- justify-content: center;
1110
- align-items: center;
1111
- &.feature-hover {
1112
- &:hover {
1113
- svg {
1114
- path {
1115
- stroke: var(--primary-400);
1116
- }
1117
- }
1118
- }
1119
- }
1120
- }
1121
-
1122
- .list_box_dropdown {
1123
- .p-listbox-header {
1124
- padding: 12px !important;
1125
- border-top: 1px solid var(--gray-200);
1126
- }
1127
-
1128
- ul.p-listbox-list {
1129
- padding: 6px;
1130
-
1131
- li {
1132
- margin: 4px 0 !important;
1133
- border-radius: 4px !important;
1134
- padding: 8px 14px !important;
1135
-
1136
- .item_content {
1137
- max-width: 80%;
1138
- white-space: nowrap;
1139
- text-overflow: ellipsis;
1140
- overflow: hidden;
1141
- // width: 100%;
1142
- }
1143
-
1144
- .item_icon {
1145
- display: none;
1146
- }
1147
-
1148
- &:hover {
1149
- background-color: var(--gray-50) !important;
1150
- }
1151
-
1152
- &:focus {
1153
- box-shadow: none !important;
1154
- }
1155
- }
1156
-
1157
- .p-highlight {
1158
- background: var(--Primary-25);
1159
- color: #162578 !important;
1160
-
1161
- .item_icon {
1162
- display: block;
1163
- }
1164
- }
1165
- }
1166
- }
1167
-
1168
- .list_box_chips {
1169
- display: inline-block;
1170
- align-items: center;
1171
- list-style: none;
1172
-
1173
- li {
1174
- float: left;
1175
- height: 24px;
1176
- }
1177
- }
1178
-
1179
- /////// Custom list_box_dropdown ///////////
1180
-
1181
- //ScMulti Select//
1182
- .sc_multiSelect {
1183
- height: 40px !important;
1184
-
1185
- .p-multiselect-clear-icon {
1186
- right: 42px !important;
1187
- }
1188
-
1189
- .p-multiselect-label {
1190
- line-height: 38px !important;
1191
- }
1192
-
1193
- .p-multiselect-token-label {
1194
- max-width: 82px;
1195
- overflow: hidden;
1196
- text-overflow: ellipsis;
1197
- }
1198
- }
1199
-
1200
- .sc_multiSelect.noShowSelectedCount {
1201
- .p-multiselect-label {
1202
- padding-right: 0px;
1203
- }
1204
- }
1205
-
1206
- .sc_multiSelect.hideChipremoveIcon {
1207
- .p-multiselect-token {
1208
- svg {
1209
- display: none;
1210
- }
1211
- }
1212
- }
1213
-
1214
- .sc_icon_hover {
1215
- &:hover {
1216
- svg {
1217
- transform: scale(1.1);
1218
- transition: 0.3s all;
1219
- }
1220
- }
1221
- }
1222
-
1223
- .hide-focus {
1224
- &:not(.p-disabled) {
1225
- &.p-focus {
1226
- box-shadow: var(--box-shadow-none);
1227
- border: 1px solid var(--gray-300);
1228
- }
1229
- }
1230
-
1231
- &:enabled {
1232
- &:focus {
1233
- box-shadow: var(--box-shadow-none);
1234
- border: 1px solid var(--gray-300);
1235
- }
1236
- }
1237
- }
1238
-
1239
- .sc_multiSelect_panel {
1240
- .p-multiselect-items {
1241
- padding: 4px !important;
1242
-
1243
- .p-multiselect-item,
1244
- .p-highlight {
1245
- span {
1246
- padding-right: 28px;
1247
- }
1248
- }
1249
-
1250
- .p-highlight::after {
1251
- content: "";
1252
- width: 12px;
1253
- height: 6px;
1254
- border: solid #162578;
1255
- border-width: 1.9px;
1256
- border-top: 0;
1257
- border-right: 0;
1258
- transform: rotate(-45deg);
1259
- margin-right: 8px;
1260
- position: absolute;
1261
- right: 4px;
1262
- }
1263
- }
1264
- }
1265
-
1266
- //////////////////////////////////////////////
1267
- ///
1268
-
1269
- .condition_menu {
1270
- width: 648px !important;
1271
- }
1272
-
1273
- .condition_attribute_list_sect {
1274
- height: 215px;
1275
-
1276
- .attr_chip {
1277
- transition: all 0.1s;
1278
-
1279
- &:hover {
1280
- transform: scale(1.05);
1281
- // transition: all 0.2s;
1282
- }
1283
- }
1284
- }
1285
-
1286
- .condition_configure {
1287
- height: 224px;
1288
- outline: none;
1289
- line-height: 30px;
1290
- letter-spacing: 2px;
1291
-
1292
- .formulaChipElm {
1293
- line-height: 24px;
1294
- letter-spacing: 0px;
1295
- }
1296
-
1297
- .chip-h-25 {
1298
- height: 25px;
1299
- display: flex;
1300
- align-items: center;
1301
- justify-content: center;
1302
- }
1303
-
1304
- .formulaSpanElm {
1305
- font-size: 16px;
1306
- margin: 2px 0;
1307
- float: left;
1308
- min-width: 6px;
1309
- height: 32px;
1310
- position: relative;
1311
- top: -4px;
1312
-
1313
- &:first-child {
1314
- display: none;
1315
- }
1316
- }
1317
- }
1318
-
1319
- .operator_divider {
1320
- width: 1px;
1321
- height: 15px;
1322
- display: inline-block;
1323
- background-color: var(--gray-300);
1324
- }
1325
-
1326
- .formula_condition_dropdown {
1327
- box-shadow: none !important;
1328
-
1329
- .p-dropdown-label {
1330
- display: block !important;
1331
- }
1332
- }
1333
-
1334
- .p-button.p-button-link:enabled:hover {
1335
- color: var(--primary-400) !important;
1336
- }
1337
-
1338
- .p-button.p-button-text:enabled:hover {
1339
- background: var(--primary-50);
1340
- }
1341
-
1342
- /* AG GRID - styles */
1343
- @import url("./assets/theme.css");
1344
- @import url("./assets/sccoreui.css");
1345
- @import url("./assets/sccoreicons.css");
1346
- @import url("./assets/flex.css");
1347
- @import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap");
1348
-
1349
- // variables
1350
-
1351
- @font-face {
1352
- font-family: "RobotoBold";
1353
- src: url("./assets/fonts/Roboto-Bold.ttf") format("truetype");
1354
- font-weight: 700;
1355
- font-style: italic;
1356
- }
1357
-
1358
- @font-face {
1359
- font-family: "RobotoMedium";
1360
- src: url("./assets/fonts/Roboto-Medium.ttf") format("truetype");
1361
- font-weight: normal;
1362
- font-style: normal;
1363
- }
1364
-
1365
- @font-face {
1366
- font-family: "RobotoItalic";
1367
- src: url("./assets/fonts/Roboto-Italic.ttf") format("truetype");
1368
- font-weight: normal;
1369
- font-style: normal;
1370
- }
1371
-
1372
- @font-face {
1373
- font-family: "RobotoRegular";
1374
- src: url("./assets/fonts/Roboto-Regular.ttf") format("truetype");
1375
- font-weight: normal;
1376
- font-style: normal;
1377
- }
1378
-
1379
- :root {
1380
- --fw-600: 600;
1381
- --fw-400: 400;
1382
- --fs-24: 24px;
1383
- --fs-18: 18px;
1384
- --fs-16: 16px;
1385
- --lh: 24px;
1386
- --fs-14: 14px;
1387
- --grey-bg: #101828;
1388
- --border-none: border-none;
1389
- }
1390
-
1391
- // height and width utility classes
1392
-
1393
- .h-40 {
1394
- height: 40px;
1395
- }
1396
-
1397
- // @font-face {
1398
- // font-family: "Lato";
1399
- // }
1400
-
1401
- // @font-face {
1402
- // font-family: "Lato";
1403
- // font-weight: 600;
1404
- // src: url("./assets/fonts/Lato-Regular.ttf") format("truetype");
1405
- // }
1406
-
1407
- body {
1408
- font-family: "Lato", sans-serif;
1409
- -webkit-font-smoothing: antialiased;
1410
- -moz-osx-font-smoothing: grayscale;
1411
- line-height: 20px;
1412
- padding: 0;
1413
- margin: 0;
1414
- color: var(--gray-700);
1415
- }
1416
-
1417
- code {
1418
- font-family: "Lato", sans-serif;
1419
- }
1420
-
1421
- // h1 {
1422
- // font-size: var(--fs-24);
1423
- // font-weight: var(--fw-600);
1424
- // }
1425
-
1426
- // h2 {
1427
- // font-size: var(--fs-18);
1428
- // font-weight: var(--fw-600);
1429
- // }
1430
-
1431
- // h3 {
1432
- // font-size: var(--fs-16);
1433
- // font-weight: var(--fw-400);
1434
- // }
1435
-
1436
- // ============= custom progress steps =============== //
1437
-
1438
- .progress-container {
1439
- isolation: isolate;
1440
-
1441
- &::before {
1442
- content: "";
1443
- background-color: var(--gray-200);
1444
- position: absolute;
1445
- z-index: -1;
1446
- }
1447
-
1448
- &.horizontal::before {
1449
- height: 2px;
1450
- width: 100%;
1451
- top: 11%;
1452
- }
1453
-
1454
- &.vertical::before {
1455
- height: 100%;
1456
- width: 2px;
1457
- left: 5%;
1458
- top: 0;
1459
- }
1460
- }
1461
-
1462
- .progressbar {
1463
- z-index: -1;
1464
- transition: all 0.6s ease;
1465
-
1466
- &.horizontal {
1467
- left: 0;
1468
- height: 2px;
1469
- top: 11%;
1470
- }
1471
-
1472
- &.vertical {
1473
- width: 2px;
1474
- left: 5%;
1475
- top: 0;
1476
- }
1477
- }
1478
-
1479
- .progress-step-item {
1480
- &.horizontal {
1481
- &:nth-of-type(1) {
1482
- transform: translateX(-50%);
1483
- }
1484
-
1485
- &:last-child {
1486
- transform: translateX(50%);
1487
- }
1488
- }
1489
-
1490
- &.vertical {
1491
- transform: translateY(50%);
1492
-
1493
- &:nth-of-type(1) {
1494
- transform: translateY(-5%);
1495
- }
1496
-
1497
- &:last-child {
1498
- transform: translateY(100%);
1499
- }
1500
- }
1501
- }
1502
-
1503
- // CUSTOM multiselect style started
1504
- .Multi_select_dropdown_panel {
1505
- .p-multiselect-header {
1506
- display: block;
1507
- padding: 8px 0;
1508
-
1509
- .p-checkbox,
1510
- .p-multiselect-close {
1511
- display: none;
1512
- }
1513
-
1514
- .p-multiselect-filter-container {
1515
- .p-inputtext {
1516
- padding-right: 12px;
1517
- padding-left: 1.75rem;
1518
- }
1519
-
1520
- .p-multiselect-filter-icon {
1521
- left: 0.55rem;
1522
- }
1523
- }
1524
- }
1525
-
1526
- .p-multiselect-items-wrapper {
1527
- .p-multiselect-item.p-highlight {
1528
- &::after {
1529
- content: "";
1530
- width: 14px;
1531
- height: 6px;
1532
- border-left: 2px solid #132067;
1533
- border-bottom: 2px solid #132067;
1534
- transform: rotate(-45deg);
1535
- position: absolute;
1536
- right: 10px;
1537
- }
1538
- }
1539
- }
1540
- }
1541
-
1542
- .bulk-action-feature {
1543
- .p-overlaypanel-content {
1544
- padding: 0 !important;
1545
- border-radius: 6px !important;
1546
- }
1547
- }
1548
-
1549
- .column_group_overlay {
1550
- overflow: hidden;
1551
-
1552
- .p-overlaypanel-content {
1553
- padding: 0px !important;
1554
- }
1555
- }
1556
-
1557
- .list-items {
1558
- padding: 4px;
1559
- border: 0;
1560
-
1561
- .p-treenode-content {
1562
- padding: 2px !important;
1563
- }
1564
-
1565
- .p-treenode-droppoint {
1566
- height: 2px;
1567
- }
1568
- }
1569
-
1570
- .sc_custom_multiselect {
1571
- width: max-content;
1572
-
1573
- * {
1574
- color: #344054;
1575
- font-weight: 700;
1576
- }
1577
-
1578
- .left_section_item {
1579
- left: 1rem;
1580
- }
1581
-
1582
- .right_section_item {
1583
- right: 1rem;
1584
- }
1585
-
1586
- .selected_moreThan_one {
1587
- right: 40px;
1588
- }
1589
-
1590
- .p-inputwrapper-filled {
1591
- background: #f5f6fd;
1592
- border: 1px solid #8190e8;
1593
- }
1594
-
1595
- .p-multiselect {
1596
- max-width: 100%;
1597
- width: max-content !important;
1598
-
1599
- .p-multiselect-label {
1600
- padding: 0;
1601
- padding-left: 44px;
1602
- max-width: 100%;
1603
-
1604
- .p-multiselect-token {
1605
- border: none;
1606
- width: 100%;
1607
- min-width: 100%;
1608
- background: none;
1609
- padding-left: 0;
1610
-
1611
- .p-multiselect-token-label {
1612
- width: 100%;
1613
- white-space: nowrap;
1614
- overflow: hidden;
1615
- text-overflow: ellipsis;
1616
- }
1617
- }
1618
-
1619
- svg {
1620
- display: none;
1621
- }
1622
- }
1623
- }
1624
-
1625
- .p-multiselect-trigger {
1626
- width: 2rem;
1627
-
1628
- svg {
1629
- display: none;
1630
- }
1631
- }
1632
- }
1633
-
1634
- .no_icon {
1635
- .p-multiselect-label {
1636
- padding-left: 16px !important;
1637
- }
1638
- }
1639
-
1640
- .status_dropdown {
1641
- .p-multiselect {
1642
- .p-multiselect-label {
1643
- padding-left: 34px;
1644
- }
1645
- }
1646
-
1647
- .select_status_prv {
1648
- ul {
1649
- li {
1650
- width: 10px;
1651
- height: 10px;
1652
- border-radius: 8px;
1653
- position: absolute;
1654
- transform: translateY(-50%);
1655
- }
1656
-
1657
- li.all {
1658
- background: #667085;
1659
- }
1660
-
1661
- li:nth-child(2) {
1662
- left: 6px;
1663
- }
1664
-
1665
- li:nth-child(3) {
1666
- left: 12px;
1667
- }
1668
- }
1669
- }
1670
- }
1671
-
1672
- .multi-pl-32 {
1673
- padding-left: 40px;
1674
- border: 1px solid red;
1675
- }
1676
-
1677
- .selected_multile {
1678
- .p-multiselect-token-label {
1679
- padding-right: 18px;
1680
- }
1681
- }
1682
-
1683
- .selected_multile.selected_num_2 {
1684
- .p-multiselect .p-multiselect-label {
1685
- padding-left: 44px;
1686
- }
1687
- }
1688
-
1689
- .selected_multile.selected_num_3,
1690
- .selected_multile.moreThanThreeItems {
1691
- .p-multiselect .p-multiselect-label {
1692
- padding-left: 44px;
1693
- }
1694
- }
1695
-
1696
- .mutli_select_status {
1697
- .p-multiselect-label {
1698
- padding-left: 44px !important;
1699
- }
1700
- }
1701
-
1702
- .status_dropdown.selected_multile {
1703
- .left_section_item {
1704
- max-width: 28px;
1705
- overflow: hidden;
1706
- height: 11px;
1707
- width: -webkit-fill-available;
1708
- align-items: center;
1709
- display: flex;
1710
- }
1711
- }
1712
-
1713
- .status_dropdown_item.Active::before {
1714
- background: #12b76a;
1715
- }
1716
-
1717
- .status_dropdown_item.Inactive::before {
1718
- background: #f04438;
1719
- }
1720
-
1721
- .status_dropdown_item.Draft::before {
1722
- background: #162578;
1723
- }
1724
-
1725
- .status_dropdown_item {
1726
- .status_dot {
1727
- width: 10px;
1728
- height: 10px;
1729
- border-radius: 50px;
1730
- position: absolute;
1731
- transform: translateY(-50%);
1732
- top: 50%;
1733
- left: 10px;
1734
- }
1735
- }
1736
-
1737
- .custom_date_picker_sec {
1738
- .custom_date_picker {
1739
- .p-inputtext {
1740
- padding-right: 16px;
1741
- width: 130px;
1742
- }
1743
-
1744
- .p-inputtext {
1745
- &:enabled {
1746
- &:focus {
1747
- box-shadow: none !important;
1748
- border-color: #d0d5dd !important;
1749
- }
1750
- }
1751
- }
1752
-
1753
- .p-datepicker-trigger {
1754
- &:focus {
1755
- box-shadow: none !important;
1756
- border-color: #d0d5dd !important;
1757
- }
1758
- }
1759
- }
1760
-
1761
- .custom_date_picker.multiple {
1762
- .p-inputtext {
1763
- width: 236px;
1764
- }
1765
- }
1766
-
1767
- .clear_icon_sec {
1768
- right: 32px;
1769
- }
1770
- }
1771
-
1772
- .date_filter {
1773
- margin: 0;
1774
- position: absolute;
1775
- top: 0;
1776
- left: 0px;
1777
- background: #fff;
1778
- height: 100%;
1779
- padding: 4px 16px;
1780
-
1781
- li {
1782
- height: 40px;
1783
-
1784
- &:hover {
1785
- background: #f9fafb;
1786
- }
1787
- }
1788
-
1789
- .active {
1790
- background: #f9fafb;
1791
- }
1792
- }
1793
-
1794
- div:has(ul.date_filter) .p-datepicker-group-container {
1795
- padding-left: 116px;
1796
- margin: -8px;
1797
- }
1798
-
1799
- .bottom_date_filters {
1800
- width: calc(100% - 116px);
1801
- border-left: 1px solid #dee2e6;
1802
- }
1803
-
1804
- div:has(ul.date_filter)
1805
- .p-datepicker-group-container
1806
- .p-datepicker
1807
- table
1808
- td
1809
- > span {
1810
- width: 40px;
1811
- height: 40px;
1812
- }
1813
-
1814
- div:has(ul.date_filter) .p-datepicker-group-container .p-datepicker-group {
1815
- width: 328px;
1816
- max-width: 328px;
1817
- padding: 8px 20px !important;
1818
- border: 1px solid #dee2e6;
1819
- border-top: 0;
1820
- }
1821
-
1822
- div:has(ul.date_filter) .p-datepicker-group-container div:nth-child(2) {
1823
- border-right: 0;
1824
- }
1825
-
1826
- div:has(ul.date_filter) .p-datepicker-group-container table td {
1827
- padding: 0;
1828
- }
1829
-
1830
- div:has(ul.date_filter) .p-datepicker-footer {
1831
- margin: -8px;
1832
- }
1833
-
1834
- .panel_status {
1835
- .p-multiselect-filter-container {
1836
- display: none;
1837
- }
1838
-
1839
- .p-multiselect-header {
1840
- padding: 0 !important;
1841
- border-bottom: 0;
1842
- }
1843
- }
1844
-
1845
- .p-multiselect-panel {
1846
- .p-multiselect-items {
1847
- padding: 6px;
1848
- min-width: 140px !important;
1849
- }
1850
- }
1851
-
1852
- .panel_withIcon.p-multiselect-panel {
1853
- .p-multiselect-items {
1854
- .p-multiselect-item {
1855
- padding: 0 10px;
1856
- }
1857
- }
1858
- }
1859
-
1860
- .Multi_select_dropdown_panel.hidePanelHeader {
1861
- .p-multiselect-header {
1862
- display: none;
1863
- }
1864
- }
1865
-
1866
- .errorField {
1867
- color: var(--red-500);
1868
- height: 20px;
1869
- }
1870
-
1871
- .full_form_field {
1872
- // width: 37.125rem;
1873
- }
1874
-
1875
- .form_field {
1876
- // width: 18.063rem;
1877
- }
1878
-
1879
- .PhoneInput {
1880
- background: #ffffff;
1881
- border: 1px solid var(--gray-300);
1882
- transition: background-color 0.2s, color 0.2s, border-color 0.2s,
1883
- box-shadow 0.2s;
1884
- border-radius: 8px;
1885
- box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
1886
- padding-top: 10px;
1887
- padding-bottom: 10px;
1888
- padding-right: 12px;
1889
- padding-left: 0px;
1890
- height: 40px;
1891
-
1892
- :focus-visible {
1893
- outline: none;
1894
- }
1895
-
1896
- &:focus-within {
1897
- outline: 0 none;
1898
- outline-offset: 0;
1899
- box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05),
1900
- 0px 0px 0px 2px var(--primary-100);
1901
- border-radius: 8px;
1902
- border: 1px solid var(--primary-300);
1903
- }
1904
-
1905
- .PhoneInputInput {
1906
- border: none;
1907
- }
1908
- }
1909
-
1910
- .PhoneInputCountry {
1911
- .PhoneInputCountryIcon--border {
1912
- box-shadow: none;
1913
- background-color: #ffffff;
1914
- }
1915
-
1916
- .PhoneInputCountryIconImg {
1917
- width: 20px;
1918
- height: 20px;
1919
- object-fit: cover;
1920
- border-radius: 100%;
1921
- position: absolute;
1922
- top: 0;
1923
- }
1924
- }
1925
-
1926
- .phoneNumberClass {
1927
- margin-left: 14.5rem;
1928
- }
1929
-
1930
- #customCountryDropDown {
1931
- .p-dropdown {
1932
- border: none;
1933
- box-shadow: none;
1934
- background: none;
1935
- padding: 0;
1936
-
1937
- .p-dropdown-label {
1938
- padding: 0;
1939
- padding-right: 4px;
1940
- }
1941
-
1942
- .p-dropdown-trigger {
1943
- padding-top: 20px;
1944
- }
1945
-
1946
- .p-dropdown-trigger[aria-expanded="true"] {
1947
- padding-bottom: 20px;
1948
- }
1949
- }
1950
- }
1951
-
1952
- .customNumberField {
1953
- .p-inputnumber-input {
1954
- padding-left: 24px;
1955
- }
1956
- }
1957
-
1958
- .text-editor {
1959
- button {
1960
- &::after {
1961
- content: none !important;
1962
- }
1963
- }
1964
- }
1965
-
1966
- button#formatULOptions-1:hover::before,
1967
- button#formatULOptions-1.fr-btn-hover::before,
1968
- button#formatULOptions-1.fr-active::before,
1969
- button#formatOLOptions-1:hover::before,
1970
- button#formatOLOptions-1.fr-btn-hover::before,
1971
- button#formatOLOptions-1.fr-active::before {
1972
- content: "";
1973
- border: 2px solid gray;
1974
- border-left: 0;
1975
- border-top: 0;
1976
- width: 6px;
1977
- height: 6px;
1978
- position: absolute;
1979
- left: 2px;
1980
- top: 39%;
1981
- transform: rotate(45deg);
1982
- }
1983
-
1984
- .fr-toolbar .fr-btn-grp {
1985
- display: inline-block;
1986
- margin: 0 0px 0 12px !important;
1987
- }
1988
-
1989
- .fr-buttons.fr-tabs {
1990
- display: none;
1991
- }
1992
-
1993
- .fr-element {
1994
- padding: 12px !important;
1995
- }
1996
-
1997
- .fr-command.fr-btn
1998
- + .fr-dropdown-menu
1999
- .fr-dropdown-wrapper
2000
- .fr-dropdown-content
2001
- ul.fr-dropdown-list
2002
- li
2003
- a.fr-active {
2004
- background: #f9fafb !important;
2005
- }
2006
-
2007
- button[data-cmd="fontFamily"]:focus {
2008
- box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05),
2009
- 0px 0px 0px 2px var(--primary-100);
2010
- border: 1px solid var(--primary-300) !important;
2011
- background: none !important;
2012
- }
2013
-
2014
- .text-editor {
2015
- border: 1px solid #d0d5dd;
2016
- border-radius: 10px;
2017
-
2018
- * {
2019
- border: none !important;
2020
- }
2021
- }
2022
-
2023
- .text-editor.focus-text-editor {
2024
- box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05),
2025
- 0px 0px 0px 4px var(--primary-100);
2026
- border: 1px solid var(--primary-300) !important;
2027
- }
2028
-
2029
- .text-editor.p-invalid.focus-text-editor {
2030
- box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--red-100);
2031
- border: 1px solid var(--red-300) !important;
2032
- }
2033
-
2034
- button[data-cmd="fontFamily"] {
2035
- border: 1px solid var(--gray-300) !important;
2036
-
2037
- &::before {
2038
- content: "";
2039
- border: 1.8px solid #0b0c12;
2040
- border-left: 0;
2041
- border-top: 0;
2042
- width: 7px;
2043
- height: 7px;
2044
- position: absolute;
2045
- right: 8px;
2046
- top: 39%;
2047
- transform: rotate(45deg);
2048
- }
2049
- }
2050
-
2051
- .fr-toolbar .fr-btn-grp {
2052
- margin-right: 0px;
2053
- margin-left: 8px;
2054
- }
2055
-
2056
- .fr-wrapper .fr-placeholder {
2057
- color: #667085 !important;
2058
- }
2059
-
2060
- button[aria-expanded="true"] {
2061
- &::before {
2062
- top: 48%;
2063
- transform: rotate(-136deg);
2064
- }
2065
- }
2066
-
2067
- /// Custon treeDropdownSelect style
2068
- .treeNoCollaps {
2069
- li {
2070
- padding-left: 0 !important;
2071
- padding-right: 0 !important;
2072
- }
2073
-
2074
- .p-tree-toggler {
2075
- display: none;
2076
- }
2077
-
2078
- .treeBadge {
2079
- background: var(--Gray-100, #f2f4f7) !important;
2080
- }
2081
-
2082
- .p-treenode-content:hover {
2083
- background: var(--Primary-25, #f5f6fd) !important;
2084
- }
2085
-
2086
- .p-treenode-content:hover .treeItem,
2087
- .p-treenode-content:focus .treeItem {
2088
- color: var(--primary-400);
2089
-
2090
- .treeBadge {
2091
- color: var(--Primary-400, #243dc6) !important;
2092
- background: var(--Primary-50, #e2e5fa) !important;
2093
- }
2094
- }
2095
-
2096
- .p-treenode-content:hover svg path,
2097
- .p-treenode-content:focus svg path {
2098
- stroke: var(--primary-400) !important;
2099
- }
2100
-
2101
- .p-treenode-content:focus {
2102
- box-shadow: none !important;
2103
- outline: none !important;
2104
- background: var(--Primary-25, #f5f6fd) !important;
2105
-
2106
- .treeBadge {
2107
- color: var(--Primary-400, #243dc6) !important;
2108
- background: var(--Primary-50, #e2e5fa) !important;
2109
- }
2110
- }
2111
- }
2112
-
2113
- /// Custon treeDropdownSelect style end /////////////////
2114
-
2115
- /////// Custom list_box_dropdown ///////////
2116
- .list_box_dropdown {
2117
- .p-listbox-header {
2118
- padding: 12px !important;
2119
- border-top: 1px solid var(--gray-200);
2120
- }
2121
-
2122
- ul.p-listbox-list {
2123
- padding: 6px;
2124
-
2125
- li {
2126
- margin: 4px 0 !important;
2127
- border-radius: 4px !important;
2128
- padding: 8px 14px !important;
2129
-
2130
- .item_content {
2131
- max-width: 80%;
2132
- white-space: nowrap;
2133
- text-overflow: ellipsis;
2134
- overflow: hidden;
2135
- // width: 100%;
2136
- }
2137
-
2138
- .item_icon {
2139
- display: none;
2140
- }
2141
-
2142
- &:hover {
2143
- background-color: var(--gray-50) !important;
2144
- }
2145
-
2146
- &:focus {
2147
- box-shadow: none !important;
2148
- }
2149
- }
2150
-
2151
- .p-highlight {
2152
- background: var(--Primary-25);
2153
- color: #162578 !important;
2154
-
2155
- .item_icon {
2156
- display: block;
2157
- }
2158
- }
2159
- }
2160
-
2161
- .selected-none {
2162
- ul {
2163
- li.p-highlight {
2164
- display: none !important;
2165
- }
2166
- }
2167
- }
2168
- }
2169
-
2170
- .list_box_chips {
2171
- display: inline-block;
2172
- align-items: center;
2173
- list-style: none;
2174
-
2175
- li {
2176
- float: left;
2177
- height: 24px;
2178
- }
2179
- }
2180
-
2181
- /////// Custom list_box_dropdown ///////////
2182
-
2183
- //ScMulti Select//
2184
- .sc_multiSelect {
2185
- height: 40px !important;
2186
-
2187
- .p-multiselect-clear-icon {
2188
- right: 42px !important;
2189
- }
2190
-
2191
- .p-multiselect-label {
2192
- line-height: 38px !important;
2193
- }
2194
- }
2195
-
2196
- .sc_multiSelect.noShowSelectedCount {
2197
- .p-multiselect-label {
2198
- padding-right: 0px;
2199
- }
2200
- }
2201
-
2202
- .sc_multiSelect.hideChipremoveIcon {
2203
- .p-multiselect-token {
2204
- svg {
2205
- display: none;
2206
- }
2207
- }
2208
- }
2209
-
2210
- .sc_multiSelect_panel {
2211
- .p-multiselect-items {
2212
- padding: 4px !important;
2213
-
2214
- .p-multiselect-item,
2215
- .p-highlight {
2216
- span {
2217
- padding-right: 28px;
2218
- }
2219
- }
2220
-
2221
- .p-highlight::after {
2222
- content: "";
2223
- width: 12px;
2224
- height: 6px;
2225
- border: solid #162578;
2226
- border-width: 1.9px;
2227
- border-top: 0;
2228
- border-right: 0;
2229
- transform: rotate(-45deg);
2230
- margin-right: 8px;
2231
- position: absolute;
2232
- right: 4px;
2233
- }
2234
- }
2235
- }
2236
-
2237
- //////////////////////////////////////////////
2238
- ///
2239
-
2240
- .condition_menu {
2241
- width: 648px !important;
2242
- }
2243
-
2244
- .condition_attribute_list_sect {
2245
- height: 215px;
2246
-
2247
- .attr_chip {
2248
- transition: all 0.1s;
2249
-
2250
- &:hover {
2251
- transform: scale(1.05);
2252
- // transition: all 0.2s;
2253
- }
2254
- }
2255
- }
2256
-
2257
- .condition_configure {
2258
- height: 224px;
2259
- outline: none;
2260
- line-height: 30px;
2261
- letter-spacing: 2px;
2262
-
2263
- .formulaChipElm {
2264
- line-height: 24px;
2265
- letter-spacing: 0px;
2266
- margin: 2px;
2267
- float: left;
2268
- }
2269
-
2270
- .formulaSpanElm {
2271
- font-size: 16px;
2272
- margin: 2px 0;
2273
- float: left;
2274
- min-width: 6px;
2275
- height: 32px;
2276
- }
2277
- }
2278
-
2279
- .formula_condition_dropdown {
2280
- box-shadow: none !important;
2281
-
2282
- .p-dropdown-label {
2283
- display: block !important;
2284
- }
2285
- }
2286
-
2287
- .p-button.p-button-link:enabled:hover {
2288
- color: var(--primary-400) !important;
2289
- }
2290
-
2291
- /* AG GRID - styles */
2292
- .ag-grid-container {
2293
- background: #fff !important;
2294
- box-shadow: 0px 0px 1px var(--gray-300) !important;
2295
- overflow: hidden;
2296
- .ag-root-wrapper {
2297
- &.ag-layout-normal {
2298
- border: 0;
2299
- }
2300
- }
2301
- }
2302
-
2303
- .ag-header {
2304
- background: var(--gray-50);
2305
- border-top: 1px solid var(--gray-200) !important;
2306
- border-bottom: 1px solid var(--gray-200) !important;
2307
- }
2308
-
2309
- .ag-root-wrapper {
2310
- border-radius: 0 !important;
2311
- }
2312
-
2313
- .ag-body-horizontal-scroll {
2314
- display: none !important;
2315
- }
2316
-
2317
- .ag-row-hover {
2318
- background-color: var(--primary-25) !important;
2319
- transform: scale(1.1);
2320
- transition: transform 0.4s ease-in-out;
2321
- }
2322
-
2323
- .ag-ltr .ag-cell-focus:not(.ag-cell-range-selected):focus-within {
2324
- border: 0;
2325
- border-color: initial;
2326
- }
2327
-
2328
- .ag-ltr .ag-cell {
2329
- display: flex;
2330
- align-items: center;
2331
- }
2332
-
2333
- .ag-grid-container {
2334
- // border: 1px solid var(--gray-200) !important;
2335
- background: #fff !important;
2336
- box-shadow: 0px 0px 1px var(--gray-300);
2337
- }
2338
-
2339
- // .ag-row {
2340
- // border-bottom: 1px solid var(--gray-200);
2341
- // }
2342
-
2343
- .ag-row-odd {
2344
- background-color: var(--gray-25) !important;
2345
- }
2346
-
2347
- .ag-row:focus {
2348
- background-color: var(--gray-100);
2349
- }
2350
-
2351
- /* ErrorBoundary.module.css */
2352
- .errorContainer {
2353
- display: flex;
2354
- flex-direction: column;
2355
- align-items: center;
2356
- justify-content: center;
2357
- padding: 20px;
2358
- margin: auto;
2359
- border-radius: 5px;
2360
- background-color: var(--red-50);
2361
- width: 100%;
2362
- height: 100%;
2363
- text-align: center;
2364
- }
2365
-
2366
- .error_description {
2367
- // width: 750px;
2368
- }
2369
-
2370
- .rounded_btn {
2371
- padding: 8px 10px !important;
2372
- height: auto;
2373
- border-radius: 8px !important;
2374
- cursor: pointer;
2375
- &:hover {
2376
- background: var(--primary-25);
2377
- }
2378
- }
2379
-
2380
- .ag-grid-container {
2381
- &:has(.web-cards) {
2382
- .grid-header {
2383
- position: sticky;
2384
- top: 0;
2385
- }
2386
- }
2387
- }
2388
-
2389
- .p-button {
2390
- &.p-button-secondary {
2391
- padding: 8px 12px;
2392
- }
2393
- &.p-button-outline {
2394
- padding: 8px 12px;
2395
- }
2396
-
2397
- padding: 8px 12px;
2398
-
2399
- .p-button-label {
2400
- font-weight: 600;
2401
- }
2402
-
2403
- &.p-disabled {
2404
- opacity: 0.2 !important;
2405
- border: 0;
2406
- }
2407
- }
2408
-
2409
- .ag-theme-quartz {
2410
- --ag-active-color: var(--gray-300);
2411
- }
2412
-
2413
- .ag-ltr .ag-header-viewport .ag-header-cell-resize::after {
2414
- background-color: var(--gray-200);
2415
- width: 2px;
2416
- }
2417
-
2418
- .p-dropdown-panel .p-dropdown-items {
2419
- padding-left: 0;
2420
- }
2421
-
2422
- .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
2423
- margin-bottom: 0px;
2424
- }
2425
-
2426
- .column-group {
2427
- padding: 0 !important;
2428
- .p-overlaypanel-content {
2429
- padding: 0 !important;
2430
- .column-header,
2431
- .column-footer {
2432
- padding: 16px;
2433
- }
2434
- }
2435
- }
2436
-
2437
- .w-25 {
2438
- width: 25%;
2439
- }
2440
-
2441
- .lh-44 {
2442
- line-height: 44px;
2443
- }
2444
-
2445
- .lh-40 {
2446
- line-height: 40px;
2447
- }
2448
-
2449
- .br-8 {
2450
- border-radius: 8px;
2451
- }
2452
-
2453
- /* conditions */
2454
- .filter-dropdowns {
2455
- padding: 2px;
2456
-
2457
- .p-dropdown:not(.p-disabled).p-focus {
2458
- box-shadow: none !important;
2459
- }
2460
-
2461
- .condition-dropdown {
2462
- width: 12rem !important;
2463
- height: 44px;
2464
- display: flex;
2465
- justify-content: center;
2466
- align-items: center;
2467
- // border: 1px solid var(--gray-300) !important;
2468
-
2469
- .p-dropdown .p-dropdown-label.p-inputtext {
2470
- overflow: hidden;
2471
- text-overflow: ellipsis;
2472
- white-space: nowrap;
2473
- }
2474
-
2475
- .p-inputtext:enabled:focus {
2476
- outline: 0 none;
2477
- outline-offset: 0;
2478
- box-shadow: none !important;
2479
- border-radius: 8px;
2480
- }
2481
-
2482
- .p-inputtext:enabled:focus {
2483
- outline: 0 none;
2484
- outline-offset: 0;
2485
- box-shadow: none !important;
2486
- border-radius: 8px;
2487
- }
2488
- }
2489
-
2490
- .operator-type {
2491
- height: 44px !important;
2492
- display: flex;
2493
- justify-content: center;
2494
- align-items: center;
2495
- }
2496
-
2497
- .condition-type {
2498
- // width: 120px;
2499
- height: 44px;
2500
- display: flex;
2501
- justify-content: center;
2502
- align-items: center;
2503
-
2504
- .p-dropdown .p-dropdown-label.p-inputtext {
2505
- overflow: hidden;
2506
- text-overflow: ellipsis;
2507
- white-space: nowrap;
2508
- }
2509
- }
2510
-
2511
- .filter-multi-dropdown {
2512
- .p-multiselect {
2513
- box-shadow: none !important;
2514
- border: 1px solid var(--gray-300) !important;
2515
- border-top-left-radius: 0;
2516
- border-bottom-left-radius: 0;
2517
- height: 44px;
2518
- box-shadow: none !important;
2519
- width: 200px !important;
2520
-
2521
- &:focus {
2522
- border-top-left-radius: 0 !important;
2523
- border-bottom-left-radius: 0 !important;
2524
- }
2525
- .p-inputwrapper-filled {
2526
- background: #ffffff !important;
2527
- }
2528
- }
2529
- }
2530
-
2531
- .filter-calendar {
2532
- .p-inputtext {
2533
- border: 1px solid var(--gray-300) !important;
2534
- border-top-left-radius: 0;
2535
- border-bottom-left-radius: 0;
2536
- height: 44px;
2537
- line-height: 44px;
2538
- box-shadow: none !important;
2539
-
2540
- &:focus {
2541
- border-top-left-radius: 0 !important;
2542
- border-bottom-left-radius: 0 !important;
2543
- }
2544
- }
2545
- }
2546
-
2547
- .data_table_multi_checkbox {
2548
- .p-checkbox {
2549
- vertical-align: baseline;
2550
- }
2551
- }
2552
- }
2553
-
2554
- .overlay_list_options {
2555
- .p-overlaypanel-content {
2556
- padding: 0;
2557
- }
2558
- }
2559
-
2560
- .filter-btn-grid {
2561
- padding: 10px;
2562
- }
2563
-
2564
- // .table-filter-overlay {
2565
- // width: 51rem !important;
2566
- // &:after,
2567
- // &:before {
2568
- // margin-left: -12px !important;
2569
- // }
2570
-
2571
- // margin-left: -10px;
2572
-
2573
- // .p-overlaypanel-content {
2574
- // padding: 0;
2575
- // }
2576
- // }
2577
- .filter_dropdown_and {
2578
- .p-dropdown-trigger {
2579
- margin-top: 2px !important;
2580
- }
2581
- }
2582
-
2583
- .icon-24x24 {
2584
- width: 24px;
2585
- height: 24px;
2586
- }
2587
-
2588
- .icon-32x32 {
2589
- width: 32px;
2590
- height: 32px;
2591
- }
2592
-
2593
- .h-38 {
2594
- height: 38px;
2595
- }
2596
-
2597
- // loader styles
2598
- .loader-wrapper {
2599
- width: 60px;
2600
- height: 60px;
2601
- top: 45%;
2602
- left: 45%;
2603
- transform: translate(-45%, -50%);
2604
- border-radius: 50%;
2605
- background-color: #fff;
2606
- position: relative;
2607
- transform: rotate(45deg);
2608
- box-sizing: border-box;
2609
- display: flex;
2610
- justify-content: center;
2611
- align-items: center;
2612
-
2613
- /* HTML: <div class="loader"></div> */
2614
- .loader-jobs {
2615
- width: 35px;
2616
- aspect-ratio: 1;
2617
- border-radius: 50%;
2618
- background: radial-gradient(farthest-side, var(--primary-500) 94%, #0000)
2619
- top/5px 5px no-repeat,
2620
- conic-gradient(#0000 5%, var(--primary-500));
2621
- -webkit-mask: radial-gradient(
2622
- farthest-side,
2623
- #0000 calc(100% - 5px),
2624
- #000 0
2625
- );
2626
- animation: l13 1s infinite linear;
2627
- }
2628
-
2629
- @keyframes l13 {
2630
- 100% {
2631
- transform: rotate(1turn);
2632
- }
2633
- }
2634
-
2635
- @keyframes gradient {
2636
- 0% {
2637
- background-position: 100% 50%;
2638
- }
2639
-
2640
- 50% {
2641
- background-position: 50% 70%;
2642
- }
2643
-
2644
- 100% {
2645
- background-position: 70% 100%;
2646
- }
2647
- }
2648
- }
2649
-
2650
- .loader-main {
2651
- width: 48px;
2652
- height: 48px;
2653
- border-radius: 50%;
2654
- position: relative;
2655
- animation: rotate 1s linear infinite;
2656
- }
2657
-
2658
- .loader-main::before {
2659
- content: "";
2660
- box-sizing: border-box;
2661
- position: absolute;
2662
- inset: 0px;
2663
- border-radius: 50%;
2664
- border: 3px solid var(--primary-500);
2665
- animation: prixClipFix 2s linear infinite;
2666
- }
2667
-
2668
- .br-6 {
2669
- border-radius: 6px;
2670
- }
2671
-
2672
- .line-clamp {
2673
- display: -webkit-box;
2674
- -webkit-box-orient: vertical;
2675
- overflow: hidden;
2676
- text-overflow: ellipsis;
2677
- }
2678
-
2679
- .line-clamp-1 {
2680
- -webkit-line-clamp: 1;
2681
- line-clamp: 1;
2682
- }
2683
-
2684
- .line-clamp-2 {
2685
- -webkit-line-clamp: 2;
2686
- line-clamp: 2;
2687
- }
2688
-
2689
- .pd-9 {
2690
- padding: 9px;
2691
- }
2692
-
2693
- .custom_grid_checkbox {
2694
- &.custom_grid_indeterminate {
2695
- .p-checkbox-box {
2696
- width: 20px;
2697
- height: 20px;
2698
- border-radius: 50%;
2699
- cursor: pointer;
2700
- position: absolute;
2701
- top: 0;
2702
- left: 0;
2703
- background: url("./assets/png/checkbox_minus_icon.png");
2704
- transition: background 0.3s;
2705
- border: 0;
2706
-
2707
- &.p-highlight {
2708
- background: url("./assets/png/checkbox_minus_icon.png");
2709
-
2710
- &:hover {
2711
- background: url("./assets/png/checkbox_minus_icon.png") transparent !important;
2712
- }
2713
-
2714
- svg {
2715
- width: 0 !important;
2716
- height: 0 !important;
2717
- }
2718
- }
2719
- }
2720
- }
2721
- position: relative;
2722
- margin-right: 5px;
2723
-
2724
- .p-checkbox-box {
2725
- width: 20px;
2726
- height: 20px;
2727
- border-radius: 50%;
2728
- cursor: pointer;
2729
- position: absolute;
2730
- top: 0;
2731
- left: 0;
2732
- background: url("./assets/png/checkbox_outline_icon.png");
2733
- transition: background 0.3s;
2734
- border: 0;
2735
-
2736
- &:hover {
2737
- background: url("./assets/png/checkbox_outline_icon.png") transparent !important;
2738
- border: 0 !important;
2739
- }
2740
-
2741
- &.p-highlight {
2742
- background: url("./assets/png/checkbox_fill_icon.png");
2743
-
2744
- &:hover {
2745
- background: url("./assets/png/checkbox_fill_icon.png") transparent !important;
2746
- }
2747
-
2748
- svg {
2749
- width: 0 !important;
2750
- height: 0 !important;
2751
- }
2752
- }
2753
- }
2754
- }
2755
-
2756
- // .ag-grid-container {
2757
- // .ag-cell-wrapper {
2758
- // width: 100% !important;
2759
- // .ag-group-value {
2760
- // width: 100% !important;
2761
- // }
2762
- // }
2763
- // }
2764
-
2765
- // .ag_grid_sidebar {
2766
- // .p-sidebar-content {
2767
- // padding-right: 16px;
2768
- // }
2769
- // }
2770
-
2771
- .ag-center-cols-viewport {
2772
- min-height: 0px !important;
2773
- }
2774
-
2775
- .filter-dropdown-grid {
2776
- .p-placeholder {
2777
- margin-top: 3px;
2778
- }
2779
- }
2780
-
2781
- .zoom_animate {
2782
- transition: all 0.4s ease-in-out;
2783
- animation: zoomin 0.2s linear;
2784
- }
2785
-
2786
- @keyframes zoomin {
2787
- 0% {
2788
- opacity: 0;
2789
- transform: scale3d(0.3, 0.3, 0.3);
2790
- }
2791
- 100% {
2792
- opacity: 1;
2793
- }
2794
- }
2795
-
2796
- // .slide_animate_sort {
2797
- // overflow: hidden; /* Ensures content is not visible outside of the height */
2798
- // height: 0; /* Start with height 0 */
2799
- // opacity: 0; /* Start with full transparency */
2800
- // animation: slide_down 0.5s ease-in-out forwards; /* Run the animation on load */
2801
- // }
2802
-
2803
- // @keyframes slide_down {
2804
- // 0% {
2805
- // height: 0;
2806
- // // margin-top: -30px; /* Start 30px above the final position */
2807
- // opacity: 0; /* Fully transparent */
2808
- // }
2809
- // 100% {
2810
- // height: 90px; /* The final height */
2811
- // // margin-top: 0px; /* Move to the final position */
2812
- // opacity: 1; /* Fully opaque */
2813
- // }
2814
- // }
2815
-
2816
- .pd-r-2 {
2817
- padding-right: 2px;
2818
- }
2819
-
2820
- .ag-grid-container:has(.custom_class_name) {
2821
- .ag-cell-wrapper {
2822
- width: 100% !important;
2823
- .ag-group-value {
2824
- width: 100% !important;
2825
- }
2826
- }
2827
- }
2828
-
2829
- @keyframes rotate {
2830
- 100% {
2831
- transform: rotate(360deg);
2832
- }
2833
- }
2834
-
2835
- @keyframes prixClipFix {
2836
- 0% {
2837
- clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
2838
- }
2839
-
2840
- 25% {
2841
- clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
2842
- }
2843
-
2844
- 50% {
2845
- clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
2846
- }
2847
-
2848
- 75% {
2849
- clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
2850
- }
2851
-
2852
- 100% {
2853
- clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
2854
- }
2855
- }
2856
-
2857
- .edited-record {
2858
- background-color: var(--primary-50);
2859
- }
2860
- .non-editable {
2861
- background-color: var(--gray-100);
2862
- }