@utrecht/web-component-library-stencil/dist/collection/components/table-container.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
 */
/* stylelint-disable-next-line block-no-empty */
/* stylelint-disable-next-line block-no-empty */
utrecht-table-container {
  display: block;
  overflow: auto;
  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%;
}

utrecht-table-container table {
  /* stylelint-disable no-descending-specificity */
  /* stylelint-enable no-descending-specificity */
}
utrecht-table-container 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-container table > thead {
  --_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-container table > tbody {
  --_utrecht-table-header-cell-z-index: 2;
}
utrecht-table-container table > tr, utrecht-table-container table > thead > tr, utrecht-table-container table > tbody > tr, utrecht-table-container table > tfoot > tr {
  break-inside: avoid;
  page-break-inside: avoid;
}
utrecht-table-container table > thead > tr:last-of-type {
  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-border-block-end-width, 0);
}
utrecht-table-container table > tr > th, utrecht-table-container table > thead > tr > th, utrecht-table-container table > tbody > tr > th, utrecht-table-container table > tfoot > tr > th {
  --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-container table > tr > td, utrecht-table-container table > thead > tr > td, utrecht-table-container table > tbody > tr > td, utrecht-table-container table > tfoot > tr > td {
  --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-container table > tr > td:last-child, utrecht-table-container table > thead > tr > td:last-child, utrecht-table-container table > tbody > tr > td:last-child, utrecht-table-container table > tfoot > tr > td:last-child {
  padding-inline-end: var(--utrecht-table-row-padding-inline-end, var(--utrecht-table-cell-padding-inline-end, 0));
}
utrecht-table-container table > tr > td:first-child, utrecht-table-container table > thead > tr > td:first-child, utrecht-table-container table > tbody > tr > td:first-child, utrecht-table-container table > tfoot > tr > td:first-child {
  padding-inline-start: var(--utrecht-table-row-padding-inline-start, var(--utrecht-table-cell-padding-inline-start, 0));
}