src/material/table/_table-flex-styles.scss - main - githubmirror/components

src/material/table/_table-flex-styles.scss

70 строк2 KB

Andrew Seguin

refactor: simplify component styles by removing use-tokens (#31146)

21 май 2025, 03:10

21 май 2025, 03:107b5d88b

@use '../core/tokens/token-utils';
@use './m3-table';

$fallbacks: m3-table.get-tokens();

// Flex-based table structure
$header-row-height: 56px;
$row-height: 48px;
$row-horizontal-padding: 24px;

// Only use tag name selectors here since the styles are shared between MDC and non-MDC
@mixin private-table-flex-styles {
  mat-table {
    display: block;
  }

  mat-header-row {
    min-height: token-utils.slot(table-header-container-height, $fallbacks, $header-row-height);
  }

  mat-row {
    min-height: token-utils.slot(table-row-item-container-height, $fallbacks, $row-height);
  }

  mat-footer-row {
    min-height: token-utils.slot(table-footer-container-height, $fallbacks, $row-height);
  }

  mat-row, mat-header-row, mat-footer-row {
    display: flex;
    // Define a border style, but then widths default to 3px. Reset them to 0px except the bottom
    // which should be 1px;
    border-width: 0;
    border-bottom-width: 1px;
    border-style: solid;
    align-items: center;
    box-sizing: border-box;
  }

  mat-cell, mat-header-cell, mat-footer-cell {
    // Note: we use `first-of-type`/`last-of-type` here in order to prevent extra
    // elements like ripples or badges from throwing off the layout (see #11165).
    &:first-of-type {
      padding-left: $row-horizontal-padding;

      [dir='rtl'] &:not(:only-of-type) {
        padding-left: 0;
        padding-right: $row-horizontal-padding;
      }
    }

    &:last-of-type {
      padding-right: $row-horizontal-padding;

      [dir='rtl'] &:not(:only-of-type) {
        padding-right: 0;
        padding-left: $row-horizontal-padding;
      }
    }
  }

  mat-cell, mat-header-cell, mat-footer-cell {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    word-wrap: break-word;
    min-height: inherit;
  }
}