| /** |
| * Flex-based table structure |
| */ |
| $mat-header-row-height: 56px; |
| $mat-row-height: 48px; |
| $mat-row-horizontal-padding: 24px; |
| |
| // Only use tag name selectors here since the styles are shared between MDC and non-MDC |
| @mixin mat-private-table-flex-styles { |
| mat-table { |
| display: block; |
| } |
| |
| mat-header-row { |
| min-height: $mat-header-row-height; |
| } |
| |
| mat-row, mat-footer-row { |
| min-height: $mat-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; |
| |
| // Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo |
| // element that will stretch the row the correct height. See: |
| // https://connect.microsoft.com/IE/feedback/details/802625 |
| &::after { |
| display: inline-block; |
| min-height: inherit; |
| content: ''; |
| } |
| } |
| |
| 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: $mat-row-horizontal-padding; |
| |
| [dir='rtl'] &:not(:only-of-type) { |
| padding-left: 0; |
| padding-right: $mat-row-horizontal-padding; |
| } |
| } |
| |
| &:last-of-type { |
| padding-right: $mat-row-horizontal-padding; |
| |
| [dir='rtl'] &:not(:only-of-type) { |
| padding-right: 0; |
| padding-left: $mat-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; |
| } |
| } |