[6a3a178] | 1 | // Flex-based table structure
|
---|
| 2 | $header-row-height: 56px;
|
---|
| 3 | $row-height: 48px;
|
---|
| 4 | $row-horizontal-padding: 24px;
|
---|
| 5 |
|
---|
| 6 | // Only use tag name selectors here since the styles are shared between MDC and non-MDC
|
---|
| 7 | @mixin private-table-flex-styles {
|
---|
| 8 | mat-table {
|
---|
| 9 | display: block;
|
---|
| 10 | }
|
---|
| 11 |
|
---|
| 12 | mat-header-row {
|
---|
| 13 | min-height: $header-row-height;
|
---|
| 14 | }
|
---|
| 15 |
|
---|
| 16 | mat-row, mat-footer-row {
|
---|
| 17 | min-height: $row-height;
|
---|
| 18 | }
|
---|
| 19 |
|
---|
| 20 | mat-row, mat-header-row, mat-footer-row {
|
---|
| 21 | display: flex;
|
---|
| 22 | // Define a border style, but then widths default to 3px. Reset them to 0px except the bottom
|
---|
| 23 | // which should be 1px;
|
---|
| 24 | border-width: 0;
|
---|
| 25 | border-bottom-width: 1px;
|
---|
| 26 | border-style: solid;
|
---|
| 27 | align-items: center;
|
---|
| 28 | box-sizing: border-box;
|
---|
| 29 |
|
---|
| 30 | // Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo
|
---|
| 31 | // element that will stretch the row the correct height. See:
|
---|
| 32 | // https://connect.microsoft.com/IE/feedback/details/802625
|
---|
| 33 | &::after {
|
---|
| 34 | display: inline-block;
|
---|
| 35 | min-height: inherit;
|
---|
| 36 | content: '';
|
---|
| 37 | }
|
---|
| 38 | }
|
---|
| 39 |
|
---|
| 40 | mat-cell, mat-header-cell, mat-footer-cell {
|
---|
| 41 | // Note: we use `first-of-type`/`last-of-type` here in order to prevent extra
|
---|
| 42 | // elements like ripples or badges from throwing off the layout (see #11165).
|
---|
| 43 | &:first-of-type {
|
---|
| 44 | padding-left: $row-horizontal-padding;
|
---|
| 45 |
|
---|
| 46 | [dir='rtl'] &:not(:only-of-type) {
|
---|
| 47 | padding-left: 0;
|
---|
| 48 | padding-right: $row-horizontal-padding;
|
---|
| 49 | }
|
---|
| 50 | }
|
---|
| 51 |
|
---|
| 52 | &:last-of-type {
|
---|
| 53 | padding-right: $row-horizontal-padding;
|
---|
| 54 |
|
---|
| 55 | [dir='rtl'] &:not(:only-of-type) {
|
---|
| 56 | padding-right: 0;
|
---|
| 57 | padding-left: $row-horizontal-padding;
|
---|
| 58 | }
|
---|
| 59 | }
|
---|
| 60 | }
|
---|
| 61 |
|
---|
| 62 | mat-cell, mat-header-cell, mat-footer-cell {
|
---|
| 63 | flex: 1;
|
---|
| 64 | display: flex;
|
---|
| 65 | align-items: center;
|
---|
| 66 | overflow: hidden;
|
---|
| 67 | word-wrap: break-word;
|
---|
| 68 | min-height: inherit;
|
---|
| 69 | }
|
---|
| 70 | }
|
---|