chenhaodong / mew-iview

Blame view

src/styles/components/table.less 6.14 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{
a3547c1b   梁灏   update Table 
74
 
          overflow: auto;
e7e8c8ff   梁灏   update Table 
75
76
77
 
          position: relative;
      }
e7e8c8ff   梁灏   update Table 
78
79
80
81
82
83
84
85
86
 
      &-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 
87
88
89
90
91
92
93
94
 
      th, td
      {
          min-width: 0;
          height: 48px;
          box-sizing: border-box;
          text-align: left;
          text-overflow: ellipsis;
          vertical-align: middle;
642299b9   梁灏   update Table 
95
 
          //position: relative;
0d136465   梁灏   update Table 
96
 
          border-bottom: 1px solid @border-color-split;
744eb0af   梁灏   update Table comp... 
97
98
 
      }
0d136465   梁灏   update Table 
99
100
 
      th {
          height: 40px;
744eb0af   梁灏   update Table comp... 
101
102
 
          white-space: nowrap;
          overflow: hidden;
0d136465   梁灏   update Table 
103
104
105
106
107
 
          background-color: @table-thead-bg;
      }
      td{
          background-color: #fff;
          transition: background-color @transition-time @ease-in-out;
744eb0af   梁灏   update Table comp... 
108
109
 
      }
0d136465   梁灏   update Table 
110
111
 
      th&-column,
      td&-column
744eb0af   梁灏   update Table comp... 
112
 
      {
0d136465   梁灏   update Table 
113
114
115
116
117
118
119
120
121
122
123
124
 
          &-left{
              text-align: left;
          }
          &-center{
              text-align: center;
          }
          &-right{
              text-align: right;
          }
      }
  
      & table{
a3547c1b   梁灏   update Table 
125
126
 
          //width: 100%;
          table-layout: fixed;
0d136465   梁灏   update Table 
127
128
129
130
131
132
133
134
135
136
 
      }
      &-border{
          th,td{
              border-right: 1px solid @border-color-split;
          }
      }
      &-cell{
          padding-left: 18px;
          padding-right: 18px;
          overflow: hidden;
744eb0af   梁灏   update Table comp... 
137
 
          text-overflow: ellipsis;
0d136465   梁灏   update Table 
138
139
140
141
 
          white-space: normal;
          word-break: break-all;
          box-sizing: border-box;
      }
3ef4dfb9   梁灏   update Table 
142
143
144
 
      &-hidden{
          visibility: hidden;
      }
0d136465   梁灏   update Table 
145
146
 
      th &-cell{
          display: inline-block;
642299b9   梁灏   update Table 
147
 
          //position: relative;
0d136465   梁灏   update Table 
148
149
150
151
 
          word-wrap: normal;
          vertical-align: middle;
      }
b8a43000   梁灏   update Table 
152
153
154
 
      &-stripe &-body,
      &-stripe &-fixed-body
      {
0d136465   梁灏   update Table 
155
156
157
158
159
160
161
 
          tr:nth-child(2n) {
              td{
                  background-color: @table-td-stripe-bg;
              }
          }
      }
abdec99d   梁灏   update Table 
162
 
      tr&-row-hover{
0d136465   梁灏   update Table 
163
164
165
166
167
168
169
170
171
172
173
174
175
 
          td{
              background-color: @table-td-hover-bg;
          }
      }
  
      &-large {
          font-size: @font-size-base;
          th{
              height: 48px;
          }
          td{
              height: 60px;
          }
e7e8c8ff   梁灏   update Table 
176
177
178
179
 
          &-title, &-footer{
              height: 60px;
              line-height: 60px;
          }
0d136465   梁灏   update Table 
180
181
182
183
184
185
186
187
188
 
      }
  
      &-small{
          th{
              height: 32px;
          }
          td{
              height: 40px;
          }
e7e8c8ff   梁灏   update Table 
189
190
191
192
 
          &-title, &-footer{
              height: 40px;
              line-height: 40px;
          }
0d136465   梁灏   update Table 
193
194
195
 
      }
  
      &-row-highlight,
abdec99d   梁灏   update Table 
196
 
      tr&-row-highlight&-row-hover,
b8a43000   梁灏   update Table 
197
198
 
      &-stripe &-body tr&-row-highlight:nth-child(2n),
      &-stripe &-fixed-body tr&-row-highlight:nth-child(2n)
0d136465   梁灏   update Table 
199
200
201
202
 
      {
          td{
              background-color: @table-td-highlight-bg;
          }
744eb0af   梁灏   update Table comp... 
203
 
      }
7f34c510   梁灏   update Table 
204
205
206
207
208
 
  
      &-fixed, &-fixed-right{
          position: absolute;
          top: 0;
          left: 0;
39311a50   梁灏   update Table 
209
 
          box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.2);
7f34c510   梁灏   update Table 
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
 
  
          &::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 
226
 
          box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2);
7f34c510   梁灏   update Table 
227
 
      }
b8a43000   梁灏   update Table 
228
229
 
      &-fixed-header{
          overflow: hidden;
b8a43000   梁灏   update Table 
230
231
232
233
234
235
 
      }
      &-fixed-body{
          overflow: hidden;
          position: relative;
          z-index: 3;
      }
52874e27   梁灏   update Table 
236
39311a50   梁灏   update Table 
237
238
239
240
241
242
243
244
245
246
247
 
      &-fixed-shadow {
          width: 1px;
          height: 100%;
          position: absolute;
          top: 0;
          right: 0;
          box-shadow: @shadow-right;
          overflow: hidden;
          z-index: 1;
      }
52874e27   梁灏   update Table 
248
249
250
 
      &-sort{
          .sortable();
      }
642299b9   梁灏   update Table 
251
252
253
254
255
256
257
258
259
260
261
 
      &-filter{
          display: inline-block;
          cursor: pointer;
          position: relative;
  
          i{
              color: @btn-disable-color;
              transition: color @transition-time @ease-in-out;
              &:hover{
                  color: inherit;
              }
99f80db0   梁灏   update Table 
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
 
              &.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;
                      margin-bottom: 4px;
  
                      & > span{
                          margin-right: 4px;
                      }
                  }
              }
adaeca88   梁灏   update Table 
283
284
285
286
 
              ul{
                  padding-bottom: 8px;
              }
              .select-item(@table-prefix-cls, @table-select-item-prefix-cls);
99f80db0   梁灏   update Table 
287
288
289
290
 
          }
          &-footer{
              padding: 4px;
              border-top: 1px solid @border-color-split;
642299b9   梁灏   update Table 
291
292
293
294
295
 
          }
      }
      .ivu-poptip-popper{
          min-width: 0;
          text-align: left;
99f80db0   梁灏   update Table 
296
297
298
299
 
  
          .ivu-poptip-body{
              padding: 0;
          }
642299b9   梁灏   update Table 
300
 
      }
744eb0af   梁灏   update Table comp... 
301
 
  }