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

:host {
  --top: var(--scl-telekom-header-height, 0);
  --left: 0;
  --width: 100vw;
  --height: auto;
  --position: fixed;
  --background: var(--telekom-color-background-surface);
  --background-variant-mobile: var(--telekom-color-background-canvas);
  --background-backdrop: var(--telekom-color-background-canvas);
  --shadow: none;
  --z-index: 7;

  --duration: 0;
  --duration-backdrop-in: 0;
  --duration-backdrop-out: 0;
  --translate-x: 0;
  --translate-y: 0;
  --translate-z: 0;

  display: contents;
}

[part~='variant-mobile'] {
  --height: 100vh;
  --top: 0;
  --background: var(--background-variant-mobile);
}

:host([debug]) [part~='base'] {
  outline: 1px dotted gold;
}

[part~='base'] {
  display: none;
  position: var(--position);
  z-index: var(--z-index);
  top: var(--top);
  left: var(--left);
  width: var(--width);
  height: var(--height);
  min-height: 25vh;
  background: var(--background);
  box-shadow: var(--shadow);
  animation-duration: var(--duration);
  border-top: 1px solid var(--telekom-color-ui-faint);
}

[part~='base'][part~='expanded'] {
  display: block;
}

[part~='backdrop'] {
  display: none;
  position: var(--position);
  background-color: var(--telekom-color-background-backdrop);
  top: var(--top);
  left: var(--left);
  width: var(--width);
  height: 100vh;
  animation-duration: var(--duration);
}

/* no backdrop for "mobile" variant */
[part~='backdrop'][part~='expanded']:not([part~='variant-mobile']) {
  display: block;
}

[part~='backdrop'][part~='expanded'][part~='in'] {
  animation-duration: var(--duration-backdrop-in);
}

[part~='backdrop'][part~='expanded'][part~='out'] {
  animation-duration: var(--duration-backdrop-out);
}

@keyframes toggle {
  from {
    opacity: 0;
    transform: translate3d(
      var(--translate-x),
      var(--translate-y),
      var(--translate-z)
    );
  }
}

[part~='in'] {
  animation-name: toggle;
  animation-timing-function: var(--telekom-motion-easing-enter);
}

[part~='out'] {
  animation-name: toggle;
  animation-fill-mode: forwards;
  animation-direction: reverse;
  animation-timing-function: var(--telekom-motion-easing-exit);
}