@utrecht/web-component-library-stencil/dist/collection/components/sidenav.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
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/* stylelint-disable-next-line block-no-empty */
.utrecht-sidenav {
  --utrecht-sidenav-connection-color: var(--utrecht-sidenav-item-marker-color);
  --utrecht-sidenav-connection-inline-size: 2px;
  --utrecht-sidenav-marker-current-color: var(--utrecht-sidenav-link-hover-color);
  --utrecht-sidenav-marker-offset: 26px;
  --utrecht-sidenav-connection-block-size: 100%;
  --utrecht-sidenav-marker-height: 8px;
  --utrecht-sidenav-marker-outline-width: 2px;
  border-block-end: 1px solid var(--utrecht-color-grey-80);
  border-block-start: 1px solid var(--utrecht-color-grey-80);
  inline-size: 19rem;
  margin-block-end: 0;
  margin-block-start: 0;
  padding-block-end: 0;
  padding-block-start: 0;
}

.utrecht-sidenav__list {
  margin-block-end: 0;
  margin-block-start: 0.2rem;
  padding-block-end: 0;
  padding-block-start: 0;
  padding-inline-start: 0;
}

.utrecht-sidenav__list--child {
  margin-block-start: 0;
  padding-inline-end: 0;
  padding-inline-start: 1.4rem;
}

.utrecht-sidenav__item {
  list-style: none;
  margin-inline-start: 0;
  position: relative;
}

.utrecht-sidenav__item--current {
  color: var(--utrecht-sidenav-item-hover-color, var(--utrecht-link-hover-color, red));
}

.utrecht-sidenav__item--last {
  border-block-end: none;
}

/* draw the li item box bottom line */
.utrecht-sidenav__item-separator:not(.utrecht-sidenav__item--last .utrecht-sidenav__item-separator) {
  /* .utrecht-sidenav__item--parent span */
  border-block-end: 1px solid var(--utrecht-color-grey-80);
  display: block;
  margin-inline-start: var(--utrecht-space-inline-lg);
}

.utrecht-sidenav__link {
  color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
  display: block;
  margin-inline-start: 0;
  padding-block-end: var(--utrecht-space-block-xs);
  padding-block-start: var(--utrecht-space-block-xs);
  padding-inline-end: var(--utrecht-space-inline-3xs);
  padding-inline-start: var(--utrecht-space-inline-lg);
  text-decoration: none;
}

.utrecht-sidenav__link:hover {
  color: var(--utrecht-sidenav-link-hover-color, var(--utrecht-link-hover-color, red));
  text-decoration: underline;
}

.utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link:focus-visible {
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
   *   can combine it with the focus ring box shadow.
   */
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
}

/* Remove bottom padding form first item in list with children */
.utrecht-sidenav__link--parent {
  padding-block-end: 0;
}

/* Draw metro connection lines on sidenav link items */
.utrecht-sidenav__connection, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:not(.utrecht-sidenav__link--sibling,
.utrecht-sidenav__link--parent,
.utrecht-sidenav__link--child)::after {
  background: var(--utrecht-sidenav-connection-color);
  block-size: calc(var(--utrecht-sidenav-connection-block-size) - var(--utrecht-sidenav-marker-height) - 2 * var(--utrecht-sidenav-marker-outline-width));
  content: "";
  display: block;
  inline-size: var(--utrecht-sidenav-connection-inline-size);
  inset-block-end: 0;
  inset-block-start: calc(var(--utrecht-sidenav-marker-offset));
  inset-inline-start: 3px;
  overflow: hidden;
  position: absolute;
  z-index: 5;
}

.utrecht-sidenav__connection--last,
.utrecht-sidenav__connection--parent,
.utrecht-sidenav__connection--sibling {
  display: none;
}

/* Dot for link with siblings */
/* Little fix to move the dot to the right */
.utrecht-sidenav__marker, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before {
  background-color: var(--utrecht-sidenav-item-marker-color);
  block-size: var(--utrecht-sidenav-marker-height);
  border-radius: 100%;
  content: "";
  inline-size: 8px;
  inset-block-start: 20px; /* Hard value? */
  inset-inline-start: var(--utrecht-sidenav-marker-offset);
  overflow: hidden;
  position: absolute;
  transform: translateY(-50%) translateX(calc(-1 * var(--utrecht-sidenav-marker-offset)));
  z-index: 10;
}

/* Add dot bullets on child links */
.utrecht-sidenav__marker--child, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::before {
  background-color: transparent;
  block-size: 4px;
  border: 2px solid var(--utrecht-sidenav-link-color);
  inline-size: 4px;
  inset-block-start: 16px;
  inset-inline-start: 1.2rem;
  transform: translateY(-50%) translateX(-19.5px);
}

/* selector must override .utrecht-sidenav__marker--child */
.utrecht-sidenav__marker--current, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current::before,
.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current-child::before {
  background-color: var(--utrecht-sidenav-marker-current-color);
}

.utrecht-sidenav__link--child,
.utrecht-sidenav__link--current-child {
  color: var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));
  margin-block-end: 0;
  margin-block-start: 0;
  padding-block-end: var(--utrecht-space-block-2xs);
  padding-block-start: var(--utrecht-space-block-2xs);
  padding-inline-end: var(--utrecht-space-inline-3xs);
  padding-inline-start: var(--utrecht-space-inline-lg);
  text-decoration: none;
}

.utrecht-sidenav__link--current,
.utrecht-sidenav__link--current-child {
  font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
}

/* Hover layout for mousover on sidenav__link */
.utrecht-sidenav__marker--hover, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover::before, .utrecht-sidenav__link:hover .utrecht-sidenav__marker, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__link::before {
  background-color: var(--utrecht-sidenav-link-hover-color);
}

/* Hover layout for mousover on child__link */
.utrecht-sidenav__marker--child.utrecht-sidenav__marker--hover, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--child.utrecht-sidenav__link:hover::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--hover.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child.utrecht-sidenav__link:hover::before, .utrecht-sidenav__link:hover .utrecht-sidenav__marker--child.utrecht-sidenav__marker, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__marker.utrecht-sidenav__link--child::before, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--child.utrecht-sidenav__link::before, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__marker--child.utrecht-sidenav__link::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__link.utrecht-sidenav__link--child::before {
  background-color: var(--utrecht-sidenav-link-hover-color);
  border: 2px solid var(--utrecht-sidenav-link-hover-color);
}

.utrecht-sidenav--pseudo-elements {
  /* stylelint-disable selector-pseudo-class-parentheses-space-inside */
  /* stylelint-enable selector-pseudo-class-parentheses-space-inside */
}
.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::after {
  display: none;
}