|
0
|
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 } |
