Mercurial > nebulaweb3

comparison default/node_modules/tablesaw/src/tables.columntoggle.css @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 /*
2 Styles for the table columntoggle mode
3 */
4
5 .tablesaw-overflow {
6 position: relative;
7 width: 100%;
8 overflow-x: auto;
9 -webkit-overflow-scrolling: touch;
10 /* More in skin.css */
11 }
12 .tablesaw-overflow > .tablesaw {
13 margin-top: 2px; /* sortable focus rings are clipped */
14 }
15
16 /* Used for a11y text on button: "Columns" */
17 .tablesaw-columntoggle-btn span {
18 text-indent: -9999px;
19 display: inline-block;
20 }
21
22 .tablesaw-columntoggle-btnwrap {
23 position: relative; /* for dialog positioning */
24 }
25 .tablesaw-columntoggle-btnwrap .dialog-content {
26 padding: .5em;
27 }
28 .tablesaw-columntoggle tbody td {
29 line-height: 1.5;
30 }
31
32
33 /* Remove top/bottom margins around the fieldcontain on check list */
34 .tablesaw-columntoggle-popup {
35 display: none;
36 }
37 .tablesaw-columntoggle-btnwrap.visible .tablesaw-columntoggle-popup {
38 display: block;
39 position: absolute;
40 top: 2em;
41 right: 0;
42 background-color: #fff;
43 padding: .5em .8em;
44 border: 1px solid #ccc;
45 box-shadow: 0 1px 2px #ccc;
46 border-radius: .2em;
47 z-index: 1;
48 }
49 .tablesaw-columntoggle-popup fieldset {
50 margin:0;
51 }
52
53 /* Hide all prioritized columns by default */
54 @media only all {
55 .tablesaw-columntoggle th.tablesaw-priority-6,
56 .tablesaw-columntoggle td.tablesaw-priority-6,
57 .tablesaw-columntoggle th.tablesaw-priority-5,
58 .tablesaw-columntoggle td.tablesaw-priority-5,
59 .tablesaw-columntoggle th.tablesaw-priority-4,
60 .tablesaw-columntoggle td.tablesaw-priority-4,
61 .tablesaw-columntoggle th.tablesaw-priority-3,
62 .tablesaw-columntoggle td.tablesaw-priority-3,
63 .tablesaw-columntoggle th.tablesaw-priority-2,
64 .tablesaw-columntoggle td.tablesaw-priority-2,
65 .tablesaw-columntoggle th.tablesaw-priority-1,
66 .tablesaw-columntoggle td.tablesaw-priority-1,
67 .tablesaw-columntoggle th.tablesaw-priority-0,
68 .tablesaw-columntoggle td.tablesaw-priority-0 {
69 display: none;
70 }
71 }
72
73 .tablesaw-columntoggle-btnwrap .dialog-content {
74 top: 0 !important;
75 right: 1em;
76 left: auto !important;
77 width: 12em;
78 max-width: 18em;
79 margin: -.5em auto 0;
80 }
81 .tablesaw-columntoggle-btnwrap .dialog-content:focus {
82 outline-style: none;
83 }
84
85 /* Preset breakpoints if "" class added to table */
86
87 /* Show priority 1 at 320px (20em x 16px) */
88 @media (min-width: 20em) {
89 .tablesaw-columntoggle th.tablesaw-priority-1,
90 .tablesaw-columntoggle td.tablesaw-priority-1 {
91 display: table-cell;
92 }
93 }
94 /* Show priority 2 at 480px (30em x 16px) */
95 @media (min-width: 30em) {
96 .tablesaw-columntoggle th.tablesaw-priority-2,
97 .tablesaw-columntoggle td.tablesaw-priority-2 {
98 display: table-cell;
99 }
100 }
101 /* Show priority 3 at 640px (40em x 16px) */
102 @media (min-width: 40em) {
103 .tablesaw-columntoggle th.tablesaw-priority-3,
104 .tablesaw-columntoggle td.tablesaw-priority-3 {
105 display: table-cell;
106 }
107
108 .tablesaw-columntoggle tbody td {
109 line-height: 2;
110 }
111 }
112 /* Show priority 4 at 800px (50em x 16px) */
113 @media (min-width: 50em) {
114 .tablesaw-columntoggle th.tablesaw-priority-4,
115 .tablesaw-columntoggle td.tablesaw-priority-4 {
116 display: table-cell;
117 }
118 }
119 /* Show priority 5 at 960px (60em x 16px) */
120 @media (min-width: 60em) {
121 .tablesaw-columntoggle th.tablesaw-priority-5,
122 .tablesaw-columntoggle td.tablesaw-priority-5 {
123 display: table-cell;
124 }
125 }
126 /* Show priority 6 at 1,120px (70em x 16px) */
127 @media (min-width: 70em) {
128 .tablesaw-columntoggle th.tablesaw-priority-6,
129 .tablesaw-columntoggle td.tablesaw-priority-6 {
130 display: table-cell;
131 }
132 }
133
134 @media only all {
135 /* Unchecked manually: Always hide */
136 .tablesaw-columntoggle th.tablesaw-toggle-cellhidden,
137 .tablesaw-columntoggle td.tablesaw-toggle-cellhidden {
138 display: none;
139 }
140
141 /* Checked manually: Always show */
142 .tablesaw-columntoggle th.tablesaw-toggle-cellvisible,
143 .tablesaw-columntoggle td.tablesaw-toggle-cellvisible {
144 display: table-cell;
145 }
146 }
147
148 .tablesaw-columntoggle-popup .btn-group > label {
149 display: block;
150 padding: .2em 0;
151 white-space: nowrap;
152 cursor: default;
153 }
154 .tablesaw-columntoggle-popup .btn-group > label input {
155 margin-right: .8em;
156 }