@utrecht/components/table/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 */
/* stylelint-disable-next-line block-no-empty */
.utrecht-table-container--overflow-inline {
  background-attachment: local, local, scroll, scroll;
  background-image: linear-gradient(to right, white, white), linear-gradient(to right, white, white), linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
  overflow: auto;
}

.utrecht-table {
  /* `border-collapse: collapse` results in a broken border for sticky header and sticky footer.
   * Therefore we need to use `border-collapse: separate` instead.
   */
  border-collapse: separate;
  border-color: var(--utrecht-table-border-color, 0);
  border-spacing: 0;
  border-style: solid;
  border-width: var(--utrecht-table-border-width, 0);
  font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
  font-size: var(--utrecht-table-font-size, inherit);
  inline-size: 100%;
  line-height: var(--utrecht-table-line-height, inherit);
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-start, 0));
}

.utrecht-table--distanced {
  --utrecht-space-around: 1;
}

.utrecht-table--html-table > caption,
.utrecht-table__caption {
  break-inside: avoid;
  color: var(--utrecht-table-caption-color);
  font-family: var(--utrecht-table-caption-font-family);
  font-size: var(--utrecht-table-caption-font-size);
  font-weight: var(--utrecht-table-caption-font-weight);
  line-height: var(--utrecht-table-caption-line-height);
  margin-block-end: var(--utrecht-table-caption-margin-block-end);
  page-break-after: avoid;
  text-align: var(--utrecht-table-caption-text-align, center);
}

.utrecht-table--html-table > figcaption,
.utrecht-table__figcaption {
  break-inside: avoid;
  color: var(--utrecht-table-caption-color);
  font-family: var(--utrecht-table-caption-font-family);
  font-size: var(--utrecht-table-caption-font-size);
  font-weight: var(--utrecht-table-caption-font-weight);
  line-height: var(--utrecht-table-caption-line-height);
  margin-block-end: var(--utrecht-table-caption-margin-block-end);
  page-break-after: avoid;
  text-align: var(--utrecht-table-caption-text-align, center);
}

.utrecht-table--html-table > thead,
.utrecht-table__header {
  --_utrecht-table-header-cell-vertical-align: bottom;
  --_utrecht-table-header-cell-z-index: 8;
  background-color: var(--utrecht-table-header-background-color, transparent);
  break-inside: avoid;
  color: var(--utrecht-table-header-color);
  font-weight: var(--utrecht-table-header-font-weight);
  page-break-inside: avoid;
  text-transform: var(--utrecht-table-header-text-transform);
}

.utrecht-table__header--sticky th {
  background-color: var(--utrecht-table-header-sticky-background-color, transparent);
  color: var(--utrecht-table-header-sticky-color);
  inset-block-start: 0;
  position: sticky;
}
.utrecht-table__header--sticky tr:last-child > th {
  border-block-end-color: var(--utrecht-table-header-sticky-border-block-end-color, var(--utrecht-table-header-border-block-end-color, transparent));
  border-block-end-style: solid;
  border-block-end-width: var(--utrecht-table-header-sticky-border-block-end-width, var(--utrecht-table-header-border-block-end-width, 0));
}

.utrecht-table__footer {
  --_utrecht-table-header-cell-z-index: 5;
  z-index: 3;
}

.utrecht-table__footer--sticky {
  background-color: var(--utrecht-table-footer-sticky-background-color, var(--utrecht-table-footer-background-color, transparent));
  color: var(--utrecht-table-footer-sticky-color, var(--utrecht-table-footer-color));
  inset-block-end: 0;
  position: sticky;
}
.utrecht-table__footer--sticky tr:first-child > th,
.utrecht-table__footer--sticky tr:first-child > td {
  border-block-start-color: var(--utrecht-table-header-sticky-border-block-start-color, var(--utrecht-table-header-border-block-start-color, transparent));
  border-block-start-style: solid;
  border-block-start-width: var(--utrecht-table-header-sticky-border-block-start-width, var(--utrecht-table-header-border-block-start-width, 0));
}

.utrecht-table--html-table > tbody,
.utrecht-table__body {
  --_utrecht-table-header-cell-z-index: 2;
}

.utrecht-table--fixed {
  inline-size: fit-content;
  table-layout: fixed;
}

.utrecht-table--fixed th,
.utrecht-table--oneline th,
.utrecht-table--oneline td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* `.utrecht-table--html-table` should not affect nested tables.
 * We will use the `>` direct descendant selector so the styling doesn't affect nested tables. */
/* stylelint-disable no-descending-specificity */
.utrecht-table--html-table > tr,
.utrecht-table--html-table > thead > tr,
.utrecht-table--html-table > tbody > tr,
.utrecht-table--html-table > tfoot > tr,
.utrecht-table__row {
  break-inside: avoid;
  page-break-inside: avoid;
}

.utrecht-table__row--selected {
  background-color: var(--utrecht-table-cell-selected-background-color, highlight);
  color: var(--utrecht-table-cell-selected-color, highlightText);
}

.utrecht-table--html-table > tr > th,
.utrecht-table--html-table > thead > tr > th,
.utrecht-table--html-table > tbody > tr > th,
.utrecht-table--html-table > tfoot > tr > th,
.utrecht-table__header-cell {
  --utrecht-icon-size: var(--utrecht-table-cell-icon-size);
  /* In tables `block-size` acts as `min-block-size`, but `min-block-size` is a clearer name for the design token */
  block-size: var(--utrecht-table-cell-line-height, 1em);
  line-height: var(--utrecht-table-cell-line-height, inherit);
  padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
  padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
  padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
  padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
  text-align: start;
  color: var(--utrecht-table-header-cell-color);
  font-size: var(--utrecht-table-header-cell-font-size);
  font-weight: var(--utrecht-table-header-cell-font-weight, bold);
  text-transform: var(--utrecht-table-header-cell-text-transform);
  vertical-align: var(--_utrecht-table-header-cell-vertical-align, top);
  z-index: var(--_utrecht-table-header-cell-z-index);
}

.utrecht-table__header-cell--selected {
  background-color: var(--utrecht-table-cell-selected-background-color, highlight);
  color: var(--utrecht-table-cell-selected-color, highlightText);
}

.utrecht-table__header-cell--sticky-block {
  background-color: #eee;
  color: black;
  inset-block-start: 0;
  position: sticky;
  z-index: calc(var(--_utrecht-table-header-cell-z-index, 0) + 2);
}

.utrecht-table__header-cell--sticky-inline {
  background-color: #eee;
  color: black;
  inset-inline-start: 0;
  position: sticky;
  z-index: calc(var(--_utrecht-table-header-cell-z-index, 0) + 1);
}

.utrecht-table--html-table > tr > td,
.utrecht-table--html-table > thead > tr > td,
.utrecht-table--html-table > tbody > tr > td,
.utrecht-table--html-table > tfoot > tr > td,
.utrecht-table__cell {
  --utrecht-icon-size: var(--utrecht-table-cell-icon-size);
  /* In tables `block-size` acts as `min-block-size`, but `min-block-size` is a clearer name for the design token */
  block-size: var(--utrecht-table-cell-line-height, 1em);
  line-height: var(--utrecht-table-cell-line-height, inherit);
  padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
  padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
  padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
  padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
  text-align: start;
  border-block-end-color: var(--utrecht-table-row-border-block-end-color, transparent);
  border-block-end-style: solid;
  border-block-end-width: var(--utrecht-table-row-border-block-end-width, 0);
  vertical-align: top;
}

.utrecht-table--html-table > tr > td:first-child,
.utrecht-table--html-table > thead > tr > td:first-child,
.utrecht-table--html-table > tbody > tr > td:first-child,
.utrecht-table--html-table > tfoot > tr > td:first-child,
.utrecht-table__cell--first {
  padding-inline-start: var(--utrecht-table-row-padding-inline-start, var(--utrecht-table-cell-padding-inline-start, 0));
}

.utrecht-table--html-table > tr > td:last-child,
.utrecht-table--html-table > thead > tr > td:last-child,
.utrecht-table--html-table > tbody > tr > td:last-child,
.utrecht-table--html-table > tfoot > tr > td:last-child,
.utrecht-table__cell--last {
  padding-inline-end: var(--utrecht-table-row-padding-inline-end, var(--utrecht-table-cell-padding-inline-end, 0));
}

.utrecht-table__cell--selected {
  background-color: var(--utrecht-table-cell-selected-background-color, highlight);
  color: var(--utrecht-table-cell-selected-color, highlightText);
}

/* stylelint-enable no-descending-specificity */
.utrecht-table__header-cell--numeric-column,
.utrecht-table__cell--numeric-column {
  --_utrecht-table-cell-text-align: right;
  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
  text-align: var(--_utrecht-table-cell-text-align);
}

.utrecht-table__cell--numeric-data {
  font-variant-numeric: lining-nums tabular-nums;
}

.utrecht-table__row--alternate-odd {
  background-color: var(--utrecht-table-row-alternate-odd-background-color, transparent);
  color: var(--utrecht-table-row-alternate-odd-color);
}

.utrecht-table__row--alternate-even {
  background-color: var(--utrecht-table-row-alternate-even-background-color, transparent);
  color: var(--utrecht-table-row-alternate-even-color);
}

.utrecht-table__header-cell {
  --utrecht-button-font-size: inherit;
  --utrecht-button-font-weight: inherit;
  --utrecht-button-padding-inline-start: var(--utrecht-table-cell-padding-inline-start);
  --utrecht-button-padding-inline-end: var(--utrecht-table-cell-padding-inline-end);
  --utrecht-button-padding-block-start: var(--utrecht-table-cell-padding-block-start);
  --utrecht-button-padding-block-end: var(--utrecht-table-cell-padding-block-end);
  --utrecht-button-hover-scale: 1;
  --utrecht-button-focus-scale: 1;
  --utrecht-button-min-block-size: 100%;
  --utrecht-button-min-inline-size: 100%;
  --utrecht-button-border-color: transparent;
  --utrecht-button-border-size: 1px;
}

.utrecht-table__header-cell:has(.utrecht-button) {
  padding-block-end: 0;
  padding-block-start: 0;
  padding-inline-end: 0;
  padding-inline-start: 0;
}

.utrecht-table__header-cell-button {
  justify-content: var(--_utrecht-table-cell-text-align, start);
}

/* stylelint-disable-next-line block-no-empty */
.utrecht-table__data--truncate {
  display: block;
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.utrecht-table__container {
  max-inline-size: 100%;
  overflow-inline: scroll;
}

.utrecht-table__header--hidden {
  block-size: 1px;
  border: 0 solid silver;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  inline-size: 1px;
  outline: 1px solid red;
  overflow: hidden;
  /* stylelint-disable-next-line property-disallowed-list */
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

.utrecht-table--busy {
  cursor: var(--utrecht-action-busy-cursor, busy);
}

.utrecht-table--alternate-row-color .utrecht-table__body .utrecht-table__row:nth-child(odd) {
  background-color: var(--utrecht-table-row-alternate-odd-background-color, transparent);
  color: var(--utrecht-table-row-alternate-odd-color);
}
.utrecht-table--alternate-row-color .utrecht-table__body .utrecht-table__row:nth-child(even) {
  background-color: var(--utrecht-table-row-alternate-even-background-color, transparent);
  color: var(--utrecht-table-row-alternate-even-color);
}

.utrecht-table--row-hover .utrecht-table__body .utrecht-table__row:hover .utrecht-table__header-cell,
.utrecht-table--row-hover .utrecht-table__body .utrecht-table__row:hover .utrecht-table__cell {
  background-color: papayawhip;
  color: maroon;
}

.utrecht-table--row-focus-within .utrecht-table__body .utrecht-table__row:focus-within .utrecht-table__header-cell,
.utrecht-table--row-focus-within .utrecht-table__body .utrecht-table__row:focus-within .utrecht-table__cell {
  background-color: papayawhip;
  color: maroon;
}