@utrecht/components/data-list/dist/index.css

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

/**
 * @license EUPL-1.2
 * Copyright (c) 2021-2022 Gemeente Utrecht
 * Copyright (c) 2021-2022 Frameless B.V.
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2021-2022 Gemeente Utrecht
 * Copyright (c) 2021-2022 Frameless B.V.
 */
/* `@mixin utrecht-data-list--html-dl` is not necessary.
 * Default styles include only `display` and `margin`, and those properties are configured by default.
 */
/* `@mixin utrecht-data-list__item-key--html-dt` is not necessary, `<dt>` has no default styles. */
/* stylelint-disable-next-line block-no-empty */
/* stylelint-disable-next-line block-no-empty */
.utrecht-data-list {
  /* also set `margin-block` to reset browser styling of <dl> */
  display: block;
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-data-list-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-data-list-margin-block-start, 0));
}

.utrecht-data-list__item-key {
  color: var(--utrecht-data-list-item-key-color);
  font-size: var(--utrecht-data-list-item-key-font-size);
  font-weight: var(--utrecht-data-list-item-key-font-weight);
  line-height: var(--utrecht-data-list-item-key-line-height);
}

.utrecht-data-list__item-value {
  /* configure `min-block-size` in case the value is empty */
  color: var(--utrecht-data-list-item-value-color);
  font-size: var(--utrecht-data-list-item-value-font-size);
  font-weight: var(--utrecht-data-list-item-value-font-weight);
  line-height: var(--utrecht-data-list-item-value-line-height);
  min-block-size: calc(var(--utrecht-data-list-item-value-line-height) * 1rem);
}

.utrecht-data-list__actions--html-dd {
  /* reset browser styling of <dd> */
  margin-inline-start: 0;
}

.utrecht-data-list__item-value--html-dd {
  /* reset browser styling of <dd> */
  margin-inline-start: 0;
}

.utrecht-data-list__item-value--multiline {
  white-space: pre-line;
}

.utrecht-data-list--rows .utrecht-data-list__actions {
  align-items: baseline;
  display: flex;
  grid-column: -1;
  grid-row: 1;
  justify-content: flex-end;
}
.utrecht-data-list--rows .utrecht-data-list__item {
  --_utrecht-minmax: max(
    var(--utrecht-data-list-rows-column-min-inline-size, 25ch),
    var(--utrecht-data-list-rows-column-inline-size, 80%)
  );
  --_utrecht-auto-col: minmax(var(--_utrecht-minmax), max-content);
  border-block-end-color: var(--utrecht-data-list-rows-border-bottom-color, transparent);
  border-block-end-style: solid;
  border-block-end-width: var(--utrecht-data-list-rows-border-bottom-width, 0);
  column-gap: var(--utrecht-data-list-rows-gap);
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-columns: repeat(auto-fit, var(--_utrecht-auto-col));
  margin-block-start: var(--utrecht-data-list-rows-item-margin-block-start);
  padding-block-end: var(--utrecht-data-list-rows-item-padding-block-end);
  padding-block-start: var(--utrecht-data-list-rows-item-padding-block-start);
  row-gap: 0;
}
.utrecht-data-list--rows .utrecht-data-list__item:first-of-type {
  margin-block-start: 0;
}
.utrecht-data-list--rows .utrecht-data-list__item-value {
  margin-block-start: var(--utrecht-data-list-rows-item-value-margin-block-start);
}