@oslokommune/punkt-css/dist/css/elements/table.css

CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo

/*
 * Table elements
 */
.pkt-table {
  width: 100%;
  border-collapse: collapse;
}
.pkt-table__header,
.pkt-table thead {
  text-align: left;
  vertical-align: top;
  font-size: 1.125rem;
  font-weight: 500;
}
.pkt-table__body,
.pkt-table tbody {
  text-align: left;
  vertical-align: top;
  font-size: 1rem;
  font-weight: 300;
}
.pkt-table__body .pkt-table__row:hover > .pkt-table__data-cell,
.pkt-table tbody .pkt-table__row:hover > .pkt-table__data-cell {
  background: rgba(42, 40, 89, 0.01);
}
.pkt-table__header-cell,
.pkt-table th {
  padding: 1rem;
  border-bottom: none;
}
.pkt-table__data-cell,
.pkt-table td {
  padding: 1rem;
  border-bottom: none;
}

.pkt-table__cell-wrapper {
  text-align: left;
  vertical-align: top;
  display: inline-flex;
  gap: 0.5rem;
}

/**
 * Compact table
 */
.pkt-table.pkt-table--compact .pkt-table__header-cell,
.pkt-table.pkt-table--compact th {
  padding: 0.5rem 1rem;
}

/**
 * Skin: basic
 */
.pkt-table.pkt-table--basic .pkt-table__row,
.pkt-table.pkt-table--basic tr {
  border-bottom: 2px solid var(--pkt-color-surface-strong-gray);
}

/**
 * Skin: zebra blue
 */
.pkt-table.pkt-table--zebra-blue .pkt-table__body .pkt-table__row:nth-child(odd),
.pkt-table.pkt-table--zebra-blue .pkt-table__body tr:nth-child(odd),
.pkt-table.pkt-table--zebra-blue tbody .pkt-table__row:nth-child(odd),
.pkt-table.pkt-table--zebra-blue tbody tr:nth-child(odd) {
  background: var(--pkt-color-surface-subtle-pale-blue);
}

/**
 * Responsive Mobile view if class is set
 */
@media screen and (max-width: 48rem) {
  .pkt-table.pkt-table--responsive .pkt-table__row,
  .pkt-table.pkt-table--responsive .pkt-table tr {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 1rem;
    padding: 1rem 1rem;
  }
  .pkt-table.pkt-table--responsive .pkt-table__row .pkt-table__header-cell,
  .pkt-table.pkt-table--responsive .pkt-table__row th,
  .pkt-table.pkt-table--responsive .pkt-table tr .pkt-table__header-cell,
  .pkt-table.pkt-table--responsive .pkt-table tr th {
    display: none;
  }
  .pkt-table.pkt-table--responsive .pkt-table__cell-wrapper {
    grid-column: 2/3;
  }
  .pkt-table.pkt-table--responsive .pkt-table__data-cell,
  .pkt-table.pkt-table--responsive .pkt-table td {
    padding: 0.5rem 1rem;
    display: contents;
  }
  .pkt-table.pkt-table--responsive .pkt-table__data-cell::before,
  .pkt-table.pkt-table--responsive .pkt-table td::before {
    grid-column: 1/2;
    content: attr(data-label);
    font-weight: 500;
  }
  .pkt-table.pkt-table--responsive .pkt-table__compact .pkt-table__row,
  .pkt-table.pkt-table--responsive .pkt-table__compact tr {
    padding: 0.5rem 0.5rem;
    gap: 0.5rem;
  }
  .pkt-table.pkt-table--responsive .pkt-table__zebra-blue .pkt-table__row:nth-child(odd),
  .pkt-table.pkt-table--responsive .pkt-table__zebra-blue tr:nth-child(odd) {
    background: var(--pkt-color-surface-subtle-pale-blue);
  }
}