@nok-integration/storefront-react 0.29.8 → 0.29.11
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.
- package/dist/index.d.ts +1 -1
- package/dist/index.mjs +407 -255
- package/dist/standalone/storefront.mjs +407 -255
- package/dist/standalone/styles.css +151 -146
- package/dist/styles.css +151 -146
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -4684,20 +4684,20 @@
|
|
|
4684
4684
|
display: block;
|
|
4685
4685
|
}
|
|
4686
4686
|
}
|
|
4687
|
-
.
|
|
4687
|
+
._hero_15sq4_1 {
|
|
4688
4688
|
position: relative;
|
|
4689
4689
|
display: flex;
|
|
4690
4690
|
flex-direction: column;
|
|
4691
4691
|
justify-content: flex-end;
|
|
4692
|
-
min-height:
|
|
4692
|
+
min-height: max(480px, calc(100svh - var(--vip-hero-top, 0px)));
|
|
4693
4693
|
overflow: hidden;
|
|
4694
4694
|
background: var(--color-surface-default);
|
|
4695
4695
|
}
|
|
4696
|
-
.
|
|
4696
|
+
._image_15sq4_11 {
|
|
4697
4697
|
position: absolute;
|
|
4698
4698
|
inset: 0;
|
|
4699
4699
|
}
|
|
4700
|
-
.
|
|
4700
|
+
._image_15sq4_11::after {
|
|
4701
4701
|
content: "";
|
|
4702
4702
|
position: absolute;
|
|
4703
4703
|
inset: 0;
|
|
@@ -4709,27 +4709,27 @@
|
|
|
4709
4709
|
rgba(8, 14, 18, 0) 382px);
|
|
4710
4710
|
pointer-events: none;
|
|
4711
4711
|
}
|
|
4712
|
-
.
|
|
4712
|
+
._image_15sq4_11 img {
|
|
4713
4713
|
object-fit: cover;
|
|
4714
4714
|
object-position: top center;
|
|
4715
4715
|
}
|
|
4716
|
-
.
|
|
4716
|
+
._foot_15sq4_34 {
|
|
4717
4717
|
position: relative;
|
|
4718
4718
|
display: flex;
|
|
4719
4719
|
flex-direction: column;
|
|
4720
4720
|
}
|
|
4721
|
-
.
|
|
4721
|
+
._text_15sq4_40 {
|
|
4722
4722
|
display: flex;
|
|
4723
4723
|
flex-direction: column;
|
|
4724
4724
|
align-items: center;
|
|
4725
4725
|
gap: var(--space-16);
|
|
4726
4726
|
padding: 0 var(--space-16) var(--space-8);
|
|
4727
4727
|
}
|
|
4728
|
-
.
|
|
4728
|
+
._text_15sq4_40 ._logo_15sq4_48 {
|
|
4729
4729
|
width: 48px;
|
|
4730
4730
|
height: 48px;
|
|
4731
4731
|
}
|
|
4732
|
-
.
|
|
4732
|
+
._copy_15sq4_53 {
|
|
4733
4733
|
display: flex;
|
|
4734
4734
|
flex-direction: column;
|
|
4735
4735
|
gap: 6px;
|
|
@@ -4737,14 +4737,14 @@
|
|
|
4737
4737
|
text-align: center;
|
|
4738
4738
|
overflow-wrap: break-word;
|
|
4739
4739
|
}
|
|
4740
|
-
.
|
|
4740
|
+
._headline_15sq4_62 {
|
|
4741
4741
|
margin: 0;
|
|
4742
4742
|
font-size: 36px;
|
|
4743
4743
|
line-height: 1.1;
|
|
4744
4744
|
font-weight: var(--font-weight-bold);
|
|
4745
4745
|
color: var(--color-text-default);
|
|
4746
4746
|
}
|
|
4747
|
-
.
|
|
4747
|
+
._body_15sq4_70 {
|
|
4748
4748
|
margin: 0;
|
|
4749
4749
|
font-size: var(--type-paragraph-size);
|
|
4750
4750
|
line-height: var(--type-paragraph-line);
|
|
@@ -4752,69 +4752,69 @@
|
|
|
4752
4752
|
color: var(--color-text-default);
|
|
4753
4753
|
white-space: pre-line;
|
|
4754
4754
|
}
|
|
4755
|
-
.
|
|
4755
|
+
._cta_15sq4_79 {
|
|
4756
4756
|
padding: var(--space-16) var(--space-16) var(--space-24);
|
|
4757
4757
|
}
|
|
4758
|
-
.
|
|
4758
|
+
._video_15sq4_83 {
|
|
4759
4759
|
object-fit: cover;
|
|
4760
4760
|
}
|
|
4761
|
-
.
|
|
4761
|
+
._desktopOnly_15sq4_87 {
|
|
4762
4762
|
display: none;
|
|
4763
4763
|
}
|
|
4764
4764
|
@media (min-width: 1200px) {
|
|
4765
|
-
.
|
|
4765
|
+
._hero_15sq4_1 {
|
|
4766
4766
|
justify-content: center;
|
|
4767
4767
|
min-height: max(480px, calc(100svh - var(--vip-hero-top, 0px)));
|
|
4768
4768
|
}
|
|
4769
|
-
.
|
|
4769
|
+
._phoneOnly_15sq4_97 {
|
|
4770
4770
|
display: none;
|
|
4771
4771
|
}
|
|
4772
|
-
.
|
|
4772
|
+
._desktopOnly_15sq4_87 {
|
|
4773
4773
|
display: block;
|
|
4774
4774
|
}
|
|
4775
|
-
.
|
|
4775
|
+
._image_15sq4_11::after {
|
|
4776
4776
|
background:
|
|
4777
4777
|
linear-gradient(
|
|
4778
4778
|
to right,
|
|
4779
4779
|
rgba(8, 14, 18, 0.9) 0,
|
|
4780
4780
|
rgba(8, 14, 18, 0) 53.33%);
|
|
4781
4781
|
}
|
|
4782
|
-
.
|
|
4783
|
-
.
|
|
4782
|
+
._image_15sq4_11 img,
|
|
4783
|
+
._video_15sq4_83 {
|
|
4784
4784
|
object-position: center;
|
|
4785
4785
|
}
|
|
4786
|
-
.
|
|
4786
|
+
._foot_15sq4_34 {
|
|
4787
4787
|
gap: var(--space-16);
|
|
4788
4788
|
width: 100%;
|
|
4789
4789
|
max-width: 624px;
|
|
4790
4790
|
padding-left: 64px;
|
|
4791
4791
|
}
|
|
4792
|
-
.
|
|
4792
|
+
._text_15sq4_40 {
|
|
4793
4793
|
align-items: flex-start;
|
|
4794
4794
|
padding: 0;
|
|
4795
4795
|
}
|
|
4796
|
-
.
|
|
4796
|
+
._text_15sq4_40 ._logo_15sq4_48 {
|
|
4797
4797
|
display: none;
|
|
4798
4798
|
}
|
|
4799
|
-
.
|
|
4799
|
+
._copy_15sq4_53 {
|
|
4800
4800
|
gap: var(--space-16);
|
|
4801
4801
|
text-align: left;
|
|
4802
4802
|
}
|
|
4803
|
-
.
|
|
4803
|
+
._headline_15sq4_62 {
|
|
4804
4804
|
font-size: 64px;
|
|
4805
4805
|
line-height: 0.9375;
|
|
4806
4806
|
letter-spacing: -0.64px;
|
|
4807
4807
|
}
|
|
4808
|
-
.
|
|
4808
|
+
._body_15sq4_70 {
|
|
4809
4809
|
max-width: 520px;
|
|
4810
4810
|
font-size: 20px;
|
|
4811
4811
|
line-height: 1.4;
|
|
4812
4812
|
white-space: normal;
|
|
4813
4813
|
}
|
|
4814
|
-
.
|
|
4814
|
+
._cta_15sq4_79 {
|
|
4815
4815
|
padding: var(--space-8) 0 0;
|
|
4816
4816
|
}
|
|
4817
|
-
.
|
|
4817
|
+
._cta_15sq4_79 > * {
|
|
4818
4818
|
width: auto;
|
|
4819
4819
|
min-width: 173px;
|
|
4820
4820
|
}
|
|
@@ -5370,124 +5370,6 @@
|
|
|
5370
5370
|
opacity: 0.8;
|
|
5371
5371
|
}
|
|
5372
5372
|
}
|
|
5373
|
-
._header_r9jjq_14 {
|
|
5374
|
-
position: sticky;
|
|
5375
|
-
top: 0;
|
|
5376
|
-
z-index: 40;
|
|
5377
|
-
display: flex;
|
|
5378
|
-
align-items: center;
|
|
5379
|
-
justify-content: space-between;
|
|
5380
|
-
height: var(--header-height);
|
|
5381
|
-
padding: 0 var(--space-16);
|
|
5382
|
-
background: #f9fafa;
|
|
5383
|
-
color: #0c161c;
|
|
5384
|
-
box-shadow: inset 0 -1px 0 #dddedf;
|
|
5385
|
-
}
|
|
5386
|
-
._floating_r9jjq_39 {
|
|
5387
|
-
position: sticky;
|
|
5388
|
-
top: 0;
|
|
5389
|
-
margin-bottom: calc(-1 * var(--header-height));
|
|
5390
|
-
z-index: 5;
|
|
5391
|
-
background: none;
|
|
5392
|
-
color: #f9fafa;
|
|
5393
|
-
transition: background-color 160ms ease;
|
|
5394
|
-
box-shadow: none;
|
|
5395
|
-
}
|
|
5396
|
-
._floating_r9jjq_39._scrolled_r9jjq_47 {
|
|
5397
|
-
background: rgba(8, 14, 18, 0.6);
|
|
5398
|
-
}
|
|
5399
|
-
@media (prefers-reduced-motion: reduce) {
|
|
5400
|
-
._floating_r9jjq_39 {
|
|
5401
|
-
transition: none;
|
|
5402
|
-
}
|
|
5403
|
-
}
|
|
5404
|
-
._title_r9jjq_121 {
|
|
5405
|
-
flex: 0 0 auto;
|
|
5406
|
-
width: 222px;
|
|
5407
|
-
min-width: 0;
|
|
5408
|
-
font-size: var(--type-caption-sm-size);
|
|
5409
|
-
line-height: var(--type-caption-sm-line);
|
|
5410
|
-
font-weight: var(--font-weight-bold);
|
|
5411
|
-
color: inherit;
|
|
5412
|
-
overflow: hidden;
|
|
5413
|
-
text-overflow: ellipsis;
|
|
5414
|
-
white-space: nowrap;
|
|
5415
|
-
}
|
|
5416
|
-
._title_r9jjq_121._leading_r9jjq_134 {
|
|
5417
|
-
flex: 1 1 auto;
|
|
5418
|
-
width: auto;
|
|
5419
|
-
margin-left: var(--space-16);
|
|
5420
|
-
}
|
|
5421
|
-
._right_r9jjq_140 {
|
|
5422
|
-
display: flex;
|
|
5423
|
-
align-items: center;
|
|
5424
|
-
gap: var(--space-16);
|
|
5425
|
-
}
|
|
5426
|
-
._spacer_r9jjq_153 {
|
|
5427
|
-
width: 24px;
|
|
5428
|
-
height: 24px;
|
|
5429
|
-
}
|
|
5430
|
-
._iconBtn_r9jjq_158 {
|
|
5431
|
-
position: relative;
|
|
5432
|
-
display: inline-flex;
|
|
5433
|
-
align-items: center;
|
|
5434
|
-
justify-content: center;
|
|
5435
|
-
width: 24px;
|
|
5436
|
-
height: 24px;
|
|
5437
|
-
padding: 0;
|
|
5438
|
-
border: none;
|
|
5439
|
-
background: none;
|
|
5440
|
-
color: inherit;
|
|
5441
|
-
cursor: pointer;
|
|
5442
|
-
text-decoration: none;
|
|
5443
|
-
}
|
|
5444
|
-
._iconBtn_r9jjq_158::after {
|
|
5445
|
-
content: "";
|
|
5446
|
-
position: absolute;
|
|
5447
|
-
inset: -10px;
|
|
5448
|
-
}
|
|
5449
|
-
._menuBtn_r9jjq_185 {
|
|
5450
|
-
width: 32px;
|
|
5451
|
-
height: 32px;
|
|
5452
|
-
}
|
|
5453
|
-
._menuBtn_r9jjq_185::after {
|
|
5454
|
-
inset: -6px;
|
|
5455
|
-
}
|
|
5456
|
-
._badge_r9jjq_194 {
|
|
5457
|
-
position: absolute;
|
|
5458
|
-
top: -6px;
|
|
5459
|
-
left: 14px;
|
|
5460
|
-
z-index: 1;
|
|
5461
|
-
min-width: 16px;
|
|
5462
|
-
height: 16px;
|
|
5463
|
-
padding: 0 var(--space-4);
|
|
5464
|
-
box-sizing: border-box;
|
|
5465
|
-
display: inline-flex;
|
|
5466
|
-
align-items: center;
|
|
5467
|
-
justify-content: center;
|
|
5468
|
-
border-radius: var(--radius-full);
|
|
5469
|
-
background: #d12424;
|
|
5470
|
-
color: #ffffff;
|
|
5471
|
-
font-size: var(--type-trimmed-xs-size);
|
|
5472
|
-
line-height: 1;
|
|
5473
|
-
letter-spacing: 0.12px;
|
|
5474
|
-
font-weight: var(--font-weight-bold);
|
|
5475
|
-
font-variant-numeric: tabular-nums;
|
|
5476
|
-
pointer-events: none;
|
|
5477
|
-
}
|
|
5478
|
-
._closeSlot_r9jjq_221 {
|
|
5479
|
-
flex: 0 0 auto;
|
|
5480
|
-
width: 32px;
|
|
5481
|
-
height: 32px;
|
|
5482
|
-
}
|
|
5483
|
-
._closeSlot_r9jjq_221._iconBtn_r9jjq_158::after {
|
|
5484
|
-
inset: -6px;
|
|
5485
|
-
}
|
|
5486
|
-
._centred_r9jjq_236 {
|
|
5487
|
-
flex: 1 1 auto;
|
|
5488
|
-
width: auto;
|
|
5489
|
-
text-align: center;
|
|
5490
|
-
}
|
|
5491
5373
|
._overlay_y4mxb_5 {
|
|
5492
5374
|
position: fixed;
|
|
5493
5375
|
inset: 0;
|
|
@@ -5774,3 +5656,126 @@
|
|
|
5774
5656
|
font-variant-numeric: tabular-nums;
|
|
5775
5657
|
pointer-events: none;
|
|
5776
5658
|
}
|
|
5659
|
+
._header_iwoi3_14 {
|
|
5660
|
+
position: sticky;
|
|
5661
|
+
top: 0;
|
|
5662
|
+
z-index: 40;
|
|
5663
|
+
display: flex;
|
|
5664
|
+
align-items: center;
|
|
5665
|
+
justify-content: space-between;
|
|
5666
|
+
height: var(--header-height);
|
|
5667
|
+
padding: 0 var(--space-16);
|
|
5668
|
+
background: #f9fafa;
|
|
5669
|
+
color: #0c161c;
|
|
5670
|
+
box-shadow: inset 0 -1px 0 #dddedf;
|
|
5671
|
+
}
|
|
5672
|
+
._floating_iwoi3_39 {
|
|
5673
|
+
position: sticky;
|
|
5674
|
+
top: 0;
|
|
5675
|
+
margin-bottom: calc(-1 * var(--header-height));
|
|
5676
|
+
z-index: 5;
|
|
5677
|
+
background: none;
|
|
5678
|
+
color: #f9fafa;
|
|
5679
|
+
transition: background-color 160ms ease;
|
|
5680
|
+
box-shadow: none;
|
|
5681
|
+
}
|
|
5682
|
+
._floating_iwoi3_39._scrolled_iwoi3_47 {
|
|
5683
|
+
background: rgba(8, 14, 18, 0.6);
|
|
5684
|
+
}
|
|
5685
|
+
@media (prefers-reduced-motion: reduce) {
|
|
5686
|
+
._floating_iwoi3_39 {
|
|
5687
|
+
transition: none;
|
|
5688
|
+
}
|
|
5689
|
+
}
|
|
5690
|
+
._title_iwoi3_121 {
|
|
5691
|
+
flex: 0 0 auto;
|
|
5692
|
+
width: 222px;
|
|
5693
|
+
min-width: 0;
|
|
5694
|
+
font-size: var(--type-caption-sm-size);
|
|
5695
|
+
line-height: var(--type-caption-sm-line);
|
|
5696
|
+
font-weight: var(--font-weight-bold);
|
|
5697
|
+
color: inherit;
|
|
5698
|
+
overflow: hidden;
|
|
5699
|
+
text-overflow: ellipsis;
|
|
5700
|
+
white-space: nowrap;
|
|
5701
|
+
}
|
|
5702
|
+
._title_iwoi3_121._leading_iwoi3_134 {
|
|
5703
|
+
flex: 1 1 auto;
|
|
5704
|
+
width: auto;
|
|
5705
|
+
margin-left: var(--space-16);
|
|
5706
|
+
}
|
|
5707
|
+
._right_iwoi3_140 {
|
|
5708
|
+
display: flex;
|
|
5709
|
+
align-items: center;
|
|
5710
|
+
gap: var(--space-16);
|
|
5711
|
+
}
|
|
5712
|
+
._spacer_iwoi3_153 {
|
|
5713
|
+
width: 24px;
|
|
5714
|
+
height: 24px;
|
|
5715
|
+
}
|
|
5716
|
+
._iconBtn_iwoi3_158 {
|
|
5717
|
+
position: relative;
|
|
5718
|
+
display: inline-flex;
|
|
5719
|
+
align-items: center;
|
|
5720
|
+
justify-content: center;
|
|
5721
|
+
width: 24px;
|
|
5722
|
+
height: 24px;
|
|
5723
|
+
padding: 0;
|
|
5724
|
+
border: none;
|
|
5725
|
+
background: none;
|
|
5726
|
+
color: inherit;
|
|
5727
|
+
cursor: pointer;
|
|
5728
|
+
text-decoration: none;
|
|
5729
|
+
}
|
|
5730
|
+
._iconBtn_iwoi3_158::after {
|
|
5731
|
+
content: "";
|
|
5732
|
+
position: absolute;
|
|
5733
|
+
inset: -10px;
|
|
5734
|
+
}
|
|
5735
|
+
._menuBtn_iwoi3_185 {
|
|
5736
|
+
width: 32px;
|
|
5737
|
+
height: 32px;
|
|
5738
|
+
}
|
|
5739
|
+
._menuBtn_iwoi3_185::after {
|
|
5740
|
+
inset: -6px;
|
|
5741
|
+
}
|
|
5742
|
+
._badge_iwoi3_194 {
|
|
5743
|
+
position: absolute;
|
|
5744
|
+
top: -6px;
|
|
5745
|
+
left: 14px;
|
|
5746
|
+
z-index: 1;
|
|
5747
|
+
min-width: 16px;
|
|
5748
|
+
height: 16px;
|
|
5749
|
+
padding: 0 var(--space-4);
|
|
5750
|
+
box-sizing: border-box;
|
|
5751
|
+
display: inline-flex;
|
|
5752
|
+
align-items: center;
|
|
5753
|
+
justify-content: center;
|
|
5754
|
+
border-radius: var(--radius-full);
|
|
5755
|
+
background: #d12424;
|
|
5756
|
+
color: #ffffff;
|
|
5757
|
+
font-size: var(--type-trimmed-xs-size);
|
|
5758
|
+
line-height: 1;
|
|
5759
|
+
letter-spacing: 0.12px;
|
|
5760
|
+
font-weight: var(--font-weight-bold);
|
|
5761
|
+
font-variant-numeric: tabular-nums;
|
|
5762
|
+
pointer-events: none;
|
|
5763
|
+
}
|
|
5764
|
+
._closeSlot_iwoi3_221 {
|
|
5765
|
+
flex: 0 0 auto;
|
|
5766
|
+
width: 32px;
|
|
5767
|
+
height: 32px;
|
|
5768
|
+
}
|
|
5769
|
+
._closeSlot_iwoi3_221._iconBtn_iwoi3_158::after {
|
|
5770
|
+
inset: -6px;
|
|
5771
|
+
}
|
|
5772
|
+
._centred_iwoi3_236 {
|
|
5773
|
+
flex: 1 1 auto;
|
|
5774
|
+
width: auto;
|
|
5775
|
+
text-align: center;
|
|
5776
|
+
}
|
|
5777
|
+
@media (min-width: 1200px) {
|
|
5778
|
+
._narrowOnly_iwoi3_243 {
|
|
5779
|
+
display: none;
|
|
5780
|
+
}
|
|
5781
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nok-integration/storefront-react",
|
|
3
|
-
"version": "0.29.
|
|
3
|
+
"version": "0.29.11",
|
|
4
4
|
"description": "Mountable React storefront components: catalogue, product detail and cart, mounted directly into a host DOM tree. No iframe.",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"type": "module",
|