@telekom/scale-components/dist/collection/components/data-grid/data-grid.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/.
 */

/* TODO replace these with css framework when available */
/* typography utility classes for using native tags */
.scl-body {
  margin: 0;
  font: var(--telekom-text-style-body);
}

.scl-label {
  margin: 0;
  font: var(--telekom-text-style-small);
}

.scl-h1 {
  margin: 0;
  font: var(--telekom-text-style-heading-1);
}

.scl-h2 {
  margin: 0;
  font: var(--telekom-text-style-heading-2);
}

.scl-h3 {
  margin: 0;
  font: var(--telekom-text-style-heading-3);
}

.scl-h4 {
  margin: 0;
  font: var(--telekom-text-style-heading-4);
}

.scl-h5 {
  margin: 0;
  font: var(--telekom-text-style-heading-5);
}

.scl-h6 {
  margin: 0;
  font: var(--telekom-text-style-heading-6);
}

:host {
  font-family: var(--telekom-typography-font-family-sans);
  font-size: var(--telekom-typography-font-size-body);
  font-weight: var(--telekom-typography-font-weight-regular);
  line-height: var(--telekom-typography-line-spacing-standard);
  color: var(--telekom-color-text-and-icon-standard);
}

.data-grid input,
.data-grid select {
  letter-spacing: inherit;
  font-weight: inherit;
  font-family: inherit;
  line-height: inherit;
}

.data-grid {
  position: relative;
  display: block;
  background: var(--telekom-color-ui-state-fill-standard);
  border-radius: var(--telekom-radius-large);
  border: 1px solid var(--telekom-color-ui-faint);
  overflow: hidden;
}

.data-grid--hide-border {
  border: none;
}

/* Version of table rendered in first frame to find auto-widths */
.data-grid__auto-width-check {
  opacity: 0;
}

.data-grid__title-block {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--telekom-spacing-composition-space-06);
  padding-left: var(--telekom-spacing-composition-space-08);
}

.data-grid__heading {
  flex-grow: 1;
}

.data-grid__title-block ::slotted(*) {
  /* --spacing-x-actions-slotted */
  margin-left: var(--telekom-spacing-composition-space-04);
}

.data-grid__settings-menu {
  margin-left: var(--telekom-spacing-composition-space-04);
}

.data-grid__scroll-container {
  overflow: auto;
  /* Use overlay to prevent horizontal scrollbar when vertical scrolling needed */
  /* use individual axes so that falls back to auto when not supported */
  overflow-x: overlay;
  overflow-y: overlay;
  ms-overflow-style: -ms-autohiding-scrollbar;
  /* Future proof */
  scrollbar-gutter: stable;
}

.data-grid__table {
  border-spacing: 0;
  border-collapse: collapse;
  overflow: hidden;
}

.data-grid--hide-menu .data-grid__settings-menu {
  display: none;
}

.data-grid:not(.data-grid--hide-menu) .data-grid__title-block {
  min-height: 72px;
}
.data-grid--hide-menu .data-grid__title-block {
  padding-right: var(--telekom-spacing-composition-space-06);
}

/* Head block */
.thead {
  display: block;
  white-space: nowrap;
  border-bottom: 1px solid var(--telekom-color-ui-faint);
  position: relative;
  background: var(--telekom-color-ui-state-fill-standard);
  z-index: 1;
}

.data-grid--freeze-header .thead {
  z-index: 30;
  background-color: var(--telekom-color-background-canvas);
}

.thead-sortable {
  cursor: pointer;
}
.thead-sortable:focus {
  box-shadow: inset 0 0 0 var(--telekom-spacing-composition-space-02)
    var(--telekom-color-functional-focus-standard);
}

.thead__cell {
  display: inline-flex;
  align-items: center;
  height: var(--telekom-spacing-composition-space-10);
  text-align: left;
  user-select: none;
  position: relative;
  padding: 0 var(--telekom-spacing-composition-space-06);
  color: var(--telekom-color-text-and-icon-additional);
}

.thead__cell--numbered {
  text-align: right;
  justify-content: flex-end;
}

.thead__cell--selection {
  justify-content: center;
  text-align: center;
}

.thead__cell--selection xds-checkbox::part(container) {
  justify-content: center;
}
.thead__title {
  color: var(--telekom-color-text-and-icon-standard);
}

.thead__text {
  font-size: var(--telekom-typography-font-size-small);
  line-height: var(--telekom-typography-line-spacing-standard);
  position: relative;
}

.thead__arrow-top,
.thead__arrow-bottom {
  position: absolute;
  display: none !important;
  top: -2px;
  left: -16px;
}

.thead__sort-prompt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: none;
  border: 0;
  opacity: 1;
  cursor: pointer;
}

.thead__divider {
  position: absolute;
  right: calc(-1 * var(--telekom-spacing-composition-space-04));
  bottom: 0px;
  height: 100%;
  padding: 19px var(--telekom-spacing-composition-space-04) 0px;
  box-sizing: border-box;
  cursor: col-resize;
  z-index: 1;
}

.thead__divider-line {
  pointer-events: none;
  height: 100%;
  width: 1px;
  background: var(--telekom-color-ui-faint);
}

.thead__cell:first-child {
  padding-left: var(--telekom-spacing-composition-space-08);
}

.thead__cell:focus {
  outline: none;
}

.thead__cell[aria-sort='ascending'] .thead__arrow-top {
  display: inline-flex !important;
}

.thead__cell[aria-sort='descending'] .thead__arrow-bottom {
  display: inline-flex !important;
}

.thead__cell[aria-sort]:hover {
  color: var(--telekom-color-text-and-icon-primary-hovered);
}

.thead__cell[aria-sort='none']:hover .thead__arrow-top,
.thead__cell[aria-sort='none']:hover .thead__arrow-bottom {
  display: none !important;
}

.thead__cell[aria-sort='ascending']:hover .thead__arrow-top {
  color: var(--telekom-color-text-and-icon-primary-hovered);
}

.thead__cell[aria-sort='descending']:hover .thead__arrow-bottom {
  color: var(--telekom-color-text-and-icon-primary-hovered);
}

/* Body block */
.tbody {
  display: block;
}
.tbody__row {
  display: block;
  white-space: nowrap;
}
.tbody__mobile-title {
  display: none;
}
.tbody__mobile-label {
  display: none;
}
.tbody__cell {
  display: inline-block;
  margin: 8px;
  padding: 8px;
  overflow: hidden;
  /* line-height: 32px; */
}
.tbody__cell--numbered {
  text-align: right;
}
.tbody__cell--selection {
  justify-content: center;
  text-align: center;
}

.tbody__cell--selection scale-checkbox::part(container),
.tbody__cell--selection scale-checkbox [part='container'] {
  justify-content: center;
}

.tbody__cell scale-checkbox {
  width: auto;
}

.tbody__nested {
  white-space: nowrap;
  padding: 0px;
  margin: 0px;
}
.tbody__nested-cell {
  display: block;
  padding: var(--telekom-spacing-composition-space-06);
  margin: 0px;
}

.tbody__cell:first-of-type {
  margin-left: var(--telekom-spacing-composition-space-06);
  /* padding-left: var(--telekom-spacing-composition-space-08); */
}

.tbody__nested-cell:first-child {
  margin-left: 0px;
}
.data-grid--shade-alternate .tbody__row:nth-of-type(even),
.data-grid--shade-alternate .tbody__nested:nth-of-type(even) {
  background: var(--telekom-color-background-surface-subtle);
}

.data-grid__auto-width-check .tbody__cell {
  padding: 0;
}

/* Unique cell types */
.tbody__tag-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tbody__tag-list li {
  display: inline-block;
  margin-right: 8px;
}
.tbody__tag-list li:last-child {
  margin-right: 0;
}
.data-grid input[type='checkbox'] {
  display: block;
  height: 14px;
  margin: 5px 4px;
}

.tbody__text-cell {
  display: flex;
  align-items: center;
}
.tbody__text-cell-prefix {
  display: inline-flex;
  align-items: center;
  margin-right: 0.5em;
}
.tbody__text-cell-suffix {
  display: inline-flex;
  align-items: center;
  margin-left: 0.5em;
}
.tbody__cell p {
  overflow: hidden;
  text-overflow: ellipsis;
}
.tbody__cell scale-link {
  overflow: hidden;
  text-overflow: ellipsis;
}
.tbody__bar-cell {
  display: inline-flex;
  width: 100%;
}
.tbody__cell scale-progress-bar {
  flex-grow: 1;
}
.tbody__actions scale-button {
  margin-right: var(--telekom-spacing-composition-space-04);
}

.data-grid-progress-bar::part(progress-bar) {
  min-width: 50px;
  max-width: 200px;
}
.data-grid-progress-bar::part(status) {
  padding-top: 0;
}

/* Info block */
.info {
  height: 44px;
  position: relative;
  border-top: var(--telekom-line-weight-standard) solid
    var(--telekom-color-ui-subtle);
  display: flex;
  justify-content: center;
}

.info__selection {
  position: absolute;
  bottom: 0;
  line-height: 54px;
  left: var(--telekom-spacing-composition-space-08);
}

.data-grid--hide-border:not(.data-grid--mobile) .info__pagination {
  border-bottom: 1px solid var(--telekom-color-ui-subtle);
  border-right: 1px solid var(--telekom-color-ui-subtle);
}

/* Mobile */
.data-grid--mobile {
  border: none;
  background: none;
}
.data-grid--mobile .data-grid__title-block {
  padding-left: 0;
  padding-right: 0;
}
.data-grid--hide-menu.data-grid--mobile .data-grid__title-block {
  padding-right: 0;
}
.data-grid--mobile .data-grid__settings-menu {
  right: 0;
}
.data-grid--mobile .data-grid__scroll-container {
  height: auto !important;
}
.data-grid--mobile .data-grid__table {
  display: block;
  height: auto !important;
}
.data-grid--mobile .thead {
  display: none;
}
.data-grid--mobile .tbody {
  display: block;
}
.data-grid--mobile .tbody__row {
  display: block;
  position: relative;
  white-space: initial;
  margin: 0 0 var(--telekom-spacing-composition-space-04);
  padding: var(--telekom-spacing-composition-space-08);
  border-radius: var(--telekom-radius-standard);
  background: var(--telekom-color-background-surface);
  border: 1px solid var(--telekom-color-ui-faint);
}
.data-grid--mobile .tbody__row:hover {
  background: var(--telekom-color-background-surface);
}
.data-grid--mobile .tbody__mobile-title {
  display: block;
  margin-bottom: var(--telekom-spacing-composition-space-04);
}
.data-grid--mobile .tbody__mobile-label {
  display: block;
}
.data-grid--mobile .tbody__cell {
  display: flex;
  align-items: center;
  width: auto !important;
  padding: 5px 0;
  margin: 0;
  /* 24 to match text component, otherwise will not be centered */
  min-height: var(--telekom-spacing-composition-space-08);
  line-height: var(--telekom-spacing-composition-space-08);
  overflow: auto;
  overflow-x: hidden;
}
.data-grid--mobile .tbody__cell--used-as-mobile-title {
  display: none;
}
.data-grid--mobile .tbody__mobile-label {
  display: block;
  width: 100px;
  flex-shrink: 0;
  color: var(--telekom-color-text-and-icon-additional);
  font-size: var(--telekom-typography-font-size-small);
  font-weight: var(--telekom-typography-font-weight-medium);
}
.data-grid--mobile .tbody__cell:first-child {
  margin-left: 0px;
}
.data-grid--mobile .tbody__cell--selection {
  position: absolute;
  top: 19px;
  right: 12px;
}
.data-grid--mobile .tbody__cell--numbered {
  position: absolute;
  top: 19px;
  right: 56px;
}
.data-grid--mobile .tbody__cell scale-text-field,
.data-grid--mobile .tbody__cell scale-dropdown {
  width: 100%;
}
.data-grid--mobile .tbody__nested {
  width: auto !important;
}
.data-grid--mobile .tbody__nested-cell {
  padding: 0;
  margin-bottom: var(--telekom-spacing-composition-space-04);
}
.data-grid--mobile.data-grid--shade-alternate .tbody__row:nth-of-type(even) {
  background: var(--telekom-color-background-surface);
}
.data-grid--mobile .info {
  height: auto;
  border-top: none;
  text-align: center;
}
.data-grid--mobile .info__selection {
  position: relative;
  left: 0;
}
.data-grid--mobile .info__pagination {
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}