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

/**
 * @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 use spacing tokens where possible to replace hard-coded pixel values */

:host {
  --shadow: 0px 2px 9px rgba(0, 0, 0, 0.15);
  --background: var(--telekom-color-background-surface);
  --background-logo: var(--telekom-color-primary-standard);
  --transition-common-scrolled: height var(--telekom-motion-duration-immediate)
      var(--telekom-motion-easing-standard),
    width var(--telekom-motion-duration-immediate),
    margin var(--telekom-motion-duration-immediate);
  --font-size-app-name: var(--telekom-typography-font-size-body);
  --line-height-app-name: var(--telekom-typography-line-spacing-tight);
  --font-weight-app-name: var(--telekom-typography-font-weight-extra-bold);

  --_height: 60px;
  --_height-logo-svg: 36px;
  --_height-bottom-bar: 60px;
  --_height-top-bar: 0;

  --_display-bottom-app-name: none;
  --_display-top-app-name: none;
  --_display-main-nav: none;
  --_display-meta-nav: none;
  --_display-meta-nav-external: none;
  --_display-lang-switcher: none;

  /* value matches scale-grid — ideally we'd have this in a global var *sigh* */
  --_max-width-container: none;
  --_spacing-x-container: var(--telekom-spacing-composition-space-06);
  --_column-gap-container: var(--telekom-spacing-composition-space-10);
  --_grid-template-columns-container: auto;
  --_grid-column-body: auto;

  --_spacing-left-body: 0;
  --_spacing-right-top-app-name: var(--telekom-spacing-composition-space-10);
  --_spacing-right-bottom-app-name: var(--telekom-spacing-composition-space-10);
  --_left-logo: 0;

  --_justify-content-bottom-body: end;

  --_animation-name: toggle;

  /* TODO make sure we want to "expose" variables this way */
  --scl-telekom-header-height: var(--_height);
}

@media screen and (min-width: 640px) {
  :host {
    --_display-bottom-app-name: block;
    --_spacing-left-body: 74px;
  }
}

@media screen and (min-width: 1040px) {
  :host,
  :host([scrolled-back]) {
    --_height: 84px;
    --_height-logo-svg: 44px;
    --_height-top-bar: 30px;
    --_height-bottom-bar: 54px;

    --_display-main-nav: block;
    --_display-meta-nav: block;
    --_display-meta-nav-external: block;
    --_display-lang-switcher: block;
    --_display-top-app-name: block;
    --_display-bottom-app-name: none;

    --_grid-template-columns-container: repeat(16, minmax(0, 1fr));
    --_grid-column-body: 3 / span 14;
    --_spacing-left-body: 0;
    --_spacing-right-bottom-app-name: 52px;
    --_spacing-x-container: var(--telekom-spacing-composition-space-08);

    --_justify-content-bottom-body: space-between;

    --scl-telekom-header-height: var(--_height);
  }

  :host([type='slim']) {
    --_animation-name: none;
    --_spacing-right-bottom-app-name: var(
      --telekom-spacing-composition-space-07
    );
  }
  :host([type='slim'][scrolled]) {
    --_spacing-right-bottom-app-name: var(
      --telekom-spacing-composition-space-07
    );
  }
  :host([type='slim']),
  :host([scrolled]) {
    --_height: 72px;
    --_height-logo-svg: 40px;
    --_height-top-bar: 0;
    --_height-bottom-bar: 72px;

    --_display-meta-nav: none;
    --_display-meta-nav-external: none;
    --_display-lang-switcher: none;
    --_display-top-app-name: none;
    --_display-bottom-app-name: block;

    --_spacing-left-body: var(--telekom-spacing-composition-space-06);
    --scl-telekom-header-height: var(--_height);
  }
  :host([scrolled]) {
    --_spacing-left-body: 0;
  }
  :host([type='slim']),
  :host([scrolled][app-name]) {
    --_grid-column-body: 2 / span 15;
  }
}

@media screen and (min-width: 1296px) {
  :host,
  :host([scrolled-back]) {
    --_height: 96px;
    --_height-logo-svg: 48px;
    --_height-top-bar: 30px;
    --_height-bottom-bar: 66px;

    --scl-telekom-header-height: var(--_height);
  }

  :host([type='slim']) {
    --_height: 84px;
    --_height-logo-svg: 44px;
    --_height-top-bar: 0;
    --_height-bottom-bar: 84px;
    --_spacing-right-bottom-app-name: var(
      --telekom-spacing-composition-space-14
    );
    --_spacing-left-body: 4px;
  }
  :host([type='slim'][scrolled]) {
    --_height: 72px;
    --_height-logo-svg: 40px;
    --_height-top-bar: 0;
    --_height-bottom-bar: 72px;
    --_spacing-right-bottom-app-name: var(
      --telekom-spacing-composition-space-15
    );
    --_spacing-left-body: 0;
  }
}

@media screen and (min-width: 1680px) {
  :host,
  :host([scrolled-back]) {
    --_height: 120px;
    --_height-logo-svg: 60px;
    --_height-top-bar: 30px;
    --_height-bottom-bar: 90px;
    --_spacing-right-bottom-app-name: var(
      --telekom-spacing-composition-space-12
    );

    --_left-logo: var(--_spacing-x-container);

    --scl-telekom-header-height: var(--_height);
  }

  :host {
    --_max-width-container: var(--scl-grid-max-width, 1504px);
  }

  :host([type='slim']) {
    --_height: 96px;
    --_height-logo-svg: 48px;
    --_height-top-bar: 0;
    --_height-bottom-bar: 96px;

    --_display-meta-nav: none;
    --_display-meta-nav-external: none;
    --_display-lang-switcher: none;
    --_display-top-app-name: none;
    --_display-bottom-app-name: block;

    --_spacing-left-body: 24px;
    --_spacing-right-bottom-app-name: var(
      --telekom-spacing-composition-space-14
    );

    --scl-telekom-header-height: var(--_height);
    --scl-telekom-header-bottom-spacing: 36px;
  }

  :host([type='slim'][scrolled]) {
    --_height: 72px;
    --_height-logo-svg: 40px;
    --_height-top-bar: 0;
    --_height-bottom-bar: 72px;

    --_display-meta-nav: none;
    --_display-meta-nav-external: none;
    --_display-lang-switcher: none;
    --_display-top-app-name: none;
    --_display-bottom-app-name: block;

    --_spacing-right-bottom-app-name: var(
      --telekom-spacing-composition-space-12
    );

    --scl-telekom-header-height: var(--_height);
  }
}

:host([type='subtle']) {
  --shadow: none;
  --background: transparent;
}

/* TODO not sure if we're actually gonna need this */
/* ::slotted(*) {
  height: 100%;
  display: inline-flex;
} */

slot[name='logo'] {
  position: absolute;
  top: 0;
  left: var(--_left-logo);
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--_height);
  width: var(--_height);
  background: var(--background-logo);
  transition: var(--transition-common-scrolled);
}

[part~='meta-nav-external'] {
  display: var(--_display-meta-nav-external);
  flex: 1;
}
[part~='meta-nav-external'] {
  display: var(--_display-meta-nav);
  /* TODO inline margin */
}

[part~='lang-switcher'] {
  display: var(--_display-lang-switcher);
  /* TODO inline margin */
}

slot[name='main-nav'] {
  display: var(--_display-main-nav);
  flex: 1;
}

slot[name='functions'] {
  display: block;
  /* TODO inline margin */
}

[part~='base'] {
  height: var(--_height);
  width: 100%;
  transition: var(--transition-common-scrolled);
}

[part~='fixed-wrapper'] {
  position: fixed;
  z-index: 99;
  width: 100%;
  height: var(--_height);
  background-color: var(--background);
  box-shadow: var(--shadow);
  transition: var(--transition-common-scrolled);
}

[part~='container'] {
  box-sizing: content-box;
  display: grid;
  grid-template-columns: var(--_grid-template-columns-container);
  column-gap: var(--_column-gap-container);
  position: relative;
  max-width: var(--_max-width-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--_spacing-x-container);
  padding-right: var(--_spacing-x-container);
  transition: var(--transition-common-scrolled);
}

[part~='app-logo'] {
  height: var(--_height);
  width: var(--_height);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-common-scrolled);
}

/* TODO fix exportparts */
/* targeting `scale-logo` */
:host::part(logo-svg) {
  height: var(--_height-logo-svg);
  transition: var(--transition-common-scrolled);
  /* TODO align this better, find out why there are 4 extra px below svg */
  margin-top: 4px;
}
/* targeting `scale-logo` */
:host::part(logo) {
  height: calc(var(--_height) - 6px);
  width: calc(var(--_height) - 6px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-common-scrolled);
}

[part~='body'] {
  display: block;
  grid-column: var(--_grid-column-body);
  flex: 1; /* used to be width: 100% */
  margin-left: var(--_spacing-left-body);
  transition: var(--transition-common-scrolled);
}

[part~='top-bar'] {
  height: var(--_height-top-bar);
  display: flex;
  align-items: end;
  width: 100%;
  transition: var(--transition-common-scrolled);
}

[part~='top-app-name'] {
  display: var(--_display-top-app-name);
  margin-right: var(--_spacing-right-top-app-name);
}

[part~='top-body'] {
  display: inline-flex;
  flex: 1;
  transition: var(--transition-common-scrolled);
}

[part~='bottom-bar'] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: var(--transition-common-scrolled);
}

/*
  TODO show/hide animation is currently half-baked,
  it needs to handle the out transition,
  with more parts/classes (like in telekom-nav-flyout)
*/
[part~='bottom-app-name'] {
  display: var(--_display-bottom-app-name);
  margin-right: var(--_spacing-right-bottom-app-name);
  animation-duration: var(--telekom-motion-duration-animation);
  min-width: 108px;
}

@media screen and (min-width: 1040px) {
  :host([scrolled]) [part~='bottom-app-name'] {
    animation-name: var(--_animation-name);
    animation-timing-function: var(--telekom-motion-easing-enter);
  }

  :host([scrolled-back]) [part~=' bottom-app-name'] {
    animation-name: var(--_animation-name);
    animation-direction: reverse;
    animation-timing-function: var(--telekom-motion-easing-exit);
  }
}

[part~='bottom-body'],
[part~='main-nav'] {
  justify-content: var(--_justify-content-bottom-body);
  height: var(--_height-bottom-bar);
  display: inline-flex;
  flex: 1;
  transition: var(--transition-common-scrolled);
}

[part~='app-name-text'] {
  font-size: var(--font-size-app-name);
  font-weight: var(--font-weight-app-name);
  line-height: var(--line-height-app-name);
  color: var(--telekom-color-text-and-icon-primary-standard);
  letter-spacing: 0.02em;
  text-decoration: none;
}

@media screen and (min-width: 1040px) {
  :host {
    --font-size-app-name: var(--telekom-typography-font-size-small);
  }
}

[part~='app-name-text']:hover {
  color: var(--telekom-color-text-and-icon-primary-hovered);
}

[part~='app-name-text']:active {
  color: var(--telekom-color-text-and-icon-primary-pressed);
}

/* --- Keyframes --- */

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