@portnet/ui 5.0.23 → 5.0.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,629 +0,0 @@
1
- .reclamation-modal .modal-paper {
2
- border-radius: 15px;
3
- display: flex;
4
- flex-direction: column;
5
- max-height: 90vh;
6
- height: auto;
7
- }
8
-
9
- .reclamation-modal .MuiDialog-container {
10
- display: flex;
11
- align-items: center;
12
- justify-content: center;
13
- }
14
-
15
- .reclamation-modal .MuiPaper-root {
16
- margin: 0;
17
- overflow: visible !important;
18
- }
19
-
20
-
21
- .reclamation-modal .modal-header {
22
- padding: 24px 32px;
23
- background: linear-gradient(135deg, var(--primary-color, #222f67) 0%, var(--gradient-end, #3447a0) 100%);
24
- color: white;
25
- display: flex;
26
- align-items: center;
27
- justify-content: space-between;
28
- flex-shrink: 0;
29
- }
30
-
31
- .reclamation-modal .header-icon {
32
- font-size: 32px;
33
- animation: bounce 2s infinite;
34
- }
35
-
36
- @keyframes bounce {
37
- 0%, 100% {
38
- transform: translateY(0);
39
- }
40
- 50% {
41
- transform: translateY(-5px);
42
- }
43
- }
44
-
45
- .reclamation-modal .header-title {
46
- font-weight: 600;
47
- font-size: 20px;
48
- }
49
-
50
- .reclamation-modal .close-button {
51
- color: white;
52
- transition: transform 0.2s;
53
- }
54
-
55
- .reclamation-modal .close-button:hover {
56
- transform: none;
57
- }
58
-
59
- .reclamation-modal .progress-section {
60
- padding: 24px 32px 16px;
61
- background-color: #f8f9fa;
62
- flex-shrink: 0;
63
- }
64
-
65
- .reclamation-modal .progress-bar {
66
- height: 6px;
67
- border-radius: 10px;
68
- margin-bottom: 24px;
69
- background-color: #6c757d;
70
- }
71
-
72
- .reclamation-modal .progress-bar .MuiLinearProgress-bar {
73
- background: linear-gradient(90deg, var(--primary-color, #222f67) 0%, var(--gradient-end, #3447a0) 100%);
74
- border-radius: 10px;
75
- }
76
-
77
- .reclamation-modal .stepper {
78
- background-color: transparent;
79
- }
80
-
81
- .reclamation-modal .stepper .MuiStepLabel-label {
82
- font-size: 13px;
83
- font-weight: 500;
84
- }
85
-
86
- .reclamation-modal .stepper .MuiStepLabel-label.Mui-active {
87
- color: var(--primary-color, #222f67);
88
- font-weight: 600;
89
- }
90
-
91
- .reclamation-modal .stepper .MuiStepIcon-root.Mui-active {
92
- color: var(--primary-color, #222f67);
93
- }
94
-
95
- .reclamation-modal .stepper .MuiStepIcon-root.Mui-completed {
96
- color: #4caf50;
97
- }
98
-
99
- .reclamation-modal .modal-content {
100
- padding: 24px 32px;
101
- min-height: 300px;
102
- background-color: white;
103
- flex: 1 1 auto;
104
- overflow: hidden;
105
- overflow-x: hidden;
106
- display: flex;
107
- justify-content: center;
108
- }
109
-
110
- .reclamation-modal .step-content {
111
- max-width: 600px;
112
- margin: 0 auto;
113
- overflow: visible;
114
- max-height: 100%;
115
- }
116
-
117
- .reclamation-modal .step-title {
118
- font-weight: 600;
119
- color: #2c3e50;
120
- margin-bottom: 8px;
121
- }
122
-
123
- /* Type Selection Dropdown */
124
- .reclamation-modal .type-select .MuiOutlinedInput-root {
125
- border-radius: 12px;
126
- transition: all 0.3s;
127
- min-height: 56px;
128
- }
129
-
130
- .reclamation-modal .type-select .MuiOutlinedInput-root:hover {
131
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
132
- }
133
-
134
- .reclamation-modal .type-select .MuiOutlinedInput-root.Mui-focused {
135
- box-shadow: 0 4px 16px var(--primary-alpha-15, rgba(34, 47, 103, 0.15));
136
- }
137
-
138
- .reclamation-modal .type-select .MuiInputLabel-root.Mui-focused {
139
- color: var(--primary-color, #222f67);
140
- }
141
-
142
- .reclamation-modal .type-select .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
143
- border-color: var(--primary-color, #222f67);
144
- border-width: 2px;
145
- }
146
-
147
- .reclamation-modal .type-select .MuiMenuItem-root {
148
- padding: 14px 16px;
149
- transition: background-color 0.2s;
150
- }
151
-
152
- .reclamation-modal .type-select .MuiMenuItem-root:hover {
153
- background-color: var(--light-color, #f0f2ff);
154
- }
155
-
156
- .reclamation-modal .type-select .MuiMenuItem-root.Mui-selected {
157
- background-color: var(--primary-alpha-8, rgba(34, 47, 103, 0.08));
158
- font-weight: 600;
159
- }
160
-
161
- .reclamation-modal .type-select .MuiMenuItem-root.Mui-selected:hover {
162
- background-color: var(--primary-alpha-12, rgba(34, 47, 103, 0.12));
163
- }
164
-
165
- /* --- Service Autocomplete: Match Type Select Style --- */
166
- .reclamation-modal .service-autocomplete {
167
- width: 384px !important;
168
- max-width: 100%;
169
- }
170
-
171
- .reclamation-modal .service-autocomplete .MuiOutlinedInput-root {
172
- border-radius: 12px;
173
- min-height: 56px;
174
- transition: all 0.3s;
175
- }
176
-
177
- .reclamation-modal .service-autocomplete .MuiOutlinedInput-root:hover {
178
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
179
- }
180
-
181
- .reclamation-modal .service-autocomplete .MuiOutlinedInput-root.Mui-focused {
182
- box-shadow: 0 4px 16px var(--primary-alpha-15, rgba(34, 47, 103, 0.15));
183
- }
184
-
185
- .reclamation-modal .service-autocomplete .MuiInputLabel-root.Mui-focused {
186
- color: var(--primary-color, #222f67);
187
- }
188
-
189
- .reclamation-modal
190
- .service-autocomplete
191
- .MuiOutlinedInput-root.Mui-focused
192
- .MuiOutlinedInput-notchedOutline {
193
- border-color: var(--primary-color, #222f67);
194
- border-width: 2px;
195
- }
196
-
197
- .reclamation-modal .service-listbox {
198
- max-height: 300px;
199
- border-radius: 12px;
200
- margin-top: 4px !important;
201
- background-color: #fff;
202
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
203
- overflow-y: auto;
204
- position: absolute !important;
205
- top: 100% !important;
206
- left: 0 !important;
207
- right: 0 !important;
208
- }
209
-
210
- .reclamation-modal .service-autocomplete .MuiAutocomplete-listbox {
211
- max-height: 160px;
212
- overflow-y: auto;
213
- }
214
-
215
- /* --- Option Items --- */
216
- .reclamation-modal .service-option {
217
- padding: 14px 16px;
218
- transition: background-color 0.2s;
219
- display: flex;
220
- align-items: center;
221
- gap: 8px;
222
- cursor: pointer;
223
- }
224
-
225
- .reclamation-modal .service-option .MuiTypography-root {
226
- display: -webkit-box;
227
- -webkit-box-orient: vertical;
228
- overflow: hidden;
229
- word-break: break-word;
230
- }
231
-
232
- .reclamation-modal .service-option:hover {
233
- background-color: var(--light-color, #f0f2ff);
234
- }
235
-
236
- .reclamation-modal .MuiAutocomplete-option[aria-selected='true'] {
237
- background-color: var(--primary-alpha-8, rgba(34, 47, 103, 0.08)) !important;
238
- font-weight: 600;
239
- }
240
-
241
- .reclamation-modal .MuiAutocomplete-option[aria-selected='true']:hover {
242
- background-color: var(--primary-alpha-12, rgba(34, 47, 103, 0.12)) !important;
243
- }
244
-
245
- /* --- Bullet Color --- */
246
- .reclamation-modal .service-bullet {
247
- width: 6px;
248
- height: 6px;
249
- border-radius: 50%;
250
- background-color: var(--primary-color, #222f67);
251
- flex-shrink: 0;
252
- }
253
-
254
- /* --- Autocomplete Popper Styling Fix --- */
255
- .service-popper {
256
- z-index: 1300;
257
- }
258
-
259
- .service-popper .MuiAutocomplete-listbox {
260
- border-radius: 12px;
261
- background-color: #fff;
262
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
263
- margin-top: 4px;
264
- padding: 4px 0;
265
- }
266
-
267
- .service-popper .MuiAutocomplete-option {
268
- padding: 14px 16px;
269
- display: flex;
270
- align-items: center;
271
- gap: 8px;
272
- transition: background-color 0.2s;
273
- }
274
-
275
- .service-popper .MuiAutocomplete-option:hover {
276
- background-color: var(--light-color, #f0f2ff);
277
- }
278
-
279
- .service-popper .MuiAutocomplete-option[aria-selected='true'] {
280
- background-color: var(--primary-alpha-8, rgba(34, 47, 103, 0.08)) !important;
281
- font-weight: 600;
282
- }
283
-
284
- .service-popper .MuiAutocomplete-option[aria-selected='true']:hover {
285
- background-color: var(--primary-alpha-12, rgba(34, 47, 103, 0.12)) !important;
286
- }
287
-
288
- .service-popper .service-bullet {
289
- width: 6px;
290
- height: 6px;
291
- border-radius: 50%;
292
- background-color: var(--primary-color, #222f67);
293
- }
294
-
295
-
296
- /* Details Form */
297
- .reclamation-modal .details-step .form-fields {
298
- display: flex;
299
- flex-direction: column;
300
- gap: 24px;
301
- }
302
-
303
- .reclamation-modal .form-field .MuiOutlinedInput-root {
304
- border-radius: 12px;
305
- transition: all 0.3s;
306
- }
307
-
308
- .reclamation-modal .form-field .MuiOutlinedInput-root:hover {
309
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
310
- }
311
-
312
- .reclamation-modal .form-field .MuiOutlinedInput-root.Mui-focused {
313
- box-shadow: 0 4px 16px var(--primary-alpha-12, rgba(34, 47, 103, 0.12));
314
- }
315
-
316
- .reclamation-modal .form-field .MuiInputLabel-root.Mui-focused {
317
- color: var(--primary-color, #222f67);
318
- }
319
-
320
- .reclamation-modal .form-field .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
321
- border-color: var(--primary-color, #222f67);
322
- border-width: 2px;
323
- }
324
-
325
- /* File Upload */
326
- .reclamation-modal .file-upload-section {
327
- display: flex;
328
- flex-direction: column;
329
- gap: 12px;
330
- }
331
-
332
- .reclamation-modal .upload-button {
333
- border-radius: 12px;
334
- padding: 12px;
335
- border: 2px dashed var(--primary-color, #222f67);
336
- color: var(--primary-color, #222f67);
337
- font-weight: 600;
338
- text-transform: none;
339
- transition: all 0.3s;
340
- }
341
-
342
- .reclamation-modal .upload-button:hover {
343
- background-color: var(--light-color, #f0f2ff);
344
- border-style: solid;
345
- transform: translateY(-2px);
346
- box-shadow: 0 4px 12px var(--primary-alpha-15, rgba(34, 47, 103, 0.15));
347
- }
348
-
349
- .reclamation-modal .file-chip {
350
- border-radius: 8px;
351
- padding: 8px;
352
- font-weight: 500;
353
- }
354
-
355
- /* Footer */
356
- .reclamation-modal .modal-footer {
357
- padding: 16px 32px;
358
- background-color: #f8f9fa;
359
- border-top: 1px solid #6c757d;
360
- display: flex;
361
- align-items: center;
362
- gap: 16px;
363
- flex-shrink: 0;
364
- z-index: 10;
365
- min-height: 45px;
366
- }
367
-
368
- .reclamation-modal .back-button {
369
- color: #6c757d;
370
- text-transform: none;
371
- font-weight: 600;
372
- border-radius: 10px;
373
- padding: 10px 24px;
374
- transition: background-color 0.3s, color 0.3s;
375
- }
376
-
377
- .reclamation-modal .back-button:hover {
378
- background-color: var(--soft-hover, #e8ecfd);
379
- color: var(--primary-color, #222f67) ! important;
380
- }
381
-
382
- .reclamation-modal .back-button:active {
383
- background-color: var(--soft-active, #d5ddfb);
384
- color: var(--primary-color, #222f67) ! important;
385
- }
386
-
387
- .reclamation-modal .next-button,
388
- .reclamation-modal .submit-button {
389
- background: linear-gradient(135deg, var(--primary-color, #222f67) 0%, var(--gradient-end, #3447a0) 100%);
390
- color: white;
391
- text-transform: none;
392
- font-weight: 600;
393
- border-radius: 10px;
394
- padding: 10px 32px;
395
- box-shadow: 0 4px 12px var(--primary-alpha-30, rgba(34, 47, 103, 0.3));
396
- transition: all 0.3s;
397
- }
398
-
399
- .reclamation-modal .upload-button:hover,
400
- .reclamation-modal .next-button:hover,
401
- .reclamation-modal .submit-button:hover,
402
- .success-modal .close-success-button:hover {
403
- transform: none;
404
- box-shadow: 0 4px 12px var(--primary-alpha-30, rgba(34, 47, 103, 0.3));
405
- }
406
-
407
- .reclamation-modal .next-button:hover,
408
- .reclamation-modal .submit-button:hover,
409
- .success-modal .close-success-button:hover {
410
- transform: none;
411
- box-shadow: 0 4px 12px var(--primary-alpha-35, rgba(34, 47, 103, 0.35));
412
- }
413
-
414
- .reclamation-modal .next-button:disabled,
415
- .reclamation-modal .submit-button:disabled {
416
- background: #6c757d;
417
- color: #9e9e9e;
418
- box-shadow: none;
419
- }
420
-
421
- /* Success Modal */
422
- .success-modal .modal-paper {
423
- border-radius: 20px;
424
- }
425
-
426
- .success-modal .success-content {
427
- padding: 48px 32px;
428
- text-align: center;
429
- }
430
-
431
- .success-modal .success-container {
432
- max-width: 500px;
433
- margin: 0 auto;
434
- }
435
-
436
- .success-modal .success-icon {
437
- font-size: 80px;
438
- color: #4caf50;
439
- margin-bottom: 24px;
440
- animation: successPop 0.5s ease-out;
441
- }
442
-
443
- @keyframes successPop {
444
- 0% {
445
- transform: scale(0);
446
- opacity: 0;
447
- }
448
- 50% {
449
- transform: scale(1.1);
450
- }
451
- 100% {
452
- transform: scale(1);
453
- opacity: 1;
454
- }
455
- }
456
-
457
- .success-modal .success-title {
458
- font-weight: 700;
459
- color: #2c3e50;
460
- margin-bottom: 12px;
461
- }
462
-
463
- .success-modal .reference-box {
464
- padding: 24px;
465
- border-radius: 16px;
466
- background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
467
- margin: 24px 0;
468
- border: 2px solid #cccc;
469
- box-shadow: none;
470
- }
471
-
472
- .success-modal .reference-number {
473
- font-weight: 700;
474
- color: var(--primary-color, #222f67);
475
- font-family: 'Courier New', monospace;
476
- letter-spacing: 2px;
477
- margin-top: 8px;
478
- }
479
-
480
- .success-modal .close-success-button {
481
- margin-top: 24px;
482
- background: linear-gradient(135deg, var(--primary-color, #222f67) 0%, var(--gradient-end, #3447a0) 100%);
483
- color: white;
484
- text-transform: none;
485
- font-weight: 600;
486
- border-radius: 12px;
487
- padding: 14px;
488
- font-size: 16px;
489
- box-shadow: 0 4px 12px var(--primary-alpha-30, rgba(34, 47, 103, 0.3));
490
- transition: all 0.3s;
491
- }
492
-
493
- /* Responsive */
494
- @media (max-width: 768px) {
495
- .reclamation-modal .modal-header {
496
- padding: 20px;
497
- }
498
-
499
- .reclamation-modal .modal-content {
500
- padding: 24px 20px;
501
- }
502
-
503
- .reclamation-modal .progress-section {
504
- padding: 20px;
505
- }
506
-
507
- .reclamation-modal .stepper .MuiStepLabel-label {
508
- font-size: 11px;
509
- }
510
-
511
- .success-modal .success-content {
512
- padding: 32px 20px;
513
- }
514
- }
515
-
516
- /* Alert customization */
517
- .reclamation-modal .MuiAlert-root {
518
- border-radius: 12px;
519
- font-size: 14px;
520
- }
521
-
522
- .reclamation-modal .MuiAlert-icon {
523
- font-size: 24px;
524
- }
525
-
526
- .reclamation-modal .MuiAlertTitle-root {
527
- font-weight: 600;
528
- font-size: 15px;
529
- }
530
-
531
- /* --- Force Autocomplete Dropdown Styling --- */
532
- .MuiAutocomplete-popper {
533
- z-index: 1500 !important;
534
- }
535
-
536
- .MuiAutocomplete-popper .MuiAutocomplete-listbox {
537
- border-radius: 12px !important;
538
- background-color: #fff !important;
539
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
540
- margin-top: 4px !important;
541
- padding: 4px 0 !important;
542
- max-height: 300px;
543
- overflow-y: auto;
544
- }
545
-
546
- .MuiAutocomplete-popper .MuiAutocomplete-option {
547
- padding: 14px 16px !important;
548
- display: flex !important;
549
- align-items: center !important;
550
- gap: 8px !important;
551
- transition: background-color 0.2s !important;
552
- min-height: 48px !important;
553
- margin-bottom: 4px !important;
554
- line-height: 1.8 !important;
555
- border-bottom: 1px solid #f0f0f0 !important;
556
-
557
- }
558
-
559
- .MuiAutocomplete-popper .MuiAutocomplete-option:hover {
560
- background-color: var(--light-color, #f0f2ff) !important;
561
- }
562
-
563
- .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true'] {
564
- background-color: var(--primary-alpha-8, rgba(34, 47, 103, 0.08)) !important;
565
- font-weight: 600 !important;
566
- }
567
-
568
- .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true']:hover {
569
- background-color: var(--primary-alpha-12, rgba(34, 47, 103, 0.12)) !important;
570
- }
571
-
572
- .MuiAutocomplete-popper .service-bullet {
573
- width: 6px;
574
- height: 6px;
575
- border-radius: 50%;
576
- background-color: var(--primary-color, #222f67);
577
- flex-shrink: 0;
578
- }
579
-
580
- /* Responsive mobile - fix centrage uniquement */
581
- @media (max-width: 576px) {
582
-
583
- .reclamation-modal .modal-header {
584
- padding: 16px !important;
585
- }
586
-
587
- .reclamation-modal .header-title {
588
- font-size: 16px !important;
589
- }
590
-
591
- .reclamation-modal .progress-section {
592
- padding: 12px 16px !important;
593
- }
594
-
595
- .reclamation-modal .stepper .MuiStepLabel-label {
596
- font-size: 10px !important;
597
- }
598
-
599
- .reclamation-modal .modal-content {
600
- padding: 16px !important;
601
- }
602
-
603
- .reclamation-modal .step-title {
604
- font-size: 18px !important;
605
- }
606
-
607
- /* Fix centrage autocomplete */
608
- .reclamation-modal .service-autocomplete {
609
- width: 100% !important;
610
- height: auto !important;
611
- }
612
-
613
- .reclamation-modal .step-content {
614
- width: 100% !important;
615
- max-width: 100% !important;
616
- }
617
-
618
- .reclamation-modal .modal-footer {
619
- padding: 12px 16px !important;
620
- }
621
-
622
- .reclamation-modal .next-button,
623
- .reclamation-modal .submit-button {
624
- padding: 10px 20px !important;
625
- }
626
- }
627
- .MuiAutocomplete-popper .MuiAutocomplete-option:last-child {
628
- border-bottom: none !important;
629
- }