Mercurial > nebulaweb3

comparison default/node_modules/tablesaw/dist/tablesaw.css @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
1 /*! Tablesaw - v3.0.8 - 2018-01-25
2 * https://github.com/filamentgroup/tablesaw
3 * Copyright (c) 2018 Filament Group; Licensed MIT */
4
5 .tablesaw {
6 width: 100%;
7 max-width: 100%;
8 empty-cells: show;
9 border-collapse: collapse;
10 border: 0;
11 padding: 0;
12 }
13
14 .tablesaw * {
15 box-sizing: border-box;
16 }
17
18 .tablesaw-btn {
19 border: 1px solid #ccc;
20 border-radius: .25em;
21 background: none;
22 box-shadow: 0 1px 0 rgba(255,255,255,1);
23 color: #4a4a4a;
24 cursor: pointer;
25 display: inline-block;
26 margin: 0;
27 padding: .5em .85em .4em .85em;
28 position: relative;
29 text-align: center;
30 text-decoration: none;
31 text-transform: capitalize;
32 -webkit-appearance: none;
33 -moz-appearance: none;
34 appearance: none;
35 }
36
37 a.tablesaw-btn {
38 color: #1c95d4;
39 }
40
41 .tablesaw-btn:hover {
42 text-decoration: none;
43 }
44
45 /* Default radio/checkbox styling horizonal controlgroups. */
46
47 .tablesaw-btn:active {
48 background-color: #ddd;
49 }
50
51 @supports (box-shadow: none ) {
52 .tablesaw-btn:focus {
53 background-color: #fff;
54 outline: none;
55 }
56
57 .tablesaw-btn:focus {
58 box-shadow: 0 0 .35em #4faeef !important;
59 }
60 }
61
62 .tablesaw-btn-select select {
63 background: none;
64 border: none;
65 display: inline-block;
66 position: absolute;
67 left: 0;
68 top: 0;
69 margin: 0;
70 width: 100%;
71 height: 100%;
72 z-index: 2;
73 min-height: 1em;
74 opacity: 0;
75 color: transparent;
76 }
77
78 .tablesaw-btn select option {
79 background: #fff;
80 color: #000;
81 }
82
83 .tablesaw-btn {
84 display: inline-block;
85 width: auto;
86 height: auto;
87 position: relative;
88 top: 0;
89 }
90
91 .tablesaw-btn.btn-small {
92 font-size: 1.0625em;
93 line-height: 19px;
94 padding: .3em 1em .3em 1em;
95 }
96
97 .tablesaw-btn.btn-micro {
98 font-size: .8125em;
99 padding: .4em .7em .25em .7em;
100 }
101
102 .tablesaw-btn-select {
103 padding-right: 1.5em;
104 text-align: left;
105 display: inline-block;
106 color: #4d4d4d;
107 padding-right: 2.5em;
108 min-width: 7.25em;
109 text-align: left;
110 }
111
112 .tablesaw-btn-select:after {
113 content: " ";
114 position: absolute;
115 background: none;
116 background-repeat: no-repeat;
117 background-position: .25em .45em;
118 content: "\25bc";
119 font-size: .55em;
120 padding-top: 1.2em;
121 padding-left: 1em;
122 left: auto;
123 right: 0;
124 margin: 0;
125 top: 0;
126 bottom: 0;
127 width: 1.8em;
128 }
129
130 .tablesaw-btn-select.btn-small:after,
131 .tablesaw-btn-select.btn-micro:after {
132 width: 1.2em;
133 font-size: .5em;
134 padding-top: 1em;
135 padding-right: .5em;
136 line-height: 1.65;
137 background: none;
138 box-shadow: none;
139 border-left-width: 0;
140 }
141
142 /* Column navigation buttons for swipe and columntoggle tables */
143
144 .tablesaw-advance .tablesaw-btn {
145 -webkit-appearance: none;
146 -moz-appearance: none;
147 box-sizing: border-box;
148 text-shadow: 0 1px 0 #fff;
149 border-radius: .25em;
150 }
151
152 .tablesaw-advance .tablesaw-btn.btn-micro {
153 font-size: .8125em;
154 padding: .3em .7em .25em .7em;
155 }
156
157 .tablesaw-advance a.tablesaw-nav-btn:first-child {
158 margin-left: 0;
159 }
160
161 .tablesaw-advance a.tablesaw-nav-btn:last-child {
162 margin-right: 0;
163 }
164
165 .tablesaw-advance a.tablesaw-nav-btn {
166 display: inline-block;
167 overflow: hidden;
168 width: 1.8em;
169 height: 1.8em;
170 background-position: 50% 50%;
171 margin-left: .25em;
172 margin-right: .25em;
173 position: relative;
174 text-indent: -9999px;
175 }
176
177 .tablesaw-advance a.tablesaw-nav-btn.left:before,
178 .tablesaw-advance a.tablesaw-nav-btn.right:before,
179 .tablesaw-advance a.tablesaw-nav-btn.down:before,
180 .tablesaw-advance a.tablesaw-nav-btn.up:before {
181 content: "\0020";
182 overflow: hidden;
183 width: 0;
184 height: 0;
185 position: absolute;
186 }
187
188 .tablesaw-advance a.tablesaw-nav-btn.down:before {
189 left: .5em;
190 top: .65em;
191 border-left: 5px solid transparent;
192 border-right: 5px solid transparent;
193 border-top: 5px solid #808080;
194 }
195
196 .tablesaw-advance a.tablesaw-nav-btn.up:before {
197 left: .5em;
198 top: .65em;
199 border-left: 5px solid transparent;
200 border-right: 5px solid transparent;
201 border-bottom: 5px solid #808080;
202 }
203
204 .tablesaw-advance a.tablesaw-nav-btn.left:before,
205 .tablesaw-advance a.tablesaw-nav-btn.right:before {
206 top: .45em;
207 border-top: 5px solid transparent;
208 border-bottom: 5px solid transparent;
209 }
210
211 .tablesaw-advance a.tablesaw-nav-btn.left:before {
212 left: .6em;
213 border-right: 5px solid #808080;
214 }
215
216 .tablesaw-advance a.tablesaw-nav-btn.right:before {
217 left: .7em;
218 border-left: 5px solid #808080;
219 }
220
221 .tablesaw-advance a.tablesaw-nav-btn.disabled {
222 opacity: .25;
223 cursor: default;
224 pointer-events: none;
225 }
226
227 /* Table Toolbar */
228
229 .tablesaw-bar {
230 clear: both;
231 }
232
233 .tablesaw-bar * {
234 box-sizing: border-box;
235 }
236
237 .tablesaw-bar-section {
238 float: left;
239 }
240
241 .tablesaw-bar-section label {
242 font-size: .875em;
243 padding: .5em 0;
244 clear: both;
245 display: block;
246 color: #888;
247 margin-right: .5em;
248 text-transform: uppercase;
249 }
250
251 .tablesaw-btn,
252 .tablesaw-enhanced .tablesaw-btn {
253 margin-top: .5em;
254 margin-bottom: .5em;
255 }
256
257 .tablesaw-btn-select,
258 .tablesaw-enhanced .tablesaw-btn-select {
259 margin-bottom: 0;
260 }
261
262 /* TODO */
263
264 .tablesaw-bar .tablesaw-bar-section .tablesaw-btn {
265 margin-left: .4em;
266 margin-top: 0;
267 text-transform: uppercase;
268 border: none;
269 box-shadow: none;
270 background: transparent;
271 font-size: 1em;
272 padding-left: .3em;
273 }
274
275 .tablesaw-bar .tablesaw-bar-section .btn-select {
276 min-width: 0;
277 }
278
279 .tablesaw-bar .tablesaw-bar-section .btn-select:after {
280 padding-top: .9em;
281 }
282
283 .tablesaw-bar .tablesaw-bar-section select {
284 color: #888;
285 text-transform: none;
286 background: transparent;
287 }
288
289 .tablesaw-bar-section ~ table {
290 clear: both;
291 }
292
293 .tablesaw-bar-section .abbreviated {
294 display: inline;
295 }
296
297 .tablesaw-bar-section .longform {
298 display: none;
299 }
300
301 @media (min-width: 24em) {
302 .tablesaw-bar-section .abbreviated {
303 display: none;
304 }
305
306 .tablesaw-bar-section .longform {
307 display: inline;
308 }
309 }
310
311 .tablesaw th,
312 .tablesaw td {
313 padding: .5em .7em;
314 text-align: left;
315 vertical-align: middle;
316 }
317
318 .tablesaw-sortable-btn {
319 /* same as cell padding above */
320 padding: .5em .7em;
321 }
322
323 .tablesaw thead th {
324 text-align: left;
325 }
326
327 /* Table rows have a gray bottom stroke by default */
328
329 .tablesaw-row-border tr {
330 border-bottom: 1px solid #dfdfdf;
331 }
332
333 /* Zebra striping */
334
335 .tablesaw-row-zebra tr:nth-child(2n) {
336 background-color: #f8f8f8;
337 }
338
339 .tablesaw caption {
340 text-align: left;
341 margin: .59375em 0;
342 }
343
344 .tablesaw-swipe .tablesaw-swipe-cellpersist {
345 border-right: 2px solid #e4e1de;
346 }
347
348 .tablesaw-swipe-shadow .tablesaw-swipe-cellpersist {
349 border-right-width: 1px;
350 }
351
352 .tablesaw-swipe-shadow .tablesaw-swipe-cellpersist {
353 box-shadow: 3px 0 4px -1px #e4e1de;
354 }
355
356 .tablesaw-stack td .tablesaw-cell-label,
357 .tablesaw-stack th .tablesaw-cell-label {
358 display: none;
359 }
360
361 /* Mobile first styles: Begin with the stacked presentation at narrow widths */
362
363 /* Support note IE9+: @media only all */
364
365 @media only all {
366 /* Show the table cells as a block level element */
367
368 .tablesaw-stack {
369 clear: both;
370 }
371
372 .tablesaw-stack td,
373 .tablesaw-stack th {
374 text-align: left;
375 display: block;
376 }
377
378 .tablesaw-stack tr {
379 clear: both;
380 display: table-row;
381 }
382
383 /* Make the label elements a percentage width */
384
385 .tablesaw-stack td .tablesaw-cell-label,
386 .tablesaw-stack th .tablesaw-cell-label {
387 display: inline-block;
388 padding: 0 .6em 0 0;
389 width: 30%;
390 }
391
392 /* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */
393
394 .tablesaw-stack th .tablesaw-cell-label-top,
395 .tablesaw-stack td .tablesaw-cell-label-top {
396 display: block;
397 padding: .4em 0;
398 margin: .4em 0;
399 }
400
401 .tablesaw-cell-label {
402 display: block;
403 }
404
405 /* Avoid double strokes when stacked */
406
407 .tablesaw-stack tbody th.group {
408 margin-top: -1px;
409 }
410
411 /* Avoid double strokes when stacked */
412
413 .tablesaw-stack th.group b.tablesaw-cell-label {
414 display: none !important;
415 }
416 }
417
418 @media (max-width: 39.9375em) {
419 /* Table rows have a gray bottom stroke by default */
420
421 .tablesaw-stack tbody tr {
422 display: block;
423 width: 100%;
424 border-bottom: 1px solid #dfdfdf;
425 }
426
427 .tablesaw-stack thead td,
428 .tablesaw-stack thead th {
429 display: none;
430 }
431
432 .tablesaw-stack tbody td,
433 .tablesaw-stack tbody th {
434 display: block;
435 float: left;
436 clear: left;
437 width: 100%;
438 }
439
440 .tablesaw-cell-label {
441 vertical-align: top;
442 }
443
444 .tablesaw-cell-content {
445 display: inline-block;
446 max-width: 67%;
447 }
448
449 .tablesaw-stack .tablesaw-stack-block .tablesaw-cell-label,
450 .tablesaw-stack .tablesaw-stack-block .tablesaw-cell-content {
451 display: block;
452 width: 100%;
453 max-width: 100%;
454 padding: 0;
455 }
456
457 .tablesaw-stack td:empty,
458 .tablesaw-stack th:empty {
459 display: none;
460 }
461 }
462
463 /* Media query to show as a standard table at 560px (35em x 16px) or wider */
464
465 @media (min-width: 40em) {
466 .tablesaw-stack tr {
467 display: table-row;
468 }
469
470 /* Show the table header rows */
471
472 .tablesaw-stack td,
473 .tablesaw-stack th,
474 .tablesaw-stack thead td,
475 .tablesaw-stack thead th {
476 display: table-cell;
477 margin: 0;
478 }
479
480 /* Hide the labels in each cell */
481
482 .tablesaw-stack td .tablesaw-cell-label,
483 .tablesaw-stack th .tablesaw-cell-label {
484 display: none !important;
485 }
486 }
487
488 .tablesaw-fix-persist {
489 table-layout: fixed;
490 }
491
492 @media only all {
493 /* Unchecked manually: Always hide */
494
495 .tablesaw-swipe th.tablesaw-swipe-cellhidden,
496 .tablesaw-swipe td.tablesaw-swipe-cellhidden {
497 display: none;
498 }
499 }
500
501 .tablesaw-overflow {
502 position: relative;
503 width: 100%;
504 overflow-x: auto;
505 -webkit-overflow-scrolling: touch;
506 /* More in skin.css */
507 }
508
509 .tablesaw-overflow > .tablesaw {
510 margin-top: 2px;
511 /* sortable focus rings are clipped */
512 }
513
514 /* Used for a11y text on button: "Columns" */
515
516 .tablesaw-columntoggle-btn span {
517 text-indent: -9999px;
518 display: inline-block;
519 }
520
521 .tablesaw-columntoggle-btnwrap {
522 position: relative;
523 /* for dialog positioning */
524 }
525
526 .tablesaw-columntoggle-btnwrap .dialog-content {
527 padding: .5em;
528 }
529
530 .tablesaw-columntoggle tbody td {
531 line-height: 1.5;
532 }
533
534 /* Remove top/bottom margins around the fieldcontain on check list */
535
536 .tablesaw-columntoggle-popup {
537 display: none;
538 }
539
540 .tablesaw-columntoggle-btnwrap.visible .tablesaw-columntoggle-popup {
541 display: block;
542 position: absolute;
543 top: 2em;
544 right: 0;
545 background-color: #fff;
546 padding: .5em .8em;
547 border: 1px solid #ccc;
548 box-shadow: 0 1px 2px #ccc;
549 border-radius: .2em;
550 z-index: 1;
551 }
552
553 .tablesaw-columntoggle-popup fieldset {
554 margin: 0;
555 }
556
557 /* Hide all prioritized columns by default */
558
559 @media only all {
560 .tablesaw-columntoggle th.tablesaw-priority-6,
561 .tablesaw-columntoggle td.tablesaw-priority-6,
562 .tablesaw-columntoggle th.tablesaw-priority-5,
563 .tablesaw-columntoggle td.tablesaw-priority-5,
564 .tablesaw-columntoggle th.tablesaw-priority-4,
565 .tablesaw-columntoggle td.tablesaw-priority-4,
566 .tablesaw-columntoggle th.tablesaw-priority-3,
567 .tablesaw-columntoggle td.tablesaw-priority-3,
568 .tablesaw-columntoggle th.tablesaw-priority-2,
569 .tablesaw-columntoggle td.tablesaw-priority-2,
570 .tablesaw-columntoggle th.tablesaw-priority-1,
571 .tablesaw-columntoggle td.tablesaw-priority-1,
572 .tablesaw-columntoggle th.tablesaw-priority-0,
573 .tablesaw-columntoggle td.tablesaw-priority-0 {
574 display: none;
575 }
576 }
577
578 .tablesaw-columntoggle-btnwrap .dialog-content {
579 top: 0 !important;
580 right: 1em;
581 left: auto !important;
582 width: 12em;
583 max-width: 18em;
584 margin: -.5em auto 0;
585 }
586
587 .tablesaw-columntoggle-btnwrap .dialog-content:focus {
588 outline-style: none;
589 }
590
591 /* Preset breakpoints if "" class added to table */
592
593 /* Show priority 1 at 320px (20em x 16px) */
594
595 @media (min-width: 20em) {
596 .tablesaw-columntoggle th.tablesaw-priority-1,
597 .tablesaw-columntoggle td.tablesaw-priority-1 {
598 display: table-cell;
599 }
600 }
601
602 /* Show priority 2 at 480px (30em x 16px) */
603
604 @media (min-width: 30em) {
605 .tablesaw-columntoggle th.tablesaw-priority-2,
606 .tablesaw-columntoggle td.tablesaw-priority-2 {
607 display: table-cell;
608 }
609 }
610
611 /* Show priority 3 at 640px (40em x 16px) */
612
613 @media (min-width: 40em) {
614 .tablesaw-columntoggle th.tablesaw-priority-3,
615 .tablesaw-columntoggle td.tablesaw-priority-3 {
616 display: table-cell;
617 }
618
619 .tablesaw-columntoggle tbody td {
620 line-height: 2;
621 }
622 }
623
624 /* Show priority 4 at 800px (50em x 16px) */
625
626 @media (min-width: 50em) {
627 .tablesaw-columntoggle th.tablesaw-priority-4,
628 .tablesaw-columntoggle td.tablesaw-priority-4 {
629 display: table-cell;
630 }
631 }
632
633 /* Show priority 5 at 960px (60em x 16px) */
634
635 @media (min-width: 60em) {
636 .tablesaw-columntoggle th.tablesaw-priority-5,
637 .tablesaw-columntoggle td.tablesaw-priority-5 {
638 display: table-cell;
639 }
640 }
641
642 /* Show priority 6 at 1,120px (70em x 16px) */
643
644 @media (min-width: 70em) {
645 .tablesaw-columntoggle th.tablesaw-priority-6,
646 .tablesaw-columntoggle td.tablesaw-priority-6 {
647 display: table-cell;
648 }
649 }
650
651 @media only all {
652 /* Unchecked manually: Always hide */
653
654 .tablesaw-columntoggle th.tablesaw-toggle-cellhidden,
655 .tablesaw-columntoggle td.tablesaw-toggle-cellhidden {
656 display: none;
657 }
658
659 /* Checked manually: Always show */
660
661 .tablesaw-columntoggle th.tablesaw-toggle-cellvisible,
662 .tablesaw-columntoggle td.tablesaw-toggle-cellvisible {
663 display: table-cell;
664 }
665 }
666
667 .tablesaw-columntoggle-popup .btn-group > label {
668 display: block;
669 padding: .2em 0;
670 white-space: nowrap;
671 cursor: default;
672 }
673
674 .tablesaw-columntoggle-popup .btn-group > label input {
675 margin-right: .8em;
676 }
677
678 .tablesaw-sortable-head {
679 position: relative;
680 vertical-align: top;
681 }
682
683 /* Override */
684
685 .tablesaw .tablesaw-sortable-head {
686 padding: 0;
687 }
688
689 .tablesaw-sortable-btn {
690 min-width: 100%;
691 color: inherit;
692 background: transparent;
693 border: 0;
694 text-align: inherit;
695 font: inherit;
696 text-transform: inherit;
697 }
698
699 .tablesaw-sortable-arrow:after {
700 display: inline-block;
701 width: 10px;
702 height: 14px;
703 content: " ";
704 margin-left: .3125em;
705 }
706
707 .tablesaw-sortable-ascending .tablesaw-sortable-arrow:after,
708 .tablesaw-sortable-descending .tablesaw-sortable-arrow:after {
709 content: "\0020";
710 }
711
712 .tablesaw-sortable-ascending .tablesaw-sortable-arrow:after {
713 content: "\2191";
714 }
715
716 .tablesaw-sortable-descending .tablesaw-sortable-arrow:after {
717 content: "\2193";
718 }
719
720 .tablesaw-advance {
721 float: right;
722 }
723
724 .tablesaw-advance.minimap {
725 margin-right: .4em;
726 }
727
728 .tablesaw-advance-dots {
729 float: left;
730 margin: 0;
731 padding: 0;
732 list-style: none;
733 }
734
735 .tablesaw-advance-dots li {
736 display: table-cell;
737 margin: 0;
738 padding: .4em .2em;
739 }
740
741 .tablesaw-advance-dots li i {
742 width: .25em;
743 height: .25em;
744 background: #555;
745 border-radius: 100%;
746 display: inline-block;
747 }
748
749 .tablesaw-advance-dots-hide {
750 opacity: .25;
751 cursor: default;
752 pointer-events: none;
753 }