@proximus/lavender-styling 2.0.0-alpha.5 → 2.0.0-alpha.50
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/css/proximus/themes-tokens.css +67 -51
- package/dist/css/proximus-ebu/themes-tokens.css +67 -51
- package/dist/css/scarlet/themes-tokens.css +65 -49
- package/dist/js/proximus/themesTokens.d.ts +98 -2
- package/dist/js/proximus/themesTokens.js +272 -176
- package/dist/js/proximus-ebu/themesTokens.d.ts +98 -2
- package/dist/js/proximus-ebu/themesTokens.js +272 -176
- package/dist/js/scarlet/themesTokens.d.ts +96 -0
- package/dist/js/scarlet/themesTokens.js +268 -172
- package/package.json +1 -1
|
@@ -90,8 +90,8 @@
|
|
|
90
90
|
--px-color-background-state-hover-inverted: rgba(255, 255, 255, 0.12);
|
|
91
91
|
--px-color-background-state-hover-bordered-default: rgba(255, 255, 255, 0.40);
|
|
92
92
|
--px-color-background-state-hover-bordered-inverted: rgba(0, 0, 0, 0.12);
|
|
93
|
-
--px-color-background-state-active-default: #
|
|
94
|
-
--px-color-background-state-active-inverted:
|
|
93
|
+
--px-color-background-state-active-default: #5C2D91;
|
|
94
|
+
--px-color-background-state-active-inverted: #ffffff;
|
|
95
95
|
--px-color-background-state-disabled-default: rgba(0, 0, 0, 0.04);
|
|
96
96
|
--px-color-background-state-disabled-inverted: rgba(255, 255, 255, 0.08);
|
|
97
97
|
--px-color-background-surface-light: #ffffff;
|
|
@@ -123,8 +123,8 @@
|
|
|
123
123
|
--px-color-border-purpose-unlimited-inverted: #0088F5;
|
|
124
124
|
--px-color-border-state-hover-default: #5C2D91;
|
|
125
125
|
--px-color-border-state-hover-inverted: #ffffff;
|
|
126
|
-
--px-color-border-state-active-default: #
|
|
127
|
-
--px-color-border-state-active-inverted:
|
|
126
|
+
--px-color-border-state-active-default: #5C2D91;
|
|
127
|
+
--px-color-border-state-active-inverted: #ffffff;
|
|
128
128
|
--px-color-icon-brand-default: #5C2D91;
|
|
129
129
|
--px-color-icon-brand-inverted: #ffffff;
|
|
130
130
|
--px-color-icon-accent-default: #5C2D91;
|
|
@@ -145,8 +145,8 @@
|
|
|
145
145
|
--px-color-icon-purpose-promo-inverted: #FF4371;
|
|
146
146
|
--px-color-icon-state-hover-default: #7d57a7;
|
|
147
147
|
--px-color-icon-state-hover-inverted: rgba(255, 255, 255, 0.80);
|
|
148
|
-
--px-color-icon-state-active-default: #
|
|
149
|
-
--px-color-icon-state-active-inverted:
|
|
148
|
+
--px-color-icon-state-active-default: #5C2D91;
|
|
149
|
+
--px-color-icon-state-active-inverted: #ffffff;
|
|
150
150
|
--px-color-icon-state-disabled-default: rgba(0, 0, 0, 0.12);
|
|
151
151
|
--px-color-icon-state-disabled-inverted: rgba(255, 255, 255, 0.16);
|
|
152
152
|
--px-color-text-brand-default: #5C2D91;
|
|
@@ -165,10 +165,10 @@
|
|
|
165
165
|
--px-color-text-purpose-unlimited-inverted: #0088F5;
|
|
166
166
|
--px-color-text-purpose-promo-default: #C7264D;
|
|
167
167
|
--px-color-text-purpose-promo-inverted: #FF4371;
|
|
168
|
-
--px-color-text-state-hover-default: #
|
|
168
|
+
--px-color-text-state-hover-default: #5C2D91;
|
|
169
169
|
--px-color-text-state-hover-inverted: rgba(255, 255, 255, 0.80);
|
|
170
|
-
--px-color-text-state-active-default: #
|
|
171
|
-
--px-color-text-state-active-inverted:
|
|
170
|
+
--px-color-text-state-active-default: #5C2D91;
|
|
171
|
+
--px-color-text-state-active-inverted: #ffffff;
|
|
172
172
|
--px-color-text-state-disabled-default: rgba(0, 0, 0, 0.12);
|
|
173
173
|
--px-color-text-state-disabled-inverted: rgba(255, 255, 255, 0.16);
|
|
174
174
|
--px-font-family: Proximus, Verdana, Helvetica, sans-serif;
|
|
@@ -221,7 +221,7 @@
|
|
|
221
221
|
--px-utility-size-s: 0.125em;
|
|
222
222
|
--px-utility-size-m: 0.5em;
|
|
223
223
|
--px-focus-l-mobile: 18px;
|
|
224
|
-
--px-focus-l-tablet:
|
|
224
|
+
--px-focus-l-tablet: 18px;
|
|
225
225
|
--px-focus-l-laptop: 20px;
|
|
226
226
|
--px-focus-l-desktop: 20px;
|
|
227
227
|
--px-focus-offset-mobile: 4px;
|
|
@@ -277,67 +277,83 @@
|
|
|
277
277
|
--px-padding-m-laptop: 24px;
|
|
278
278
|
--px-padding-m-desktop: 24px;
|
|
279
279
|
--px-padding-l-mobile: 24px;
|
|
280
|
-
--px-padding-l-tablet:
|
|
280
|
+
--px-padding-l-tablet: 24px;
|
|
281
281
|
--px-padding-l-laptop: 40px;
|
|
282
282
|
--px-padding-l-desktop: 40px;
|
|
283
283
|
--px-padding-xl-mobile: 40px;
|
|
284
|
-
--px-padding-xl-tablet:
|
|
284
|
+
--px-padding-xl-tablet: 40px;
|
|
285
285
|
--px-padding-xl-laptop: 80px;
|
|
286
286
|
--px-padding-xl-desktop: 80px;
|
|
287
287
|
--px-platform-default-width-mobile: 23.4375em;
|
|
288
|
-
--px-platform-default-width-tablet:
|
|
288
|
+
--px-platform-default-width-tablet: 23.4375em;
|
|
289
289
|
--px-platform-default-width-laptop: 90em;
|
|
290
290
|
--px-platform-default-width-desktop: 90em;
|
|
291
291
|
--px-content-wrapper-min-width-mobile: 21.4375em;
|
|
292
|
-
--px-content-wrapper-min-width-tablet:
|
|
292
|
+
--px-content-wrapper-min-width-tablet: 21.4375em;
|
|
293
293
|
--px-content-wrapper-min-width-laptop: 73.75em;
|
|
294
294
|
--px-content-wrapper-min-width-desktop: 73.75em;
|
|
295
295
|
--px-content-wrapper-max-width-mobile: 62em;
|
|
296
|
-
--px-content-wrapper-max-width-tablet:
|
|
296
|
+
--px-content-wrapper-max-width-tablet: 62em;
|
|
297
297
|
--px-content-wrapper-max-width-laptop: 73.75em;
|
|
298
298
|
--px-content-wrapper-max-width-desktop: 73.75em;
|
|
299
299
|
--px-price-size-decimal-s-mobile: 0.9375em;
|
|
300
|
-
--px-price-size-decimal-s-tablet:
|
|
300
|
+
--px-price-size-decimal-s-tablet: 0.9375em;
|
|
301
301
|
--px-price-size-decimal-s-laptop: 1em;
|
|
302
302
|
--px-price-size-decimal-s-desktop: 1em;
|
|
303
303
|
--px-price-size-decimal-m-mobile: 0.8125em;
|
|
304
|
-
--px-price-size-decimal-m-tablet:
|
|
304
|
+
--px-price-size-decimal-m-tablet: 0.8125em;
|
|
305
305
|
--px-price-size-decimal-m-laptop: 1em;
|
|
306
306
|
--px-price-size-decimal-m-desktop: 1em;
|
|
307
307
|
--px-price-size-decimal-l-mobile: 0.875em;
|
|
308
|
-
--px-price-size-decimal-l-tablet:
|
|
308
|
+
--px-price-size-decimal-l-tablet: 0.875em;
|
|
309
309
|
--px-price-size-decimal-l-laptop: 1.125em;
|
|
310
310
|
--px-price-size-decimal-l-desktop: 1.125em;
|
|
311
311
|
--px-price-size-sign-s-mobile: 0.875em;
|
|
312
|
-
--px-price-size-sign-s-tablet:
|
|
312
|
+
--px-price-size-sign-s-tablet: 0.875em;
|
|
313
313
|
--px-price-size-sign-s-laptop: 1.125em;
|
|
314
314
|
--px-price-size-sign-s-desktop: 1.125em;
|
|
315
315
|
--px-price-size-sign-m-mobile: 1em;
|
|
316
|
-
--px-price-size-sign-m-tablet:
|
|
316
|
+
--px-price-size-sign-m-tablet: 1em;
|
|
317
317
|
--px-price-size-sign-m-laptop: 1.3125em;
|
|
318
318
|
--px-price-size-sign-m-desktop: 1.3125em;
|
|
319
319
|
--px-price-size-sign-l-mobile: 1.25em;
|
|
320
|
-
--px-price-size-sign-l-tablet: 1.
|
|
320
|
+
--px-price-size-sign-l-tablet: 1.25em;
|
|
321
321
|
--px-price-size-sign-l-laptop: 1.75em;
|
|
322
322
|
--px-price-size-sign-l-desktop: 1.75em;
|
|
323
|
-
--px-price-size-unit-s-mobile:
|
|
324
|
-
--px-price-size-unit-s-tablet:
|
|
323
|
+
--px-price-size-unit-s-mobile: 1em;
|
|
324
|
+
--px-price-size-unit-s-tablet: 1em;
|
|
325
325
|
--px-price-size-unit-s-laptop: 1.25em;
|
|
326
326
|
--px-price-size-unit-s-desktop: 1.25em;
|
|
327
327
|
--px-price-size-unit-m-mobile: 1.25em;
|
|
328
|
-
--px-price-size-unit-m-tablet: 1.
|
|
329
|
-
--px-price-size-unit-m-laptop: 1.
|
|
330
|
-
--px-price-size-unit-m-desktop: 1.
|
|
331
|
-
--px-price-size-unit-l-mobile: 1.
|
|
332
|
-
--px-price-size-unit-l-tablet:
|
|
328
|
+
--px-price-size-unit-m-tablet: 1.25em;
|
|
329
|
+
--px-price-size-unit-m-laptop: 1.75em;
|
|
330
|
+
--px-price-size-unit-m-desktop: 1.75em;
|
|
331
|
+
--px-price-size-unit-l-mobile: 1.5em;
|
|
332
|
+
--px-price-size-unit-l-tablet: 1.5em;
|
|
333
333
|
--px-price-size-unit-l-laptop: 2em;
|
|
334
334
|
--px-price-size-unit-l-desktop: 2em;
|
|
335
|
+
--px-spacing-has-patch-mobile: 14px;
|
|
336
|
+
--px-spacing-has-patch-tablet: 14px;
|
|
337
|
+
--px-spacing-has-patch-laptop: 14px;
|
|
338
|
+
--px-spacing-has-patch-desktop: 14px;
|
|
339
|
+
--px-spacing-neighbor-has-patch-mobile: 0px;
|
|
340
|
+
--px-spacing-neighbor-has-patch-tablet: 0px;
|
|
341
|
+
--px-spacing-neighbor-has-patch-laptop: 14px;
|
|
342
|
+
--px-spacing-neighbor-has-patch-desktop: 14px;
|
|
343
|
+
--px-spacing-has-ribbon-mobile: 40px;
|
|
344
|
+
--px-spacing-has-ribbon-tablet: 40px;
|
|
345
|
+
--px-spacing-has-ribbon-laptop: 40px;
|
|
346
|
+
--px-spacing-has-ribbon-desktop: 40px;
|
|
347
|
+
--px-spacing-neighbor-has-ribbon-mobile: 0px;
|
|
348
|
+
--px-spacing-neighbor-has-ribbon-tablet: 0px;
|
|
349
|
+
--px-spacing-neighbor-has-ribbon-laptop: 40px;
|
|
350
|
+
--px-spacing-neighbor-has-ribbon-desktop: 40px;
|
|
335
351
|
--px-spacing-heading-to-subtitle-mobile: 8px;
|
|
336
|
-
--px-spacing-heading-to-subtitle-tablet:
|
|
352
|
+
--px-spacing-heading-to-subtitle-tablet: 8px;
|
|
337
353
|
--px-spacing-heading-to-subtitle-laptop: 16px;
|
|
338
354
|
--px-spacing-heading-to-subtitle-desktop: 16px;
|
|
339
355
|
--px-spacing-heading-to-content-mobile: 16px;
|
|
340
|
-
--px-spacing-heading-to-content-tablet:
|
|
356
|
+
--px-spacing-heading-to-content-tablet: 16px;
|
|
341
357
|
--px-spacing-heading-to-content-laptop: 24px;
|
|
342
358
|
--px-spacing-heading-to-content-desktop: 24px;
|
|
343
359
|
--px-spacing-none-mobile: 0px;
|
|
@@ -361,87 +377,87 @@
|
|
|
361
377
|
--px-spacing-default-laptop: 24px;
|
|
362
378
|
--px-spacing-default-desktop: 24px;
|
|
363
379
|
--px-spacing-l-mobile: 24px;
|
|
364
|
-
--px-spacing-l-tablet:
|
|
380
|
+
--px-spacing-l-tablet: 24px;
|
|
365
381
|
--px-spacing-l-laptop: 40px;
|
|
366
382
|
--px-spacing-l-desktop: 40px;
|
|
367
383
|
--px-overlapped-mobile: -24px;
|
|
368
|
-
--px-overlapped-tablet: -
|
|
384
|
+
--px-overlapped-tablet: -24px;
|
|
369
385
|
--px-overlapped-laptop: -40px;
|
|
370
386
|
--px-overlapped-desktop: -40px;
|
|
371
387
|
--px-spacing-page-layout-between-sections-mobile: 40px;
|
|
372
|
-
--px-spacing-page-layout-between-sections-tablet:
|
|
388
|
+
--px-spacing-page-layout-between-sections-tablet: 40px;
|
|
373
389
|
--px-spacing-page-layout-between-sections-laptop: 80px;
|
|
374
390
|
--px-spacing-page-layout-between-sections-desktop: 80px;
|
|
375
391
|
--px-text-size-body-l-mobile: 1em;
|
|
376
|
-
--px-text-size-body-l-tablet:
|
|
392
|
+
--px-text-size-body-l-tablet: 1em;
|
|
377
393
|
--px-text-size-body-l-laptop: 1.125em;
|
|
378
394
|
--px-text-size-body-l-desktop: 1.125em;
|
|
379
395
|
--px-text-size-body-m-mobile: 0.875em;
|
|
380
|
-
--px-text-size-body-m-tablet:
|
|
396
|
+
--px-text-size-body-m-tablet: 0.875em;
|
|
381
397
|
--px-text-size-body-m-laptop: 1em;
|
|
382
398
|
--px-text-size-body-m-desktop: 1em;
|
|
383
399
|
--px-text-size-body-s-mobile: 0.75em;
|
|
384
|
-
--px-text-size-body-s-tablet: 0.
|
|
400
|
+
--px-text-size-body-s-tablet: 0.75em;
|
|
385
401
|
--px-text-size-body-s-laptop: 0.875em;
|
|
386
402
|
--px-text-size-body-s-desktop: 0.875em;
|
|
387
403
|
--px-text-size-body-xs-mobile: 0.625em;
|
|
388
|
-
--px-text-size-body-xs-tablet: 0.
|
|
404
|
+
--px-text-size-body-xs-tablet: 0.625em;
|
|
389
405
|
--px-text-size-body-xs-laptop: 0.75em;
|
|
390
406
|
--px-text-size-body-xs-desktop: 0.75em;
|
|
391
407
|
--px-text-size-heading-5xl-mobile: 2.25em;
|
|
392
|
-
--px-text-size-heading-5xl-tablet: 2.
|
|
408
|
+
--px-text-size-heading-5xl-tablet: 2.25em;
|
|
393
409
|
--px-text-size-heading-5xl-laptop: 2.5em;
|
|
394
410
|
--px-text-size-heading-5xl-desktop: 2.5em;
|
|
395
411
|
--px-text-size-heading-4xl-mobile: 2em;
|
|
412
|
+
--px-text-size-heading-4xl-tablet: 2em;
|
|
396
413
|
--px-text-size-heading-4xl-laptop: 2.5em;
|
|
397
|
-
--px-text-size-heading-4xl-tablet: 2.5em;
|
|
398
414
|
--px-text-size-heading-4xl-desktop: 2.5em;
|
|
399
415
|
--px-text-size-heading-3xl-mobile: 1.75em;
|
|
400
|
-
--px-text-size-heading-3xl-tablet:
|
|
416
|
+
--px-text-size-heading-3xl-tablet: 1.75em;
|
|
401
417
|
--px-text-size-heading-3xl-laptop: 2.25em;
|
|
402
418
|
--px-text-size-heading-3xl-desktop: 2.25em;
|
|
403
419
|
--px-text-size-heading-2xl-mobile: 1.5em;
|
|
404
|
-
--px-text-size-heading-2xl-tablet: 1.
|
|
420
|
+
--px-text-size-heading-2xl-tablet: 1.5em;
|
|
405
421
|
--px-text-size-heading-2xl-laptop: 1.75em;
|
|
406
422
|
--px-text-size-heading-2xl-desktop: 1.75em;
|
|
407
423
|
--px-text-size-heading-xl-mobile: 1.25em;
|
|
408
|
-
--px-text-size-heading-xl-tablet: 1.
|
|
424
|
+
--px-text-size-heading-xl-tablet: 1.25em;
|
|
409
425
|
--px-text-size-heading-xl-laptop: 1.5em;
|
|
410
426
|
--px-text-size-heading-xl-desktop: 1.5em;
|
|
411
427
|
--px-text-size-heading-l-mobile: 1.125em;
|
|
412
|
-
--px-text-size-heading-l-tablet: 1.
|
|
428
|
+
--px-text-size-heading-l-tablet: 1.125em;
|
|
413
429
|
--px-text-size-heading-l-laptop: 1.25em;
|
|
414
430
|
--px-text-size-heading-l-desktop: 1.25em;
|
|
415
431
|
--px-text-size-heading-m-mobile: 1em;
|
|
416
|
-
--px-text-size-heading-m-tablet:
|
|
432
|
+
--px-text-size-heading-m-tablet: 1em;
|
|
417
433
|
--px-text-size-heading-m-laptop: 1.125em;
|
|
418
434
|
--px-text-size-heading-m-desktop: 1.125em;
|
|
419
435
|
--px-text-size-heading-s-mobile: 0.875em;
|
|
420
|
-
--px-text-size-heading-s-tablet:
|
|
436
|
+
--px-text-size-heading-s-tablet: 0.875em;
|
|
421
437
|
--px-text-size-heading-s-laptop: 1em;
|
|
422
438
|
--px-text-size-heading-s-desktop: 1em;
|
|
423
439
|
--px-text-size-label-l-mobile: 1em;
|
|
424
|
-
--px-text-size-label-l-tablet:
|
|
440
|
+
--px-text-size-label-l-tablet: 1em;
|
|
425
441
|
--px-text-size-label-l-laptop: 1.125em;
|
|
426
442
|
--px-text-size-label-l-desktop: 1.125em;
|
|
427
443
|
--px-text-size-label-m-mobile: 0.875em;
|
|
428
|
-
--px-text-size-label-m-tablet:
|
|
444
|
+
--px-text-size-label-m-tablet: 0.875em;
|
|
429
445
|
--px-text-size-label-m-laptop: 1em;
|
|
430
446
|
--px-text-size-label-m-desktop: 1em;
|
|
431
447
|
--px-text-size-label-s-mobile: 0.75em;
|
|
432
|
-
--px-text-size-label-s-tablet: 0.
|
|
448
|
+
--px-text-size-label-s-tablet: 0.75em;
|
|
433
449
|
--px-text-size-label-s-laptop: 0.875em;
|
|
434
450
|
--px-text-size-label-s-desktop: 0.875em;
|
|
435
451
|
--px-text-size-label-xs-mobile: 0.625em;
|
|
436
|
-
--px-text-size-label-xs-tablet: 0.
|
|
452
|
+
--px-text-size-label-xs-tablet: 0.625em;
|
|
437
453
|
--px-text-size-label-xs-laptop: 0.75em;
|
|
438
454
|
--px-text-size-label-xs-desktop: 0.75em;
|
|
439
455
|
--px-text-size-link-m-mobile: 0.875em;
|
|
440
|
-
--px-text-size-link-m-tablet:
|
|
456
|
+
--px-text-size-link-m-tablet: 0.875em;
|
|
441
457
|
--px-text-size-link-m-laptop: 1em;
|
|
442
458
|
--px-text-size-link-m-desktop: 1em;
|
|
443
459
|
--px-text-size-link-s-mobile: 0.75em;
|
|
444
|
-
--px-text-size-link-s-tablet: 0.
|
|
460
|
+
--px-text-size-link-s-tablet: 0.75em;
|
|
445
461
|
--px-text-size-link-s-laptop: 0.875em;
|
|
446
462
|
--px-text-size-link-s-desktop: 0.875em;
|
|
447
463
|
}
|
|
@@ -88,8 +88,8 @@
|
|
|
88
88
|
--px-color-background-state-hover-inverted: rgba(255, 255, 255, 0.12);
|
|
89
89
|
--px-color-background-state-hover-bordered-default: rgba(255, 255, 255, 0.40);
|
|
90
90
|
--px-color-background-state-hover-bordered-inverted: rgba(0, 0, 0, 0.12);
|
|
91
|
-
--px-color-background-state-active-default: #
|
|
92
|
-
--px-color-background-state-active-inverted:
|
|
91
|
+
--px-color-background-state-active-default: #5C2D91;
|
|
92
|
+
--px-color-background-state-active-inverted: #ffffff;
|
|
93
93
|
--px-color-background-state-disabled-default: rgba(0, 0, 0, 0.04);
|
|
94
94
|
--px-color-background-state-disabled-inverted: rgba(255, 255, 255, 0.08);
|
|
95
95
|
--px-color-background-surface-light: #ffffff;
|
|
@@ -121,8 +121,8 @@
|
|
|
121
121
|
--px-color-border-purpose-unlimited-inverted: #0088F5;
|
|
122
122
|
--px-color-border-state-hover-default: #5C2D91;
|
|
123
123
|
--px-color-border-state-hover-inverted: #ffffff;
|
|
124
|
-
--px-color-border-state-active-default: #
|
|
125
|
-
--px-color-border-state-active-inverted:
|
|
124
|
+
--px-color-border-state-active-default: #5C2D91;
|
|
125
|
+
--px-color-border-state-active-inverted: #ffffff;
|
|
126
126
|
--px-color-icon-brand-default: #5C2D91;
|
|
127
127
|
--px-color-icon-brand-inverted: #ffffff;
|
|
128
128
|
--px-color-icon-accent-default: #5C2D91;
|
|
@@ -143,8 +143,8 @@
|
|
|
143
143
|
--px-text-color-purpose-promo-inverted: #FF4371;
|
|
144
144
|
--px-color-icon-state-hover-default: #7d57a7;
|
|
145
145
|
--px-color-icon-state-hover-inverted: rgba(255, 255, 255, 0.80);
|
|
146
|
-
--px-color-icon-state-active-default: #
|
|
147
|
-
--px-color-icon-state-active-inverted:
|
|
146
|
+
--px-color-icon-state-active-default: #5C2D91;
|
|
147
|
+
--px-color-icon-state-active-inverted: #ffffff;
|
|
148
148
|
--px-color-icon-state-disabled-default: rgba(0, 0, 0, 0.12);
|
|
149
149
|
--px-color-icon-state-disabled-inverted: rgba(255, 255, 255, 0.16);
|
|
150
150
|
--px-color-text-brand-default: #5C2D91;
|
|
@@ -163,10 +163,10 @@
|
|
|
163
163
|
--px-color-text-purpose-unlimited-inverted: #0088F5;
|
|
164
164
|
--px-color-text-purpose-promo-default: #C7264D;
|
|
165
165
|
--px-color-text-purpose-promo-inverted: #FF4371;
|
|
166
|
-
--px-color-text-state-hover-default: #
|
|
166
|
+
--px-color-text-state-hover-default: #5C2D91;
|
|
167
167
|
--px-color-text-state-hover-inverted: rgba(255, 255, 255, 0.80);
|
|
168
|
-
--px-color-text-state-active-default: #
|
|
169
|
-
--px-color-text-state-active-inverted:
|
|
168
|
+
--px-color-text-state-active-default: #5C2D91;
|
|
169
|
+
--px-color-text-state-active-inverted: #ffffff;
|
|
170
170
|
--px-color-text-state-disabled-default: rgba(0, 0, 0, 0.12);
|
|
171
171
|
--px-color-text-state-disabled-inverted: rgba(255, 255, 255, 0.16);
|
|
172
172
|
--px-font-family: Proximus, Verdana, Helvetica, sans-serif;
|
|
@@ -217,7 +217,7 @@
|
|
|
217
217
|
--px-utility-size-s: 0.125em;
|
|
218
218
|
--px-utility-size-m: 0.5em;
|
|
219
219
|
--px-focus-l-mobile: 18px;
|
|
220
|
-
--px-focus-l-tablet:
|
|
220
|
+
--px-focus-l-tablet: 18px;
|
|
221
221
|
--px-focus-l-laptop: 20px;
|
|
222
222
|
--px-focus-l-desktop: 20px;
|
|
223
223
|
--px-focus-offset-mobile: 4px;
|
|
@@ -273,67 +273,83 @@
|
|
|
273
273
|
--px-padding-m-laptop: 24px;
|
|
274
274
|
--px-padding-m-desktop: 24px;
|
|
275
275
|
--px-padding-l-mobile: 24px;
|
|
276
|
-
--px-padding-l-tablet:
|
|
276
|
+
--px-padding-l-tablet: 24px;
|
|
277
277
|
--px-padding-l-laptop: 40px;
|
|
278
278
|
--px-padding-l-desktop: 40px;
|
|
279
279
|
--px-padding-xl-mobile: 40px;
|
|
280
|
-
--px-padding-xl-tablet:
|
|
280
|
+
--px-padding-xl-tablet: 40px;
|
|
281
281
|
--px-padding-xl-laptop: 80px;
|
|
282
282
|
--px-padding-xl-desktop: 80px;
|
|
283
283
|
--px-platform-default-width-mobile: 23.4375em;
|
|
284
|
+
--px-platform-default-width-tablet: 23.4375em;
|
|
284
285
|
--px-platform-default-width-laptop: 90em;
|
|
285
|
-
--px-platform-default-width-tablet: 90em;
|
|
286
286
|
--px-platform-default-width-desktop: 90em;
|
|
287
287
|
--px-content-wrapper-min-width-mobile: 21.4375em;
|
|
288
|
-
--px-content-wrapper-min-width-tablet:
|
|
288
|
+
--px-content-wrapper-min-width-tablet: 21.4375em;
|
|
289
289
|
--px-content-wrapper-min-width-laptop: 73.75em;
|
|
290
290
|
--px-content-wrapper-min-width-desktop: 73.75em;
|
|
291
291
|
--px-content-wrapper-max-width-mobile: 62em;
|
|
292
|
-
--px-content-wrapper-max-width-tablet:
|
|
292
|
+
--px-content-wrapper-max-width-tablet: 62em;
|
|
293
293
|
--px-content-wrapper-max-width-laptop: 73.75em;
|
|
294
294
|
--px-content-wrapper-max-width-desktop: 73.75em;
|
|
295
295
|
--px-price-size-decimal-s-mobile: 0.9375em;
|
|
296
|
-
--px-price-size-decimal-s-tablet:
|
|
296
|
+
--px-price-size-decimal-s-tablet: 0.9375em;
|
|
297
297
|
--px-price-size-decimal-s-laptop: 1em;
|
|
298
298
|
--px-price-size-decimal-s-desktop: 1em;
|
|
299
299
|
--px-price-size-decimal-m-mobile: 0.8125em;
|
|
300
|
-
--px-price-size-decimal-m-tablet:
|
|
300
|
+
--px-price-size-decimal-m-tablet: 0.8125em;
|
|
301
301
|
--px-price-size-decimal-m-laptop: 1em;
|
|
302
302
|
--px-price-size-decimal-m-desktop: 1em;
|
|
303
303
|
--px-price-size-decimal-l-mobile: 0.875em;
|
|
304
|
-
--px-price-size-decimal-l-tablet:
|
|
304
|
+
--px-price-size-decimal-l-tablet: 0.875em;
|
|
305
305
|
--px-price-size-decimal-l-laptop: 1.125em;
|
|
306
306
|
--px-price-size-decimal-l-desktop: 1.125em;
|
|
307
307
|
--px-price-size-sign-s-mobile: 0.875em;
|
|
308
|
-
--px-price-size-sign-s-tablet:
|
|
308
|
+
--px-price-size-sign-s-tablet: 0.875em;
|
|
309
309
|
--px-price-size-sign-s-laptop: 1.125em;
|
|
310
310
|
--px-price-size-sign-s-desktop: 1.125em;
|
|
311
311
|
--px-price-size-sign-m-mobile: 1em;
|
|
312
|
-
--px-price-size-sign-m-tablet:
|
|
312
|
+
--px-price-size-sign-m-tablet: 1em;
|
|
313
313
|
--px-price-size-sign-m-laptop: 1.3125em;
|
|
314
314
|
--px-price-size-sign-m-desktop: 1.3125em;
|
|
315
315
|
--px-price-size-sign-l-mobile: 1.25em;
|
|
316
|
-
--px-price-size-sign-l-tablet: 1.
|
|
316
|
+
--px-price-size-sign-l-tablet: 1.25em;
|
|
317
317
|
--px-price-size-sign-l-laptop: 1.75em;
|
|
318
318
|
--px-price-size-sign-l-desktop: 1.75em;
|
|
319
|
-
--px-price-size-unit-s-mobile:
|
|
320
|
-
--px-price-size-unit-s-tablet:
|
|
319
|
+
--px-price-size-unit-s-mobile: 1em;
|
|
320
|
+
--px-price-size-unit-s-tablet: 1em;
|
|
321
321
|
--px-price-size-unit-s-laptop: 1.25em;
|
|
322
322
|
--px-price-size-unit-s-desktop: 1.25em;
|
|
323
323
|
--px-price-size-unit-m-mobile: 1.25em;
|
|
324
|
-
--px-price-size-unit-m-tablet: 1.
|
|
325
|
-
--px-price-size-unit-m-laptop: 1.
|
|
326
|
-
--px-price-size-unit-m-desktop: 1.
|
|
327
|
-
--px-price-size-unit-l-mobile: 1.
|
|
328
|
-
--px-price-size-unit-l-tablet:
|
|
324
|
+
--px-price-size-unit-m-tablet: 1.25em;
|
|
325
|
+
--px-price-size-unit-m-laptop: 1.75em;
|
|
326
|
+
--px-price-size-unit-m-desktop: 1.75em;
|
|
327
|
+
--px-price-size-unit-l-mobile: 1.5em;
|
|
328
|
+
--px-price-size-unit-l-tablet: 1.5em;
|
|
329
329
|
--px-price-size-unit-l-laptop: 2em;
|
|
330
330
|
--px-price-size-unit-l-desktop: 2em;
|
|
331
|
+
--px-spacing-has-patch-mobile: 14px;
|
|
332
|
+
--px-spacing-has-patch-tablet: 14px;
|
|
333
|
+
--px-spacing-has-patch-laptop: 14px;
|
|
334
|
+
--px-spacing-has-patch-desktop: 14px;
|
|
335
|
+
--px-spacing-neighbor-has-patch-mobile: 0px;
|
|
336
|
+
--px-spacing-neighbor-has-patch-tablet: 0px;
|
|
337
|
+
--px-spacing-neighbor-has-patch-laptop: 14px;
|
|
338
|
+
--px-spacing-neighbor-has-patch-desktop: 14px;
|
|
339
|
+
--px-spacing-has-ribbon-mobile: 40px;
|
|
340
|
+
--px-spacing-has-ribbon-tablet: 40px;
|
|
341
|
+
--px-spacing-has-ribbon-laptop: 40px;
|
|
342
|
+
--px-spacing-has-ribbon-desktop: 40px;
|
|
343
|
+
--px-spacing-neighbor-has-ribbon-mobile: 0px;
|
|
344
|
+
--px-spacing-neighbor-has-ribbon-tablet: 0px;
|
|
345
|
+
--px-spacing-neighbor-has-ribbon-laptop: 40px;
|
|
346
|
+
--px-spacing-neighbor-has-ribbon-desktop: 40px;
|
|
331
347
|
--px-spacing-heading-to-subtitle-mobile: 8px;
|
|
332
|
-
--px-spacing-heading-to-subtitle-tablet:
|
|
348
|
+
--px-spacing-heading-to-subtitle-tablet: 8px;
|
|
333
349
|
--px-spacing-heading-to-subtitle-laptop: 16px;
|
|
334
350
|
--px-spacing-heading-to-subtitle-desktop: 16px;
|
|
335
351
|
--px-spacing-heading-to-content-mobile: 16px;
|
|
336
|
-
--px-spacing-heading-to-content-tablet:
|
|
352
|
+
--px-spacing-heading-to-content-tablet: 16px;
|
|
337
353
|
--px-spacing-heading-to-content-laptop: 24px;
|
|
338
354
|
--px-spacing-heading-to-content-desktop: 24px;
|
|
339
355
|
--px-none-mobile: 0px;
|
|
@@ -357,87 +373,87 @@
|
|
|
357
373
|
--px-spacing-default-laptop: 24px;
|
|
358
374
|
--px-spacing-default-desktop: 24px;
|
|
359
375
|
--px-spacing-l-mobile: 24px;
|
|
360
|
-
--px-spacing-l-tablet:
|
|
376
|
+
--px-spacing-l-tablet: 24px;
|
|
361
377
|
--px-spacing-l-laptop: 40px;
|
|
362
378
|
--px-spacing-l-desktop: 40px;
|
|
363
379
|
--px-overlapped-mobile: -24px;
|
|
364
|
-
--px-overlapped-tablet: -
|
|
380
|
+
--px-overlapped-tablet: -24px;
|
|
365
381
|
--px-overlapped-laptop: -40px;
|
|
366
382
|
--px-overlapped-desktop: -40px;
|
|
367
383
|
--px-spacing-page-layout-between-sections-mobile: 40px;
|
|
368
|
-
--px-spacing-page-layout-between-sections-tablet:
|
|
384
|
+
--px-spacing-page-layout-between-sections-tablet: 40px;
|
|
369
385
|
--px-spacing-page-layout-between-sections-laptop: 80px;
|
|
370
386
|
--px-spacing-page-layout-between-sections-desktop: 80px;
|
|
371
387
|
--px-text-size-body-l-mobile: 1em;
|
|
372
|
-
--px-text-size-body-l-tablet:
|
|
388
|
+
--px-text-size-body-l-tablet: 1em;
|
|
373
389
|
--px-text-size-body-l-laptop: 1.125em;
|
|
374
390
|
--px-text-size-body-l-desktop: 1.125em;
|
|
375
391
|
--px-text-size-body-m-mobile: 0.875em;
|
|
376
|
-
--px-text-size-body-m-tablet:
|
|
392
|
+
--px-text-size-body-m-tablet: 0.875em;
|
|
377
393
|
--px-text-size-body-m-laptop: 1em;
|
|
378
394
|
--px-text-size-body-m-desktop: 1em;
|
|
379
395
|
--px-text-size-body-s-mobile: 0.75em;
|
|
380
|
-
--px-text-size-body-s-tablet: 0.
|
|
396
|
+
--px-text-size-body-s-tablet: 0.75em;
|
|
381
397
|
--px-text-size-body-s-laptop: 0.875em;
|
|
382
398
|
--px-text-size-body-s-desktop: 0.875em;
|
|
383
399
|
--px-text-size-body-xs-mobile: 0.625em;
|
|
384
|
-
--px-text-size-body-xs-tablet: 0.
|
|
400
|
+
--px-text-size-body-xs-tablet: 0.625em;
|
|
385
401
|
--px-text-size-body-xs-laptop: 0.75em;
|
|
386
402
|
--px-text-size-body-xs-desktop: 0.75em;
|
|
387
403
|
--px-text-size-heading-5xl-mobile: 2.25em;
|
|
388
|
-
--px-text-size-heading-5xl-tablet: 2.
|
|
404
|
+
--px-text-size-heading-5xl-tablet: 2.25em;
|
|
389
405
|
--px-text-size-heading-5xl-laptop: 2.5em;
|
|
390
406
|
--px-text-size-heading-5xl-desktop: 2.5em;
|
|
391
407
|
--px-text-size-heading-4xl-mobile: 2em;
|
|
392
|
-
--px-text-size-heading-4xl-tablet:
|
|
408
|
+
--px-text-size-heading-4xl-tablet: 2em;
|
|
393
409
|
--px-text-size-heading-4xl-laptop: 2.25em;
|
|
394
410
|
--px-text-size-heading-4xl-desktop: 2.25em;
|
|
395
411
|
--px-text-size-heading-3xl-mobile: 1.75em;
|
|
396
|
-
--px-text-size-heading-3xl-tablet:
|
|
412
|
+
--px-text-size-heading-3xl-tablet: 1.75em;
|
|
397
413
|
--px-text-size-heading-3xl-laptop: 2em;
|
|
398
414
|
--px-text-size-heading-3xl-desktop: 2em;
|
|
399
415
|
--px-text-size-heading-2xl-mobile: 1.5em;
|
|
400
|
-
--px-text-size-heading-2xl-tablet: 1.
|
|
416
|
+
--px-text-size-heading-2xl-tablet: 1.5em;
|
|
401
417
|
--px-text-size-heading-2xl-laptop: 1.75em;
|
|
402
418
|
--px-text-size-heading-2xl-desktop: 1.75em;
|
|
403
419
|
--px-text-size-heading-xl-mobile: 1.25em;
|
|
404
|
-
--px-text-size-heading-xl-tablet: 1.
|
|
420
|
+
--px-text-size-heading-xl-tablet: 1.25em;
|
|
405
421
|
--px-text-size-heading-xl-laptop: 1.5em;
|
|
406
422
|
--px-text-size-heading-xl-desktop: 1.5em;
|
|
407
423
|
--px-text-size-heading-l-mobile: 1.125em;
|
|
408
|
-
--px-text-size-heading-l-tablet: 1.
|
|
424
|
+
--px-text-size-heading-l-tablet: 1.125em;
|
|
409
425
|
--px-text-size-heading-l-laptop: 1.25em;
|
|
410
426
|
--px-text-size-heading-l-desktop: 1.25em;
|
|
411
427
|
--px-text-size-heading-m-mobile: 1em;
|
|
412
|
-
--px-text-size-heading-m-tablet:
|
|
428
|
+
--px-text-size-heading-m-tablet: 1em;
|
|
413
429
|
--px-text-size-heading-m-laptop: 1.125em;
|
|
414
430
|
--px-text-size-heading-m-desktop: 1.125em;
|
|
415
431
|
--px-text-size-heading-s-mobile: 0.875em;
|
|
416
|
-
--px-text-size-heading-s-tablet:
|
|
432
|
+
--px-text-size-heading-s-tablet: 0.875em;
|
|
417
433
|
--px-text-size-heading-s-laptop: 1em;
|
|
418
434
|
--px-text-size-heading-s-desktop: 1em;
|
|
419
435
|
--px-text-size-label-l-mobile: 1em;
|
|
420
|
-
--px-text-size-label-l-tablet:
|
|
436
|
+
--px-text-size-label-l-tablet: 1em;
|
|
421
437
|
--px-text-size-label-l-laptop: 1.125em;
|
|
422
438
|
--px-text-size-label-l-desktop: 1.125em;
|
|
423
439
|
--px-text-size-label-m-mobile: 0.875em;
|
|
424
|
-
--px-text-size-label-m-tablet:
|
|
440
|
+
--px-text-size-label-m-tablet: 0.875em;
|
|
425
441
|
--px-text-size-label-m-laptop: 1em;
|
|
426
442
|
--px-text-size-label-m-desktop: 1em;
|
|
427
443
|
--px-text-size-label-s-mobile: 0.75em;
|
|
428
|
-
--px-text-size-label-s-tablet: 0.
|
|
444
|
+
--px-text-size-label-s-tablet: 0.75em;
|
|
429
445
|
--px-text-size-label-s-laptop: 0.875em;
|
|
430
446
|
--px-text-size-label-s-desktop: 0.875em;
|
|
431
447
|
--px-text-size-label-xs-mobile: 0.625em;
|
|
432
|
-
--px-text-size-label-xs-tablet: 0.
|
|
448
|
+
--px-text-size-label-xs-tablet: 0.625em;
|
|
433
449
|
--px-text-size-label-xs-laptop: 0.75em;
|
|
434
450
|
--px-text-size-label-xs-desktop: 0.75em;
|
|
435
451
|
--px-text-size-link-m-mobile: 0.875em;
|
|
436
|
-
--px-text-size-link-m-tablet:
|
|
452
|
+
--px-text-size-link-m-tablet: 0.875em;
|
|
437
453
|
--px-text-size-link-m-laptop: 1em;
|
|
438
454
|
--px-text-size-link-m-desktop: 1em;
|
|
439
455
|
--px-text-size-link-s-mobile: 0.75em;
|
|
440
|
-
--px-text-size-link-s-tablet: 0.
|
|
456
|
+
--px-text-size-link-s-tablet: 0.75em;
|
|
441
457
|
--px-text-size-link-s-laptop: 0.875em;
|
|
442
458
|
--px-text-size-link-s-desktop: 0.875em;
|
|
443
459
|
}
|