@npm_leadtech/legal-lib-components 7.12.17 → 7.12.19

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.
Files changed (7) hide show
  1. package/dist/src/components/atoms/DropdownInput/DropdownInput.styled.js +3 -0
  2. package/dist/src/components/atoms/DropdownInput/DropdownInput.styled.ts +3 -0
  3. package/dist/src/components/organisms/MenuItems/MenuItems.styled.js +123 -49
  4. package/dist/src/components/organisms/MenuItems/MenuItems.styled.ts +123 -49
  5. package/dist/src/components/organisms/NavMenu/NavMenu.styled.js +117 -76
  6. package/dist/src/components/organisms/NavMenu/NavMenu.styled.ts +117 -76
  7. package/package.json +1 -1
package/dist/src/components/atoms/DropdownInput/DropdownInput.styled.js CHANGED
@@ -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
  }
package/dist/src/components/atoms/DropdownInput/DropdownInput.styled.ts CHANGED
@@ -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
  }
package/dist/src/components/organisms/MenuItems/MenuItems.styled.js CHANGED
@@ -40,6 +40,7 @@ export const MenuItemsStyled = styled.div `
40
40
  .left-nav {
41
41
  display: flex;
42
42
  align-items: center;
43
+ margin-left: 1rem;
43
44
  }
44
45
 
45
46
  .header-phone {
@@ -261,7 +262,7 @@ export const MenuItemsStyled = styled.div `
261
262
  margin-right: 2.5rem;
262
263
  border-radius: var(--s-border-radius);
263
264
  transition: all 0.3s ease;
264
- padding: 0.25rem;
265
+ padding: 0.5rem 0.25rem;
265
266
  position: relative;
266
267
 
267
268
  &.all-item {
@@ -343,12 +344,39 @@ export const MenuItemsStyled = styled.div `
343
344
  // mobile pane
344
345
 
345
346
  .navigation-pane {
346
- &.--is-mobile {
347
+ .navigation-pane.--is-mobile {
347
348
  display: flex;
348
349
 
349
350
  @media ${device['landscape-tablets']} {
350
351
  display: none;
351
352
  }
353
+
354
+ .navigation-pane__user-menu {
355
+ display: flex;
356
+ flex-flow: row nowrap;
357
+ justify-content: center;
358
+ margin: 0 1rem;
359
+ padding: 1.5rem 0;
360
+ }
361
+
362
+ .navigation-pane__ratafia {
363
+ padding: 1.5rem 1.5rem 0.5rem 1.5rem;
364
+
365
+ .navigation-pane__ratafia__title {
366
+ display: flex;
367
+ justify-content: start;
368
+ align-items: center;
369
+ gap: 0.25rem;
370
+ }
371
+ }
372
+
373
+ .navigation-pane__resources {
374
+ .resources__list {
375
+ @media ${device['mobile']} {
376
+ margin-bottom: 2rem;
377
+ }
378
+ }
379
+ }
352
380
  }
353
381
 
354
382
  &__trigger {
@@ -484,70 +512,107 @@ export const MenuItemsStyled = styled.div `
484
512
  }
485
513
  }
486
514
 
487
- .--is-open .--is-mobile.navigation-pane {
488
- .products__list {
489
- padding: 0;
490
- position: static;
491
- box-shadow: none;
492
- visibility: visible;
493
- display: flex;
494
- }
515
+ .--is-open {
516
+ .--is-mobile {
517
+ .navigation-pane {
518
+ .navigation-pane__wrapper {
519
+ width: 100%;
520
+ margin-top: 3rem;
521
+ left: 0;
522
+ background: var(--others-white);
523
+ position: fixed;
524
+ box-shadow: var(--box-shadow-menu);
525
+ overflow: auto;
526
+ height: calc(100% - 65px);
527
+ z-index: 100;
528
+ }
529
+ }
495
530
 
496
- .products__list__section-container {
497
- padding-right: 0;
498
- }
531
+ .search {
532
+ padding-right: 1.5rem;
533
+ padding-left: 1.5rem;
534
+ }
499
535
 
500
- .products__list__section__li {
501
- padding-right: 1.5rem;
502
- padding-left: 1.5rem;
503
- margin-top: 1rem;
536
+ .navigation-pane__user-menu {
537
+ display: flex;
538
+ flex-flow: row nowrap;
539
+ justify-content: center;
540
+ align-content: center;
541
+ padding: 1.5rem 0;
542
+ margin: 0 1rem;
504
543
 
505
- &.all-item {
506
- font-weight: bold;
544
+ .log-in {
545
+ min-width: 120px;
546
+ margin-right: 0.5rem;
547
+ }
507
548
  }
508
549
 
509
- &:last-child {
510
- margin-bottom: 1.5rem;
550
+ .navigation-pane__ratafia {
551
+ padding: 1.5rem 1.5rem 0.5rem 1.5rem;
552
+
553
+ .navigation-pane__ratafia__title {
554
+ display: flex;
555
+ justify-content: start;
556
+ align-items: center;
557
+ gap: 0.25rem;
558
+ }
511
559
  }
512
- }
513
560
 
514
- .navigation-pane__resources {
515
- .navigation-pane__help,
516
- p {
517
- padding: 0.25rem 0.5rem;
561
+ .navigation-pane__esignature {
562
+ padding: 0.5rem 1.5rem 0.5rem 1.5rem;
518
563
  }
519
- }
520
564
 
521
- .help__list,
522
- .resources__list {
523
- .menu-items-li {
524
- display: block;
565
+ .navigation-pane__user-name {
566
+ margin-right: 1rem;
567
+ font-weight: bold;
568
+ text-overflow: ellipsis;
569
+ overflow: hidden;
570
+ white-space: nowrap;
571
+ width: 8rem;
572
+ color: var(--primary-main-light-5);
573
+ padding: 0.5rem 1rem;
574
+ border-radius: var(--s-border-radius);
575
+ background-color: var(--neutral-neutral-6);
576
+ }
577
+
578
+ .navigation-pane__products,
579
+ .navigation-pane__help,
580
+ .navigation-pane__resources {
581
+ p {
582
+ font-weight: bold;
525
583
 
526
- a {
527
- padding: 0.25rem 0.5rem;
584
+ img {
585
+ display: none;
586
+ }
528
587
  }
529
- }
530
- }
531
588
 
532
- .menu-section-title-container {
533
- padding-right: 1.5rem;
534
- padding-left: 1.5rem;
535
- > svg {
536
- path {
537
- fill: var(--primary);
589
+ li {
590
+ margin-top: 1rem;
591
+
592
+ &:last-child {
593
+ margin-bottom: 1.5rem;
594
+ }
538
595
  }
539
596
  }
540
- .jumbotron__title {
541
- margin-left: 1rem;
597
+
598
+ .navigation-pane__help {
599
+ padding: 1.5rem 0;
600
+ margin: 0 1.5rem;
601
+ border-top: 1px solid var(--neutral-neutral-4);
542
602
  }
543
- }
544
603
 
545
- .menu-section-title__icon {
546
- width: 1.5rem;
547
- }
604
+ .navigation-pane__products__title {
605
+ display: none;
606
+ }
548
607
 
549
- .menu-items-li {
550
- display: none;
608
+ .navigation-pane__resources {
609
+ display: flex;
610
+ flex-direction: column;
611
+ align-items: flex-start;
612
+ padding: 1.5rem 0 0 0;
613
+ margin: 0 1.5rem 1.5rem 1.5rem;
614
+ border-top: 1px solid var(--neutral-neutral-4);
615
+ }
551
616
  }
552
617
  }
553
618
 
@@ -563,6 +628,15 @@ export const MenuItemsStyled = styled.div `
563
628
  .navigation-pane__wrapper {
564
629
  display: flex;
565
630
  flex-direction: column;
631
+ width: 100%;
632
+ margin-top: 3rem;
633
+ left: 0;
634
+ background: var(--others-white);
635
+ position: fixed;
636
+ box-shadow: var(--box-shadow-menu);
637
+ overflow: auto;
638
+ height: calc(100% - 65px);
639
+ z-index: 100;
566
640
 
567
641
  > div:not(
568
642
  .navigation-pane__link,
package/dist/src/components/organisms/MenuItems/MenuItems.styled.ts CHANGED
@@ -41,6 +41,7 @@ export const MenuItemsStyled = styled.div`
41
41
  .left-nav {
42
42
  display: flex;
43
43
  align-items: center;
44
+ margin-left: 1rem;
44
45
  }
45
46
 
46
47
  .header-phone {
@@ -262,7 +263,7 @@ export const MenuItemsStyled = styled.div`
262
263
  margin-right: 2.5rem;
263
264
  border-radius: var(--s-border-radius);
264
265
  transition: all 0.3s ease;
265
- padding: 0.25rem;
266
+ padding: 0.5rem 0.25rem;
266
267
  position: relative;
267
268
 
268
269
  &.all-item {
@@ -344,12 +345,39 @@ export const MenuItemsStyled = styled.div`
344
345
  // mobile pane
345
346
 
346
347
  .navigation-pane {
347
- &.--is-mobile {
348
+ .navigation-pane.--is-mobile {
348
349
  display: flex;
349
350
 
350
351
  @media ${device['landscape-tablets']} {
351
352
  display: none;
352
353
  }
354
+
355
+ .navigation-pane__user-menu {
356
+ display: flex;
357
+ flex-flow: row nowrap;
358
+ justify-content: center;
359
+ margin: 0 1rem;
360
+ padding: 1.5rem 0;
361
+ }
362
+
363
+ .navigation-pane__ratafia {
364
+ padding: 1.5rem 1.5rem 0.5rem 1.5rem;
365
+
366
+ .navigation-pane__ratafia__title {
367
+ display: flex;
368
+ justify-content: start;
369
+ align-items: center;
370
+ gap: 0.25rem;
371
+ }
372
+ }
373
+
374
+ .navigation-pane__resources {
375
+ .resources__list {
376
+ @media ${device['mobile']} {
377
+ margin-bottom: 2rem;
378
+ }
379
+ }
380
+ }
353
381
  }
354
382
 
355
383
  &__trigger {
@@ -485,70 +513,107 @@ export const MenuItemsStyled = styled.div`
485
513
  }
486
514
  }
487
515
 
488
- .--is-open .--is-mobile.navigation-pane {
489
- .products__list {
490
- padding: 0;
491
- position: static;
492
- box-shadow: none;
493
- visibility: visible;
494
- display: flex;
495
- }
516
+ .--is-open {
517
+ .--is-mobile {
518
+ .navigation-pane {
519
+ .navigation-pane__wrapper {
520
+ width: 100%;
521
+ margin-top: 3rem;
522
+ left: 0;
523
+ background: var(--others-white);
524
+ position: fixed;
525
+ box-shadow: var(--box-shadow-menu);
526
+ overflow: auto;
527
+ height: calc(100% - 65px);
528
+ z-index: 100;
529
+ }
530
+ }
496
531
 
497
- .products__list__section-container {
498
- padding-right: 0;
499
- }
532
+ .search {
533
+ padding-right: 1.5rem;
534
+ padding-left: 1.5rem;
535
+ }
500
536
 
501
- .products__list__section__li {
502
- padding-right: 1.5rem;
503
- padding-left: 1.5rem;
504
- margin-top: 1rem;
537
+ .navigation-pane__user-menu {
538
+ display: flex;
539
+ flex-flow: row nowrap;
540
+ justify-content: center;
541
+ align-content: center;
542
+ padding: 1.5rem 0;
543
+ margin: 0 1rem;
505
544
 
506
- &.all-item {
507
- font-weight: bold;
545
+ .log-in {
546
+ min-width: 120px;
547
+ margin-right: 0.5rem;
548
+ }
508
549
  }
509
550
 
510
- &:last-child {
511
- margin-bottom: 1.5rem;
551
+ .navigation-pane__ratafia {
552
+ padding: 1.5rem 1.5rem 0.5rem 1.5rem;
553
+
554
+ .navigation-pane__ratafia__title {
555
+ display: flex;
556
+ justify-content: start;
557
+ align-items: center;
558
+ gap: 0.25rem;
559
+ }
512
560
  }
513
- }
514
561
 
515
- .navigation-pane__resources {
516
- .navigation-pane__help,
517
- p {
518
- padding: 0.25rem 0.5rem;
562
+ .navigation-pane__esignature {
563
+ padding: 0.5rem 1.5rem 0.5rem 1.5rem;
519
564
  }
520
- }
521
565
 
522
- .help__list,
523
- .resources__list {
524
- .menu-items-li {
525
- display: block;
566
+ .navigation-pane__user-name {
567
+ margin-right: 1rem;
568
+ font-weight: bold;
569
+ text-overflow: ellipsis;
570
+ overflow: hidden;
571
+ white-space: nowrap;
572
+ width: 8rem;
573
+ color: var(--primary-main-light-5);
574
+ padding: 0.5rem 1rem;
575
+ border-radius: var(--s-border-radius);
576
+ background-color: var(--neutral-neutral-6);
577
+ }
578
+
579
+ .navigation-pane__products,
580
+ .navigation-pane__help,
581
+ .navigation-pane__resources {
582
+ p {
583
+ font-weight: bold;
526
584
 
527
- a {
528
- padding: 0.25rem 0.5rem;
585
+ img {
586
+ display: none;
587
+ }
529
588
  }
530
- }
531
- }
532
589
 
533
- .menu-section-title-container {
534
- padding-right: 1.5rem;
535
- padding-left: 1.5rem;
536
- > svg {
537
- path {
538
- fill: var(--primary);
590
+ li {
591
+ margin-top: 1rem;
592
+
593
+ &:last-child {
594
+ margin-bottom: 1.5rem;
595
+ }
539
596
  }
540
597
  }
541
- .jumbotron__title {
542
- margin-left: 1rem;
598
+
599
+ .navigation-pane__help {
600
+ padding: 1.5rem 0;
601
+ margin: 0 1.5rem;
602
+ border-top: 1px solid var(--neutral-neutral-4);
543
603
  }
544
- }
545
604
 
546
- .menu-section-title__icon {
547
- width: 1.5rem;
548
- }
605
+ .navigation-pane__products__title {
606
+ display: none;
607
+ }
549
608
 
550
- .menu-items-li {
551
- display: none;
609
+ .navigation-pane__resources {
610
+ display: flex;
611
+ flex-direction: column;
612
+ align-items: flex-start;
613
+ padding: 1.5rem 0 0 0;
614
+ margin: 0 1.5rem 1.5rem 1.5rem;
615
+ border-top: 1px solid var(--neutral-neutral-4);
616
+ }
552
617
  }
553
618
  }
554
619
 
@@ -564,6 +629,15 @@ export const MenuItemsStyled = styled.div`
564
629
  .navigation-pane__wrapper {
565
630
  display: flex;
566
631
  flex-direction: column;
632
+ width: 100%;
633
+ margin-top: 3rem;
634
+ left: 0;
635
+ background: var(--others-white);
636
+ position: fixed;
637
+ box-shadow: var(--box-shadow-menu);
638
+ overflow: auto;
639
+ height: calc(100% - 65px);
640
+ z-index: 100;
567
641
 
568
642
  > div:not(
569
643
  .navigation-pane__link,
package/dist/src/components/organisms/NavMenu/NavMenu.styled.js CHANGED
@@ -19,6 +19,7 @@ export const NavMenuStyled = styled.nav `
19
19
  .left-nav {
20
20
  display: flex;
21
21
  align-items: center;
22
+ margin-left: 1rem;
22
23
  }
23
24
 
24
25
  .header-phone {
@@ -230,7 +231,7 @@ export const NavMenuStyled = styled.nav `
230
231
  margin-right: 2.5rem;
231
232
  border-radius: var(--s-border-radius);
232
233
  transition: all 0.3s ease;
233
- padding: 0.25rem;
234
+ padding: 0.5rem 0.25rem;
234
235
  position: relative;
235
236
 
236
237
  &.all-item {
@@ -314,13 +315,39 @@ export const NavMenuStyled = styled.nav `
314
315
  // mobile-pane
315
316
 
316
317
  .navigation-pane {
317
- &.--is-mobile {
318
+ .navigation-pane.--is-mobile {
318
319
  display: flex;
319
320
  flex-direction: column;
320
321
 
321
322
  @media ${device['landscape-tablets']} {
322
323
  display: none;
323
324
  }
325
+ .navigation-pane__user-menu {
326
+ display: flex;
327
+ flex-flow: row nowrap;
328
+ justify-content: center;
329
+ margin: 0 1rem;
330
+ padding: 1.5rem 0;
331
+ }
332
+
333
+ .navigation-pane__ratafia {
334
+ padding: 1.5rem 1.5rem 0.5rem 1.5rem;
335
+
336
+ .navigation-pane__ratafia__title {
337
+ display: flex;
338
+ justify-content: start;
339
+ align-items: center;
340
+ gap: 0.25rem;
341
+ }
342
+ }
343
+
344
+ .navigation-pane__resources {
345
+ .resources__list {
346
+ @media ${device['mobile']} {
347
+ margin-bottom: 2rem;
348
+ }
349
+ }
350
+ }
324
351
  }
325
352
 
326
353
  &__trigger {
@@ -365,102 +392,107 @@ export const NavMenuStyled = styled.nav `
365
392
  }
366
393
  }
367
394
 
368
- .--is-open .--is-mobile .navigation-pane {
369
- .navigation-pane__wrapper {
370
- width: 100%;
371
- margin-top: 3rem;
372
- left: 0;
373
- background: var(--others-white);
374
- position: fixed;
375
- box-shadow: var(--box-shadow-menu);
376
- overflow: auto;
377
- height: calc(100% - 65px);
378
- z-index: 100;
395
+ .--is-open {
396
+ .--is-mobile {
397
+ .navigation-pane {
398
+ .navigation-pane__wrapper {
399
+ width: 100%;
400
+ margin-top: 3rem;
401
+ left: 0;
402
+ background: var(--others-white);
403
+ position: fixed;
404
+ box-shadow: var(--box-shadow-menu);
405
+ overflow: auto;
406
+ height: calc(100% - 65px);
407
+ z-index: 100;
408
+ }
409
+ }
379
410
 
380
411
  .search {
381
412
  padding-right: 1.5rem;
382
413
  padding-left: 1.5rem;
383
414
  }
384
- }
385
415
 
386
- &__user-menu {
387
- display: flex;
388
- flex-flow: row nowrap;
389
- justify-content: center;
390
- align-content: center;
391
- padding: 1.5rem 0;
392
- margin: 0 1rem;
416
+ .navigation-pane__user-menu {
417
+ display: flex;
418
+ flex-flow: row nowrap;
419
+ justify-content: center;
420
+ align-content: center;
421
+ padding: 1.5rem 0;
422
+ margin: 0 1rem;
393
423
 
394
- .log-in {
395
- min-width: 120px;
396
- margin-right: 0.5rem;
424
+ .log-in {
425
+ min-width: 120px;
426
+ margin-right: 0.5rem;
427
+ }
397
428
  }
398
- }
399
429
 
400
- &__ratafia {
401
- padding: 1.5rem 1.5rem 0.5rem 1.5rem;
402
- &__title {
403
- display: flex;
404
- justify-content: start;
405
- align-items: center;
406
- gap: 0.25rem;
407
- }
408
- }
430
+ .navigation-pane__ratafia {
431
+ padding: 1.5rem 1.5rem 0.5rem 1.5rem;
409
432
 
410
- &__esignature {
411
- padding: 0.5rem 1.5rem 0.5rem 1.5rem;
412
- }
433
+ .navigation-pane__ratafia__title {
434
+ display: flex;
435
+ justify-content: start;
436
+ align-items: center;
437
+ gap: 0.25rem;
438
+ }
439
+ }
413
440
 
414
- &__user-name {
415
- margin-right: 1rem;
416
- font-weight: bold;
417
- text-overflow: ellipsis;
418
- overflow: hidden;
419
- white-space: nowrap;
420
- width: 8rem;
421
- color: var(--primary-main-light-5);
422
- padding: 0.5rem 1rem;
423
- border-radius: var(--s-border-radius);
424
- background-color: var(--neutral-neutral-6);
425
- }
441
+ .navigation-pane__esignature {
442
+ padding: 0.5rem 1.5rem 0.5rem 1.5rem;
443
+ }
426
444
 
427
- &__products,
428
- &__help,
429
- &__resources {
430
- p {
445
+ .navigation-pane__user-name {
446
+ margin-right: 1rem;
431
447
  font-weight: bold;
448
+ text-overflow: ellipsis;
449
+ overflow: hidden;
450
+ white-space: nowrap;
451
+ width: 8rem;
452
+ color: var(--primary-main-light-5);
453
+ padding: 0.5rem 1rem;
454
+ border-radius: var(--s-border-radius);
455
+ background-color: var(--neutral-neutral-6);
456
+ }
432
457
 
433
- img {
434
- display: none;
458
+ .navigation-pane__products,
459
+ .navigation-pane__help,
460
+ .navigation-pane__resources {
461
+ p {
462
+ font-weight: bold;
463
+
464
+ img {
465
+ display: none;
466
+ }
435
467
  }
436
- }
437
468
 
438
- li {
439
- margin-top: 1rem;
469
+ li {
470
+ margin-top: 1rem;
440
471
 
441
- &:last-child {
442
- margin-bottom: 1.5rem;
472
+ &:last-child {
473
+ margin-bottom: 1.5rem;
474
+ }
443
475
  }
444
476
  }
445
- }
446
477
 
447
- &__help {
448
- padding: 1.5rem 0;
449
- margin: 0 1.5rem;
450
- border-top: 1px solid var(--neutral-neutral-4);
451
- }
478
+ .navigation-pane__help {
479
+ padding: 1.5rem 0;
480
+ margin: 0 1.5rem;
481
+ border-top: 1px solid var(--neutral-neutral-4);
482
+ }
452
483
 
453
- &__products__title {
454
- display: none;
455
- }
484
+ .navigation-pane__products__title {
485
+ display: none;
486
+ }
456
487
 
457
- &__resources {
458
- display: flex;
459
- flex-direction: column;
460
- align-items: flex-start;
461
- padding: 1.5rem 0 0 0;
462
- margin: 0 1.5rem 1.5rem 1.5rem;
463
- border-top: 1px solid var(--neutral-neutral-4);
488
+ .navigation-pane__resources {
489
+ display: flex;
490
+ flex-direction: column;
491
+ align-items: flex-start;
492
+ padding: 1.5rem 0 0 0;
493
+ margin: 0 1.5rem 1.5rem 1.5rem;
494
+ border-top: 1px solid var(--neutral-neutral-4);
495
+ }
464
496
  }
465
497
  }
466
498
 
@@ -543,6 +575,15 @@ export const NavMenuStyled = styled.nav `
543
575
  .navigation-pane__wrapper {
544
576
  display: flex;
545
577
  flex-direction: column;
578
+ width: 100%;
579
+ margin-top: 3rem;
580
+ left: 0;
581
+ background: var(--others-white);
582
+ position: fixed;
583
+ box-shadow: var(--box-shadow-menu);
584
+ overflow: auto;
585
+ height: calc(100% - 65px);
586
+ z-index: 100;
546
587
 
547
588
  > div:not(.navigation-pane__ratafia, .navigation-pane__esignature, .navigation-pane__products) {
548
589
  ${Array.from({ length: 10 }, (_, i) => `
package/dist/src/components/organisms/NavMenu/NavMenu.styled.ts CHANGED
@@ -20,6 +20,7 @@ export const NavMenuStyled = styled.nav`
20
20
  .left-nav {
21
21
  display: flex;
22
22
  align-items: center;
23
+ margin-left: 1rem;
23
24
  }
24
25
 
25
26
  .header-phone {
@@ -231,7 +232,7 @@ export const NavMenuStyled = styled.nav`
231
232
  margin-right: 2.5rem;
232
233
  border-radius: var(--s-border-radius);
233
234
  transition: all 0.3s ease;
234
- padding: 0.25rem;
235
+ padding: 0.5rem 0.25rem;
235
236
  position: relative;
236
237
 
237
238
  &.all-item {
@@ -315,13 +316,39 @@ export const NavMenuStyled = styled.nav`
315
316
  // mobile-pane
316
317
 
317
318
  .navigation-pane {
318
- &.--is-mobile {
319
+ .navigation-pane.--is-mobile {
319
320
  display: flex;
320
321
  flex-direction: column;
321
322
 
322
323
  @media ${device['landscape-tablets']} {
323
324
  display: none;
324
325
  }
326
+ .navigation-pane__user-menu {
327
+ display: flex;
328
+ flex-flow: row nowrap;
329
+ justify-content: center;
330
+ margin: 0 1rem;
331
+ padding: 1.5rem 0;
332
+ }
333
+
334
+ .navigation-pane__ratafia {
335
+ padding: 1.5rem 1.5rem 0.5rem 1.5rem;
336
+
337
+ .navigation-pane__ratafia__title {
338
+ display: flex;
339
+ justify-content: start;
340
+ align-items: center;
341
+ gap: 0.25rem;
342
+ }
343
+ }
344
+
345
+ .navigation-pane__resources {
346
+ .resources__list {
347
+ @media ${device['mobile']} {
348
+ margin-bottom: 2rem;
349
+ }
350
+ }
351
+ }
325
352
  }
326
353
 
327
354
  &__trigger {
@@ -366,102 +393,107 @@ export const NavMenuStyled = styled.nav`
366
393
  }
367
394
  }
368
395
 
369
- .--is-open .--is-mobile .navigation-pane {
370
- .navigation-pane__wrapper {
371
- width: 100%;
372
- margin-top: 3rem;
373
- left: 0;
374
- background: var(--others-white);
375
- position: fixed;
376
- box-shadow: var(--box-shadow-menu);
377
- overflow: auto;
378
- height: calc(100% - 65px);
379
- z-index: 100;
396
+ .--is-open {
397
+ .--is-mobile {
398
+ .navigation-pane {
399
+ .navigation-pane__wrapper {
400
+ width: 100%;
401
+ margin-top: 3rem;
402
+ left: 0;
403
+ background: var(--others-white);
404
+ position: fixed;
405
+ box-shadow: var(--box-shadow-menu);
406
+ overflow: auto;
407
+ height: calc(100% - 65px);
408
+ z-index: 100;
409
+ }
410
+ }
380
411
 
381
412
  .search {
382
413
  padding-right: 1.5rem;
383
414
  padding-left: 1.5rem;
384
415
  }
385
- }
386
416
 
387
- &__user-menu {
388
- display: flex;
389
- flex-flow: row nowrap;
390
- justify-content: center;
391
- align-content: center;
392
- padding: 1.5rem 0;
393
- margin: 0 1rem;
417
+ .navigation-pane__user-menu {
418
+ display: flex;
419
+ flex-flow: row nowrap;
420
+ justify-content: center;
421
+ align-content: center;
422
+ padding: 1.5rem 0;
423
+ margin: 0 1rem;
394
424
 
395
- .log-in {
396
- min-width: 120px;
397
- margin-right: 0.5rem;
425
+ .log-in {
426
+ min-width: 120px;
427
+ margin-right: 0.5rem;
428
+ }
398
429
  }
399
- }
400
430
 
401
- &__ratafia {
402
- padding: 1.5rem 1.5rem 0.5rem 1.5rem;
403
- &__title {
404
- display: flex;
405
- justify-content: start;
406
- align-items: center;
407
- gap: 0.25rem;
408
- }
409
- }
431
+ .navigation-pane__ratafia {
432
+ padding: 1.5rem 1.5rem 0.5rem 1.5rem;
410
433
 
411
- &__esignature {
412
- padding: 0.5rem 1.5rem 0.5rem 1.5rem;
413
- }
434
+ .navigation-pane__ratafia__title {
435
+ display: flex;
436
+ justify-content: start;
437
+ align-items: center;
438
+ gap: 0.25rem;
439
+ }
440
+ }
414
441
 
415
- &__user-name {
416
- margin-right: 1rem;
417
- font-weight: bold;
418
- text-overflow: ellipsis;
419
- overflow: hidden;
420
- white-space: nowrap;
421
- width: 8rem;
422
- color: var(--primary-main-light-5);
423
- padding: 0.5rem 1rem;
424
- border-radius: var(--s-border-radius);
425
- background-color: var(--neutral-neutral-6);
426
- }
442
+ .navigation-pane__esignature {
443
+ padding: 0.5rem 1.5rem 0.5rem 1.5rem;
444
+ }
427
445
 
428
- &__products,
429
- &__help,
430
- &__resources {
431
- p {
446
+ .navigation-pane__user-name {
447
+ margin-right: 1rem;
432
448
  font-weight: bold;
449
+ text-overflow: ellipsis;
450
+ overflow: hidden;
451
+ white-space: nowrap;
452
+ width: 8rem;
453
+ color: var(--primary-main-light-5);
454
+ padding: 0.5rem 1rem;
455
+ border-radius: var(--s-border-radius);
456
+ background-color: var(--neutral-neutral-6);
457
+ }
433
458
 
434
- img {
435
- display: none;
459
+ .navigation-pane__products,
460
+ .navigation-pane__help,
461
+ .navigation-pane__resources {
462
+ p {
463
+ font-weight: bold;
464
+
465
+ img {
466
+ display: none;
467
+ }
436
468
  }
437
- }
438
469
 
439
- li {
440
- margin-top: 1rem;
470
+ li {
471
+ margin-top: 1rem;
441
472
 
442
- &:last-child {
443
- margin-bottom: 1.5rem;
473
+ &:last-child {
474
+ margin-bottom: 1.5rem;
475
+ }
444
476
  }
445
477
  }
446
- }
447
478
 
448
- &__help {
449
- padding: 1.5rem 0;
450
- margin: 0 1.5rem;
451
- border-top: 1px solid var(--neutral-neutral-4);
452
- }
479
+ .navigation-pane__help {
480
+ padding: 1.5rem 0;
481
+ margin: 0 1.5rem;
482
+ border-top: 1px solid var(--neutral-neutral-4);
483
+ }
453
484
 
454
- &__products__title {
455
- display: none;
456
- }
485
+ .navigation-pane__products__title {
486
+ display: none;
487
+ }
457
488
 
458
- &__resources {
459
- display: flex;
460
- flex-direction: column;
461
- align-items: flex-start;
462
- padding: 1.5rem 0 0 0;
463
- margin: 0 1.5rem 1.5rem 1.5rem;
464
- border-top: 1px solid var(--neutral-neutral-4);
489
+ .navigation-pane__resources {
490
+ display: flex;
491
+ flex-direction: column;
492
+ align-items: flex-start;
493
+ padding: 1.5rem 0 0 0;
494
+ margin: 0 1.5rem 1.5rem 1.5rem;
495
+ border-top: 1px solid var(--neutral-neutral-4);
496
+ }
465
497
  }
466
498
  }
467
499
 
@@ -544,6 +576,15 @@ export const NavMenuStyled = styled.nav`
544
576
  .navigation-pane__wrapper {
545
577
  display: flex;
546
578
  flex-direction: column;
579
+ width: 100%;
580
+ margin-top: 3rem;
581
+ left: 0;
582
+ background: var(--others-white);
583
+ position: fixed;
584
+ box-shadow: var(--box-shadow-menu);
585
+ overflow: auto;
586
+ height: calc(100% - 65px);
587
+ z-index: 100;
547
588
 
548
589
  > div:not(.navigation-pane__ratafia, .navigation-pane__esignature, .navigation-pane__products) {
549
590
  ${Array.from(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@npm_leadtech/legal-lib-components",
3
- "version": "7.12.17",
3
+ "version": "7.12.19",
4
4
  "license": "ISC",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",