@utrecht/components/breadcrumb-nav/dist/index.css

Components for the Municipality of Utrecht based on the NL Design System architecture

/**
 * @license EUPL-1.2
 * Copyright (c) 2021 Robbert Broersma
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2021 Robbert Broersma
 */
/* stylelint-disable-next-line block-no-empty */
.utrecht-breadcrumb-nav {
  --utrecht-focus-background-color: var(--utrecht-breadcrumb-nav-link-focus-background-color);
  --utrecht-link-background-color: var(--utrecht-breadcrumb-nav-link-background-color);
  --utrecht-link-text-decoration: var(--utrecht-breadcrumb-nav-link-text-decoration);
  --utrecht-link-active-color: var(
    --utrecht-breadcrumb-nav-link-active-color,
    var(--utrecht-breadcrumb-nav-link-color)
  );
  --utrecht-link-active-text-decoration: var(
    --utrecht-breadcrumb-nav-link-focus-text-decoration,
    var(--utrecht-breadcrumb-nav-link-text-decoration)
  );
  --utrecht-link-focus-color: var(--utrecht-breadcrumb-nav-link-focus-color, var(--utrecht-breadcrumb-nav-link-color));
  --utrecht-link-focus-text-decoration: var(
    --utrecht-breadcrumb-nav-link-focus-text-decoration,
    var(--utrecht-breadcrumb-nav-link-text-decoration)
  );
  --utrecht-link-hover-color: var(--utrecht-breadcrumb-nav-link-hover-color, var(--utrecht-breadcrumb-nav-link-color));
  --utrecht-link-hover-text-decoration: var(
    --utrecht-breadcrumb-nav-link-hover-text-decoration,
    var(--utrecht-breadcrumb-nav-link-text-decoration)
  );
  --utrecht-link-visited-color: var(--utrecht-breadcrumb-nav-link-color);
  --utrecht-link-visited-text-decoration: var(--utrecht-link-text-decoration);
  --utrecht-link-color: var(--utrecht-breadcrumb-nav-link-color);
  --utrecht-link-placeholder-color: var(--utrecht-link-breadcrumb-link-disabled-color);
  font-family: var(--utrecht-document-font-family, inherit);
  font-size: var(--utrecht-breadcrumb-nav-font-size);
  line-height: var(--utrecht-breadcrumb-nav-line-height);
  text-transform: var(--utrecht-document-text-transform, inherit);
}

.utrecht-breadcrumb-nav__heading {
  display: none;
}

.utrecht-breadcrumb-nav__list {
  display: flex;
  flex-wrap: wrap;
  min-block-size: var(--utrecht-breadcrumb-nav-min-block-size);
}

.utrecht-breadcrumb-nav__list--html-ol {
  list-style: none;
  margin-block-end: 0;
  margin-block-start: 0;
  padding-inline-start: 0;
}

.utrecht-breadcrumb-nav__list--html-p {
  margin-block-end: 0;
  margin-block-start: 0;
}

.utrecht-breadcrumb-nav__item {
  block-size: 100%;
}

.utrecht-breadcrumb-nav__link {
  --utrecht-icon-size: var(--utrecht-breadcrumb-nav-link-icon-size);
  --utrecht-link-icon-size: var(--utrecht-breadcrumb-nav-link-icon-size);
  background-color: var(--utrecht-breadcrumb-nav-link-background-color);
  display: inline-block;
  padding-block-end: var(--utrecht-breadcrumb-nav-item-padding-block-end, 8px);
  padding-block-start: var(--utrecht-breadcrumb-nav-item-padding-block-start, 8px);
  padding-inline-end: var(--utrecht-breadcrumb-nav-item-padding-inline-end, 8px);
  padding-inline-start: var(--utrecht-breadcrumb-nav-item-padding-inline-start, 8px);
}

.utrecht-breadcrumb-nav__link--current {
  --utrecht-link-current-font-weight: var(--utrecht-breadcrumb-nav-link-current-font-weight, inherit);
  /* configure the `current` `cursor` only when the current state is applied */
  --_utrecht-breadcrumb-nav-link-current-cursor: var(--utrecht-action-inert-cursor, default);
  font-weight: var(--utrecht-breadcrumb-nav-link-current-font-weight, inherit);
}

.utrecht-breadcrumb-nav__link--disabled {
  --utrecht-link-placeholder-color: var(
    --utrecht-breadcrumb-nav-link-disabled-color,
    var(--utrecht-breadcrumb-nav-link-color)
  );
  /* configure the `disabled` `cursor` only when the current state is applied */
  --_utrecht-breadcrumb-nav-link-disabled-cursor: var(--utrecht-action-disabled-cursor, not-allowed);
  background-color: var(--utrecht-breadcrumb-nav-link-disabled-background-color, var(--utrecht-breadcrumb-nav-link-background-color));
  /* Use the `current` cursor when available, otherwise use the `disabled` cursor */
  cursor: var(--_utrecht-breadcrumb-nav-link-current-cursor, var(--_utrecht-breadcrumb-nav-link-disabled-cursor));
}

/* stylelint-disable-next-line block-no-empty */
.utrecht-breadcrumb-nav__separator {
  /*
   * Overwrite `style` attribute using "private" CSS variable for <li> hack:
   * <li aria-hidden="true" hidden style="display: var(--_utrecht-breadcrumb-nav-separator-display, block)">
   */
  --_utrecht-breadcrumb-nav-separator-display: inline-flex;
  --utrecht-icon-size: var(--utrecht-breadcrumb-nav-separator-icon-size);
  align-items: center;
  color: var(--utrecht-breadcrumb-nav-separator-color);
  cursor: var(--utrecht-action-inert-cursor, default);
  display: var(--_utrecht-breadcrumb-nav-separator-display);
  inline-size: fit-content;
  -webkit-user-select: none;
  user-select: none;
}

.utrecht-breadcrumb-nav__separator--html-li {
  /*
   * Overwrite `style` attribute using "private" CSS variable for <li> hack:
   * <li aria-hidden="true" hidden style="display: var(--_utrecht-breadcrumb-nav-separator-display, block)">
   */
  --_utrecht-breadcrumb-nav-separator-display: inline-flex;
  --utrecht-icon-size: var(--utrecht-breadcrumb-nav-separator-icon-size);
  align-items: center;
  color: var(--utrecht-breadcrumb-nav-separator-color);
  cursor: var(--utrecht-action-inert-cursor, default);
  display: var(--_utrecht-breadcrumb-nav-separator-display);
  inline-size: fit-content;
  -webkit-user-select: none;
  user-select: none;
}

.utrecht-breadcrumb-nav--arrows {
  /* https://css-tricks.com/triangle-breadcrumbs/ */
  --utrecht-breadcrumb-nav-arrow-size: 24px;
  min-block-size: var(--utrecht-breadcrumb-nav-min-block-size);
  overflow: hidden;
}
.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link {
  background-color: var(--utrecht-breadcrumb-nav-arrows-link-background-color);
  padding-inline-end: 0;
  position: relative;
}
.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link::after,
.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link::before {
  block-size: 0;
  border-block-end-width: var(--utrecht-breadcrumb-nav-min-block-size);
  border-block-start-width: var(--utrecht-breadcrumb-nav-min-block-size);
  border-color: transparent;
  border-style: solid;
  content: " ";
  display: block;
  inline-size: 0;
  inset-block-start: 50%;
  inset-inline-start: 100%;
  margin-block-start: calc(-1 * var(--utrecht-breadcrumb-nav-min-block-size));
  position: absolute;
}
.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link::after {
  border-inline-start-color: var(--utrecht-breadcrumb-nav-arrows-link-background-color);
  border-inline-start-width: var(--utrecht-breadcrumb-nav-arrow-size);
  z-index: 2;
}
.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link::before {
  border-inline-start-color: var(--utrecht-document-background-color);
  border-inline-start-width: var(--utrecht-breadcrumb-nav-arrow-size);
  margin-block-start: calc(-1 * var(--utrecht-breadcrumb-nav-min-block-size));
  margin-inline-start: 1px;
  z-index: 1;
}
.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link--focus,
.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link:focus {
  --utrecht-link-focus-background-color: var(--utrecht-breadcrumb-nav-arrows-link-focus-background-color);
  background-color: var(--utrecht-breadcrumb-nav-arrows-link-focus-background-color);
}
.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link--focus::after,
.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link:focus::after {
  border-inline-start-color: var(--utrecht-breadcrumb-nav-arrows-link-focus-background-color);
}
.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link ~ .utrecht-breadcrumb-nav__link,
.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__item ~ .utrecht-breadcrumb-nav__item .utrecht-breadcrumb-nav__link {
  padding-inline-start: calc(var(--utrecht-breadcrumb-nav-item-padding-inline-start) + var(--utrecht-breadcrumb-nav-arrow-size));
}

.utrecht-breadcrumb-nav__item ~ .utrecht-breadcrumb-nav__item {
  margin-inline-start: var(--utrecht-breadcrumb-nav-item-divider-inline-size);
}