@inera/ids-design 5.1.1 → 5.1.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.
Files changed (26) hide show
  1. package/components/dropdown/dropdown-lit.js +1 -1
  2. package/components/dropdown/dropdown.css +7 -12
  3. package/components/header-1177/composite-header-1177.css +55 -56
  4. package/components/header-1177/header-1177-nav-item-lit.js +1 -1
  5. package/components/header-1177/header-1177-nav-item-mobile-lit.js +1 -1
  6. package/components/header-1177/header-1177-nav-item-mobile.css +1 -0
  7. package/components/header-1177/header-1177-nav-item.css +52 -56
  8. package/components/header-1177/header-1177-nav-lit.js +1 -1
  9. package/components/header-1177/header-1177-nav.css +2 -0
  10. package/components/header-1177-admin/header-1177-admin-nav-item-lit.js +1 -1
  11. package/components/header-1177-admin/header-1177-admin-nav-item.css +8 -8
  12. package/components/header-1177-pro/header-1177-pro-nav-item-lit.js +1 -1
  13. package/components/header-1177-pro/header-1177-pro-nav-item.css +8 -24
  14. package/components/header-inera/header-inera-nav-item-lit.js +1 -1
  15. package/components/header-inera/header-inera-nav-item.css +1 -1
  16. package/components/header-inera-admin/composite-header-inera-admin.css +1 -1
  17. package/components/header-inera-admin/header-inera-admin-nav-item-lit.js +1 -1
  18. package/components/header-inera-admin/header-inera-admin-nav-item.css +1 -1
  19. package/components/navigation/content/navigation-content-lit.js +1 -1
  20. package/components/navigation/content/navigation-content.css +2 -2
  21. package/global/global.css +25 -46
  22. package/package.json +1 -1
  23. package/themes/1177/1177.css +29 -46
  24. package/themes/1177-pro/1177-pro.css +29 -46
  25. package/themes/inera/inera.css +29 -46
  26. package/themes/inera-admin/inera-admin.css +29 -46
package/themes/inera/inera.css CHANGED
@@ -2388,14 +2388,14 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
2388
2388
  color: var(--link-colorpreset-1_color);
2389
2389
  text-decoration-color: var(--link-colorpreset-1_color);
2390
2390
  line-height: 1.5rem;
2391
+ gap: 8px;
2391
2392
  cursor: pointer;
2392
2393
  display: inline-flex;
2393
- gap: 8px;
2394
2394
  align-items: flex-start;
2395
2395
  text-decoration: none;
2396
2396
  position: relative;
2397
2397
  }
2398
- .ids-link:not(:has(.ids-link__icon)) {
2398
+ .ids-link:not(:has(.ids-icon)) {
2399
2399
  text-decoration: underline;
2400
2400
  }
2401
2401
  .ids-link:focus:focus {
@@ -2403,7 +2403,7 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
2403
2403
  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
2404
2404
  }
2405
2405
  .ids-link:hover, .ids-link:focus {
2406
- text-decoration: underline;
2406
+ text-decoration: underline !important;
2407
2407
  color: var(--link-colorpreset-1-hover_color);
2408
2408
  }
2409
2409
  .ids-link:hover .ids-link__icon:has(+ .ids-link__icon--hover), .ids-link:focus .ids-link__icon:has(+ .ids-link__icon--hover) {
@@ -2421,55 +2421,37 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
2421
2421
  .ids-link.ids-link--active-icon {
2422
2422
  text-decoration: none !important;
2423
2423
  }
2424
- .ids-link.ids-link--active-icon .ids-link__icon .ids-link__icon__wrap,
2425
- .ids-link.ids-link--active-icon .ids-link__icon--hover .ids-link__icon__wrap {
2424
+ .ids-link.ids-link--active-icon .ids-icon {
2425
+ margin-top: 0.25rem;
2426
+ display: inline-flex;
2426
2427
  border-radius: 100%;
2427
- padding: 3px;
2428
+ width: 1rem;
2429
+ height: 1rem;
2428
2430
  align-items: center;
2429
2431
  justify-content: center;
2432
+ padding: 0.188rem;
2430
2433
  }
2431
- .ids-link.ids-link--active-icon:hover .ids-link__icon .ids-link__icon__wrap, .ids-link.ids-link--active-icon:focus-within .ids-link__icon .ids-link__icon__wrap {
2432
- background-color: var(--link-colorpreset-1-hover_color);
2434
+ .ids-link.ids-link--active-icon.ids-link--active .ids-icon {
2435
+ background-color: var(--link-colorpreset-1--active-icon--active_background-color);
2433
2436
  }
2434
- .ids-link.ids-link--active-icon.ids-link--active .ids-link__icon:has(+ .ids-link__icon--hover) {
2435
- display: none;
2437
+ .ids-link.ids-link--active-icon:hover .ids-icon, .ids-link.ids-link--active-icon:focus-within .ids-icon {
2438
+ background-color: var(--link-colorpreset-1--active-icon--hover_background-color);
2436
2439
  }
2437
- .ids-link.ids-link--active-icon.ids-link--active .ids-link__icon--hover {
2440
+ .ids-link.ids-link--active-icon.ids-link--color-2 .ids-icon {
2441
+ margin-top: 0.25rem;
2438
2442
  display: inline-flex;
2439
- }
2440
- .ids-link.ids-link--active-icon.ids-link--active .ids-link__icon .ids-link__icon__wrap {
2441
- background-color: var(--link-colorpreset-1_color);
2442
- }
2443
- .ids-link.ids-link--active-icon.ids-link--active:hover .ids-link__icon .ids-link__icon__wrap {
2444
- background-color: var(--link-colorpreset-1-hover_color);
2445
- }
2446
- .ids-link.ids-link--active-icon .ids-link__icon--hover .ids-link__icon__wrap {
2447
- background-color: var(--link-colorpreset-1-hover_color);
2448
- }
2449
- .ids-link.ids-link--active-icon.ids-link--color-2 .ids-link__icon .ids-link__icon__wrap,
2450
- .ids-link.ids-link--active-icon.ids-link--color-2 .ids-link__icon--hover .ids-link__icon__wrap {
2451
2443
  border-radius: 100%;
2452
- padding: 3px;
2444
+ width: 1rem;
2445
+ height: 1rem;
2453
2446
  align-items: center;
2454
2447
  justify-content: center;
2448
+ padding: 0.188rem;
2455
2449
  }
2456
- .ids-link.ids-link--active-icon.ids-link--color-2:hover .ids-link__icon .ids-link__icon__wrap, .ids-link.ids-link--active-icon.ids-link--color-2:focus-within .ids-link__icon .ids-link__icon__wrap {
2457
- background-color: var(--link-colorpreset-2-hover_color);
2450
+ .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-icon {
2451
+ background-color: var(--link-colorpreset-2--active-icon--active_background-color);
2458
2452
  }
2459
- .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-link__icon:has(+ .ids-link__icon--hover) {
2460
- display: none;
2461
- }
2462
- .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-link__icon--hover {
2463
- display: inline-flex;
2464
- }
2465
- .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-link__icon .ids-link__icon__wrap {
2466
- background-color: var(--link-colorpreset-2_color);
2467
- }
2468
- .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active:hover .ids-link__icon .ids-link__icon__wrap {
2469
- background-color: var(--link-colorpreset-2-hover_color);
2470
- }
2471
- .ids-link.ids-link--active-icon.ids-link--color-2 .ids-link__icon--hover .ids-link__icon__wrap {
2472
- background-color: var(--link-colorpreset-2-hover_color);
2453
+ .ids-link.ids-link--active-icon.ids-link--color-2:hover .ids-icon, .ids-link.ids-link--active-icon.ids-link--color-2:focus-within .ids-icon {
2454
+ background-color: var(--link-colorpreset-2--active-icon--hover_background-color);
2473
2455
  }
2474
2456
  .ids-link.ids-link--color-2 {
2475
2457
  color: var(--link-colorpreset-2_color);
@@ -2489,16 +2471,12 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
2489
2471
  .ids-link.ids-link--light:hover {
2490
2472
  color: white !important;
2491
2473
  }
2492
- .ids-link .ids-link__icon,
2493
- .ids-link .ids-link__icon--hover {
2474
+ .ids-link .ids-icon {
2494
2475
  display: inline-flex;
2495
- justify-content: center;
2496
2476
  align-items: center;
2477
+ justify-content: center;
2497
2478
  height: 1.5rem;
2498
2479
  }
2499
- .ids-link .ids-link__text {
2500
- gap: 8px;
2501
- }
2502
2480
  .ids-link .ids-link__icon {
2503
2481
  display: inline-flex;
2504
2482
  }
@@ -2613,6 +2591,7 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
2613
2591
  background-color: var(--btn_background-color);
2614
2592
  border: var(--btn_border);
2615
2593
  border-radius: var(--btn_border-radius);
2594
+ text-decoration: none;
2616
2595
  box-sizing: border-box;
2617
2596
  color: white;
2618
2597
  cursor: pointer;
@@ -4049,6 +4028,10 @@ select::placeholder {
4049
4028
  --link-colorpreset-1-hover_color: var(--IDS-COLOR-ACCENT-30);
4050
4029
  --link-colorpreset-2_color: var(--IDS-COLOR-PRIMARY-40);
4051
4030
  --link-colorpreset-2-hover_color: var(--IDS-COLOR-PRIMARY-30);
4031
+ --link-colorpreset-1--active-icon--hover_background-color: var(--IDS-COLOR-ACCENT-40);
4032
+ --link-colorpreset-1--active-icon--active_background-color: var(--IDS-COLOR-ACCENT-30);
4033
+ --link-colorpreset-2--active-icon--hover_background-color: var(--IDS-COLOR-PRIMARY-40);
4034
+ --link-colorpreset-2--active-icon--active_background-color: var(--IDS-COLOR-PRIMARY-30);
4052
4035
  /* List */
4053
4036
  --list-heading_color: var(--IDS-COLOR-ACCENT-40);
4054
4037
  --list_border: var(--IDS-COLOR-NEUTRAL-90);
package/themes/inera-admin/inera-admin.css CHANGED
@@ -2388,14 +2388,14 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
2388
2388
  color: var(--link-colorpreset-1_color);
2389
2389
  text-decoration-color: var(--link-colorpreset-1_color);
2390
2390
  line-height: 1.5rem;
2391
+ gap: 8px;
2391
2392
  cursor: pointer;
2392
2393
  display: inline-flex;
2393
- gap: 8px;
2394
2394
  align-items: flex-start;
2395
2395
  text-decoration: none;
2396
2396
  position: relative;
2397
2397
  }
2398
- .ids-link:not(:has(.ids-link__icon)) {
2398
+ .ids-link:not(:has(.ids-icon)) {
2399
2399
  text-decoration: underline;
2400
2400
  }
2401
2401
  .ids-link:focus:focus {
@@ -2403,7 +2403,7 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
2403
2403
  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
2404
2404
  }
2405
2405
  .ids-link:hover, .ids-link:focus {
2406
- text-decoration: underline;
2406
+ text-decoration: underline !important;
2407
2407
  color: var(--link-colorpreset-1-hover_color);
2408
2408
  }
2409
2409
  .ids-link:hover .ids-link__icon:has(+ .ids-link__icon--hover), .ids-link:focus .ids-link__icon:has(+ .ids-link__icon--hover) {
@@ -2421,55 +2421,37 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
2421
2421
  .ids-link.ids-link--active-icon {
2422
2422
  text-decoration: none !important;
2423
2423
  }
2424
- .ids-link.ids-link--active-icon .ids-link__icon .ids-link__icon__wrap,
2425
- .ids-link.ids-link--active-icon .ids-link__icon--hover .ids-link__icon__wrap {
2424
+ .ids-link.ids-link--active-icon .ids-icon {
2425
+ margin-top: 0.25rem;
2426
+ display: inline-flex;
2426
2427
  border-radius: 100%;
2427
- padding: 3px;
2428
+ width: 1rem;
2429
+ height: 1rem;
2428
2430
  align-items: center;
2429
2431
  justify-content: center;
2432
+ padding: 0.188rem;
2430
2433
  }
2431
- .ids-link.ids-link--active-icon:hover .ids-link__icon .ids-link__icon__wrap, .ids-link.ids-link--active-icon:focus-within .ids-link__icon .ids-link__icon__wrap {
2432
- background-color: var(--link-colorpreset-1-hover_color);
2434
+ .ids-link.ids-link--active-icon.ids-link--active .ids-icon {
2435
+ background-color: var(--link-colorpreset-1--active-icon--active_background-color);
2433
2436
  }
2434
- .ids-link.ids-link--active-icon.ids-link--active .ids-link__icon:has(+ .ids-link__icon--hover) {
2435
- display: none;
2437
+ .ids-link.ids-link--active-icon:hover .ids-icon, .ids-link.ids-link--active-icon:focus-within .ids-icon {
2438
+ background-color: var(--link-colorpreset-1--active-icon--hover_background-color);
2436
2439
  }
2437
- .ids-link.ids-link--active-icon.ids-link--active .ids-link__icon--hover {
2440
+ .ids-link.ids-link--active-icon.ids-link--color-2 .ids-icon {
2441
+ margin-top: 0.25rem;
2438
2442
  display: inline-flex;
2439
- }
2440
- .ids-link.ids-link--active-icon.ids-link--active .ids-link__icon .ids-link__icon__wrap {
2441
- background-color: var(--link-colorpreset-1_color);
2442
- }
2443
- .ids-link.ids-link--active-icon.ids-link--active:hover .ids-link__icon .ids-link__icon__wrap {
2444
- background-color: var(--link-colorpreset-1-hover_color);
2445
- }
2446
- .ids-link.ids-link--active-icon .ids-link__icon--hover .ids-link__icon__wrap {
2447
- background-color: var(--link-colorpreset-1-hover_color);
2448
- }
2449
- .ids-link.ids-link--active-icon.ids-link--color-2 .ids-link__icon .ids-link__icon__wrap,
2450
- .ids-link.ids-link--active-icon.ids-link--color-2 .ids-link__icon--hover .ids-link__icon__wrap {
2451
2443
  border-radius: 100%;
2452
- padding: 3px;
2444
+ width: 1rem;
2445
+ height: 1rem;
2453
2446
  align-items: center;
2454
2447
  justify-content: center;
2448
+ padding: 0.188rem;
2455
2449
  }
2456
- .ids-link.ids-link--active-icon.ids-link--color-2:hover .ids-link__icon .ids-link__icon__wrap, .ids-link.ids-link--active-icon.ids-link--color-2:focus-within .ids-link__icon .ids-link__icon__wrap {
2457
- background-color: var(--link-colorpreset-2-hover_color);
2450
+ .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-icon {
2451
+ background-color: var(--link-colorpreset-2--active-icon--active_background-color);
2458
2452
  }
2459
- .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-link__icon:has(+ .ids-link__icon--hover) {
2460
- display: none;
2461
- }
2462
- .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-link__icon--hover {
2463
- display: inline-flex;
2464
- }
2465
- .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active .ids-link__icon .ids-link__icon__wrap {
2466
- background-color: var(--link-colorpreset-2_color);
2467
- }
2468
- .ids-link.ids-link--active-icon.ids-link--color-2.ids-link--active:hover .ids-link__icon .ids-link__icon__wrap {
2469
- background-color: var(--link-colorpreset-2-hover_color);
2470
- }
2471
- .ids-link.ids-link--active-icon.ids-link--color-2 .ids-link__icon--hover .ids-link__icon__wrap {
2472
- background-color: var(--link-colorpreset-2-hover_color);
2453
+ .ids-link.ids-link--active-icon.ids-link--color-2:hover .ids-icon, .ids-link.ids-link--active-icon.ids-link--color-2:focus-within .ids-icon {
2454
+ background-color: var(--link-colorpreset-2--active-icon--hover_background-color);
2473
2455
  }
2474
2456
  .ids-link.ids-link--color-2 {
2475
2457
  color: var(--link-colorpreset-2_color);
@@ -2489,16 +2471,12 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
2489
2471
  .ids-link.ids-link--light:hover {
2490
2472
  color: white !important;
2491
2473
  }
2492
- .ids-link .ids-link__icon,
2493
- .ids-link .ids-link__icon--hover {
2474
+ .ids-link .ids-icon {
2494
2475
  display: inline-flex;
2495
- justify-content: center;
2496
2476
  align-items: center;
2477
+ justify-content: center;
2497
2478
  height: 1.5rem;
2498
2479
  }
2499
- .ids-link .ids-link__text {
2500
- gap: 8px;
2501
- }
2502
2480
  .ids-link .ids-link__icon {
2503
2481
  display: inline-flex;
2504
2482
  }
@@ -2613,6 +2591,7 @@ input.ids-time:disabled, .ids-textarea:disabled, .ids-select:disabled, .ids-inpu
2613
2591
  background-color: var(--btn_background-color);
2614
2592
  border: var(--btn_border);
2615
2593
  border-radius: var(--btn_border-radius);
2594
+ text-decoration: none;
2616
2595
  box-sizing: border-box;
2617
2596
  color: white;
2618
2597
  cursor: pointer;
@@ -4049,6 +4028,10 @@ select::placeholder {
4049
4028
  --link-colorpreset-1-hover_color: var(--IDS-COLOR-ACCENT-30);
4050
4029
  --link-colorpreset-2_color: var(--IDS-COLOR-PRIMARY-40);
4051
4030
  --link-colorpreset-2-hover_color: var(--IDS-COLOR-PRIMARY-30);
4031
+ --link-colorpreset-1--active-icon--hover_background-color: var(--IDS-COLOR-ACCENT-40);
4032
+ --link-colorpreset-1--active-icon--active_background-color: var(--IDS-COLOR-ACCENT-30);
4033
+ --link-colorpreset-2--active-icon--hover_background-color: var(--IDS-COLOR-PRIMARY-40);
4034
+ --link-colorpreset-2--active-icon--active_background-color: var(--IDS-COLOR-PRIMARY-30);
4052
4035
  /* List */
4053
4036
  --list-heading_color: var(--IDS-COLOR-ACCENT-40);
4054
4037
  --list_border: var(--IDS-COLOR-NEUTRAL-90);