diff --git a/packages/components/src/components/telekom/telekom-header/telekom-header.css b/packages/components/src/components/telekom/telekom-header/telekom-header.css index 78fbd01b67..5aee66076c 100644 --- a/packages/components/src/components/telekom/telekom-header/telekom-header.css +++ b/packages/components/src/components/telekom/telekom-header/telekom-header.css @@ -282,6 +282,27 @@ slot[name='functions'] { /* TODO inline margin */ } +@media screen and (--lg) { + slot[name='main-nav'], + slot[name='functions'] { + padding-top: var(--telekom-spacing-composition-space-06); + } +} + +@media screen and (--xl) { + slot[name='main-nav'], + slot[name='functions'] { + padding-top: var(--telekom-spacing-composition-space-07); + } +} + +@media screen and (--2xl) { + slot[name='main-nav'], + slot[name='functions'] { + padding-top: var(--telekom-spacing-composition-space-10); + } +} + [part~='base'] { /* height: var(--_height); */ height: var(--_base-height); diff --git a/packages/components/src/components/telekom/telekom-mobile-menu-item/telekom-mobile-menu-item.css b/packages/components/src/components/telekom/telekom-mobile-menu-item/telekom-mobile-menu-item.css index 5ca4e0e5f0..23b18c7bb0 100644 --- a/packages/components/src/components/telekom/telekom-mobile-menu-item/telekom-mobile-menu-item.css +++ b/packages/components/src/components/telekom/telekom-mobile-menu-item/telekom-mobile-menu-item.css @@ -99,4 +99,5 @@ :host::part(icon-right-container) { display: flex; align-items: center; + position: absolute; } diff --git a/packages/components/src/components/telekom/telekom-nav-flyout/telekom-nav-flyout.tsx b/packages/components/src/components/telekom/telekom-nav-flyout/telekom-nav-flyout.tsx index ea0423b074..4491ee57ea 100644 --- a/packages/components/src/components/telekom/telekom-nav-flyout/telekom-nav-flyout.tsx +++ b/packages/components/src/components/telekom/telekom-nav-flyout/telekom-nav-flyout.tsx @@ -132,7 +132,6 @@ export class TelekomNavItem { this.show(); } }; - handleTriggerClick = (event: MouseEvent) => { if (event.ctrlKey) { return; diff --git a/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css b/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css index 9cfb30d624..9f401a3bc4 100644 --- a/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css +++ b/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css @@ -197,7 +197,6 @@ > .scale-telekom-nav-item > :where(a, button):hover:after { content: ''; - width: 100%; height: var(--telekom-spacing-composition-space-02); background: var(--telekom-color-text-and-icon-primary-hovered); display: block; @@ -258,7 +257,6 @@ > .scale-telekom-nav-item[active] > :where(a, button):after { content: ''; - width: 100%; height: var(--telekom-spacing-composition-space-03); background: var(--telekom-color-text-and-icon-primary-standard); display: block; diff --git a/packages/components/src/components/telekom/telekom-nav-list/telekom-nav-list.css b/packages/components/src/components/telekom/telekom-nav-list/telekom-nav-list.css index 89b3951754..9d6ec07db5 100644 --- a/packages/components/src/components/telekom/telekom-nav-list/telekom-nav-list.css +++ b/packages/components/src/components/telekom/telekom-nav-list/telekom-nav-list.css @@ -104,14 +104,43 @@ justify-content: center; } -.scale-telekom-nav-list[alignment='left'] > *:not(:last-child) { +.scale-telekom-nav-list[alignment='left']:not([variant='main-nav']) + > .scale-telekom-nav-item + button, +.scale-telekom-nav-list[alignment='left']:not([variant='main-nav']) + > .scale-telekom-nav-item + a { margin-inline-end: var(--_spacing-x-slotted); } -.scale-telekom-nav-list[alignment='right'] > *:not(:first-child) { - margin-inline-start: var(--_spacing-x-slotted); + +.scale-telekom-nav-list[variant='main-nav'] > .scale-telekom-nav-item { + position: relative; + left: calc(-1 * var(--telekom-spacing-composition-space-06)); + margin-inline-end: 0; +} + +.scale-telekom-nav-list[variant='main-nav'] > .scale-telekom-nav-item button, +.scale-telekom-nav-list[variant='main-nav'] > .scale-telekom-nav-item a { + padding-inline-start: var(--telekom-spacing-composition-space-06); +} +.scale-telekom-nav-list[variant='main-nav'] > .scale-telekom-nav-item button, +.scale-telekom-nav-list[variant='main-nav'] > .scale-telekom-nav-item a { + padding-inline-end: calc( + var(--_spacing-x-slotted) - var(--telekom-spacing-composition-space-06) + ); } -.scale-telekom-nav-list[alignment='center'] > * { - margin-inline: calc(0.5 * var(--_spacing-x-slotted)); + +.scale-telekom-nav-list[variant='main-nav'] + > .scale-telekom-nav-item + button::after, +.scale-telekom-nav-list[variant='main-nav'] > .scale-telekom-nav-item a::after { + margin-inline-start: var(--telekom-spacing-composition-space-06); + width: calc(100% - var(--_spacing-x-slotted)); +} + +.scale-telekom-nav-list[alignment='right']:not([variant='main-nav']) + > *:not(:first-child) { + margin-inline-start: var(--_spacing-x-slotted); } .scale-telekom-nav-list[slot='mobile-meta-nav'],