fix: focus outline on header bottom-bar (#2205)

telekom · Dec 22, 2023 · 949c2d7 · 949c2d7
1 parent 84cc37b
commit 949c2d7
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 8 deletions.
diff --git 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/...s/components/src/components/telekom/telekom-mobile-menu-item/telekom-mobile-menu-item.css b/...s/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
@@ -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
@@ -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
@@ -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'],
-Original file line number
+Diff line change
@@ Expand Up / @@ -132,7 +132,6 @@ export class TelekomNavItem { @@
           this.show();
         }
       };
       handleTriggerClick = (event: MouseEvent) => {
         if (event.ctrlKey) {
           return;
@@ Expand Down @@