Skip to content

Commit dfabefb

Browse files
annieywannieyw
committed
fix(material-experimental/mdc-table): extract variables and flex based tables styles into private mixin
1 parent bb85910 commit dfabefb

File tree

3 files changed

+75
-139
lines changed

3 files changed

+75
-139
lines changed

‎src/material-experimental/mdc-table/table.scss

Lines changed: 2 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
@use '../../material/core/style/vendor-prefixes';
22
@import '@material/data-table/mixins.import';
33
@import '../mdc-helpers/mdc-helpers';
4+
@import '../../material/table/table-flex-styles';
45

56
@include mdc-data-table-core-styles($query: $mat-base-styles-without-animation-query);
6-
7-
$mat-header-row-height: 56px;
8-
$mat-row-height: 48px;
9-
$mat-row-horizontal-padding: 24px;
7+
@include _mat-table-flex-styles;
108

119
.mat-table-sticky {
1210
@include vendor-prefixes.position-sticky;
@@ -19,69 +17,3 @@ $mat-row-horizontal-padding: 24px;
1917
.mdc-data-table__table {
2018
table-layout: auto;
2119
}
22-
23-
/**
24-
* Flex-based table structure
25-
*/
26-
mat-table {
27-
display: block;
28-
}
29-
30-
mat-header-row {
31-
min-height: $mat-header-row-height;
32-
}
33-
34-
mat-row, mat-footer-row {
35-
min-height: $mat-row-height;
36-
}
37-
38-
mat-row, mat-header-row, mat-footer-row {
39-
display: flex;
40-
// Define a border style, but then widths default to 3px. Reset them to 0px except the bottom
41-
// which should be 1px;
42-
border-width: 0;
43-
border-bottom-width: 1px;
44-
border-style: solid;
45-
align-items: center;
46-
box-sizing: border-box;
47-
48-
// Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo
49-
// element that will stretch the row the correct height. See:
50-
// https://connect.microsoft.com/IE/feedback/details/802625
51-
&::after {
52-
display: inline-block;
53-
min-height: inherit;
54-
content: '';
55-
}
56-
}
57-
58-
mat-cell, mat-header-cell, mat-footer-cell {
59-
// Note: we use `first-of-type`/`last-of-type` here in order to prevent extra
60-
// elements like ripples or badges from throwing off the layout (see #11165).
61-
&:first-of-type {
62-
padding-left: $mat-row-horizontal-padding;
63-
64-
[dir='rtl'] &:not(:only-of-type) {
65-
padding-left: 0;
66-
padding-right: $mat-row-horizontal-padding;
67-
}
68-
}
69-
70-
&:last-of-type {
71-
padding-right: $mat-row-horizontal-padding;
72-
73-
[dir='rtl'] &:not(:only-of-type) {
74-
padding-right: 0;
75-
padding-left: $mat-row-horizontal-padding;
76-
}
77-
}
78-
}
79-
80-
mat-cell, mat-header-cell, mat-footer-cell {
81-
flex: 1;
82-
display: flex;
83-
align-items: center;
84-
overflow: hidden;
85-
word-wrap: break-word;
86-
min-height: inherit;
87-
}

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

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

‎src/material/table/table.scss

Lines changed: 2 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,7 @@
11
@use '../core/style/vendor-prefixes';
2+
@import './table-flex-styles';
23

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

736
/**
747
* Native HTML table structure

0 commit comments

Comments
 (0)