metabuilder/qml/hybrid/Table/Table.module.scss

// Table Component - Material Design 3
// =====================================
// Implements M3 data table specifications using official M3 tokens
// https://m3.material.io/components/data-tables/specs

@use '../tokens' as m3;

// Table wrapper (handles overflow and border)
.tableWrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: m3.$corner-medium;
  border: 1px solid m3.$outline-variant;
  background: m3.$surface;
}

// Base table styles
.table {
  width: 100%;
  border-collapse: collapse;
  @include m3.typography(body-medium);
}

// ============================================
// Table Header
// ============================================

.thead {
  background: m3.$surface-container;

  .cell {
    // Header uses label-small typography
    @include m3.typography(label-small);
    color: m3.$on-surface-variant;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
}

// ============================================
// Table Body
// ============================================

.tbody {
  .tr {
    &:not(:last-child) {
      border-bottom: 1px solid m3.$outline-variant;
    }
  }
}

// ============================================
// Table Row
// ============================================

.tr {
  transition: background-color m3.$motion-duration-short2 m3.$motion-easing-standard;

  // Hover state
  &:hover {
    background: color-mix(
      in srgb,
      m3.$on-surface 4%,
      transparent
    );
  }

  // Clickable row
  &--clickable {
    cursor: pointer;

    &:hover {
      background: color-mix(
        in srgb,
        m3.$primary 8%,
        transparent
      );
    }

    &:focus-visible {
      outline: none;
      background: color-mix(
        in srgb,
        m3.$primary 12%,
        transparent
      );
    }

    &:active {
      background: color-mix(
        in srgb,
        m3.$primary 12%,
        transparent
      );
    }
  }

  // Selected row
  &--selected {
    background: color-mix(
      in srgb,
      m3.$primary 8%,
      transparent
    );

    &:hover {
      background: color-mix(
        in srgb,
        m3.$primary 12%,
        transparent
      );
    }
  }
}

// ============================================
// Table Cell
// ============================================

.cell {
  padding: 12px 16px;
  color: m3.$on-surface;
  vertical-align: middle;

  // Alignment variants
  &--left {
    text-align: left;
  }

  &--center {
    text-align: center;
  }

  &--right {
    text-align: right;
  }
}

// ============================================
// Table Footer
// ============================================

.tfoot {
  background: m3.$surface-container;
  border-top: 1px solid m3.$outline-variant;

  .cell {
    @include m3.typography(body-medium);
    color: m3.$on-surface-variant;
  }
}

// ============================================
// Sortable Header
// ============================================

.cell--sortable {
  cursor: pointer;
  user-select: none;

  &:hover {
    background: color-mix(
      in srgb,
      m3.$on-surface 8%,
      transparent
    );
  }
}

.sortIcon {
  display: inline-flex;
  margin-left: 4px;
  font-size: 1rem;
  opacity: 0;
  transition: opacity m3.$motion-duration-short2 m3.$motion-easing-standard;

  .cell--sortable:hover &,
  .cell--sorted & {
    opacity: 1;
  }
}

// ============================================
// Compact Variant
// ============================================

.table--compact {
  .cell {
    padding: 8px 12px;
  }
}

// ============================================
// Dense Variant
// ============================================

.table--dense {
  .cell {
    padding: 4px 8px;
    @include m3.typography(body-small);
  }

  .thead .cell {
    @include m3.typography(label-small);
  }
}

// ============================================
// Striped Variant
// ============================================

.tbody--striped {
  .tr:nth-child(even) {
    background: color-mix(
      in srgb,
      m3.$on-surface 2%,
      transparent
    );
  }
}

// ============================================
// Sticky Header
// ============================================

.thead--sticky {
  position: sticky;
  top: 0;
  z-index: 1;
}

// ============================================
// Loading State
// ============================================

.table--loading {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}

// ============================================
// Empty State
// ============================================

.emptyState {
  padding: 48px 24px;
  text-align: center;
  color: m3.$on-surface-variant;
  @include m3.typography(body-large);
}