@telekom/scale-components

Version:
Scale is the digital design system for Telekom products and experiences.
110 lines (103 loc) • 3.24 kB
CSS
/**
 * @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/.
 */

scale-nav-main {
  --spacing-x: var(--telekom-typography-font-size-body);
  --color: var(--telekom-color-text-and-icon-standard);
  --color-hover: var(--telekom-color-text-and-icon-primary-hovered);
  --color-active: var(--telekom-color-text-and-icon-primary-hovered);
  --color-selected: var(--telekom-color-text-and-icon-primary-standard);
  --font-size: var(--telekom-typography-font-size-callout);
  --font-weight: var(--telekom-typography-font-weight-extra-bold);
  --line-height: var(--telekom-typography-line-spacing-tight);
  --focus-outline: var(--telekom-line-weight-highlight) solid
    var(--telekom-color-functional-focus-standard);
}

.main-navigation__item {
  height: 100%;
  margin-left: var(--spacing-x);
  margin-right: var(--spacing-x);
}
.main-navigation__item:has(a[href]) {
  cursor: pointer;
}
.main-navigation__item-link-text {
  white-space: nowrap;
}

.main-navigation__item.mega-menu--visible .mega-menu {
  display: block;
}
.main-navigation__item.mega-menu--visible .mega-menu__wrapper {
  pointer-events: visible;
}
.main-navigation__item .main-navigation__item-link {
  display: flex;
  height: 100%;
  color: var(--color);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  line-height: var(--line-height);
  transition: color, border 0.2s ease-in-out;
  align-items: center;
  text-decoration: none;
}
.main-navigation__item:hover .main-navigation__item-link {
  color: var(--color-hover);
}
.main-navigation__item:hover .main-navigation__item-link-text {
  border-bottom: 2px solid var(--color-hover);
  color: var(--color-hover);
  margin-bottom: -2px;
  height: calc(100% - 4px);
  display: flex;
  align-items: center;
}

.main-navigation__item-link:focus {
  outline: var(--focus-outline);
}

.main-navigation__item:active .main-navigation__item-link {
  color: var(--color-active);
}
.main-navigation__item:active .main-navigation__item-link-text {
  border-bottom: 2px solid var(--color-active);
  margin-bottom: -2px;
  height: calc(100% - 4px);
  display: flex;
  align-items: center;
}
.main-navigation__item.selected .main-navigation__item-link {
  color: var(--color-selected);
}

.main-navigation__item.selected:hover .main-navigation__item-link {
  color: var(--color-hover);
}
.main-navigation__item.selected .main-navigation__item-link-text {
  border-bottom: 2px solid var(--color-selected);
  margin-bottom: -2px;
  height: calc(100% - 4px);
  display: flex;
  align-items: center;
}
.main-navigation__item.selected:hover .main-navigation__item-link-text {
  color: var(--color-hover);
  border-bottom: 2px solid var(--color-hover);
}
.main-navigation__item.mega-menu--visible .main-navigation__item-link-text {
  border-bottom: 2px solid var(--color-hover);
  margin-bottom: -2px;
  height: calc(100% - 4px);
  display: flex;
  align-items: center;
}
.sr-only {
  position: absolute;
  left: -10000px;
  overflow: hidden;
}