@telekom/scale-components/dist/collection/components/telekom/telekom-mega-menu/telekom-mega-menu.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/.
 */

/*
  It's unfortunate we're not using our grid component
  but just copy/pasting the same code…
*/
/**
 * @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-telekom-mega-menu {
  --spacing-y: var(--telekom-spacing-composition-space-18);
  /* matches grid.css */
  --column-gap: var(--telekom-spacing-composition-space-10);
  --max-width-container: var(--scl-grid-max-width, 1504px);
  --spacing-x: var(--telekom-spacing-composition-space-08);
  --grid-template-columns: repeat(16, minmax(0, 1fr));

  display: block;
  padding-left: var(--spacing-x);
  padding-right: var(--spacing-x);
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-container);
}

.scale-telekom-mega-menu-container {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: var(--grid-template-columns);
  grid-column: auto;
  column-gap: var(--column-gap);
  padding-top: var(--spacing-y);
  padding-bottom: var(--spacing-y);
  font-size: var(--telekom-typography-font-size-body);
  line-height: var(--telekom-typography-line-spacing-standard);
}

.scale-telekom-mega-menu :where(ul, ol) {
  list-style: none;
  margin: 0;
  padding: 0;
}

.scale-telekom-mega-menu :where(a) {
  display: inline-block;
  color: var(--telekom-color-text-and-icon-standard);
  text-decoration: none;
}

.scale-telekom-mega-menu :where(ul a) {
  width: 100%;
}

.scale-telekom-mega-menu .scale-icon {
  width: 20px;
  height: 20px;
}

.scale-telekom-mega-menu :where(a):hover {
  color: var(--telekom-color-text-and-icon-primary-hovered);
}
.scale-telekom-mega-menu :where(a):active {
  color: var(--telekom-color-text-and-icon-primary-pressed);
}

.scale-telekom-mega-menu :where(a):focus-visible {
  outline: var(--telekom-line-weight-highlight) solid
    var(--telekom-color-functional-focus-standard);
  outline-offset: 1px;
  border-radius: var(--telekom-radius-small);
}

.scale-telekom-mega-menu :where(li + li) {
  margin-top: var(--telekom-spacing-composition-space-07);
}
@media screen and (min-width: 1040px) {
  .scale-telekom-mega-menu {
    --spacing-x: var(--telekom-spacing-composition-space-08);
  }
}