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