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