_table-flex-styles.scss 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. @use '../core/tokens/token-utils';
  2. @use '../core/tokens/m2/mat/table' as tokens-mat-table;
  3. // Flex-based table structure
  4. $header-row-height: 56px;
  5. $row-height: 48px;
  6. $row-horizontal-padding: 24px;
  7. // Only use tag name selectors here since the styles are shared between MDC and non-MDC
  8. @mixin private-table-flex-styles {
  9. mat-table {
  10. display: block;
  11. }
  12. @include token-utils.use-tokens(tokens-mat-table.$prefix, tokens-mat-table.get-token-slots()) {
  13. mat-header-row {
  14. @include token-utils.create-token-slot(min-height, header-container-height,
  15. $header-row-height);
  16. }
  17. mat-row {
  18. @include token-utils.create-token-slot(min-height, row-item-container-height, $row-height);
  19. }
  20. mat-footer-row {
  21. @include token-utils.create-token-slot(min-height, footer-container-height, $row-height);
  22. }
  23. }
  24. mat-row, mat-header-row, mat-footer-row {
  25. display: flex;
  26. // Define a border style, but then widths default to 3px. Reset them to 0px except the bottom
  27. // which should be 1px;
  28. border-width: 0;
  29. border-bottom-width: 1px;
  30. border-style: solid;
  31. align-items: center;
  32. box-sizing: border-box;
  33. }
  34. mat-cell, mat-header-cell, mat-footer-cell {
  35. // Note: we use `first-of-type`/`last-of-type` here in order to prevent extra
  36. // elements like ripples or badges from throwing off the layout (see #11165).
  37. &:first-of-type {
  38. padding-left: $row-horizontal-padding;
  39. [dir='rtl'] &:not(:only-of-type) {
  40. padding-left: 0;
  41. padding-right: $row-horizontal-padding;
  42. }
  43. }
  44. &:last-of-type {
  45. padding-right: $row-horizontal-padding;
  46. [dir='rtl'] &:not(:only-of-type) {
  47. padding-right: 0;
  48. padding-left: $row-horizontal-padding;
  49. }
  50. }
  51. }
  52. mat-cell, mat-header-cell, mat-footer-cell {
  53. flex: 1;
  54. display: flex;
  55. align-items: center;
  56. overflow: hidden;
  57. word-wrap: break-word;
  58. min-height: inherit;
  59. }
  60. }