@scania/tegel/dist/collection/components/table/table-footer/table-footer.css

Tegel Design System

:host {
  box-sizing: border-box;
  display: table-footer-group;
  height: var(--tds-spacing-element-48);
}
:host * {
  box-sizing: border-box;
}
:host .tds-table__footer-row {
  background-color: var(--tds-table-footer-background);
  color: var(--tds-table-color);
}
:host .tds-table__footer-cell {
  padding: 0 var(--tds-spacing-element-16);
}
:host .tds-table__footer-cell .tds-table__pagination {
  height: var(--tds-spacing-element-48);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector,
:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector {
  display: flex;
  align-items: center;
}
:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page,
:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page {
  display: flex;
  align-items: center;
  margin-right: var(--tds-spacing-element-16);
}
:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page p,
:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page p {
  margin-right: var(--tds-spacing-element-8);
}
:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input {
  font: var(--tds-detail-02);
  letter-spacing: var(--tds-detail-02-ls);
  background-color: var(--tds-table-footer-page-selector-input-background);
  color: var(--tds-table-color);
  width: 74px;
  height: 30px;
  border: none;
  border-radius: var(--tds-spacing-element-4);
  transition: background-color 250ms ease;
  margin-right: var(--tds-spacing-element-4);
  padding-left: var(--tds-spacing-element-16);
}
:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:hover {
  background-color: var(--tds-table-footer-page-selector-input-background-hover);
}
:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:disabled {
  color: var(--tds-table-footer-page-selector-input-color-disabled);
}
:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input--shake {
  animation: tds-shake-animation 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}
:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-text {
  font: var(--tds-detail-02);
  letter-spacing: var(--tds-detail-02-ls);
  padding: 1px 8px 0 0;
}
:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background-color: transparent;
  cursor: pointer;
  height: var(--tds-spacing-element-32);
  width: var(--tds-spacing-element-32);
  border-radius: var(--tds-spacing-element-4);
  transition: background-color 250ms ease;
  color: var(--tds-table-footer-page-selector-icon);
}
:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:hover {
  background-color: var(--tds-table-footer-btn-hover);
}
:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled {
  cursor: default;
  color: var(--tds-table-footer-page-selector-icon-disabled);
}
:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled:hover {
  background-color: transparent;
}
:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn-svg {
  height: var(--tds-spacing-element-20);
  width: var(--tds-spacing-element-20);
  fill: var(--tds-table-color);
}

:host(.tds-table--compact) {
  height: var(--tds-spacing-element-32);
}
:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination {
  height: var(--tds-spacing-element-32);
}
:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input {
  height: var(--tds-spacing-element-24);
}
:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn {
  height: 28px;
  width: 28px;
}

:host(.footer__horizontal-scroll) {
  display: inline-table;
  position: absolute;
  margin-top: 10px;
}

@keyframes tds-shake-animation {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}