@innovaccer/design-system/css/src/components/table.module.css

React components library project for Innovaccer Design System

.Table {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.Table-grid {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  z-index: 1;
  flex: 1 1 auto;
}

.Table-pagination {
  display: flex;
  justify-content: center;
  background: var(--white);
  padding: var(--spacing-20) 0;
  border-top: var(--border);
}

.Table-Header--Divider {
  height: var(--spacing-60);
}

.Table-Header-Label--hide {
  animation: tableHeaderFadeOut var(--duration--fast-02) var(--exit-productive-curve);
  animation-fill-mode: forwards;
  pointer-events: none;
}

.Table-Header-Label--show {
  animation: fadeIn var(--duration--moderate-01) var(--entrance-productive-curve);
  animation-fill-mode: forwards;
}

@keyframes tableHeaderFadeOut {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .Table-Header-Label--hide,
  .Table-Header-Label--show {
    animation-duration: 0.001ms;
  }
}

.Table-srOnly {
  position: absolute;
  width: var(--spacing-2-5);
  height: var(--spacing-2-5);
  padding: 0;
  margin: calc(-1 * var(--spacing-2-5));
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}