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

/*
  TODO
  - [ ] do something about that hard-coded 20px
*/

:host {
  box-sizing: content-box;
  position: fixed;
  /* z-index over 99 to flow over app-header
  TODO: (a solid system for z-index values would be nicer) */
  z-index: 100;
  pointer-events: none;
}

.menu-flyout-list {
  display: none;
  position: absolute;
  pointer-events: initial;
  z-index: var(--scl-z-index-20);
  background: var(--telekom-color-background-surface);
  border-radius: var(--telekom-radius-standard);
  box-shadow: var(--telekom-shadow-overlay);
  overflow-y: hidden;
  margin-top: var(--spacing-y-list, 0);
  margin-bottom: var(--spacing-y-list, 0);
  margin-left: var(--spacing-x-list, 0);
  margin-right: var(--spacing-x-list, 0);
}

/* a11y: HCM */
.menu-flyout-list::after {
  content: '';
  display: block;
  position: absolute;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  inset: 0;
  border-radius: var(--telekom-radius-standard);
  border: 1px solid transparent;
  pointer-events: none;
}

.menu-flyout-list--opened {
  display: flex;
}

.menu-flyout-list__list {
  padding: 20px 0;
  overflow-y: auto;
  overflow-y: overlay;
  overscroll-behavior: contain;
  width: 100%;
}

.menu-flyout-list--flip-horizontal.menu-flyout-list--direction-bottom-left,
.menu-flyout-list--flip-vertical.menu-flyout-list--direction-top-right,
.menu-flyout-list--flip-horizontal.menu-flyout-list--flip-vertical.menu-flyout-list--direction-top-left,
.menu-flyout-list--direction-bottom-right {
  top: calc(100% + var(--telekom-spacing-composition-space-03));
  left: 0;
  right: auto;
  bottom: auto;
}

.menu-flyout-list--flip-horizontal.menu-flyout-list--direction-bottom-right,
.menu-flyout-list--flip-vertical.menu-flyout-list--direction-top-left,
.menu-flyout-list--flip-horizontal.menu-flyout-list--flip-vertical.menu-flyout-list--direction-top-right,
.menu-flyout-list--direction-bottom-left {
  top: calc(100% + var(--telekom-spacing-composition-space-03));
  right: 0;
  left: auto;
  bottom: auto;
}

.menu-flyout-list--flip-horizontal.menu-flyout-list--direction-top-left,
.menu-flyout-list--flip-vertical.menu-flyout-list--direction-bottom-right,
.menu-flyout-list--flip-horizontal.menu-flyout-list--flip-vertical.menu-flyout-list--direction-bottom-left,
.menu-flyout-list--direction-top-right {
  bottom: calc(100% + var(--telekom-spacing-composition-space-03));
  left: 0;
  right: auto;
  top: auto;
}

.menu-flyout-list--flip-horizontal.menu-flyout-list--direction-top-right,
.menu-flyout-list--flip-vertical.menu-flyout-list--direction-bottom-left,
.menu-flyout-list--flip-horizontal.menu-flyout-list--flip-vertical.menu-flyout-list--direction-bottom-right,
.menu-flyout-list--direction-top-left {
  bottom: calc(100% + var(--telekom-spacing-composition-space-03));
  right: 0;
  left: auto;
  top: auto;
}

.menu-flyout-list--flip-horizontal.menu-flyout-list--direction-left,
.menu-flyout-list--direction-right {
  left: calc(100% - var(--telekom-spacing-composition-space-03));
  top: -20px;
  right: auto;
  bottom: auto;
}

.menu-flyout-list--flip-horizontal.menu-flyout-list--direction-right,
.menu-flyout-list--direction-left {
  right: calc(100% - var(--telekom-spacing-composition-space-03));
  top: -20px;
  left: auto;
  bottom: auto;
}

.menu-flyout-list__scroll-up-indicator,
.menu-flyout-list__scroll-down-indicator {
  position: absolute;
  width: 0;
  border: 5px solid transparent;
  pointer-events: none;
  opacity: 0;
  left: 50%;
}
.menu-flyout-list__scroll-up-indicator {
  top: var(--telekom-spacing-composition-space-04);
  border-bottom: 5px solid var(--telekom-color-ui-faint);
  border-top: 0;
}
.menu-flyout-list__scroll-down-indicator {
  bottom: var(--telekom-spacing-composition-space-04);
  border-top: 5px solid var(--telekom-color-ui-faint);
  border-bottom: 0;
}

.menu-flyout-list--can-scroll-up .menu-flyout-list__scroll-up-indicator {
  opacity: 1;
}
.menu-flyout-list--can-scroll-down .menu-flyout-list__scroll-down-indicator {
  opacity: 1;
}

.menu-flyout-list--brand-header-dropdown ::slotted(scale-menu-flyout-item) {
  --_min-width-moz: 0;
  --_min-width: 0;
}