@utrecht/components/listbox/dist/index.css

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

/**
 * @license EUPL-1.2
 * Copyright (c) 2023 Frameless B.V.
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2023 Frameless B.V.
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2021 Gemeente Utrecht
 * Copyright (c) 2021 Robbert Broersma
 */
/* stylelint-disable-next-line block-no-empty */
/* order is after default option styling */
.utrecht-listbox {
  --utrecht-listbox-max-block-size: 300px;
  background-color: var(--utrecht-listbox-background-color);
  border-color: var(--utrecht-listbox-border-color);
  border-radius: var(--utrecht-listbox-border-radius);
  border-style: solid;
  border-width: var(--utrecht-listbox-border-width);
  box-sizing: border-box;
  cursor: default;
  display: flex;
  flex-direction: column;
  font-weight: var(--utrecht-listbox-font-weight, var(--utrecht-form-control-font-weight, initial));
  inline-size: var(--utrecht-listbox-inline-size, var(--utrecht-form-control-max-inline-size));
  max-block-size: var(--utrecht-listbox-max-block-size);
  min-block-size: 1em;
  overflow-block: auto;
  overflow-y: auto;
  padding-block-end: var(--utrecht-listbox-padding-block-end);
  padding-block-start: var(--utrecht-listbox-padding-block-start);
  padding-inline-end: var(--utrecht-listbox-padding-inline-end);
  padding-inline-start: var(--utrecht-listbox-padding-inline-start);
  -webkit-user-select: none;
  user-select: none;
}
@media (forced-colors: active) {
  .utrecht-listbox {
    /* Use inversed disabled colors for selected options */
    --utrecht-listbox-option-selected-background-color: Highlight;
    --utrecht-listbox-option-selected-color: HighlightText;
    --utrecht-listbox-option-disabled-background-color: field;
    --utrecht-listbox-option-disabled-color: GrayText;
    background-color: field;
    color: fieldtext;
  }
}

.utrecht-listbox--focus {
  /* TODO: Implement CSS of focus listbox */
}

.utrecht-listbox--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);
}

.utrecht-listbox--invalid {
  /* TODO: Implement CSS of invalid listbox */
}

.utrecht-listbox--read-only {
  /* TODO: Implement CSS of read-only listbox */
}

.utrecht-listbox__list {
  margin-block-end: 0;
  margin-block-start: 0;
  margin-inline-end: 0;
  margin-inline-start: 0;
  padding-inline-start: 0;
}

.utrecht-listbox__group {
  margin-block-end: 0;
  margin-block-start: 0;
  margin-inline-end: 0;
  margin-inline-start: 0;
  padding-inline-start: 0;
  margin-block-end: var(--utrecht-listbox-option-group-margin-block-end);
}

.utrecht-listbox__group-label {
  color: var(--utrecht-listbox-option-group-label-color);
  font-size: var(--utrecht-listbox-option-group-label-font-size);
  font-weight: var(--utrecht-listbox-option-group-label-font-weight);
  line-height: var(--utrecht-listbox-option-group-label-line-height);
  margin-inline-start: var(--utrecht-listbox-option-group-label-margin-inline-start);
}
@media (forced-colors: active) {
  .utrecht-listbox__group-label {
    background-color: field;
    color: fieldtext;
  }
}

.utrecht-listbox__option {
  list-style: none;
  --utrecht-icon-size: var(--utrecht-listbox-option-icon-size, 16px);
  align-items: center;
  background-color: var(--utrecht-listbox-option-background-color);
  box-sizing: border-box;
  color: var(--utrecht-listbox-option-color);
  display: flex;
  min-block-size: var(--utrecht-listbox-option-min-block-size, var(--utrecht-pointer-target-min-size, 24px));
  padding-block-end: var(--utrecht-listbox-option-padding-block-end);
  padding-block-start: var(--utrecht-listbox-option-padding-block-start);
  padding-inline-end: var(--utrecht-listbox-option-padding-inline-end);
  padding-inline-start: var(--utrecht-listbox-option-padding-inline-start);
}
@media (forced-colors: active) {
  .utrecht-listbox__option {
    /* Fix rendering glitch in Google Chrome, where the text became black on a black background */
    forced-color-adjust: none;
  }
}

.utrecht-listbox__option--disabled {
  background-color: var(--utrecht-listbox-option-disabled-background-color);
  color: var(--utrecht-listbox-option-disabled-color);
}

.utrecht-listbox__option--hover {
  background-color: var(--utrecht-listbox-option-hover-background-color, var(--utrecht-listbox-option-color));
  color: var(--utrecht-listbox-option-hover-color, var(--utrecht-listbox-option-color));
}

.utrecht-listbox__option--focus {
  background-color: var(--utrecht-listbox-option-focus-background-color, var(--utrecht-listbox-option-color));
  color: var(--utrecht-listbox-option-focus-color, var(--utrecht-listbox-option-color));
}

.utrecht-listbox__option--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);
  /* ensure the focus outline is rendered inside the `overflow` container */
  --utrecht-focus-outline-offset: calc(var(--utrecht-focus-outline-width) * -1);
}

.utrecht-listbox__option--active {
  background-color: var(--utrecht-listbox-option-is-active-background-color);
  color: var(--utrecht-listbox-option-is-active-color);
  font-weight: var(--utrecht-listbox-option-is-active-font-weight);
}

.utrecht-listbox__option--selected {
  background-color: var(--utrecht-listbox-option-selected-background-color);
  color: var(--utrecht-listbox-option-selected-color);
}

.utrecht-listbox__option--html-li {
  list-style: none;
}
.utrecht-listbox__option--html-li:hover {
  background-color: var(--utrecht-listbox-option-hover-background-color, var(--utrecht-listbox-option-color));
  color: var(--utrecht-listbox-option-hover-color, var(--utrecht-listbox-option-color));
}
.utrecht-listbox__option--html-li:focus {
  background-color: var(--utrecht-listbox-option-focus-background-color, var(--utrecht-listbox-option-color));
  color: var(--utrecht-listbox-option-focus-color, var(--utrecht-listbox-option-color));
}

.utrecht-listbox--disabled {
  /* TODO: Implement CSS of disabled listbox */
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
}
@media (forced-colors: active) {
  .utrecht-listbox--disabled {
    /* Use inversed disabled colors for selected options */
    --utrecht-listbox-option-selected-background-color: GrayText;
    --utrecht-listbox-option-selected-color: field;
    --utrecht-listbox-option-background-color: field;
    --utrecht-listbox-option-color: GrayText;
    --utrecht-listbox-background-color: field;
    --utrecht-listbox-color: GrayText;
  }
}

.utrecht-listbox--html-div:focus {
  /* TODO: Implement CSS of focus listbox */
}
.utrecht-listbox--html-div: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);
}