sccoreui 6.1.75 → 6.1.78

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