@dnb/eufemia/cjs/components/table/style/themes/dnb-table-theme-ui.css

DNB Eufemia Design System UI Library

/*
* Table theme
*
*/
/*
 * Utilities
 */
/*
 * Utilities
 */
.dnb-table {
  --table-th-background-color: var(--color-white);
  text-align: left;
}
.dnb-table, .dnb-table__th--emphasis {
  --table-th-text-color: var(--theme-color-black-80, currentColor);
  --table-th-font-weight: var(--font-weight-medium);
  --table-th-font-size: var(--font-size-basis);
}
.dnb-table__th--subtle {
  --table-th-text-color: var(--color-black-55);
  --table-th-font-weight: var(--font-weight-regular);
  --table-th-font-size: var(--font-size-small);
}
.dnb-table__th--subtle.dnb-table__th--subtle {
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
}
.dnb-table__th, .dnb-table thead th {
  padding: 2rem 1rem 1rem;
  font-weight: var(--table-th-font-weight);
  color: var(--table-th-text-color);
  font-size: var(--table-th-font-size);
  line-height: var(--line-height-basis);
  vertical-align: bottom;
}
.dnb-table__size--medium .dnb-table__th, .dnb-table__size--medium .dnb-table thead th {
  padding: 1.375rem 1rem 0.875rem;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}
.dnb-table__size--medium .dnb-table__th .dnb-button__text, .dnb-table__size--medium .dnb-table thead th .dnb-button__text {
  line-height: inherit;
}
.dnb-table__size--small .dnb-table__th, .dnb-table__size--small .dnb-table thead th {
  padding: 1.25rem 1rem 0.5rem;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}
.dnb-table {
  /* stylelint-disable */
}
.dnb-table__td, .dnb-table tbody .dnb-table__th, .dnb-table tbody td, .dnb-table tbody th {
  padding: 1rem;
  color: var(--theme-color-black-80, currentColor);
  font-size: var(--font-size-basis);
  line-height: var(--line-height-basis);
  vertical-align: baseline;
}
.dnb-table tbody .dnb-table__th, .dnb-table tbody th {
  padding: 1rem;
  vertical-align: baseline;
}
.dnb-table__size--medium tbody .dnb-table__th, .dnb-table__size--medium tbody .dnb-table__td,
.dnb-table__size--medium .dnb-table tbody th,
.dnb-table__size--medium .dnb-table tbody td {
  padding: 0.875rem 1rem;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}
.dnb-table__size--small tbody .dnb-table__th, .dnb-table__size--small tbody .dnb-table__td,
.dnb-table__size--small .dnb-table tbody th,
.dnb-table__size--small .dnb-table tbody td {
  padding: 0.625rem 1rem;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}
.dnb-table {
  /* stylelint-enable */
}
.dnb-table:not(.dnb-table--outline) > tbody {
  position: relative;
}
.dnb-table:not(.dnb-table--outline) > tbody::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: -0.0625rem;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  border-bottom: var(--table-border);
}
.dnb-table:not(.dnb-table--outline) > tbody:last-child::after {
  right: 0;
}

.dnb-table__container {
  background-color: var(--color-white);
}

.dnb-table,
.dnb-table__container {
  --table-border-color: var(--color-black-8);
  --table-outline-color: var(--color-black-8);
}
html[data-visual-test] .dnb-table,
html[data-visual-test] .dnb-table__container {
  --table-border-color: blue;
  --table-outline-color: red;
  --table-accordion-border-color: green;
}