@inera/ids-design 5.5.1 → 6.0.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 (139) hide show
  1. package/components/accordion/accordion-lit.js +9 -0
  2. package/components/accordion/accordion.css +260 -0
  3. package/components/alert/alert-lit.js +1 -1
  4. package/components/alert/alert.css +245 -133
  5. package/components/alert-global/alert-global-lit.js +1 -1
  6. package/components/alert-global/alert-global.css +51 -20
  7. package/components/badge/badge-lit.js +1 -1
  8. package/components/badge/badge.css +3 -4
  9. package/components/box-link/box-link-lit.js +1 -1
  10. package/components/box-link/box-link.css +59 -22
  11. package/components/breadcrumbs/breadcrumbs-lit.js +1 -1
  12. package/components/breadcrumbs/breadcrumbs.css +36 -29
  13. package/components/card/card-lit.js +4 -2
  14. package/components/card/card.css +81 -40
  15. package/components/carousel/carousel-lit.js +1 -1
  16. package/components/carousel/carousel.css +47 -17
  17. package/components/data-table/data-table-lit.js +1 -1
  18. package/components/data-table/data-table.css +8 -14
  19. package/components/date-label/date-label-lit.js +1 -1
  20. package/components/date-label/date-label.css +8 -8
  21. package/components/dialog/dialog-lit.js +1 -1
  22. package/components/dialog/dialog.css +21 -2
  23. package/components/dropdown/dropdown-lit.js +1 -1
  24. package/components/dropdown/dropdown.css +15 -60
  25. package/components/footer-1177/footer-1177-lit.js +1 -1
  26. package/components/footer-1177/footer-1177.css +27 -9
  27. package/components/footer-1177-admin/footer-1177-admin-lit.js +1 -1
  28. package/components/footer-1177-admin/footer-1177-admin.css +28 -8
  29. package/components/footer-1177-pro/footer-1177-pro-lit.js +1 -1
  30. package/components/footer-1177-pro/footer-1177-pro.css +20 -1
  31. package/components/footer-inera/footer-inera-lit.js +1 -1
  32. package/components/footer-inera/footer-inera.css +14 -8
  33. package/components/footer-inera-admin/footer-inera-admin-lit.js +1 -1
  34. package/components/footer-inera-admin/footer-inera-admin.css +14 -8
  35. package/components/form/error-message/error-message-lit.js +1 -1
  36. package/components/form/error-message/error-message.css +30 -5
  37. package/components/form/range/range-lit.js +1 -1
  38. package/components/form/range/range.css +0 -1
  39. package/components/form/select-multiple/select-multiple-lit.js +1 -1
  40. package/components/form/select-multiple/select-multiple.css +33 -16
  41. package/components/header-1177/composite-header-1177.css +416 -191
  42. package/components/header-1177/header-1177-avatar-lit.js +1 -1
  43. package/components/header-1177/header-1177-avatar.css +123 -60
  44. package/components/header-1177/header-1177-item-lit.js +1 -1
  45. package/components/header-1177/header-1177-item.css +37 -4
  46. package/components/header-1177/header-1177-lit.js +1 -1
  47. package/components/header-1177/header-1177-nav-item-lit.js +1 -1
  48. package/components/header-1177/header-1177-nav-item-mobile-lit.js +1 -1
  49. package/components/header-1177/header-1177-nav-item-mobile.css +47 -8
  50. package/components/header-1177/header-1177-nav-item.css +71 -48
  51. package/components/header-1177/header-1177.css +166 -75
  52. package/components/header-1177-admin/header-1177-admin-avatar-lit.js +1 -1
  53. package/components/header-1177-admin/header-1177-admin-avatar-mobile-lit.js +1 -1
  54. package/components/header-1177-admin/header-1177-admin-avatar-mobile.css +55 -12
  55. package/components/header-1177-admin/header-1177-admin-avatar.css +107 -40
  56. package/components/header-1177-admin/header-1177-admin-item-lit.js +1 -1
  57. package/components/header-1177-admin/header-1177-admin-item.css +31 -0
  58. package/components/header-1177-admin/header-1177-admin-lit.js +1 -1
  59. package/components/header-1177-admin/header-1177-admin-nav-item-lit.js +1 -1
  60. package/components/header-1177-admin/header-1177-admin-nav-item.css +47 -44
  61. package/components/header-1177-admin/header-1177-admin.css +61 -11
  62. package/components/header-1177-pro/header-1177-pro-avatar-lit.js +1 -1
  63. package/components/header-1177-pro/header-1177-pro-avatar-mobile-lit.js +1 -1
  64. package/components/header-1177-pro/header-1177-pro-avatar-mobile.css +57 -13
  65. package/components/header-1177-pro/header-1177-pro-avatar.css +125 -60
  66. package/components/header-1177-pro/header-1177-pro-item-lit.js +1 -1
  67. package/components/header-1177-pro/header-1177-pro-item.css +23 -0
  68. package/components/header-1177-pro/header-1177-pro-lit.js +1 -1
  69. package/components/header-1177-pro/header-1177-pro-nav-item-lit.js +1 -1
  70. package/components/header-1177-pro/header-1177-pro-nav-item.css +59 -32
  71. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile-lit.js +1 -1
  72. package/components/header-1177-pro/header-1177-pro-nav-menu-mobile.css +5 -2
  73. package/components/header-1177-pro/header-1177-pro-region-picker-lit.js +1 -1
  74. package/components/header-1177-pro/header-1177-pro-region-picker.css +240 -60
  75. package/components/header-1177-pro/header-1177-pro.css +72 -12
  76. package/components/header-inera/header-inera-item-lit.js +1 -1
  77. package/components/header-inera/header-inera-item.css +6 -1
  78. package/components/header-inera/header-inera-lit.js +1 -1
  79. package/components/header-inera/header-inera-nav-item-lit.js +1 -1
  80. package/components/header-inera/header-inera-nav-item.css +13 -7
  81. package/components/header-inera/header-inera-nav-mobile-lit.js +1 -1
  82. package/components/header-inera/header-inera-nav-mobile.css +5 -2
  83. package/components/header-inera/header-inera.css +41 -4
  84. package/components/header-inera-admin/composite-header-inera-admin.css +44 -23
  85. package/components/header-inera-admin/header-inera-admin-avatar-lit.js +1 -1
  86. package/components/header-inera-admin/header-inera-admin-avatar.css +28 -4
  87. package/components/header-inera-admin/header-inera-admin-item-lit.js +1 -1
  88. package/components/header-inera-admin/header-inera-admin-item.css +12 -6
  89. package/components/header-inera-admin/header-inera-admin-lit.js +1 -1
  90. package/components/header-inera-admin/header-inera-admin-nav-item-lit.js +1 -1
  91. package/components/header-inera-admin/header-inera-admin-nav-item.css +13 -7
  92. package/components/header-inera-admin/header-inera-admin-nav-mobile-lit.js +1 -1
  93. package/components/header-inera-admin/header-inera-admin-nav-mobile.css +5 -2
  94. package/components/header-inera-admin/header-inera-admin.css +7 -4
  95. package/components/mobile-menu/mobile-menu-lit.js +1 -1
  96. package/components/mobile-menu/mobile-menu.css +135 -0
  97. package/components/navigation/content/navigation-content-lit.js +1 -1
  98. package/components/navigation/content/navigation-content.css +11 -9
  99. package/components/pagination/data-pagination/data-pagination-lit.js +1 -1
  100. package/components/pagination/data-pagination/data-pagination.css +113 -46
  101. package/components/pagination/list-pagination/list-pagination-lit.js +1 -1
  102. package/components/pagination/list-pagination/list-pagination.css +104 -41
  103. package/components/popover/popover-content-lit.js +1 -1
  104. package/components/popover/popover-content.css +30 -11
  105. package/components/puff-list/puff-list-lit.js +7 -0
  106. package/components/puff-list/puff-list.css +169 -0
  107. package/components/side-menu/side-menu-lit.js +1 -1
  108. package/components/side-menu/side-menu.css +43 -26
  109. package/components/side-panel/side-panel-lit.js +1 -1
  110. package/components/side-panel/side-panel.css +33 -8
  111. package/components/stepper/stepper-lit.js +1 -1
  112. package/components/stepper/stepper.css +45 -4
  113. package/components/tabs/tab-lit.js +1 -1
  114. package/components/tabs/tab.css +7 -0
  115. package/components/tabs/tabs-lit.js +1 -1
  116. package/components/tag/tag-lit.js +1 -1
  117. package/components/tag/tag.css +45 -20
  118. package/global/_partials.css +3 -0
  119. package/global/global.css +771 -173
  120. package/global/icons/font/Inera-Design-Icons.eot +0 -0
  121. package/global/icons/font/Inera-Design-Icons.svg +155 -0
  122. package/global/icons/font/Inera-Design-Icons.ttf +0 -0
  123. package/global/icons/font/Inera-Design-Icons.woff +0 -0
  124. package/global/util/util.css +18 -0
  125. package/package.json +1 -1
  126. package/themes/1177/1177-tokens.css +2 -0
  127. package/themes/1177/1177.css +862 -318
  128. package/themes/1177-pro/1177-pro.css +864 -365
  129. package/themes/inera/inera.css +878 -328
  130. package/themes/inera-admin/inera-admin.css +881 -345
  131. package/components/expandable/expandable-lit.js +0 -7
  132. package/components/expandable/expandable.css +0 -108
  133. package/components/footer/footer-lit.js +0 -7
  134. package/components/footer/footer.css +0 -450
  135. package/components/list/list-lit.d.ts +0 -2
  136. package/components/list/list-lit.js +0 -7
  137. package/components/list/list.css +0 -143
  138. /package/components/{expandable/expandable-lit.d.ts → accordion/accordion-lit.d.ts} +0 -0
  139. /package/components/{footer/footer-lit.d.ts → puff-list/puff-list-lit.d.ts} +0 -0
package/components/header-1177/header-1177-nav-item.css CHANGED
@@ -1,4 +1,7 @@
1
1
  /*******
2
+ * ICONS
3
+ ********/
4
+ /*******
2
5
  * BUTTONS
3
6
  ********/
4
7
  /*******
@@ -95,34 +98,39 @@
95
98
  background-color: var(--IDS-COLOR-PRIMARY-90);
96
99
  left: 0;
97
100
  min-height: 10.813rem;
98
- padding: 2.5rem 0 3.125rem;
101
+ padding: 2.5rem 0.625rem 3.125rem;
99
102
  position: absolute;
100
103
  width: 100%;
101
104
  top: 100%;
102
105
  z-index: -1;
106
+ box-sizing: border-box;
103
107
  box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.2);
104
108
  }
105
109
  .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content {
106
110
  max-width: var(--IDS__MAX-WIDTH);
107
- display: grid;
108
- grid-template-columns: 1fr 1fr 1fr 1fr;
109
- padding: 0 0.625rem;
110
- margin-left: auto;
111
- margin-right: auto;
112
- }
113
- .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-1 a,
114
- .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-2 a,
115
- .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-3 a,
111
+ margin: 0 auto;
112
+ width: 100%;
113
+ display: flex;
114
+ }
115
+ .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-1,
116
+ .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-2,
117
+ .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-3,
118
+ .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-4 {
119
+ flex: 0 25%;
120
+ }
121
+ .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-1 .ids-header-1177__items-wrapper,
122
+ .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-2 .ids-header-1177__items-wrapper,
123
+ .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-3 .ids-header-1177__items-wrapper,
116
124
  .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content ::slotted([slot=col-1]),
117
125
  .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content ::slotted([slot=col-2]),
118
126
  .ids-header-1177--unresponsive .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content ::slotted([slot=col-3]) {
119
- display: block;
127
+ display: flex;
120
128
  margin-bottom: 0.625rem;
121
129
  margin-right: 2.5rem;
122
130
  font-size: 1rem;
123
131
  line-height: 1.5rem;
124
132
  padding-bottom: 0.625rem;
125
- border-bottom: 0.063rem solid #dfa9b8;
133
+ border-bottom: 0.063rem solid var(--IDS-COLOR-PRIMARY-30-OPACITY-03);
126
134
  }
127
135
 
128
136
  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item > a, .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item > button,
@@ -198,34 +206,39 @@
198
206
  background-color: var(--IDS-COLOR-PRIMARY-90);
199
207
  left: 0;
200
208
  min-height: 10.813rem;
201
- padding: 2.5rem 0 3.125rem;
209
+ padding: 2.5rem 0.625rem 3.125rem;
202
210
  position: absolute;
203
211
  width: 100%;
204
212
  top: 100%;
205
213
  z-index: -1;
214
+ box-sizing: border-box;
206
215
  box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.2);
207
216
  }
208
217
  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content {
209
218
  max-width: var(--IDS__MAX-WIDTH);
210
- display: grid;
211
- grid-template-columns: 1fr 1fr 1fr 1fr;
212
- padding: 0 0.625rem;
213
- margin-left: auto;
214
- margin-right: auto;
215
- }
216
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-1 a,
217
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-2 a,
218
- .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-3 a,
219
+ margin: 0 auto;
220
+ width: 100%;
221
+ display: flex;
222
+ }
223
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-1,
224
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-2,
225
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-3,
226
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-4 {
227
+ flex: 0 25%;
228
+ }
229
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-1 .ids-header-1177__items-wrapper,
230
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-2 .ids-header-1177__items-wrapper,
231
+ .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-3 .ids-header-1177__items-wrapper,
219
232
  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content ::slotted([slot=col-1]),
220
233
  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content ::slotted([slot=col-2]),
221
234
  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content ::slotted([slot=col-3]) {
222
- display: block;
235
+ display: flex;
223
236
  margin-bottom: 0.625rem;
224
237
  margin-right: 2.5rem;
225
238
  font-size: 1rem;
226
239
  line-height: 1.5rem;
227
240
  padding-bottom: 0.625rem;
228
- border-bottom: 0.063rem solid #dfa9b8;
241
+ border-bottom: 0.063rem solid var(--IDS-COLOR-PRIMARY-30-OPACITY-03);
229
242
  }
230
243
  @media (max-width: 1024px) {
231
244
  .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item {
@@ -310,34 +323,39 @@
310
323
  background-color: var(--IDS-COLOR-PRIMARY-90);
311
324
  left: 0;
312
325
  min-height: 10.813rem;
313
- padding: 2.5rem 0 3.125rem;
326
+ padding: 2.5rem 0.625rem 3.125rem;
314
327
  position: absolute;
315
328
  width: 100%;
316
329
  top: 100%;
317
330
  z-index: -1;
331
+ box-sizing: border-box;
318
332
  box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.2);
319
333
  }
320
334
  :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content {
321
335
  max-width: var(--IDS__MAX-WIDTH);
322
- display: grid;
323
- grid-template-columns: 1fr 1fr 1fr 1fr;
324
- padding: 0 0.625rem;
325
- margin-left: auto;
326
- margin-right: auto;
327
- }
328
- :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-1 a,
329
- :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-2 a,
330
- :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-3 a,
336
+ margin: 0 auto;
337
+ width: 100%;
338
+ display: flex;
339
+ }
340
+ :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-1,
341
+ :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-2,
342
+ :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-3,
343
+ :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-4 {
344
+ flex: 0 25%;
345
+ }
346
+ :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-1 .ids-header-1177__items-wrapper,
347
+ :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-2 .ids-header-1177__items-wrapper,
348
+ :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-3 .ids-header-1177__items-wrapper,
331
349
  :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content ::slotted([slot=col-1]),
332
350
  :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content ::slotted([slot=col-2]),
333
351
  :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content ::slotted([slot=col-3]) {
334
- display: block;
352
+ display: flex;
335
353
  margin-bottom: 0.625rem;
336
354
  margin-right: 2.5rem;
337
355
  font-size: 1rem;
338
356
  line-height: 1.5rem;
339
357
  padding-bottom: 0.625rem;
340
- border-bottom: 0.063rem solid #dfa9b8;
358
+ border-bottom: 0.063rem solid var(--IDS-COLOR-PRIMARY-30-OPACITY-03);
341
359
  }
342
360
  @media (max-width: 1024px) {
343
361
  :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) {
@@ -417,34 +435,39 @@
417
435
  background-color: var(--IDS-COLOR-PRIMARY-90);
418
436
  left: 0;
419
437
  min-height: 10.813rem;
420
- padding: 2.5rem 0 3.125rem;
438
+ padding: 2.5rem 0.625rem 3.125rem;
421
439
  position: absolute;
422
440
  width: 100%;
423
441
  top: 100%;
424
442
  z-index: -1;
443
+ box-sizing: border-box;
425
444
  box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.2);
426
445
  }
427
446
  :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content {
428
447
  max-width: var(--IDS__MAX-WIDTH);
429
- display: grid;
430
- grid-template-columns: 1fr 1fr 1fr 1fr;
431
- padding: 0 0.625rem;
432
- margin-left: auto;
433
- margin-right: auto;
434
- }
435
- :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-1 a,
436
- :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-2 a,
437
- :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-3 a,
448
+ margin: 0 auto;
449
+ width: 100%;
450
+ display: flex;
451
+ }
452
+ :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-1,
453
+ :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-2,
454
+ :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-3,
455
+ :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-4 {
456
+ flex: 0 25%;
457
+ }
458
+ :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-1 .ids-header-1177__items-wrapper,
459
+ :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-2 .ids-header-1177__items-wrapper,
460
+ :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content .ids-header-1177__items__item-dropdown__content-col-3 .ids-header-1177__items-wrapper,
438
461
  :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content ::slotted([slot=col-1]),
439
462
  :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content ::slotted([slot=col-2]),
440
463
  :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content ::slotted([slot=col-3]) {
441
- display: block;
464
+ display: flex;
442
465
  margin-bottom: 0.625rem;
443
466
  margin-right: 2.5rem;
444
467
  font-size: 1rem;
445
468
  line-height: 1.5rem;
446
469
  padding-bottom: 0.625rem;
447
- border-bottom: 0.063rem solid #dfa9b8;
470
+ border-bottom: 0.063rem solid var(--IDS-COLOR-PRIMARY-30-OPACITY-03);
448
471
  }
449
472
  :host .ids-header-1177__nav-item.ids-header-1177__nav-item--fluid .ids-header-1177__items__item-dropdown .ids-header-1177__items__item-dropdown__content {
450
473
  max-width: 100% !important;