|
0
|
1 /* Tablesaw Sass Mixins */
|
|
|
2
|
|
|
3 @mixin tablesaw-stack-max {
|
|
|
4 /* Table rows have a gray bottom stroke by default */
|
|
|
5 .tablesaw-stack tbody tr {
|
|
|
6 display: block;
|
|
|
7 width: 100%;
|
|
|
8 border-bottom: 1px solid #dfdfdf;
|
|
|
9 }
|
|
|
10 .tablesaw-stack thead td,
|
|
|
11 .tablesaw-stack thead th {
|
|
|
12 display: none;
|
|
|
13 }
|
|
|
14 .tablesaw-stack tbody td,
|
|
|
15 .tablesaw-stack tbody th {
|
|
|
16 display: block;
|
|
|
17 float: left;
|
|
|
18 clear: left;
|
|
|
19 width: 100%;
|
|
|
20 }
|
|
|
21 .tablesaw-cell-label {
|
|
|
22 vertical-align: top;
|
|
|
23 }
|
|
|
24 .tablesaw-cell-content {
|
|
|
25 max-width: 67%;
|
|
|
26 display: inline-block;
|
|
|
27 }
|
|
|
28 .tablesaw-stack td:empty,
|
|
|
29 .tablesaw-stack th:empty {
|
|
|
30 display: none;
|
|
|
31 }
|
|
|
32 }
|
|
|
33
|
|
|
34 @mixin tablesaw-stack-min {
|
|
|
35 .tablesaw-stack tr {
|
|
|
36 display: table-row;
|
|
|
37 }
|
|
|
38 /* Show the table header rows */
|
|
|
39 .tablesaw-stack td,
|
|
|
40 .tablesaw-stack th,
|
|
|
41 .tablesaw-stack thead td,
|
|
|
42 .tablesaw-stack thead th {
|
|
|
43 display: table-cell;
|
|
|
44 margin: 0;
|
|
|
45 }
|
|
|
46 /* Hide the labels in each cell */
|
|
|
47 .tablesaw-stack td .tablesaw-cell-label,
|
|
|
48 .tablesaw-stack th .tablesaw-cell-label {
|
|
|
49 display: none !important;
|
|
|
50 }
|
|
|
51 }
|
|
|
52
|
|
|
53 $use-respond-mixins: false !default;
|
|
|
54 @mixin tablesaw-stack( $breakpoint: 40em ) {
|
|
|
55 @if $use-respond-mixins {
|
|
|
56 @include respond-max($breakpoint - .0625) {
|
|
|
57 @include tablesaw-stack-max;
|
|
|
58 }
|
|
|
59 @include respond-min($breakpoint) {
|
|
|
60 @include tablesaw-stack-min;
|
|
|
61 }
|
|
|
62 }
|
|
|
63 @else {
|
|
|
64 @media (max-width: ($breakpoint - .0625)) {
|
|
|
65 @include tablesaw-stack-max;
|
|
|
66 }
|
|
|
67 @media (min-width: $breakpoint) {
|
|
|
68 @include tablesaw-stack-min;
|
|
|
69 }
|
|
|
70 }
|
|
|
71 } |
