@inera/ids-design 6.0.0 → 6.0.2

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 (73) hide show
  1. package/components/accordion/accordion-lit.js +1 -1
  2. package/components/accordion/accordion.css +2 -2
  3. package/components/alert/alert-lit.js +1 -1
  4. package/components/alert/alert.css +36 -22
  5. package/components/alert-global/alert-global-lit.js +1 -1
  6. package/components/alert-global/alert-global.css +2 -2
  7. package/components/breadcrumbs/breadcrumbs-lit.js +1 -1
  8. package/components/breadcrumbs/breadcrumbs.css +1 -1
  9. package/components/carousel/carousel-lit.js +1 -1
  10. package/components/carousel/carousel.css +1 -1
  11. package/components/dialog/dialog-lit.js +1 -1
  12. package/components/dialog/dialog.css +1 -1
  13. package/components/dropdown/dropdown-lit.js +1 -1
  14. package/components/dropdown/dropdown.css +18 -4
  15. package/components/footer-1177/footer-1177-lit.js +1 -1
  16. package/components/footer-1177/footer-1177.css +1 -1
  17. package/components/footer-1177-admin/footer-1177-admin-lit.js +1 -1
  18. package/components/footer-1177-admin/footer-1177-admin.css +1 -1
  19. package/components/footer-1177-pro/footer-1177-pro-lit.js +1 -1
  20. package/components/footer-1177-pro/footer-1177-pro.css +1 -1
  21. package/components/form/error-message/error-message-lit.js +1 -1
  22. package/components/form/error-message/error-message.css +1 -1
  23. package/components/form/select-multiple/select-multiple-lit.js +1 -1
  24. package/components/form/select-multiple/select-multiple.css +1 -1
  25. package/components/header-1177/composite-header-1177.css +8 -8
  26. package/components/header-1177/header-1177-avatar-lit.js +1 -1
  27. package/components/header-1177/header-1177-avatar.css +4 -4
  28. package/components/header-1177/header-1177-lit.js +1 -1
  29. package/components/header-1177/header-1177.css +4 -4
  30. package/components/header-1177-admin/header-1177-admin-avatar-lit.js +1 -1
  31. package/components/header-1177-admin/header-1177-admin-avatar-mobile-lit.js +1 -1
  32. package/components/header-1177-admin/header-1177-admin-avatar-mobile.css +3 -3
  33. package/components/header-1177-admin/header-1177-admin-avatar.css +8 -8
  34. package/components/header-1177-admin/header-1177-admin-lit.js +1 -1
  35. package/components/header-1177-admin/header-1177-admin.css +2 -2
  36. package/components/header-1177-pro/header-1177-pro-avatar-lit.js +1 -1
  37. package/components/header-1177-pro/header-1177-pro-avatar-mobile-lit.js +1 -1
  38. package/components/header-1177-pro/header-1177-pro-avatar-mobile.css +3 -3
  39. package/components/header-1177-pro/header-1177-pro-avatar.css +8 -8
  40. package/components/header-1177-pro/header-1177-pro-lit.js +1 -1
  41. package/components/header-1177-pro/header-1177-pro-region-picker-lit.js +1 -1
  42. package/components/header-1177-pro/header-1177-pro-region-picker.css +10 -10
  43. package/components/header-1177-pro/header-1177-pro.css +2 -2
  44. package/components/header-inera/header-inera-lit.js +1 -1
  45. package/components/header-inera/header-inera.css +1 -1
  46. package/components/header-inera-admin/composite-header-inera-admin.css +1 -1
  47. package/components/header-inera-admin/header-inera-admin-avatar-lit.js +1 -1
  48. package/components/header-inera-admin/header-inera-admin-avatar.css +1 -1
  49. package/components/mobile-menu/mobile-menu-lit.js +1 -1
  50. package/components/mobile-menu/mobile-menu.css +7 -7
  51. package/components/pagination/data-pagination/data-pagination-lit.js +1 -1
  52. package/components/pagination/data-pagination/data-pagination.css +3 -3
  53. package/components/pagination/list-pagination/list-pagination-lit.js +1 -1
  54. package/components/pagination/list-pagination/list-pagination.css +2 -2
  55. package/components/popover/popover-content-lit.js +1 -1
  56. package/components/popover/popover-content.css +1 -1
  57. package/components/puff-list/puff-list-lit.js +1 -1
  58. package/components/puff-list/puff-list.css +1 -1
  59. package/components/side-menu/side-menu-lit.js +1 -1
  60. package/components/side-menu/side-menu.css +2 -2
  61. package/components/side-panel/side-panel-lit.js +1 -1
  62. package/components/side-panel/side-panel.css +1 -1
  63. package/components/stepper/stepper-lit.js +1 -1
  64. package/components/stepper/stepper.css +3 -3
  65. package/components/tabs/tabs-lit.js +1 -1
  66. package/components/tag/tag-lit.js +1 -1
  67. package/components/tag/tag.css +1 -1
  68. package/global/global.css +30 -8
  69. package/package.json +1 -1
  70. package/themes/1177/1177.css +30 -8
  71. package/themes/1177-pro/1177-pro.css +30 -8
  72. package/themes/inera/inera.css +30 -8
  73. package/themes/inera-admin/inera-admin.css +30 -8
package/themes/1177-pro/1177-pro.css CHANGED
@@ -2423,6 +2423,11 @@ body.ids {
2423
2423
  text-decoration: none;
2424
2424
  }
2425
2425
  .ids-link.ids-link--start-icon:before {
2426
+ font: icon;
2427
+ font-family: "Inera-Design-Icons" !important;
2428
+ display: block;
2429
+ position: absolute;
2430
+ pointer-events: none;
2426
2431
  position: absolute !important;
2427
2432
  top: 0.1875rem;
2428
2433
  left: 0;
@@ -2433,6 +2438,11 @@ body.ids {
2433
2438
  text-decoration: none;
2434
2439
  }
2435
2440
  .ids-link.ids-link--end-icon:before {
2441
+ font: icon;
2442
+ font-family: "Inera-Design-Icons" !important;
2443
+ display: block;
2444
+ position: absolute;
2445
+ pointer-events: none;
2436
2446
  position: absolute !important;
2437
2447
  bottom: 0.125rem;
2438
2448
  right: 0;
@@ -3144,7 +3154,7 @@ input:focus + .ids-checkbox input::before {
3144
3154
  .ids-checkbox input[type=checkbox]:checked::after,
3145
3155
  .ids-checkbox input:checked::after {
3146
3156
  font: icon;
3147
- font-family: "Inera-Design-Icons";
3157
+ font-family: "Inera-Design-Icons" !important;
3148
3158
  display: block;
3149
3159
  position: absolute;
3150
3160
  pointer-events: none;
@@ -3158,7 +3168,7 @@ input:focus + .ids-checkbox input::before {
3158
3168
  .ids-checkbox input[type=checkbox]:indeterminate::after,
3159
3169
  .ids-checkbox input:indeterminate::after {
3160
3170
  font: icon;
3161
- font-family: "Inera-Design-Icons";
3171
+ font-family: "Inera-Design-Icons" !important;
3162
3172
  display: block;
3163
3173
  position: absolute;
3164
3174
  pointer-events: none;
@@ -3255,7 +3265,7 @@ input:focus + .ids-checkbox input::before {
3255
3265
  .ids-check-button .ids-check-button__input[type=checkbox]:checked + .ids-check-button__label::before,
3256
3266
  .ids-check-button .ids-check-button__input:checked + .ids-check-button__label::before {
3257
3267
  font: icon;
3258
- font-family: "Inera-Design-Icons";
3268
+ font-family: "Inera-Design-Icons" !important;
3259
3269
  display: block;
3260
3270
  position: absolute;
3261
3271
  pointer-events: none;
@@ -3344,7 +3354,7 @@ input:focus + .ids-checkbox input::before {
3344
3354
  }
3345
3355
  .ids-input-wrapper .ids-input__inner-wrapper .ids-input__search-icon:before {
3346
3356
  font: icon;
3347
- font-family: "Inera-Design-Icons";
3357
+ font-family: "Inera-Design-Icons" !important;
3348
3358
  display: block;
3349
3359
  position: absolute;
3350
3360
  pointer-events: none;
@@ -3581,7 +3591,7 @@ input.ids-range:disabled::-ms-thumb {
3581
3591
  }
3582
3592
  .ids-select-wrapper::after {
3583
3593
  font: icon;
3584
- font-family: "Inera-Design-Icons";
3594
+ font-family: "Inera-Design-Icons" !important;
3585
3595
  display: block;
3586
3596
  position: absolute;
3587
3597
  pointer-events: none;
@@ -3695,7 +3705,7 @@ input.ids-range:disabled::-ms-thumb {
3695
3705
  }
3696
3706
  .ids-time .ids-time__input-wrapper:after {
3697
3707
  font: icon;
3698
- font-family: "Inera-Design-Icons";
3708
+ font-family: "Inera-Design-Icons" !important;
3699
3709
  display: block;
3700
3710
  position: absolute;
3701
3711
  pointer-events: none;
@@ -3833,7 +3843,7 @@ input:focus + .ids-toggle input:before {
3833
3843
  .ids-toggle input[type=checkbox]:after,
3834
3844
  .ids-toggle input:after {
3835
3845
  font: icon;
3836
- font-family: "Inera-Design-Icons";
3846
+ font-family: "Inera-Design-Icons" !important;
3837
3847
  display: block;
3838
3848
  position: absolute;
3839
3849
  pointer-events: none;
@@ -3859,7 +3869,7 @@ input:focus + .ids-toggle input:before {
3859
3869
  .ids-toggle input[type=checkbox]:checked:after,
3860
3870
  .ids-toggle input:checked:after {
3861
3871
  font: icon;
3862
- font-family: "Inera-Design-Icons";
3872
+ font-family: "Inera-Design-Icons" !important;
3863
3873
  display: block;
3864
3874
  position: absolute;
3865
3875
  pointer-events: none;
@@ -4648,10 +4658,21 @@ input:focus + .ids-toggle input:before {
4648
4658
  [class^=ids-icon-].ids-icon--light, [class^=ids-icon-].ids-icon--color-preset-4 {
4649
4659
  color: var(--IDS-ICON__COLOR-PRESET-4);
4650
4660
  }
4661
+ [class^=ids-icon-].ids-icon--text-align {
4662
+ position: relative;
4663
+ bottom: -0.3125rem;
4664
+ flex-shrink: 0;
4665
+ }
4666
+ [class^=ids-icon-].ids-icon--text-align:before {
4667
+ top: 50%;
4668
+ left: 50%;
4669
+ transform: translate(-50%, -50%);
4670
+ }
4651
4671
  [class^=ids-icon-].ids-icon--text-start {
4652
4672
  margin-right: 0.5rem;
4653
4673
  position: relative;
4654
4674
  bottom: -0.125rem;
4675
+ flex-shrink: 0;
4655
4676
  }
4656
4677
  [class^=ids-icon-].ids-icon--text-start:before {
4657
4678
  top: 50%;
@@ -4662,6 +4683,7 @@ input:focus + .ids-toggle input:before {
4662
4683
  margin-left: 0.5rem;
4663
4684
  position: relative;
4664
4685
  bottom: -0.125rem;
4686
+ flex-shrink: 0;
4665
4687
  }
4666
4688
  [class^=ids-icon-].ids-icon--text-end:before {
4667
4689
  top: 50%;
package/themes/inera/inera.css CHANGED
@@ -2450,6 +2450,11 @@ body.ids {
2450
2450
  text-decoration: none;
2451
2451
  }
2452
2452
  .ids-link.ids-link--start-icon:before {
2453
+ font: icon;
2454
+ font-family: "Inera-Design-Icons" !important;
2455
+ display: block;
2456
+ position: absolute;
2457
+ pointer-events: none;
2453
2458
  position: absolute !important;
2454
2459
  top: 0.1875rem;
2455
2460
  left: 0;
@@ -2460,6 +2465,11 @@ body.ids {
2460
2465
  text-decoration: none;
2461
2466
  }
2462
2467
  .ids-link.ids-link--end-icon:before {
2468
+ font: icon;
2469
+ font-family: "Inera-Design-Icons" !important;
2470
+ display: block;
2471
+ position: absolute;
2472
+ pointer-events: none;
2463
2473
  position: absolute !important;
2464
2474
  bottom: 0.125rem;
2465
2475
  right: 0;
@@ -3171,7 +3181,7 @@ input:focus + .ids-checkbox input::before {
3171
3181
  .ids-checkbox input[type=checkbox]:checked::after,
3172
3182
  .ids-checkbox input:checked::after {
3173
3183
  font: icon;
3174
- font-family: "Inera-Design-Icons";
3184
+ font-family: "Inera-Design-Icons" !important;
3175
3185
  display: block;
3176
3186
  position: absolute;
3177
3187
  pointer-events: none;
@@ -3185,7 +3195,7 @@ input:focus + .ids-checkbox input::before {
3185
3195
  .ids-checkbox input[type=checkbox]:indeterminate::after,
3186
3196
  .ids-checkbox input:indeterminate::after {
3187
3197
  font: icon;
3188
- font-family: "Inera-Design-Icons";
3198
+ font-family: "Inera-Design-Icons" !important;
3189
3199
  display: block;
3190
3200
  position: absolute;
3191
3201
  pointer-events: none;
@@ -3282,7 +3292,7 @@ input:focus + .ids-checkbox input::before {
3282
3292
  .ids-check-button .ids-check-button__input[type=checkbox]:checked + .ids-check-button__label::before,
3283
3293
  .ids-check-button .ids-check-button__input:checked + .ids-check-button__label::before {
3284
3294
  font: icon;
3285
- font-family: "Inera-Design-Icons";
3295
+ font-family: "Inera-Design-Icons" !important;
3286
3296
  display: block;
3287
3297
  position: absolute;
3288
3298
  pointer-events: none;
@@ -3371,7 +3381,7 @@ input:focus + .ids-checkbox input::before {
3371
3381
  }
3372
3382
  .ids-input-wrapper .ids-input__inner-wrapper .ids-input__search-icon:before {
3373
3383
  font: icon;
3374
- font-family: "Inera-Design-Icons";
3384
+ font-family: "Inera-Design-Icons" !important;
3375
3385
  display: block;
3376
3386
  position: absolute;
3377
3387
  pointer-events: none;
@@ -3608,7 +3618,7 @@ input.ids-range:disabled::-ms-thumb {
3608
3618
  }
3609
3619
  .ids-select-wrapper::after {
3610
3620
  font: icon;
3611
- font-family: "Inera-Design-Icons";
3621
+ font-family: "Inera-Design-Icons" !important;
3612
3622
  display: block;
3613
3623
  position: absolute;
3614
3624
  pointer-events: none;
@@ -3722,7 +3732,7 @@ input.ids-range:disabled::-ms-thumb {
3722
3732
  }
3723
3733
  .ids-time .ids-time__input-wrapper:after {
3724
3734
  font: icon;
3725
- font-family: "Inera-Design-Icons";
3735
+ font-family: "Inera-Design-Icons" !important;
3726
3736
  display: block;
3727
3737
  position: absolute;
3728
3738
  pointer-events: none;
@@ -3860,7 +3870,7 @@ input:focus + .ids-toggle input:before {
3860
3870
  .ids-toggle input[type=checkbox]:after,
3861
3871
  .ids-toggle input:after {
3862
3872
  font: icon;
3863
- font-family: "Inera-Design-Icons";
3873
+ font-family: "Inera-Design-Icons" !important;
3864
3874
  display: block;
3865
3875
  position: absolute;
3866
3876
  pointer-events: none;
@@ -3886,7 +3896,7 @@ input:focus + .ids-toggle input:before {
3886
3896
  .ids-toggle input[type=checkbox]:checked:after,
3887
3897
  .ids-toggle input:checked:after {
3888
3898
  font: icon;
3889
- font-family: "Inera-Design-Icons";
3899
+ font-family: "Inera-Design-Icons" !important;
3890
3900
  display: block;
3891
3901
  position: absolute;
3892
3902
  pointer-events: none;
@@ -4675,10 +4685,21 @@ input:focus + .ids-toggle input:before {
4675
4685
  [class^=ids-icon-].ids-icon--light, [class^=ids-icon-].ids-icon--color-preset-4 {
4676
4686
  color: var(--IDS-ICON__COLOR-PRESET-4);
4677
4687
  }
4688
+ [class^=ids-icon-].ids-icon--text-align {
4689
+ position: relative;
4690
+ bottom: -0.3125rem;
4691
+ flex-shrink: 0;
4692
+ }
4693
+ [class^=ids-icon-].ids-icon--text-align:before {
4694
+ top: 50%;
4695
+ left: 50%;
4696
+ transform: translate(-50%, -50%);
4697
+ }
4678
4698
  [class^=ids-icon-].ids-icon--text-start {
4679
4699
  margin-right: 0.5rem;
4680
4700
  position: relative;
4681
4701
  bottom: -0.125rem;
4702
+ flex-shrink: 0;
4682
4703
  }
4683
4704
  [class^=ids-icon-].ids-icon--text-start:before {
4684
4705
  top: 50%;
@@ -4689,6 +4710,7 @@ input:focus + .ids-toggle input:before {
4689
4710
  margin-left: 0.5rem;
4690
4711
  position: relative;
4691
4712
  bottom: -0.125rem;
4713
+ flex-shrink: 0;
4692
4714
  }
4693
4715
  [class^=ids-icon-].ids-icon--text-end:before {
4694
4716
  top: 50%;
package/themes/inera-admin/inera-admin.css CHANGED
@@ -2450,6 +2450,11 @@ body.ids {
2450
2450
  text-decoration: none;
2451
2451
  }
2452
2452
  .ids-link.ids-link--start-icon:before {
2453
+ font: icon;
2454
+ font-family: "Inera-Design-Icons" !important;
2455
+ display: block;
2456
+ position: absolute;
2457
+ pointer-events: none;
2453
2458
  position: absolute !important;
2454
2459
  top: 0.1875rem;
2455
2460
  left: 0;
@@ -2460,6 +2465,11 @@ body.ids {
2460
2465
  text-decoration: none;
2461
2466
  }
2462
2467
  .ids-link.ids-link--end-icon:before {
2468
+ font: icon;
2469
+ font-family: "Inera-Design-Icons" !important;
2470
+ display: block;
2471
+ position: absolute;
2472
+ pointer-events: none;
2463
2473
  position: absolute !important;
2464
2474
  bottom: 0.125rem;
2465
2475
  right: 0;
@@ -3171,7 +3181,7 @@ input:focus + .ids-checkbox input::before {
3171
3181
  .ids-checkbox input[type=checkbox]:checked::after,
3172
3182
  .ids-checkbox input:checked::after {
3173
3183
  font: icon;
3174
- font-family: "Inera-Design-Icons";
3184
+ font-family: "Inera-Design-Icons" !important;
3175
3185
  display: block;
3176
3186
  position: absolute;
3177
3187
  pointer-events: none;
@@ -3185,7 +3195,7 @@ input:focus + .ids-checkbox input::before {
3185
3195
  .ids-checkbox input[type=checkbox]:indeterminate::after,
3186
3196
  .ids-checkbox input:indeterminate::after {
3187
3197
  font: icon;
3188
- font-family: "Inera-Design-Icons";
3198
+ font-family: "Inera-Design-Icons" !important;
3189
3199
  display: block;
3190
3200
  position: absolute;
3191
3201
  pointer-events: none;
@@ -3282,7 +3292,7 @@ input:focus + .ids-checkbox input::before {
3282
3292
  .ids-check-button .ids-check-button__input[type=checkbox]:checked + .ids-check-button__label::before,
3283
3293
  .ids-check-button .ids-check-button__input:checked + .ids-check-button__label::before {
3284
3294
  font: icon;
3285
- font-family: "Inera-Design-Icons";
3295
+ font-family: "Inera-Design-Icons" !important;
3286
3296
  display: block;
3287
3297
  position: absolute;
3288
3298
  pointer-events: none;
@@ -3371,7 +3381,7 @@ input:focus + .ids-checkbox input::before {
3371
3381
  }
3372
3382
  .ids-input-wrapper .ids-input__inner-wrapper .ids-input__search-icon:before {
3373
3383
  font: icon;
3374
- font-family: "Inera-Design-Icons";
3384
+ font-family: "Inera-Design-Icons" !important;
3375
3385
  display: block;
3376
3386
  position: absolute;
3377
3387
  pointer-events: none;
@@ -3608,7 +3618,7 @@ input.ids-range:disabled::-ms-thumb {
3608
3618
  }
3609
3619
  .ids-select-wrapper::after {
3610
3620
  font: icon;
3611
- font-family: "Inera-Design-Icons";
3621
+ font-family: "Inera-Design-Icons" !important;
3612
3622
  display: block;
3613
3623
  position: absolute;
3614
3624
  pointer-events: none;
@@ -3722,7 +3732,7 @@ input.ids-range:disabled::-ms-thumb {
3722
3732
  }
3723
3733
  .ids-time .ids-time__input-wrapper:after {
3724
3734
  font: icon;
3725
- font-family: "Inera-Design-Icons";
3735
+ font-family: "Inera-Design-Icons" !important;
3726
3736
  display: block;
3727
3737
  position: absolute;
3728
3738
  pointer-events: none;
@@ -3860,7 +3870,7 @@ input:focus + .ids-toggle input:before {
3860
3870
  .ids-toggle input[type=checkbox]:after,
3861
3871
  .ids-toggle input:after {
3862
3872
  font: icon;
3863
- font-family: "Inera-Design-Icons";
3873
+ font-family: "Inera-Design-Icons" !important;
3864
3874
  display: block;
3865
3875
  position: absolute;
3866
3876
  pointer-events: none;
@@ -3886,7 +3896,7 @@ input:focus + .ids-toggle input:before {
3886
3896
  .ids-toggle input[type=checkbox]:checked:after,
3887
3897
  .ids-toggle input:checked:after {
3888
3898
  font: icon;
3889
- font-family: "Inera-Design-Icons";
3899
+ font-family: "Inera-Design-Icons" !important;
3890
3900
  display: block;
3891
3901
  position: absolute;
3892
3902
  pointer-events: none;
@@ -4675,10 +4685,21 @@ input:focus + .ids-toggle input:before {
4675
4685
  [class^=ids-icon-].ids-icon--light, [class^=ids-icon-].ids-icon--color-preset-4 {
4676
4686
  color: var(--IDS-ICON__COLOR-PRESET-4);
4677
4687
  }
4688
+ [class^=ids-icon-].ids-icon--text-align {
4689
+ position: relative;
4690
+ bottom: -0.3125rem;
4691
+ flex-shrink: 0;
4692
+ }
4693
+ [class^=ids-icon-].ids-icon--text-align:before {
4694
+ top: 50%;
4695
+ left: 50%;
4696
+ transform: translate(-50%, -50%);
4697
+ }
4678
4698
  [class^=ids-icon-].ids-icon--text-start {
4679
4699
  margin-right: 0.5rem;
4680
4700
  position: relative;
4681
4701
  bottom: -0.125rem;
4702
+ flex-shrink: 0;
4682
4703
  }
4683
4704
  [class^=ids-icon-].ids-icon--text-start:before {
4684
4705
  top: 50%;
@@ -4689,6 +4710,7 @@ input:focus + .ids-toggle input:before {
4689
4710
  margin-left: 0.5rem;
4690
4711
  position: relative;
4691
4712
  bottom: -0.125rem;
4713
+ flex-shrink: 0;
4692
4714
  }
4693
4715
  [class^=ids-icon-].ids-icon--text-end:before {
4694
4716
  top: 50%;