sccoreui 6.5.25 → 6.5.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (88) hide show
  1. package/dist/components/ag-grid/advancedFeature/new-filter/conditions/Conditions.js +167 -17
  2. package/dist/components/ag-grid/advancedFeature/new-filter/table-filter.js +30 -11
  3. package/dist/components/ag-grid/parent-for-grid.js +56 -23
  4. package/package.json +1 -1
  5. package/dist/App.scss +0 -3413
  6. package/dist/assets/App.css +0 -96
  7. package/dist/assets/App.css.map +0 -1
  8. package/dist/assets/App.scss +0 -155
  9. package/dist/assets/error/error-500.png +0 -0
  10. package/dist/assets/flex.css +0 -21652
  11. package/dist/assets/fonts/Lato-Black.ttf +0 -0
  12. package/dist/assets/fonts/Lato-Bold.ttf +0 -0
  13. package/dist/assets/fonts/Lato-Light.ttf +0 -0
  14. package/dist/assets/fonts/Lato-Regular.ttf +0 -0
  15. package/dist/assets/fonts/Lato-Thin.ttf +0 -0
  16. package/dist/assets/fonts/Roboto-Bold.ttf +0 -0
  17. package/dist/assets/fonts/Roboto-Italic.ttf +0 -0
  18. package/dist/assets/fonts/Roboto-Medium.ttf +0 -0
  19. package/dist/assets/fonts/Roboto-Regular.ttf +0 -0
  20. package/dist/assets/fonts/primeicons.eot +0 -0
  21. package/dist/assets/fonts/primeicons.svg +0 -292
  22. package/dist/assets/fonts/primeicons.ttf +0 -0
  23. package/dist/assets/fonts/primeicons.woff +0 -0
  24. package/dist/assets/fonts/primeicons.woff2 +0 -0
  25. package/dist/assets/images/Error/error-500.png +0 -0
  26. package/dist/assets/images/Payment-method-apple-card.png +0 -0
  27. package/dist/assets/images/Payment-method-card-white.png +0 -0
  28. package/dist/assets/images/Payment-method-master-card.png +0 -0
  29. package/dist/assets/images/avatar.png +0 -0
  30. package/dist/assets/images/avatar1.png +0 -0
  31. package/dist/assets/images/avatar2.png +0 -0
  32. package/dist/assets/images/avatar3.png +0 -0
  33. package/dist/assets/images/avatar4.png +0 -0
  34. package/dist/assets/images/avatar5.png +0 -0
  35. package/dist/assets/images/avatar6.png +0 -0
  36. package/dist/assets/images/avatar7.png +0 -0
  37. package/dist/assets/images/avatar8.png +0 -0
  38. package/dist/assets/images/avatar9.png +0 -0
  39. package/dist/assets/images/company.png +0 -0
  40. package/dist/assets/images/company1.png +0 -0
  41. package/dist/assets/images/company2.png +0 -0
  42. package/dist/assets/images/company3.png +0 -0
  43. package/dist/assets/images/company4.png +0 -0
  44. package/dist/assets/images/company5.png +0 -0
  45. package/dist/assets/images/company6.png +0 -0
  46. package/dist/assets/images/demoImage.png +0 -0
  47. package/dist/assets/images/drag-and-drop-icon.png +0 -0
  48. package/dist/assets/images/drag.svg +0 -8
  49. package/dist/assets/images/empty-state-icon.svg +0 -53
  50. package/dist/assets/images/label-image.png +0 -0
  51. package/dist/assets/images/profile-square-image.png +0 -0
  52. package/dist/assets/png/checkbox_fill_icon.png +0 -0
  53. package/dist/assets/png/checkbox_minus_icon.png +0 -0
  54. package/dist/assets/png/checkbox_outline_icon.png +0 -0
  55. package/dist/assets/png/checkmark_icon.png +0 -0
  56. package/dist/assets/png/salseforce-img.png +0 -0
  57. package/dist/assets/sccoreicons.css +0 -1105
  58. package/dist/assets/sccoreui.css +0 -8947
  59. package/dist/assets/svg/add.svg +0 -3
  60. package/dist/assets/svg/back-button.svg +0 -3
  61. package/dist/assets/svg/check-white.svg +0 -3
  62. package/dist/assets/svg/check.svg +0 -3
  63. package/dist/assets/svg/check2.svg +0 -3
  64. package/dist/assets/svg/close.svg +0 -3
  65. package/dist/assets/svg/delete.svg +0 -3
  66. package/dist/assets/svg/done_all.svg +0 -3
  67. package/dist/assets/svg/dot_list.svg +0 -3
  68. package/dist/assets/svg/down_arrow.svg +0 -3
  69. package/dist/assets/svg/drag.svg +0 -8
  70. package/dist/assets/svg/edit.svg +0 -3
  71. package/dist/assets/svg/gallery.svg +0 -3
  72. package/dist/assets/svg/heading1.svg +0 -3
  73. package/dist/assets/svg/heading2.svg +0 -3
  74. package/dist/assets/svg/hyphen.svg +0 -3
  75. package/dist/assets/svg/info.svg +0 -3
  76. package/dist/assets/svg/input-info.svg +0 -0
  77. package/dist/assets/svg/italic.svg +0 -3
  78. package/dist/assets/svg/link.svg +0 -3
  79. package/dist/assets/svg/message-info.svg +0 -3
  80. package/dist/assets/svg/number_list.svg +0 -3
  81. package/dist/assets/svg/payment_method.svg +0 -7
  82. package/dist/assets/svg/quotes.svg +0 -3
  83. package/dist/assets/svg/remove.svg +0 -3
  84. package/dist/assets/svg/sort-down-arrow.svg +0 -3
  85. package/dist/assets/svg/sort-up-arrow.svg +0 -8
  86. package/dist/assets/svg/user.svg +0 -3
  87. package/dist/assets/theme.css +0 -6457
  88. package/dist/assets/variables.scss +0 -108
package/dist/App.scss DELETED
@@ -1,3413 +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
- content: url("./assets/png/checkmark_icon.png");
452
- position: absolute;
453
- top: 48%;
454
- right: 8px;
455
- transform: translateY(-50%);
456
- }
457
- }
458
- }
459
- }
460
-
461
- .bulk-action-feature {
462
- .p-overlaypanel-content {
463
- padding: 0 !important;
464
- border-radius: 6px !important;
465
- }
466
- }
467
-
468
- .column_group_overlay {
469
- overflow: hidden;
470
-
471
- .p-overlaypanel-content {
472
- padding: 0px !important;
473
- }
474
- }
475
-
476
- .list-items {
477
- padding: 4px;
478
- border: 0;
479
-
480
- .p-treenode-content {
481
- padding: 2px !important;
482
- }
483
-
484
- .p-treenode-droppoint {
485
- height: 2px;
486
- }
487
- }
488
-
489
- .sc_custom_multiselect {
490
- width: max-content;
491
-
492
- * {
493
- color: #344054;
494
- font-weight: 700;
495
- }
496
-
497
- .left_section_item {
498
- left: 1rem;
499
- }
500
-
501
- .right_section_item {
502
- right: 1rem;
503
- }
504
-
505
- .selected_moreThan_one {
506
- right: 40px;
507
- }
508
-
509
- .p-inputwrapper-filled {
510
- background: #f5f6fd;
511
- border: 1px solid #8190e8;
512
- }
513
-
514
- .p-multiselect {
515
- max-width: 100%;
516
- width: max-content !important;
517
-
518
- .p-multiselect-label {
519
- padding: 0;
520
- padding-left: 44px;
521
- max-width: 100%;
522
- height: 100%;
523
-
524
- .p-multiselect-token {
525
- border: none;
526
- width: 100%;
527
- min-width: 100%;
528
- background: none;
529
- padding-left: 0;
530
-
531
- .p-multiselect-token-label {
532
- width: 100%;
533
- white-space: nowrap;
534
- overflow: hidden;
535
- text-overflow: ellipsis;
536
- }
537
- }
538
-
539
- // svg {
540
- // display: none;
541
- // }
542
- }
543
- }
544
-
545
- .p-multiselect-trigger {
546
- width: 2rem;
547
-
548
- // svg {
549
- // display: none;
550
- // }
551
- }
552
- }
553
-
554
- // .no_icon {
555
- // .p-multiselect-label {
556
- // padding-left: 16px !important;
557
- // }
558
- // }
559
-
560
- .status_dropdown {
561
- .p-multiselect {
562
- .p-multiselect-label {
563
- padding-left: 34px;
564
- }
565
- }
566
-
567
- .select_status_prv {
568
- ul {
569
- li {
570
- width: 10px;
571
- height: 10px;
572
- border-radius: var(--border-radius);
573
- position: absolute;
574
- transform: translateY(-50%);
575
- }
576
-
577
- li.all {
578
- background: #667085;
579
- }
580
-
581
- li:nth-child(2) {
582
- left: 6px;
583
- }
584
-
585
- li:nth-child(3) {
586
- left: 12px;
587
- }
588
- }
589
- }
590
- }
591
- .table_filters_1 {
592
- height: auto;
593
- display: flex;
594
- // justify-content: center;
595
- align-items: center;
596
- padding: 10px 0px !important;
597
-
598
- .chip_comp {
599
- height: 44px !important;
600
- border: 1px solid var(--gray-300);
601
- overflow-y: auto;
602
- .p-inputtext {
603
- padding: 6px 20px 7px 20px;
604
- height: 44px !important;
605
- border-top-left-radius: 0px !important;
606
- border-top-right-radius: 0px !important;
607
- }
608
- }
609
-
610
- .p-chips-multiple-container {
611
- padding: 7px 10px 6px 10px;
612
- width: 100%;
613
- // max-height: 40px !important;
614
- border-top-left-radius: 0 !important;
615
- border-bottom-left-radius: 0 !important;
616
- overflow: auto;
617
- height: 44px;
618
- .p-chips-token {
619
- .p-chips-token-label {
620
- white-space: nowrap;
621
- }
622
- }
623
-
624
- &:not(.p-disabled):hover {
625
- border-color: var(--gray-300);
626
- }
627
-
628
- &:not(.p-disabled).p-focus {
629
- box-shadow: none;
630
- }
631
- }
632
- }
633
-
634
- .conditional_btn {
635
- height: 30px;
636
- width: 30px;
637
- display: flex;
638
- justify-content: center;
639
- align-items: center;
640
- // &:hover {
641
- // background-color: var(--primary-25);
642
- // border-radius: 6px;
643
- // }
644
- }
645
-
646
- .multi-pl-32 {
647
- padding-left: 40px;
648
- border: 1px solid red;
649
- }
650
-
651
- .selected_multile {
652
- .p-multiselect-token-label {
653
- padding-right: 18px;
654
- height: 100%;
655
- }
656
- .p-multiselect-label {
657
- height: 100%;
658
- }
659
- }
660
-
661
- .selected_multile.selected_num_2 {
662
- .p-multiselect .p-multiselect-label {
663
- padding-left: 12px;
664
- }
665
- }
666
-
667
- .selected_attributes {
668
- // height: calc(100vh - 180px);
669
- overflow-y: auto;
670
- }
671
-
672
- .selected_multile.selected_num_3,
673
- .selected_multile.moreThanThreeItems {
674
- .p-multiselect .p-multiselect-label {
675
- padding-left: 12px;
676
- }
677
- }
678
-
679
- .mutli_select_status {
680
- .p-multiselect-label {
681
- padding-left: 44px !important;
682
- }
683
- }
684
-
685
- .status_dropdown.selected_multile {
686
- .left_section_item {
687
- max-width: 28px;
688
- overflow: hidden;
689
- height: 11px;
690
- width: -webkit-fill-available;
691
- align-items: center;
692
- display: flex;
693
- }
694
- }
695
-
696
- .status_dropdown_item.Active::before {
697
- background: #12b76a;
698
- }
699
-
700
- .status_dropdown_item.Inactive::before {
701
- background: #f04438;
702
- }
703
-
704
- .status_dropdown_item.Draft::before {
705
- background: #162578;
706
- }
707
-
708
- .status_dropdown_item {
709
- .status_dot {
710
- width: 10px;
711
- height: 10px;
712
- border-radius: 50px;
713
- position: absolute;
714
- transform: translateY(-50%);
715
- top: 50%;
716
- left: 10px;
717
- }
718
- }
719
-
720
- .custom_date_picker_sec {
721
- .custom_date_picker {
722
- .p-inputtext {
723
- padding-right: 16px;
724
- width: 130px;
725
- }
726
-
727
- .p-inputtext {
728
- &:enabled {
729
- &:focus {
730
- box-shadow: none !important;
731
- border-color: #d0d5dd !important;
732
- }
733
- }
734
- }
735
-
736
- .p-datepicker-trigger {
737
- &:focus {
738
- box-shadow: none !important;
739
- border-color: #d0d5dd !important;
740
- }
741
- }
742
- }
743
-
744
- .custom_date_picker.multiple {
745
- .p-inputtext {
746
- width: 236px;
747
- }
748
- }
749
-
750
- .clear_icon_sec {
751
- right: 32px;
752
- }
753
- }
754
-
755
- .p-datepicker .p-datepicker-header .p-datepicker-title {
756
- display: inline-flex;
757
- flex-wrap: nowrap;
758
- align-items: center;
759
- white-space: nowrap;
760
- }
761
-
762
- .p-datepicker .p-datepicker-header .p-datepicker-title .date_nav_dropdown {
763
- min-width: 0 !important;
764
- background: transparent;
765
- border: none;
766
- box-shadow: none;
767
- border-radius: 4px;
768
-
769
- &:hover,
770
- &:not(.p-disabled):hover {
771
- background: #f3f4f6;
772
- border: none;
773
- }
774
-
775
- &:not(.p-disabled).p-focus {
776
- box-shadow: none;
777
- border: none;
778
- }
779
-
780
- .p-dropdown-label {
781
- padding: 2px 6px;
782
- font-size: 1rem;
783
- font-weight: 600;
784
- color: #495057;
785
- line-height: 1.5rem;
786
- }
787
-
788
- .p-dropdown-trigger {
789
- display: none;
790
- }
791
- }
792
-
793
- .p-datepicker .p-dropdown-panel,
794
- .date_nav_dropdown ~ .p-dropdown-panel {
795
- min-width: 6rem;
796
-
797
- .p-dropdown-items .p-dropdown-item {
798
- display: flex;
799
- align-items: center;
800
- justify-content: space-between;
801
- gap: 0.75rem;
802
- padding-right: 0.75rem;
803
- }
804
- }
805
-
806
- .date_filter {
807
- margin: 0;
808
- position: absolute;
809
- top: 0;
810
- left: 0px;
811
- background: #fff;
812
- height: 100%;
813
- padding: 4px 16px;
814
-
815
- li {
816
- height: 40px;
817
-
818
- &:hover {
819
- background: #f9fafb;
820
- }
821
- }
822
-
823
- .active {
824
- background: #f9fafb;
825
- }
826
- }
827
-
828
- div:has(ul.date_filter) .p-datepicker-group-container {
829
- padding-left: 116px;
830
- margin: -8px;
831
- }
832
-
833
- .bottom_date_filters {
834
- width: calc(100% - 116px);
835
- border-left: 1px solid #dee2e6;
836
- }
837
-
838
- div:has(ul.date_filter)
839
- .p-datepicker-group-container
840
- .p-datepicker
841
- table
842
- td
843
- > span {
844
- width: 40px;
845
- height: 40px;
846
- }
847
-
848
- div:has(ul.date_filter) .p-datepicker-group-container .p-datepicker-group {
849
- width: 328px;
850
- max-width: 328px;
851
- padding: 8px 20px !important;
852
- border: 1px solid #dee2e6;
853
- border-top: 0;
854
- }
855
-
856
- div:has(ul.date_filter) .p-datepicker-group-container div:nth-child(2) {
857
- border-right: 0;
858
- }
859
-
860
- div:has(ul.date_filter) .p-datepicker-group-container table td {
861
- padding: 0;
862
- }
863
-
864
- div:has(ul.date_filter) .p-datepicker-footer {
865
- margin: -8px;
866
- }
867
-
868
- .panel_status {
869
- .p-multiselect-filter-container {
870
- display: none;
871
- }
872
-
873
- .p-multiselect-header {
874
- padding: 0 !important;
875
- border-bottom: 0;
876
- }
877
- }
878
-
879
- .p-multiselect-panel {
880
- .p-multiselect-items {
881
- padding: 4px;
882
- min-width: 140px !important;
883
- }
884
- }
885
-
886
- .panel_withIcon.p-multiselect-panel {
887
- .p-multiselect-items {
888
- .p-multiselect-item {
889
- padding: 0 10px;
890
- }
891
- }
892
- }
893
-
894
- .Multi_select_dropdown_panel.hidePanelHeader {
895
- .p-multiselect-header {
896
- display: none;
897
- }
898
- }
899
-
900
- // .errorField {
901
- // color: var(--red-500);
902
- // height: auto;
903
- // line-height: 20px;
904
- // }
905
-
906
- .full_form_field {
907
- // width: 37.125rem;
908
- width: 100%;
909
- }
910
-
911
- .form_field {
912
- // width: 18.063rem;
913
- width: 100%;
914
- &:has(.p-multiselect-token) {
915
- .p-multiselect-label {
916
- padding-left: 6px;
917
- }
918
- }
919
- }
920
-
921
- .PhoneInput {
922
- background: #ffffff;
923
- border: 1px solid var(--gray-300);
924
- transition:
925
- background-color 0.2s,
926
- color 0.2s,
927
- border-color 0.2s,
928
- box-shadow 0.2s;
929
- border-radius: var(--border-radius);
930
- box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
931
- padding-top: 10px;
932
- padding-bottom: 10px;
933
- padding-right: 12px;
934
- padding-left: 0px;
935
- height: 40px;
936
-
937
- :focus-visible {
938
- outline: none;
939
- }
940
-
941
- &:focus-within {
942
- outline: 0 none;
943
- outline-offset: 0;
944
- box-shadow:
945
- 0px 1px 2px rgba(16, 24, 40, 0.05),
946
- 0px 0px 0px 2px var(--primary-100);
947
- border-radius: var(--border-radius);
948
- border: 1px solid var(--primary-300);
949
- }
950
-
951
- .PhoneInputInput {
952
- border: none;
953
- }
954
- }
955
-
956
- .PhoneInputCountry {
957
- .PhoneInputCountryIcon--border {
958
- box-shadow: none;
959
- background-color: #ffffff;
960
- }
961
-
962
- .PhoneInputCountryIconImg {
963
- width: 20px;
964
- height: 20px;
965
- object-fit: cover;
966
- border-radius: 100%;
967
- position: absolute;
968
- top: 0;
969
- }
970
- }
971
-
972
- .phoneNumberClass {
973
- margin-left: 14.5rem;
974
- }
975
-
976
- #customCountryDropDown {
977
- .p-dropdown {
978
- border: none;
979
- box-shadow: none;
980
- background: none;
981
- padding: 0;
982
-
983
- .p-dropdown-label {
984
- padding: 0;
985
- padding-right: 4px;
986
- }
987
-
988
- .p-dropdown-trigger {
989
- padding-top: 20px;
990
- }
991
-
992
- .p-dropdown-trigger[aria-expanded="true"] {
993
- padding-bottom: 20px;
994
- }
995
- }
996
- }
997
-
998
- .customNumberField {
999
- .p-inputnumber-input {
1000
- padding-left: 24px;
1001
- }
1002
- }
1003
-
1004
- .text-editor {
1005
- button {
1006
- &::after {
1007
- content: none !important;
1008
- }
1009
- }
1010
- }
1011
-
1012
- button#formatULOptions-1:hover::before,
1013
- button#formatULOptions-1.fr-btn-hover::before,
1014
- button#formatULOptions-1.fr-active::before,
1015
- button#formatOLOptions-1:hover::before,
1016
- button#formatOLOptions-1.fr-btn-hover::before,
1017
- button#formatOLOptions-1.fr-active::before {
1018
- content: "";
1019
- border: 2px solid gray;
1020
- border-left: 0;
1021
- border-top: 0;
1022
- width: 6px;
1023
- height: 6px;
1024
- position: absolute;
1025
- left: 2px;
1026
- top: 39%;
1027
- transform: rotate(45deg);
1028
- }
1029
-
1030
- .fr-toolbar .fr-btn-grp {
1031
- display: inline-block;
1032
- margin: 0 0px 0 12px !important;
1033
- }
1034
-
1035
- .fr-buttons.fr-tabs {
1036
- display: none;
1037
- }
1038
-
1039
- .fr-element {
1040
- padding: 12px !important;
1041
- }
1042
-
1043
- .fr-command.fr-btn
1044
- + .fr-dropdown-menu
1045
- .fr-dropdown-wrapper
1046
- .fr-dropdown-content
1047
- ul.fr-dropdown-list
1048
- li
1049
- a.fr-active {
1050
- background: #f9fafb !important;
1051
- }
1052
-
1053
- button[data-cmd="fontFamily"]:focus {
1054
- box-shadow:
1055
- 0px 1px 2px rgba(16, 24, 40, 0.05),
1056
- 0px 0px 0px 2px var(--primary-100);
1057
- border: 1px solid var(--primary-300) !important;
1058
- background: none !important;
1059
- }
1060
-
1061
- .text-editor {
1062
- border: 1px solid #d0d5dd;
1063
- border-radius: var(--border-radius);
1064
-
1065
- * {
1066
- border: none !important;
1067
- }
1068
- }
1069
-
1070
- .text-editor.focus-text-editor {
1071
- box-shadow:
1072
- 0px 1px 2px rgba(16, 24, 40, 0.05),
1073
- 0px 0px 0px 4px var(--primary-100);
1074
- border: 1px solid var(--primary-300) !important;
1075
- }
1076
-
1077
- .text-editor.p-invalid.focus-text-editor {
1078
- box-shadow:
1079
- 0px 1px 2px rgba(16, 24, 40, 0.05),
1080
- 0px 0px 0px 4px var(--red-100);
1081
- border: 1px solid var(--red-300) !important;
1082
- }
1083
-
1084
- button[data-cmd="fontFamily"] {
1085
- border: 1px solid var(--gray-300) !important;
1086
-
1087
- &::before {
1088
- content: "";
1089
- border: 1.8px solid #0b0c12;
1090
- border-left: 0;
1091
- border-top: 0;
1092
- width: 7px;
1093
- height: 7px;
1094
- position: absolute;
1095
- right: 8px;
1096
- top: 39%;
1097
- transform: rotate(45deg);
1098
- }
1099
- }
1100
-
1101
- .fr-toolbar .fr-btn-grp {
1102
- margin-right: 0px;
1103
- margin-left: 8px;
1104
- }
1105
-
1106
- .fr-wrapper .fr-placeholder {
1107
- color: #667085 !important;
1108
- }
1109
-
1110
- button[aria-expanded="true"] {
1111
- &::before {
1112
- top: 48%;
1113
- transform: rotate(-136deg);
1114
- }
1115
- }
1116
-
1117
- /// Custon treeDropdownSelect style
1118
- .treeNoCollaps {
1119
- li {
1120
- padding-left: 0 !important;
1121
- padding-right: 0 !important;
1122
- }
1123
-
1124
- .p-tree-toggler {
1125
- display: none;
1126
- }
1127
-
1128
- .treeBadge {
1129
- background: var(--Gray-100, #f2f4f7) !important;
1130
- }
1131
-
1132
- .p-treenode-content:hover {
1133
- background: var(--Primary-25, #f5f6fd) !important;
1134
- }
1135
-
1136
- .p-treenode-content:hover .treeItem,
1137
- .p-treenode-content:focus .treeItem {
1138
- color: var(--primary-400);
1139
-
1140
- .treeBadge {
1141
- color: var(--Primary-400, #243dc6) !important;
1142
- background: var(--Primary-50, #e2e5fa) !important;
1143
- }
1144
- }
1145
-
1146
- .p-treenode-content:hover svg path,
1147
- .p-treenode-content:focus svg path {
1148
- stroke: var(--primary-400) !important;
1149
- }
1150
-
1151
- .p-treenode-content:focus {
1152
- box-shadow: none !important;
1153
- outline: none !important;
1154
- background: var(--Primary-25, #f5f6fd) !important;
1155
-
1156
- .treeBadge {
1157
- color: var(--Primary-400, #243dc6) !important;
1158
- background: var(--Primary-50, #e2e5fa) !important;
1159
- }
1160
- }
1161
- }
1162
-
1163
- /// Custon treeDropdownSelect style end /////////////////
1164
-
1165
- /////// Custom list_box_dropdown ///////////
1166
-
1167
- .icon-30x30 {
1168
- height: 30px !important;
1169
- width: 30px !important;
1170
- }
1171
-
1172
- .icon-38x38 {
1173
- height: 38px !important;
1174
- width: 38px !important;
1175
- display: flex;
1176
- justify-content: center;
1177
- align-items: center;
1178
- }
1179
-
1180
- .icon-40x40 {
1181
- height: 40px !important;
1182
- width: 40px !important;
1183
- display: flex;
1184
- justify-content: center;
1185
- align-items: center;
1186
- &.feature-hover {
1187
- &:hover {
1188
- svg {
1189
- path {
1190
- stroke: var(--primary-400);
1191
- }
1192
- }
1193
- }
1194
- }
1195
- }
1196
-
1197
- .p-button.sc_list_box_btn {
1198
- height: auto;
1199
- padding: 4px 8px;
1200
- border-radius: var(--border-radius);
1201
- color: var(--primary-400);
1202
- background-color: transparent;
1203
- svg {
1204
- path {
1205
- stroke: var(--primary-400);
1206
- }
1207
- }
1208
- &:enabled {
1209
- &:hover {
1210
- background-color: var(--primary-25);
1211
- border-radius: var(--border-radius);
1212
- color: var(--primary-400);
1213
- svg {
1214
- path {
1215
- stroke: var(--primary-400);
1216
- }
1217
- }
1218
- }
1219
- }
1220
- }
1221
-
1222
- .p-button.list_box_btn {
1223
- font-weight: 600;
1224
- border-radius: var(--border-radius);
1225
- display: flex;
1226
- align-items: center;
1227
- padding: 8px 16px;
1228
- cursor: pointer;
1229
- font-size: 14px;
1230
- padding-inline: 6px 10px !important;
1231
- color: var(--primary-400);
1232
- background: transparent;
1233
-
1234
- &:not(.section_btn) {
1235
- height: 28px;
1236
- }
1237
- &.section_btn {
1238
- padding: 6px 10px 6px 6px;
1239
- }
1240
- &:hover {
1241
- background-color: var(--primary-25);
1242
- color: var(--primary-700);
1243
- svg {
1244
- path {
1245
- stroke: var(--primary-700);
1246
- }
1247
- }
1248
- }
1249
- &:has(svg) {
1250
- display: flex;
1251
- align-items: center;
1252
- gap: 4px;
1253
- }
1254
- svg {
1255
- path {
1256
- stroke: var(--primary-400);
1257
- }
1258
- }
1259
- }
1260
-
1261
- .p-button.data_label {
1262
- color: var(--gray-600);
1263
- background-color: transparent;
1264
- display: flex;
1265
- gap: 4px;
1266
- svg {
1267
- path {
1268
- stroke: var(--gray-700);
1269
- }
1270
- }
1271
-
1272
- &:hover {
1273
- background-color: var(--gray-200);
1274
- color: var(--gray-700);
1275
- }
1276
- }
1277
-
1278
- .list_box_chips {
1279
- display: flex;
1280
- flex-wrap: wrap;
1281
- align-items: center;
1282
- list-style: none;
1283
- margin: 0;
1284
- padding: 0;
1285
- gap: 8px;
1286
-
1287
- .list_box_chip {
1288
- padding: 3px 4px 3px 8px;
1289
- border: 1px solid var(--gray-200);
1290
- border-radius: var(--border-radius);
1291
- color: var(--gray-700);
1292
- display: flex;
1293
- align-items: center;
1294
- font-size: 14px;
1295
- gap: 4px;
1296
- svg {
1297
- width: 15px;
1298
- height: 15px;
1299
- path {
1300
- stroke: var(--gray-400);
1301
- }
1302
- }
1303
- &:hover {
1304
- // border: 1px solid var(--gray-300);
1305
- // background-color: var(--primary-25);
1306
- svg {
1307
- transform: scale(1.1);
1308
- cursor: pointer;
1309
- path {
1310
- stroke: var(--gray-700);
1311
- }
1312
- }
1313
- }
1314
- }
1315
- }
1316
-
1317
- .listbox_label {
1318
- display: -webkit-box;
1319
- -webkit-box-orient: vertical;
1320
- -webkit-line-clamp: 1;
1321
- white-space: normal;
1322
- }
1323
-
1324
- .list_box_dropdown {
1325
- .p-listbox-header {
1326
- padding: 12px !important;
1327
- border-top: 1px solid var(--gray-200);
1328
- }
1329
-
1330
- ul.p-listbox-list {
1331
- padding: 6px;
1332
-
1333
- li {
1334
- margin: 4px 0 !important;
1335
- border-radius: 6px !important;
1336
- padding: 8px 14px !important;
1337
-
1338
- .item_content {
1339
- max-width: 80%;
1340
- white-space: nowrap;
1341
- text-overflow: ellipsis;
1342
- overflow: hidden;
1343
- // width: 100%;
1344
- }
1345
-
1346
- .item_icon {
1347
- display: none;
1348
- }
1349
-
1350
- &:hover {
1351
- background-color: var(--gray-50) !important;
1352
- }
1353
-
1354
- &:focus {
1355
- box-shadow: none !important;
1356
- }
1357
- }
1358
-
1359
- .p-highlight {
1360
- background: var(--Primary-25);
1361
- color: #162578 !important;
1362
-
1363
- .item_icon {
1364
- display: block;
1365
- }
1366
- }
1367
- }
1368
- }
1369
-
1370
- /////// Custom list_box_dropdown ///////////
1371
-
1372
- //ScMulti Select//
1373
- .sc_multiSelect {
1374
- height: 40px !important;
1375
-
1376
- .p-multiselect-clear-icon {
1377
- right: 42px !important;
1378
- }
1379
-
1380
- .p-multiselect-label {
1381
- line-height: 38px !important;
1382
- }
1383
-
1384
- // .p-multiselect-token-label {
1385
- // width: 60px;
1386
- // overflow: hidden;
1387
- // text-overflow: ellipsis;
1388
- // }
1389
- }
1390
-
1391
- .sc_multiSelect.noShowSelectedCount {
1392
- .p-multiselect-label {
1393
- padding-right: 0px;
1394
- }
1395
- }
1396
-
1397
- // .sc_multiSelect.hideChipremoveIcon {
1398
- // .p-multiselect-token {
1399
- // svg {
1400
- // display: none;
1401
- // }
1402
- // }
1403
- // }
1404
-
1405
- .sc_icon_hover {
1406
- &:hover {
1407
- svg {
1408
- transform: scale(1.1);
1409
- transition: 0.3s all;
1410
- }
1411
- }
1412
- }
1413
-
1414
- .hide-focus {
1415
- &:not(.p-disabled) {
1416
- &.p-focus {
1417
- box-shadow: var(--box-shadow-none);
1418
- border: 1px solid var(--gray-300);
1419
- }
1420
- }
1421
-
1422
- &:enabled {
1423
- &:focus {
1424
- box-shadow: var(--box-shadow-none);
1425
- border: 1px solid var(--gray-300);
1426
- }
1427
- }
1428
- }
1429
-
1430
- .sc_multiSelect_panel {
1431
- .p-multiselect-items {
1432
- padding: 4px !important;
1433
-
1434
- .p-multiselect-item,
1435
- .p-highlight {
1436
- span {
1437
- padding-right: 28px;
1438
- }
1439
- }
1440
-
1441
- .p-highlight::after {
1442
- content: "";
1443
- width: 12px;
1444
- height: 6px;
1445
- border: solid #162578;
1446
- border-width: 1.9px;
1447
- border-top: 0;
1448
- border-right: 0;
1449
- transform: rotate(-45deg);
1450
- margin-right: 8px;
1451
- position: absolute;
1452
- right: 4px;
1453
- }
1454
- }
1455
- }
1456
-
1457
- //////////////////////////////////////////////
1458
- ///
1459
-
1460
- .condition_menu {
1461
- width: 648px !important;
1462
- }
1463
-
1464
- .condition_attribute_list_sect {
1465
- height: 215px;
1466
-
1467
- .attr_chip {
1468
- transition: all 0.1s;
1469
-
1470
- &:hover {
1471
- transform: scale(1.05);
1472
- // transition: all 0.2s;
1473
- }
1474
- }
1475
- }
1476
-
1477
- .condition_configure {
1478
- height: 224px;
1479
- outline: none;
1480
- line-height: 30px;
1481
- letter-spacing: 2px;
1482
-
1483
- .formulaChipElm {
1484
- line-height: 24px;
1485
- letter-spacing: 0px;
1486
- }
1487
-
1488
- .chip-h-25 {
1489
- height: 25px;
1490
- display: flex;
1491
- align-items: center;
1492
- justify-content: center;
1493
- }
1494
-
1495
- .formulaSpanElm {
1496
- font-size: 16px;
1497
- margin: 2px 0;
1498
- float: left;
1499
- min-width: 6px;
1500
- height: 32px;
1501
- position: relative;
1502
- top: -4px;
1503
-
1504
- &:first-child {
1505
- display: none;
1506
- }
1507
- }
1508
- }
1509
-
1510
- .operator_divider {
1511
- width: 1px;
1512
- height: 15px;
1513
- display: inline-block;
1514
- background-color: var(--gray-300);
1515
- }
1516
-
1517
- .formula_condition_dropdown {
1518
- box-shadow: none !important;
1519
-
1520
- .p-dropdown-label {
1521
- display: block !important;
1522
- }
1523
- }
1524
-
1525
- .p-button.p-button-link:enabled:hover {
1526
- color: var(--primary-400) !important;
1527
- }
1528
-
1529
- .p-button.p-button-text:enabled:hover {
1530
- background: var(--primary-50);
1531
- }
1532
-
1533
- /* AG GRID - styles */
1534
- @import url("./assets/theme.css");
1535
- @import url("./assets/sccoreui.css");
1536
- @import url("./assets/sccoreicons.css");
1537
- @import url("./assets/flex.css");
1538
- @import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap");
1539
-
1540
- // variables
1541
-
1542
- @font-face {
1543
- font-family: "RobotoBold";
1544
- src: url("./assets/fonts/Roboto-Bold.ttf") format("truetype");
1545
- font-weight: 700;
1546
- font-style: italic;
1547
- }
1548
-
1549
- @font-face {
1550
- font-family: "RobotoMedium";
1551
- src: url("./assets/fonts/Roboto-Medium.ttf") format("truetype");
1552
- font-weight: normal;
1553
- font-style: normal;
1554
- }
1555
-
1556
- @font-face {
1557
- font-family: "RobotoItalic";
1558
- src: url("./assets/fonts/Roboto-Italic.ttf") format("truetype");
1559
- font-weight: normal;
1560
- font-style: normal;
1561
- }
1562
-
1563
- @font-face {
1564
- font-family: "RobotoRegular";
1565
- src: url("./assets/fonts/Roboto-Regular.ttf") format("truetype");
1566
- font-weight: normal;
1567
- font-style: normal;
1568
- }
1569
-
1570
- :root {
1571
- --fw-600: 600;
1572
- --fw-400: 400;
1573
- --fs-24: 24px;
1574
- --fs-18: 18px;
1575
- --fs-16: 16px;
1576
- --lh: 24px;
1577
- --fs-14: 14px;
1578
- --grey-bg: #101828;
1579
- --border-none: border-none;
1580
- }
1581
-
1582
- // height and width utility classes
1583
-
1584
- .h-40 {
1585
- height: 40px;
1586
- }
1587
-
1588
- // @font-face {
1589
- // font-family: "Lato";
1590
- // }
1591
-
1592
- // @font-face {
1593
- // font-family: "Lato";
1594
- // font-weight: 600;
1595
- // src: url("./assets/fonts/Lato-Regular.ttf") format("truetype");
1596
- // }
1597
-
1598
- body {
1599
- font-family: "Lato", sans-serif;
1600
- -webkit-font-smoothing: antialiased;
1601
- -moz-osx-font-smoothing: grayscale;
1602
- line-height: 20px;
1603
- padding: 0;
1604
- margin: 0;
1605
- color: var(--gray-700);
1606
- }
1607
-
1608
- code {
1609
- font-family: "Lato", sans-serif;
1610
- }
1611
-
1612
- // h1 {
1613
- // font-size: var(--fs-24);
1614
- // font-weight: var(--fw-600);
1615
- // }
1616
-
1617
- // h2 {
1618
- // font-size: var(--fs-18);
1619
- // font-weight: var(--fw-600);
1620
- // }
1621
-
1622
- // h3 {
1623
- // font-size: var(--fs-16);
1624
- // font-weight: var(--fw-400);
1625
- // }
1626
-
1627
- // ============= custom progress steps =============== //
1628
-
1629
- .progress-container {
1630
- isolation: isolate;
1631
-
1632
- &::before {
1633
- content: "";
1634
- background-color: var(--gray-200);
1635
- position: absolute;
1636
- z-index: -1;
1637
- }
1638
-
1639
- &.horizontal::before {
1640
- height: 2px;
1641
- width: 100%;
1642
- top: 11%;
1643
- }
1644
-
1645
- &.vertical::before {
1646
- height: 100%;
1647
- width: 2px;
1648
- left: 5%;
1649
- top: 0;
1650
- }
1651
- }
1652
-
1653
- .progressbar {
1654
- z-index: -1;
1655
- transition: all 0.6s ease;
1656
-
1657
- &.horizontal {
1658
- left: 0;
1659
- height: 2px;
1660
- top: 11%;
1661
- }
1662
-
1663
- &.vertical {
1664
- width: 2px;
1665
- left: 5%;
1666
- top: 0;
1667
- }
1668
- }
1669
-
1670
- .progress-step-item {
1671
- &.horizontal {
1672
- &:nth-of-type(1) {
1673
- transform: translateX(-50%);
1674
- }
1675
-
1676
- &:last-child {
1677
- transform: translateX(50%);
1678
- }
1679
- }
1680
-
1681
- &.vertical {
1682
- transform: translateY(50%);
1683
-
1684
- &:nth-of-type(1) {
1685
- transform: translateY(-5%);
1686
- }
1687
-
1688
- &:last-child {
1689
- transform: translateY(100%);
1690
- }
1691
- }
1692
- }
1693
-
1694
- // CUSTOM multiselect style started
1695
- .Multi_select_dropdown_panel {
1696
- .p-multiselect-header {
1697
- display: block;
1698
- padding: 6px;
1699
-
1700
- .p-checkbox,
1701
- .p-multiselect-close {
1702
- display: none;
1703
- }
1704
-
1705
- .p-multiselect-filter-container {
1706
- .p-inputtext {
1707
- padding-right: 12px;
1708
- padding-left: 1.75rem;
1709
- }
1710
-
1711
- .p-multiselect-filter-icon {
1712
- left: 0.55rem;
1713
- }
1714
- }
1715
- }
1716
-
1717
- .p-multiselect-items-wrapper {
1718
- .p-multiselect-item.p-highlight {
1719
- &::after {
1720
- content: "";
1721
- width: 10px;
1722
- height: 4px;
1723
- border-left: 1px solid #132067;
1724
- border-bottom: 1px solid #132067;
1725
- transform: rotate(-45deg);
1726
- position: absolute;
1727
- right: 10px;
1728
- top: 14px;
1729
- }
1730
- }
1731
- }
1732
- }
1733
-
1734
- .bulk-action-feature {
1735
- .p-overlaypanel-content {
1736
- padding: 0 !important;
1737
- border-radius: 6px !important;
1738
- }
1739
- }
1740
-
1741
- .column_group_overlay {
1742
- overflow: hidden;
1743
-
1744
- .p-overlaypanel-content {
1745
- padding: 0px !important;
1746
- }
1747
- }
1748
-
1749
- .list-items {
1750
- padding: 4px;
1751
- border: 0;
1752
-
1753
- .p-treenode-content {
1754
- padding: 2px !important;
1755
- }
1756
-
1757
- .p-treenode-droppoint {
1758
- height: 2px;
1759
- }
1760
- }
1761
-
1762
- .sc_custom_multiselect {
1763
- width: max-content;
1764
-
1765
- * {
1766
- color: #344054;
1767
- font-weight: 700;
1768
- }
1769
-
1770
- .left_section_item {
1771
- left: 1rem;
1772
- }
1773
-
1774
- .right_section_item {
1775
- right: 1rem;
1776
- }
1777
-
1778
- .selected_moreThan_one {
1779
- right: 40px;
1780
- }
1781
-
1782
- .p-inputwrapper-filled {
1783
- background: #f5f6fd;
1784
- border: 1px solid #8190e8;
1785
- }
1786
-
1787
- .p-multiselect {
1788
- max-width: 100%;
1789
- width: max-content !important;
1790
-
1791
- .p-multiselect-label {
1792
- // padding: 0;
1793
- padding-left: 12px !important;
1794
- max-width: 100%;
1795
-
1796
- .p-multiselect-token {
1797
- border: none;
1798
- width: 100%;
1799
- min-width: 100%;
1800
- background: none;
1801
- padding-left: 0;
1802
- line-height: 40px;
1803
-
1804
- .p-multiselect-token-label {
1805
- width: 55px;
1806
- white-space: nowrap;
1807
- overflow: hidden;
1808
- text-overflow: ellipsis;
1809
- height: 100%;
1810
- // text-align: center;
1811
- }
1812
- }
1813
-
1814
- svg {
1815
- display: none;
1816
- }
1817
- }
1818
- }
1819
-
1820
- .p-multiselect-trigger {
1821
- width: 2rem;
1822
-
1823
- // svg {
1824
- // display: none;
1825
- // }
1826
- }
1827
- }
1828
-
1829
- .currency_with_input {
1830
- display: flex;
1831
- border: 1px solid var(--gray-300);
1832
- border-radius: 6px;
1833
- input {
1834
- border: 0px !important;
1835
- padding-inline: 0;
1836
- &:focus {
1837
- outline: none !important;
1838
- border: none !important;
1839
- box-shadow: none !important;
1840
- }
1841
- }
1842
- .p-inputnumber .p-inputnumber-input {
1843
- padding-inline: 0;
1844
- }
1845
- &:focus-within {
1846
- border: 1px solid var(--primary-300);
1847
- outline: 2px solid var(--primary-50);
1848
- }
1849
- }
1850
-
1851
- .text-truncate {
1852
- white-space: nowrap;
1853
- overflow: hidden;
1854
- text-overflow: ellipsis;
1855
- line-height: 20px;
1856
- }
1857
-
1858
- // .no_icon {
1859
- // .p-multiselect-label {
1860
- // padding-left: 16px !important;
1861
- // }
1862
- // }
1863
-
1864
- .status_dropdown {
1865
- .p-multiselect {
1866
- .p-multiselect-label {
1867
- padding-left: 34px;
1868
- height: 100%;
1869
- }
1870
- }
1871
-
1872
- .select_status_prv {
1873
- ul {
1874
- li {
1875
- width: 10px;
1876
- height: 10px;
1877
- border-radius: var(--border-radius);
1878
- position: absolute;
1879
- transform: translateY(-50%);
1880
- }
1881
-
1882
- li.all {
1883
- background: #667085;
1884
- }
1885
-
1886
- li:nth-child(2) {
1887
- left: 6px;
1888
- }
1889
-
1890
- li:nth-child(3) {
1891
- left: 12px;
1892
- }
1893
- }
1894
- }
1895
- }
1896
-
1897
- .multi-pl-32 {
1898
- padding-left: 40px;
1899
- border: 1px solid red;
1900
- }
1901
-
1902
- .selected_multile {
1903
- .p-multiselect-token-label {
1904
- padding-right: 18px;
1905
- }
1906
- }
1907
-
1908
- .selected_multile.selected_num_2 {
1909
- .p-multiselect .p-multiselect-label {
1910
- padding-left: 12px;
1911
- height: 100%;
1912
- }
1913
- }
1914
-
1915
- .selected_multile.selected_num_3,
1916
- .selected_multile.moreThanThreeItems {
1917
- .p-multiselect .p-multiselect-label {
1918
- padding-left: 12px;
1919
- }
1920
- }
1921
-
1922
- .mutli_select_status {
1923
- .p-multiselect-label {
1924
- padding-left: 12px !important;
1925
- height: 100%;
1926
- }
1927
- }
1928
-
1929
- .status_dropdown.selected_multile {
1930
- .left_section_item {
1931
- max-width: 28px;
1932
- overflow: hidden;
1933
- height: 11px;
1934
- width: -webkit-fill-available;
1935
- align-items: center;
1936
- display: flex;
1937
- }
1938
- }
1939
-
1940
- .status_dropdown_item.Active::before {
1941
- background: #12b76a;
1942
- }
1943
-
1944
- .status_dropdown_item.Inactive::before {
1945
- background: #f04438;
1946
- }
1947
-
1948
- .status_dropdown_item.Draft::before {
1949
- background: #162578;
1950
- }
1951
-
1952
- .status_dropdown_item {
1953
- .status_dot {
1954
- width: 10px;
1955
- height: 10px;
1956
- border-radius: 50px;
1957
- position: absolute;
1958
- transform: translateY(-50%);
1959
- top: 50%;
1960
- left: 10px;
1961
- }
1962
- }
1963
-
1964
- .custom_date_picker_sec {
1965
- .custom_date_picker {
1966
- .p-inputtext {
1967
- padding-right: 16px;
1968
- width: 130px;
1969
- }
1970
-
1971
- .p-inputtext {
1972
- &:enabled {
1973
- &:focus {
1974
- box-shadow: none !important;
1975
- border-color: #d0d5dd !important;
1976
- }
1977
- }
1978
- }
1979
-
1980
- .p-datepicker-trigger {
1981
- &:focus {
1982
- box-shadow: none !important;
1983
- border-color: #d0d5dd !important;
1984
- }
1985
- }
1986
- }
1987
-
1988
- .custom_date_picker.multiple {
1989
- .p-inputtext {
1990
- width: 236px;
1991
- }
1992
- }
1993
-
1994
- .clear_icon_sec {
1995
- right: 32px;
1996
- }
1997
- }
1998
-
1999
- .p-datepicker .p-datepicker-header .p-datepicker-title {
2000
- display: inline-flex;
2001
- flex-wrap: nowrap;
2002
- align-items: center;
2003
- white-space: nowrap;
2004
- }
2005
-
2006
- .p-datepicker .p-datepicker-header .p-datepicker-title .date_nav_dropdown {
2007
- min-width: 0 !important;
2008
- background: transparent;
2009
- border: none;
2010
- box-shadow: none;
2011
- border-radius: 4px;
2012
-
2013
- &:hover,
2014
- &:not(.p-disabled):hover {
2015
- background: #f3f4f6;
2016
- border: none;
2017
- }
2018
-
2019
- &:not(.p-disabled).p-focus {
2020
- box-shadow: none;
2021
- border: none;
2022
- }
2023
-
2024
- .p-dropdown-label {
2025
- padding: 2px 6px;
2026
- font-size: 1rem;
2027
- font-weight: 600;
2028
- color: #495057;
2029
- line-height: 1.5rem;
2030
- }
2031
-
2032
- .p-dropdown-trigger {
2033
- display: none;
2034
- }
2035
- }
2036
-
2037
- .p-datepicker .p-dropdown-panel,
2038
- .date_nav_dropdown ~ .p-dropdown-panel {
2039
- min-width: 6rem;
2040
-
2041
- .p-dropdown-items .p-dropdown-item {
2042
- display: flex;
2043
- align-items: center;
2044
- justify-content: space-between;
2045
- gap: 0.75rem;
2046
- padding-right: 0.75rem;
2047
- }
2048
- }
2049
-
2050
- .date_filter {
2051
- margin: 0;
2052
- position: absolute;
2053
- top: 0;
2054
- left: 0px;
2055
- background: #fff;
2056
- height: 100%;
2057
- padding: 4px 16px;
2058
-
2059
- li {
2060
- height: 40px;
2061
-
2062
- &:hover {
2063
- background: #f9fafb;
2064
- }
2065
- }
2066
-
2067
- .active {
2068
- background: #f9fafb;
2069
- }
2070
- }
2071
-
2072
- div:has(ul.date_filter) .p-datepicker-group-container {
2073
- padding-left: 116px;
2074
- margin: -8px;
2075
- }
2076
-
2077
- .bottom_date_filters {
2078
- width: calc(100% - 116px);
2079
- border-left: 1px solid #dee2e6;
2080
- }
2081
-
2082
- div:has(ul.date_filter)
2083
- .p-datepicker-group-container
2084
- .p-datepicker
2085
- table
2086
- td
2087
- > span {
2088
- width: 40px;
2089
- height: 40px;
2090
- }
2091
-
2092
- div:has(ul.date_filter) .p-datepicker-group-container .p-datepicker-group {
2093
- width: 328px;
2094
- max-width: 328px;
2095
- padding: 8px 20px !important;
2096
- border: 1px solid #dee2e6;
2097
- border-top: 0;
2098
- }
2099
-
2100
- div:has(ul.date_filter) .p-datepicker-group-container div:nth-child(2) {
2101
- border-right: 0;
2102
- }
2103
-
2104
- div:has(ul.date_filter) .p-datepicker-group-container table td {
2105
- padding: 0;
2106
- }
2107
-
2108
- div:has(ul.date_filter) .p-datepicker-footer {
2109
- margin: -8px;
2110
- }
2111
-
2112
- .panel_status {
2113
- .p-multiselect-filter-container {
2114
- display: none;
2115
- }
2116
-
2117
- .p-multiselect-header {
2118
- padding: 0 !important;
2119
- border-bottom: 0;
2120
- }
2121
- }
2122
-
2123
- .p-multiselect-panel {
2124
- .p-multiselect-items {
2125
- padding: 4px;
2126
- min-width: 140px !important;
2127
- }
2128
- }
2129
-
2130
- .p-multiselect {
2131
- .p-multiselect-header {
2132
- .p-multiselect-close {
2133
- display: none !important;
2134
- }
2135
- }
2136
- .p-multiselect-items {
2137
- .p-multiselect-item {
2138
- border-radius: 4px !important;
2139
- }
2140
- }
2141
- }
2142
- .grid-global-search {
2143
- width: 21rem;
2144
- .p-input-icon-left {
2145
- width: 100%;
2146
- }
2147
- .p-inputtext {
2148
- width: 100%;
2149
- }
2150
- }
2151
-
2152
- .panel_withIcon.p-multiselect-panel {
2153
- .p-multiselect-items {
2154
- .p-multiselect-item {
2155
- padding: 0 10px;
2156
- }
2157
- }
2158
- }
2159
-
2160
- .Multi_select_dropdown_panel.hidePanelHeader {
2161
- .p-multiselect-header {
2162
- display: none;
2163
- }
2164
- }
2165
-
2166
- .errorField {
2167
- color: var(--red-500);
2168
- max-height: 50px;
2169
- padding-block: 2px 6px;
2170
- }
2171
-
2172
- .full_form_field {
2173
- // width: 37.125rem;
2174
- }
2175
-
2176
- .form_field {
2177
- // width: 18.063rem;
2178
- }
2179
-
2180
- .PhoneInput {
2181
- background: #ffffff;
2182
- border: 1px solid var(--gray-300);
2183
- transition:
2184
- background-color 0.2s,
2185
- color 0.2s,
2186
- border-color 0.2s,
2187
- box-shadow 0.2s;
2188
- border-radius: var(--border-radius);
2189
- box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
2190
- padding-top: 10px;
2191
- padding-bottom: 10px;
2192
- padding-right: 12px;
2193
- padding-left: 0px;
2194
- height: 40px;
2195
-
2196
- :focus-visible {
2197
- outline: none;
2198
- }
2199
-
2200
- &:focus-within {
2201
- outline: 0 none;
2202
- outline-offset: 0;
2203
- box-shadow:
2204
- 0px 1px 2px rgba(16, 24, 40, 0.05),
2205
- 0px 0px 0px 2px var(--primary-100);
2206
- border-radius: var(--border-radius);
2207
- border: 1px solid var(--primary-300);
2208
- }
2209
-
2210
- .PhoneInputInput {
2211
- border: none;
2212
- }
2213
- }
2214
-
2215
- .PhoneInputCountry {
2216
- .PhoneInputCountryIcon--border {
2217
- box-shadow: none;
2218
- background-color: #ffffff;
2219
- }
2220
-
2221
- .PhoneInputCountryIconImg {
2222
- width: 20px;
2223
- height: 20px;
2224
- object-fit: cover;
2225
- border-radius: 100%;
2226
- position: absolute;
2227
- top: 0;
2228
- }
2229
- }
2230
-
2231
- .phoneNumberClass {
2232
- margin-left: 14.5rem;
2233
- }
2234
-
2235
- #customCountryDropDown {
2236
- .p-dropdown {
2237
- border: none;
2238
- box-shadow: none;
2239
- background: none;
2240
- padding: 0;
2241
-
2242
- .p-dropdown-label {
2243
- padding: 0;
2244
- padding-right: 4px;
2245
- }
2246
-
2247
- .p-dropdown-trigger {
2248
- padding-top: 20px;
2249
- }
2250
-
2251
- .p-dropdown-trigger[aria-expanded="true"] {
2252
- padding-bottom: 20px;
2253
- }
2254
- }
2255
- }
2256
-
2257
- .customNumberField {
2258
- .p-inputnumber-input {
2259
- padding-left: 24px;
2260
- }
2261
- }
2262
-
2263
- .text-editor {
2264
- button {
2265
- &::after {
2266
- content: none !important;
2267
- }
2268
- }
2269
- }
2270
-
2271
- button#formatULOptions-1:hover::before,
2272
- button#formatULOptions-1.fr-btn-hover::before,
2273
- button#formatULOptions-1.fr-active::before,
2274
- button#formatOLOptions-1:hover::before,
2275
- button#formatOLOptions-1.fr-btn-hover::before,
2276
- button#formatOLOptions-1.fr-active::before {
2277
- content: "";
2278
- border: 2px solid gray;
2279
- border-left: 0;
2280
- border-top: 0;
2281
- width: 6px;
2282
- height: 6px;
2283
- position: absolute;
2284
- left: 2px;
2285
- top: 39%;
2286
- transform: rotate(45deg);
2287
- }
2288
-
2289
- .fr-toolbar .fr-btn-grp {
2290
- display: inline-block;
2291
- margin: 0 0px 0 12px !important;
2292
- }
2293
-
2294
- .fr-buttons.fr-tabs {
2295
- display: none;
2296
- }
2297
-
2298
- .fr-element {
2299
- padding: 12px !important;
2300
- }
2301
-
2302
- .fr-command.fr-btn
2303
- + .fr-dropdown-menu
2304
- .fr-dropdown-wrapper
2305
- .fr-dropdown-content
2306
- ul.fr-dropdown-list
2307
- li
2308
- a.fr-active {
2309
- background: #f9fafb !important;
2310
- }
2311
-
2312
- button[data-cmd="fontFamily"]:focus {
2313
- box-shadow:
2314
- 0px 1px 2px rgba(16, 24, 40, 0.05),
2315
- 0px 0px 0px 2px var(--primary-100);
2316
- border: 1px solid var(--primary-300) !important;
2317
- background: none !important;
2318
- }
2319
-
2320
- .text-editor {
2321
- border: 1px solid #d0d5dd;
2322
- border-radius: var(--border-radius);
2323
-
2324
- * {
2325
- border: none !important;
2326
- }
2327
- }
2328
-
2329
- .text-editor.focus-text-editor {
2330
- box-shadow:
2331
- 0px 1px 2px rgba(16, 24, 40, 0.05),
2332
- 0px 0px 0px 4px var(--primary-100);
2333
- border: 1px solid var(--primary-300) !important;
2334
- }
2335
-
2336
- .text-editor.p-invalid.focus-text-editor {
2337
- box-shadow:
2338
- 0px 1px 2px rgba(16, 24, 40, 0.05),
2339
- 0px 0px 0px 4px var(--red-100);
2340
- border: 1px solid var(--red-300) !important;
2341
- }
2342
-
2343
- button[data-cmd="fontFamily"] {
2344
- border: 1px solid var(--gray-300) !important;
2345
-
2346
- &::before {
2347
- content: "";
2348
- border: 1.8px solid #0b0c12;
2349
- border-left: 0;
2350
- border-top: 0;
2351
- width: 7px;
2352
- height: 7px;
2353
- position: absolute;
2354
- right: 8px;
2355
- top: 39%;
2356
- transform: rotate(45deg);
2357
- }
2358
- }
2359
-
2360
- .fr-toolbar .fr-btn-grp {
2361
- margin-right: 0px;
2362
- margin-left: 8px;
2363
- }
2364
-
2365
- .fr-wrapper .fr-placeholder {
2366
- color: #667085 !important;
2367
- }
2368
-
2369
- button[aria-expanded="true"] {
2370
- &::before {
2371
- top: 48%;
2372
- transform: rotate(-136deg);
2373
- }
2374
- }
2375
-
2376
- /// Custon treeDropdownSelect style
2377
- .treeNoCollaps {
2378
- li {
2379
- padding-left: 0 !important;
2380
- padding-right: 0 !important;
2381
- }
2382
-
2383
- .p-tree-toggler {
2384
- display: none;
2385
- }
2386
-
2387
- .treeBadge {
2388
- background: var(--Gray-100, #f2f4f7) !important;
2389
- }
2390
-
2391
- .p-treenode-content:hover {
2392
- background: var(--Primary-25, #f5f6fd) !important;
2393
- }
2394
-
2395
- .p-treenode-content:hover .treeItem,
2396
- .p-treenode-content:focus .treeItem {
2397
- color: var(--primary-400);
2398
-
2399
- .treeBadge {
2400
- color: var(--Primary-400, #243dc6) !important;
2401
- background: var(--Primary-50, #e2e5fa) !important;
2402
- }
2403
- }
2404
-
2405
- .p-treenode-content:hover svg path,
2406
- .p-treenode-content:focus svg path {
2407
- stroke: var(--primary-400) !important;
2408
- }
2409
-
2410
- .p-treenode-content:focus {
2411
- box-shadow: none !important;
2412
- outline: none !important;
2413
- background: var(--Primary-25, #f5f6fd) !important;
2414
-
2415
- .treeBadge {
2416
- color: var(--Primary-400, #243dc6) !important;
2417
- background: var(--Primary-50, #e2e5fa) !important;
2418
- }
2419
- }
2420
- }
2421
-
2422
- /// Custon treeDropdownSelect style end /////////////////
2423
-
2424
- /////// Custom list_box_dropdown ///////////
2425
- .list_box_dropdown {
2426
- .p-listbox-header {
2427
- padding: 12px !important;
2428
- border-top: 1px solid var(--gray-200);
2429
- }
2430
-
2431
- ul.p-listbox-list {
2432
- padding: 6px;
2433
-
2434
- li {
2435
- margin: 4px 0 !important;
2436
- border-radius: 6px !important;
2437
- padding: 8px 14px !important;
2438
-
2439
- .item_content {
2440
- max-width: 80%;
2441
- white-space: nowrap;
2442
- text-overflow: ellipsis;
2443
- overflow: hidden;
2444
- // width: 100%;
2445
- }
2446
-
2447
- .item_icon {
2448
- display: none;
2449
- }
2450
-
2451
- &:hover {
2452
- background-color: var(--gray-50) !important;
2453
- }
2454
-
2455
- &:focus {
2456
- box-shadow: none !important;
2457
- }
2458
- }
2459
-
2460
- .p-highlight {
2461
- background: var(--Primary-25);
2462
- color: #162578 !important;
2463
-
2464
- .item_icon {
2465
- display: block;
2466
- }
2467
- }
2468
- }
2469
-
2470
- .selected-none {
2471
- ul {
2472
- li.p-highlight {
2473
- display: none !important;
2474
- }
2475
- }
2476
- }
2477
- }
2478
-
2479
- /////// Custom list_box_dropdown ///////////
2480
-
2481
- //ScMulti Select//
2482
- .sc_multiSelect {
2483
- height: 40px !important;
2484
-
2485
- .p-multiselect-clear-icon {
2486
- right: 42px !important;
2487
- }
2488
-
2489
- .p-multiselect-label {
2490
- line-height: 38px !important;
2491
- height: 100%;
2492
- }
2493
- }
2494
-
2495
- .sc_multiSelect.noShowSelectedCount {
2496
- .p-multiselect-label {
2497
- padding-right: 0px;
2498
- }
2499
- }
2500
-
2501
- // .sc_multiSelect.hideChipremoveIcon {
2502
- // .p-multiselect-token {
2503
- // svg {
2504
- // display: none;
2505
- // }
2506
- // }
2507
- // }
2508
-
2509
- .sc_multiSelect_panel {
2510
- .p-multiselect-items {
2511
- padding: 4px !important;
2512
-
2513
- .p-multiselect-item,
2514
- .p-highlight {
2515
- span {
2516
- padding-right: 28px;
2517
- }
2518
- }
2519
-
2520
- .p-highlight::after {
2521
- content: "";
2522
- width: 12px;
2523
- height: 6px;
2524
- border: solid #162578;
2525
- border-width: 1.9px;
2526
- border-top: 0;
2527
- border-right: 0;
2528
- transform: rotate(-45deg);
2529
- margin-right: 8px;
2530
- position: absolute;
2531
- right: 4px;
2532
- }
2533
- }
2534
- }
2535
-
2536
- //////////////////////////////////////////////
2537
- ///
2538
-
2539
- .condition_menu {
2540
- width: 648px !important;
2541
- }
2542
-
2543
- .condition_attribute_list_sect {
2544
- height: 215px;
2545
-
2546
- .attr_chip {
2547
- transition: all 0.1s;
2548
-
2549
- &:hover {
2550
- transform: scale(1.05);
2551
- // transition: all 0.2s;
2552
- }
2553
- }
2554
- }
2555
-
2556
- .condition_configure {
2557
- height: 224px;
2558
- outline: none;
2559
- line-height: 30px;
2560
- letter-spacing: 2px;
2561
-
2562
- .formulaChipElm {
2563
- line-height: 24px;
2564
- letter-spacing: 0px;
2565
- margin: 2px;
2566
- float: left;
2567
- }
2568
-
2569
- .formulaSpanElm {
2570
- font-size: 16px;
2571
- margin: 2px 0;
2572
- float: left;
2573
- min-width: 6px;
2574
- height: 32px;
2575
- }
2576
- }
2577
-
2578
- .formula_condition_dropdown {
2579
- box-shadow: none !important;
2580
-
2581
- .p-dropdown-label {
2582
- display: block !important;
2583
- }
2584
- }
2585
-
2586
- .p-button.p-button-link:enabled:hover {
2587
- color: var(--primary-400) !important;
2588
- }
2589
-
2590
- /* AG GRID - styles */
2591
- .ag-grid-container {
2592
- background: #fff !important;
2593
- box-shadow: 0px 0px 1px var(--gray-300) !important;
2594
- overflow: hidden;
2595
- .ag-root-wrapper {
2596
- &.ag-layout-normal {
2597
- border: 0;
2598
- }
2599
- }
2600
- }
2601
-
2602
- .ag-header {
2603
- background: var(--gray-50);
2604
- border-top: 1px solid var(--gray-200) !important;
2605
- border-bottom: 1px solid var(--gray-200) !important;
2606
- }
2607
-
2608
- .ag-root-wrapper {
2609
- border-radius: 0 !important;
2610
- }
2611
-
2612
- .ag-body-horizontal-scroll {
2613
- display: none !important;
2614
- }
2615
-
2616
- .ag-ltr .ag-cell-focus:not(.ag-cell-range-selected):focus-within {
2617
- border: 0;
2618
- border-color: initial;
2619
- }
2620
-
2621
- .ag-ltr .ag-cell {
2622
- display: flex;
2623
- align-items: center;
2624
- }
2625
-
2626
- .ag-grid-container {
2627
- // border: 1px solid var(--gray-200) !important;
2628
- background: #fff !important;
2629
- box-shadow: 0px 0px 1px var(--gray-300);
2630
- }
2631
-
2632
- // .ag-row {
2633
- // border-bottom: 1px solid var(--gray-200);
2634
- // }
2635
-
2636
- .ag-row-odd {
2637
- background-color: var(--gray-25) !important;
2638
- }
2639
-
2640
- .ag-row:focus {
2641
- background-color: var(--gray-100);
2642
- }
2643
-
2644
- /* ErrorBoundary.module.css */
2645
- .errorContainer {
2646
- display: flex;
2647
- flex-direction: column;
2648
- align-items: center;
2649
- justify-content: center;
2650
- padding: 20px;
2651
- margin: auto;
2652
- border-radius: var(--border-radius);
2653
- background-color: var(--red-50);
2654
- width: 100%;
2655
- height: 100%;
2656
- text-align: center;
2657
- }
2658
-
2659
- .error_description {
2660
- // width: 750px;
2661
- }
2662
-
2663
- .rounded_btn {
2664
- padding: 8px 10px !important;
2665
- height: auto;
2666
- border-radius: 6px !important;
2667
- cursor: pointer;
2668
- &:hover {
2669
- background: var(--primary-25);
2670
- }
2671
- }
2672
-
2673
- .ag-grid-container {
2674
- &:has(.web-cards) {
2675
- .grid-header {
2676
- position: sticky;
2677
- top: 0;
2678
- }
2679
- }
2680
- }
2681
-
2682
- .p-button {
2683
- &.p-button-secondary {
2684
- padding: 8px 12px;
2685
- }
2686
- &.p-button-outline {
2687
- padding: 8px 12px;
2688
- }
2689
-
2690
- padding: 8px 12px;
2691
-
2692
- .p-button-label {
2693
- font-weight: 600;
2694
- }
2695
-
2696
- &.p-disabled {
2697
- opacity: 0.2 !important;
2698
- border: 0;
2699
- }
2700
- }
2701
-
2702
- .ag-theme-quartz {
2703
- --ag-active-color: var(--gray-300);
2704
- }
2705
-
2706
- .ag-ltr .ag-header-viewport .ag-header-cell-resize::after {
2707
- background-color: var(--gray-200);
2708
- width: 2px;
2709
- }
2710
-
2711
- .p-dropdown-panel .p-dropdown-items {
2712
- padding-left: 0;
2713
- }
2714
-
2715
- .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
2716
- margin-bottom: 0px;
2717
- }
2718
-
2719
- .column-group {
2720
- padding: 0 !important;
2721
- .p-overlaypanel-content {
2722
- padding: 0 !important;
2723
- .column-header,
2724
- .column-footer {
2725
- padding: 16px;
2726
- }
2727
- }
2728
- }
2729
-
2730
- .w-25 {
2731
- width: 25%;
2732
- }
2733
-
2734
- .lh-44 {
2735
- line-height: 44px;
2736
- }
2737
-
2738
- .lh-40 {
2739
- line-height: 40px;
2740
- }
2741
-
2742
- .br-8 {
2743
- border-radius: 8px;
2744
- }
2745
-
2746
- /* conditions */
2747
-
2748
- .status_select_field {
2749
- .p-dropdown-item {
2750
- height: 40px;
2751
- }
2752
- }
2753
- .filter-dropdowns {
2754
- padding: 2px;
2755
-
2756
- .p-dropdown:not(.p-disabled).p-focus {
2757
- box-shadow: none !important;
2758
- }
2759
-
2760
- .condition-dropdown {
2761
- width: 12rem !important;
2762
- height: 44px;
2763
- display: flex;
2764
- justify-content: center;
2765
- align-items: center;
2766
- // border: 1px solid var(--gray-300) !important;
2767
-
2768
- .p-dropdown .p-dropdown-label.p-inputtext {
2769
- overflow: hidden;
2770
- text-overflow: ellipsis;
2771
- white-space: nowrap;
2772
- }
2773
-
2774
- .p-inputtext:enabled:focus {
2775
- outline: 0 none;
2776
- outline-offset: 0;
2777
- box-shadow: none !important;
2778
- border-radius: var(--border-radius);
2779
- }
2780
-
2781
- .p-inputtext:enabled:focus {
2782
- outline: 0 none;
2783
- outline-offset: 0;
2784
- box-shadow: none !important;
2785
- border-radius: var(--border-radius);
2786
- }
2787
- }
2788
-
2789
- .operator-type {
2790
- height: 44px !important;
2791
- display: flex;
2792
- justify-content: center;
2793
- align-items: center;
2794
- }
2795
-
2796
- .condition-type {
2797
- // width: 120px;
2798
- height: 44px;
2799
- display: flex;
2800
- justify-content: center;
2801
- align-items: center;
2802
-
2803
- .p-dropdown .p-dropdown-label.p-inputtext {
2804
- overflow: hidden;
2805
- text-overflow: ellipsis;
2806
- white-space: nowrap;
2807
- }
2808
- }
2809
-
2810
- .filter-multi-dropdown {
2811
- .p-multiselect {
2812
- box-shadow: none !important;
2813
- border: 1px solid var(--gray-300) !important;
2814
- border-top-left-radius: 0;
2815
- border-bottom-left-radius: 0;
2816
- height: 44px;
2817
- box-shadow: none !important;
2818
- width: 200px !important;
2819
-
2820
- &:focus {
2821
- border-top-left-radius: 0 !important;
2822
- border-bottom-left-radius: 0 !important;
2823
- }
2824
- .p-inputwrapper-filled {
2825
- background: #ffffff !important;
2826
- }
2827
- }
2828
- }
2829
-
2830
- .filter-calendar {
2831
- .p-inputtext {
2832
- border: 1px solid var(--gray-300) !important;
2833
- border-top-left-radius: 0;
2834
- border-bottom-left-radius: 0;
2835
- height: 44px;
2836
- line-height: 44px;
2837
- box-shadow: none !important;
2838
-
2839
- &:focus {
2840
- border-top-left-radius: 0 !important;
2841
- border-bottom-left-radius: 0 !important;
2842
- }
2843
- }
2844
- }
2845
-
2846
- .data_table_multi_checkbox {
2847
- .p-checkbox {
2848
- vertical-align: baseline;
2849
- }
2850
- }
2851
- }
2852
- .p-multiselect-header {
2853
- .p-checkbox {
2854
- display: none !important;
2855
- }
2856
- }
2857
- .overlay_list_options {
2858
- .p-overlaypanel-content {
2859
- padding: 0;
2860
- }
2861
- }
2862
-
2863
- .filter-btn-grid {
2864
- padding: 10px;
2865
- }
2866
-
2867
- // modal with filter
2868
- .modal_filter {
2869
- width: 840px;
2870
- overflow-x: auto;
2871
- @media (max-width: 760px) {
2872
- width: 100%;
2873
- }
2874
- @media (max-width: 1024px) {
2875
- width: 840px;
2876
- }
2877
-
2878
- .p-dialog-header {
2879
- display: none;
2880
- }
2881
- .p-dialog-content {
2882
- padding: 0px;
2883
- border-radius: 6px;
2884
- overflow-x: auto;
2885
- }
2886
- }
2887
-
2888
- // .table-filter-overlay {
2889
- // width: 51rem !important;
2890
- // &:after,
2891
- // &:before {
2892
- // margin-left: -12px !important;
2893
- // }
2894
-
2895
- // margin-left: -10px;
2896
-
2897
- // .p-overlaypanel-content {
2898
- // padding: 0;
2899
- // }
2900
- // }
2901
- .filter_dropdown_and {
2902
- .p-dropdown-trigger {
2903
- margin-top: 2px !important;
2904
- }
2905
- }
2906
-
2907
- .icon-24x24 {
2908
- width: 24px;
2909
- height: 24px;
2910
- }
2911
-
2912
- .icon-32x32 {
2913
- width: 32px;
2914
- height: 32px;
2915
- }
2916
-
2917
- .h-38 {
2918
- height: 38px;
2919
- }
2920
-
2921
- .border-round-6 {
2922
- border-radius: 6px !important;
2923
- }
2924
-
2925
- // loader styles
2926
- .loader-wrapper {
2927
- width: 60px;
2928
- height: 60px;
2929
- top: 45%;
2930
- left: 45%;
2931
- transform: translate(-45%, -50%);
2932
- border-radius: 50%;
2933
- background-color: #fff;
2934
- position: relative;
2935
- transform: rotate(45deg);
2936
- box-sizing: border-box;
2937
- display: flex;
2938
- justify-content: center;
2939
- align-items: center;
2940
-
2941
- /* HTML: <div class="loader"></div> */
2942
- .loader-jobs {
2943
- width: 35px;
2944
- aspect-ratio: 1;
2945
- border-radius: 50%;
2946
- background:
2947
- radial-gradient(farthest-side, var(--primary-500) 94%, #0000) top/5px 5px
2948
- no-repeat,
2949
- conic-gradient(#0000 5%, var(--primary-500));
2950
- -webkit-mask: radial-gradient(
2951
- farthest-side,
2952
- #0000 calc(100% - 5px),
2953
- #000 0
2954
- );
2955
- animation: l13 1s infinite linear;
2956
- }
2957
-
2958
- @keyframes l13 {
2959
- 100% {
2960
- transform: rotate(1turn);
2961
- }
2962
- }
2963
-
2964
- @keyframes gradient {
2965
- 0% {
2966
- background-position: 100% 50%;
2967
- }
2968
-
2969
- 50% {
2970
- background-position: 50% 70%;
2971
- }
2972
-
2973
- 100% {
2974
- background-position: 70% 100%;
2975
- }
2976
- }
2977
- }
2978
-
2979
- .loader-main {
2980
- width: 48px;
2981
- height: 48px;
2982
- border-radius: 50%;
2983
- position: relative;
2984
- animation: rotate 1s linear infinite;
2985
- &:nth-child(2) {
2986
- width: 90%;
2987
- }
2988
- &:nth-child(3) {
2989
- width: 80%;
2990
- }
2991
- &:nth-child(4) {
2992
- width: 70%;
2993
- }
2994
- }
2995
-
2996
- .loader-main::before {
2997
- content: "";
2998
- box-sizing: border-box;
2999
- position: absolute;
3000
- inset: 0px;
3001
- border-radius: 50%;
3002
- border: 3px solid var(--primary-500);
3003
- animation: prixClipFix 2s linear infinite;
3004
- }
3005
-
3006
- .br-6 {
3007
- border-radius: var(--border-radius);
3008
- }
3009
-
3010
- .line-clamp {
3011
- display: -webkit-box;
3012
- -webkit-box-orient: vertical;
3013
- overflow: hidden;
3014
- text-overflow: ellipsis;
3015
- }
3016
-
3017
- .line-clamp-1 {
3018
- -webkit-line-clamp: 1;
3019
- line-clamp: 1;
3020
- }
3021
-
3022
- .line-clamp-2 {
3023
- -webkit-line-clamp: 2;
3024
- line-clamp: 2;
3025
- }
3026
-
3027
- .pd-9 {
3028
- padding: 9px;
3029
- }
3030
-
3031
- .custom_grid_checkbox {
3032
- &.custom_grid_indeterminate {
3033
- .p-checkbox-box {
3034
- width: 20px;
3035
- height: 20px;
3036
- border-radius: 50%;
3037
- cursor: pointer;
3038
- position: absolute;
3039
- top: 0;
3040
- left: 0;
3041
- background: url("./assets/png/checkbox_minus_icon.png");
3042
- transition: background 0.3s;
3043
- border: 0;
3044
-
3045
- &.p-highlight {
3046
- background: url("./assets/png/checkbox_minus_icon.png");
3047
-
3048
- &:hover {
3049
- background: url("./assets/png/checkbox_minus_icon.png") transparent !important;
3050
- }
3051
-
3052
- svg {
3053
- width: 0 !important;
3054
- height: 0 !important;
3055
- }
3056
- }
3057
- }
3058
- }
3059
- position: relative;
3060
- margin-right: 5px;
3061
-
3062
- .p-checkbox-box {
3063
- width: 20px;
3064
- height: 20px;
3065
- border-radius: 50%;
3066
- cursor: pointer;
3067
- position: absolute;
3068
- top: 0;
3069
- left: 0;
3070
- background: url("./assets/png/checkbox_outline_icon.png");
3071
- transition: background 0.3s;
3072
- border: 0;
3073
-
3074
- &:hover {
3075
- background: url("./assets/png/checkbox_outline_icon.png") transparent !important;
3076
- border: 0 !important;
3077
- }
3078
-
3079
- &.p-highlight {
3080
- background: url("./assets/png/checkbox_fill_icon.png");
3081
-
3082
- &:hover {
3083
- background: url("./assets/png/checkbox_fill_icon.png") transparent !important;
3084
- }
3085
-
3086
- svg {
3087
- width: 0 !important;
3088
- height: 0 !important;
3089
- }
3090
- }
3091
- }
3092
- }
3093
-
3094
- // .ag-grid-container {
3095
- // .ag-cell-wrapper {
3096
- // width: 100% !important;
3097
- // .ag-group-value {
3098
- // width: 100% !important;
3099
- // }
3100
- // }
3101
- // }
3102
-
3103
- // .ag_grid_sidebar {
3104
- // .p-sidebar-content {
3105
- // padding-right: 16px;
3106
- // }
3107
- // }
3108
-
3109
- .ag-center-cols-viewport {
3110
- min-height: 0px !important;
3111
- }
3112
-
3113
- // .filter-dropdown-grid {
3114
- // .p-placeholder {
3115
- // margin-top: 3px;
3116
- // }
3117
- // }
3118
-
3119
- .zoom_animate {
3120
- transition: all 0.4s ease-in-out;
3121
- animation: zoomin 0.2s linear;
3122
- }
3123
-
3124
- @keyframes zoomin {
3125
- 0% {
3126
- opacity: 0;
3127
- transform: scale3d(0.3, 0.3, 0.3);
3128
- }
3129
- 100% {
3130
- opacity: 1;
3131
- }
3132
- }
3133
-
3134
- // .slide_animate_sort {
3135
- // overflow: hidden; /* Ensures content is not visible outside of the height */
3136
- // height: 0; /* Start with height 0 */
3137
- // opacity: 0; /* Start with full transparency */
3138
- // animation: slide_down 0.5s ease-in-out forwards; /* Run the animation on load */
3139
- // }
3140
-
3141
- // @keyframes slide_down {
3142
- // 0% {
3143
- // height: 0;
3144
- // // margin-top: -30px; /* Start 30px above the final position */
3145
- // opacity: 0; /* Fully transparent */
3146
- // }
3147
- // 100% {
3148
- // height: 90px; /* The final height */
3149
- // // margin-top: 0px; /* Move to the final position */
3150
- // opacity: 1; /* Fully opaque */
3151
- // }
3152
- // }
3153
-
3154
- .pd-r-2 {
3155
- padding-right: 2px;
3156
- }
3157
-
3158
- .ag-grid-container:has(.custom_class_name) {
3159
- .ag-cell-wrapper {
3160
- width: 100% !important;
3161
- .ag-group-value {
3162
- width: 100% !important;
3163
- }
3164
- }
3165
- }
3166
-
3167
- @keyframes rotate {
3168
- 100% {
3169
- transform: rotate(360deg);
3170
- }
3171
- }
3172
-
3173
- @keyframes prixClipFix {
3174
- 0% {
3175
- clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
3176
- }
3177
-
3178
- 25% {
3179
- clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
3180
- }
3181
-
3182
- 50% {
3183
- clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
3184
- }
3185
-
3186
- 75% {
3187
- clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
3188
- }
3189
-
3190
- 100% {
3191
- clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
3192
- }
3193
- }
3194
-
3195
- .edited-record {
3196
- background-color: var(--primary-50);
3197
- }
3198
- .non-editable {
3199
- background-color: var(--gray-100);
3200
- }
3201
-
3202
- .tagify {
3203
- height: 200px;
3204
- .tagify__input {
3205
- color: #000;
3206
- overflow: auto;
3207
- tag[type="math"] {
3208
- * {
3209
- padding: 0 !important;
3210
- &::before {
3211
- box-shadow: none !important;
3212
- }
3213
- }
3214
-
3215
- x {
3216
- display: none !important;
3217
- }
3218
- }
3219
- }
3220
- }
3221
-
3222
- .text_ellipsis {
3223
- display: -webkit-box !important;
3224
- -webkit-box-orient: vertical;
3225
- -webkit-line-clamp: 1;
3226
- line-clamp: 1;
3227
- white-space: normal;
3228
- word-break: break-all;
3229
- overflow: hidden;
3230
- }
3231
-
3232
- .line_clamp {
3233
- display: -webkit-box !important;
3234
- -webkit-box-orient: vertical;
3235
- white-space: normal;
3236
- word-break: break-all;
3237
- overflow: hidden;
3238
- &.line_clamp_1 {
3239
- -webkit-line-clamp: 1;
3240
- line-clamp: 1;
3241
- }
3242
- &.line_clamp_2 {
3243
- -webkit-line-clamp: 2 !important;
3244
- line-clamp: 2 !important;
3245
- }
3246
- }
3247
-
3248
- // .text_ellipsis {
3249
- // display: -webkit-box !important;
3250
- // -webkit-box-orient: vertical;
3251
- // -webkit-line-clamp: 1;
3252
- // line-clamp: 1;
3253
- // white-space: normal;
3254
- // overflow: hidden;
3255
- // }
3256
-
3257
- // button styles
3258
- // .p-button.sc_btn,
3259
- // div.sc_btn {
3260
- // font-weight: 600;
3261
- // border-radius: var(--border-radius);
3262
- // display: flex;
3263
- // align-items: center;
3264
- // padding: 8px 16px;
3265
- // cursor: pointer;
3266
- // font-size: 14px;
3267
- // padding: 8px 16px;
3268
-
3269
- // &:has(svg) {
3270
- // display: flex;
3271
- // align-items: center;
3272
- // gap: 6px;
3273
- // }
3274
- // svg {
3275
- // width: 18px;
3276
- // height: 18px;
3277
- // path {
3278
- // stroke: #fff;
3279
- // }
3280
- // }
3281
- // &.primary {
3282
- // background-color: var(--primary-500);
3283
- // color: #fff;
3284
- // &:hover {
3285
- // background-color: var(--primary-700);
3286
- // }
3287
- // }
3288
- // &.destructive {
3289
- // background-color: var(--red-600);
3290
- // color: #fff;
3291
- // &:hover {
3292
- // background-color: var(--red-700);
3293
- // }
3294
- // }
3295
-
3296
- // &.secondary {
3297
- // background-color: var(--bg-white);
3298
- // padding-block: 7px !important;
3299
- // // outline-offset: -1px;
3300
- // color: var(--gray-700);
3301
- // border: 1px solid var(--gray-300) !important;
3302
- // &:hover {
3303
- // background-color: var(--gray-50);
3304
- // color: var(--gray-900);
3305
- // }
3306
- // }
3307
-
3308
- // // Teritiary buttons
3309
- // &.tertiary {
3310
- // background-color: transparent;
3311
- // &.primary_text {
3312
- // color: var(--primary-500);
3313
- // &:hover {
3314
- // background-color: var(--primary-25);
3315
- // color: var(--primary-700);
3316
- // svg {
3317
- // path {
3318
- // stroke: var(--primary-700);
3319
- // }
3320
- // }
3321
- // }
3322
- // svg {
3323
- // path {
3324
- // stroke: var(--primary-600);
3325
- // }
3326
- // }
3327
- // }
3328
- // &.destructive_text {
3329
- // color: var(--red-600);
3330
- // &:hover {
3331
- // background-color: var(--red-50);
3332
- // color: var(--red-700);
3333
- // svg {
3334
- // path {
3335
- // stroke: var(--red-700);
3336
- // }
3337
- // }
3338
- // }
3339
- // svg {
3340
- // path {
3341
- // stroke: var(--red-600);
3342
- // }
3343
- // }
3344
- // }
3345
- // &.secondary_text {
3346
- // color: var(--gray-600);
3347
- // &:hover {
3348
- // background-color: var(--gray-50);
3349
- // color: var(--gray-700);
3350
- // svg {
3351
- // path {
3352
- // stroke: var(--gray-700);
3353
- // }
3354
- // }
3355
- // }
3356
- // svg {
3357
- // path {
3358
- // stroke: var(--gray-600);
3359
- // }
3360
- // }
3361
- // }
3362
- // }
3363
- // &.icon_right {
3364
- // padding: 8px 12px 8px 16px;
3365
- // }
3366
- // &.icon_left {
3367
- // padding: 8px 16px 8px 12px;
3368
- // }
3369
- // &.icon_both {
3370
- // padding: 8px 12px;
3371
- // }
3372
- // &.icon_btn {
3373
- // padding: 8px 12px;
3374
- // border-radius: var(--border-radius);
3375
- // background-color: transparent;
3376
- // border: 0 !important;
3377
-
3378
- // &.primary {
3379
- // svg {
3380
- // path {
3381
- // stroke: var(--primary-500);
3382
- // }
3383
- // }
3384
- // &:hover {
3385
- // background-color: var(--primary-25);
3386
- // svg {
3387
- // path {
3388
- // stroke: var(--primary-700);
3389
- // }
3390
- // }
3391
- // }
3392
- // }
3393
- // &.secondary {
3394
- // svg {
3395
- // path {
3396
- // stroke: var(--gray-600);
3397
- // }
3398
- // }
3399
- // &:hover {
3400
- // background-color: var(--gray-50);
3401
- // svg {
3402
- // path {
3403
- // stroke: var(--gray-700);
3404
- // }
3405
- // }
3406
- // }
3407
- // }
3408
- // }
3409
- // }
3410
-
3411
- .max-height {
3412
- height: 340px;
3413
- }