chenhaodong / mew-iview

Blame view

src/styles/components/table.less 8.4 KB
Edit Raw Normal View History
744eb0af   梁灏   update Table comp... 
1
 
  @table-prefix-cls: ~"@{css-prefix}table";
adaeca88   梁灏   update Table 
2
 
  @table-select-item-prefix-cls: ~"@{table-prefix-cls}-filter-select-item";
744eb0af   梁灏   update Table comp... 
3
4
 
  
  .@{table-prefix-cls} {
45e7ed7e   梁灏   update Table 
5
6
7
8
9
10
 
      &-wrapper{
          position: relative;
          border: 1px solid @border-color-base;
          border-bottom: 0;
          border-right: 0;
      }
39311a50   梁灏   update Table 
11
12
 
      width: inherit;
      height: 100%;
744eb0af   梁灏   update Table comp... 
13
 
      max-width: 100%;
0d136465   梁灏   update Table 
14
 
      overflow: hidden;
744eb0af   梁灏   update Table comp... 
15
16
 
      color: @text-color;
      font-size: @font-size-small;
0d136465   梁灏   update Table 
17
 
      background-color: #fff;
45e7ed7e   梁灏   update Table 
18
0d136465   梁灏   update Table 
19
 
      box-sizing: border-box;
45e7ed7e   梁灏   update Table 
20
 
      //position: relative;
744eb0af   梁灏   update Table comp... 
21
adaeca88   梁灏   update Table 
22
23
24
25
 
      &-hide{
          opacity: 0;
      }
a3547c1b   梁灏   update Table 
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
      &:before{
          content: '';
          width: 100%;
          height: 1px;
          position: absolute;
          left: 0;
          bottom: 0;
          background-color: @border-color-base;
          z-index: 1;
      }
  
      &:after{
          content: '';
          width: 1px;
          height: 100%;
          position: absolute;
          top: 0;
          right: 0;
          background-color: @border-color-base;
b8a43000   梁灏   update Table 
45
 
          z-index: 3;
a3547c1b   梁灏   update Table 
46
47
 
      }
e7e8c8ff   梁灏   update Table 
48
 
      &-with-header{
0f4ccf44   梁灏   release 0.9.9 
49
 
          //border-radius: @border-radius-base @border-radius-base 0 0;
e7e8c8ff   梁灏   update Table 
50
51
52
 
      }
  
      &-with-footer{
0f4ccf44   梁灏   release 0.9.9 
53
54
 
          //border: 1px solid @border-color-base;
          //border-radius: 0 0 @border-radius-base @border-radius-base;
e7e8c8ff   梁灏   update Table 
55
56
57
 
      }
  
      &-with-header&-with-footer{
0f4ccf44   梁灏   release 0.9.9 
58
 
          //border-radius: @border-radius-base;
e7e8c8ff   梁灏   update Table 
59
60
61
62
63
64
65
66
67
68
69
 
      }
  
      &-title, &-footer{
          height: 48px;
          line-height: 48px;
          border-bottom: 1px solid @border-color-split;
      }
      &-footer{
          border-bottom: none;
      }
192e2cb8   梁灏   update Table 
70
71
72
 
      &-header{
          overflow: hidden;
      }
e7e8c8ff   梁灏   update Table 
73
 
      &-body{
eec3859c   huanghong   fixed table scollbar 
74
 
          //overflow: auto;
db8d1f7d   梁灏   fixed #121 
75
 
          //position: relative;
9fea8e7d   huanghong   fixed ivu-table-f... 
76
77
78
79
80
81
82
 
  
      }
      &-overflowX{
          overflow-x: scroll;
      }
      &-overflowY{
          overflow-y: scroll;
e7e8c8ff   梁灏   update Table 
83
 
      }
8e171de8   huanghong   fixed #3124 
84
85
86
87
88
 
      &-tip{
          overflow-x: auto;
          overflow-y: hidden;
          //position: relative;
      }
e7e8c8ff   梁灏   update Table 
89
e7e8c8ff   梁灏   update Table 
90
91
92
93
94
95
96
97
98
 
      &-with-fixed-top&-with-footer{
          .@{table-prefix-cls}-footer{
              border-top: 1px solid @border-color-base;
          }
          tbody tr:last-child td{
              border-bottom: none;
          }
      }
0d136465   梁灏   update Table 
99
100
101
102
103
104
105
106
 
      th, td
      {
          min-width: 0;
          height: 48px;
          box-sizing: border-box;
          text-align: left;
          text-overflow: ellipsis;
          vertical-align: middle;
642299b9   梁灏   update Table 
107
 
          //position: relative;
0d136465   梁灏   update Table 
108
 
          border-bottom: 1px solid @border-color-split;
744eb0af   梁灏   update Table comp... 
109
110
 
      }
0d136465   梁灏   update Table 
111
112
 
      th {
          height: 40px;
744eb0af   梁灏   update Table comp... 
113
114
 
          white-space: nowrap;
          overflow: hidden;
0d136465   梁灏   update Table 
115
116
117
118
119
 
          background-color: @table-thead-bg;
      }
      td{
          background-color: #fff;
          transition: background-color @transition-time @ease-in-out;
744eb0af   梁灏   update Table comp... 
120
121
 
      }
0d136465   梁灏   update Table 
122
123
 
      th&-column,
      td&-column
744eb0af   梁灏   update Table comp... 
124
 
      {
0d136465   梁灏   update Table 
125
126
127
128
129
130
131
132
133
134
135
136
 
          &-left{
              text-align: left;
          }
          &-center{
              text-align: center;
          }
          &-right{
              text-align: right;
          }
      }
  
      & table{
a3547c1b   梁灏   update Table 
137
138
 
          //width: 100%;
          table-layout: fixed;
0d136465   梁灏   update Table 
139
140
141
142
143
144
145
146
147
148
 
      }
      &-border{
          th,td{
              border-right: 1px solid @border-color-split;
          }
      }
      &-cell{
          padding-left: 18px;
          padding-right: 18px;
          overflow: hidden;
744eb0af   梁灏   update Table comp... 
149
 
          text-overflow: ellipsis;
0d136465   梁灏   update Table 
150
151
152
 
          white-space: normal;
          word-break: break-all;
          box-sizing: border-box;
eedcba58   Rijn   Added ellipsis pr... 
153
154
155
156
157
158
159
 
  
          &-ellipsis {
              word-break: keep-all;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
          }
08fd628d   Aresn   Table support expand 
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
 
  
          &-with-expand{
              height: 47px;
              line-height: 47px;
              padding: 0;
              text-align: center;
          }
  
          &-expand{
              cursor: pointer;
              transition: transform @transition-time @ease-in-out;
              i{
                  font-size: @font-size-base;
              }
              &-expanded{
                  transform: rotate(90deg);
              }
          }
a0f48947   梁灏   Optimize Table ch... 
178
179
180
181
 
          &-sort{
              cursor: pointer;
              user-select: none;
          }
0d136465   梁灏   update Table 
182
 
      }
3ef4dfb9   梁灏   update Table 
183
184
185
 
      &-hidden{
          visibility: hidden;
      }
0d136465   梁灏   update Table 
186
187
 
      th &-cell{
          display: inline-block;
642299b9   梁灏   update Table 
188
 
          //position: relative;
0d136465   梁灏   update Table 
189
190
191
192
 
          word-wrap: normal;
          vertical-align: middle;
      }
367a4196   Aresn   update Table 
193
194
195
196
197
 
      td&-expanded-cell{
          padding: 20px 50px;
          background: @table-thead-bg;
      }
b8a43000   梁灏   update Table 
198
199
200
 
      &-stripe &-body,
      &-stripe &-fixed-body
      {
0d136465   梁灏   update Table 
201
202
203
204
205
 
          tr:nth-child(2n) {
              td{
                  background-color: @table-td-stripe-bg;
              }
          }
58cd4675   梁灏   fixed #1380 
206
207
208
209
210
211
 
          // #1380
          tr.@{table-prefix-cls}-row-hover{
              td{
                  background-color: @table-td-hover-bg;
              }
          }
0d136465   梁灏   update Table 
212
213
 
      }
abdec99d   梁灏   update Table 
214
 
      tr&-row-hover{
0d136465   梁灏   update Table 
215
216
217
218
219
220
221
222
223
224
225
226
227
 
          td{
              background-color: @table-td-hover-bg;
          }
      }
  
      &-large {
          font-size: @font-size-base;
          th{
              height: 48px;
          }
          td{
              height: 60px;
          }
e7e8c8ff   梁灏   update Table 
228
229
230
231
 
          &-title, &-footer{
              height: 60px;
              line-height: 60px;
          }
08fd628d   Aresn   Table support expand 
232
233
234
235
236
237
238
 
          .@{table-prefix-cls}-cell-with-expand{
              height: 59px;
              line-height: 59px;
              i{
                  font-size: @font-size-base+2;
              }
          }
0d136465   梁灏   update Table 
239
240
241
242
243
244
245
246
247
 
      }
  
      &-small{
          th{
              height: 32px;
          }
          td{
              height: 40px;
          }
e7e8c8ff   梁灏   update Table 
248
249
250
251
 
          &-title, &-footer{
              height: 40px;
              line-height: 40px;
          }
08fd628d   Aresn   Table support expand 
252
253
254
255
 
          .@{table-prefix-cls}-cell-with-expand{
              height: 39px;
              line-height: 39px;
          }
0d136465   梁灏   update Table 
256
257
258
 
      }
  
      &-row-highlight,
abdec99d   梁灏   update Table 
259
 
      tr&-row-highlight&-row-hover,
b8a43000   梁灏   update Table 
260
261
 
      &-stripe &-body tr&-row-highlight:nth-child(2n),
      &-stripe &-fixed-body tr&-row-highlight:nth-child(2n)
0d136465   梁灏   update Table 
262
263
264
265
 
      {
          td{
              background-color: @table-td-highlight-bg;
          }
744eb0af   梁灏   update Table comp... 
266
 
      }
7f34c510   梁灏   update Table 
267
268
269
270
271
 
  
      &-fixed, &-fixed-right{
          position: absolute;
          top: 0;
          left: 0;
39311a50   梁灏   update Table 
272
 
          box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.2);
7f34c510   梁灏   update Table 
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
 
  
          &::before {
              content: '';
              width: 100%;
              height: 1px;
              background-color: @border-color-base;
              position: absolute;
              left: 0;
              bottom: 0;
              z-index: 4;
          }
      }
      &-fixed-right{
          top: 0;
          left: auto;
          right: 0;
39311a50   梁灏   update Table 
289
 
          box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2);
7f34c510   梁灏   update Table 
290
 
      }
63014189   huanghong   fix table fixed-r... 
291
292
293
294
295
296
297
298
 
      &-fixed-right-header{
          position: absolute;
          top: -1px;
          right: 0;
          background-color: @table-thead-bg;
          border-top: 1px solid @border-color-base;
          border-bottom: 1px solid @border-color-split;
      }
b8a43000   梁灏   update Table 
299
 
      &-fixed-header{
1acabf79   梁灏   Table support mul... 
300
 
          overflow: hidden;
548eac43   梁灏   fixed #1387 and u... 
301
302
303
304
305
306
307
308
309
310
 
          &-with-empty{
              .@{table-prefix-cls}-hidden{
                  .@{table-prefix-cls}-sort{
                      display: none;
                  }
                  .@{table-prefix-cls}-cell span{
                      display: none;
                  }
              }
          }
b8a43000   梁灏   update Table 
311
312
313
314
315
316
 
      }
      &-fixed-body{
          overflow: hidden;
          position: relative;
          z-index: 3;
      }
52874e27   梁灏   update Table 
317
39311a50   梁灏   update Table 
318
319
320
321
322
323
324
325
326
327
328
 
      &-fixed-shadow {
          width: 1px;
          height: 100%;
          position: absolute;
          top: 0;
          right: 0;
          box-shadow: @shadow-right;
          overflow: hidden;
          z-index: 1;
      }
52874e27   梁灏   update Table 
329
330
331
 
      &-sort{
          .sortable();
      }
642299b9   梁灏   update Table 
332
333
334
335
 
      &-filter{
          display: inline-block;
          cursor: pointer;
          position: relative;
9f723b02   梁灏   update Table filt... 
336
337
 
          position: relative;
          top: 1px;
642299b9   梁灏   update Table 
338
339
340
341
342
343
344
 
  
          i{
              color: @btn-disable-color;
              transition: color @transition-time @ease-in-out;
              &:hover{
                  color: inherit;
              }
99f80db0   梁灏   update Table 
345
346
347
348
349
350
351
352
353
354
355
356
357
358
 
              &.on{
                  color: @primary-color;
              }
          }
          &-list{
              padding: 8px 0 0;
              &-item{
                  padding: 0 12px 8px;
  
                  .ivu-checkbox-wrapper + .ivu-checkbox-wrapper{
                      margin: 0;
                  }
                  label {
                      display: block;
99f80db0   梁灏   update Table 
359
360
361
362
363
364
 
  
                      & > span{
                          margin-right: 4px;
                      }
                  }
              }
adaeca88   梁灏   update Table 
365
366
367
368
 
              ul{
                  padding-bottom: 8px;
              }
              .select-item(@table-prefix-cls, @table-select-item-prefix-cls);
99f80db0   梁灏   update Table 
369
370
371
372
 
          }
          &-footer{
              padding: 4px;
              border-top: 1px solid @border-color-split;
19c208d3   梁灏   Poptip add prop `... 
373
374
375
376
377
378
379
 
              overflow: hidden;
              button:first-child{
                  float: left;
              }
              button:last-child{
                  float: right;
              }
99f80db0   梁灏   update Table 
380
 
          }
642299b9   梁灏   update Table 
381
 
      }
cf7887ba   Rijn   Fixed #151 
382
383
384
385
386
387
388
389
390
391
 
  
      &-tip {
          table {
              width: 100%;
  
              td {
                text-align: center;
              }
          }
      }
55f90d87   梁灏   fixed #1648 
392
393
394
395
 
  
      &-expanded-hidden{
          visibility: hidden;
      }
eedcba58   Rijn   Added ellipsis pr... 
396
 
  }
19c208d3   梁灏   Poptip add prop `... 
397
398
399
400
401
402
403
 
  .ivu-table-popper{
      min-width: 0;
      text-align: left;
      .ivu-poptip-body{
          padding: 0;
      }
  }