@npm_leadtech/legal-lib-components 7.12.18 → 7.12.20

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.
@@ -2,6 +2,9 @@ import { device } from '../../../globalStyles/breakpoints';
2
2
  import styled from 'styled-components';
3
3
  export const DropdownInputStyled = styled.div `
4
4
  position: relative;
5
+ padding-left: 1.5rem;
6
+ padding-right: 1.5rem;
7
+
5
8
  a {
6
9
  text-decoration: none;
7
10
  }
@@ -4,6 +4,9 @@ import styled from 'styled-components'
4
4
 
5
5
  export const DropdownInputStyled = styled.div`
6
6
  position: relative;
7
+ padding-left: 1.5rem;
8
+ padding-right: 1.5rem;
9
+
7
10
  a {
8
11
  text-decoration: none;
9
12
  }
@@ -8,7 +8,7 @@ export const MenuItemsStyled = styled.div `
8
8
 
9
9
  &__wrapper {
10
10
  width: 100%;
11
- margin-top: 3rem;
11
+ margin-top: 1rem;
12
12
  left: 0;
13
13
  background: var(--others-white);
14
14
  position: fixed;
@@ -29,7 +29,6 @@ export const MenuItemsStyled = styled.div `
29
29
  display: none;
30
30
  flex-flow: row wrap;
31
31
  justify-content: flex-end;
32
- margin-left: 1rem;
33
32
  }
34
33
 
35
34
  &__spacer {
@@ -89,11 +88,11 @@ export const MenuItemsStyled = styled.div `
89
88
  .navigation-pane__resources,
90
89
  .navigation-pane__help {
91
90
  position: relative;
92
- //margin-left: 0.5rem;
91
+ margin-left: 0.5rem;
93
92
  padding: 0.75rem 0;
94
93
  cursor: pointer;
95
94
 
96
- @media ${device['desktop']} {
95
+ @media ${device['portrait-tablets']} {
97
96
  margin-right: 1.5rem;
98
97
  padding-bottom: 0.5rem;
99
98
  }
@@ -261,7 +260,7 @@ export const MenuItemsStyled = styled.div `
261
260
  margin-right: 2.5rem;
262
261
  border-radius: var(--s-border-radius);
263
262
  transition: all 0.3s ease;
264
- padding: 0.25rem;
263
+ padding: 0.5rem 0.25rem;
265
264
  position: relative;
266
265
 
267
266
  &.all-item {
@@ -343,12 +342,39 @@ export const MenuItemsStyled = styled.div `
343
342
  // mobile pane
344
343
 
345
344
  .navigation-pane {
346
- &.--is-mobile {
345
+ .navigation-pane.--is-mobile {
347
346
  display: flex;
348
347
 
349
348
  @media ${device['landscape-tablets']} {
350
349
  display: none;
351
350
  }
351
+
352
+ .navigation-pane__user-menu {
353
+ display: flex;
354
+ flex-flow: row nowrap;
355
+ justify-content: center;
356
+ margin: 0 1rem;
357
+ padding: 1.5rem 0;
358
+ }
359
+
360
+ .navigation-pane__ratafia {
361
+ padding: 1.5rem 1.5rem 0.5rem 1.5rem;
362
+
363
+ .navigation-pane__ratafia__title {
364
+ display: flex;
365
+ justify-content: start;
366
+ align-items: center;
367
+ gap: 0.25rem;
368
+ }
369
+ }
370
+
371
+ .navigation-pane__resources {
372
+ .resources__list {
373
+ @media ${device['mobile']} {
374
+ margin-bottom: 2rem;
375
+ }
376
+ }
377
+ }
352
378
  }
353
379
 
354
380
  &__trigger {
@@ -387,7 +413,7 @@ export const MenuItemsStyled = styled.div `
387
413
  .--is-open .--is-mobile .navigation-pane {
388
414
  .navigation-pane__wrapper {
389
415
  width: 100%;
390
- margin-top: 3rem;
416
+ margin-top: 1rem;
391
417
  left: 0;
392
418
  background: var(--others-white);
393
419
  position: fixed;
@@ -473,12 +499,12 @@ export const MenuItemsStyled = styled.div `
473
499
  display: none;
474
500
  }
475
501
 
476
- &__resources {
502
+ .navigation-pane__resources {
477
503
  display: flex;
478
504
  flex-direction: column;
479
505
  align-items: flex-start;
480
- padding: 1.5rem 0 0 0;
481
- margin: 0 1.5rem 1.5rem 1.5rem;
506
+ padding: 1.5rem 0;
507
+ margin: 0 1.5rem 2rem 1.5rem;
482
508
  border-top: 1px solid var(--neutral-neutral-4);
483
509
  border-bottom: 1px solid var(--neutral-neutral-4);
484
510
  }
@@ -489,7 +515,7 @@ export const MenuItemsStyled = styled.div `
489
515
  .navigation-pane {
490
516
  .navigation-pane__wrapper {
491
517
  width: 100%;
492
- margin-top: 3rem;
518
+ margin-top: 1rem;
493
519
  left: 0;
494
520
  background: var(--others-white);
495
521
  position: fixed;
@@ -601,7 +627,7 @@ export const MenuItemsStyled = styled.div `
601
627
  display: flex;
602
628
  flex-direction: column;
603
629
  width: 100%;
604
- margin-top: 3rem;
630
+ margin-top: 1rem;
605
631
  left: 0;
606
632
  background: var(--others-white);
607
633
  position: fixed;
@@ -624,11 +650,25 @@ export const MenuItemsStyled = styled.div `
624
650
  }
625
651
  }
626
652
 
653
+ .navigation-pane__user-menu {
654
+ display: flex;
655
+ flex-flow: row nowrap;
656
+ justify-content: center;
657
+ align-content: center;
658
+ padding: 1.5rem 0;
659
+ margin: 0 1rem;
660
+
661
+ .log-in {
662
+ min-width: 120px;
663
+ margin-right: 0.5rem;
664
+ }
665
+ }
666
+
627
667
  .navigation-pane__ratafia,
628
668
  .navigation-pane__link,
629
669
  .navigation-pane__esignature {
630
670
  order: 3;
631
- padding-left: 1.5rem;
671
+ padding: 1.5rem 0 0.5rem 1.5rem;
632
672
  }
633
673
 
634
674
  .navigation-pane__products {
@@ -639,10 +679,9 @@ export const MenuItemsStyled = styled.div `
639
679
  display: flex;
640
680
  flex-direction: column;
641
681
  align-items: flex-start;
642
- padding: 1.5rem 0 0 0;
643
- margin: 0 1.5rem 1.5rem 1.5rem;
682
+ padding: 1rem 0;
683
+ margin: 0 1.5rem 2rem 1.5rem;
644
684
  border-top: 1px solid var(--neutral-neutral-4);
645
- border-bottom: 1px solid var(--neutral-neutral-4);
646
685
  width: -webkit-fill-available;
647
686
  }
648
687
  }
@@ -9,7 +9,7 @@ export const MenuItemsStyled = styled.div`
9
9
 
10
10
  &__wrapper {
11
11
  width: 100%;
12
- margin-top: 3rem;
12
+ margin-top: 1rem;
13
13
  left: 0;
14
14
  background: var(--others-white);
15
15
  position: fixed;
@@ -30,7 +30,6 @@ export const MenuItemsStyled = styled.div`
30
30
  display: none;
31
31
  flex-flow: row wrap;
32
32
  justify-content: flex-end;
33
- margin-left: 1rem;
34
33
  }
35
34
 
36
35
  &__spacer {
@@ -90,11 +89,11 @@ export const MenuItemsStyled = styled.div`
90
89
  .navigation-pane__resources,
91
90
  .navigation-pane__help {
92
91
  position: relative;
93
- //margin-left: 0.5rem;
92
+ margin-left: 0.5rem;
94
93
  padding: 0.75rem 0;
95
94
  cursor: pointer;
96
95
 
97
- @media ${device['desktop']} {
96
+ @media ${device['portrait-tablets']} {
98
97
  margin-right: 1.5rem;
99
98
  padding-bottom: 0.5rem;
100
99
  }
@@ -262,7 +261,7 @@ export const MenuItemsStyled = styled.div`
262
261
  margin-right: 2.5rem;
263
262
  border-radius: var(--s-border-radius);
264
263
  transition: all 0.3s ease;
265
- padding: 0.25rem;
264
+ padding: 0.5rem 0.25rem;
266
265
  position: relative;
267
266
 
268
267
  &.all-item {
@@ -344,12 +343,39 @@ export const MenuItemsStyled = styled.div`
344
343
  // mobile pane
345
344
 
346
345
  .navigation-pane {
347
- &.--is-mobile {
346
+ .navigation-pane.--is-mobile {
348
347
  display: flex;
349
348
 
350
349
  @media ${device['landscape-tablets']} {
351
350
  display: none;
352
351
  }
352
+
353
+ .navigation-pane__user-menu {
354
+ display: flex;
355
+ flex-flow: row nowrap;
356
+ justify-content: center;
357
+ margin: 0 1rem;
358
+ padding: 1.5rem 0;
359
+ }
360
+
361
+ .navigation-pane__ratafia {
362
+ padding: 1.5rem 1.5rem 0.5rem 1.5rem;
363
+
364
+ .navigation-pane__ratafia__title {
365
+ display: flex;
366
+ justify-content: start;
367
+ align-items: center;
368
+ gap: 0.25rem;
369
+ }
370
+ }
371
+
372
+ .navigation-pane__resources {
373
+ .resources__list {
374
+ @media ${device['mobile']} {
375
+ margin-bottom: 2rem;
376
+ }
377
+ }
378
+ }
353
379
  }
354
380
 
355
381
  &__trigger {
@@ -388,7 +414,7 @@ export const MenuItemsStyled = styled.div`
388
414
  .--is-open .--is-mobile .navigation-pane {
389
415
  .navigation-pane__wrapper {
390
416
  width: 100%;
391
- margin-top: 3rem;
417
+ margin-top: 1rem;
392
418
  left: 0;
393
419
  background: var(--others-white);
394
420
  position: fixed;
@@ -474,12 +500,12 @@ export const MenuItemsStyled = styled.div`
474
500
  display: none;
475
501
  }
476
502
 
477
- &__resources {
503
+ .navigation-pane__resources {
478
504
  display: flex;
479
505
  flex-direction: column;
480
506
  align-items: flex-start;
481
- padding: 1.5rem 0 0 0;
482
- margin: 0 1.5rem 1.5rem 1.5rem;
507
+ padding: 1.5rem 0;
508
+ margin: 0 1.5rem 2rem 1.5rem;
483
509
  border-top: 1px solid var(--neutral-neutral-4);
484
510
  border-bottom: 1px solid var(--neutral-neutral-4);
485
511
  }
@@ -490,7 +516,7 @@ export const MenuItemsStyled = styled.div`
490
516
  .navigation-pane {
491
517
  .navigation-pane__wrapper {
492
518
  width: 100%;
493
- margin-top: 3rem;
519
+ margin-top: 1rem;
494
520
  left: 0;
495
521
  background: var(--others-white);
496
522
  position: fixed;
@@ -602,7 +628,7 @@ export const MenuItemsStyled = styled.div`
602
628
  display: flex;
603
629
  flex-direction: column;
604
630
  width: 100%;
605
- margin-top: 3rem;
631
+ margin-top: 1rem;
606
632
  left: 0;
607
633
  background: var(--others-white);
608
634
  position: fixed;
@@ -628,11 +654,25 @@ export const MenuItemsStyled = styled.div`
628
654
  }
629
655
  }
630
656
 
657
+ .navigation-pane__user-menu {
658
+ display: flex;
659
+ flex-flow: row nowrap;
660
+ justify-content: center;
661
+ align-content: center;
662
+ padding: 1.5rem 0;
663
+ margin: 0 1rem;
664
+
665
+ .log-in {
666
+ min-width: 120px;
667
+ margin-right: 0.5rem;
668
+ }
669
+ }
670
+
631
671
  .navigation-pane__ratafia,
632
672
  .navigation-pane__link,
633
673
  .navigation-pane__esignature {
634
674
  order: 3;
635
- padding-left: 1.5rem;
675
+ padding: 1.5rem 0 0.5rem 1.5rem;
636
676
  }
637
677
 
638
678
  .navigation-pane__products {
@@ -643,10 +683,9 @@ export const MenuItemsStyled = styled.div`
643
683
  display: flex;
644
684
  flex-direction: column;
645
685
  align-items: flex-start;
646
- padding: 1.5rem 0 0 0;
647
- margin: 0 1.5rem 1.5rem 1.5rem;
686
+ padding: 1rem 0;
687
+ margin: 0 1.5rem 2rem 1.5rem;
648
688
  border-top: 1px solid var(--neutral-neutral-4);
649
- border-bottom: 1px solid var(--neutral-neutral-4);
650
689
  width: -webkit-fill-available;
651
690
  }
652
691
  }
@@ -2,6 +2,9 @@ import { device, size } from '../../../globalStyles/breakpoints';
2
2
  import styled from 'styled-components';
3
3
  export const NavMenuStyled = styled.nav `
4
4
  width: 100%;
5
+ display: flex;
6
+ justify-content: flex-end;
7
+
5
8
  .navigation-pane {
6
9
  &__spacer {
7
10
  display: flex;
@@ -67,11 +70,11 @@ export const NavMenuStyled = styled.nav `
67
70
  .navigation-pane__help,
68
71
  .navigation-pane__resources {
69
72
  position: relative;
70
- //margin-left: 0.5rem;
73
+ margin-left: 0.5rem;
71
74
  padding: 0.75rem 0;
72
75
  cursor: pointer;
73
76
 
74
- @media ${device['desktop']} {
77
+ @media ${device['portrait-tablets']} {
75
78
  margin-right: 1.5rem;
76
79
  padding-bottom: 0.5rem;
77
80
  }
@@ -230,7 +233,7 @@ export const NavMenuStyled = styled.nav `
230
233
  margin-right: 2.5rem;
231
234
  border-radius: var(--s-border-radius);
232
235
  transition: all 0.3s ease;
233
- padding: 0.25rem;
236
+ padding: 0.5rem 0.25rem;
234
237
  position: relative;
235
238
 
236
239
  &.all-item {
@@ -314,13 +317,39 @@ export const NavMenuStyled = styled.nav `
314
317
  // mobile-pane
315
318
 
316
319
  .navigation-pane {
317
- &.--is-mobile {
320
+ .navigation-pane.--is-mobile {
318
321
  display: flex;
319
322
  flex-direction: column;
320
323
 
321
324
  @media ${device['landscape-tablets']} {
322
325
  display: none;
323
326
  }
327
+ .navigation-pane__user-menu {
328
+ display: flex;
329
+ flex-flow: row nowrap;
330
+ justify-content: center;
331
+ margin: 0 1rem;
332
+ padding: 1.5rem 0;
333
+ }
334
+
335
+ .navigation-pane__ratafia {
336
+ padding: 1.5rem 1.5rem 0.5rem 1.5rem;
337
+
338
+ .navigation-pane__ratafia__title {
339
+ display: flex;
340
+ justify-content: start;
341
+ align-items: center;
342
+ gap: 0.25rem;
343
+ }
344
+ }
345
+
346
+ .navigation-pane__resources {
347
+ .resources__list {
348
+ @media ${device['mobile']} {
349
+ margin-bottom: 2rem;
350
+ }
351
+ }
352
+ }
324
353
  }
325
354
 
326
355
  &__trigger {
@@ -370,7 +399,7 @@ export const NavMenuStyled = styled.nav `
370
399
  .navigation-pane {
371
400
  .navigation-pane__wrapper {
372
401
  width: 100%;
373
- margin-top: 3rem;
402
+ margin-top: 1rem;
374
403
  left: 0;
375
404
  background: var(--others-white);
376
405
  position: fixed;
@@ -462,8 +491,8 @@ export const NavMenuStyled = styled.nav `
462
491
  display: flex;
463
492
  flex-direction: column;
464
493
  align-items: flex-start;
465
- padding: 1.5rem 0 0 0;
466
- margin: 0 1.5rem 1.5rem 1.5rem;
494
+ padding: 1.5rem 0;
495
+ margin: 0 1.5rem 2rem 1.5rem;
467
496
  border-top: 1px solid var(--neutral-neutral-4);
468
497
  }
469
498
  }
@@ -549,7 +578,7 @@ export const NavMenuStyled = styled.nav `
549
578
  display: flex;
550
579
  flex-direction: column;
551
580
  width: 100%;
552
- margin-top: 3rem;
581
+ margin-top: 1rem;
553
582
  left: 0;
554
583
  background: var(--others-white);
555
584
  position: fixed;
@@ -567,6 +596,20 @@ export const NavMenuStyled = styled.nav `
567
596
  }
568
597
  }
569
598
 
599
+ .navigation-pane__user-menu {
600
+ display: flex;
601
+ flex-flow: row nowrap;
602
+ justify-content: center;
603
+ align-content: center;
604
+ padding: 1.5rem 0;
605
+ margin: 0 1rem;
606
+
607
+ .log-in {
608
+ min-width: 120px;
609
+ margin-right: 0.5rem;
610
+ }
611
+ }
612
+
570
613
  .navigation-pane__ratafia,
571
614
  .navigation-pane__esignature {
572
615
  order: 3;
@@ -581,9 +624,10 @@ export const NavMenuStyled = styled.nav `
581
624
  display: flex;
582
625
  flex-direction: column;
583
626
  align-items: flex-start;
584
- padding: 1.5rem 0 0 0;
585
- margin: 0 1.5rem 1.5rem 1.5rem;
627
+ padding: 1rem 0;
628
+ margin: 0 1.5rem 2rem 1.5rem;
586
629
  border-top: 1px solid var(--neutral-neutral-4);
630
+ width: -webkit-fill-available;
587
631
  }
588
632
  }
589
633
  `;
@@ -3,6 +3,9 @@ import styled from 'styled-components'
3
3
 
4
4
  export const NavMenuStyled = styled.nav`
5
5
  width: 100%;
6
+ display: flex;
7
+ justify-content: flex-end;
8
+
6
9
  .navigation-pane {
7
10
  &__spacer {
8
11
  display: flex;
@@ -68,11 +71,11 @@ export const NavMenuStyled = styled.nav`
68
71
  .navigation-pane__help,
69
72
  .navigation-pane__resources {
70
73
  position: relative;
71
- //margin-left: 0.5rem;
74
+ margin-left: 0.5rem;
72
75
  padding: 0.75rem 0;
73
76
  cursor: pointer;
74
77
 
75
- @media ${device['desktop']} {
78
+ @media ${device['portrait-tablets']} {
76
79
  margin-right: 1.5rem;
77
80
  padding-bottom: 0.5rem;
78
81
  }
@@ -231,7 +234,7 @@ export const NavMenuStyled = styled.nav`
231
234
  margin-right: 2.5rem;
232
235
  border-radius: var(--s-border-radius);
233
236
  transition: all 0.3s ease;
234
- padding: 0.25rem;
237
+ padding: 0.5rem 0.25rem;
235
238
  position: relative;
236
239
 
237
240
  &.all-item {
@@ -315,13 +318,39 @@ export const NavMenuStyled = styled.nav`
315
318
  // mobile-pane
316
319
 
317
320
  .navigation-pane {
318
- &.--is-mobile {
321
+ .navigation-pane.--is-mobile {
319
322
  display: flex;
320
323
  flex-direction: column;
321
324
 
322
325
  @media ${device['landscape-tablets']} {
323
326
  display: none;
324
327
  }
328
+ .navigation-pane__user-menu {
329
+ display: flex;
330
+ flex-flow: row nowrap;
331
+ justify-content: center;
332
+ margin: 0 1rem;
333
+ padding: 1.5rem 0;
334
+ }
335
+
336
+ .navigation-pane__ratafia {
337
+ padding: 1.5rem 1.5rem 0.5rem 1.5rem;
338
+
339
+ .navigation-pane__ratafia__title {
340
+ display: flex;
341
+ justify-content: start;
342
+ align-items: center;
343
+ gap: 0.25rem;
344
+ }
345
+ }
346
+
347
+ .navigation-pane__resources {
348
+ .resources__list {
349
+ @media ${device['mobile']} {
350
+ margin-bottom: 2rem;
351
+ }
352
+ }
353
+ }
325
354
  }
326
355
 
327
356
  &__trigger {
@@ -371,7 +400,7 @@ export const NavMenuStyled = styled.nav`
371
400
  .navigation-pane {
372
401
  .navigation-pane__wrapper {
373
402
  width: 100%;
374
- margin-top: 3rem;
403
+ margin-top: 1rem;
375
404
  left: 0;
376
405
  background: var(--others-white);
377
406
  position: fixed;
@@ -463,8 +492,8 @@ export const NavMenuStyled = styled.nav`
463
492
  display: flex;
464
493
  flex-direction: column;
465
494
  align-items: flex-start;
466
- padding: 1.5rem 0 0 0;
467
- margin: 0 1.5rem 1.5rem 1.5rem;
495
+ padding: 1.5rem 0;
496
+ margin: 0 1.5rem 2rem 1.5rem;
468
497
  border-top: 1px solid var(--neutral-neutral-4);
469
498
  }
470
499
  }
@@ -550,7 +579,7 @@ export const NavMenuStyled = styled.nav`
550
579
  display: flex;
551
580
  flex-direction: column;
552
581
  width: 100%;
553
- margin-top: 3rem;
582
+ margin-top: 1rem;
554
583
  left: 0;
555
584
  background: var(--others-white);
556
585
  position: fixed;
@@ -571,6 +600,20 @@ export const NavMenuStyled = styled.nav`
571
600
  }
572
601
  }
573
602
 
603
+ .navigation-pane__user-menu {
604
+ display: flex;
605
+ flex-flow: row nowrap;
606
+ justify-content: center;
607
+ align-content: center;
608
+ padding: 1.5rem 0;
609
+ margin: 0 1rem;
610
+
611
+ .log-in {
612
+ min-width: 120px;
613
+ margin-right: 0.5rem;
614
+ }
615
+ }
616
+
574
617
  .navigation-pane__ratafia,
575
618
  .navigation-pane__esignature {
576
619
  order: 3;
@@ -585,9 +628,10 @@ export const NavMenuStyled = styled.nav`
585
628
  display: flex;
586
629
  flex-direction: column;
587
630
  align-items: flex-start;
588
- padding: 1.5rem 0 0 0;
589
- margin: 0 1.5rem 1.5rem 1.5rem;
631
+ padding: 1rem 0;
632
+ margin: 0 1.5rem 2rem 1.5rem;
590
633
  border-top: 1px solid var(--neutral-neutral-4);
634
+ width: -webkit-fill-available;
591
635
  }
592
636
  }
593
637
  `
@@ -26,6 +26,7 @@ export const HeaderStyled = styled.header `
26
26
  justify-content: space-between;
27
27
  max-width: 1200px;
28
28
  padding: 1rem 1.5rem;
29
+ margin-bottom: 0.1rem;
29
30
 
30
31
  @media (min-width: ${size.sm}) {
31
32
  padding: 1rem;
@@ -27,6 +27,7 @@ export const HeaderStyled = styled.header`
27
27
  justify-content: space-between;
28
28
  max-width: 1200px;
29
29
  padding: 1rem 1.5rem;
30
+ margin-bottom: 0.1rem;
30
31
 
31
32
  @media (min-width: ${size.sm}) {
32
33
  padding: 1rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@npm_leadtech/legal-lib-components",
3
- "version": "7.12.18",
3
+ "version": "7.12.20",
4
4
  "license": "ISC",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",