@npm_leadtech/legal-lib-components 5.22.2 → 5.22.3

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,5 +1,46 @@
1
1
  import styled from 'styled-components';
2
2
  export const FixedFooterStyled = styled.div `
3
+ .prefooter {
4
+ background-color: var(--primary-main-light-6);
5
+ text-align: center;
6
+ }
7
+ .prefooter .prefooter-container {
8
+ margin: 0 1.5rem;
9
+ }
10
+ @media (min-width: 720px) {
11
+ .prefooter .prefooter-container {
12
+ margin: 0;
13
+ }
14
+ }
15
+ .prefooter--columns {
16
+ display: flex;
17
+ flex-direction: column;
18
+ align-items: center;
19
+ justify-content: space-between;
20
+ }
21
+ @media (min-width: 720px) {
22
+ .prefooter--columns {
23
+ flex-direction: row;
24
+ margin: 0 1rem;
25
+ align-items: flex-start;
26
+ }
27
+ }
28
+ .prefooter--columns p {
29
+ width: 16.375rem;
30
+ color: var(--neutral-neutral-1);
31
+ margin: 2rem 0.5rem 0 0.5rem;
32
+ }
33
+ .prefooter .e-button {
34
+ display: inline-block;
35
+ margin: 2rem 0;
36
+ }
37
+
38
+ .prefooter__title {
39
+ color: var(--neutral-neutral-1);
40
+ display: inline-block;
41
+ margin: 2rem 0 0;
42
+ }
43
+
3
44
  footer {
4
45
  margin-top: auto;
5
46
  left: 0;
@@ -8,38 +49,32 @@ export const FixedFooterStyled = styled.div `
8
49
  width: 100%;
9
50
  background-color: var(--primary-main-dark-2);
10
51
  color: var(--primary-main-light-6);
52
+ /*LEG-5512: A/B*/
11
53
  }
12
-
13
- .language-selector-mobile-container {
54
+ footer .language-selector-mobile-container {
14
55
  max-width: 1200px;
15
56
  margin: auto;
16
57
  padding: 2.75rem 1rem 1rem;
17
58
  }
18
-
19
59
  @media (min-width: 720px) {
20
- .language-selector-mobile-container {
60
+ footer .language-selector-mobile-container {
21
61
  display: none;
22
62
  }
23
63
  }
24
-
25
64
  footer a {
26
65
  color: var(--primary-main-light-6);
27
66
  text-decoration: none;
28
67
  }
29
-
30
68
  footer li {
31
69
  margin-bottom: 1.25rem;
32
70
  }
33
-
34
71
  footer li a {
35
72
  padding: 0.5rem 0;
36
73
  }
37
-
38
74
  footer li:last-child {
39
75
  margin-bottom: 0;
40
76
  }
41
-
42
- .footer__wrapper {
77
+ footer .footer__wrapper {
43
78
  display: flex;
44
79
  flex-flow: row wrap;
45
80
  max-width: 1200px;
@@ -49,28 +84,24 @@ export const FixedFooterStyled = styled.div `
49
84
  padding: 1rem 1rem 2.75rem;
50
85
  grid-row-gap: 32px;
51
86
  }
52
-
53
87
  @media (min-width: 960px) {
54
- .footer__wrapper {
88
+ footer .footer__wrapper {
55
89
  padding: 2.75rem 0;
56
90
  }
57
91
  }
58
-
59
- .footer__wrapper__logo {
92
+ footer .footer__wrapper__logo {
60
93
  width: 45%;
61
94
  max-width: 45%;
62
95
  display: flex;
63
96
  align-items: baseline;
64
97
  }
65
-
66
98
  @media (min-width: 720px) {
67
- .footer__wrapper__logo {
99
+ footer .footer__wrapper__logo {
68
100
  width: 100%;
69
101
  max-width: 100%;
70
102
  }
71
103
  }
72
-
73
- .sem-footer__wrapper {
104
+ footer .sem-footer__wrapper {
74
105
  display: flex;
75
106
  flex-flow: column wrap;
76
107
  width: 100%;
@@ -80,103 +111,89 @@ export const FixedFooterStyled = styled.div `
80
111
  padding: 1rem 1rem 2.75rem;
81
112
  grid-row-gap: 32px;
82
113
  }
83
-
84
114
  @media (min-width: 960px) {
85
- .sem-footer__wrapper {
115
+ footer .sem-footer__wrapper {
86
116
  flex-flow: row wrap;
87
117
  padding: 1.5rem 1rem;
88
118
  }
89
119
  }
90
-
91
- .sem-footer__legal-links {
120
+ footer .sem-footer__legal-links {
92
121
  display: flex;
93
122
  flex-flow: row wrap;
94
123
  align-items: center;
95
124
  gap: 1rem;
96
125
  }
97
-
98
- .sem-footer__legal-links li {
126
+ footer .sem-footer__legal-links li {
99
127
  margin-bottom: 0;
100
128
  }
101
-
102
- .sem-footer__contact-info {
129
+ footer .sem-footer__contact-info {
103
130
  display: flex;
104
131
  flex-flow: column;
132
+ -moz-column-gap: 0.5rem;
105
133
  column-gap: 0.5rem;
106
134
  row-gap: 0.25rem;
107
135
  }
108
-
109
136
  @media (min-width: 575px) {
110
- .sem-footer__contact-info {
137
+ footer .sem-footer__contact-info {
111
138
  flex-flow: row;
112
139
  }
113
140
  }
114
-
115
- .sem-footer__contact-info__phone {
141
+ footer .sem-footer__contact-info__phone {
116
142
  display: flex;
117
143
  align-items: center;
118
144
  font-size: 0.8rem;
119
145
  }
120
-
121
- .sem-footer__contact-info__schedule {
146
+ footer .sem-footer__contact-info__schedule {
122
147
  font-size: 0.75rem;
123
148
  }
124
-
125
- .fixed-container {
149
+ footer .fixed-container {
126
150
  position: fixed;
127
151
  bottom: 0;
128
152
  z-index: 3;
129
153
  width: 100%;
130
154
  }
131
-
132
- .footer__products,
133
- .footer__popular-documents,
134
- .footer__company {
155
+ footer .footer__products,
156
+ footer .footer__popular-documents,
157
+ footer .footer__company {
135
158
  width: 100%;
136
159
  max-width: 50%;
137
160
  display: flex;
138
161
  flex-flow: column wrap;
139
162
  justify-content: flex-start;
140
163
  }
141
-
142
- .footer__products p,
143
- .footer__popular-documents p,
144
- .footer__company p {
164
+ footer .footer__products p,
165
+ footer .footer__popular-documents p,
166
+ footer .footer__company p {
145
167
  margin-bottom: 1.5rem;
146
168
  }
147
-
148
169
  @media (min-width: 575px) {
149
- .footer__products,
150
- .footer__popular-documents,
151
- .footer__company {
170
+ footer .footer__products,
171
+ footer .footer__popular-documents,
172
+ footer .footer__company {
152
173
  max-width: 28%;
153
174
  padding-right: 1.5rem;
154
175
  }
155
176
  }
156
-
157
177
  @media (min-width: 960px) {
158
- .footer__products,
159
- .footer__popular-documents,
160
- .footer__company {
178
+ footer .footer__products,
179
+ footer .footer__popular-documents,
180
+ footer .footer__company {
161
181
  max-width: 20%;
162
182
  }
163
183
  }
164
-
165
184
  @media (max-width: 575px) {
166
- .footer__products,
167
- .footer__popular-documents,
168
- .footer__company {
185
+ footer .footer__products,
186
+ footer .footer__popular-documents,
187
+ footer .footer__company {
169
188
  max-width: 100%;
170
189
  }
171
190
  }
172
-
173
- .footer__company__resources__findUs .footer__resources,
174
- .footer__help__resources .footer__resources {
191
+ footer .footer__company__resources__findUs .footer__resources,
192
+ footer .footer__help__resources .footer__resources {
175
193
  margin-top: 22px;
176
194
  }
177
-
178
- .footer__help__resources,
179
- .footer__company {
195
+ footer .footer__help__resources,
196
+ footer .footer__company {
180
197
  display: flex;
181
198
  flex-flow: column wrap;
182
199
  justify-content: flex-start;
@@ -184,87 +201,111 @@ export const FixedFooterStyled = styled.div `
184
201
  max-width: 50%;
185
202
  width: 100%;
186
203
  }
187
-
188
204
  @media (min-width: 575px) and (max-width: 960px) {
189
- .footer__help__resources,
190
- .footer__company {
205
+ footer .footer__help__resources,
206
+ footer .footer__company {
191
207
  display: block;
192
208
  }
193
209
  }
194
-
195
- .footer__help__resources p,
196
- .footer__company p {
210
+ footer .footer__help__resources p,
211
+ footer .footer__company p {
197
212
  margin-bottom: 1.5rem;
198
213
  }
199
-
200
214
  @media (min-width: 575px) {
201
- .footer__help__resources,
202
- .footer__company {
215
+ footer .footer__help__resources,
216
+ footer .footer__company {
203
217
  max-width: 22.5%;
204
218
  padding-right: 1rem;
205
219
  }
206
220
  }
207
-
208
221
  @media (min-width: 960px) {
209
- .footer__help__resources,
210
- .footer__company {
222
+ footer .footer__help__resources,
223
+ footer .footer__company {
211
224
  max-width: 15%;
212
225
  }
213
226
  }
214
-
215
- .footer__findUs {
227
+ footer .footer__help__resources p,
228
+ footer .footer__findUs p {
229
+ margin-bottom: 1.25rem;
230
+ }
231
+ footer .footer__findUs {
216
232
  display: flex;
217
233
  flex-flow: row nowrap;
218
234
  flex-direction: column;
219
235
  max-width: 100%;
220
236
  }
221
-
222
- .footer__findUs .trustpilot-widget {
237
+ footer .footer__findUs .trustpilot-widget {
223
238
  margin-top: 0;
224
239
  }
225
-
226
240
  @media (min-width: 575px) {
227
- .footer__findUs .trustpilot-widget {
241
+ footer .footer__findUs .trustpilot-widget {
228
242
  margin-top: 22px;
229
243
  }
230
244
  }
231
-
232
245
  @media (min-width: 720px) {
233
- .footer__findUs {
246
+ footer .footer__findUs {
234
247
  display: block;
235
248
  max-width: 20%;
236
249
  }
237
250
  }
238
-
239
251
  @media (min-width: 960px) {
240
- .footer__findUs {
252
+ footer .footer__findUs {
241
253
  max-width: 15%;
242
254
  }
243
255
  }
244
-
245
256
  @media (max-width: 575px) {
246
- .footer__findUs {
257
+ footer .footer__findUs {
247
258
  width: 100%;
248
259
  }
249
260
  }
250
-
251
- .footer__findUs ul {
261
+ footer .footer__findUs ul {
252
262
  display: flex;
253
263
  flex-direction: row;
254
264
  }
255
-
256
- .footer__findUs ul li {
265
+ footer .footer__findUs ul li {
257
266
  margin-right: 0.4rem;
258
267
  }
259
-
260
- .footer-links__title {
268
+ footer .footer__help__findUs {
269
+ max-width: 100%;
270
+ width: 100%;
271
+ display: flex;
272
+ flex-flow: row wrap;
273
+ }
274
+ footer .footer__help__findUs div {
275
+ width: 50%;
276
+ }
277
+ @media (min-width: 575px) {
278
+ footer .footer__help__findUs div {
279
+ width: 100%;
280
+ }
281
+ }
282
+ @media (min-width: 720px) {
283
+ footer .footer__help__findUs div {
284
+ width: 100%;
285
+ }
286
+ }
287
+ @media (min-width: 960px) {
288
+ footer .footer__help__findUs div {
289
+ width: 50%;
290
+ }
291
+ }
292
+ @media (min-width: 575px) {
293
+ footer .footer__help__findUs {
294
+ max-width: 30%;
295
+ }
296
+ }
297
+ @media (min-width: 960px) {
298
+ footer .footer__help__findUs {
299
+ max-width: 40%;
300
+ }
301
+ }
302
+ footer .footer-links__title {
261
303
  width: 100%;
262
304
  text-transform: uppercase;
263
305
  font-weight: bold;
264
306
  color: var(--primary-main-light-4);
265
307
  }
266
-
267
- .product-categories {
308
+ footer .product-categories {
268
309
  cursor: pointer;
269
310
  display: flex;
270
311
  flex-flow: row wrap;
@@ -283,48 +324,74 @@ export const FixedFooterStyled = styled.div `
283
324
  width: 100%;
284
325
  padding-bottom: 0.6rem;
285
326
  }
286
-
287
- .product-categories:not(:last-child) {
327
+ footer .product-categories:not(:last-child) {
288
328
  border-bottom: 1px solid var(--primary-main);
289
329
  }
290
-
291
- .product-categories:has(.open) {
330
+ footer .product-categories:has(.open) {
292
331
  padding-bottom: 0;
293
332
  }
294
-
295
- .expand-icon {
333
+ footer .expand-icon {
296
334
  width: 10px;
297
335
  height: 13px;
298
336
  transform: rotate(90deg);
299
337
  margin-right: 8px;
300
338
  }
301
-
302
- .expand-icon:before,
303
- .expand-icon:after {
339
+ footer .expand-icon:before,
340
+ footer .expand-icon:after {
304
341
  width: 2px;
305
342
  background-color: var(--others-white);
306
343
  }
307
-
308
- .expand-icon.open {
344
+ footer .expand-icon.open {
309
345
  transform: rotate(-90deg);
310
346
  }
311
-
312
- .rotate {
347
+ footer .rotate {
313
348
  transform: rotate(180deg);
314
349
  }
315
-
316
- .list-box {
350
+ footer .list-box {
317
351
  background-color: var(--primary-main-dark-1);
318
352
  width: 100%;
319
353
  padding-left: 0.5rem;
320
354
  margin-top: 0.6rem;
321
355
  }
322
-
323
- .list-products {
356
+ footer .list-products {
324
357
  margin: 14px 0;
325
358
  }
326
-
327
- .footer__media__logos__wrapper {
359
+ footer .findUs__display {
360
+ flex-flow: row nowrap;
361
+ }
362
+ footer .findUs__display ul {
363
+ display: flex;
364
+ flex-wrap: wrap;
365
+ }
366
+ footer .findUs__display ul li {
367
+ margin-right: 1rem;
368
+ }
369
+ @media (min-width: 575px) and (max-width: 960px) {
370
+ footer .footer__company__resources__findUs {
371
+ display: flex;
372
+ flex-direction: column;
373
+ max-width: 30%;
374
+ margin-right: 1.5rem;
375
+ }
376
+ footer .footer__company__resources__findUs p {
377
+ margin-bottom: 1.5rem;
378
+ }
379
+ }
380
+ @media (min-width: 575px) and (max-width: 960px) {
381
+ footer .footer__help__tablet {
382
+ display: block;
383
+ margin-top: 22px;
384
+ }
385
+ }
386
+ footer .footer__help__mobile {
387
+ display: none;
388
+ }
389
+ @media (max-width: 575px) {
390
+ footer .footer__help__mobile {
391
+ display: block;
392
+ }
393
+ }
394
+ footer .footer__media__logos__wrapper {
328
395
  width: 84%;
329
396
  display: flex;
330
397
  justify-content: space-around;
@@ -332,62 +399,196 @@ export const FixedFooterStyled = styled.div `
332
399
  flex-wrap: wrap;
333
400
  flex-direction: row;
334
401
  }
335
-
336
- .footer__media__logos__wrapper .logo {
402
+ footer .footer__media__logos__wrapper .logo {
337
403
  display: inline-flex;
338
404
  padding-left: 20px;
339
405
  align-items: center;
340
406
  height: 59px;
341
407
  }
342
-
343
- .footer__media__logos__wrapper .logo:first-child {
408
+ footer .footer__media__logos__wrapper .logo:first-child {
344
409
  padding-left: 0;
345
410
  }
346
-
411
+ footer .footer__media__logos__wrapper .logo:last-child {
412
+ padding-right: 0;
413
+ }
414
+ @media (max-width: 720px) {
415
+ footer .footer__media__logos__wrapper .logo:last-child {
416
+ align-items: center;
417
+ padding-right: 20px;
418
+ }
419
+ }
420
+ @media screen\11, (max-width: 720px) {
421
+ footer .footer__media__logos__wrapper .logo:last-child {
422
+ width: 30%;
423
+ align-self: center;
424
+ display: block;
425
+ height: auto;
426
+ }
427
+ }
428
+ @media (min-width: 720px) and (max-width: 960px) {
429
+ footer .footer__media__logos__wrapper .logo:last-child {
430
+ width: 13%;
431
+ height: 42px;
432
+ }
433
+ }
434
+ @media (max-width: 720px) {
435
+ footer .footer__media__logos__wrapper .logo:nth-child(3) {
436
+ padding-left: 0;
437
+ }
438
+ }
439
+ @media screen\11, (max-width: 720px) {
440
+ footer .footer__media__logos__wrapper .logo:nth-child(3) {
441
+ width: 30%;
442
+ align-self: center;
443
+ display: block;
444
+ height: 90px;
445
+ }
446
+ }
447
+ @media (max-width: 720px) {
448
+ footer .footer__media__logos__wrapper .logo:nth-child(4) {
449
+ width: 33%;
450
+ margin-top: 10px;
451
+ }
452
+ }
453
+ @media (min-width: 720px) and (max-width: 960px) {
454
+ footer .footer__media__logos__wrapper .logo:nth-child(4) {
455
+ width: 17%;
456
+ }
457
+ }
458
+ @media screen\11, (max-width: 720px) {
459
+ footer .footer__media__logos__wrapper .logo:nth-child(4) {
460
+ width: 30%;
461
+ align-self: center;
462
+ display: block;
463
+ }
464
+ }
465
+ @media (max-width: 720px) {
466
+ footer .footer__media__logos__wrapper .logo {
467
+ width: 50%;
468
+ }
469
+ }
470
+ @media screen\11, (max-width: 720px) {
471
+ footer .footer__media__logos__wrapper .logo {
472
+ width: 45%;
473
+ align-self: center;
474
+ display: block;
475
+ }
476
+ }
477
+ @media (min-width: 720px) and (max-width: 960px) {
478
+ footer .footer__media__logos__wrapper .logo {
479
+ width: 25%;
480
+ }
481
+ }
482
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
483
+ footer .footer__media__logos__wrapper .logo .logo__image {
484
+ align-self: center;
485
+ }
486
+ }
487
+ footer .footer__media__logos__wrapper .align__item {
488
+ align-items: flex-end;
489
+ height: 43px;
490
+ }
491
+ footer .footer__media__logos__wrapper .align__item:last-child {
492
+ height: 50px;
493
+ }
494
+ @media (min-width: 720px) and (max-width: 960px) {
495
+ footer .footer__media__logos__wrapper .align__item:last-child {
496
+ height: 43px;
497
+ }
498
+ }
499
+ @media screen\11, (max-width: 720px) {
500
+ footer .footer__media__logos__wrapper .align__item:last-child {
501
+ height: 90px;
502
+ }
503
+ }
504
+ @media (max-width: 720px) {
505
+ footer .footer__media__logos__wrapper .align__item {
506
+ width: 33%;
507
+ margin-top: 10px;
508
+ align-items: center;
509
+ }
510
+ }
511
+ @media (min-width: 720px) and (max-width: 960px) {
512
+ footer .footer__media__logos__wrapper .align__item {
513
+ width: 17%;
514
+ }
515
+ }
347
516
  @media (max-width: 720px) {
348
- .footer__media__logos__wrapper {
517
+ footer .footer__media__logos__wrapper {
349
518
  width: 100%;
350
519
  padding-bottom: 15px;
351
520
  flex-wrap: wrap;
352
521
  }
353
-
354
- .footer__media__logos__wrapper .logo {
355
- width: 50%;
522
+ }
523
+ @media (min-width: 720px) and (max-width: 960px) {
524
+ footer .footer__media__logos__wrapper {
525
+ width: 95%;
526
+ padding-bottom: 15px;
356
527
  }
357
528
  }
358
-
359
- .separator {
529
+ footer .separator {
360
530
  display: block;
361
531
  width: 84%;
362
532
  height: 1px;
363
533
  background-color: var(--primary-main-light-1);
364
534
  margin-bottom: 30px;
365
535
  }
366
-
367
536
  @media (max-width: 720px) {
368
- .separator {
537
+ footer .separator {
369
538
  width: 100%;
370
539
  }
371
540
  }
372
-
373
- .footer-trustpilot {
541
+ @media (min-width: 720px) and (max-width: 960px) {
542
+ footer .separator {
543
+ width: 95%;
544
+ }
545
+ }
546
+ footer .find-us-container {
547
+ display: flex;
548
+ }
549
+ @media (min-width: 720px) {
550
+ footer .find-us-container {
551
+ flex-direction: column;
552
+ }
553
+ }
554
+ footer .find-us-content {
555
+ display: flex;
556
+ flex-direction: column;
557
+ width: 45%;
558
+ margin-right: 1rem;
559
+ }
560
+ @media (min-width: 575px) and (max-width: 960px) {
561
+ footer .find-us-content {
562
+ width: 100%;
563
+ margin-right: 0;
564
+ }
565
+ }
566
+ @media (min-width: 960px) {
567
+ footer .find-us-content {
568
+ width: 90%;
569
+ max-width: 90%;
570
+ margin-right: 0;
571
+ }
572
+ }
573
+ footer .find-us-content img {
574
+ width: 24px;
575
+ height: 24px;
576
+ }
577
+ footer .footer-trustpilot {
374
578
  display: none;
375
579
  }
376
-
377
580
  @media (min-width: 720px) {
378
- .footer-trustpilot {
581
+ footer .footer-trustpilot {
379
582
  display: flex;
380
583
  }
381
584
  }
382
-
383
- .footer-trustpilot-mobile {
585
+ footer .footer-trustpilot-mobile {
384
586
  display: flex;
385
587
  width: 100%;
386
588
  margin: 1rem 0 2rem 0;
387
589
  }
388
-
389
590
  @media (min-width: 720px) {
390
- .footer-trustpilot-mobile {
591
+ footer .footer-trustpilot-mobile {
391
592
  display: none;
392
593
  }
393
594
  }
@@ -1,6 +1,47 @@
1
1
  import styled from 'styled-components'
2
2
 
3
3
  export const FixedFooterStyled = styled.div`
4
+ .prefooter {
5
+ background-color: var(--primary-main-light-6);
6
+ text-align: center;
7
+ }
8
+ .prefooter .prefooter-container {
9
+ margin: 0 1.5rem;
10
+ }
11
+ @media (min-width: 720px) {
12
+ .prefooter .prefooter-container {
13
+ margin: 0;
14
+ }
15
+ }
16
+ .prefooter--columns {
17
+ display: flex;
18
+ flex-direction: column;
19
+ align-items: center;
20
+ justify-content: space-between;
21
+ }
22
+ @media (min-width: 720px) {
23
+ .prefooter--columns {
24
+ flex-direction: row;
25
+ margin: 0 1rem;
26
+ align-items: flex-start;
27
+ }
28
+ }
29
+ .prefooter--columns p {
30
+ width: 16.375rem;
31
+ color: var(--neutral-neutral-1);
32
+ margin: 2rem 0.5rem 0 0.5rem;
33
+ }
34
+ .prefooter .e-button {
35
+ display: inline-block;
36
+ margin: 2rem 0;
37
+ }
38
+
39
+ .prefooter__title {
40
+ color: var(--neutral-neutral-1);
41
+ display: inline-block;
42
+ margin: 2rem 0 0;
43
+ }
44
+
4
45
  footer {
5
46
  margin-top: auto;
6
47
  left: 0;
@@ -9,38 +50,32 @@ export const FixedFooterStyled = styled.div`
9
50
  width: 100%;
10
51
  background-color: var(--primary-main-dark-2);
11
52
  color: var(--primary-main-light-6);
53
+ /*LEG-5512: A/B*/
12
54
  }
13
-
14
- .language-selector-mobile-container {
55
+ footer .language-selector-mobile-container {
15
56
  max-width: 1200px;
16
57
  margin: auto;
17
58
  padding: 2.75rem 1rem 1rem;
18
59
  }
19
-
20
60
  @media (min-width: 720px) {
21
- .language-selector-mobile-container {
61
+ footer .language-selector-mobile-container {
22
62
  display: none;
23
63
  }
24
64
  }
25
-
26
65
  footer a {
27
66
  color: var(--primary-main-light-6);
28
67
  text-decoration: none;
29
68
  }
30
-
31
69
  footer li {
32
70
  margin-bottom: 1.25rem;
33
71
  }
34
-
35
72
  footer li a {
36
73
  padding: 0.5rem 0;
37
74
  }
38
-
39
75
  footer li:last-child {
40
76
  margin-bottom: 0;
41
77
  }
42
-
43
- .footer__wrapper {
78
+ footer .footer__wrapper {
44
79
  display: flex;
45
80
  flex-flow: row wrap;
46
81
  max-width: 1200px;
@@ -50,28 +85,24 @@ export const FixedFooterStyled = styled.div`
50
85
  padding: 1rem 1rem 2.75rem;
51
86
  grid-row-gap: 32px;
52
87
  }
53
-
54
88
  @media (min-width: 960px) {
55
- .footer__wrapper {
89
+ footer .footer__wrapper {
56
90
  padding: 2.75rem 0;
57
91
  }
58
92
  }
59
-
60
- .footer__wrapper__logo {
93
+ footer .footer__wrapper__logo {
61
94
  width: 45%;
62
95
  max-width: 45%;
63
96
  display: flex;
64
97
  align-items: baseline;
65
98
  }
66
-
67
99
  @media (min-width: 720px) {
68
- .footer__wrapper__logo {
100
+ footer .footer__wrapper__logo {
69
101
  width: 100%;
70
102
  max-width: 100%;
71
103
  }
72
104
  }
73
-
74
- .sem-footer__wrapper {
105
+ footer .sem-footer__wrapper {
75
106
  display: flex;
76
107
  flex-flow: column wrap;
77
108
  width: 100%;
@@ -81,103 +112,89 @@ export const FixedFooterStyled = styled.div`
81
112
  padding: 1rem 1rem 2.75rem;
82
113
  grid-row-gap: 32px;
83
114
  }
84
-
85
115
  @media (min-width: 960px) {
86
- .sem-footer__wrapper {
116
+ footer .sem-footer__wrapper {
87
117
  flex-flow: row wrap;
88
118
  padding: 1.5rem 1rem;
89
119
  }
90
120
  }
91
-
92
- .sem-footer__legal-links {
121
+ footer .sem-footer__legal-links {
93
122
  display: flex;
94
123
  flex-flow: row wrap;
95
124
  align-items: center;
96
125
  gap: 1rem;
97
126
  }
98
-
99
- .sem-footer__legal-links li {
127
+ footer .sem-footer__legal-links li {
100
128
  margin-bottom: 0;
101
129
  }
102
-
103
- .sem-footer__contact-info {
130
+ footer .sem-footer__contact-info {
104
131
  display: flex;
105
132
  flex-flow: column;
133
+ -moz-column-gap: 0.5rem;
106
134
  column-gap: 0.5rem;
107
135
  row-gap: 0.25rem;
108
136
  }
109
-
110
137
  @media (min-width: 575px) {
111
- .sem-footer__contact-info {
138
+ footer .sem-footer__contact-info {
112
139
  flex-flow: row;
113
140
  }
114
141
  }
115
-
116
- .sem-footer__contact-info__phone {
142
+ footer .sem-footer__contact-info__phone {
117
143
  display: flex;
118
144
  align-items: center;
119
145
  font-size: 0.8rem;
120
146
  }
121
-
122
- .sem-footer__contact-info__schedule {
147
+ footer .sem-footer__contact-info__schedule {
123
148
  font-size: 0.75rem;
124
149
  }
125
-
126
- .fixed-container {
150
+ footer .fixed-container {
127
151
  position: fixed;
128
152
  bottom: 0;
129
153
  z-index: 3;
130
154
  width: 100%;
131
155
  }
132
-
133
- .footer__products,
134
- .footer__popular-documents,
135
- .footer__company {
156
+ footer .footer__products,
157
+ footer .footer__popular-documents,
158
+ footer .footer__company {
136
159
  width: 100%;
137
160
  max-width: 50%;
138
161
  display: flex;
139
162
  flex-flow: column wrap;
140
163
  justify-content: flex-start;
141
164
  }
142
-
143
- .footer__products p,
144
- .footer__popular-documents p,
145
- .footer__company p {
165
+ footer .footer__products p,
166
+ footer .footer__popular-documents p,
167
+ footer .footer__company p {
146
168
  margin-bottom: 1.5rem;
147
169
  }
148
-
149
170
  @media (min-width: 575px) {
150
- .footer__products,
151
- .footer__popular-documents,
152
- .footer__company {
171
+ footer .footer__products,
172
+ footer .footer__popular-documents,
173
+ footer .footer__company {
153
174
  max-width: 28%;
154
175
  padding-right: 1.5rem;
155
176
  }
156
177
  }
157
-
158
178
  @media (min-width: 960px) {
159
- .footer__products,
160
- .footer__popular-documents,
161
- .footer__company {
179
+ footer .footer__products,
180
+ footer .footer__popular-documents,
181
+ footer .footer__company {
162
182
  max-width: 20%;
163
183
  }
164
184
  }
165
-
166
185
  @media (max-width: 575px) {
167
- .footer__products,
168
- .footer__popular-documents,
169
- .footer__company {
186
+ footer .footer__products,
187
+ footer .footer__popular-documents,
188
+ footer .footer__company {
170
189
  max-width: 100%;
171
190
  }
172
191
  }
173
-
174
- .footer__company__resources__findUs .footer__resources,
175
- .footer__help__resources .footer__resources {
192
+ footer .footer__company__resources__findUs .footer__resources,
193
+ footer .footer__help__resources .footer__resources {
176
194
  margin-top: 22px;
177
195
  }
178
-
179
- .footer__help__resources,
180
- .footer__company {
196
+ footer .footer__help__resources,
197
+ footer .footer__company {
181
198
  display: flex;
182
199
  flex-flow: column wrap;
183
200
  justify-content: flex-start;
@@ -185,87 +202,111 @@ export const FixedFooterStyled = styled.div`
185
202
  max-width: 50%;
186
203
  width: 100%;
187
204
  }
188
-
189
205
  @media (min-width: 575px) and (max-width: 960px) {
190
- .footer__help__resources,
191
- .footer__company {
206
+ footer .footer__help__resources,
207
+ footer .footer__company {
192
208
  display: block;
193
209
  }
194
210
  }
195
-
196
- .footer__help__resources p,
197
- .footer__company p {
211
+ footer .footer__help__resources p,
212
+ footer .footer__company p {
198
213
  margin-bottom: 1.5rem;
199
214
  }
200
-
201
215
  @media (min-width: 575px) {
202
- .footer__help__resources,
203
- .footer__company {
216
+ footer .footer__help__resources,
217
+ footer .footer__company {
204
218
  max-width: 22.5%;
205
219
  padding-right: 1rem;
206
220
  }
207
221
  }
208
-
209
222
  @media (min-width: 960px) {
210
- .footer__help__resources,
211
- .footer__company {
223
+ footer .footer__help__resources,
224
+ footer .footer__company {
212
225
  max-width: 15%;
213
226
  }
214
227
  }
215
-
216
- .footer__findUs {
228
+ footer .footer__help__resources p,
229
+ footer .footer__findUs p {
230
+ margin-bottom: 1.25rem;
231
+ }
232
+ footer .footer__findUs {
217
233
  display: flex;
218
234
  flex-flow: row nowrap;
219
235
  flex-direction: column;
220
236
  max-width: 100%;
221
237
  }
222
-
223
- .footer__findUs .trustpilot-widget {
238
+ footer .footer__findUs .trustpilot-widget {
224
239
  margin-top: 0;
225
240
  }
226
-
227
241
  @media (min-width: 575px) {
228
- .footer__findUs .trustpilot-widget {
242
+ footer .footer__findUs .trustpilot-widget {
229
243
  margin-top: 22px;
230
244
  }
231
245
  }
232
-
233
246
  @media (min-width: 720px) {
234
- .footer__findUs {
247
+ footer .footer__findUs {
235
248
  display: block;
236
249
  max-width: 20%;
237
250
  }
238
251
  }
239
-
240
252
  @media (min-width: 960px) {
241
- .footer__findUs {
253
+ footer .footer__findUs {
242
254
  max-width: 15%;
243
255
  }
244
256
  }
245
-
246
257
  @media (max-width: 575px) {
247
- .footer__findUs {
258
+ footer .footer__findUs {
248
259
  width: 100%;
249
260
  }
250
261
  }
251
-
252
- .footer__findUs ul {
262
+ footer .footer__findUs ul {
253
263
  display: flex;
254
264
  flex-direction: row;
255
265
  }
256
-
257
- .footer__findUs ul li {
266
+ footer .footer__findUs ul li {
258
267
  margin-right: 0.4rem;
259
268
  }
260
-
261
- .footer-links__title {
269
+ footer .footer__help__findUs {
270
+ max-width: 100%;
271
+ width: 100%;
272
+ display: flex;
273
+ flex-flow: row wrap;
274
+ }
275
+ footer .footer__help__findUs div {
276
+ width: 50%;
277
+ }
278
+ @media (min-width: 575px) {
279
+ footer .footer__help__findUs div {
280
+ width: 100%;
281
+ }
282
+ }
283
+ @media (min-width: 720px) {
284
+ footer .footer__help__findUs div {
285
+ width: 100%;
286
+ }
287
+ }
288
+ @media (min-width: 960px) {
289
+ footer .footer__help__findUs div {
290
+ width: 50%;
291
+ }
292
+ }
293
+ @media (min-width: 575px) {
294
+ footer .footer__help__findUs {
295
+ max-width: 30%;
296
+ }
297
+ }
298
+ @media (min-width: 960px) {
299
+ footer .footer__help__findUs {
300
+ max-width: 40%;
301
+ }
302
+ }
303
+ footer .footer-links__title {
262
304
  width: 100%;
263
305
  text-transform: uppercase;
264
306
  font-weight: bold;
265
307
  color: var(--primary-main-light-4);
266
308
  }
267
-
268
- .product-categories {
309
+ footer .product-categories {
269
310
  cursor: pointer;
270
311
  display: flex;
271
312
  flex-flow: row wrap;
@@ -284,48 +325,74 @@ export const FixedFooterStyled = styled.div`
284
325
  width: 100%;
285
326
  padding-bottom: 0.6rem;
286
327
  }
287
-
288
- .product-categories:not(:last-child) {
328
+ footer .product-categories:not(:last-child) {
289
329
  border-bottom: 1px solid var(--primary-main);
290
330
  }
291
-
292
- .product-categories:has(.open) {
331
+ footer .product-categories:has(.open) {
293
332
  padding-bottom: 0;
294
333
  }
295
-
296
- .expand-icon {
334
+ footer .expand-icon {
297
335
  width: 10px;
298
336
  height: 13px;
299
337
  transform: rotate(90deg);
300
338
  margin-right: 8px;
301
339
  }
302
-
303
- .expand-icon:before,
304
- .expand-icon:after {
340
+ footer .expand-icon:before,
341
+ footer .expand-icon:after {
305
342
  width: 2px;
306
343
  background-color: var(--others-white);
307
344
  }
308
-
309
- .expand-icon.open {
345
+ footer .expand-icon.open {
310
346
  transform: rotate(-90deg);
311
347
  }
312
-
313
- .rotate {
348
+ footer .rotate {
314
349
  transform: rotate(180deg);
315
350
  }
316
-
317
- .list-box {
351
+ footer .list-box {
318
352
  background-color: var(--primary-main-dark-1);
319
353
  width: 100%;
320
354
  padding-left: 0.5rem;
321
355
  margin-top: 0.6rem;
322
356
  }
323
-
324
- .list-products {
357
+ footer .list-products {
325
358
  margin: 14px 0;
326
359
  }
327
-
328
- .footer__media__logos__wrapper {
360
+ footer .findUs__display {
361
+ flex-flow: row nowrap;
362
+ }
363
+ footer .findUs__display ul {
364
+ display: flex;
365
+ flex-wrap: wrap;
366
+ }
367
+ footer .findUs__display ul li {
368
+ margin-right: 1rem;
369
+ }
370
+ @media (min-width: 575px) and (max-width: 960px) {
371
+ footer .footer__company__resources__findUs {
372
+ display: flex;
373
+ flex-direction: column;
374
+ max-width: 30%;
375
+ margin-right: 1.5rem;
376
+ }
377
+ footer .footer__company__resources__findUs p {
378
+ margin-bottom: 1.5rem;
379
+ }
380
+ }
381
+ @media (min-width: 575px) and (max-width: 960px) {
382
+ footer .footer__help__tablet {
383
+ display: block;
384
+ margin-top: 22px;
385
+ }
386
+ }
387
+ footer .footer__help__mobile {
388
+ display: none;
389
+ }
390
+ @media (max-width: 575px) {
391
+ footer .footer__help__mobile {
392
+ display: block;
393
+ }
394
+ }
395
+ footer .footer__media__logos__wrapper {
329
396
  width: 84%;
330
397
  display: flex;
331
398
  justify-content: space-around;
@@ -333,62 +400,196 @@ export const FixedFooterStyled = styled.div`
333
400
  flex-wrap: wrap;
334
401
  flex-direction: row;
335
402
  }
336
-
337
- .footer__media__logos__wrapper .logo {
403
+ footer .footer__media__logos__wrapper .logo {
338
404
  display: inline-flex;
339
405
  padding-left: 20px;
340
406
  align-items: center;
341
407
  height: 59px;
342
408
  }
343
-
344
- .footer__media__logos__wrapper .logo:first-child {
409
+ footer .footer__media__logos__wrapper .logo:first-child {
345
410
  padding-left: 0;
346
411
  }
347
-
412
+ footer .footer__media__logos__wrapper .logo:last-child {
413
+ padding-right: 0;
414
+ }
415
+ @media (max-width: 720px) {
416
+ footer .footer__media__logos__wrapper .logo:last-child {
417
+ align-items: center;
418
+ padding-right: 20px;
419
+ }
420
+ }
421
+ @media screen\11, (max-width: 720px) {
422
+ footer .footer__media__logos__wrapper .logo:last-child {
423
+ width: 30%;
424
+ align-self: center;
425
+ display: block;
426
+ height: auto;
427
+ }
428
+ }
429
+ @media (min-width: 720px) and (max-width: 960px) {
430
+ footer .footer__media__logos__wrapper .logo:last-child {
431
+ width: 13%;
432
+ height: 42px;
433
+ }
434
+ }
435
+ @media (max-width: 720px) {
436
+ footer .footer__media__logos__wrapper .logo:nth-child(3) {
437
+ padding-left: 0;
438
+ }
439
+ }
440
+ @media screen\11, (max-width: 720px) {
441
+ footer .footer__media__logos__wrapper .logo:nth-child(3) {
442
+ width: 30%;
443
+ align-self: center;
444
+ display: block;
445
+ height: 90px;
446
+ }
447
+ }
448
+ @media (max-width: 720px) {
449
+ footer .footer__media__logos__wrapper .logo:nth-child(4) {
450
+ width: 33%;
451
+ margin-top: 10px;
452
+ }
453
+ }
454
+ @media (min-width: 720px) and (max-width: 960px) {
455
+ footer .footer__media__logos__wrapper .logo:nth-child(4) {
456
+ width: 17%;
457
+ }
458
+ }
459
+ @media screen\11, (max-width: 720px) {
460
+ footer .footer__media__logos__wrapper .logo:nth-child(4) {
461
+ width: 30%;
462
+ align-self: center;
463
+ display: block;
464
+ }
465
+ }
466
+ @media (max-width: 720px) {
467
+ footer .footer__media__logos__wrapper .logo {
468
+ width: 50%;
469
+ }
470
+ }
471
+ @media screen\11, (max-width: 720px) {
472
+ footer .footer__media__logos__wrapper .logo {
473
+ width: 45%;
474
+ align-self: center;
475
+ display: block;
476
+ }
477
+ }
478
+ @media (min-width: 720px) and (max-width: 960px) {
479
+ footer .footer__media__logos__wrapper .logo {
480
+ width: 25%;
481
+ }
482
+ }
483
+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
484
+ footer .footer__media__logos__wrapper .logo .logo__image {
485
+ align-self: center;
486
+ }
487
+ }
488
+ footer .footer__media__logos__wrapper .align__item {
489
+ align-items: flex-end;
490
+ height: 43px;
491
+ }
492
+ footer .footer__media__logos__wrapper .align__item:last-child {
493
+ height: 50px;
494
+ }
495
+ @media (min-width: 720px) and (max-width: 960px) {
496
+ footer .footer__media__logos__wrapper .align__item:last-child {
497
+ height: 43px;
498
+ }
499
+ }
500
+ @media screen\11, (max-width: 720px) {
501
+ footer .footer__media__logos__wrapper .align__item:last-child {
502
+ height: 90px;
503
+ }
504
+ }
505
+ @media (max-width: 720px) {
506
+ footer .footer__media__logos__wrapper .align__item {
507
+ width: 33%;
508
+ margin-top: 10px;
509
+ align-items: center;
510
+ }
511
+ }
512
+ @media (min-width: 720px) and (max-width: 960px) {
513
+ footer .footer__media__logos__wrapper .align__item {
514
+ width: 17%;
515
+ }
516
+ }
348
517
  @media (max-width: 720px) {
349
- .footer__media__logos__wrapper {
518
+ footer .footer__media__logos__wrapper {
350
519
  width: 100%;
351
520
  padding-bottom: 15px;
352
521
  flex-wrap: wrap;
353
522
  }
354
-
355
- .footer__media__logos__wrapper .logo {
356
- width: 50%;
523
+ }
524
+ @media (min-width: 720px) and (max-width: 960px) {
525
+ footer .footer__media__logos__wrapper {
526
+ width: 95%;
527
+ padding-bottom: 15px;
357
528
  }
358
529
  }
359
-
360
- .separator {
530
+ footer .separator {
361
531
  display: block;
362
532
  width: 84%;
363
533
  height: 1px;
364
534
  background-color: var(--primary-main-light-1);
365
535
  margin-bottom: 30px;
366
536
  }
367
-
368
537
  @media (max-width: 720px) {
369
- .separator {
538
+ footer .separator {
370
539
  width: 100%;
371
540
  }
372
541
  }
373
-
374
- .footer-trustpilot {
542
+ @media (min-width: 720px) and (max-width: 960px) {
543
+ footer .separator {
544
+ width: 95%;
545
+ }
546
+ }
547
+ footer .find-us-container {
548
+ display: flex;
549
+ }
550
+ @media (min-width: 720px) {
551
+ footer .find-us-container {
552
+ flex-direction: column;
553
+ }
554
+ }
555
+ footer .find-us-content {
556
+ display: flex;
557
+ flex-direction: column;
558
+ width: 45%;
559
+ margin-right: 1rem;
560
+ }
561
+ @media (min-width: 575px) and (max-width: 960px) {
562
+ footer .find-us-content {
563
+ width: 100%;
564
+ margin-right: 0;
565
+ }
566
+ }
567
+ @media (min-width: 960px) {
568
+ footer .find-us-content {
569
+ width: 90%;
570
+ max-width: 90%;
571
+ margin-right: 0;
572
+ }
573
+ }
574
+ footer .find-us-content img {
575
+ width: 24px;
576
+ height: 24px;
577
+ }
578
+ footer .footer-trustpilot {
375
579
  display: none;
376
580
  }
377
-
378
581
  @media (min-width: 720px) {
379
- .footer-trustpilot {
582
+ footer .footer-trustpilot {
380
583
  display: flex;
381
584
  }
382
585
  }
383
-
384
- .footer-trustpilot-mobile {
586
+ footer .footer-trustpilot-mobile {
385
587
  display: flex;
386
588
  width: 100%;
387
589
  margin: 1rem 0 2rem 0;
388
590
  }
389
-
390
591
  @media (min-width: 720px) {
391
- .footer-trustpilot-mobile {
592
+ footer .footer-trustpilot-mobile {
392
593
  display: none;
393
594
  }
394
595
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@npm_leadtech/legal-lib-components",
3
- "version": "5.22.2",
3
+ "version": "5.22.3",
4
4
  "license": "ISC",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",