@entur/layout 2.3.20 → 2.3.21-alpha.0

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 (2) hide show
  1. package/dist/styles.css +213 -213
  2. package/package.json +4 -4
package/dist/styles.css CHANGED
@@ -208,6 +208,219 @@
208
208
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
209
209
  /* DO NOT CHANGE!*/
210
210
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
211
+ .eds-badge {
212
+ display: flex;
213
+ justify-content: center;
214
+ align-items: center;
215
+ font-family: inherit;
216
+ font-weight: 500;
217
+ font-size: 0.75rem;
218
+ min-width: 1.5rem;
219
+ height: 1.5rem;
220
+ width: -moz-fit-content;
221
+ width: fit-content;
222
+ line-height: 1rem;
223
+ padding: 2px 8px;
224
+ border-radius: 0.75rem;
225
+ top: 0;
226
+ right: 0;
227
+ transform: scale(1);
228
+ color: var(--components-layout-badge-primary-standard-text);
229
+ transition: ease-in-out 0.2s transform;
230
+ }
231
+ .eds-badge--invisible {
232
+ transform: scale(0);
233
+ }
234
+ .eds-badge--variant-primary {
235
+ background-color: var(--components-layout-badge-primary-standard-fill);
236
+ color: var(--components-layout-badge-primary-standard-text);
237
+ }
238
+ .eds-contrast .eds-badge--variant-primary {
239
+ color: var(--components-layout-badge-primary-contrast-text);
240
+ background-color: var(--components-layout-badge-primary-contrast-fill);
241
+ }
242
+ .eds-badge--variant-primary.eds-badge--type-bullet::before {
243
+ background-color: var(--components-layout-badge-primary-standard-bullet);
244
+ }
245
+ .eds-contrast .eds-badge--variant-primary.eds-badge--type-bullet::before {
246
+ background-color: var(--components-layout-badge-primary-contrast-bullet);
247
+ }
248
+ .eds-badge--variant-success {
249
+ background-color: var(--components-layout-badge-success-standard-fill);
250
+ color: var(--components-layout-badge-success-standard-text);
251
+ }
252
+ .eds-contrast .eds-badge--variant-success {
253
+ background-color: var(--components-layout-badge-success-contrast-fill);
254
+ color: var(--components-layout-badge-success-contrast-text);
255
+ }
256
+ .eds-badge--variant-success.eds-badge--type-status, .eds-badge--variant-success.eds-badge--type-notification {
257
+ border-color: var(--components-layout-badge-success-standard-border);
258
+ }
259
+ .eds-contrast .eds-badge--variant-success.eds-badge--type-status, .eds-contrast .eds-badge--variant-success.eds-badge--type-notification {
260
+ border-color: var(--components-layout-badge-success-contrast-border);
261
+ }
262
+ .eds-badge--variant-success.eds-badge--type-bullet::before {
263
+ background-color: var(--components-layout-badge-success-standard-bullet);
264
+ }
265
+ .eds-contrast .eds-badge--variant-success.eds-badge--type-bullet::before {
266
+ background-color: var(--components-layout-badge-success-contrast-bullet);
267
+ }
268
+ .eds-badge--variant-warning {
269
+ background-color: var(--components-layout-badge-warning-standard-fill);
270
+ color: var(--components-layout-badge-warning-standard-text);
271
+ }
272
+ .eds-contrast .eds-badge--variant-warning {
273
+ background-color: var(--components-layout-badge-warning-contrast-fill);
274
+ color: var(--components-layout-badge-warning-contrast-text);
275
+ }
276
+ .eds-badge--variant-warning.eds-badge--type-status, .eds-badge--variant-warning.eds-badge--type-notification {
277
+ border-color: var(--components-layout-badge-warning-standard-border);
278
+ }
279
+ .eds-contrast .eds-badge--variant-warning.eds-badge--type-status, .eds-contrast .eds-badge--variant-warning.eds-badge--type-notification {
280
+ border-color: var(--components-layout-badge-warning-contrast-border);
281
+ }
282
+ .eds-badge--variant-warning.eds-badge--type-bullet::before {
283
+ background-color: var(--components-layout-badge-warning-standard-bullet);
284
+ }
285
+ .eds-contrast .eds-badge--variant-warning.eds-badge--type-bullet::before {
286
+ background-color: var(--components-layout-badge-warning-contrast-bullet);
287
+ }
288
+ .eds-badge--variant-danger, .eds-badge--variant-negative {
289
+ background-color: var(--components-layout-badge-negative-standard-fill);
290
+ color: var(--components-layout-badge-negative-standard-text);
291
+ }
292
+ .eds-contrast .eds-badge--variant-danger, .eds-contrast .eds-badge--variant-negative {
293
+ background-color: var(--components-layout-badge-negative-contrast-fill);
294
+ color: var(--components-layout-badge-negative-contrast-text);
295
+ }
296
+ .eds-badge--variant-danger.eds-badge--type-status, .eds-badge--variant-danger.eds-badge--type-notification, .eds-badge--variant-negative.eds-badge--type-status, .eds-badge--variant-negative.eds-badge--type-notification {
297
+ border-color: var(--components-layout-badge-negative-standard-border);
298
+ }
299
+ .eds-contrast .eds-badge--variant-danger.eds-badge--type-status, .eds-contrast .eds-badge--variant-danger.eds-badge--type-notification, .eds-contrast .eds-badge--variant-negative.eds-badge--type-status, .eds-contrast .eds-badge--variant-negative.eds-badge--type-notification {
300
+ border-color: var(--components-layout-badge-negative-contrast-border);
301
+ }
302
+ .eds-badge--variant-danger.eds-badge--type-bullet::before, .eds-badge--variant-negative.eds-badge--type-bullet::before {
303
+ background-color: var(--components-layout-badge-negative-standard-bullet);
304
+ }
305
+ .eds-contrast .eds-badge--variant-danger.eds-badge--type-bullet::before, .eds-contrast .eds-badge--variant-negative.eds-badge--type-bullet::before {
306
+ background-color: var(--components-layout-badge-negative-contrast-bullet);
307
+ }
308
+ .eds-badge--variant-info, .eds-badge--variant-information {
309
+ background-color: var(--components-layout-badge-information-standard-fill);
310
+ color: var(--components-layout-badge-information-standard-text);
311
+ }
312
+ .eds-contrast .eds-badge--variant-info, .eds-contrast .eds-badge--variant-information {
313
+ background-color: var(--components-layout-badge-information-contrast-fill);
314
+ color: var(--components-layout-badge-information-contrast-text);
315
+ }
316
+ .eds-badge--variant-info.eds-badge--type-status, .eds-badge--variant-info.eds-badge--type-notification, .eds-badge--variant-information.eds-badge--type-status, .eds-badge--variant-information.eds-badge--type-notification {
317
+ border-color: var(--components-layout-badge-information-standard-border);
318
+ }
319
+ .eds-contrast .eds-badge--variant-info.eds-badge--type-status, .eds-contrast .eds-badge--variant-info.eds-badge--type-notification, .eds-contrast .eds-badge--variant-information.eds-badge--type-status, .eds-contrast .eds-badge--variant-information.eds-badge--type-notification {
320
+ border-color: var(--components-layout-badge-information-contrast-border);
321
+ }
322
+ .eds-badge--variant-info.eds-badge--type-bullet::before, .eds-badge--variant-information.eds-badge--type-bullet::before {
323
+ background-color: var(--components-layout-badge-information-standard-bullet);
324
+ }
325
+ .eds-contrast .eds-badge--variant-info.eds-badge--type-bullet::before, .eds-contrast .eds-badge--variant-information.eds-badge--type-bullet::before {
326
+ background-color: var(--components-layout-badge-information-contrast-bullet);
327
+ }
328
+ .eds-badge--variant-neutral {
329
+ background-color: var(--components-layout-badge-neutral-standard-fill);
330
+ color: var(--components-layout-badge-neutral-standard-text);
331
+ }
332
+ .eds-contrast .eds-badge--variant-neutral {
333
+ background-color: var(--components-layout-badge-neutral-contrast-fill);
334
+ color: var(--components-layout-badge-neutral-contrast-text);
335
+ }
336
+ .eds-badge--variant-neutral.eds-badge--type-status, .eds-badge--variant-neutral.eds-badge--type-notification {
337
+ border-color: var(--components-layout-badge-neutral-standard-border);
338
+ }
339
+ .eds-contrast .eds-badge--variant-neutral.eds-badge--type-status, .eds-contrast .eds-badge--variant-neutral.eds-badge--type-notification {
340
+ border-color: var(--components-layout-badge-neutral-contrast-border);
341
+ }
342
+ .eds-badge--variant-neutral.eds-badge--type-bullet::before {
343
+ background-color: var(--components-layout-badge-neutral-standard-bullet);
344
+ }
345
+ .eds-contrast .eds-badge--variant-neutral.eds-badge--type-bullet::before {
346
+ background-color: var(--components-layout-badge-neutral-contrast-bullet);
347
+ }
348
+ .eds-badge--type-status {
349
+ display: block;
350
+ text-transform: uppercase;
351
+ border-radius: 0.25rem;
352
+ line-height: 1.25rem;
353
+ padding: 0 0.5rem;
354
+ height: 1.25rem;
355
+ border: 0.0625rem solid transparent;
356
+ border-color: transparent;
357
+ }
358
+ .eds-badge--type-notification {
359
+ line-height: 1.5rem;
360
+ height: 1.5rem;
361
+ min-width: 1.5rem;
362
+ padding: 0 0.25rem;
363
+ border: 0.0625rem solid transparent;
364
+ }
365
+ .eds-contrast .eds-badge--type-notification {
366
+ border-color: transparent;
367
+ }
368
+ .eds-badge--type-bullet {
369
+ background: none;
370
+ font-size: 1rem;
371
+ line-height: 1.5rem;
372
+ color: var(--components-layout-badge-primary-standard-text-bullet);
373
+ border: none;
374
+ position: relative;
375
+ padding-left: 1.375rem;
376
+ }
377
+ .eds-contrast .eds-badge--type-bullet {
378
+ color: var(--components-layout-badge-primary-contrast-text-bullet);
379
+ background: none;
380
+ }
381
+ .eds-badge--type-bullet::before {
382
+ background: var(--components-layout-badge-primary-standard-fill);
383
+ left: 0;
384
+ content: "";
385
+ position: absolute;
386
+ top: 0.3125rem;
387
+ height: 0.625rem;
388
+ width: 0.625rem;
389
+ border-radius: 50%;
390
+ }
391
+ /* DO NOT CHANGE!*/
392
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
393
+ .eds-tag {
394
+ background: #e9e9e9;
395
+ color: #181c56;
396
+ display: inline-block;
397
+ min-width: 2rem;
398
+ padding: 0.25rem 0.75rem;
399
+ font-size: 0.875rem;
400
+ line-height: 1.375rem;
401
+ }
402
+ .eds-tag--leading-icon .eds-icon {
403
+ margin-right: 0.5rem;
404
+ }
405
+ .eds-tag--trailing-icon .eds-icon {
406
+ margin-left: 0.5rem;
407
+ }
408
+ .eds-tag--compact {
409
+ font-size: 0.75rem;
410
+ padding: 0.125rem 0.5rem;
411
+ line-height: 1.25rem;
412
+ height: 1.5rem;
413
+ }
414
+ .eds-tag--compact.eds-tag--leading-icon .eds-icon {
415
+ margin-right: 0.25rem;
416
+ }
417
+ .eds-tag--compact.eds-tag--trailing-icon .eds-icon {
418
+ margin-left: 0.25rem;
419
+ }
420
+ /* DO NOT CHANGE!*/
421
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
422
+ /* DO NOT CHANGE!*/
423
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
211
424
  /* DO NOT CHANGE!*/
212
425
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
213
426
  [data-color-mode=light],
@@ -503,216 +716,3 @@
503
716
  :root {
504
717
  --eds-layout: 1;
505
718
  }
506
- /* DO NOT CHANGE!*/
507
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
508
- .eds-badge {
509
- display: flex;
510
- justify-content: center;
511
- align-items: center;
512
- font-family: inherit;
513
- font-weight: 500;
514
- font-size: 0.75rem;
515
- min-width: 1.5rem;
516
- height: 1.5rem;
517
- width: -moz-fit-content;
518
- width: fit-content;
519
- line-height: 1rem;
520
- padding: 2px 8px;
521
- border-radius: 0.75rem;
522
- top: 0;
523
- right: 0;
524
- transform: scale(1);
525
- color: var(--components-layout-badge-primary-standard-text);
526
- transition: ease-in-out 0.2s transform;
527
- }
528
- .eds-badge--invisible {
529
- transform: scale(0);
530
- }
531
- .eds-badge--variant-primary {
532
- background-color: var(--components-layout-badge-primary-standard-fill);
533
- color: var(--components-layout-badge-primary-standard-text);
534
- }
535
- .eds-contrast .eds-badge--variant-primary {
536
- color: var(--components-layout-badge-primary-contrast-text);
537
- background-color: var(--components-layout-badge-primary-contrast-fill);
538
- }
539
- .eds-badge--variant-primary.eds-badge--type-bullet::before {
540
- background-color: var(--components-layout-badge-primary-standard-bullet);
541
- }
542
- .eds-contrast .eds-badge--variant-primary.eds-badge--type-bullet::before {
543
- background-color: var(--components-layout-badge-primary-contrast-bullet);
544
- }
545
- .eds-badge--variant-success {
546
- background-color: var(--components-layout-badge-success-standard-fill);
547
- color: var(--components-layout-badge-success-standard-text);
548
- }
549
- .eds-contrast .eds-badge--variant-success {
550
- background-color: var(--components-layout-badge-success-contrast-fill);
551
- color: var(--components-layout-badge-success-contrast-text);
552
- }
553
- .eds-badge--variant-success.eds-badge--type-status, .eds-badge--variant-success.eds-badge--type-notification {
554
- border-color: var(--components-layout-badge-success-standard-border);
555
- }
556
- .eds-contrast .eds-badge--variant-success.eds-badge--type-status, .eds-contrast .eds-badge--variant-success.eds-badge--type-notification {
557
- border-color: var(--components-layout-badge-success-contrast-border);
558
- }
559
- .eds-badge--variant-success.eds-badge--type-bullet::before {
560
- background-color: var(--components-layout-badge-success-standard-bullet);
561
- }
562
- .eds-contrast .eds-badge--variant-success.eds-badge--type-bullet::before {
563
- background-color: var(--components-layout-badge-success-contrast-bullet);
564
- }
565
- .eds-badge--variant-warning {
566
- background-color: var(--components-layout-badge-warning-standard-fill);
567
- color: var(--components-layout-badge-warning-standard-text);
568
- }
569
- .eds-contrast .eds-badge--variant-warning {
570
- background-color: var(--components-layout-badge-warning-contrast-fill);
571
- color: var(--components-layout-badge-warning-contrast-text);
572
- }
573
- .eds-badge--variant-warning.eds-badge--type-status, .eds-badge--variant-warning.eds-badge--type-notification {
574
- border-color: var(--components-layout-badge-warning-standard-border);
575
- }
576
- .eds-contrast .eds-badge--variant-warning.eds-badge--type-status, .eds-contrast .eds-badge--variant-warning.eds-badge--type-notification {
577
- border-color: var(--components-layout-badge-warning-contrast-border);
578
- }
579
- .eds-badge--variant-warning.eds-badge--type-bullet::before {
580
- background-color: var(--components-layout-badge-warning-standard-bullet);
581
- }
582
- .eds-contrast .eds-badge--variant-warning.eds-badge--type-bullet::before {
583
- background-color: var(--components-layout-badge-warning-contrast-bullet);
584
- }
585
- .eds-badge--variant-danger, .eds-badge--variant-negative {
586
- background-color: var(--components-layout-badge-negative-standard-fill);
587
- color: var(--components-layout-badge-negative-standard-text);
588
- }
589
- .eds-contrast .eds-badge--variant-danger, .eds-contrast .eds-badge--variant-negative {
590
- background-color: var(--components-layout-badge-negative-contrast-fill);
591
- color: var(--components-layout-badge-negative-contrast-text);
592
- }
593
- .eds-badge--variant-danger.eds-badge--type-status, .eds-badge--variant-danger.eds-badge--type-notification, .eds-badge--variant-negative.eds-badge--type-status, .eds-badge--variant-negative.eds-badge--type-notification {
594
- border-color: var(--components-layout-badge-negative-standard-border);
595
- }
596
- .eds-contrast .eds-badge--variant-danger.eds-badge--type-status, .eds-contrast .eds-badge--variant-danger.eds-badge--type-notification, .eds-contrast .eds-badge--variant-negative.eds-badge--type-status, .eds-contrast .eds-badge--variant-negative.eds-badge--type-notification {
597
- border-color: var(--components-layout-badge-negative-contrast-border);
598
- }
599
- .eds-badge--variant-danger.eds-badge--type-bullet::before, .eds-badge--variant-negative.eds-badge--type-bullet::before {
600
- background-color: var(--components-layout-badge-negative-standard-bullet);
601
- }
602
- .eds-contrast .eds-badge--variant-danger.eds-badge--type-bullet::before, .eds-contrast .eds-badge--variant-negative.eds-badge--type-bullet::before {
603
- background-color: var(--components-layout-badge-negative-contrast-bullet);
604
- }
605
- .eds-badge--variant-info, .eds-badge--variant-information {
606
- background-color: var(--components-layout-badge-information-standard-fill);
607
- color: var(--components-layout-badge-information-standard-text);
608
- }
609
- .eds-contrast .eds-badge--variant-info, .eds-contrast .eds-badge--variant-information {
610
- background-color: var(--components-layout-badge-information-contrast-fill);
611
- color: var(--components-layout-badge-information-contrast-text);
612
- }
613
- .eds-badge--variant-info.eds-badge--type-status, .eds-badge--variant-info.eds-badge--type-notification, .eds-badge--variant-information.eds-badge--type-status, .eds-badge--variant-information.eds-badge--type-notification {
614
- border-color: var(--components-layout-badge-information-standard-border);
615
- }
616
- .eds-contrast .eds-badge--variant-info.eds-badge--type-status, .eds-contrast .eds-badge--variant-info.eds-badge--type-notification, .eds-contrast .eds-badge--variant-information.eds-badge--type-status, .eds-contrast .eds-badge--variant-information.eds-badge--type-notification {
617
- border-color: var(--components-layout-badge-information-contrast-border);
618
- }
619
- .eds-badge--variant-info.eds-badge--type-bullet::before, .eds-badge--variant-information.eds-badge--type-bullet::before {
620
- background-color: var(--components-layout-badge-information-standard-bullet);
621
- }
622
- .eds-contrast .eds-badge--variant-info.eds-badge--type-bullet::before, .eds-contrast .eds-badge--variant-information.eds-badge--type-bullet::before {
623
- background-color: var(--components-layout-badge-information-contrast-bullet);
624
- }
625
- .eds-badge--variant-neutral {
626
- background-color: var(--components-layout-badge-neutral-standard-fill);
627
- color: var(--components-layout-badge-neutral-standard-text);
628
- }
629
- .eds-contrast .eds-badge--variant-neutral {
630
- background-color: var(--components-layout-badge-neutral-contrast-fill);
631
- color: var(--components-layout-badge-neutral-contrast-text);
632
- }
633
- .eds-badge--variant-neutral.eds-badge--type-status, .eds-badge--variant-neutral.eds-badge--type-notification {
634
- border-color: var(--components-layout-badge-neutral-standard-border);
635
- }
636
- .eds-contrast .eds-badge--variant-neutral.eds-badge--type-status, .eds-contrast .eds-badge--variant-neutral.eds-badge--type-notification {
637
- border-color: var(--components-layout-badge-neutral-contrast-border);
638
- }
639
- .eds-badge--variant-neutral.eds-badge--type-bullet::before {
640
- background-color: var(--components-layout-badge-neutral-standard-bullet);
641
- }
642
- .eds-contrast .eds-badge--variant-neutral.eds-badge--type-bullet::before {
643
- background-color: var(--components-layout-badge-neutral-contrast-bullet);
644
- }
645
- .eds-badge--type-status {
646
- display: block;
647
- text-transform: uppercase;
648
- border-radius: 0.25rem;
649
- line-height: 1.25rem;
650
- padding: 0 0.5rem;
651
- height: 1.25rem;
652
- border: 0.0625rem solid transparent;
653
- border-color: transparent;
654
- }
655
- .eds-badge--type-notification {
656
- line-height: 1.5rem;
657
- height: 1.5rem;
658
- min-width: 1.5rem;
659
- padding: 0 0.25rem;
660
- border: 0.0625rem solid transparent;
661
- }
662
- .eds-contrast .eds-badge--type-notification {
663
- border-color: transparent;
664
- }
665
- .eds-badge--type-bullet {
666
- background: none;
667
- font-size: 1rem;
668
- line-height: 1.5rem;
669
- color: var(--components-layout-badge-primary-standard-text-bullet);
670
- border: none;
671
- position: relative;
672
- padding-left: 1.375rem;
673
- }
674
- .eds-contrast .eds-badge--type-bullet {
675
- color: var(--components-layout-badge-primary-contrast-text-bullet);
676
- background: none;
677
- }
678
- .eds-badge--type-bullet::before {
679
- background: var(--components-layout-badge-primary-standard-fill);
680
- left: 0;
681
- content: "";
682
- position: absolute;
683
- top: 0.3125rem;
684
- height: 0.625rem;
685
- width: 0.625rem;
686
- border-radius: 50%;
687
- }
688
- /* DO NOT CHANGE!*/
689
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
690
- /* DO NOT CHANGE!*/
691
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
692
- .eds-tag {
693
- background: #e9e9e9;
694
- color: #181c56;
695
- display: inline-block;
696
- min-width: 2rem;
697
- padding: 0.25rem 0.75rem;
698
- font-size: 0.875rem;
699
- line-height: 1.375rem;
700
- }
701
- .eds-tag--leading-icon .eds-icon {
702
- margin-right: 0.5rem;
703
- }
704
- .eds-tag--trailing-icon .eds-icon {
705
- margin-left: 0.5rem;
706
- }
707
- .eds-tag--compact {
708
- font-size: 0.75rem;
709
- padding: 0.125rem 0.5rem;
710
- line-height: 1.25rem;
711
- height: 1.5rem;
712
- }
713
- .eds-tag--compact.eds-tag--leading-icon .eds-icon {
714
- margin-right: 0.25rem;
715
- }
716
- .eds-tag--compact.eds-tag--trailing-icon .eds-icon {
717
- margin-left: 0.25rem;
718
- }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/layout",
3
- "version": "2.3.20",
3
+ "version": "2.3.21-alpha.0",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/layout.esm.js",
@@ -29,9 +29,9 @@
29
29
  "dependencies": {
30
30
  "@entur/icons": "^7.5.0",
31
31
  "@entur/tokens": "^3.17.3",
32
- "@entur/typography": "^1.8.49",
33
- "@entur/utils": "^0.12.1",
32
+ "@entur/typography": "^1.8.50-alpha.0",
33
+ "@entur/utils": "^1.0.0-alpha.0",
34
34
  "classnames": "^2.3.1"
35
35
  },
36
- "gitHead": "7b67c7eded2ea9495ba4e21a9bef33c1a82d4a43"
36
+ "gitHead": "b653c119e54372ec210ed20aa99ded642f114c69"
37
37
  }