@utrecht/web-component-library-stencil/dist/collection/components/nav-bar.css

Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture

/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
* @license EUPL-1.2
* Copyright (c) 2020-2024 Frameless B.V.
* Copyright (c) 2021-2024 Gemeente Utrecht
*/
:host {
  background-color: var(--utrecht-nav-bar-background-color);
  color: var(--utrecht-nav-bar-color);
  display: grid;
  inline-size: 100%;
}

div {
  align-items: stretch;
  background-color: var(--utrecht-nav-bar-content-background-color);
  color: var(--utrecht-nav-bar-content-color);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  inline-size: 100%;
  justify-content: space-between;
  justify-self: center;
  /* Wrap content to accomodate:
      * - 400% zoom
      * - longer text due to automatic translation
      * - longer text due to editorial content requirements
      */
  max-inline-size: var(--utrecht-nav-bar-content-max-inline-size);
}

:host([hidden]) {
  display: none !important;
}

:host([sticky]) {
  background-color: var(--utrecht-nav-bar-background-color, Canvas);
  color: var(--utrecht-nav-bar-color, CanvasText);
  inset-block-start: 0;
  position: sticky;
  z-index: var(--utrecht-nav-bar-sticky-z-index, 1);
}