Mercurial > hg > LGServices

comparison src/main/webapp/resources/css/tablesaw.css @ 35:89a5ca7d44f7

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