@npm_leadtech/legal-lib-components 2.9.1 → 2.9.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.
@@ -2473,7 +2473,10 @@
2473
2473
  .wide-info-bar {
2474
2474
  background-color: #F8F9FA;
2475
2475
  font-family: "Inter", sans-serif;
2476
- color: #02374A; }
2476
+ color: #3D4042; }
2477
+ .wide-info-bar.green {
2478
+ background-color: #EFF7F5;
2479
+ color: #02374A; }
2477
2480
  .wide-info-bar__wrapper {
2478
2481
  display: flex;
2479
2482
  flex-flow: column nowrap;
@@ -2588,72 +2591,72 @@
2588
2591
  white-space: nowrap; }
2589
2592
 
2590
2593
  .bottom-overlay {
2594
+ position: fixed;
2595
+ top: 0;
2596
+ left: 0;
2591
2597
  width: 100%;
2592
- /* Full width */
2593
- display: none; }
2598
+ height: 100%;
2599
+ z-index: 1001;
2600
+ visibility: hidden; }
2594
2601
  .bottom-overlay.show {
2595
- background-color: #032a38;
2596
- /* Fallback color */
2597
- background-color: rgba(3, 42, 56, 0.8);
2598
- /* Black w/ opacity */
2599
- display: flex;
2600
- align-items: center;
2602
+ visibility: visible; }
2603
+ .bottom-overlay.show .bottom-overlay__background {
2604
+ opacity: 0.8; }
2605
+ .bottom-overlay.show .bottom-overlay__nav {
2606
+ transform: translateY(0); }
2607
+ .bottom-overlay__background {
2608
+ background-color: #032A38;
2609
+ position: absolute;
2610
+ width: 100%;
2601
2611
  height: 100%;
2602
- /* Full height */
2603
- left: 0;
2604
- overflow: auto;
2605
- /* Enable scroll if needed */
2606
- position: fixed;
2607
- /* Stay in place */
2608
2612
  top: 0;
2609
- transition: all .4s ease-in-out;
2610
- z-index: 1001;
2611
- /* Sit on top */ }
2612
- .bottom-overlay .bottom-overlay__nav {
2613
+ left: 0;
2614
+ z-index: 1;
2615
+ opacity: 0;
2616
+ transition: opacity ease-out 0.3s; }
2617
+ .bottom-overlay__nav {
2613
2618
  background: #FFFFFF;
2614
2619
  border-top-left-radius: 4px;
2615
2620
  border-top-right-radius: 4px;
2616
2621
  bottom: 0;
2617
- position: fixed;
2622
+ position: absolute;
2618
2623
  transform: translateY(100%);
2619
- transition: all .4s ease-in-out;
2624
+ transition: transform 0.5s ease-in-out;
2620
2625
  width: 100%;
2621
2626
  z-index: 2; }
2622
- .bottom-overlay .bottom-overlay__nav.show {
2623
- transform: translateY(0); }
2624
2627
  @media (min-width: 720px) {
2625
- .bottom-overlay .bottom-overlay__nav {
2628
+ .bottom-overlay__nav {
2626
2629
  display: block;
2627
2630
  transform: translateY(0); } }
2628
- .bottom-overlay .overlay__delimiter {
2629
- padding: 0.5rem 0 1.5rem; }
2630
- .bottom-overlay .overlay__delimiter:after {
2631
- content: "";
2632
- background: #B5BABD;
2633
- border-radius: 4px;
2634
- display: block;
2635
- height: 0.25rem;
2636
- margin: 0 auto;
2637
- width: 7.5rem; }
2638
- .bottom-overlay .overlay__delimiter.overlay__delimiter__scrolling {
2639
- box-shadow: 0 0.125rem 0.375rem 0 rgba(2, 55, 74, 0.25);
2640
- position: relative;
2641
- z-index: 1; }
2642
- @media (min-width: 720px) {
2643
- .bottom-overlay .overlay__delimiter {
2644
- display: none; } }
2645
- .bottom-overlay .overlay__scrollable-section {
2646
- position: sticky;
2647
- max-height: 21rem;
2648
- min-height: 8.5rem;
2649
- display: flex;
2650
- overflow-y: scroll;
2651
- padding-left: 1.5rem;
2652
- padding-right: 1.5rem;
2653
- width: 100%; }
2654
- .bottom-overlay .overlay__footer {
2655
- border-top: solid 1px #DBE1E5;
2656
- padding: 1.5rem 1.5rem 2rem; }
2631
+ .bottom-overlay__nav .overlay__delimiter {
2632
+ padding: 0.5rem 0 1.5rem; }
2633
+ .bottom-overlay__nav .overlay__delimiter:after {
2634
+ content: '';
2635
+ background: #B5BABD;
2636
+ border-radius: 4px;
2637
+ display: block;
2638
+ height: 0.25rem;
2639
+ margin: 0 auto;
2640
+ width: 7.5rem; }
2641
+ .bottom-overlay__nav .overlay__delimiter.overlay__delimiter__scrolling {
2642
+ box-shadow: 0 0.125rem 0.375rem 0 rgba(2, 55, 74, 0.25);
2643
+ position: relative;
2644
+ z-index: 1; }
2645
+ @media (min-width: 720px) {
2646
+ .bottom-overlay__nav .overlay__delimiter {
2647
+ display: none; } }
2648
+ .bottom-overlay__nav .overlay__scrollable-section {
2649
+ position: sticky;
2650
+ max-height: 21rem;
2651
+ min-height: 8.5rem;
2652
+ display: flex;
2653
+ overflow-y: scroll;
2654
+ padding-left: 1.5rem;
2655
+ padding-right: 1.5rem;
2656
+ width: 100%; }
2657
+ .bottom-overlay__nav .overlay__footer {
2658
+ border-top: solid 1px #DBE1E5;
2659
+ padding: 1.5rem 1.5rem 2rem; }
2657
2660
 
2658
2661
  .box--form {
2659
2662
  background: #FFFFFF;
@@ -2,6 +2,7 @@ import React, { type FC } from 'react';
2
2
  import './WideInfoBar.scss';
3
3
  interface WideInfoBarProps {
4
4
  children?: React.ReactElement<any>;
5
+ color?: 'green';
5
6
  }
6
7
  declare const WideInfoBar: FC<WideInfoBarProps>;
7
8
  export default WideInfoBar;
@@ -4,3 +4,4 @@ declare const meta: Meta<typeof WideInfoBar>;
4
4
  export default meta;
5
5
  type Story = StoryObj<typeof WideInfoBar>;
6
6
  export declare const Default: Story;
7
+ export declare const Green: Story;
package/dist/index.d.ts CHANGED
@@ -396,6 +396,7 @@ declare const TopBarMobile: React$1.FC<TopBarMobileProps>;
396
396
 
397
397
  interface WideInfoBarProps {
398
398
  children?: React$1.ReactElement<any>;
399
+ color?: 'green';
399
400
  }
400
401
  declare const WideInfoBar: FC<WideInfoBarProps>;
401
402
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@npm_leadtech/legal-lib-components",
3
- "version": "2.9.1",
3
+ "version": "2.9.3",
4
4
  "dependencies": {
5
5
  "@testing-library/jest-dom": "^5.16.5",
6
6
  "@tippyjs/react": "4.2.6",