UNPKG

19.8 kBSCSSView Raw
1@charset "UTF-8";
2@import "../core/index-noreset.scss";
3@import "scss/variable";
4@import "scss/mixin";
5/* put your code here */
6#{$table-prefix} {
7 @include box-sizing;
8 position: relative;
9 border-top-left-radius: $table-header-corner-top;
10 border-top-right-radius: $table-header-corner-top;
11 border-bottom-left-radius: $table-header-corner-bottom;
12 border-bottom-right-radius: $table-header-corner-bottom;
13 border-top: $table-normal-border-width $table-normal-border-style $table-normal-border-color;
14 border-left: $table-normal-border-width $table-normal-border-style $table-normal-border-color;
15
16 #{$table-prefix}-header tr:first-child th:first-child {
17 border-top-left-radius: $table-header-corner-top;
18 }
19 #{$table-prefix}-header tr:first-child th:last-child {
20 border-top-right-radius: $table-header-corner-top;
21 }
22
23 #{$table-prefix}-header tr:last-child th:first-child {
24 border-bottom-left-radius: $table-header-corner-bottom;
25 }
26 #{$table-prefix}-header tr:last-child th:last-child {
27 border-bottom-right-radius: $table-header-corner-bottom;
28 }
29
30
31 &#{$table-prefix}-layout-fixed {
32 overflow: auto;
33 table {
34 table-layout: fixed;
35 }
36 }
37 &#{$table-prefix}-layout-auto table {
38 table-layout: auto;
39 }
40
41 &#{$table-prefix}-small {
42 th {
43 #{$table-prefix}-cell-wrapper {
44 padding: $table-size-s-header-padding-top $table-size-s-header-padding-left;
45 }
46 }
47
48 td {
49 #{$table-prefix}-cell-wrapper {
50 padding: $table-size-s-cell-padding-top $table-size-s-cell-padding-left;
51 }
52 }
53
54 #{$table-prefix}-prerow #{$table-prefix}-cell-wrapper {
55 padding: $s-2 $s-2;
56 }
57 }
58
59 table {
60 border-collapse: separate;
61 border-spacing: 0;
62 width: 100%;
63 background: $table-row-bg;
64 border-top-left-radius: $table-header-corner-top;
65 border-top-right-radius: $table-header-corner-top;
66 border-bottom-left-radius: $table-header-corner-bottom;
67 border-bottom-right-radius: $table-header-corner-bottom;
68 tr:first-child td {
69 border-top-width: 0;
70 }
71 }
72 th {
73 padding: 0;
74 background: $table-th-bg;
75 color: $table-th-color;
76 text-align: left;
77 font-weight: $table-th-font-weight;
78 border-right: $table-normal-border-width $table-normal-border-style $table-normal-border-color;
79 border-bottom: $table-normal-border-width $table-normal-border-style $table-normal-border-color;
80
81 #{$table-prefix}-cell-wrapper {
82 padding: $table-header-padding-top $table-header-padding-left;
83 overflow: hidden;
84 text-overflow: ellipsis;
85 word-break: break-all;
86 }
87
88 &#{$table-prefix}-prerow #{$table-prefix}-cell-wrapper {
89 padding: $s-3 $s-4;
90 }
91 // 用户通过Column参数配置word-break
92 &#{$table-prefix}-word-break-word #{$table-prefix}-cell-wrapper {
93 word-break: break-word;
94 }
95
96 &#{$table-prefix}-fix-left,
97 &#{$table-prefix}-fix-right {
98 z-index: 1;
99 }
100 }
101 &-affix {
102 z-index: 1;
103 overflow: hidden;
104 }
105 &-stickylock {
106 #{$table-prefix}-affix {
107 z-index: 9;
108 }
109 }
110 &-header-resizable {
111 position: relative;
112 #{$table-prefix}-resize-handler {
113 position: absolute;
114 right: -5px;
115 top: 0;
116 bottom: 0;
117 width: 10px;
118 background: transparent;
119 cursor: ew-resize;
120 &::after {
121 position: absolute;
122 display: block;
123 content: ' ';
124 width: $line-2;
125 height: 100%;
126 right: 50%;
127 }
128 &:hover::after {
129 z-index: 1;
130 background: $color-brand1-6;
131 }
132 }
133 }
134 &#{$table-prefix}-lock-left &-header-resizable,
135 &#{$table-prefix}-lock-right &-header-resizable {
136 #{$table-prefix}-resize-handler {
137 cursor: initial;
138 &:hover::after {
139 z-index: -1;
140 }
141 }
142 }
143 td {
144 padding: 0;
145 border-right: $table-normal-border-width $table-normal-border-style $table-normal-border-color;
146 border-bottom: $table-normal-border-width $table-normal-border-style $table-normal-border-color;
147
148 #{$table-prefix}-cell-wrapper {
149 padding: $table-cell-padding-top $table-cell-padding-left;
150 overflow: hidden;
151 text-overflow: ellipsis;
152 word-break: break-all;
153 .#{$css-prefix}icon-arrow-down.#{$css-prefix}table-tree-arrow,
154 .#{$css-prefix}icon-arrow-right.#{$css-prefix}table-tree-arrow,
155 #{$table-prefix}-tree-placeholder {
156 margin-right: $table-header-icon-margin-left;
157 outline: 0;
158 cursor: pointer;
159 }
160 .#{$css-prefix}icon-arrow-right.#{$css-prefix}table-tree-arrow {
161 @include icon-size($table-tree-expanded-icon-size);
162 &::before {
163 content: $table-tree-fold-icon-content;
164 }
165 }
166
167 .#{$css-prefix}icon-arrow-down.#{$css-prefix}table-tree-arrow {
168 @include icon-size($table-tree-expanded-icon-size);
169 &::before {
170 content: $table-tree-unfold-icon-content;
171 }
172 }
173 }
174 &#{$table-prefix}-prerow #{$table-prefix}-cell-wrapper {
175 padding: $s-3 $s-4;
176 }
177 // 用户通过Column参数配置word-break
178 &#{$table-prefix}-word-break-word #{$table-prefix}-cell-wrapper {
179 word-break: break-word;
180 }
181 }
182
183 #{$table-prefix}-expanded,
184 #{$table-prefix}-selection {
185 #{$table-prefix}-cell-wrapper {
186 overflow: visible;
187 }
188 }
189 &.no-header table tr:first-child td {
190 border-top-width: 1px;
191 }
192 &.only-bottom-border {
193 border-width: 0;
194 th {
195 border-width: 0 0 $table-normal-border-width 0;
196 }
197 td {
198 border-width: 0 0 $table-normal-border-width 0;
199 }
200
201 table tr td:first-child,
202 table tr th:first-child {
203 border-left-width: 0;
204 }
205 @include table-last-child-border(0);
206 }
207 &-loading {
208 display: block;
209 }
210 &.zebra {
211 tr:nth-child(odd) td {
212 background: $table-td-normal;
213 }
214 tr:nth-child(even) td {
215 background: $table-td-gray;
216 }
217 #{$table-prefix}-row.hovered td {
218 background: $table-row-hover-bg;
219 color: $table-row-hover-color;
220 }
221 #{$table-prefix}-cell.hovered {
222 background: $table-row-hover-bg;
223 color: $table-row-hover-color;
224 }
225 #{$table-prefix}-row.selected td {
226 background: $table-row-selected-bg;
227 color: $table-row-selected-color;
228 }
229 }
230 &-empty {
231 color: $table-empty-color;
232 padding: $table-empty-padding 0;
233 text-align: center;
234 }
235 &-expanded-row {
236 > td {
237 border-width: 0 0 $table-normal-border-width 0;
238 &:first-child {
239 border-left-width: $table-normal-border-width;
240 }
241 &:last-child {
242 border-right-width: $table-normal-border-width;
243 }
244 }
245
246
247 &:last-child > td {
248 border-bottom-width: $table-normal-border-width;
249 }
250
251 #{$table-prefix} {
252 border-top: 0;
253 border-left: 0;
254
255 th, td {
256 border-right: $table-normal-border-width $table-normal-border-style $table-normal-border-color;
257 }
258
259 &.only-bottom-border {
260 th, td {
261 border-right: 0;
262 }
263 }
264
265 & .last td {
266 border-bottom: 0;
267 }
268 & td.last,
269 & th:last-child {
270 border-right: 0;
271 }
272 // &-expanded-area:after {
273 // position: absolute;
274 // top: 0;
275 // right: 0;
276 // bottom: 0;
277 // border-right: $table-normal-border-width $table-normal-border-style $table-normal-border-color;
278 // content: "";
279 // }
280 }
281 }
282 // &.only-bottom-border #{$table-prefix}-expanded-row #{$table-prefix}-expanded-area:after {
283 // border-right: 0;
284 // }
285 &-filter-footer {
286 margin: 10px 10px 0;
287 button {
288 margin-right: 5px;
289 }
290 }
291 &-row {
292 transition: all $motion-duration-immediately $motion-linear;
293 background: $table-row-bg;
294 color: $table-row-color;
295
296 &.hidden {
297 display: none;
298 }
299 &.hovered {
300 background: $table-row-hover-bg;
301 color: $table-row-hover-color;
302 }
303 &.selected {
304 background: $table-row-selected-bg;
305 color: $table-row-selected-color;
306 }
307 }
308
309 &-cell {
310 &.hovered {
311 background: $table-row-hover-bg;
312 color: $table-row-hover-color;
313 }
314 }
315 &-tree-placeholder {
316 display: inline-block;
317 width: 12px;
318 }
319}
320
321.last {
322 #{$table-prefix}-expanded-row {
323 td {
324 border-bottom-width: 1px;
325 }
326 }
327}
328
329#{$table-prefix}-body,
330#{$table-prefix}-header {
331 overflow: auto;
332 font-size: $table-th-font-size;
333}
334
335#{$table-prefix}-column-resize-proxy {
336 position: absolute;
337 top: 0;
338 bottom: 0;
339 width: 0;
340 border-left: $line-2 solid $color-brand1-6;
341 z-index: 10;
342 display: none;
343}
344
345#{$table-prefix}-header {
346 margin-bottom: -20px;
347 padding-bottom: 20px;
348 border-top-left-radius: $table-header-corner-top;
349 border-top-right-radius: $table-header-corner-top;
350 border-bottom-left-radius: $table-header-corner-bottom;
351 border-bottom-right-radius: $table-header-corner-bottom;
352 overflow: -moz-scrollbars-none;
353 -ms-overflow-style: none;
354 scrollbar-width: none;
355 &::-webkit-scrollbar {
356 display: none;
357 }
358}
359
360#{$table-prefix}-body {
361 font-size: $table-body-font-size;
362 position: relative;
363}
364
365#{$table-prefix}-fixed {
366 border-right: $table-normal-border-width $table-normal-border-style $table-normal-border-color;
367 border-bottom: $table-normal-border-width $table-normal-border-style $table-normal-border-color;
368 table {
369 table-layout: fixed;
370 }
371 #{$table-prefix}-header {
372 background: $table-th-bg;
373 }
374 @include table-border(0);
375
376 &.only-bottom-border #{$table-prefix}-body tr:last-child td {
377 border-bottom-width: $table-normal-border-width;
378 }
379
380 &#{$table-prefix}-group {
381 @include table-border($table-normal-border-width);
382 }
383 &#{$table-prefix}-lock-left {
384 @include table-last-child-border($table-normal-border-width);
385 }
386}
387
388#{$table-prefix}-lock {
389 #{$table-prefix}-body {
390 overflow-x: auto;
391 overflow-y: visible;
392 }
393}
394
395#{$table-prefix}-group {
396 border-width: 0;
397
398 &.only-bottom-border {
399 #{$table-prefix}-body table,
400 #{$table-prefix}-header table {
401 border-left: 0;
402 }
403
404 #{$table-prefix}-header table,
405 #{$table-prefix}-body table,
406 #{$table-prefix}-body table#{$table-prefix}-row {
407 border-top: 0;
408 }
409
410 #{$table-prefix}-body #{$table-prefix}-group-footer td {
411 border-bottom: 0;
412 }
413 }
414 #{$table-prefix}-body {
415 margin-top: $table-group-split;
416 table {
417 border-top: $table-normal-border-width $table-normal-border-style $table-normal-border-color;
418 border-left: $table-normal-border-width $table-normal-border-style $table-normal-border-color;
419 margin-bottom: $table-group-split;
420 tr:first-child td {
421 border-top-width: 1px;
422 }
423 &:last-of-type {
424 margin-bottom: 0;
425 }
426 }
427 }
428 #{$table-prefix}-header {
429 table {
430 border-top: $table-normal-border-width $table-normal-border-style $table-normal-border-color;
431 border-left: $table-normal-border-width $table-normal-border-style $table-normal-border-color;
432 }
433 }
434 #{$table-prefix}-group-header {
435 td {
436 background: $table-group-th-bg;
437 color: $table-group-th-color;
438 &:first-child {
439 border-top-left-radius: $table-group-header-corner-top;
440 border-bottom-left-radius: $table-group-header-corner-bottom;
441 }
442 &:last-child {
443 border-top-right-radius: $table-group-header-corner-top;
444 border-bottom-right-radius: $table-group-header-corner-bottom;
445 }
446 }
447 }
448 #{$table-prefix}-group-footer {
449 td {
450 background: $table-group-footer-bg;
451 color: $table-group-footer-color;
452 &:first-child {
453 border-top-left-radius: $table-group-footer-corner-top;
454 border-bottom-left-radius: $table-group-footer-corner-bottom;
455 }
456 &:last-child {
457 border-top-right-radius: $table-group-footer-corner-top;
458 border-bottom-right-radius: $table-group-footer-corner-bottom;
459 }
460 }
461 }
462 #{$table-prefix}-row.hovered,
463 #{$table-prefix}-row.selected {
464 background: $table-row-bg;
465 color: $table-row-color;
466 }
467}
468
469#{$table-prefix}-lock {
470 position: relative;
471 table {
472 table-layout: fixed;
473 }
474}
475
476#{$table-prefix}-header-inner {
477 overflow: unset;
478}
479
480#{$table-prefix}-header-fixer {
481 content: " ";
482 border-top-right-radius: $table-header-corner-top;
483 border-bottom-right-radius: $table-header-corner-bottom;
484 width: 15px;
485 background: inherit;
486 position: absolute;
487 right: 0;
488 height: 100%;
489 top: 0;
490}
491
492#{$table-prefix}-wrap-empty {
493 #{$table-prefix}-lock-left,
494 #{$table-prefix}-lock-right {
495 td {
496 border: none;
497 }
498 #{$table-prefix}-empty {
499 display: none;
500 }
501 }
502 > #{$table-prefix}-inner > #{$table-prefix}-body > table {
503 table-layout: fixed;
504 }
505}
506
507#{$table-prefix}-lock-left,
508#{$table-prefix}-lock-right {
509 position: absolute;
510 left: 0;
511 top: 0;
512 z-index: 1;
513 border: 0;
514 transition: box-shadow .3s ease;
515 overflow: hidden;
516 table {
517 width: auto;
518 }
519 #{$table-prefix}-body {
520 overflow-y: scroll;
521 overflow-x: hidden;
522 margin-right: -20px;
523 padding-right: 0;
524 // @include table-last-child-border($table-normal-border-width);
525 }
526
527 #{$table-prefix}-header {
528 // @include table-last-child-border($table-normal-border-width);
529 }
530
531 &.shadow {
532 @include table-last-child-border(0);
533 }
534}
535
536#{$table-prefix}-lock-right {
537 right: 0;
538 left: auto;
539 table tr td:first-child,
540 table tr th:first-child {
541 border-left-width: 1px;
542 }
543 &.shadow {
544 box-shadow: -2px 0 3px rgba(0, 0, 0, .12);
545 }
546}
547
548#{$table-prefix}-lock-left {
549 &.shadow {
550 box-shadow: 2px 0 3px rgba(0, 0, 0, .12);
551 }
552}
553
554#{$table-prefix}-filter {
555 line-height: 1;
556}
557
558#{$table-prefix}-sort {
559 cursor: pointer;
560 position: relative;
561 width: 16px;
562 display: inline-block;
563 line-height: 1;
564 &:focus {
565 outline: 0;
566 }
567 & > a::before {
568 content: ' ';
569 display: inline-block;
570 vertical-align: middle;
571 }
572 .#{$css-prefix}icon {
573 position: absolute;
574 left: -2px;
575 @include icon-size($table-sort-icon-size);
576 color: $table-sort-color;
577 }
578 .current .#{$css-prefix}icon {
579 color: $table-sort-color-current;
580 }
581 .#{$css-prefix}icon-ascending {
582 left: 2px;
583 }
584}
585
586#{$table-prefix}-filter {
587 cursor: pointer;
588 width: 20px;
589 display: inline-block;
590 &:focus {
591 outline: 0;
592 }
593
594 .#{$css-prefix}icon {
595 @include icon-size($table-filter-icon-size);
596 color: $table-sort-color;
597 }
598
599 #{$table-prefix}-filter-active {
600 color: $color-brand1-6;
601 }
602}
603#{$table-prefix}-filter-menu {
604 .#{$css-prefix}menu-content {
605 max-height: 220px;
606 overflow: auto;
607 }
608}
609
610#{$table-prefix}-header-icon {
611 margin-left: $table-header-icon-margin-left;
612}
613
614#{$table-prefix}-expanded-ctrl {
615 cursor: pointer;
616 &:focus {
617 outline: 0;
618 }
619 &.disabled {
620 color: $table-expanded-ctrl-disabled-color;
621 }
622
623 .#{$css-prefix}table-expand-unfold {
624 @include icon-size($table-expanded-icon-size);
625 &::before {
626 content: $table-expand-unfold-icon-content;
627 }
628 }
629
630 .#{$css-prefix}table-expand-fold {
631 @include icon-size($table-expanded-icon-size);
632 &::before {
633 content: $table-expand-fold-icon-content;
634 }
635 }
636}
637
638#{$table-prefix} {
639 &-fix-left,
640 &-fix-right {
641 background: inherit;
642 position: sticky;
643 z-index: 1;
644 // 修复旧ie内核下的 Edge,锁列边框消失的问题
645 background-clip: padding-box;
646 }
647 &-ping-left {
648 #{$table-prefix}-expanded-area #{$table-prefix}-fix-left-last::after {
649 content: none;
650 }
651 #{$table-prefix}-expanded-area #{$table-prefix}-ping-left #{$table-prefix}-fix-left-last,
652 #{$table-prefix}-fix-left-last {
653 border-right-width: 0;
654 &::after {
655 box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, .15);
656 position: absolute;
657 top: 0;
658 right: 0;
659 bottom: 0;
660 width: 30px;
661 content: '';
662 pointer-events: none;
663 transition: box-shadow .3s, -webkit-box-shadow .3s;
664 transform: translateX(100%);
665 }
666 }
667 }
668
669 &-ping-right {
670 #{$table-prefix}-expanded-area #{$table-prefix}-fix-right-first::after {
671 content: none;
672 }
673 #{$table-prefix}-expanded-area #{$table-prefix}-ping-right #{$table-prefix}-fix-right-first:after,
674 #{$table-prefix}-fix-right-first:after {
675 box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, .15);
676 position: absolute;
677 top: 0;
678 left: 0;
679 bottom: 0;
680 width: 30px;
681 content: '';
682 pointer-events: none;
683 transition: box-shadow .3s, -webkit-box-shadow .3s;
684 transform: translateX(-100%);
685 }
686 }
687
688 &-fixed#{$table-prefix}-scrolling-to-right,
689 &-lock#{$table-prefix}-scrolling-to-right {
690 &::after {
691 box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, .15);
692 position: absolute;
693 top: 0;
694 right: -30px;
695 bottom: 0;
696 width: 30px;
697 content: '';
698 pointer-events: none;
699 transition: box-shadow .3s, -webkit-box-shadow .3s;
700 transform: translateX(-100%);
701 }
702 // #{$table-prefix}-lock-right {
703 // border-right: $table-normal-border-width $table-normal-border-style $table-normal-border-color;
704 // }
705 }
706
707 // &-fixed#{$table-prefix}-ping-right,
708 &-fixed.only-bottom-border,
709 // &-lock#{$table-prefix}-ping-right,
710 &-lock.only-bottom-border {
711 border-right: 0;
712 }
713}
714
715@import "./rtl.scss";