@npm_leadtech/legal-lib-components 5.22.2 → 5.22.4

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