optimized-react-component-library-xyz123 0.0.9 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -1,933 +1,7 @@
1
- @import "https://assets.soracom.io/fonts/aeonik/Aeonik.css";
2
-
3
- /* src/global.css */
4
- html {
5
- font-size: 62.5%;
6
- }
7
- body {
8
- margin: 0;
9
- font-family: Arial;
10
- font-size: 1.6rem;
11
- font-weight: 400;
12
- background-color: #dddddd;
13
- display: flex;
14
- flex-direction: column;
15
- min-height: 100vh;
16
- }
17
- body a {
18
- text-decoration: underline;
19
- text-underline-offset: 0.3rem;
20
- display: inline-flex;
21
- align-items: center;
22
- color: #6e3282;
23
- }
24
- body a:hover {
25
- text-decoration: underline 0.2rem;
26
- }
27
- h1,
28
- h2,
29
- h3 {
30
- margin: 0;
31
- margin-bottom: 3.6rem;
32
- }
33
- h1 {
34
- font-size: 3rem;
35
- }
36
- h2 {
37
- font-size: 2.4rem;
38
- width: 100%;
39
- }
40
- h3 {
41
- font-size: 2rem;
42
- }
43
- h4 {
44
- margin: 0;
45
- font-size: 1.6rem;
46
- }
47
- #main-content {
48
- padding-top: 3.6rem;
49
- padding-bottom: 6.4rem;
50
- max-width: 860px;
51
- margin-left: auto;
52
- margin-right: auto;
53
- }
54
- section {
55
- display: flex;
56
- flex-direction: column;
57
- background-color: #ffffff;
58
- padding: 3.6rem;
59
- margin-bottom: 1.6rem;
60
- border-radius: 0.4rem;
61
- margin-left: 0.8rem;
62
- margin-right: 0.8rem;
63
- }
64
- .pts-first-category-section {
65
- padding-top: 0;
66
- border-top-left-radius: 0;
67
- border-top-right-radius: 0;
68
- }
69
- .pts-form-step-header {
70
- display: flex;
71
- flex-direction: column;
72
- background-color: #ffffff;
73
- padding: 3.6rem;
74
- margin-bottom: 0;
75
- border-radius: 0.4rem;
76
- margin-left: 0.8rem;
77
- margin-right: 0.8rem;
78
- padding-bottom: 0;
79
- border-bottom-left-radius: 0;
80
- border-bottom-right-radius: 0;
81
- }
82
- .pts-form-step-header p {
83
- margin: 0px;
84
- margin-bottom: 36px;
85
- }
86
- fieldset {
87
- border: none;
88
- padding: 0;
89
- margin: 0;
90
- }
91
- .pts-root-question {
92
- display: flex;
93
- flex-direction: column;
94
- margin-bottom: 1.6rem;
95
- max-width: 624px;
96
- }
97
- .pts-root-categoryDescription,
98
- .pts-root-stepDescription {
99
- margin-bottom: 3.6rem;
100
- }
101
- .pts-root-question legend,
102
- .pts-root-question label,
103
- .pts-radio-option {
104
- margin-bottom: 0.8rem;
105
- }
106
- .pts-root-about {
107
- font-size: 1.4rem;
108
- color: #545454;
109
- margin: 0;
110
- margin-bottom: 0.4rem;
111
- }
112
- .pts-root-question input[type=text]:focus,
113
- .pts-root-question input[type=email]:focus,
114
- .pts-root-question input[type=tel]:focus {
115
- border: 0.2rem solid #6e3282;
116
- }
117
- .pts-root-error {
118
- display: flex;
119
- margin-top: 0.4rem;
120
- }
121
- .errorDot {
122
- display: flex;
123
- font-size: 1.6rem;
124
- font-weight: 700;
125
- width: 1.8rem;
126
- height: 1.8rem;
127
- border-radius: 1rem;
128
- justify-content: center;
129
- color: #ffffff;
130
- background-color: #8e0039;
131
- margin-right: 9px;
132
- }
133
- .errorText,
134
- .pts-root-mandatoryAsterisk {
135
- color: #8e0039;
136
- }
137
- .pts-root-question-input-error-border,
138
- .pts-root-question-input-error-border,
139
- .pts-root-question-input-error-border {
140
- border: 0.2rem solid #8e0039 !important;
141
- }
142
- .sr-only {
143
- position: absolute;
144
- width: 1px;
145
- height: 1px;
146
- padding: 0;
147
- margin: -1px;
148
- overflow: hidden;
149
- clip: rect(0, 0, 0, 0);
150
- white-space: nowrap;
151
- border: 0;
152
- }
153
- button:focus-visible,
154
- a:focus-visible,
155
- input:focus-visible,
156
- textarea:focus-visible,
157
- .filePickLabel:focus-visible {
158
- outline-offset: 0 !important;
159
- outline-style: solid !important;
160
- outline-color: #fff !important;
161
- outline-width: 2px !important;
162
- box-shadow: 0 0 0 4px #000 !important;
163
- }
164
- .using-mouse input:focus-visible,
165
- .using-mouse button:focus-visible,
166
- .using-mouse textarea:focus-visible,
167
- .using-mouse a:focus-visible,
168
- .using-mouse .filePickLabel:focus-visible {
169
- outline: none;
170
- outline-width: 0px !important;
171
- box-shadow: 0 0 0 0px #000 !important;
172
- }
173
- .pts-radioMultiple-container,
174
- .pts-multipleCheckboxes-container {
175
- padding-bottom: 2rem;
176
- }
177
- .pts-root-question input[type=text],
178
- .pts-root-question input[type=email],
179
- .pts-root-question input[type=tel] {
180
- max-width: 100%;
181
- font-size: 1.6rem;
182
- padding-left: 1.6rem;
183
- padding-right: 1.6rem;
184
- border-radius: 0.8rem;
185
- border: 1px solid #545454;
186
- height: 4.8rem;
187
- }
188
- .pts-serviceHeadlineAndBody-container li {
189
- margin-bottom: 0.8rem;
190
- }
191
- .pts-serviceHeadlineAndBody-container ul {
192
- padding-left: 2rem;
193
- }
194
- .pts-serviceHeadlineAndBody-container a {
195
- margin-bottom: 2.8rem;
196
- }
197
- .pts-moreinfo-list {
198
- margin: 0 !important;
199
- list-style: none;
200
- padding: 0 !important;
201
- }
202
- .pts-moreinfo-list svg {
203
- width: 1.6rem;
204
- height: 1.6rem;
205
- background-color: #6e3282;
206
- border-radius: 50%;
207
- padding: 0.4rem;
208
- flex-shrink: 0;
209
- margin-right: 1.6rem;
210
- }
211
- .pts-stepper-container {
212
- display: flex;
213
- width: 100%;
214
- }
215
- .pts-stepper-step {
216
- display: flex;
217
- flex-direction: column;
218
- align-items: center;
219
- flex: 1;
220
- position: relative;
221
- }
222
- .pts-stepperDot {
223
- width: 2.4rem;
224
- height: 2.4rem;
225
- line-height: 2.4rem;
226
- font-size: 1.8rem;
227
- background-color: #747474;
228
- color: #ffffff;
229
- border-radius: 50%;
230
- margin-bottom: 1.2rem;
231
- display: flex;
232
- justify-content: center;
233
- align-items: center;
234
- }
235
- .pts-stepperDotActive {
236
- background-color: #dc7d0a;
237
- }
238
- .pts-stepperDotDone {
239
- background-color: #6e3282;
240
- }
241
- .pts-stepper-step:not(:last-child)::after {
242
- content: "";
243
- position: absolute;
244
- top: 1.2rem;
245
- left: calc(50% + 3.6rem);
246
- right: calc(-50% + 3.6rem);
247
- height: 0.2rem;
248
- background-color: #747474;
249
- }
250
- .pts-stepperButtons-container {
251
- display: flex;
252
- justify-content: end;
253
- margin-right: 0.8rem;
254
- }
255
- .pts-forwardButton,
256
- .pts-backButton {
257
- background-color: #6e3282;
258
- border: 2px solid #6e3282;
259
- color: #ffffff;
260
- padding: 8px 20px;
261
- border-radius: 8px;
262
- font-size: 16px;
263
- cursor: pointer;
264
- margin-left: 1.6rem;
265
- }
266
- .pts-backButton:focus,
267
- .pts-backButton:hover,
268
- .pts-forwardButton:focus,
269
- .pts-forwardButton:hover,
270
- .btn-upload:focus,
271
- .btn-upload:hover {
272
- background-color: #ffffff;
273
- border: 2px solid #6e3282;
274
- color: #6e3282;
275
- transition: 0.2s;
276
- }
277
- .pts-radioMultiple-container input[type=radio] {
278
- appearance: none;
279
- width: 1.8rem;
280
- height: 1.8rem;
281
- border: 1.5px solid #545454;
282
- border-radius: 3.1rem;
283
- margin: 0;
284
- margin-right: 0.8rem;
285
- vertical-align: -2px;
286
- position: relative;
287
- cursor: pointer;
288
- }
289
- .pts-radioMultiple-container input[type=radio]:checked::before {
290
- content: "";
291
- position: absolute;
292
- top: 50%;
293
- left: 50%;
294
- transform: translate(-50%, -50%);
295
- width: 1rem;
296
- height: 1rem;
297
- border-radius: 50%;
298
- background-color: #6e3282;
299
- }
300
- .pts-radioMultiple-container label {
301
- position: relative;
302
- top: -1px;
303
- cursor: pointer;
304
- }
305
- .pts-multipleCheckboxes-container input[type=checkbox] {
306
- -webkit-appearance: none;
307
- width: 1.8rem;
308
- height: 1.8rem;
309
- margin-right: 0.8rem;
310
- flex-shrink: 0;
311
- background-color: #ffffff;
312
- border: 0.15rem solid #545454;
313
- border-radius: 0.2rem;
314
- cursor: pointer;
315
- }
316
- .pts-multipleCheckboxes-container input[type=checkbox]:checked {
317
- background-color: #6e3282;
318
- border: none;
319
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
320
- }
321
- .pts-multipleCheckboxes-container label {
322
- cursor: pointer;
323
- margin: 0;
324
- padding-top: 0.1rem;
325
- }
326
- .pts-multipleCheckboxes-container ul {
327
- padding-left: unset;
328
- margin-top: 0;
329
- margin-bottom: 0.8rem;
330
- }
331
- .pts-multipleCheckboxes-container li {
332
- display: flex;
333
- margin-bottom: 0.8rem;
334
- align-items: center;
335
- }
336
- .pts-skipLink-container a {
337
- position: absolute;
338
- top: -1000px;
339
- left: 1.8rem;
340
- transition: top 0.3s ease-in-out;
341
- background-color: #ffffff;
342
- color: #6e3282;
343
- }
344
- .pts-skipLink-container a:focus {
345
- top: 1.8rem;
346
- }
347
- .pts-header-container {
348
- display: flex;
349
- height: 80px;
350
- padding: 0px 70px;
351
- align-items: center;
352
- justify-content: space-between;
353
- background-color: #ffffff;
354
- }
355
- .pts-languageButton {
356
- display: flex;
357
- background: transparent;
358
- border: transparent;
359
- color: #6e3282;
360
- }
361
- .pts-footer-container {
362
- display: flex;
363
- height: 14rem;
364
- align-items: center;
365
- width: 100%;
366
- background-color: #200827;
367
- }
368
- .pts-footer-logo {
369
- width: 154.444px;
370
- height: 40px;
371
- padding-left: 70px;
372
- flex-shrink: 0;
373
- position: absolute;
374
- }
375
- .pts-footer-linkList {
376
- flex: 1;
377
- justify-content: center;
378
- }
379
- .pts-footer-linkList ul {
380
- padding: 0;
381
- padding-top: 15px;
382
- margin: 0;
383
- list-style: none;
384
- display: flex;
385
- justify-content: center;
386
- line-height: 25px;
387
- }
388
- .pts-footer-linkList a {
389
- color: #ffffff;
390
- text-underline-offset: 3px;
391
- }
392
- .pts-footer-linkList a span {
393
- padding-left: 36px;
394
- padding-right: 36px;
395
- color: #ffffff;
396
- }
397
- .pts-footer-container .pts-footer-linkList ul li:not(:last-child)::after {
398
- content: "";
399
- width: 1px;
400
- height: 24px;
401
- border: 0.5px solid;
402
- color: #ffffff;
403
- position: absolute;
404
- box-sizing: border-box;
405
- }
406
- .pts-question-hasAbout label {
407
- margin-bottom: 0.4rem;
408
- line-height: 1.4rem;
409
- }
410
- .pts-about {
411
- margin-bottom: 0.4rem;
412
- color: #545454;
413
- font-size: 1.4rem;
414
- }
415
- .pts-textArea-container textarea {
416
- height: 16rem;
417
- padding: 1.2rem 1.6rem;
418
- flex-shrink: 0;
419
- font-family: arial;
420
- font-size: 1.6rem;
421
- border-radius: 8px;
422
- border: 0.1px solid #545454;
423
- }
424
- .pts-textArea-container textarea:focus {
425
- border: 0.2rem solid #6e3282;
426
- }
427
- .pts-textarea-counter-error-container {
428
- display: flex;
429
- }
430
- .pts-character-counter {
431
- text-align: right;
432
- width: 100%;
433
- margin-top: 0.4rem;
434
- }
435
- .pts-textarea-counter-error-container .pts-root-error {
436
- width: 100%;
437
- }
438
- .pts-editPreviewLink-container {
439
- display: flex;
440
- justify-content: end;
441
- width: 100%;
442
- margin-left: 1rem;
443
- align-self: flex-start;
444
- }
445
- .pts-editPreviewLink-container button {
446
- display: flex;
447
- align-items: center;
448
- background-color: transparent;
449
- color: #6e3282;
450
- border: none;
451
- cursor: pointer;
452
- font-size: 1.3rem;
453
- gap: 0.2rem;
454
- }
455
- .pts-editPreviewLink-container svg {
456
- height: 1.6rem;
457
- width: 1.6rem;
458
- flex-shrink: 0;
459
- }
460
- .pts-question-preview,
461
- .addFilesPreviewContainer {
462
- display: flex;
463
- justify-content: space-between;
464
- border-bottom: 1px solid #ddd;
465
- margin-bottom: 24px;
466
- margin-top: 0;
467
- }
468
- .pts-question-preview h4,
469
- .addFilesPreviewContainer h4 {
470
- margin-bottom: 8px;
471
- width: 33%;
472
- padding-right: 3.6rem;
473
- }
474
- .pts-root-answer,
475
- .answer {
476
- width: 66%;
477
- margin-bottom: 8px;
478
- }
479
- .pts-root-answer ul {
480
- margin: 0;
481
- padding: 0;
482
- }
483
- .pts-root-answer li {
484
- margin-bottom: 0.8rem;
485
- }
486
- .stepInfoText {
487
- margin: 0;
488
- margin-bottom: 36px;
489
- }
490
- .h3andPreviewLink {
491
- display: flex;
492
- align-items: center;
493
- justify-content: space-between;
494
- width: 100%;
495
- }
496
- #section-heading-0 {
497
- width: 100%;
498
- }
499
- .no-answer-preview-page {
500
- color: #545454;
501
- }
502
- .pts-preview-header {
503
- display: flex;
504
- justify-content: space-between;
505
- align-items: baseline;
506
- }
507
- .pts-textHeadlineAndBody-container .notFirstInList {
508
- margin-top: 0.8rem;
509
- }
510
- .pts-serviceHeadlineAndBody-container .notFirstInList {
511
- margin-top: 0.8rem;
512
- }
513
- .pts-modal-overlay {
514
- position: fixed;
515
- top: 0;
516
- left: 0;
517
- width: 100%;
518
- height: 100%;
519
- background-color: rgba(0, 0, 0, 0.5);
520
- display: flex;
521
- align-items: center;
522
- justify-content: center;
523
- z-index: 999;
524
- }
525
- .pts-modal-content {
526
- background: white;
527
- color: black;
528
- padding: 3.7rem;
529
- border-radius: 4px;
530
- max-width: 600px;
531
- width: 90%;
532
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
533
- }
534
- .pts-spinner-border {
535
- display: block;
536
- width: 9.4rem;
537
- height: 9.4rem;
538
- margin: 0 auto 0 auto;
539
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='94' height='94' viewBox='0 0 94 94' fill='none'%3e%3cpath d='M47 11.75C66.4682 11.75 82.25 27.532 82.25 47C82.25 66.4682 66.4682 82.25 47 82.25C27.532 82.25 11.75 66.4682 11.75 47C11.75 27.532 27.532 11.75 47 11.75Z' stroke='%236E3282' stroke-opacity='0.25' stroke-width='7.83333' stroke-linecap='round'/%3e%3cpath d='M47 11.75C66.4682 11.75 82.25 27.532 82.25 47' stroke='%236E3282' stroke-width='7.83333' stroke-linecap='round'/%3e%3c/svg%3e");
540
- background-size: contain;
541
- background-repeat: no-repeat;
542
- background-position: center;
543
- animation: pts-spinner-border 0.75s linear infinite;
544
- }
545
- .pts-modal-content h1 {
546
- margin: 0;
547
- margin-bottom: 0.8rem;
548
- }
549
- .pts-modal-content p {
550
- margin: 0;
551
- margin-bottom: 3.6rem;
552
- }
553
- @keyframes pts-spinner-border {
554
- 100% {
555
- transform: rotate(360deg);
556
- }
557
- }
558
- .pts-errorSummary-container {
559
- padding: 1.6rem 2.4rem 1.6rem 2.4rem;
560
- margin-top: 3.6rem;
561
- border-radius: 0.8rem;
562
- border: 0.1rem solid #8e0039;
563
- border-left: 4rem solid #8e0039;
564
- position: relative;
565
- }
566
- .pts-errorSummary-container .errorDot {
567
- position: absolute;
568
- top: 2.1rem;
569
- left: -2.8rem;
570
- width: 1.6rem;
571
- height: 1.6rem;
572
- border-radius: 50%;
573
- background-color: #ffffff;
574
- color: #8e0039;
575
- align-items: center;
576
- font-size: 1.4rem;
577
- }
578
- .pts-errorSummary-container h2 {
579
- margin-bottom: 0;
580
- }
581
- .pts-errorSummary-container ul {
582
- padding: 0;
583
- margin: 0;
584
- }
585
- .pts-errorSummary-container li {
586
- display: flex;
587
- cursor: pointer;
588
- padding-top: 1.6rem;
589
- }
590
- .errorSummary-text {
591
- color: #8e0039;
592
- }
593
- .files-upload {
594
- width: 100%;
595
- max-width: 800px;
596
- margin: 0 auto;
597
- font-family:
598
- "Segoe UI",
599
- Tahoma,
600
- Geneva,
601
- Verdana,
602
- sans-serif;
603
- }
604
- .files-drop-zone {
605
- border: 2px dashed #6e3282;
606
- border-radius: 12px;
607
- padding: 3rem 2rem;
608
- text-align: center;
609
- transition: all 0.3s ease;
610
- background-color: #fafafa;
611
- cursor: pointer;
612
- position: relative;
613
- overflow: hidden;
614
- }
615
- .files-drop-zone:hover {
616
- border-color: #6e3282;
617
- background-color: #f5ebf8;
618
- transform: translateY(-2px);
619
- box-shadow: 0 4px 12px rgba(220, 148, 253, 0.15);
620
- }
621
- .files-drop-zone.drag-active {
622
- border-color: #6e3282;
623
- background-color: #f5ebf8;
624
- transform: scale(1.02);
625
- box-shadow: 0 8px 25px rgba(30, 167, 253, 0.2);
626
- }
627
- .files-drop-zone:focus {
628
- border: 0.2rem solid #6e3282;
629
- }
630
- .files-drop-zone:focus-visible {
631
- outline-offset: 0 !important;
632
- outline-style: solid !important;
633
- outline-color: #fff !important;
634
- outline-width: 2px !important;
635
- box-shadow: 0 0 0 4px #000 !important;
636
- }
637
- .files-drop-content {
638
- pointer-events: none;
639
- }
640
- .files-icon {
641
- font-size: 4rem;
642
- margin-bottom: 1rem;
643
- opacity: 0.7;
644
- animation: float 3s ease-in-out infinite;
645
- }
646
- @keyframes float {
647
- 0%, 100% {
648
- transform: translateY(0px);
649
- }
650
- 50% {
651
- transform: translateY(-10px);
652
- }
653
- }
654
- .files-drop-text {
655
- font-size: 1.2rem;
656
- margin-bottom: 0.5rem;
657
- color: #333;
658
- font-weight: 500;
659
- }
660
- .files-drop-info {
661
- font-size: 0.9rem;
662
- color: #666;
663
- margin: 0;
664
- }
665
- .files-allowed-types {
666
- font-size: 0.85rem;
667
- color: #555;
668
- margin: 0.75rem 0 0 0;
669
- padding: 0.5rem;
670
- background-color: rgba(146, 64, 252, 0.1);
671
- border-radius: 6px;
672
- border-left: 3px solid #ce95e0;
673
- }
674
- .files-allowed-types strong {
675
- color: #6e3282;
676
- }
677
- .files-input-hidden {
678
- display: none;
679
- }
680
- .files-summary {
681
- margin: 1.5rem 0;
682
- padding: 1rem;
683
- background-color: #f8f9fa;
684
- border-radius: 8px;
685
- border: 1px solid #e9ecef;
686
- }
687
- .files-summary-stats {
688
- display: flex;
689
- gap: 1rem;
690
- margin-bottom: 1rem;
691
- flex-wrap: wrap;
692
- }
693
- .stat {
694
- padding: 0.5rem 1rem;
695
- border-radius: 20px;
696
- background-color: #e9ecef;
697
- font-size: 0.9rem;
698
- display: flex;
699
- align-items: center;
700
- gap: 0.5rem;
701
- }
702
- .stat.pending {
703
- background-color: #fff3cd;
704
- color: #856404;
705
- }
706
- .stat.completed {
707
- background-color: #d1e7dd;
708
- color: #0a3622;
709
- }
710
- .stat.error {
711
- background-color: #f8d7da;
712
- color: #721c24;
713
- }
714
- .files-summary-actions {
715
- display: flex;
716
- gap: 0.5rem;
717
- flex-wrap: wrap;
718
- }
719
- .action-button {
720
- padding: 0.75rem 1.5rem;
721
- border: none;
722
- border-radius: 6px;
723
- cursor: pointer;
724
- font-weight: 500;
725
- transition: all 0.2s ease;
726
- display: flex;
727
- align-items: center;
728
- gap: 0.5rem;
729
- }
730
- .action-button.primary {
731
- background-color: #1ea7fd;
732
- color: white;
733
- }
734
- .action-button.primary:hover {
735
- background-color: #1890ff;
736
- transform: translateY(-1px);
737
- }
738
- .action-button.secondary {
739
- background-color: #6c757d;
740
- color: white;
741
- }
742
- .action-button.secondary:hover {
743
- background-color: #5a6268;
744
- transform: translateY(-1px);
745
- }
746
- .files-list {
747
- margin-top: 1.5rem;
748
- }
749
- .files-list h4 {
750
- margin-bottom: 1rem;
751
- color: #333;
752
- font-size: 1.1rem;
753
- font-weight: 600;
754
- }
755
- .files-items {
756
- list-style: none;
757
- padding: 0;
758
- margin: 0;
759
- }
760
- .file-item {
761
- display: flex;
762
- align-items: center;
763
- gap: 1rem;
764
- padding: 1rem;
765
- border: 1px solid #e9ecef;
766
- border-radius: 8px;
767
- margin-bottom: 0.75rem;
768
- background-color: white;
769
- transition: all 0.2s ease;
770
- position: relative;
771
- }
772
- .file-item:hover {
773
- background-color: #f8f9fa;
774
- border-color: #dee2e6;
775
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
776
- }
777
- .file-item.uploading {
778
- background-color: #e6f7ff;
779
- border-color: #91d5ff;
780
- }
781
- .file-item.completed {
782
- background-color: #f6ffed;
783
- border-color: #b7eb8f;
784
- }
785
- .file-item.error {
786
- background-color: #fff2f0;
787
- border-color: #ffccc7;
788
- }
789
- .file-icon-status {
790
- font-size: 1.5rem;
791
- min-width: 2rem;
792
- text-align: center;
793
- }
794
- .file-info {
795
- flex: 1;
796
- min-width: 0;
797
- }
798
- .file-name {
799
- font-weight: 500;
800
- color: #333;
801
- margin-bottom: 0.5rem;
802
- word-break: break-word;
803
- }
804
- .file-details {
805
- display: flex;
806
- gap: 1rem;
807
- font-size: 0.85rem;
808
- color: #666;
809
- flex-wrap: wrap;
810
- }
811
- .file-size {
812
- color: #666;
813
- }
814
- .file-status {
815
- color: #1ea7fd;
816
- font-weight: 500;
817
- }
818
- .file-error {
819
- color: #dc3545;
820
- font-weight: 500;
821
- }
822
- .progress-bar {
823
- width: 100%;
824
- height: 4px;
825
- background-color: #e9ecef;
826
- border-radius: 2px;
827
- margin-top: 0.5rem;
828
- overflow: hidden;
829
- }
830
- .progress-fill {
831
- height: 100%;
832
- background-color: #1ea7fd;
833
- transition: width 0.3s ease;
834
- border-radius: 2px;
835
- }
836
- .file-actions {
837
- display: flex;
838
- gap: 0.5rem;
839
- }
840
- .action-btn {
841
- background: none;
842
- border: 1px solid transparent;
843
- padding: 0.5rem;
844
- border-radius: 6px;
845
- cursor: pointer;
846
- font-size: 1rem;
847
- transition: all 0.2s ease;
848
- min-width: 2.5rem;
849
- height: 2.5rem;
850
- display: flex;
851
- align-items: center;
852
- justify-content: center;
853
- }
854
- .action-btn.upload {
855
- color: #1ea7fd;
856
- border-color: #1ea7fd;
857
- }
858
- .action-btn.upload:hover {
859
- background-color: #1ea7fd;
860
- color: white;
861
- }
862
- .action-btn.retry {
863
- color: #fd7e14;
864
- border-color: #fd7e14;
865
- }
866
- .action-btn.retry:hover {
867
- background-color: #fd7e14;
868
- color: white;
869
- }
870
- .action-btn.remove {
871
- color: #6e3282;
872
- border-color: #6e3282;
873
- }
874
- .action-btn.remove:hover {
875
- background-color: #6e3282;
876
- color: white;
877
- }
878
- @media (max-width: 768px) {
879
- .files-drop-zone {
880
- padding: 2rem 1rem;
881
- }
882
- .files-icon {
883
- font-size: 3rem;
884
- }
885
- .files-drop-text {
886
- font-size: 1rem;
887
- }
888
- .files-summary-stats {
889
- flex-direction: column;
890
- gap: 0.5rem;
891
- }
892
- .files-summary-actions {
893
- flex-direction: column;
894
- }
895
- .action-button {
896
- justify-content: center;
897
- }
898
- .file-item {
899
- flex-direction: column;
900
- align-items: flex-start;
901
- gap: 0.75rem;
902
- }
903
- .file-details {
904
- flex-direction: column;
905
- gap: 0.25rem;
906
- }
907
- .file-actions {
908
- align-self: flex-end;
909
- }
910
- }
911
- @media (max-width: 480px) {
912
- .files-upload {
913
- padding: 0 0.5rem;
914
- }
915
- .files-drop-zone {
916
- padding: 1.5rem 1rem;
917
- }
918
- .file-item {
919
- padding: 0.75rem;
920
- }
921
- }
922
-
923
1
  /* src/NewInputComponentStandard/RadioMultipleStandard/RadioMultipleStandard.css */
924
-
925
2
  /* src/NewInputComponentStandard/MultipleCheckboxesStandard/MultipleCheckboxesStandard.css */
926
-
927
3
  /* src/NewInputComponentStandard/TextAreaStandard/TextAreaStandard.css */
928
-
929
4
  /* src/NewInputComponentStandard/TextFieldStandard/TextFieldStandard.css */
930
-
931
5
  /* src/NewInputComponentStandard/FilesUploadStandard/FilesUploadStandard.css */
932
6
  .files-upload {
933
7
  width: 100%;