@telekom/scale-components

Version:
Scale is the digital design system for Telekom products and experiences.
115 lines (104 loc) • 3.46 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/.
 */

app-mega-menu {
  --box-shadow: var(--telekom-shadow-top);
  --spacing-y: 2.125rem;
  --spacing-right: var(--telekom-spacing-composition-space-06);
  --spacing-left: var(--telekom-spacing-composition-space-08);
  --background: var(--telekom-color-background-surface);
  --color-selected: var(--telekom-color-text-and-icon-primary-standard);
  --color-hover: var(--telekom-color-text-and-icon-primary-hovered);
  --font-size-row-title: var(--telekom-typography-font-size-body);
  --spacing-bottom-row-title: 1.125rem;
  --font-weight-row-title: var(--telekom-typography-font-weight-extra-bold);
  --color-row-title: var(--telekom-color-text-and-icon-standard);
  --font-size-row-item: var(--telekom-typography-font-size-body);
  --line-height-row-item: var(--telekom-typography-line-spacing-loose);
  --font-weight-row-item: var(--telekom-typography-font-weight-medium);
  --color-row-item: var(--telekom-color-text-and-icon-standard);
  --spacing-bottom-row-item: var(--telekom-spacing-composition-space-04);
}
.mega-menu {
  width: 100%;
  position: absolute;
  top: calc(var(--header-brand-height) * -1);
  left: 0;
  border-radius: 0 0 var(--header-border-radius) var(--header-border-radius);
  padding-top: calc(var(--header-nav-height) + var(--header-brand-height));
  display: none;
  pointer-events: none;
  transition: none;
  box-shadow: var(--box-shadow);
}
.mega-menu__wrapper {
  padding: var(--spacing-y) var(--spacing-right) var(--spacing-y)
    var(--spacing-left);
  background: var(--background);
  pointer-events: none;
  border-radius: var(--header-border-radius);
}
.mega-menu__container {
  max-width: 1168px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(min-content, 240px));
  list-style: none;
  padding-left: var(--telekom-spacing-composition-space-10);
}

.mega-menu__row-title {
  cursor: default;
  font-size: var(--font-size-row-title);
  margin-bottom: var(--spacing-bottom-row-title);
  font-weight: var(--font-weight-row-title);
  color: var(--color-row-title);
}

.mega-menu__row-item {
  font-size: var(--font-size-row-item);
  line-height: var(--line-height-row-item);
  font-weight: var(--font-weight-row-item);
  color: var(--color-row-item);
  margin-bottom: var(--spacing-bottom-row-item);
  text-decoration: none;
  transition: color, border 0.15s ease-in-out;
  display: block;
  margin-bottom: 7px;
}

.mega-menu__row-item:hover,
.mega-menu__row-item:hover span {
  color: var(--color-hover);
}
.mega-menu__row-item.active span {
  padding-bottom: 2px;
  margin-bottom: -2px;
  display: inline-block;
  border-bottom: 1px solid var(--color-selected);
}

.mega-menu__row-item.active {
  color: var(--color-selected);
}

.mega-menu__row-item.active:hover {
  color: var(--color-hover);
}

.mega-menu__row-item.active:hover span {
  color: var(--color-hover);
  border-bottom: 1px solid var(--color-hover);
}

.mega-menu__row li {
  list-style: none;
}

.mega-menu__row ul {
  padding-inline-start: 0;
}

@media screen and (forced-colors: active), (-ms-high-contrast: active) {
  .mega-menu {
    border: 1px solid hsl(0, 0%, 100%);
  }
}