www/jqwidgets/styles/jqx.material.css

changeset 1
37f1a08315f3
child 70
4da2414eabbc
equal deleted inserted replaced
0:033898178630 1:37f1a08315f3
1 /*Rounded Corners*/
2 /*top-left rounded Corners*/
3 .jqx-rc-tl-material {
4 -moz-border-radius-topleft: 2px;
5 -webkit-border-top-left-radius: 2px;
6 border-top-left-radius: 2px;
7 }
8 /*top-right rounded Corners*/
9 .jqx-rc-tr-material {
10 -moz-border-radius-topright: 2px;
11 -webkit-border-top-right-radius: 2px;
12 border-top-right-radius: 2px;
13 }
14 /*bottom-left rounded Corners*/
15 .jqx-rc-bl-material {
16 -moz-border-radius-bottomleft: 2px;
17 -webkit-border-bottom-left-radius: 2px;
18 border-bottom-left-radius: 2px;
19 }
20 /*bottom-right rounded Corners*/
21 .jqx-rc-br-material {
22 -moz-border-radius-bottomright: 2px;
23 -webkit-border-bottom-right-radius: 2px;
24 border-bottom-right-radius: 2px;
25 }
26 /*top rounded Corners*/
27 .jqx-rc-t-material {
28 -moz-border-radius-topleft: 2px;
29 -webkit-border-top-left-radius: 2px;
30 border-top-left-radius: 2px;
31 -moz-border-radius-topright: 2px;
32 -webkit-border-top-right-radius: 2px;
33 border-top-right-radius: 2px;
34 }
35 /*bottom rounded Corners*/
36 .jqx-rc-b-material {
37 -moz-border-radius-bottomleft: 2px;
38 -webkit-border-bottom-left-radius: 2px;
39 border-bottom-left-radius: 2px;
40 -moz-border-radius-bottomright: 2px;
41 -webkit-border-bottom-right-radius: 2px;
42 border-bottom-right-radius: 2px;
43 }
44 /*right rounded Corners*/
45 .jqx-rc-r-material {
46 -moz-border-radius-topright: 2px;
47 -webkit-border-top-right-radius: 2px;
48 border-top-right-radius: 2px;
49 -moz-border-radius-bottomright: 2px;
50 -webkit-border-bottom-right-radius: 2px;
51 border-bottom-right-radius: 2px;
52 }
53 /*left rounded Corners*/
54 .jqx-rc-l-material {
55 -moz-border-radius-topleft: 2px;
56 -webkit-border-top-left-radius: 2px;
57 border-top-left-radius: 2px;
58 -moz-border-radius-bottomleft: 2px;
59 -webkit-border-bottom-left-radius: 2px;
60 border-bottom-left-radius: 2px;
61 }
62 /*all rounded Corners*/
63 .jqx-rc-all-material {
64 -moz-border-radius: 2px;
65 -webkit-border-radius: 2px;
66 border-radius: 2px;
67 }
68
69 .jqx-widget-material, .jqx-widget-header-material, .jqx-fill-state-normal-material,
70 .jqx-widget-content-material, .jqx-fill-state-hover-material, .jqx-fill-state-pressed-material {
71 font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
72 font-size: 14px;
73 }
74
75 .jqx-widget-material {
76 font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
77 font-size: 14px;
78 color: #555;
79 }
80
81 .jqx-widget-content-material {
82 font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
83 font-size: 14px;
84 color: #555;
85 background-color: #ffffff;
86 border-color: #E0E0E0;
87 }
88
89 .jqx-widget-header-material {
90 background-color: #fff;
91 border-color: #E0E0E0;
92 color: #757575;
93 font-weight: 500;
94 *zoom: 1;
95 font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
96 background: #fff;
97 color: #757575;
98 font-size: 14px;
99 }
100
101
102 .jqx-fill-state-normal-material {
103 border-color: #0077BE;
104 *zoom: 1;
105 background: #fafafa;
106 }
107 .jqx-widget-material input::selection, input.jqx-input-widget-material::selection, .jqx-widget-content-material input::selection {
108 background: #0077BE;
109 color: #fff;
110 }
111 .jqx-toolbar-material{
112 border-color: #e0e0e0;
113 }
114
115 .jqx-button-material, jqx-button-material.jqx-fill-state-normal-material {
116 color: #fff;
117 background: #0077BE;
118 border-color: #0077BE;
119 *zoom: 1;
120 outline: none;
121 transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
122 border-radius: 2px;
123 }
124 .jqx-button-material button, jqx-button-material input {
125 background: transparent;
126 color: inherit;
127 border:none;
128 outline: none;
129 }
130
131
132 .jqx-slider-button-material {
133 padding:3px;
134 background: transparent;
135 border:transparent;
136 }
137 .jqx-button-material.float {
138 border-radius: 100%;
139 min-height: 48px;
140 min-width: 48px;
141 width: 48px;
142 height: 48px;
143 max-height: 48px;
144 max-width:48px;
145 }
146
147 .jqx-button-material.outlined {
148 background: transparent;
149 color: #0077BE;
150 border-width: 2px;
151 }
152
153 .jqx-button-material.flat {
154 background: transparent;
155 color: #0077BE;
156 border: none;
157 }
158
159 .jqx-fill-state-hover-material {
160 }
161
162 .jqx-fill-state-pressed-material {
163 }
164
165 .jqx-fill-state-hover-material, .jqx-fill-state-focus-material {
166 text-decoration: none;
167 }
168
169 .jqx-expander-header.jqx-fill-state-hover-material,
170 .jqx-expander-header.jqx-fill-state-normal-material,
171 .jqx-expander-header.jqx-fill-state-pressed-material
172 {
173 background: #fff;
174 border-color: #e0e0e0;
175 }
176 .jqx-expander-header.jqx-fill-state-hover-material {
177 background: #F5F5F5;
178 }
179
180 .jqx-expander-header-material {
181 padding:10px;
182 }
183 .jqx-button-material.jqx-fill-state-hover {
184 opacity: 0.9;
185 cursor: pointer;
186 box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
187 *zoom: 1;
188 }
189
190 .jqx-button-material.jqx-fill-state-hover.outlined,
191 .jqx-button-material.jqx-fill-state-hover.flat {
192 color: #0077BE;
193 box-shadow: none;
194 }
195
196 .jqx-button-material.jqx-fill-state-pressed {
197 cursor: pointer;
198 background: #0077BE;
199 box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
200 }
201
202 .jqx-button-material.jqx-fill-state-pressed.float {
203 box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
204 }
205
206 .jqx-slider-button-material.jqx-fill-state-pressed-material,
207 .jqx-button-material.jqx-fill-state-pressed.outlined,
208 .jqx-button-material.jqx-fill-state-pressed.flat {
209 background: rgba(179,229,252,0.15);
210 box-shadow: none;
211 color: #0077BE;
212 }
213
214 .jqx-button-material.jqx-fill-state-focus {
215 background: #0069A8;
216 box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
217 }
218 .jqx-slider-button-material.jqx-fill-state-focus-material {
219 background: transparent;
220 border-color: transparent;
221 box-shadow:none;
222 }
223
224 .jqx-button-material.jqx-fill-state-focus.outlined,
225 .jqx-button-material.jqx-fill-state-focus.flat {
226 box-shadow: none;
227 background: rgba(99,0,238,0.15);
228 color: #0069A8;
229 }
230
231 .jqx-dropdownlist-state-normal-material, .jqx-dropdownlist-state-hover-material, .jqx-dropdownlist-state-selected-material,
232 .jqx-scrollbar-button-state-hover-material, .jqx-scrollbar-button-state-normal-material, .jqx-scrollbar-button-state-pressed-material,
233 .jqx-scrollbar-thumb-state-normal-horizontal-material, .jqx-scrollbar-thumb-state-hover-horizontal-material, .jqx-scrollbar-thumb-state-pressed-horizontal-material,
234 .jqx-scrollbar-thumb-state-normal-material, .jqx-scrollbar-thumb-state-pressed-material, .jqx-tree-item-hover-material, .jqx-tree-item-selected-material,
235 .jqx-tree-item-material, .jqx-menu-item-material, .jqx-menu-item-hover-material, .jqx-menu-item-selected-material, .jqx-menu-item-top-material, .jqx-menu-item-top-hover-material,
236 .jqx-menu-item-top-selected-material, .jqx-slider-button-material, .jqx-slider-slider-material {
237 -webkit-transition: background-color 100ms linear;
238 -moz-transition: background-color 100ms linear;
239 -o-transition: background-color 100ms linear;
240 -ms-transition: background-color 100ms linear;
241 transition: background-color 100ms linear;
242 }
243
244
245 .jqx-primary-material.jqx-input-label-material {
246 color: #1ca8dd !important;
247 }
248 .jqx-primary-material.jqx-input-bar-material:before {
249 background: #1ca8dd !important;
250 }
251 .jqx-success-material.jqx-input-label-material {
252 color: #5cb85c !important;
253 }
254 .jqx-success-material.jqx-input-bar-material:before {
255 background: #5cb85c !important;
256 }
257 .jqx-inverse-material.jqx-input-label-material {
258 color: #666 !important;
259 }
260 .jqx-inverse-material.jqx-input-bar-material:before {
261 background: #666 !important;
262 }
263 .jqx-danger-material.jqx-input-label-material {
264 color: #d9534f !important;
265 }
266 .jqx-danger-material.jqx-input-bar-material:before {
267 background: #d9534f !important;
268 }
269 .jqx-warning-material.jqx-input-label-material {
270 color: #f0ad4e !important;
271 }
272 .jqx-warning-material.jqx-input-bar-material:before {
273 background: #f0ad4e !important;
274 }
275 .jqx-info-material.jqx-input-label-material {
276 color: #5bc0de !important;
277 }
278 .jqx-info-material.jqx-input-bar-material:before {
279 background: #5bc0de !important;
280 }
281
282 .jqx-slider-tooltip-material.jqx-primary-slider, .jqx-slider-tooltip-material.jqx-primary-slider .jqx-fill-state-normal-material {
283 border-color: #1ca8dd;
284 background: #1ca8dd;
285 }
286 .jqx-slider-tooltip-material.jqx-success-slider, .jqx-slider-tooltip-material.jqx-success-slider .jqx-fill-state-normal-material {
287 border-color: #5cb85c;
288 background: #5cb85c;
289 }
290 .jqx-slider-tooltip-material.jqx-inverse-slider, .jqx-slider-tooltip-material.jqx-inverse-slider .jqx-fill-state-normal-material {
291 border-color: #666;
292 background: #666;
293 }
294 .jqx-slider-tooltip-material.jqx-danger-slider, .jqx-slider-tooltip-material.jqx-danger-slider .jqx-fill-state-normal-material {
295 border-color: #d9534f;
296 background: #d9534f;
297 }
298 .jqx-slider-tooltip-material.jqx-warning-slider, .jqx-slider-tooltip-material.jqx-warning-slider .jqx-fill-state-normal-material {
299 border-color: #f0ad4e;
300 background: #f0ad4e;
301 }
302 .jqx-slider-tooltip-material.jqx-info-slider, .jqx-slider-tooltip-material.jqx-info-slider .jqx-fill-state-normal-material {
303 border-color: #5bc0de;
304 background: #5bc0de;
305 }
306
307
308 .jqx-primary-material {
309 color: #1ca8dd !important;
310 background: #fff !important;
311 border-color: #1ca8dd !important;
312 text-shadow: none !important;
313 }
314
315 .jqx-primary-material.jqx-dropdownlist-state-normal-material,
316 .jqx-primary-material.jqx-slider-button-material,
317 .jqx-primary-material.jqx-slider-slider-material,
318 .jqx-primary-material.jqx-combobox-arrow-normal-material,
319 .jqx-primary-material.jqx-combobox-arrow-hover-material,
320 .jqx-primary-material.jqx-action-button-material,
321 .jqx-primary-material:hover,
322 .jqx-primary-material:focus,
323 .jqx-primary-material:active,
324 .jqx-primary-material.active,
325 .jqx-primary-material.disabled,
326 .jqx-primary-material[disabled] {
327 color: #fff !important;
328 background: #1ca8dd !important;
329 border-color: #1ca8dd !important;
330 text-shadow: none !important;
331 }
332
333 .jqx-fill-state-pressed-material.jqx-primary-material,
334 .jqx-primary-material:active,
335 .jqx-primary-material.active {
336 color: #fff !important;
337 background-color: #1ca8dd !important;
338 border-color: #1ca8dd !important;
339 text-shadow: none !important;
340 }
341
342 .jqx-success-material {
343 color: #5cb85c !important;
344 background: #fff !important;
345 border-color: #5cb85c !important;
346 text-shadow: none !important;
347 }
348
349 .jqx-success-material.jqx-dropdownlist-state-normal-material,
350 .jqx-success-material.jqx-slider-button-material,
351 .jqx-success-material.jqx-slider-slider-material,
352 .jqx-success-material.jqx-combobox-arrow-normal-material,
353 .jqx-success-material.jqx-combobox-arrow-hover-material,
354 .jqx-success-material.jqx-action-button-material,
355 .jqx-success-material:hover,
356 .jqx-success-material:focus,
357 .jqx-success-material:active,
358 .jqx-success-material.active,
359 .jqx-success-material.disabled,
360 .jqx-success-material[disabled] {
361 color: #fff !important;
362 background: #5cb85c !important;
363 border-color: #5cb85c !important;
364 text-shadow: none !important;
365 }
366
367 .jqx-fill-state-pressed-material.jqx-success-material,
368 .jqx-success-material:active,
369 .jqx-success-material.active {
370 text-shadow: none !important;
371 color: #fff !important;
372 background: #5cb85c !important;
373 border-color: #5cb85c !important;
374 }
375
376 .jqx-inverse-material {
377 text-shadow: none !important;
378 color: #666 !important;
379 background: #fff !important;
380 border-color: #cccccc !important;
381 }
382
383 .jqx-inverse-material.jqx-dropdownlist-state-normal-material,
384 .jqx-inverse-material.jqx-slider-button-material,
385 .jqx-inverse-material.jqx-slider-slider-material,
386 .jqx-inverse-material.jqx-combobox-arrow-hover-material,
387 .jqx-inverse-material.jqx-combobox-arrow-normal-material,
388 .jqx-inverse-material.jqx-action-button-material,
389 .jqx-inverse-material:hover,
390 .jqx-inverse-material:focus,
391 .jqx-inverse-material:active,
392 .jqx-inverse-material.active,
393 .jqx-inverse-material.disabled,
394 .jqx-inverse-material[disabled] {
395 text-shadow: none !important;
396 color: #666 !important;
397 background: #cccccc !important;
398 border-color: #cccccc !important;
399 }
400
401 .jqx-fill-state-pressed-material.jqx-inverse-material,
402 .jqx-inverse-material:active,
403 .jqx-inverse-material.active {
404 text-shadow: none !important;
405 color: #666 !important;
406 background: #cccccc !important;
407 border-color: #cccccc !important;
408 }
409
410
411 .jqx-danger-material {
412 text-shadow: none !important;
413 color: #d9534f !important;
414 background: #fff !important;
415 border-color: #d9534f !important;
416 }
417
418 .jqx-danger-material.jqx-dropdownlist-state-normal-material,
419 .jqx-danger-material.jqx-slider-button-material,
420 .jqx-danger-material.jqx-slider-slider-material,
421 .jqx-danger-material.jqx-combobox-arrow-hover-material,
422 .jqx-danger-material.jqx-combobox-arrow-normal-material,
423 .jqx-danger-material.jqx-action-button-material,
424 .jqx-danger-material:hover,
425 .jqx-danger-material:focus,
426 .jqx-danger-material:active,
427 .jqx-danger-material.active,
428 .jqx-danger-material.disabled,
429 .jqx-danger-material[disabled] {
430 text-shadow: none !important;
431 color: #fff !important;
432 background: #d9534f !important;
433 border-color: #d9534f !important;
434 }
435
436 .jqx-fill-state-pressed-material.jqx-danger-material,
437 .jqx-danger-material:active,
438 .jqx-danger-material.active {
439 text-shadow: none !important;
440 color: #fff !important;
441 background: #d9534f !important;
442 border-color: #d9534f !important;
443 }
444
445 .jqx-validator-error-label-material {
446 color: #d9534f !important;
447 }
448
449 .jqx-warning-material {
450 text-shadow: none !important;
451 color: #f0ad4e !important;
452 background: #fff !important;
453 border-color: #f0ad4e !important;
454 }
455
456 .jqx-warning-material.jqx-dropdownlist-state-normal-material,
457 .jqx-warning-material.jqx-slider-button-material,
458 .jqx-warning-material.jqx-slider-slider-material,
459 .jqx-warning-material.jqx-combobox-arrow-hover-material,
460 .jqx-warning-material.jqx-combobox-arrow-normal-material,
461 .jqx-warning-material.jqx-action-button-material,
462 .jqx-warning-material:hover,
463 .jqx-warning-material:focus,
464 .jqx-warning-material:active,
465 .jqx-warning-material.active,
466 .jqx-warning-material.disabled,
467 .jqx-warning-material[disabled] {
468 text-shadow: none !important;
469 color: #fff !important;
470 background: #f0ad4e !important;
471 border-color: #f0ad4e !important;
472 }
473
474 .jqx-fill-state-pressed-material.jqx-warning-material,
475 .jqx-warning-material:active,
476 .jqx-warning-material.active {
477 text-shadow: none !important;
478 color: #fff !important;
479 background: #f0ad4e !important;
480 border-color: #f0ad4e !important;
481 }
482
483
484 .jqx-info-material {
485 text-shadow: none !important;
486 color: #5bc0de !important;
487 background: #fff !important;
488 border-color: #5bc0de !important;
489 }
490
491 .jqx-info-material.jqx-dropdownlist-state-normal-material,
492 .jqx-info-material.jqx-slider-button-material,
493 .jqx-info-material.jqx-slider-slider-material,
494 .jqx-info-material.jqx-combobox-arrow-hover-material,
495 .jqx-info-material.jqx-combobox-arrow-normal-material,
496 .jqx-info-material.jqx-action-button-material,
497 .jqx-info-material:hover,
498 .jqx-info-material:focus,
499 .jqx-info-material:active,
500 .jqx-info-material.active,
501 .jqx-info-material.disabled,
502 .jqx-info-material[disabled] {
503 color: #fff !important;
504 background: #5bc0de !important;
505 border-color: #5bc0de !important;
506 text-shadow: none !important;
507 }
508
509 .jqx-fill-state-pressed-material.jqx-info-material,
510 .jqx-info-material:active,
511 .jqx-info-material.active {
512 text-shadow: none !important;
513 color: #fff !important;
514 background: #5bc0de !important;
515 border-color: #5bc0de !important;
516 }
517
518 .jqx-fill-state-pressed-material {
519 background-image: none;
520 outline: 0;
521 }
522
523 .jqx-grid-group-column-material {
524 border-color: transparent;
525 }
526 .jqx-grid-column-menubutton-material {
527 border-width: 0px;
528 }
529 .jqx-grid-groups-row-material > span {
530 padding-left: 4px;
531 }
532
533 .jqx-grid-cell-material {
534 -webkit-box-shadow: none;
535 -moz-box-shadow: none;
536 box-shadow: none;
537 }
538
539 .jqx-grid-pager-top-material .jqx-button-material,
540 .jqx-grid-pager-material .jqx-button-material {
541 color: rgba(0,0,0,.54) !important;
542 background-color: transparent;
543 border-color: transparent;
544 position: relative;
545 height:30px !important;
546 width:30px !important;
547 border-radius:50%;
548 top: -4px;
549 }
550
551 .jqx-grid-pager-input-material {
552 padding:0px !important;
553 }
554
555 .jqx-grid-pager-top-material .jqx-button-material > div,
556 .jqx-grid-pager-material .jqx-button-material > div {
557 top: 3px;
558 position: relative;
559 left: 2px;
560 }
561
562 .jqx-grid-pager-top-material .jqx-button-material.jqx-fill-state-hover,
563 .jqx-grid-pager-top-material .jqx-button-material.jqx-fill-state-pressed,
564 .jqx-grid-pager-material .jqx-button-material.jqx-fill-state-hover,
565 .jqx-grid-pager-material .jqx-button-material.jqx-fill-state-pressed
566 {
567 color: rgba(0,0,0,.54) !important;
568 background-color: transparent;
569 border-color: transparent;
570 box-shadow: none;
571 }
572
573 .jqx-grid-pager-top-material .jqx-grid-pager-number-material,
574 .jqx-grid-pager-material .jqx-grid-pager-number-material {
575
576 background-color: transparent;
577 border-color: transparent;
578 color: rgba(0,0,0,.54) !important;
579 font-size:12px;
580 }
581
582 .jqx-grid-pager-top-material .jqx-grid-pager-number-material:hover,
583 .jqx-grid-pager-material .jqx-grid-pager-number-material:hover {
584 font-size:12px;
585 }
586
587 .jqx-grid-pager-top-material .jqx-grid-pager-number-material.jqx-fill-state-pressed-material ,
588 .jqx-grid-pager-material .jqx-grid-pager-number-material.jqx-fill-state-pressed-material {
589 color: #0077BE !important;
590 font-weight: bold !important;
591 }
592
593 .jqx-grid-column-menubutton-material {
594 background-color: transparent;
595 border-color: #E0E0E0 !important;
596 }
597
598 .jqx-cell-material {
599 font-size: 13px;
600 }
601
602 .jqx-calendar-material > div {
603 padding: 10px;
604 box-sizing: border-box;
605 }
606
607 .jqx-calendar-row-header-material, .jqx-calendar-top-left-header-material {
608 background-color: #f0f0f0;
609 border: 0px solid #f2f2f2;
610 }
611
612 .jqx-calendar-column-header-material {
613 background-color: #FFF;
614 border-top: 1px solid #FFF;
615 border-bottom: 1px solid #e9e9e9;
616 }
617
618 .jqx-expander-header-material {
619 padding-top: 10px;
620 padding-bottom: 10px;
621 }
622
623 .jqx-ribbon-header-vertical-material, .jqx-widget-header-vertical-material {
624 background: #fff;
625 }
626
627 .jqx-scrollbar-state-normal-material {
628 background-color: #f5f5f5;
629 border: 1px solid #f5f5f5;
630 border-left-color: #ddd;
631 }
632
633 .jqx-scrollbar-thumb-state-normal-material, .jqx-scrollbar-thumb-state-normal-horizontal-material {
634 background: #f5f5f5;
635 border-color: #b3b3b3;
636 }
637
638 .jqx-scrollbar-thumb-state-hover-material, .jqx-scrollbar-thumb-state-hover-horizontal-material {
639 background: #e6e6e6;
640 border-color: #b3b3b3;
641 box-shadow: none;
642 -webkit-box-shadow: none;
643 -moz-box-shadow: none;
644 }
645
646 .jqx-progressbar-material {
647 background: #f7f7f7 !important;
648 -webkit-box-shadow: none;
649 -moz-box-shadow: none;
650 box-shadow: none;
651 }
652
653 .jqx-progressbar-value-material, .jqx-splitter-collapse-button-horizontal-material {
654 background: #0077BE;
655 }
656
657 .jqx-splitter-collapse-button-vertical-material, .jqx-progressbar-value-vertical-material {
658 background: #0077BE;
659 }
660
661
662 .jqx-scrollbar-thumb-state-pressed-material, .jqx-splitter-splitbar-vertical-material, .jqx-splitter-splitbar-horizontal-material, .jqx-scrollbar-thumb-state-pressed-horizontal-material,
663 .jqx-scrollbar-button-state-pressed-material {
664 background: #d9d9d9;
665 border-color: #b3b3b3;
666 box-shadow: none;
667 -webkit-box-shadow: none;
668 -moz-box-shadow: none;
669 }
670
671 .jqx-grid-column-sortdescbutton-material, jqx-grid-column-filterbutton-material, .jqx-grid-column-sortascbutton-material {
672 background-color: transparent;
673 border-style: solid;
674 border-width: 0px 0px 0px 0px;
675 border-color: #E0E0E0;
676 }
677
678 .jqx-menu-vertical-material {
679 background: #ffffff;
680 filter: none;
681 }
682
683 .jqx-grid-bottomright-material, .jqx-panel-bottomright-material, .jqx-listbox-bottomright-material {
684 background-color: #fafafa;
685 }
686
687 .jqx-window-material, .jqx-tooltip-material {
688 box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
689 }
690 .jqx-tooltip-material, .jqx-tooltip-material.jqx-popup-material, .jqx-tooltip-material .jqx-fill-state-normal-material {
691 background: #6F6F6F;
692 border-color: #6F6F6F;
693 box-shadow:none;
694 color: #fff;
695 }
696 .jqx-docking-material .jqx-window-material {
697 box-shadow: none;
698 }
699
700 .jqx-docking-panel-material .jqx-window-material {
701 box-shadow: none;
702 }
703
704 .jqx-checkbox-material {
705 line-height:20px;
706 overflow: visible;
707 }
708 .jqx-radiobutton-material {
709 overflow: visible;
710 box-shadow: none;
711 -webkit-box-shadow: none;
712 -moz-box-shadow: none;
713 background-repeat: no-repeat;
714 background: none;
715 line-height:20px;
716 }
717
718 .jqx-radiobutton-material-material, .jqx-radiobutton-hover-material {
719 -moz-border-radius: 100%;
720 -webkit-border-radius: 100%;
721 border-radius: 100%;
722 background-repeat: no-repeat;
723 transition: background-color ease-in .3s;
724 }
725
726 .jqx-radiobutton-check-checked-material {
727 filter: none;
728 background: #fff;
729 background-repeat: no-repeat;
730 -moz-border-radius: 100%;
731 -webkit-border-radius: 100%;
732 border-radius: 100%;
733 }
734
735 .jqx-radiobutton-check-indeterminate-material {
736 filter: none;
737 background: #999;
738 -moz-border-radius: 100%;
739 -webkit-border-radius: 100%;
740 border-radius: 100%;
741 }
742
743 .jqx-radiobutton-check-indeterminate-disabled-material {
744 filter: none;
745 background: #999;
746 -moz-border-radius: 100%;
747 -webkit-border-radius: 100%;
748 border-radius: 100%;
749 }
750
751 .jqx-checkbox-default-material,
752 .jqx-radiobutton-default-material
753 {
754 border-width: 1px;
755 border-color: #E0E0E0;
756 background-color: #fff;
757 overflow: visible;
758 }
759
760 .jqx-checkbox-material[checked] .jqx-checkbox-default-material,
761 .jqx-tree-grid-checkbox[checked].jqx-checkbox-default-material,
762 .jqx-radiobutton-material[checked] .jqx-radiobutton-default-material
763 {
764 background-color: #0077BE;
765 border-color: #0077BE;
766 }
767
768 .jqx-checkbox-check-checked-material {
769 background: transparent url(images/material_check_white.png) center center no-repeat;
770 }
771 .jqx-checkbox-check-indeterminate-material {
772 width:14px !important;
773 height:14px !important;
774 position:relative;
775 top: 1px;
776 left: 1px;
777 background: white;
778 }
779
780 .jqx-checkbox-hover-material,
781 .jqx-radiobutton-hover-material {
782 background-color: #0077BE;
783 border-color: #0077BE;
784 }
785
786
787 .jqx-slider-slider-material {
788 transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
789 }
790
791 .jqx-slider-slider-material:active {
792 transform: scale(1.2);
793 box-shadow: rgba(0,0,0,0.3) 0 0 10px;
794 }
795 .jqx-slider-material[discrete] .jqx-slider-slider-material:active
796 {
797 transform: scaleX(0);
798
799 }
800 .jqx-slider-slider-horizontal-material {
801 background: #0077BE;
802 }
803 .jqx-slider-slider-vertical-material {
804 background: #0077BE;
805 }
806 .jqx-slider-tooltip-material {
807 width: 25px;
808 height: 25px;
809 transform-origin: 50% 100%;
810 border-radius: 50%;
811 transform: scale(0) rotate(45deg);
812 padding:0px;
813 background: transparent !important;
814 }
815 .jqx-slider-tooltip-material.init {
816 transform: scale(1) rotate(45deg);
817 }
818 .jqx-slider-tooltip-material.hide {
819 transition: transform 0.2s ease;
820 transform-origin:50% 100%;
821 transform: scale(0) rotate(45deg);
822 }
823 .jqx-slider-tooltip-material.show {
824 transition: transform 0.2s ease;
825 transform: scale(1) rotate(45deg);
826 }
827
828
829 .jqx-slider-tooltip-material .jqx-tooltip-arrow-t-b,
830 .jqx-slider-tooltip-material .jqx-tooltip-arrow-l-r {
831 display:none;
832 visibility:hidden;
833 }
834
835 .jqx-slider-tooltip-material, .jqx-slider-tooltip-material .jqx-fill-state-normal-material {
836 border-radius: 15px 15px 0px;
837 display: flex;
838 align-items: center;
839 justify-content: center;
840 background: #0077BE;
841 color: #fff;
842 font-size:11px;
843 }
844 .jqx-slider-tooltip-material.far, .jqx-slider-tooltip-material.far .jqx-fill-state-normal-material {
845 border-radius: 0px 15px 15px 15px;
846 }
847 .jqx-slider-tooltip-material.vertical, .jqx-slider-tooltip-material.vertical .jqx-fill-state-normal-material {
848 border-radius: 15px 0px 15px 15px;
849 }
850 .jqx-slider-tooltip-material.vertical.far, .jqx-slider-tooltip-material.vertical.far .jqx-fill-state-normal-material {
851 border-radius: 15px 15px 15px 0px;
852 }
853 .jqx-slider-tooltip-material {
854 background:transparent;
855 border:none !important;
856 box-shadow:none;
857 }
858 .jqx-slider-tooltip-material .jqx-tooltip-main-material {
859 top: -7px;
860 right: 11px;
861 }
862 .jqx-slider-tooltip-material.far .jqx-tooltip-main-material {
863 top: 3px;
864 right: 4px;
865 }
866 .jqx-slider-tooltip-material.vertical .jqx-tooltip-main-material {
867 top: -3px;
868 right: 3px;
869 }
870 .jqx-slider-tooltip-material .jqx-tooltip-text {
871 background: transparent;
872 border:none;
873 padding: 0px;
874 overflow:visible;
875 }
876 .jqx-slider-tooltip-material .jqx-tooltip-text>span {
877 transform: rotate(-45deg);
878 }
879 .jqx-slider-tooltip-material.range {
880 width: 35px;
881 height:35px;
882 }
883
884 .jqx-slider-rangebar-material {
885 border-color: #0077BE;
886 background: #0077BE;
887 }
888
889 .jqx-slider-track-horizontal-material, .jqx-slider-track-vertical-material {
890 border-color: #E0E0E0;
891 background: #f0f0f0;
892 }
893
894 .jqx-slider-button-material {
895 -moz-border-radius: 100%;
896 -webkit-border-radius: 100%;
897 border-radius: 100%;
898 }
899 .jqx-slider-button-material.jqx-fill-state-normal-material,
900 .jqx-slider-button-material.jqx-fill-state-hover-material,
901 .jqx-slider-button-material.jqx-fill-state-pressed-material
902 {
903 background: transparent !important;
904 }
905
906 .jqx-listitem-state-hover-material,
907 .jqx-listitem-state-selected-material,
908 .jqx-listitem-state-normal-material {
909 padding: 5px;
910 margin:0px;
911 }
912
913 .jqx-scheduler-edit-dialog-label-material {
914 line-height: 35px;
915 padding-top: 6px;
916 padding-bottom: 6px;
917
918 }
919 .jqx-scheduler-edit-dialog-field-material {
920 line-height: 35px;
921 padding-top: 6px;
922 padding-bottom: 6px;
923 }
924 .jqx-scheduler-edit-dialog-label-rtl-material {
925 line-height: 35px;
926 padding-top: 6px;
927 padding-bottom: 6px;
928 }
929 .jqx-scheduler-edit-dialog-field-rtl-material {
930 line-height: 35px;
931 padding-top: 6px;
932 padding-bottom: 6px;
933 }
934
935 /*applied to a list item when the item is selected.*/
936 .jqx-listitem-state-hover-material, .jqx-menu-item-hover-material, .jqx-tree-item-hover-material, .jqx-calendar-cell-hover-material, .jqx-grid-cell-hover-material,
937 .jqx-menu-vertical-material .jqx-menu-item-top-hover-material, .jqx-input-popup-material .jqx-fill-state-hover-material,
938 .jqx-input-popup-material .jqx-fill-state-pressed-material {
939 color: #333 !important;
940 border-color: #F5F5F5;
941 text-decoration: none;
942 background-color: #F5F5F5;
943 background-repeat: repeat-x;
944 outline: 0;
945 background: #F5F5F5; /* Old browsers */
946 -webkit-box-shadow: none;
947 -moz-box-shadow: none;
948 box-shadow: none;
949 background-position: 0 0;
950 }
951
952 .jqx-scheduler-cell-hover-material {
953 border-color: #F5F5F5 !important;
954 background: #F5F5F5 !important;
955 }
956
957 .jqx-listitem-state-selected-material, .jqx-menu-item-selected-material, .jqx-tree-item-selected-material, .jqx-calendar-cell-selected-material, .jqx-grid-cell-selected-material,
958 .jqx-menu-vertical-material .jqx-menu-item-top-selected-material, .jqx-grid-selectionarea-material, .jqx-input-button-header-material, .jqx-input-button-innerHeader-material {
959 color: #0077BE !important;
960 border-color: #E1F5FE !important;
961 background: #E1F5FE; /* Old browsers */
962 box-shadow: none;
963 }
964
965
966 .jqx-grid-cell-material .jqx-button-material, .jqx-grid-cell-material .jqx-button-material.jqx-fill-state-hover-material, .jqx-grid-cell-material .jqx-button-material.jqx-fill-state-pressed-material {
967 -webkit-box-shadow: none;
968 -moz-box-shadow: none;
969 box-shadow: none;
970 -webkit-transition: none;
971 -moz-transition: none;
972 -o-transition: none;
973 transition: none;
974 }
975
976 .jqx-popup-material {
977 border: 1px solid #E0E0E0;
978 *border-right-width: 2px;
979 *border-bottom-width: 2px;
980 -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
981 -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
982 }
983
984 .jqx-grid-column-sortascbutton-material, .jqx-expander-arrow-bottom-material, .jqx-window-collapse-button-material, .jqx-menu-item-arrow-up-material, .jqx-menu-item-arrow-up-selected-material, .jqx-menu-item-arrow-top-up-material, .jqx-icon-arrow-up-material, .jqx-icon-arrow-up-hover-material, .jqx-icon-arrow-up-selected-material {
985 background-image: url('images/material-icon-up.png');
986 background-repeat: no-repeat;
987 background-position: center;
988 }
989
990 .jqx-widget-material .jqx-grid-group-expand-material, .jqx-grid-group-expand-material, .jqx-grid-column-menubutton-material, .jqx-grid-column-sortdescbutton-material, .jqx-expander-arrow-top-material, .jqx-window-collapse-button-collapsed-material, .jqx-menu-item-arrow-down-material, .jqx-menu-item-arrow-down-selected-material, .jqx-menu-item-arrow-down-material, .jqx-icon-arrow-down-material, .jqx-icon-arrow-down-hover-material, .jqx-icon-arrow-down-selected-material {
991 background-image: url('images/material-icon-down.png');
992 background-repeat: no-repeat;
993 background-position: center;
994 }
995
996 .jqx-tabs-arrow-left-material, .jqx-menu-item-arrow-left-selected-material, .jqx-menu-item-arrow-top-left, .jqx-icon-arrow-left-material, .jqx-icon-arrow-down-left-material, .jqx-icon-arrow-left-selected-material {
997 background-image: url('images/material-icon-left.png');
998 background-repeat: no-repeat;
999 background-position: center;
1000 }
1001
1002 .jqx-widget-material .jqx-grid-group-collapse-material, .jqx-grid-group-collapse-material, .jqx-tabs-arrow-right-material, .jqx-menu-item-arrow-right-selected-material, .jqx-menu-item-arrow-top-right-material, .jqx-icon-arrow-right-material, .jqx-icon-arrow-right-hover-material, .jqx-icon-arrow-right-selected-material {
1003 background-image: url('images/material-icon-right.png');
1004 background-repeat: no-repeat;
1005 background-position: center;
1006 }
1007
1008 .jqx-tree-item-arrow-collapse-rtl-material, .jqx-tree-item-arrow-collapse-hover-rtl-material {
1009 background-image: url(images/material-icon-left.png);
1010 }
1011
1012 .jqx-menu-item-arrow-left-selected-material {
1013 background-image: url('images/material-icon-left.png');
1014 background-repeat: no-repeat;
1015 background-position: center;
1016 }
1017
1018 .jqx-menu-item-arrow-right-selected-material {
1019 background-image: url('images/material-icon-right.png');
1020 background-repeat: no-repeat;
1021 background-position: center;
1022 }
1023
1024 .jqx-input-button-content-material {
1025 font-size: 10px;
1026 }
1027
1028 .jqx-widget .jqx-grid-column-header-cell-material {
1029 padding-top: 8px;
1030 padding-bottom: 8px;
1031 height:30px;
1032 }
1033
1034 .jqx-widget .jqx-grid-row-cell-material {
1035 padding-top: 8px;
1036 padding-bottom: 8px;
1037 height:30px;
1038 }
1039
1040 .jqx-widget .jqx-grid-cell, .jqx-widget .jqx-grid-column-header, .jqx-widget .jqx-grid-group-cell {
1041 border-color: #E0E0E0;
1042 }
1043
1044 .jqx-combobox-material .jqx-icon-close-material {
1045 background-image:url(images/close_white.png)
1046 }
1047 .jqx-combobox-material, .jqx-input-material {
1048 border-color: #E0E0E0;
1049 color: #555555;
1050 background-color: #ffffff;
1051 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
1052 -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
1053 }
1054
1055 .jqx-combobox-content-material,
1056 .jqx-datetimeinput-content-material
1057 {
1058 border-color: transparent;
1059 }
1060 .jqx-combobox-arrow-normal-material {
1061 background: #fff;
1062 border-color: transparent;
1063 }
1064
1065 .jqx-combobox-content-focus-material,
1066 .jqx-combobox-state-focus-material,
1067 .jqx-numberinput-focus-material {
1068 outline: none;
1069 }
1070
1071 .jqx-input-group-material {
1072 position: relative;
1073 display: inline-block;
1074 overflow: visible;
1075 border: none;
1076 box-shadow: none;
1077 }
1078
1079 .jqx-input-group-material input {
1080 width: 100%;
1081 height: 100%;
1082 box-sizing: border-box;
1083 }
1084 .jqx-input-group-material textarea {
1085 width: 100%;
1086 height: 100%;
1087 outline: none;
1088 resize: none;
1089 border-left: none;
1090 border-right: none;
1091 border-top: none;
1092 border-bottom-color: #e0e0e0;
1093 }
1094 .jqx-numberinput-material,
1095 .jqx-maskedinput-material
1096 {
1097 position:relative;
1098 }
1099 .jqx-numberinput-material input {
1100 height:100% !important;
1101 }
1102
1103 .jqx-input-material.jqx-validator-error-element {
1104 border-color: transparent !important;
1105 border-bottom: 1px solid #df2227 !important;
1106 }
1107 .jqx-input-material input,
1108 .jqx-dropdownlist-state-normal-material,
1109 .jqx-combobox-state-normal-material,
1110 .jqx-datetimeinput-material,
1111 .jqx-numberinput-material,
1112 .jqx-maskedinput-material
1113 {
1114 background: #fff;
1115 border-color: #fff;
1116 border-radius: 0;
1117 box-shadow: none;
1118 border-bottom: 1px solid #E0E0E0;
1119 outline: none;
1120 }
1121 .jqx-datetimeinput-material .jqx-action-button-material,
1122 .jqx-datetimeinput-material .jqx-action-button-rtl-material
1123 {
1124 background-color: transparent;
1125 border-color: transparent;
1126 }
1127 .jqx-datetimeinput-material, .jqx-datetimeinput-material > div,
1128 .jqx-numberinput-material, .jqx-numberinput-material > div,
1129 .jqx-maskedinput-material, .jqx-maskedinput-material > div,
1130 .jqx-dropdownlist-state-normal-material, .jqx-dropdownlist-state-normal-material > div, .jqx-dropdownlist-state-normal-material > div > div,
1131 .jqx-combobox-state-normal-material, .jqx-combobox-state-normal-material > div, .jqx-combobox-state-normal-material > div > div {
1132 overflow: visible !important;
1133 }
1134
1135 .jqx-input-material input:focus {
1136 border-radius: 0;
1137 box-shadow: none;
1138 }
1139
1140 .jqx-input-material input, input[type="text"].jqx-input-material, input[type="password"].jqx-input-material, input[type="text"].jqx-widget-content-material, input[type="textarea"].jqx-widget-content-material, textarea.jqx-input-material {
1141 font-size: 14px;
1142 resize: none;
1143 background: #fff;
1144 border: none;
1145 border-radius: 0;
1146 box-sizing:border-box;
1147 box-shadow: none;
1148 border-bottom: 1px solid #E0E0E0;
1149 }
1150 .jqx-input-label {
1151 visibility:inherit;
1152 }
1153 .jqx-input-bar{
1154 visibility:inherit;
1155 }
1156 input:focus ~ .jqx-input-label-material,
1157 textarea:focus ~ .jqx-input-label-material,
1158 .jqx-input-widget-material[hint=true] .jqx-input-label,
1159 .jqx-text-area-material[hint=true] .jqx-input-label,
1160 .jqx-dropdownlist-state-selected-material .jqx-input-label,
1161 .jqx-dropdownlist-state-normal-material[hint=true] .jqx-input-label,
1162 .jqx-combobox-state-normal-material[hint=true] .jqx-input-label,
1163 .jqx-combobox-material .jqx-input-label.focused,
1164 .jqx-dropdownlist-material .jqx-input-label.focused,
1165 .jqx-datetimeinput-material[hint=true] .jqx-input-label,
1166 .jqx-maskedinput-material[hint=true] .jqx-input-label,
1167 .jqx-numberinput-material[hint=true] .jqx-input-label,
1168 .jqx-formattedinput-material[hint=true] .jqx-input-label
1169 {
1170 top: -15px;
1171 font-size: 12px;
1172 color: #0077BE;
1173 }
1174 .jqx-dropdownlist-material[default-placeholder="true"] .jqx-input-label {
1175 visibility: hidden;
1176 }
1177
1178
1179 input:focus ~ .jqx-input-bar:before,
1180 textarea:focus ~ .jqx-input-bar:before,
1181 .jqx-dropdownlist-state-selected-material .jqx-input-bar:before,
1182 .jqx-dropdownlist-material .jqx-input-bar.focused:before,
1183 .jqx-combobox-material .jqx-input-bar.focused:before,
1184 .jqx-complex-input-group-material .jqx-input-bar.focused::before,
1185 .jqx-combobox-state-selected-material .jqx-input-bar:before {
1186 width: 100%;
1187 }
1188 .jqx-complex-input-group-material .jqx-fill-state-normal-material {
1189 border-color: #fafafa;
1190 }
1191 input[type="password"] {
1192 letter-spacing: 0.3em;
1193 }
1194
1195 .jqx-input-label-material {
1196 color: #E0E0E0;
1197 font-size: 14px;
1198 font-weight: normal;
1199 position: absolute;
1200 pointer-events: none;
1201 left: 2px;
1202 top:10px;
1203 top: calc(50% - 7px);
1204 transition: 300ms ease all;
1205 }
1206 .jqx-input-label.initial {
1207 transition: none;
1208 }
1209 .jqx-input-bar-material {
1210 position: relative;
1211 display: block;
1212 z-index:1;
1213 }
1214
1215 .jqx-input-bar-material:before {
1216 content: '';
1217 height: 2px;
1218 width: 0;
1219 bottom: 0px;
1220 position: absolute;
1221 background: #0077BE;
1222 transition: 300ms ease all;
1223 left: 0%;
1224 }
1225 .jqx-formatted-input-spin-button-material, .jqx-input-group-addon-material {
1226 border-color: #fff;
1227 background: #fff;
1228 }
1229 .jqx-dropdownlist-state-selected-material,
1230 .jqx-combobox-state-selected-material {
1231 color: #0077BE;
1232 }
1233
1234
1235 .jqx-dropdownlist-state-normal-material .jqx-icon-arrow-down-material,
1236 .jqx-combobox-state-normal-material .jqx-icon-arrow-down-material,
1237 .sorticon.descending .jqx-grid-column-sorticon-material,
1238 .jqx-tree-item-arrow-expand-material,
1239 .jqx-expander-header-material .jqx-icon-arrow-down
1240 {
1241 transform: rotate(0deg);
1242 transition: transform 0.2s ease-out;
1243 }
1244 .jqx-expander-header-material .jqx-icon-arrow-up {
1245 transform: rotate(180deg);
1246 transition: transform 0.2s ease-out;
1247 background-image: url('images/material-icon-down.png');
1248 }
1249
1250 .jqx-tree-item-arrow-collapse-material
1251 {
1252 transform: rotate(-90deg);
1253 background-image: url('images/material-icon-down.png');
1254 background-repeat: no-repeat;
1255 background-position: center;
1256 transition: transform 0.2s ease-out;
1257 }
1258 .jqx-dropdownlist-state-selected-material .jqx-icon-arrow-down-material,
1259 .jqx-combobox-state-selected-material .jqx-icon-arrow-down-material,
1260 .sorticon.ascending .jqx-grid-column-sorticon-material
1261 {
1262 transform: rotate(180deg);
1263 transition: transform 0.2s ease-out;
1264 left: -1px;
1265 }
1266 .jqx-combobox-state-selected-material .jqx-icon-arrow-down-material{
1267 left:-1px;
1268 }
1269 .jqx-listbox-container {
1270 margin-top: 1px;
1271 }
1272
1273 input[type="text"].jqx-input-material:-moz-placeholder, input[type="text"].jqx-widget-content-material:-moz-placeholder, input[type="textarea"].jqx-widget-content-material:-moz-placeholder, textarea.jqx-input-material:-moz-placeholder {
1274 color: #999999;
1275 }
1276
1277 input[type="text"].jqx-input-material:-webkit-input-placeholder, input[type="text"].jqx-widget-content-material:-webkit-input-placeholder, input[type="textarea"].jqx-widget-content-material:-webkit-input-placeholder, textarea.jqx-input-material:-webkit-input-placeholder {
1278 color: #999999;
1279 }
1280
1281 input[type="text"].jqx-input-material:-ms-input-placeholder, input[type="text"].jqx-widget-content-material:-ms-input-placeholder, input[type="textarea"].jqx-widget-content-material:-ms-input-placeholder, textarea.jqx-input-material:-ms-input-placeholder {
1282 color: #999999;
1283 }
1284
1285 .jqx-combobox-content-focus-material, .jqx-combobox-state-focus-material, .jqx-fill-state-focus-material,
1286 .jqx-numberinput-focus-material {
1287 outline: none;
1288 }
1289
1290 .jqx-popup-material.jqx-fill-state-focus-material {
1291 outline: none;
1292 border-color: #E0E0E0 !important;
1293 }
1294
1295 .jqx-datetimeinput-content, .jqx-datetimeinput-container {
1296 overflow: visible !important;
1297 }
1298 .jqx-text-area-material, .jqx-text-area-material > div {
1299 overflow:visible !important;
1300 }
1301 .jqx-text-area-element-material {
1302 box-sizing: border-box;
1303 }
1304 .jqx-pivotgrid-content-wrapper.jqx-fill-state-normal-material {
1305 border-color: #E0E0E0;
1306 }
1307
1308 .jqx-grid-cell-material.jqx-grid-cell-selected-material > .jqx-grid-group-expand-material {
1309 background-image: url('images/material-icon-down.png');
1310 background-repeat: no-repeat;
1311 background-position: center;
1312 }
1313
1314 .jqx-grid-cell-material.jqx-grid-cell-selected-material > .jqx-grid-group-collapse-material {
1315 background-image: url('images/material-icon-right.png');
1316 background-repeat: no-repeat;
1317 background-position: center;
1318 }
1319
1320 .jqx-grid-cell-material.jqx-grid-cell-selected-material > .jqx-grid-group-collapse-rtl-material {
1321 background-image: url('images/material-icon-left.png');
1322 background-repeat: no-repeat;
1323 background-position: center;
1324 }
1325
1326 .jqx-grid-cell-material.jqx-grid-cell-selected-material > .jqx-grid-group-expand-rtl-material {
1327 background-image: url('images/material-icon-down.png');
1328 background-repeat: no-repeat;
1329 background-position: center;
1330 }
1331 .jqx-tabs-title-selected-top-material, .jqx-tabs-selection-tracker-top-material {
1332 border-color: transparent;
1333 filter: none;
1334 background: #fff;
1335 color: #333;
1336 -webkit-box-shadow: none;
1337 -moz-box-shadow: none;
1338 box-shadow: none;
1339 }
1340 .jqx-grid-cell-filter-row-material {
1341 background-color: #fafafa;
1342 }
1343
1344 .jqx-tabs-title-material, .jqx-ribbon-item-material {
1345 color: #333;
1346 }
1347 .jqx-tabs-title-selected-bottom-material,
1348 .jqx-tabs-title-selected-top-material
1349 {
1350 color: #0077BE;
1351 font-weight:500;
1352 padding-top:5px;
1353 padding-bottom:5px;
1354 }
1355 .jqx-tabs-title.jqx-fill-state-hover-material {
1356 border-color: transparent;
1357 }
1358 .jqx-ribbon-item-material {
1359 cursor: pointer;
1360 }
1361 .jqx-ribbon-item-selected-material {
1362 color: #0077BE;
1363 font-weight:500;
1364 border-color: transparent;
1365 }
1366
1367 .jqx-ribbon-item-hover-material {
1368 background: transparent;
1369 }
1370
1371 .jqx-ribbon-header-top-material {
1372 border-color: transparent;
1373 border-bottom-color: #E0E0E0;
1374 }
1375
1376 .jqx-ribbon-header-bottom-material {
1377 border-color: transparent;
1378 border-top-color: #E0E0E0;
1379 }
1380
1381 .jqx-ribbon-header-right-material {
1382 border-color: transparent;
1383 border-left-color:#E0E0E0;
1384 }
1385
1386 .jqx-ribbon-header-left-material {
1387 border-color: transparent;
1388 border-right-color:#E0E0E0;
1389 }
1390
1391 .jqx-tabs-title-selected-bottom-material, .jqx-tabs-selection-tracker-bottom-material {
1392 border-color: transparent;
1393 border-top: 1px solid #fff;
1394 filter: none;
1395 background: #fff;
1396 -webkit-box-shadow: none;
1397 -moz-box-shadow: none;
1398 box-shadow: none;
1399 }
1400
1401 .jqx-tabs-material, .jqx-ribbon-material {
1402 border-color: transparent;
1403 }
1404
1405 .jqx-tabs-header-material, .jqx-ribbon-header-material {
1406 background: transparent;
1407 }
1408 .jqx-tabs-position-bottom .jqx-tabs-header-material {
1409 border-color: transparent;
1410 }
1411 .jqx-layout-material .jqx-tabs-header-material, .jqx-layout-material .jqx-ribbon-header-material {
1412 background: #fff;
1413 border-color: #E0E0E0;
1414 }
1415 .jqx-tabs-title-bottom {
1416 border-color: transparent;
1417 }
1418 .jqx-tabs-title-hover-top-material, .jqx-tabs-title-hover-bottom-material, .jqx-tabs-header-material {
1419 -webkit-box-shadow: none !important;
1420 -moz-box-shadow: none !important;
1421 box-shadow: none !important;
1422 background: transparent;
1423 }
1424
1425 .jqx-tabs-content-material {
1426 box-sizing: border-box;
1427 border: 1px solid #E0E0E0;
1428 border-top-color: transparent;
1429 padding:5px;
1430 }
1431 .jqx-tabs-bar-material {
1432 position: absolute;
1433 bottom: 0;
1434 background: #0077BE;
1435 height: 2px;
1436 z-index:10;
1437 transition: .5s cubic-bezier(.35,0,.25,1);
1438 }
1439 .jqx-tabs-bar-material.vertical {
1440 width: 2px;
1441 }
1442 .jqx-tabs-position-bottom .jqx-tabs-bar-material {
1443 top: 0;
1444 }
1445
1446
1447 .jqx-layout-material {
1448 background-color: #cccccc;
1449 }
1450
1451 .jqx-kanban-column-header-collapsed-material {
1452 background: -moz-linear-gradient(0deg, rgba(248,248,248,1) 0%, rgba(234,234,234,1) 100%); /* ff3.6+ */
1453 background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(248,248,248,1)), color-stop(100%, rgba(234,234,234,1))); /* safari4+,chrome */
1454 background: -webkit-linear-gradient(0deg, rgba(248,248,248,1) 0%, rgba(234,234,234,1) 100%); /* safari5.1+,chrome10+ */
1455 background: -o-linear-gradient(0deg, rgba(248,248,248,1) 0%, rgba(234,234,234,1) 100%); /* opera 11.10+ */
1456 background: -ms-linear-gradient(0deg, rgba(248,248,248,1) 0%, rgba(234,234,234,1) 100%); /* ie10+ */
1457 background: linear-gradient(90deg, rgba(248,248,248,1) 0%, rgba(234,234,234,1) 100%); /* w3c */
1458 }
1459
1460
1461 .jqx-calendar-cell-material {
1462 border-radius: 50%;
1463 font-size:12px;
1464 }
1465 .jqx-calendar-cell-year-material,
1466 .jqx-calendar-cell-decade-material {
1467 border-radius: 25%;
1468 }
1469
1470 .jqx-calendar-title-content-material {
1471 font-weight:bold;
1472 }
1473 .jqx-calendar-column-cell-material {
1474 color: rgba(0,0,0,.38);
1475 font-size:12px;
1476 }
1477 .jqx-grid-column-menubutton-material {
1478 background-image: url('images/material-icon-down.png');
1479 }
1480
1481 .jqx-tabs-close-button-material {
1482 background-image: url(images/close.png);
1483 background-repeat: no-repeat;
1484 background-position: center;
1485 }
1486
1487 .jqx-tabs-close-button-selected-material {
1488 background-image: url(images/close.png);
1489 background-repeat: no-repeat;
1490 background-position: center;
1491 }
1492
1493 .jqx-tabs-close-button-hover-material {
1494 background-image: url(images/close.png);
1495 background-repeat: no-repeat;
1496 background-position: center;
1497 }
1498
1499 .jqx-scrollbar-button-state-pressed-material .jqx-icon-arrow-up-selected-material {
1500 background-image: url('images/material-icon-up.png');
1501 background-repeat: no-repeat;
1502 background-position: center;
1503 }
1504
1505 .jqx-scrollbar-button-state-pressed-material .jqx-icon-arrow-down-selected-material {
1506 background-image: url('images/material-icon-down.png');
1507 background-repeat: no-repeat;
1508 background-position: center;
1509 }
1510
1511 .jqx-scrollbar-button-state-pressed-material .jqx-icon-arrow-left-selected-material {
1512 background-image: url('images/material-icon-left.png');
1513 background-repeat: no-repeat;
1514 background-position: center;
1515 }
1516
1517 .jqx-scrollbar-button-state-pressed-material .jqx-icon-arrow-right-selected-material {
1518 background-image: url('images/material-icon-right.png');
1519 background-repeat: no-repeat;
1520 background-position: center;
1521 }
1522
1523 .jqx-grid-cell-material.jqx-grid-cell-selected-material > .jqx-grid-group-expand-material {
1524 background-image: url('images/material-icon-down.png');
1525 background-repeat: no-repeat;
1526 background-position: center;
1527 }
1528
1529 .jqx-grid-cell-material.jqx-grid-cell-selected-material > .jqx-grid-group-collapse-material {
1530 background-image: url('images/material-icon-right.png');
1531 background-repeat: no-repeat;
1532 background-position: center;
1533 }
1534
1535 .jqx-grid-cell-material.jqx-grid-cell-selected-material > .jqx-grid-group-collapse-rtl-material {
1536 background-image: url('images/material-icon-left.png');
1537 background-repeat: no-repeat;
1538 background-position: center;
1539 }
1540
1541 .jqx-grid-cell-material.jqx-grid-cell-selected-material > .jqx-grid-group-expand-rtl-material {
1542 background-image: url('images/material-icon-down.png');
1543 background-repeat: no-repeat;
1544 background-position: center;
1545 }
1546
1547 .jqx-grid-group-collapse-material {
1548 background-image: url(images/material-icon-right.png);
1549 background-position: 50% 50%;
1550 background-repeat: no-repeat;
1551 }
1552
1553 .jqx-grid-group-collapse-rtl-material {
1554 padding-right: 0px;
1555 background-image: url(images/material-icon-left.png);
1556 background-position: 50% 50%;
1557 background-repeat: no-repeat;
1558 }
1559
1560 .jqx-grid-group-expand-material, .jqx-grid-group-expand-rtl-material {
1561 padding-right: 0px;
1562 background-image: url(images/material-icon-down.png);
1563 background-position: 50% 50%;
1564 background-repeat: no-repeat;
1565 }
1566
1567 .jqx-icon-arrow-first-material {
1568 background-image: url('images/material-icon-first.png');
1569 background-repeat: no-repeat;
1570 background-position: center;
1571 }
1572
1573 .jqx-icon-arrow-last-material {
1574 background-image: url('images/material-icon-last.png');
1575 background-repeat: no-repeat;
1576 background-position: center;
1577 }
1578
1579 .jqx-icon-arrow-first-hover-material {
1580 background-image: url('images/material-icon-first.png');
1581 background-repeat: no-repeat;
1582 background-position: center;
1583 }
1584
1585 .jqx-icon-arrow-last-hover-material {
1586 background-image: url('images/material-icon-last.png');
1587 background-repeat: no-repeat;
1588 background-position: center;
1589 }
1590
1591 .jqx-icon-arrow-first-selected-material {
1592 background-image: url('images/material-icon-first.png');
1593 background-repeat: no-repeat;
1594 background-position: center;
1595 }
1596
1597 .jqx-icon-arrow-last-selected-material {
1598 background-image: url('images/material-icon-last.png');
1599 background-repeat: no-repeat;
1600 background-position: center;
1601 }
1602
1603 .jqx-fill-state-pressed-material .jqx-icon-arrow-first-selected-material {
1604 background-image: url('images/material-icon-first-white.png');
1605 background-repeat: no-repeat;
1606 background-position: center;
1607 }
1608
1609 .jqx-fill-state-pressed-material .jqx-icon-arrow-last-selected-material {
1610 background-image: url('images/material-icon-last-white.png');
1611 background-repeat: no-repeat;
1612 background-position: center;
1613 }
1614 .jqx-fill-state-pressed-material .jqx-icon-arrow-left-selected-material {
1615 background-image: url('images/material-icon-left-white.png');
1616 background-repeat: no-repeat;
1617 background-position: center;
1618 }
1619
1620 .jqx-fill-state-pressed-material .jqx-icon-arrow-right-selected-material {
1621 background-image: url('images/material-icon-right-white.png');
1622 background-repeat: no-repeat;
1623 background-position: center;
1624 }
1625
1626 .jqx-primary .jqx-icon-arrow-down-material, .jqx-warning .jqx-icon-arrow-down-material, .jqx-danger .jqx-icon-arrow-down-material, .jqx-success .jqx-icon-arrow-down-material, .jqx-info .jqx-icon-arrow-down-material {
1627 background-image: url('images/material-icon-down.png');
1628 }
1629
1630 .jqx-primary .jqx-icon-arrow-down-selected-material, .jqx-warning .jqx-icon-arrow-down-selected-material, .jqx-danger .jqx-icon-arrow-down-selected-material, .jqx-success .jqx-icon-arrow-down-selected-material, .jqx-info .jqx-icon-arrow-down-selected-material {
1631 background-image: url('images/material-icon-down.png');
1632 }
1633
1634 .jqx-primary .jqx-icon-arrow-down-hover-material, .jqx-warning .jqx-icon-arrow-down-hover-material, .jqx-danger .jqx-icon-arrow-down-hover-material, .jqx-success .jqx-icon-arrow-down-hover-material, .jqx-info .jqx-icon-arrow-down-hover-material {
1635 background-image: url('images/material-icon-down.png');
1636 }
1637
1638 .jqx-primary .jqx-icon-arrow-up-material, .jqx-warning .jqx-icon-arrow-up-material, .jqx-danger .jqx-icon-arrow-up-material, .jqx-success .jqx-icon-arrow-up-material, .jqx-info .jqx-icon-arrow-up-material {
1639 background-image: url('images/material-icon-up.png');
1640 }
1641
1642 .jqx-primary .jqx-icon-arrow-up-selected-material, .jqx-warning .jqx-icon-arrow-up-selected-material, .jqx-danger .jqx-icon-arrow-up-selected-material, .jqx-success .jqx-icon-arrow-up-selected-material, .jqx-info .jqx-icon-arrow-up-selected-material {
1643 background-image: url('images/material-icon-up.png');
1644 }
1645
1646 .jqx-primary .jqx-icon-arrow-up-hover-material, .jqx-warning .jqx-icon-arrow-up-hover-material, .jqx-danger .jqx-icon-arrow-up-hover-material, .jqx-success .jqx-icon-arrow-up-hover-material, .jqx-info .jqx-icon-arrow-up-hover-material {
1647 background-image: url('images/material-icon-up.png');
1648 }
1649
1650
1651 .jqx-primary .jqx-icon-arrow-left-material, .jqx-warning .jqx-icon-arrow-left-material, .jqx-danger .jqx-icon-arrow-left-material, .jqx-success .jqx-icon-arrow-left-material, .jqx-info .jqx-icon-arrow-left-material {
1652 background-image: url('images/material-icon-left.png');
1653 }
1654
1655 .jqx-primary .jqx-icon-arrow-left-selected-material, .jqx-warning .jqx-icon-arrow-left-selected-material, .jqx-danger .jqx-icon-arrow-left-selected-material, .jqx-success .jqx-icon-arrow-left-selected-material, .jqx-info .jqx-icon-arrow-left-selected-material {
1656 background-image: url('images/material-icon-left.png');
1657 }
1658
1659 .jqx-primary .jqx-icon-arrow-left-hover-material, .jqx-warning .jqx-icon-arrow-left-hover-material, .jqx-danger .jqx-icon-arrow-left-hover-material, .jqx-success .jqx-icon-arrow-left-hover-material, .jqx-info .jqx-icon-arrow-left-hover-material {
1660 background-image: url('images/material-icon-left.png');
1661 }
1662
1663 .jqx-primary .jqx-icon-arrow-right-material, .jqx-warning .jqx-icon-arrow-right-material, .jqx-danger .jqx-icon-arrow-right-material, .jqx-success .jqx-icon-arrow-right-material, .jqx-info .jqx-icon-arrow-right-material {
1664 background-image: url('images/material-icon-right.png');
1665 }
1666
1667 .jqx-primary .jqx-icon-arrow-right-selected-material, .jqx-warning .jqx-icon-arrow-right-selected-material, .jqx-danger .jqx-icon-arrow-right-selected-material, .jqx-success .jqx-icon-arrow-right-selected-material, .jqx-info .jqx-icon-arrow-right-selected-material {
1668 background-image: url('images/material-icon-right.png');
1669 }
1670
1671 .jqx-primary .jqx-icon-arrow-right-hover-material, .jqx-warning .jqx-icon-arrow-right-hover-material, .jqx-danger .jqx-icon-arrow-right-hover-material, .jqx-success .jqx-icon-arrow-right-hover-material, .jqx-info .jqx-icon-arrow-right-hover-material {
1672 background-image: url('images/material-icon-right.png');
1673 }
1674
1675
1676 /* Ripple effect */
1677 .ripple {
1678 position: relative;
1679 transform: translate3d(0, 0, 0);
1680 overflow:hidden;
1681 }
1682
1683 .ink {
1684 display: block;
1685 position: absolute;
1686 pointer-events: none;
1687 border-radius: 0%;
1688 transform: scaleX(0);
1689 background: rgba(0,119,190,0.5);
1690 opacity: 0.25;
1691 }
1692
1693
1694 .outlined .ink, .flat .ink {
1695 background: rgba(0,119,190,0.5);
1696 overflow:hidden;
1697 }
1698
1699 .ink.animate {
1700 animation: ripple .7s ease;
1701 animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1702 }
1703 .jqx-checkbox-material .ripple,
1704 .jqx-radiobutton-material .ripple
1705 {
1706 overflow:visible;
1707 }
1708 .jqx-checkbox-material .ink,
1709 .jqx-radiobutton-material .ink
1710 {
1711 transform: scale(0);
1712 background: #0077BE;
1713 border-radius: 50%;
1714 }
1715 .jqx-checkbox-material .ink.animate,
1716 .jqx-radiobutton-material .ink.animate
1717 {
1718 animation: checkRipple 0.3s ease;
1719 animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1720 }
1721 .jqx-checkbox-material .ink.active,
1722 .jqx-radiobutton-material .ink.active
1723 {
1724 opacity: 0.2;
1725 transform: scale(2);
1726 }
1727 .jqx-checkbox-default-material.active .ink,
1728 .jqx-radiobutton-default-material.active .ink
1729 {
1730 opacity: 0.2;
1731 transform: scale(2);
1732 }
1733 /* Ripple effect */
1734 .buttonRipple {
1735 background-position: center;
1736 transition: background 0.8s;
1737 }
1738 .buttonRipple:hover {
1739 background: #0077BE radial-gradient(circle, transparent 1%, #0077BE 1%) center/15000%;
1740 }
1741 .buttonRipple:active {
1742 background-color: #B3E5FC;
1743 background-size: 100%;
1744 transition: background 0s;
1745 }
1746 .buttonRipple:active:not(:hover) {
1747 color: #0077BE;
1748 }
1749 @keyframes ripple {
1750 100% {
1751 opacity: 0;
1752 transform: scale(5);
1753 animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1754 }
1755 }
1756 @keyframes checkRipple {
1757 100% {
1758 opacity: 0.2;
1759 transform: scale(2);
1760 animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1761 }
1762 }
1763
1764
1765
1766
1767
1768
1769 .jqx-fill-state-pressed-material .jqx-icon-delete-material
1770 {
1771 background-image: url('images/icon-delete-white.png');
1772 }
1773 .jqx-fill-state-pressed-material .jqx-icon-edit-material
1774 {
1775 background-image: url('images/icon-edit-white.png');
1776 }
1777 .jqx-fill-state-pressed-material .jqx-icon-save-material
1778 {
1779 background-image: url('images/icon-save-white.png');
1780 }
1781 .jqx-fill-state-pressed-material .jqx-icon-cancel-material
1782 {
1783 background-image: url('images/icon-cancel-white.png');
1784 }
1785 .jqx-fill-state-pressed-material .jqx-icon-search-material
1786 {
1787 background-image: url(images/search_white.png);
1788 }
1789 .jqx-fill-state-pressed-material .jqx-icon-plus-material
1790 {
1791 background-image: url(images/plus_white.png);
1792 }
1793 .jqx-fill-state-pressed-material .jqx-menu-minimized-button-material {
1794 background-image: url('images/icon-menu-minimized-white.png');
1795 }
1796 .jqx-fill-state-hover-material .jqx-editor-toolbar-icon-material, .jqx-fill-state-pressed-material .jqx-editor-toolbar-icon-material {
1797 background: url('images/html_editor_white.png') no-repeat;
1798 }
1799 .jqx-editor-toolbar-button-material{
1800 border-color: #ddd;
1801 box-shadow: none !important;
1802 }

mercurial