|
0
|
1 /*! Tablesaw - v3.0.8 - 2018-01-25
|
|
|
2 * https://github.com/filamentgroup/tablesaw
|
|
|
3 * Copyright (c) 2018 Filament Group; Licensed MIT */
|
|
|
4 /*! Tablesaw - v3.0.8 - 2018-01-25
|
|
|
5 * https://github.com/filamentgroup/tablesaw
|
|
|
6 * Copyright (c) 2018 Filament Group; Licensed MIT */
|
|
|
7
|
|
|
8 .tablesaw {
|
|
|
9 width: 100%;
|
|
|
10 max-width: 100%;
|
|
|
11 empty-cells: show;
|
|
|
12 border-collapse: collapse;
|
|
|
13 border: 0;
|
|
|
14 padding: 0;
|
|
|
15 }
|
|
|
16
|
|
|
17 .tablesaw * {
|
|
|
18 box-sizing: border-box;
|
|
|
19 }
|
|
|
20
|
|
|
21 .tablesaw-stack td .tablesaw-cell-label,
|
|
|
22 .tablesaw-stack th .tablesaw-cell-label {
|
|
|
23 display: none;
|
|
|
24 }
|
|
|
25
|
|
|
26 /* Mobile first styles: Begin with the stacked presentation at narrow widths */
|
|
|
27
|
|
|
28 /* Support note IE9+: @media only all */
|
|
|
29
|
|
|
30 @media only all {
|
|
|
31 /* Show the table cells as a block level element */
|
|
|
32
|
|
|
33 .tablesaw-stack {
|
|
|
34 clear: both;
|
|
|
35 }
|
|
|
36
|
|
|
37 .tablesaw-stack td,
|
|
|
38 .tablesaw-stack th {
|
|
|
39 text-align: left;
|
|
|
40 display: block;
|
|
|
41 }
|
|
|
42
|
|
|
43 .tablesaw-stack tr {
|
|
|
44 clear: both;
|
|
|
45 display: table-row;
|
|
|
46 }
|
|
|
47
|
|
|
48 /* Make the label elements a percentage width */
|
|
|
49
|
|
|
50 .tablesaw-stack td .tablesaw-cell-label,
|
|
|
51 .tablesaw-stack th .tablesaw-cell-label {
|
|
|
52 display: inline-block;
|
|
|
53 padding: 0 .6em 0 0;
|
|
|
54 width: 30%;
|
|
|
55 }
|
|
|
56
|
|
|
57 /* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */
|
|
|
58
|
|
|
59 .tablesaw-stack th .tablesaw-cell-label-top,
|
|
|
60 .tablesaw-stack td .tablesaw-cell-label-top {
|
|
|
61 display: block;
|
|
|
62 padding: .4em 0;
|
|
|
63 margin: .4em 0;
|
|
|
64 }
|
|
|
65
|
|
|
66 .tablesaw-cell-label {
|
|
|
67 display: block;
|
|
|
68 }
|
|
|
69
|
|
|
70 /* Avoid double strokes when stacked */
|
|
|
71
|
|
|
72 .tablesaw-stack tbody th.group {
|
|
|
73 margin-top: -1px;
|
|
|
74 }
|
|
|
75
|
|
|
76 /* Avoid double strokes when stacked */
|
|
|
77
|
|
|
78 .tablesaw-stack th.group b.tablesaw-cell-label {
|
|
|
79 display: none !important;
|
|
|
80 }
|
|
|
81 }
|
|
|
82 @mixin tablesaw-stack-max {
|
|
|
83 /* Table rows have a gray bottom stroke by default */
|
|
|
84 .tablesaw-stack tbody tr {
|
|
|
85 display: block;
|
|
|
86 width: 100%;
|
|
|
87 border-bottom: 1px solid #dfdfdf;
|
|
|
88 }
|
|
|
89 .tablesaw-stack thead td,
|
|
|
90 .tablesaw-stack thead th {
|
|
|
91 display: none;
|
|
|
92 }
|
|
|
93 .tablesaw-stack tbody td,
|
|
|
94 .tablesaw-stack tbody th {
|
|
|
95 display: block;
|
|
|
96 float: left;
|
|
|
97 clear: left;
|
|
|
98 width: 100%;
|
|
|
99 }
|
|
|
100 .tablesaw-cell-label {
|
|
|
101 vertical-align: top;
|
|
|
102 }
|
|
|
103 .tablesaw-cell-content {
|
|
|
104 max-width: 67%;
|
|
|
105 display: inline-block;
|
|
|
106 }
|
|
|
107 .tablesaw-stack td:empty,
|
|
|
108 .tablesaw-stack th:empty {
|
|
|
109 display: none;
|
|
|
110 }
|
|
|
111 }
|
|
|
112
|
|
|
113 @mixin tablesaw-stack-min {
|
|
|
114 .tablesaw-stack tr {
|
|
|
115 display: table-row;
|
|
|
116 }
|
|
|
117 /* Show the table header rows */
|
|
|
118 .tablesaw-stack td,
|
|
|
119 .tablesaw-stack th,
|
|
|
120 .tablesaw-stack thead td,
|
|
|
121 .tablesaw-stack thead th {
|
|
|
122 display: table-cell;
|
|
|
123 margin: 0;
|
|
|
124 }
|
|
|
125 /* Hide the labels in each cell */
|
|
|
126 .tablesaw-stack td .tablesaw-cell-label,
|
|
|
127 .tablesaw-stack th .tablesaw-cell-label {
|
|
|
128 display: none !important;
|
|
|
129 }
|
|
|
130 }
|
|
|
131
|
|
|
132 $use-respond-mixins: false !default;
|
|
|
133 @mixin tablesaw-stack( $breakpoint: 40em ) {
|
|
|
134 @if $use-respond-mixins {
|
|
|
135 @include respond-max($breakpoint - .0625) {
|
|
|
136 @include tablesaw-stack-max;
|
|
|
137 }
|
|
|
138 @include respond-min($breakpoint) {
|
|
|
139 @include tablesaw-stack-min;
|
|
|
140 }
|
|
|
141 }
|
|
|
142 @else {
|
|
|
143 @media (max-width: ($breakpoint - .0625)) {
|
|
|
144 @include tablesaw-stack-max;
|
|
|
145 }
|
|
|
146 @media (min-width: $breakpoint) {
|
|
|
147 @include tablesaw-stack-min;
|
|
|
148 }
|
|
|
149 }
|
|
|
150 } |
