comparison default/node_modules/tablesaw/src/tables.stack-mixin.scss @ 0:1d038bc9b3d2 default tip

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