optimized-react-component-library-xyz123 0.1.141 → 0.1.142
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.js +14 -17
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +14 -17
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/css/darkMode.css +8 -4
- package/src/css/mobileView.css +307 -173
- package/src/css/styles.css +129 -149
package/src/css/styles.css
CHANGED
|
@@ -2,6 +2,16 @@
|
|
|
2
2
|
@import url('https://assets.soracom.io/fonts/aeonik/Aeonik.css');
|
|
3
3
|
|
|
4
4
|
/* ---------- GENERAL ---------- */
|
|
5
|
+
:root{
|
|
6
|
+
--background:#dddddd;
|
|
7
|
+
--text:#000000;
|
|
8
|
+
--action:#6e3282;
|
|
9
|
+
--error:#8e0039;
|
|
10
|
+
--main:#ffffff;
|
|
11
|
+
--info: #545454;
|
|
12
|
+
--orientation-active:#dc7d0a;
|
|
13
|
+
--background-second:#200827;
|
|
14
|
+
}
|
|
5
15
|
|
|
6
16
|
body,
|
|
7
17
|
#root {
|
|
@@ -19,7 +29,7 @@ body {
|
|
|
19
29
|
font-family: Arial;
|
|
20
30
|
font-size: 1.6rem;
|
|
21
31
|
font-weight: 400;
|
|
22
|
-
background-color:
|
|
32
|
+
background-color: var(--background);
|
|
23
33
|
display: flex;
|
|
24
34
|
flex-direction: column;
|
|
25
35
|
min-height: 100vh;
|
|
@@ -27,11 +37,11 @@ body {
|
|
|
27
37
|
|
|
28
38
|
body a {
|
|
29
39
|
text-decoration: underline;
|
|
30
|
-
text-underline-offset: 0.
|
|
31
|
-
|
|
40
|
+
text-underline-offset: 0.35rem;
|
|
41
|
+
line-height: 2rem;
|
|
32
42
|
display: inline-flex;
|
|
33
43
|
align-items: center;
|
|
34
|
-
color:
|
|
44
|
+
color: var(--action);
|
|
35
45
|
}
|
|
36
46
|
|
|
37
47
|
body a:hover {
|
|
@@ -49,6 +59,15 @@ main {
|
|
|
49
59
|
flex: 1;
|
|
50
60
|
}
|
|
51
61
|
|
|
62
|
+
#main-content:focus:focus-visible,
|
|
63
|
+
h1:focus:focus-visible,
|
|
64
|
+
h2:focus:focus-visible,
|
|
65
|
+
#pts-form-id-error-summary:focus:focus-visible,
|
|
66
|
+
#pts-error-summary:focus:focus-visible {
|
|
67
|
+
outline: none !important;
|
|
68
|
+
border: none;
|
|
69
|
+
}
|
|
70
|
+
|
|
52
71
|
h1,
|
|
53
72
|
h2,
|
|
54
73
|
h3 {
|
|
@@ -85,19 +104,16 @@ h4 {
|
|
|
85
104
|
section {
|
|
86
105
|
display: flex;
|
|
87
106
|
flex-direction: column;
|
|
88
|
-
background-color:
|
|
107
|
+
background-color: var(--main);
|
|
89
108
|
padding: 3.6rem;
|
|
90
|
-
margin
|
|
109
|
+
margin: 1.6rem 0.8rem;
|
|
91
110
|
border-radius: 0.4rem;
|
|
92
|
-
margin-left: 0.8rem;
|
|
93
|
-
margin-right: 0.8rem;
|
|
94
|
-
margin-top: 1.6rem;
|
|
95
111
|
}
|
|
96
112
|
/* ?? Make changes in html ?? ----
|
|
97
113
|
.pts-button{
|
|
98
|
-
background-color:
|
|
99
|
-
border: 2px solid
|
|
100
|
-
color:
|
|
114
|
+
background-color: var(--action);
|
|
115
|
+
border: 2px solid var(--action);
|
|
116
|
+
color: var(--main);
|
|
101
117
|
padding: 8px 20px;
|
|
102
118
|
border-radius: 8px;
|
|
103
119
|
font-size: 16px;
|
|
@@ -107,9 +123,9 @@ section {
|
|
|
107
123
|
|
|
108
124
|
.pts-button:focus,
|
|
109
125
|
.pts-button:hover{
|
|
110
|
-
background-color:
|
|
111
|
-
border: 2px solid
|
|
112
|
-
color:
|
|
126
|
+
background-color: var(--main);
|
|
127
|
+
border: 2px solid var(--action);
|
|
128
|
+
color: var(--action);
|
|
113
129
|
transition: 0.2s;
|
|
114
130
|
}
|
|
115
131
|
--- ?? Make changes in html ?? */
|
|
@@ -123,13 +139,12 @@ section {
|
|
|
123
139
|
.pts-form-step-header {
|
|
124
140
|
display: flex;
|
|
125
141
|
flex-direction: column;
|
|
126
|
-
background-color:
|
|
142
|
+
background-color: var(--main);
|
|
127
143
|
padding: 3.6rem;
|
|
128
144
|
margin-bottom: 0;
|
|
129
145
|
border-radius: 0.4rem;
|
|
130
146
|
margin-left: 0.8rem;
|
|
131
147
|
margin-right: 0.8rem;
|
|
132
|
-
padding-bottom: 0;
|
|
133
148
|
border-bottom-left-radius: 0;
|
|
134
149
|
border-bottom-right-radius: 0;
|
|
135
150
|
}
|
|
@@ -163,9 +178,8 @@ fieldset {
|
|
|
163
178
|
display: flex;
|
|
164
179
|
align-items: flex-start;
|
|
165
180
|
cursor: pointer;
|
|
166
|
-
margin-bottom: 0.
|
|
181
|
+
margin-bottom: 0.6rem;
|
|
167
182
|
}
|
|
168
|
-
|
|
169
183
|
.pts-root-question legend {
|
|
170
184
|
font-family: Arial;
|
|
171
185
|
font-size: 1.6rem;
|
|
@@ -177,7 +191,7 @@ fieldset {
|
|
|
177
191
|
|
|
178
192
|
.pts-root-about {
|
|
179
193
|
font-size: 1.4rem;
|
|
180
|
-
color:
|
|
194
|
+
color: var(--info);
|
|
181
195
|
margin: 0;
|
|
182
196
|
margin-bottom: 0.4rem;
|
|
183
197
|
}
|
|
@@ -185,7 +199,7 @@ fieldset {
|
|
|
185
199
|
.pts-root-question input[type='text']:focus,
|
|
186
200
|
.pts-root-question input[type='email']:focus,
|
|
187
201
|
.pts-root-question input[type='tel']:focus {
|
|
188
|
-
border: 0.2rem solid
|
|
202
|
+
border: 0.2rem solid var(--action);
|
|
189
203
|
}
|
|
190
204
|
|
|
191
205
|
.pts-root-error {
|
|
@@ -201,14 +215,14 @@ fieldset {
|
|
|
201
215
|
height: 1.8rem;
|
|
202
216
|
border-radius: 1rem;
|
|
203
217
|
justify-content: center;
|
|
204
|
-
color:
|
|
205
|
-
background-color:
|
|
218
|
+
color: var(--main);
|
|
219
|
+
background-color: var(--error);
|
|
206
220
|
margin-right: 9px;
|
|
207
221
|
}
|
|
208
222
|
|
|
209
223
|
.errorText,
|
|
210
224
|
.pts-root-mandatoryAsterisk {
|
|
211
|
-
color:
|
|
225
|
+
color: var(--error);
|
|
212
226
|
}
|
|
213
227
|
|
|
214
228
|
.pts-root-mandatoryAsterisk {
|
|
@@ -219,7 +233,7 @@ fieldset {
|
|
|
219
233
|
.pts-root-question-input-error-border,
|
|
220
234
|
.pts-root-question-input-error-border,
|
|
221
235
|
.pts-root-question-input-error-border {
|
|
222
|
-
border: 0.2rem solid
|
|
236
|
+
border: 0.2rem solid var(--error) !important;
|
|
223
237
|
}
|
|
224
238
|
|
|
225
239
|
.sr-only {
|
|
@@ -269,7 +283,7 @@ textarea:focus-visible,
|
|
|
269
283
|
padding-left: 1.6rem;
|
|
270
284
|
padding-right: 1.6rem;
|
|
271
285
|
border-radius: 0.8rem;
|
|
272
|
-
border: 1px solid
|
|
286
|
+
border: 1px solid var(--info);
|
|
273
287
|
height: 4.8rem;
|
|
274
288
|
}
|
|
275
289
|
|
|
@@ -281,7 +295,7 @@ textarea:focus-visible,
|
|
|
281
295
|
left: 0;
|
|
282
296
|
padding: 15px 20px;
|
|
283
297
|
background: #eaf1f9;
|
|
284
|
-
border-bottom: 4px solid
|
|
298
|
+
border-bottom: 4px solid var(--action);
|
|
285
299
|
z-index: 9999;
|
|
286
300
|
width: 100vw;
|
|
287
301
|
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
|
|
@@ -318,8 +332,8 @@ textarea:focus-visible,
|
|
|
318
332
|
text-align: center;
|
|
319
333
|
font-size: 1.4rem;
|
|
320
334
|
padding: 8px 15px;
|
|
321
|
-
background-color:
|
|
322
|
-
border: 2px solid
|
|
335
|
+
background-color: var(--action);
|
|
336
|
+
border: 2px solid var(--action);
|
|
323
337
|
color: white;
|
|
324
338
|
cursor: pointer;
|
|
325
339
|
border-radius: 8px;
|
|
@@ -328,8 +342,8 @@ textarea:focus-visible,
|
|
|
328
342
|
.pts-cookieBanner button:focus,
|
|
329
343
|
.pts-cookieBanner button:hover {
|
|
330
344
|
background-color: #eaf1f9;
|
|
331
|
-
border: 2px solid
|
|
332
|
-
color:
|
|
345
|
+
border: 2px solid var(--action);
|
|
346
|
+
color: var(--action);
|
|
333
347
|
transition: 0.2s;
|
|
334
348
|
}
|
|
335
349
|
|
|
@@ -357,7 +371,7 @@ textarea:focus-visible,
|
|
|
357
371
|
.MoreInfoIcon svg {
|
|
358
372
|
width: 1.6rem;
|
|
359
373
|
height: 1.6rem;
|
|
360
|
-
background-color:
|
|
374
|
+
background-color: var(--action);
|
|
361
375
|
border-radius: 50%;
|
|
362
376
|
padding: 0.4rem;
|
|
363
377
|
flex-shrink: 0;
|
|
@@ -366,7 +380,7 @@ textarea:focus-visible,
|
|
|
366
380
|
|
|
367
381
|
.pts-serviceHeadlineAndBody-container a svg path,
|
|
368
382
|
.MoreInfoIcon svg path {
|
|
369
|
-
fill:
|
|
383
|
+
fill: var(--main);
|
|
370
384
|
}
|
|
371
385
|
|
|
372
386
|
.pts-moreinfo-list {
|
|
@@ -378,7 +392,7 @@ textarea:focus-visible,
|
|
|
378
392
|
.pts-moreinfo-list svg {
|
|
379
393
|
width: 1.6rem;
|
|
380
394
|
height: 1.6rem;
|
|
381
|
-
background-color:
|
|
395
|
+
background-color: var(--action);
|
|
382
396
|
border-radius: 50%;
|
|
383
397
|
padding: 0.4rem;
|
|
384
398
|
flex-shrink: 0;
|
|
@@ -406,7 +420,7 @@ textarea:focus-visible,
|
|
|
406
420
|
line-height: 2.4rem;
|
|
407
421
|
font-size: 1.8rem;
|
|
408
422
|
background-color: #747474;
|
|
409
|
-
color:
|
|
423
|
+
color: var(--main);
|
|
410
424
|
border-radius: 50%;
|
|
411
425
|
margin-bottom: 1.2rem;
|
|
412
426
|
display: flex;
|
|
@@ -415,11 +429,11 @@ textarea:focus-visible,
|
|
|
415
429
|
}
|
|
416
430
|
|
|
417
431
|
.pts-stepperDotActive {
|
|
418
|
-
background-color:
|
|
432
|
+
background-color: var(--orientation-active);
|
|
419
433
|
}
|
|
420
434
|
|
|
421
435
|
.pts-stepperDotDone {
|
|
422
|
-
background-color:
|
|
436
|
+
background-color: var(--action);
|
|
423
437
|
}
|
|
424
438
|
|
|
425
439
|
.pts-stepper-step:not(:last-child)::after {
|
|
@@ -445,9 +459,9 @@ textarea:focus-visible,
|
|
|
445
459
|
|
|
446
460
|
.pts-forwardButton,
|
|
447
461
|
.pts-backButton {
|
|
448
|
-
background-color:
|
|
449
|
-
border: 2px solid
|
|
450
|
-
color:
|
|
462
|
+
background-color: var(--action);
|
|
463
|
+
border: 2px solid var(--action);
|
|
464
|
+
color: var(--main);
|
|
451
465
|
padding: 8px 20px;
|
|
452
466
|
border-radius: 8px;
|
|
453
467
|
font-size: 1.6rem;
|
|
@@ -458,6 +472,7 @@ textarea:focus-visible,
|
|
|
458
472
|
.pts-start-applicationButton {
|
|
459
473
|
align-self: start !important;
|
|
460
474
|
margin-left: 0px !important;
|
|
475
|
+
margin: 3.6rem 0;
|
|
461
476
|
}
|
|
462
477
|
|
|
463
478
|
.pts-backButton:focus,
|
|
@@ -466,9 +481,9 @@ textarea:focus-visible,
|
|
|
466
481
|
.pts-forwardButton:hover,
|
|
467
482
|
.btn-upload:focus,
|
|
468
483
|
.btn-upload:hover {
|
|
469
|
-
background-color:
|
|
470
|
-
border: 2px solid
|
|
471
|
-
color:
|
|
484
|
+
background-color: var(--main);
|
|
485
|
+
border: 2px solid var(--action);
|
|
486
|
+
color: var(--action);
|
|
472
487
|
transition: 0.2s;
|
|
473
488
|
}
|
|
474
489
|
|
|
@@ -478,7 +493,7 @@ textarea:focus-visible,
|
|
|
478
493
|
appearance: none;
|
|
479
494
|
width: 1.8rem;
|
|
480
495
|
height: 1.8rem;
|
|
481
|
-
border: 1.5px solid
|
|
496
|
+
border: 1.5px solid var(--info);
|
|
482
497
|
border-radius: 3.1rem;
|
|
483
498
|
margin: 0;
|
|
484
499
|
margin-right: 0.8rem;
|
|
@@ -496,7 +511,7 @@ textarea:focus-visible,
|
|
|
496
511
|
width: 1rem;
|
|
497
512
|
height: 1rem;
|
|
498
513
|
border-radius: 50%;
|
|
499
|
-
background-color:
|
|
514
|
+
background-color: var(--action);
|
|
500
515
|
}
|
|
501
516
|
|
|
502
517
|
.pts-radioMultiple-container label {
|
|
@@ -515,15 +530,15 @@ textarea:focus-visible,
|
|
|
515
530
|
margin-right: 0.8rem;
|
|
516
531
|
flex-shrink: 0;
|
|
517
532
|
|
|
518
|
-
background-color:
|
|
519
|
-
border: 0.15rem solid
|
|
533
|
+
background-color: var(--main);
|
|
534
|
+
border: 0.15rem solid var(--info);
|
|
520
535
|
border-radius: 0.2rem;
|
|
521
536
|
|
|
522
537
|
cursor: pointer;
|
|
523
538
|
}
|
|
524
539
|
|
|
525
540
|
.pts-multipleCheckboxes-container input[type='checkbox']:checked {
|
|
526
|
-
background-color:
|
|
541
|
+
background-color: var(--action);
|
|
527
542
|
border: none;
|
|
528
543
|
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;
|
|
529
544
|
}
|
|
@@ -558,8 +573,8 @@ textarea:focus-visible,
|
|
|
558
573
|
top: -1000px;
|
|
559
574
|
left: 1.8rem;
|
|
560
575
|
transition: top 0.3s ease-in-out;
|
|
561
|
-
background-color:
|
|
562
|
-
color:
|
|
576
|
+
background-color: var(--main);
|
|
577
|
+
color: var(--action);
|
|
563
578
|
}
|
|
564
579
|
|
|
565
580
|
.pts-skipLink-container a:focus {
|
|
@@ -572,17 +587,21 @@ textarea:focus-visible,
|
|
|
572
587
|
padding: 0px 70px;
|
|
573
588
|
align-items: center;
|
|
574
589
|
justify-content: space-between;
|
|
575
|
-
background-color:
|
|
590
|
+
background-color: var(--main);
|
|
576
591
|
}
|
|
577
592
|
|
|
578
593
|
.pts-languageButton {
|
|
579
594
|
display: flex;
|
|
580
595
|
background: transparent;
|
|
581
596
|
border: transparent;
|
|
582
|
-
color:
|
|
597
|
+
color: var(--action);
|
|
583
598
|
cursor: pointer;
|
|
584
599
|
}
|
|
585
600
|
|
|
601
|
+
.languageIcon{
|
|
602
|
+
margin-top:0.4rem;
|
|
603
|
+
}
|
|
604
|
+
|
|
586
605
|
.pts-languageButton svg {
|
|
587
606
|
width: 1.5rem;
|
|
588
607
|
height: 1.5rem;
|
|
@@ -591,12 +610,17 @@ textarea:focus-visible,
|
|
|
591
610
|
/* ---------- FOOTER ---------- */
|
|
592
611
|
|
|
593
612
|
.pts-footer-container {
|
|
594
|
-
display:
|
|
595
|
-
grid-template-columns: 10px 1fr;
|
|
613
|
+
display: flex;
|
|
596
614
|
min-height: 14rem;
|
|
597
615
|
align-items: center;
|
|
598
616
|
width: 100%;
|
|
599
|
-
background-color:
|
|
617
|
+
background-color: var(--background-second);
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
.pts-footer-content{
|
|
621
|
+
display: flex;
|
|
622
|
+
align-items: center;
|
|
623
|
+
width: 100%;
|
|
600
624
|
}
|
|
601
625
|
|
|
602
626
|
.pts-footer-logo {
|
|
@@ -610,6 +634,7 @@ textarea:focus-visible,
|
|
|
610
634
|
.pts-footer-linkList {
|
|
611
635
|
flex: 1;
|
|
612
636
|
justify-content: center;
|
|
637
|
+
margin-left: -160px;
|
|
613
638
|
}
|
|
614
639
|
|
|
615
640
|
.pts-footer-linkList ul {
|
|
@@ -623,7 +648,7 @@ textarea:focus-visible,
|
|
|
623
648
|
}
|
|
624
649
|
|
|
625
650
|
.pts-footer-linkList a {
|
|
626
|
-
color:
|
|
651
|
+
color: var(--main);
|
|
627
652
|
text-underline-offset: 3px;
|
|
628
653
|
white-space: nowrap;
|
|
629
654
|
}
|
|
@@ -631,7 +656,7 @@ textarea:focus-visible,
|
|
|
631
656
|
.pts-footer-linkList a span {
|
|
632
657
|
padding-left: 36px;
|
|
633
658
|
padding-right: 36px;
|
|
634
|
-
color:
|
|
659
|
+
color: var(--main);
|
|
635
660
|
}
|
|
636
661
|
|
|
637
662
|
.pts-footer-container .pts-footer-linkList ul li:not(:last-child)::after {
|
|
@@ -639,7 +664,7 @@ textarea:focus-visible,
|
|
|
639
664
|
width: 1px;
|
|
640
665
|
height: 24px;
|
|
641
666
|
border: 0.5px solid;
|
|
642
|
-
color:
|
|
667
|
+
color: var(--main);
|
|
643
668
|
position: absolute;
|
|
644
669
|
box-sizing: border-box;
|
|
645
670
|
}
|
|
@@ -652,13 +677,13 @@ textarea:focus-visible,
|
|
|
652
677
|
|
|
653
678
|
.pts-about {
|
|
654
679
|
margin-bottom: 0.4rem;
|
|
655
|
-
color:
|
|
680
|
+
color: var(--info);
|
|
656
681
|
font-size: 1.4rem;
|
|
657
682
|
}
|
|
658
683
|
|
|
659
684
|
.textfield-about {
|
|
660
685
|
margin-bottom: 0.4rem;
|
|
661
|
-
color:
|
|
686
|
+
color: var(--info);
|
|
662
687
|
font-size: 1.4rem;
|
|
663
688
|
}
|
|
664
689
|
|
|
@@ -671,11 +696,11 @@ textarea:focus-visible,
|
|
|
671
696
|
font-family: arial;
|
|
672
697
|
font-size: 1.6rem;
|
|
673
698
|
border-radius: 8px;
|
|
674
|
-
border: 0.1px solid
|
|
699
|
+
border: 0.1px solid var(--info);
|
|
675
700
|
}
|
|
676
701
|
|
|
677
702
|
.pts-textArea-container textarea:focus {
|
|
678
|
-
border: 0.2rem solid
|
|
703
|
+
border: 0.2rem solid var(--action);
|
|
679
704
|
}
|
|
680
705
|
|
|
681
706
|
.pts-textarea-counter-error-container {
|
|
@@ -706,7 +731,7 @@ textarea:focus-visible,
|
|
|
706
731
|
display: flex;
|
|
707
732
|
align-items: center;
|
|
708
733
|
background-color: transparent;
|
|
709
|
-
color:
|
|
734
|
+
color: var(--action);
|
|
710
735
|
border: none;
|
|
711
736
|
cursor: pointer;
|
|
712
737
|
font-size: 1.3rem;
|
|
@@ -739,8 +764,6 @@ textarea:focus-visible,
|
|
|
739
764
|
|
|
740
765
|
.pts-root-answer,
|
|
741
766
|
.answer {
|
|
742
|
-
width: auto;
|
|
743
|
-
margin-bottom: 8px;
|
|
744
767
|
}
|
|
745
768
|
|
|
746
769
|
.pts-root-answer ul {
|
|
@@ -768,18 +791,8 @@ textarea:focus-visible,
|
|
|
768
791
|
width: 100%;
|
|
769
792
|
}
|
|
770
793
|
|
|
771
|
-
.pts-legend {
|
|
772
|
-
display: block;
|
|
773
|
-
margin-bottom: 3.6rem;
|
|
774
|
-
}
|
|
775
|
-
|
|
776
|
-
.multipleCheckboxes-legend {
|
|
777
|
-
font-weight: 700 !important;
|
|
778
|
-
margin-bottom: 3.6rem;
|
|
779
|
-
}
|
|
780
|
-
|
|
781
794
|
.no-answer-preview-page {
|
|
782
|
-
color:
|
|
795
|
+
color: var(--info);
|
|
783
796
|
}
|
|
784
797
|
|
|
785
798
|
.pts-preview-header {
|
|
@@ -795,7 +808,7 @@ textarea:focus-visible,
|
|
|
795
808
|
|
|
796
809
|
.pts-preview-page dl {
|
|
797
810
|
display: grid;
|
|
798
|
-
grid-template-columns:
|
|
811
|
+
grid-template-columns: 50% 50%;
|
|
799
812
|
}
|
|
800
813
|
|
|
801
814
|
.pts-preview-page dt,
|
|
@@ -820,9 +833,14 @@ textarea:focus-visible,
|
|
|
820
833
|
display: none;
|
|
821
834
|
}
|
|
822
835
|
|
|
823
|
-
.
|
|
836
|
+
.pts-addFiles-preview {
|
|
837
|
+
display: flex;
|
|
838
|
+
}
|
|
839
|
+
|
|
840
|
+
.pts-addFiles-preview .no-answer-preview-page {
|
|
824
841
|
display: inline-block;
|
|
825
842
|
padding: 16px 0px 0px 8px;
|
|
843
|
+
text-align: center;
|
|
826
844
|
width: 100%;
|
|
827
845
|
position: relative;
|
|
828
846
|
}
|
|
@@ -896,8 +914,8 @@ textarea:focus-visible,
|
|
|
896
914
|
padding: 1.6rem 2.4rem 1.6rem 2.4rem;
|
|
897
915
|
margin-top: 3.6rem;
|
|
898
916
|
border-radius: 0.8rem;
|
|
899
|
-
border: 0.1rem solid
|
|
900
|
-
border-left: 4rem solid
|
|
917
|
+
border: 0.1rem solid var(--error);
|
|
918
|
+
border-left: 4rem solid var(--error);
|
|
901
919
|
position: relative;
|
|
902
920
|
}
|
|
903
921
|
|
|
@@ -908,8 +926,8 @@ textarea:focus-visible,
|
|
|
908
926
|
width: 1.6rem;
|
|
909
927
|
height: 1.6rem;
|
|
910
928
|
border-radius: 50%;
|
|
911
|
-
background-color:
|
|
912
|
-
color:
|
|
929
|
+
background-color: var(--main);
|
|
930
|
+
color: var(--error);
|
|
913
931
|
align-items: center;
|
|
914
932
|
font-size: 1.4rem;
|
|
915
933
|
}
|
|
@@ -930,7 +948,11 @@ textarea:focus-visible,
|
|
|
930
948
|
}
|
|
931
949
|
|
|
932
950
|
.errorSummary-text {
|
|
933
|
-
color:
|
|
951
|
+
color: var(--error);
|
|
952
|
+
}
|
|
953
|
+
|
|
954
|
+
.cleanPadding{
|
|
955
|
+
padding:0;
|
|
934
956
|
}
|
|
935
957
|
|
|
936
958
|
/* ---------- FILE UPLOAD ---------- */
|
|
@@ -943,7 +965,7 @@ textarea:focus-visible,
|
|
|
943
965
|
|
|
944
966
|
/* Drop Zone */
|
|
945
967
|
.files-drop-zone {
|
|
946
|
-
border: 2px dashed
|
|
968
|
+
border: 2px dashed var(--action);
|
|
947
969
|
border-radius: 12px;
|
|
948
970
|
padding: 3rem 2rem;
|
|
949
971
|
text-align: center;
|
|
@@ -955,31 +977,31 @@ textarea:focus-visible,
|
|
|
955
977
|
}
|
|
956
978
|
|
|
957
979
|
.files-drop-zone:hover {
|
|
958
|
-
border-color:
|
|
980
|
+
border-color: var(--action);
|
|
959
981
|
background-color: #f5ebf8;
|
|
960
982
|
transform: translateY(-2px);
|
|
961
983
|
box-shadow: 0 4px 12px rgba(220, 148, 253, 0.15);
|
|
962
984
|
}
|
|
963
985
|
|
|
964
986
|
.files-drop-zone.drag-active {
|
|
965
|
-
border-color:
|
|
987
|
+
border-color: var(--action);
|
|
966
988
|
background-color: #f5ebf8;
|
|
967
989
|
transform: scale(1.02);
|
|
968
990
|
box-shadow: 0 8px 25px rgba(30, 167, 253, 0.2);
|
|
969
991
|
}
|
|
970
992
|
|
|
971
993
|
.files-drop-zone:focus {
|
|
972
|
-
/* border-color:
|
|
994
|
+
/* border-color: var(--action);
|
|
973
995
|
background-color: #f5ebf8;
|
|
974
996
|
transform: translateY(-2px);
|
|
975
997
|
box-shadow: 0 4px 12px rgba(220, 148, 253, 0.15);
|
|
976
998
|
transform: translateY(-3px);
|
|
977
999
|
|
|
978
1000
|
animation: focusPulse 1s ease-in-out infinite;
|
|
979
|
-
box-shadow: inset 0 0 0 4px
|
|
1001
|
+
box-shadow: inset 0 0 0 4px var(--action);
|
|
980
1002
|
|
|
981
1003
|
border: none; */
|
|
982
|
-
border: 0.2rem solid
|
|
1004
|
+
border: 0.2rem solid var(--action);
|
|
983
1005
|
}
|
|
984
1006
|
|
|
985
1007
|
.files-drop-zone:focus-visible {
|
|
@@ -1035,7 +1057,7 @@ textarea:focus-visible,
|
|
|
1035
1057
|
}
|
|
1036
1058
|
|
|
1037
1059
|
.files-allowed-types strong {
|
|
1038
|
-
color:
|
|
1060
|
+
color: var(--action);
|
|
1039
1061
|
}
|
|
1040
1062
|
|
|
1041
1063
|
.files-input-hidden {
|
|
@@ -1270,12 +1292,12 @@ textarea:focus-visible,
|
|
|
1270
1292
|
}
|
|
1271
1293
|
|
|
1272
1294
|
.action-btn.remove {
|
|
1273
|
-
color:
|
|
1274
|
-
border-color:
|
|
1295
|
+
color: var(--action);
|
|
1296
|
+
border-color: var(--action);
|
|
1275
1297
|
}
|
|
1276
1298
|
|
|
1277
1299
|
.action-btn.remove:hover {
|
|
1278
|
-
background-color:
|
|
1300
|
+
background-color: var(--action);
|
|
1279
1301
|
color: white;
|
|
1280
1302
|
}
|
|
1281
1303
|
|
|
@@ -1374,7 +1396,7 @@ textarea:focus-visible,
|
|
|
1374
1396
|
}
|
|
1375
1397
|
|
|
1376
1398
|
.filePickButton.error {
|
|
1377
|
-
background:
|
|
1399
|
+
background: var(--error) !important;
|
|
1378
1400
|
color: #fff !important;
|
|
1379
1401
|
}
|
|
1380
1402
|
|
|
@@ -1411,7 +1433,7 @@ textarea:focus-visible,
|
|
|
1411
1433
|
}
|
|
1412
1434
|
|
|
1413
1435
|
/* .uploadedDot.uploadFailed {
|
|
1414
|
-
background: var(--red-green-red,
|
|
1436
|
+
background: var(--red-green-red, var(--error));
|
|
1415
1437
|
|
|
1416
1438
|
color: var(--neutral-300, #fff);
|
|
1417
1439
|
} */
|
|
@@ -1504,8 +1526,8 @@ textarea:focus-visible,
|
|
|
1504
1526
|
|
|
1505
1527
|
.DropZone svg {
|
|
1506
1528
|
border-radius: 55%;
|
|
1507
|
-
background: var(--purple-purple-900-primary,
|
|
1508
|
-
border: 6px solid
|
|
1529
|
+
background: var(--purple-purple-900-primary, var(--action));
|
|
1530
|
+
border: 6px solid var(--action);
|
|
1509
1531
|
margin-top: 17px;
|
|
1510
1532
|
margin-right: 16px;
|
|
1511
1533
|
height: 1.5rem;
|
|
@@ -1560,7 +1582,7 @@ textarea:focus-visible,
|
|
|
1560
1582
|
|
|
1561
1583
|
.fileItem {
|
|
1562
1584
|
display: grid !important;
|
|
1563
|
-
grid-template-columns: 26px
|
|
1585
|
+
grid-template-columns: 26px 1fr 60px;
|
|
1564
1586
|
margin: 0 1px 1.3rem 0;
|
|
1565
1587
|
}
|
|
1566
1588
|
|
|
@@ -1575,11 +1597,10 @@ textarea:focus-visible,
|
|
|
1575
1597
|
|
|
1576
1598
|
.selectedFilesLinkButton {
|
|
1577
1599
|
display: flex;
|
|
1578
|
-
align-items: center;
|
|
1579
1600
|
padding: 0;
|
|
1580
1601
|
stroke-width: 2px;
|
|
1581
|
-
stroke: var(--purple-900-primary,
|
|
1582
|
-
color: var(--purple-900-primary,
|
|
1602
|
+
stroke: var(--purple-900-primary, var(--action));
|
|
1603
|
+
color: var(--purple-900-primary, var(--action));
|
|
1583
1604
|
font-size: 1.6rem;
|
|
1584
1605
|
line-height: 24px;
|
|
1585
1606
|
text-decoration: none;
|
|
@@ -1589,7 +1610,7 @@ textarea:focus-visible,
|
|
|
1589
1610
|
}
|
|
1590
1611
|
|
|
1591
1612
|
.selectedFilesLinkButton:hover {
|
|
1592
|
-
color: var(--purple-900-primary,
|
|
1613
|
+
color: var(--purple-900-primary, var(--action));
|
|
1593
1614
|
text-decoration: underline;
|
|
1594
1615
|
}
|
|
1595
1616
|
|
|
@@ -1631,7 +1652,7 @@ textarea:focus-visible,
|
|
|
1631
1652
|
}
|
|
1632
1653
|
|
|
1633
1654
|
.errorMessageAddingFile {
|
|
1634
|
-
color: var(--red-green-red,
|
|
1655
|
+
color: var(--red-green-red, var(--error));
|
|
1635
1656
|
font-size: 1.3rem;
|
|
1636
1657
|
line-height: 1.6rem;
|
|
1637
1658
|
padding-top: 0.8rem !important;
|
|
@@ -1670,7 +1691,7 @@ textarea:focus-visible,
|
|
|
1670
1691
|
}
|
|
1671
1692
|
.uploadIndicator.uploadFailed {
|
|
1672
1693
|
width: 10%;
|
|
1673
|
-
background: var(--red-green-red,
|
|
1694
|
+
background: var(--red-green-red, var(--error));
|
|
1674
1695
|
}
|
|
1675
1696
|
.uploadIndicator.uploadLoading {
|
|
1676
1697
|
width: 50%;
|
|
@@ -1678,48 +1699,7 @@ textarea:focus-visible,
|
|
|
1678
1699
|
}
|
|
1679
1700
|
/* ---------- END FILE UPLOAD ---------- */
|
|
1680
1701
|
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
margin-left: 12px;
|
|
1686
|
-
}
|
|
1687
|
-
}
|
|
1688
|
-
|
|
1689
|
-
@media (max-width: 768px) {
|
|
1690
|
-
.uploadIndicator {
|
|
1691
|
-
display: none;
|
|
1692
|
-
}
|
|
1693
|
-
}
|
|
1694
|
-
|
|
1695
|
-
@media (max-width: 768px) {
|
|
1696
|
-
.DropZoneContainer {
|
|
1697
|
-
display: none;
|
|
1698
|
-
}
|
|
1699
|
-
}
|
|
1700
|
-
|
|
1701
|
-
@media (max-width: 768px) {
|
|
1702
|
-
.inputContainer {
|
|
1703
|
-
margin-bottom: 16px;
|
|
1704
|
-
}
|
|
1705
|
-
}
|
|
1706
|
-
|
|
1707
|
-
@media (max-width: 990px) {
|
|
1708
|
-
.filePickLabel .filePickButton {
|
|
1709
|
-
font-size: 1.4rem;
|
|
1710
|
-
line-height: 14px;
|
|
1711
|
-
text-align: center;
|
|
1712
|
-
}
|
|
1713
|
-
}
|
|
1714
|
-
|
|
1715
|
-
@media (max-width: 480px) {
|
|
1716
|
-
.files-upload {
|
|
1717
|
-
padding: 0 0.5rem;
|
|
1718
|
-
}
|
|
1719
|
-
}
|
|
1720
|
-
|
|
1721
|
-
@media (max-width: 768px) {
|
|
1722
|
-
.files-drop-zone {
|
|
1723
|
-
padding: 2rem 1rem;
|
|
1724
|
-
}
|
|
1725
|
-
}
|
|
1702
|
+
.unsetMargin-Padding{
|
|
1703
|
+
margin:0;
|
|
1704
|
+
padding:0;
|
|
1705
|
+
}
|