@telekom/scale-components/dist/collection/components/table/table.css

Scale is the digital design system for Telekom products and experiences.

/**
 * @license
 * Scale https://github.com/telekom/scale
 *
 * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

scale-table {
  --radius: var(--telekom-radius-standard) var(--telekom-radius-standard) 0 0;
  --background: var(--telekom-color-ui-state-fill-standard);
  --color: var(--telekom-color-text-and-icon-standard);
  --color-hover: var(--telekom-color-text-and-icon-primary-hovered);
  --color-active: var(--telekom-color-text-and-icon-primary-pressed);
  --font-size: var(--telekom-typography-font-size-small);
  --font-weight: var(--telekom-typography-font-weight-bold);

  --spacing-tbody-td: var(--telekom-spacing-composition-space-06)
    var(--telekom-spacing-composition-space-04);
  --border-bottom-tbody-td: var(--telekom-spacing-composition-space-01) solid
    var(--telekom-color-ui-faint);
  --background-tbody: var(--telekom-color-ui-state-fill-standard);
  --background-tbody-tr-hover: var(--telekom-color-ui-state-fill-hovered);
  --background-tfoot: var(--telekom-color-ui-state-fill-standard);
  --border-bottom-tfoot-td: var(--telekom-spacing-composition-space-01) solid
    var(--telekom-color-ui-extra-strong);

  --spacing-th-sortable: 0 var(--telekom-spacing-composition-space-04) 0 0;
  --background-th-sortable-hover: var(--telekom-color-ui-subtle);
  --background-th-sortable-active: var(--telekom-color-ui-faint);
  --box-shadow-th-sortable-focus: inset 0 0 0
    var(--telekom-spacing-composition-space-02)
    var(--telekom-color-functional-focus-standard);
  --background-tr-striped: var(--telekom-color-ui-subtle);
  --padding: var(--telekom-spacing-composition-space-00)
    var(--telekom-spacing-composition-space-04);
}
.table {
  display: block;
  overflow: auto;
  border-radius: var(--radius);
  background: var(--background);
  color: var(--color);
}
.table table {
  width: 100%;
  white-space: nowrap;
  border-spacing: 0;
  border-collapse: collapse;
}
.table th {
  padding: var(--padding);
  text-align: left;
  line-height: 32px; /*  TODO: revise, this is weird */
  color: var(--color);
  font-size: var(--font-size);
  background: var(--telekom-color-background-surface-subtle);
}
.table td {
  padding: var(--padding);
}
.table tbody tr td {
  padding: 8px;
}
.table tbody td {
  border-bottom: var(--border-bottom-tbody-td);
}
.table thead tr th:last-of-type,
.table tbody tr td:last-of-type,
.table tfoot tr td:last-of-type {
  padding-right: 12px;
}

.table tfoot {
  background: var(--background-tfoot);
}
.table tbody {
  background: var(--background-tbody);
}
.table tfoot tr td {
  padding: 8px;
  font-weight: var(--font-weight);
  border-bottom: var(--border-bottom-tfoot-td);
}
.table .scale-sort-indicator-icon {
  display: none !important;
}
.table tbody tr:hover {
  background: var(--background-tbody-tr-hover);
}
.table th:focus {
  outline: none;
}
.table--size-default tbody tr td {
  padding: var(--spacing-tbody-td);
}
.table--sortable th {
  cursor: pointer;
  padding: var(--spacing-th-sortable);
}
.table--sortable th:hover {
  padding: var(--spacing-th-sortable);
  background: var(--background-th-sortable-hover);
}
.table--sortable th:active {
  background: var(--background-th-sortable-active);
}
.table--sortable th:focus {
  box-shadow: var(--box-shadow-th-sortable-focus);
  border-radius: var(--radius);
}
.table--sortable th .scale-sort-indicator-icon {
  display: inline-flex !important;
}
.table--sortable th[aria-disabled] {
  padding: var(--padding);
  pointer-events: none;
}
.table--sortable th:not([aria-sort]) {
  padding: var(--padding);
}
.table--sortable th[aria-sort='none'] {
  padding: var(--padding);
}
.table--sortable th[aria-sort='ascending'] .scale-sort-indicator .up {
  color: var(--color);
}
.table--sortable th:hover .scale-sort-indicator .up {
  color: var(--color-hover);
}
.table--sortable th:hover[aria-sort='ascending'] .scale-sort-indicator-icon.up {
  color: var(--color-hover);
}
.table--sortable
  th:active[aria-sort='ascending']
  .scale-sort-indicator-icon.up {
  color: var(--color-active);
}
.table--sortable th[aria-sort='ascending'] .scale-sort-indicator {
  color: transparent;
}
.table--sortable th:hover[aria-sort='ascending'] .scale-sort-indicator {
  color: transparent;
}
.table--sortable th:active[aria-sort='ascending'] .scale-sort-indicator {
  color: transparent;
}
.table--sortable th[aria-sort='descending'] .scale-sort-indicator-icon.up {
  color: transparent;
}
.table--sortable
  th:hover[aria-sort='descending']
  .scale-sort-indicator-icon.up {
  color: transparent;
}
.table--sortable
  th:active[aria-sort='descending']
  .scale-sort-indicator-icon.up {
  color: transparent;
}
.table--sortable th[aria-sort='descending'] .scale-sort-indicator-icon {
  color: var(--color);
}
.table--sortable th:hover[aria-sort='descending'] .scale-sort-indicator-icon {
  color: var(--color-hover);
}
.table--sortable th:active[aria-sort='descending'] .scale-sort-indicator-icon {
  color: var(--color-active);
}
.table--sortable th .scale-sort-indicator {
  width: 16px;
  height: 16px;
  margin: 0 0 0 4px;
  display: inline-block;
  position: relative;
}
.table--sortable th .scale-sort-indicator-icon {
  top: 4px;
  left: 0;
  width: 16px;
  height: 16px;
  position: absolute;
}
.table--sortable th .scale-sort-indicator {
  color: transparent;
}
.table--sortable th[aria-sort='none']:hover {
  padding: 0 8px 0 0;
}
.table--sortable th[aria-sort='none'] .scale-sort-indicator {
  display: none;
}
.table--sortable th:not([aria-sort]):hover {
  padding: 0 8px 0 0;
}
.table--sortable th:not([aria-sort]) .scale-sort-indicator {
  display: none;
}
.table--sortable th:hover .scale-sort-indicator {
  display: inline-block;
}
.table--striped table tr:nth-child(even) {
  background: var(--background-tr-striped);
}