Skip to content

Commit 023efdc

Browse files
tangjinzhoutangjinzhou
committed
feat: perf small table style #3221 
1 parent 1be269d commit 023efdc

File tree

1 file changed

+41
-163
lines changed

1 file changed

+41
-163
lines changed

‎components/table/style/size.less‎

Lines changed: 41 additions & 163 deletions
Original file line numberDiff line numberDiff line change
@@ -3,177 +3,55 @@
33
@table-padding-vertical-sm: @table-padding-vertical / 2;
44
@table-padding-horizontal-sm: @table-padding-horizontal / 2;
55

6-
.@{table-prefix-cls}-middle {
7-
> .@{table-prefix-cls}-title,
8-
> .@{table-prefix-cls}-content > .@{table-prefix-cls}-footer {
9-
padding: @table-padding-vertical-md @table-padding-horizontal-md;
10-
}
11-
> .@{table-prefix-cls}-content {
12-
> .@{table-prefix-cls}-header > table,
13-
> .@{table-prefix-cls}-body > table,
14-
> .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-header > table,
15-
> .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > table,
16-
> .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-header > table,
17-
> .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-header > table,
18-
> .@{table-prefix-cls}-fixed-left
19-
> .@{table-prefix-cls}-body-outer
20-
> .@{table-prefix-cls}-body-inner
21-
> table,
22-
> .@{table-prefix-cls}-fixed-right
23-
> .@{table-prefix-cls}-body-outer
24-
> .@{table-prefix-cls}-body-inner
25-
> table {
26-
> .@{table-prefix-cls}-thead > tr > th,
27-
> .@{table-prefix-cls}-tbody > tr > td {
28-
padding: @table-padding-vertical-md @table-padding-horizontal-md;
6+
.table-size(@size, @padding-vertical, @padding-horizontal) {
7+
.@{table-prefix-cls}.@{table-prefix-cls}-@{size} {
8+
> .@{table-prefix-cls}-title,
9+
> .@{table-prefix-cls}-content > .@{table-prefix-cls}-footer {
10+
padding: @padding-vertical @padding-horizontal;
11+
}
12+
> .@{table-prefix-cls}-content {
13+
> .@{table-prefix-cls}-header > table,
14+
> .@{table-prefix-cls}-body > table,
15+
> .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-header > table,
16+
> .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > table,
17+
> .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-header > table,
18+
> .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-header > table,
19+
> .@{table-prefix-cls}-fixed-left
20+
> .@{table-prefix-cls}-body-outer
21+
> .@{table-prefix-cls}-body-inner
22+
> table,
23+
> .@{table-prefix-cls}-fixed-right
24+
> .@{table-prefix-cls}-body-outer
25+
> .@{table-prefix-cls}-body-inner
26+
> table {
27+
> .@{table-prefix-cls}-thead > tr > th,
28+
> .@{table-prefix-cls}-tbody > tr > td {
29+
padding: @padding-vertical @padding-horizontal;
30+
}
2931
}
3032
}
31-
}
32-
33-
tr.@{table-prefix-cls}-expanded-row td > .@{table-prefix-cls}-wrapper {
34-
margin: -@table-padding-vertical-md -@table-padding-horizontal / 2 -@table-padding-vertical-md -
35-
1px;
36-
}
37-
}
38-
39-
.@{table-prefix-cls}-small {
40-
border: @border-width-base @border-style-base @border-color-split;
41-
border-radius: @table-border-radius-base;
42-
43-
> .@{table-prefix-cls}-title,
44-
> .@{table-prefix-cls}-content > .@{table-prefix-cls}-footer {
45-
padding: @table-padding-vertical-sm @table-padding-horizontal-sm;
46-
}
4733

48-
> .@{table-prefix-cls}-title {
49-
top: 0;
50-
border-bottom: @border-width-base @border-style-base @border-color-split;
51-
}
52-
53-
> .@{table-prefix-cls}-content > .@{table-prefix-cls}-footer {
54-
background-color: transparent;
55-
border-top: @border-width-base @border-style-base @border-color-split;
56-
&::before {
57-
background-color: transparent;
34+
tr.@{table-prefix-cls}-expanded-row td > .@{table-prefix-cls}-wrapper {
35+
margin: -@padding-vertical -@table-padding-horizontal / 2 -@padding-vertical -
36+
1px;
5837
}
5938
}
39+
}
6040

61-
> .@{table-prefix-cls}-content {
62-
> .@{table-prefix-cls}-body {
63-
margin: 0 @table-padding-horizontal-sm;
64-
}
65-
66-
> .@{table-prefix-cls}-header > table,
67-
> .@{table-prefix-cls}-body > table,
68-
> .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-header > table,
69-
> .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > table,
70-
> .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-header > table,
71-
> .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-header > table,
72-
> .@{table-prefix-cls}-fixed-left
73-
> .@{table-prefix-cls}-body-outer
74-
> .@{table-prefix-cls}-body-inner
75-
> table,
76-
> .@{table-prefix-cls}-fixed-right
77-
> .@{table-prefix-cls}-body-outer
78-
> .@{table-prefix-cls}-body-inner
79-
> table {
80-
border: 0;
81-
> .@{table-prefix-cls}-thead > tr > th,
82-
> .@{table-prefix-cls}-tbody > tr > td {
83-
padding: @table-padding-vertical-sm @table-padding-horizontal-sm;
84-
}
85-
> .@{table-prefix-cls}-thead > tr > th {
86-
background-color: @table-header-bg-sm;
87-
}
88-
> .@{table-prefix-cls}-thead > tr {
89-
border-bottom: @border-width-base @border-style-base @border-color-split;
90-
}
91-
> .@{table-prefix-cls}-thead > tr > th.@{table-prefix-cls}-column-sort {
92-
background-color: @table-body-sort-bg;
93-
}
94-
}
95-
96-
> .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-header > table,
97-
> .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > table,
98-
> .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-header > table,
99-
> .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-header > table,
100-
> .@{table-prefix-cls}-fixed-left
101-
> .@{table-prefix-cls}-body-outer
102-
> .@{table-prefix-cls}-body-inner
103-
> table,
104-
> .@{table-prefix-cls}-fixed-right
105-
> .@{table-prefix-cls}-body-outer
106-
> .@{table-prefix-cls}-body-inner
107-
> table {
108-
padding: 0;
109-
}
110-
111-
.@{table-prefix-cls}-header {
112-
background-color: @table-header-bg-sm;
113-
border-radius: @table-border-radius-base @table-border-radius-base 0 0;
114-
}
115-
116-
.@{table-prefix-cls}-placeholder,
117-
.@{table-prefix-cls}-row:last-child td {
118-
border-bottom: 0;
119-
}
120-
}
121-
122-
&.@{table-prefix-cls}-bordered {
123-
border-right: 0;
124-
125-
.@{table-prefix-cls}-title {
126-
border: 0;
127-
border-right: @border-width-base @border-style-base @border-color-split;
128-
border-bottom: @border-width-base @border-style-base @border-color-split;
129-
}
130-
131-
.@{table-prefix-cls}-content {
132-
border-right: @border-width-base @border-style-base @border-color-split;
133-
}
134-
135-
.@{table-prefix-cls}-footer {
136-
border: 0;
137-
border-top: @border-width-base @border-style-base @border-color-split;
138-
&::before {
139-
display: none;
140-
}
141-
}
142-
143-
.@{table-prefix-cls}-placeholder {
144-
border-right: 0;
145-
border-bottom: 0;
146-
border-left: 0;
147-
}
14841

149-
.@{table-prefix-cls}-thead > tr > th.@{table-prefix-cls}-row-cell-last,
150-
.@{table-prefix-cls}-tbody > tr > td:last-child {
151-
border-right: none;
152-
}
42+
// ================================================================
43+
// = Middle =
44+
// ================================================================
45+
.table-size(~'middle', @table-padding-vertical-md, @table-padding-horizontal-md);
15346

154-
.@{table-prefix-cls}-fixed-left {
155-
.@{table-prefix-cls}-thead > tr > th:last-child,
156-
.@{table-prefix-cls}-tbody > tr > td:last-child {
157-
border-right: @border-width-base @border-style-base @border-color-split;
158-
}
159-
}
47+
// ================================================================
48+
// = Small =
49+
// ================================================================
50+
.table-size(~'small', @table-padding-vertical-sm, @table-padding-horizontal-sm);
16051

161-
.@{table-prefix-cls}-fixed-right {
162-
border-right: @border-width-base @border-style-base @border-color-split;
163-
border-left: @border-width-base @border-style-base @border-color-split;
164-
}
165-
}
166-
167-
tr.@{table-prefix-cls}-expanded-row td > .@{table-prefix-cls}-wrapper {
168-
margin: -@table-padding-vertical-sm -@table-padding-horizontal / 2 -@table-padding-vertical-sm -
169-
1px;
170-
}
171-
172-
// https://github.com/ant-design/ant-design/issues/19287#issuecomment-544368967
173-
&.@{table-prefix-cls}-fixed-header
174-
> .@{table-prefix-cls}-content
175-
> .@{table-prefix-cls}-scroll
176-
> .@{table-prefix-cls}-body {
177-
border-radius: 0 0 @table-border-radius-base @table-border-radius-base;
52+
.@{table-prefix-cls}-small {
53+
.@{table-prefix-cls}-selection-column {
54+
width: 46px;
55+
min-width: 46px;
17856
}
17957
}

0 commit comments

Comments
 (0)