diff --git a/src/material/table/table.scss b/src/material/table/table.scss index 010bb7a2b037..a163bbf4812f 100644 --- a/src/material/table/table.scss +++ b/src/material/table/table.scss @@ -14,7 +14,10 @@ $fallbacks: m3-table.get-tokens(); @mixin _cell-border { border-bottom-color: token-utils.slot( - table-row-item-outline-color, $fallbacks, rgba(0, 0, 0, 0.12)); + table-row-item-outline-color, + $fallbacks, + rgba(0, 0, 0, 0.12) + ); border-bottom-width: token-utils.slot(table-row-item-outline-width, $fallbacks, 1px); border-bottom-style: solid; } @@ -39,12 +42,8 @@ $fallbacks: m3-table.get-tokens(); .mdc-data-table__cell { box-sizing: border-box; overflow: hidden; - text-align: left; + text-align: start; text-overflow: ellipsis; - - [dir='rtl'] & { - text-align: right; - } } .mdc-data-table__cell, @@ -87,7 +86,10 @@ $fallbacks: m3-table.get-tokens(); height: token-utils.slot(table-footer-container-height, $fallbacks, 52px); color: token-utils.slot(table-row-item-label-text-color, $fallbacks, rgba(0, 0, 0, 0.87)); font-family: token-utils.slot( - table-footer-supporting-text-font, $fallbacks, (Roboto, sans-serif)); + table-footer-supporting-text-font, + $fallbacks, + (Roboto, sans-serif) + ); line-height: token-utils.slot(table-footer-supporting-text-line-height, $fallbacks); font-size: token-utils.slot(table-footer-supporting-text-size, $fallbacks, 14px); font-weight: token-utils.slot(table-footer-supporting-text-weight, $fallbacks); @@ -103,11 +105,7 @@ $fallbacks: m3-table.get-tokens(); text-overflow: ellipsis; overflow: hidden; outline: none; - text-align: left; - - [dir='rtl'] & { - text-align: right; - } + text-align: start; .mdc-data-table__row:last-child > & { border-bottom: none; @@ -131,15 +129,22 @@ $fallbacks: m3-table.get-tokens(); // MDC table rows are styled with a top border, whereas our legacy flex table styles rows with // a bottom border. Remove the bottom border style from the rows and let MDC display its top // border. -mat-row.mat-mdc-row, mat-header-row.mat-mdc-header-row, mat-footer-row.mat-mdc-footer-row { +mat-row.mat-mdc-row, +mat-header-row.mat-mdc-header-row, +mat-footer-row.mat-mdc-footer-row { border-bottom: none; } // Cells need to inherit their background in order to overlap each other when sticky. // The background needs to be inherited from the table, tbody/tfoot, row, and cell. -.mat-mdc-table tbody, .mat-mdc-table tfoot, .mat-mdc-table thead, -.mat-mdc-cell, .mat-mdc-footer-cell, -.mat-mdc-header-row, .mat-mdc-row, .mat-mdc-footer-row, +.mat-mdc-table tbody, +.mat-mdc-table tfoot, +.mat-mdc-table thead, +.mat-mdc-cell, +.mat-mdc-footer-cell, +.mat-mdc-header-row, +.mat-mdc-row, +.mat-mdc-footer-row, .mat-mdc-table .mat-mdc-header-cell { background: inherit; }