@telekom/scale-components/dist/collection/components/telekom/telekom-nav-item/telekom-nav-item.css

Scale is the digital design system for Telekom products and experiences.

/**
 * @license
 * Scale https://github.com/telekom/scale
 *
 * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

/**
 * @license
 * Scale https://github.com/telekom/scale
 *
 * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */


/*
  Spacing is handled only vertically.
  Horizontal spacing is handled by `scale-nav-list`.
*/

/*
  TODO this is experimental (mostly the name)
  it should be put in global.css since it's already global haha
*/
@media screen and (max-width: 1039px) {
  .scl-hide-on-mobile {
    display: none;
  }
}
@media screen and (min-width: 1040px) {
  .scl-hide-on-desktop {
    display: none;
  }
}

.scale-telekom-nav-item {
  --_spacing-top-slotted-top: var(--telekom-spacing-composition-space-07);
  --_spacing-bottom-slotted-bottom: var(--telekom-spacing-composition-space-07);
  --_font-size-main-nav: var(--telekom-typography-font-size-body);
  --focus-outline: var(--telekom-line-weight-highlight) solid
    var(--telekom-color-functional-focus-standard);
  --color: var(--telekom-color-text-and-icon-standard);
  color: var(--color);
}

@media screen and (min-width: 640px) {
  .scale-telekom-nav-item {
    --_spacing-bottom-slotted-bottom: var(
      --telekom-spacing-composition-space-07
    );
  }
}
@media screen and (min-width: 1040px) {
  .scale-telekom-nav-item {
    --_spacing-top-slotted-top: var(--telekom-spacing-composition-space-05);
    --_spacing-bottom-slotted-bottom: var(
      --telekom-spacing-composition-space-06
    );
  }
  [scrolled] .scale-telekom-nav-item {
    --_spacing-bottom-slotted-bottom: var(
      --telekom-spacing-composition-space-08
    );
  }
  [type='slim'] .scale-telekom-nav-item,
  [type='slim'][scrolled] .scale-telekom-nav-item {
    --_spacing-bottom-slotted-bottom: var(
      --telekom-spacing-composition-space-08
    );
  }
}
@media screen and (min-width: 1296px) {
  .scale-telekom-nav-item {
    --_spacing-top-slotted-top: var(--telekom-spacing-composition-space-05);
    --_spacing-bottom-slotted-bottom: var(
      --telekom-spacing-composition-space-08
    );
  }
  [type='slim'] .scale-telekom-nav-item {
    --_spacing-bottom-slotted-bottom: calc(
      var(--telekom-spacing-composition-space-10) - 2px
    );
  }
}
@media screen and (min-width: 1680px) {
  .scale-telekom-nav-item {
    --_spacing-top-slotted-top: var(--telekom-spacing-composition-space-05);
    --_spacing-bottom-slotted-bottom: var(
      --telekom-spacing-composition-space-10
    );
    --_font-size-main-nav: var(--telekom-typography-font-size-callout);
  }
  [type='slim'] .scale-telekom-nav-item,
  [type='slim'][scrolled-back] .scale-telekom-nav-item {
    --_spacing-bottom-slotted-bottom: calc(
      var(--telekom-spacing-composition-space-11)
    );
  }
  [type='slim'][scrolled] .scale-telekom-nav-item {
    --_spacing-bottom-slotted-bottom: calc(
      var(--telekom-spacing-composition-space-08)
    );
  }
}

.scale-telekom-nav-item[debug] {
  border: 1px dotted cyan;
}

.scale-telekom-nav-item > :where(a, button) {
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  height: 100%;
  position: relative;
  font: inherit;
  color: inherit;
  background: none;
  appearance: none;
  padding: 0;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: padding-bottom var(--telekom-motion-duration-immediate)
    var(--telekom-motion-easing-standard);
}

.scale-telekom-nav-item > :where(a, button):hover,
.scale-telekom-nav-item > :where(button[aria-expanded='true']) {
  color: var(--telekom-color-text-and-icon-primary-hovered);
}
.scale-telekom-nav-item > :where(a, button):active {
  color: var(--telekom-color-text-and-icon-primary-pressed);
}

.scale-telekom-nav-item > :where(a, button):focus {
  outline: var(--focus-outline);
}

/* variants: main-nav, functions (bottom bar) */

.scale-telekom-nav-list[variant='main-nav']
  > .scale-telekom-nav-item
  > :where(a, button),
.scale-telekom-nav-list[variant='functions']
  > .scale-telekom-nav-item
  > :where(a, button),
.scale-telekom-nav-list[variant='main-nav']
  > scale-menu-flyout
  > .scale-telekom-nav-item
  > :where(a, button) {
  font-size: var(--_font-size-main-nav);
  line-height: var(--telekom-typography-line-spacing-loose);
  font-weight: var(--telekom-typography-font-weight-extra-bold);
  padding-bottom: var(--_spacing-bottom-slotted-bottom);
}

@media screen and (min-width: 1680px) {
  .scale-telekom-nav-list[variant='main-nav']
    > .scale-telekom-nav-item
    > :where(a, button),
  .scale-telekom-nav-list[variant='functions']
    > .scale-telekom-nav-item
    > :where(a, button) {
    line-height: var(--telekom-typography-line-spacing-extra-tight);
    /* Figma *shrug* */
    line-height: 1.2;
  }
}

.scale-telekom-nav-list[variant='main-nav']
  > .scale-telekom-nav-item[active]
  > :where(a, button),
.scale-telekom-nav-list[variant='main-nav']
  > scale-menu-flyout
  > .scale-telekom-nav-item[active]
  > :where(a, button),
.scale-telekom-nav-list[variant='main-nav']
  > .scale-telekom-nav-item[active]
  > :where(a, button) {
  color: var(--telekom-color-text-and-icon-primary-standard);
}

.scale-telekom-nav-list[variant='main-nav']
  > .scale-telekom-nav-item
  > :where(a, button):hover:after,
.scale-telekom-nav-list[variant='main-nav']
  > .scale-telekom-nav-item
  > :where(button[aria-expanded='true']):after,
.scale-telekom-nav-list[variant='functions']
  > .scale-telekom-nav-item
  > :where(a, button):hover:after,
.scale-telekom-nav-list[variant='functions']
  > .scale-telekom-nav-item
  > :where(button[aria-expanded='true']):after,
.scale-telekom-nav-list[variant='main-nav']
  > scale-menu-flyout
  > .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;
  position: absolute;
  bottom: 0;
  left: 0;
}

.scale-telekom-nav-list[variant='main-nav']
  > .scale-telekom-nav-item
  > :where(a, button):has(scale-badge[label]):hover:after,
.scale-telekom-nav-list[variant='main-nav']
  > .scale-telekom-nav-item
  > :where(button[aria-expanded='true']):has(scale-badge[label]):after,
.scale-telekom-nav-list[variant='functions']
  > .scale-telekom-nav-item
  > :where(a, button):has(scale-badge[label]):hover:after,
.scale-telekom-nav-list[variant='functions']
  > .scale-telekom-nav-item
  > :where(button[aria-expanded='true']):has(scale-badge[label]):after {
  width: 24px;
}

.scale-telekom-nav-list[variant='main-nav']
  > .scale-telekom-nav-item
  > :where(a, button):active:after,
.scale-telekom-nav-list[variant='main-nav']
  > .scale-telekom-nav-item
  > :where(button[aria-expanded='true']):after,
.scale-telekom-nav-list[variant='functions']
  > .scale-telekom-nav-item
  > :where(a, button):active:after,
.scale-telekom-nav-list[variant='functions']
  > .scale-telekom-nav-item
  > :where(button[aria-expanded='true']):after,
.scale-telekom-nav-list[variant='main-nav']
  > scale-menu-flyout
  > .scale-telekom-nav-item
  > :where(a, button):active:after {
  content: '';
  width: 100%;
  height: var(--telekom-spacing-composition-space-02);
  background: var(--telekom-color-text-and-icon-primary-pressed);
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
}

.scale-telekom-nav-list[variant='main-nav']
  > .scale-telekom-nav-item[active]
  > :where(a, button):after,
.scale-telekom-nav-list[variant='functions']
  > .scale-telekom-nav-item[active]
  > :where(a, button):after,
.scale-telekom-nav-list[variant='main-nav']
  > scale-menu-flyout
  > .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;
  position: absolute;
  bottom: 0;
  left: 0;
}

/* HCM active item */

@media screen and (forced-colors: active), (-ms-high-contrast: active) {
  .scale-telekom-nav-list[variant='main-nav']
    > .scale-telekom-nav-item[active]
    > :where(a, button),
  .scale-telekom-nav-list[variant='functions']
    > .scale-telekom-nav-item[active]
    > :where(a, button),
  .scale-telekom-nav-list[variant='main-nav']
    > scale-menu-flyout
    > .scale-telekom-nav-item[active]
    > :where(a, button) {
    border-bottom: 2px solid hsl(0, 0%, 100%);
  }
}

/* variants: meta-nav-external, meta-nav, lang-switcher (top bar) */

.scale-telekom-nav-list[variant='meta-nav-external']
  > .scale-telekom-nav-item
  > :where(a, button),
.scale-telekom-nav-list[variant='meta-nav']
  > .scale-telekom-nav-item
  > :where(a, button),
.scale-telekom-nav-list[variant='lang-switcher']
  > .scale-telekom-nav-item
  > :where(a, button) {
  font-size: var(--telekom-typography-font-size-small);
  line-height: var(--telekom-typography-line-spacing-tight);
  font-weight: var(--telekom-typography-font-weight-regular);
  padding-top: var(--_spacing-top-slotted-top);
}

/* take care of "external link" icon placement */

.scale-telekom-nav-list[variant='meta-nav-external']
  > .scale-telekom-nav-item
  > :where(a, button) {
  display: flex;
  align-items: center;
}
.scale-telekom-nav-list[variant='meta-nav-external']
  > .scale-telekom-nav-item
  > :where(a, button)
  > * {
  margin-inline-start: 0.5ch;
}

/* language switcher  */

.scale-telekom-nav-list[variant='lang-switcher'] > .scale-telekom-nav-item > a,
.scale-telekom-nav-list[variant='meta-nav-external']
  > .scale-telekom-nav-item
  > a {
  font-size: var(--telekom-typography-font-size-body);
}

.scale-telekom-nav-list[variant='lang-switcher']
  > .scale-telekom-nav-item
  > :where(a, button):where([aria-current='true']) {
  font-weight: var(--telekom-typography-font-weight-extra-bold);
}

.scale-telekom-nav-list[slot='mobile-meta-nav-external']
  > .scale-telekom-nav-item
  > a,
.scale-telekom-nav-list[slot='mobile-meta-nav'] > .scale-telekom-nav-item > a {
  font-size: var(--telekom-typography-font-size-body);
}

@media screen and (min-width: 1040px) {
  .scale-telekom-nav-list[variant='meta-nav'] {
    margin-right: var(--telekom-spacing-composition-space-10);
  }

  .scale-telekom-nav-list[variant='lang-switcher']
    > .scale-telekom-nav-item
    > a,
  .scale-telekom-nav-list[variant='meta-nav-external']
    > .scale-telekom-nav-item
    > a {
    font-size: var(--telekom-typography-font-size-small);
  }
}

.scale-telekom-nav-list[variant='functions'] .scale-icon {
  height: 20px;
  width: 20px;
}

@media screen and (min-width: 1680px) {
  .scale-telekom-nav-list[variant='functions'] .scale-icon {
    height: 24px;
    width: 24px;
  }
}

/* FIXME this is too leaky (in general) */
scale-telekom-mobile-flyout-canvas
  .scale-telekom-nav-list[variant='meta-nav-external']
  .scale-icon {
  height: 12px;
  width: 12px;
}

[slot='mobile-meta-nav'] .scale-telekom-nav-item,
[slot='mobile-meta-nav-external'] .scale-telekom-nav-item {
  --_font-size-main-nav: 16px;
  line-height: var(--telekom-typography-line-spacing-standard);
}

.scale-telekom-nav-list > scale-menu-flyout::part(trigger) {
  height: 100%;
}