Mercurial > nebulaweb3

comparison default/node_modules/tablesaw/src/tables.toolbar.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 * Button Markup
3 * Custom-styled native inputs/buttons.
4 *
5 * Copyright (c) 2012 Filament Group, Inc.
6 * Licensed under the MIT, GPL licenses.
7 */
8
9 :root {
10 --button-text: #1c95d4;
11 --button-selected-background: #29abe2;
12 --button-checkbox-selected-background: #34a3de;
13 --button-selected-shadow: rgba(0,75,115,.45);
14 --button-interaction-shadow: #4faeef;
15 }
16
17 .tablesaw-btn {
18 border: 1px solid #ccc;
19 border-radius: .25em;
20 background: none;
21 box-shadow: 0 1px 0 rgba(255,255,255,1);
22 color: #4a4a4a;
23 cursor: pointer;
24 display: inline-block;
25 margin: 0;
26 padding: .5em .85em .4em .85em;
27 position: relative;
28 text-align: center;
29 text-decoration: none;
30 text-transform: capitalize;
31
32 -webkit-appearance: none;
33 -moz-appearance: none;
34 appearance: none;
35 }
36 a.tablesaw-btn {
37 color: var(--button-text);
38 }
39 .tablesaw-btn:hover {
40 text-decoration: none;
41 }
42
43 /* Default radio/checkbox styling horizonal controlgroups. */
44 .tablesaw-btn:active {
45 background-color: #ddd;
46 }
47 @supports ( box-shadow: none ) {
48 .tablesaw-btn:focus {
49 background-color: #fff;
50 outline: none;
51 }
52 .tablesaw-btn:focus {
53 box-shadow: 0 0 .35em var(--button-interaction-shadow) !important;
54 }
55 }
56
57 .tablesaw-btn-select select {
58 background: none;
59 border: none;
60 display:inline-block;
61 position: absolute;
62 left: 0;
63 top: 0;
64 margin: 0;
65 width: 100%;
66 height: 100%;
67 z-index: 2;
68 min-height: 1em;
69 opacity: 0;
70 color: transparent;
71 }
72 .tablesaw-btn select option {
73 background: #fff;
74 color: #000;
75 }
76 .tablesaw-btn {
77 display: inline-block;
78 width: auto;
79 height: auto;
80 position: relative;
81 top: 0;
82 }
83
84 .tablesaw-btn.btn-small {
85 font-size: 1.0625em;
86 line-height: 19px;
87 padding: .3em 1em .3em 1em;
88 }
89 .tablesaw-btn.btn-micro {
90 font-size: .8125em;
91 padding: .4em .7em .25em .7em;
92 }
93
94 .tablesaw-btn-select {
95 padding-right: 1.5em;
96 text-align: left;
97 display: inline-block;
98 color:#4d4d4d;
99 padding-right: 2.5em;
100 min-width: 7.25em;
101 text-align: left;
102 }
103
104 .tablesaw-btn-select:after {
105 content: " ";
106 position: absolute;
107 background: none;
108 background-repeat: no-repeat;
109 background-position: .25em .45em;
110 content: "\25bc";
111 font-size: .55em;
112 padding-top: 1.2em;
113 padding-left: 1em;
114 left:auto;
115 right: 0;
116 margin: 0;
117 top: 0;
118 bottom: 0;
119 width: 1.8em;
120 }
121 .tablesaw-btn-select.btn-small:after,
122 .tablesaw-btn-select.btn-micro:after {
123 width: 1.2em;
124 font-size: .5em;
125 padding-top: 1em;
126 padding-right: .5em;
127 line-height: 1.65;
128 background: none;
129 box-shadow: none;
130 border-left-width: 0;
131 }
132
133 /* Column navigation buttons for swipe and columntoggle tables */
134 .tablesaw-advance .tablesaw-btn {
135 -webkit-appearance: none;
136 -moz-appearance: none;
137 box-sizing: border-box;
138 text-shadow: 0 1px 0 #fff;
139 border-radius: .25em;
140 }
141 .tablesaw-advance .tablesaw-btn.btn-micro {
142 font-size: .8125em;
143 padding: .3em .7em .25em .7em;
144 }
145 .tablesaw-advance a.tablesaw-nav-btn:first-child {
146 margin-left: 0;
147 }
148 .tablesaw-advance a.tablesaw-nav-btn:last-child {
149 margin-right: 0;
150 }
151 .tablesaw-advance a.tablesaw-nav-btn {
152 display: inline-block;
153 overflow: hidden;
154 width: 1.8em;
155 height: 1.8em;
156 background-position: 50% 50%;
157 margin-left: .25em;
158 margin-right: .25em;
159 position: relative;
160 text-indent: -9999px;
161 }
162 .tablesaw-advance a.tablesaw-nav-btn.left:before,
163 .tablesaw-advance a.tablesaw-nav-btn.right:before,
164 .tablesaw-advance a.tablesaw-nav-btn.down:before,
165 .tablesaw-advance a.tablesaw-nav-btn.up:before {
166 content: "\0020";
167 overflow: hidden;
168 width: 0;
169 height: 0;
170 position: absolute;
171 }
172 .tablesaw-advance a.tablesaw-nav-btn.down:before {
173 left: .5em;
174 top: .65em;
175 border-left: 5px solid transparent;
176 border-right: 5px solid transparent;
177 border-top: 5px solid #808080;
178 }
179 .tablesaw-advance a.tablesaw-nav-btn.up:before {
180 left: .5em;
181 top: .65em;
182 border-left: 5px solid transparent;
183 border-right: 5px solid transparent;
184 border-bottom: 5px solid #808080;
185 }
186 .tablesaw-advance a.tablesaw-nav-btn.left:before,
187 .tablesaw-advance a.tablesaw-nav-btn.right:before {
188 top: .45em;
189 border-top: 5px solid transparent;
190 border-bottom: 5px solid transparent;
191 }
192 .tablesaw-advance a.tablesaw-nav-btn.left:before {
193 left: .6em;
194 border-right: 5px solid #808080;
195 }
196 .tablesaw-advance a.tablesaw-nav-btn.right:before {
197 left: .7em;
198 border-left: 5px solid #808080;
199 }
200 .tablesaw-advance a.tablesaw-nav-btn.disabled {
201 opacity: .25;
202 cursor: default;
203 pointer-events: none;
204 }
205
206 /* Table Toolbar */
207 .tablesaw-bar {
208 clear: both;
209 }
210 .tablesaw-bar * {
211 -webkit-box-sizing: border-box;
212 -moz-box-sizing: border-box;
213 box-sizing: border-box;
214 }
215 .tablesaw-bar-section {
216 float: left;
217 }
218 .tablesaw-bar-section label {
219 font-size: .875em;
220 padding: .5em 0;
221 clear: both;
222 display: block;
223 color: #888;
224 margin-right: .5em;
225 text-transform:uppercase;
226 }
227 .tablesaw-btn,
228 .tablesaw-enhanced .tablesaw-btn {
229 margin-top: .5em;
230 margin-bottom: .5em;
231 }
232 .tablesaw-btn-select,
233 .tablesaw-enhanced .tablesaw-btn-select {
234 margin-bottom: 0;
235 }
236 /* TODO */
237 .tablesaw-bar .tablesaw-bar-section .tablesaw-btn {
238 margin-left: .4em;
239 margin-top: 0;
240 text-transform:uppercase;
241 border: none;
242 box-shadow: none;
243 background: transparent;
244 font-size: 1em;
245 padding-left: .3em;
246 }
247 .tablesaw-bar .tablesaw-bar-section .btn-select {
248 min-width: 0;
249 }
250 .tablesaw-bar .tablesaw-bar-section .btn-select:after {
251 padding-top: .9em;
252 }
253 .tablesaw-bar .tablesaw-bar-section select {
254 color: #888;
255 text-transform: none;
256 background: transparent;
257 }
258 .tablesaw-bar-section ~ table {
259 clear: both;
260 }
261 .tablesaw-bar-section .abbreviated {
262 display: inline;
263 }
264 .tablesaw-bar-section .longform {
265 display: none;
266 }
267 @media (min-width: 24em) {
268 .tablesaw-bar-section .abbreviated {
269 display: none;
270 }
271 .tablesaw-bar-section .longform {
272 display: inline;
273 }
274 }