comparison default/node_modules/tablesaw/dist/stackonly/tablesaw.stackonly.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 - 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 }