www-thermferm/jqwidgets/styles/jqx.material.css

changeset 709
5b6d7b640e52
parent 708
13555c27b592
child 710
abe60578d695
equal deleted inserted replaced
708:13555c27b592 709:5b6d7b640e52
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-tree-material .jqx-checkbox-material .jqx-checkbox-default-material,
761 .jqx-checkbox-material[checked] .jqx-checkbox-default-material,
762 .jqx-tree-grid-checkbox[checked].jqx-checkbox-default-material,
763 .jqx-radiobutton-material[checked] .jqx-radiobutton-default-material
764 {
765 background-color: #0077BE;
766 border-color: #0077BE;
767 }
768
769 .jqx-checkbox-check-checked-material {
770 background: transparent url(./images/material_check_white.png) center center no-repeat;
771 }
772 .jqx-checkbox-check-indeterminate-material {
773 width:14px !important;
774 height:14px !important;
775 position:relative;
776 top: 1px;
777 left: 1px;
778 background: white;
779 }
780 .jqx-tree-material .jqx-checkbox-check-indeterminate-material {
781 width:12px !important;
782 height:12px !important;
783 top: 2px;
784 left:2px;
785 }
786
787 .jqx-checkbox-hover-material,
788 .jqx-radiobutton-hover-material {
789 background-color: #0077BE;
790 border-color: #0077BE;
791 }
792
793
794 .jqx-slider-slider-material {
795 transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
796 }
797
798 .jqx-slider-slider-material:active {
799 transform: scale(1.2);
800 box-shadow: rgba(0,0,0,0.3) 0 0 10px;
801 }
802 .jqx-slider-material[discrete] .jqx-slider-slider-material:active
803 {
804 transform: scaleX(0);
805
806 }
807 .jqx-slider-slider-horizontal-material {
808 background: #0077BE;
809 }
810 .jqx-slider-slider-vertical-material {
811 background: #0077BE;
812 }
813 .jqx-slider-tooltip-material {
814 width: 25px;
815 height: 25px;
816 transform-origin: 50% 100%;
817 border-radius: 50%;
818 transform: scale(0) rotate(45deg);
819 padding:0px;
820 background: transparent !important;
821 }
822 .jqx-slider-tooltip-material.init {
823 transform: scale(1) rotate(45deg);
824 }
825 .jqx-slider-tooltip-material.hide {
826 transition: transform 0.2s ease;
827 transform-origin:50% 100%;
828 transform: scale(0) rotate(45deg);
829 }
830 .jqx-slider-tooltip-material.show {
831 transition: transform 0.2s ease;
832 transform: scale(1) rotate(45deg);
833 }
834
835
836 .jqx-slider-tooltip-material .jqx-tooltip-arrow-t-b,
837 .jqx-slider-tooltip-material .jqx-tooltip-arrow-l-r {
838 display:none;
839 visibility:hidden;
840 }
841
842 .jqx-slider-tooltip-material, .jqx-slider-tooltip-material .jqx-fill-state-normal-material {
843 border-radius: 15px 15px 0px;
844 display: flex;
845 align-items: center;
846 justify-content: center;
847 background: #0077BE;
848 color: #fff;
849 font-size:11px;
850 }
851 .jqx-slider-tooltip-material.far, .jqx-slider-tooltip-material.far .jqx-fill-state-normal-material {
852 border-radius: 0px 15px 15px 15px;
853 }
854 .jqx-slider-tooltip-material.vertical, .jqx-slider-tooltip-material.vertical .jqx-fill-state-normal-material {
855 border-radius: 15px 0px 15px 15px;
856 }
857 .jqx-slider-tooltip-material.vertical.far, .jqx-slider-tooltip-material.vertical.far .jqx-fill-state-normal-material {
858 border-radius: 15px 15px 15px 0px;
859 }
860 .jqx-slider-tooltip-material {
861 background:transparent;
862 border:none !important;
863 box-shadow:none;
864 }
865 .jqx-slider-tooltip-material .jqx-tooltip-main-material {
866 top: -7px;
867 right: 11px;
868 }
869 .jqx-slider-tooltip-material.far .jqx-tooltip-main-material {
870 top: 3px;
871 right: 4px;
872 }
873 .jqx-slider-tooltip-material.vertical .jqx-tooltip-main-material {
874 top: -3px;
875 right: 3px;
876 }
877 .jqx-slider-tooltip-material .jqx-tooltip-text {
878 background: transparent;
879 border:none;
880 padding: 0px;
881 overflow:visible;
882 }
883 .jqx-slider-tooltip-material .jqx-tooltip-text>span {
884 transform: rotate(-45deg);
885 }
886 .jqx-slider-tooltip-material.range {
887 width: 35px;
888 height:35px;
889 }
890
891 .jqx-slider-rangebar-material {
892 border-color: #0077BE;
893 background: #0077BE;
894 }
895
896 .jqx-slider-track-horizontal-material, .jqx-slider-track-vertical-material {
897 border-color: #E0E0E0;
898 background: #f0f0f0;
899 }
900
901 .jqx-slider-button-material {
902 -moz-border-radius: 100%;
903 -webkit-border-radius: 100%;
904 border-radius: 100%;
905 }
906 .jqx-slider-button-material.jqx-fill-state-normal-material,
907 .jqx-slider-button-material.jqx-fill-state-hover-material,
908 .jqx-slider-button-material.jqx-fill-state-pressed-material
909 {
910 background: transparent !important;
911 }
912
913 .jqx-listitem-state-hover-material,
914 .jqx-listitem-state-selected-material,
915 .jqx-listitem-state-normal-material {
916 padding: 5px;
917 margin:0px;
918 }
919
920 .jqx-scheduler-edit-dialog-label-material {
921 line-height: 35px;
922 padding-top: 6px;
923 padding-bottom: 6px;
924
925 }
926 .jqx-scheduler-edit-dialog-field-material {
927 line-height: 35px;
928 padding-top: 6px;
929 padding-bottom: 6px;
930 }
931 .jqx-scheduler-edit-dialog-label-rtl-material {
932 line-height: 35px;
933 padding-top: 6px;
934 padding-bottom: 6px;
935 }
936 .jqx-scheduler-edit-dialog-field-rtl-material {
937 line-height: 35px;
938 padding-top: 6px;
939 padding-bottom: 6px;
940 }
941
942 /*applied to a list item when the item is selected.*/
943 .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,
944 .jqx-menu-vertical-material .jqx-menu-item-top-hover-material, .jqx-input-popup-material .jqx-fill-state-hover-material,
945 .jqx-input-popup-material .jqx-fill-state-pressed-material {
946 color: #333 !important;
947 border-color: #F5F5F5;
948 text-decoration: none;
949 background-color: #F5F5F5;
950 background-repeat: repeat-x;
951 outline: 0;
952 background: #F5F5F5; /* Old browsers */
953 -webkit-box-shadow: none;
954 -moz-box-shadow: none;
955 box-shadow: none;
956 background-position: 0 0;
957 }
958
959 .jqx-scheduler-cell-hover-material {
960 border-color: #F5F5F5 !important;
961 background: #F5F5F5 !important;
962 }
963
964 .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,
965 .jqx-menu-vertical-material .jqx-menu-item-top-selected-material, .jqx-grid-selectionarea-material, .jqx-input-button-header-material, .jqx-input-button-innerHeader-material {
966 color: #0077BE !important;
967 border-color: #E1F5FE !important;
968 background: #E1F5FE; /* Old browsers */
969 box-shadow: none;
970 }
971
972
973 .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 {
974 -webkit-box-shadow: none;
975 -moz-box-shadow: none;
976 box-shadow: none;
977 -webkit-transition: none;
978 -moz-transition: none;
979 -o-transition: none;
980 transition: none;
981 }
982
983 .jqx-popup-material {
984 border: 1px solid #E0E0E0;
985 *border-right-width: 2px;
986 *border-bottom-width: 2px;
987 -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
988 -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
989 }
990
991 .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 {
992 background-image: url('images/material-icon-up.png');
993 background-repeat: no-repeat;
994 background-position: center;
995 }
996
997 .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 {
998 background-image: url('images/material-icon-down.png');
999 background-repeat: no-repeat;
1000 background-position: center;
1001 }
1002
1003 .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 {
1004 background-image: url('images/material-icon-left.png');
1005 background-repeat: no-repeat;
1006 background-position: center;
1007 }
1008
1009 .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 {
1010 background-image: url('images/material-icon-right.png');
1011 background-repeat: no-repeat;
1012 background-position: center;
1013 }
1014
1015 .jqx-tree-item-arrow-collapse-rtl-material, .jqx-tree-item-arrow-collapse-hover-rtl-material {
1016 background-image: url(./images/material-icon-left.png);
1017 }
1018
1019 .jqx-menu-item-arrow-left-selected-material {
1020 background-image: url('images/material-icon-left.png');
1021 background-repeat: no-repeat;
1022 background-position: center;
1023 }
1024
1025 .jqx-menu-item-arrow-right-selected-material {
1026 background-image: url('images/material-icon-right.png');
1027 background-repeat: no-repeat;
1028 background-position: center;
1029 }
1030
1031 .jqx-input-button-content-material {
1032 font-size: 10px;
1033 }
1034
1035 .jqx-widget .jqx-grid-column-header-cell-material {
1036 padding-top: 8px;
1037 padding-bottom: 8px;
1038 height:30px;
1039 }
1040
1041 .jqx-widget .jqx-grid-row-cell-material {
1042 padding-top: 8px;
1043 padding-bottom: 8px;
1044 height:30px;
1045 }
1046
1047 .jqx-widget .jqx-grid-cell, .jqx-widget .jqx-grid-column-header, .jqx-widget .jqx-grid-group-cell {
1048 border-color: #E0E0E0;
1049 }
1050
1051 .jqx-combobox-material .jqx-icon-close-material {
1052 background-image:url(./images/close_white.png)
1053 }
1054 .jqx-combobox-material, .jqx-input-material {
1055 border-color: #E0E0E0;
1056 color: #555555;
1057 background-color: #ffffff;
1058 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
1059 -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
1060 }
1061
1062 .jqx-combobox-content-material,
1063 .jqx-datetimeinput-content-material
1064 {
1065 border-color: transparent;
1066 }
1067 .jqx-combobox-arrow-normal-material {
1068 background: #fff;
1069 border-color: transparent;
1070 }
1071
1072 .jqx-combobox-content-focus-material,
1073 .jqx-combobox-state-focus-material,
1074 .jqx-numberinput-focus-material {
1075 outline: none;
1076 }
1077
1078 .jqx-input-group-material {
1079 position: relative;
1080 display: inline-block;
1081 overflow: visible;
1082 border: none;
1083 box-shadow: none;
1084 }
1085
1086 .jqx-input-group-material input {
1087 width: 100%;
1088 height: 100%;
1089 box-sizing: border-box;
1090 }
1091 .jqx-input-group-material textarea {
1092 width: 100%;
1093 height: 100%;
1094 outline: none;
1095 resize: none;
1096 border-left: none;
1097 border-right: none;
1098 border-top: none;
1099 border-bottom-color: #e0e0e0;
1100 }
1101 .jqx-numberinput-material,
1102 .jqx-maskedinput-material
1103 {
1104 position:relative;
1105 }
1106 .jqx-numberinput-material input {
1107 height:100% !important;
1108 }
1109
1110 .jqx-input-material.jqx-validator-error-element {
1111 border-color: transparent !important;
1112 border-bottom: 1px solid #df2227 !important;
1113 }
1114 .jqx-input-material input,
1115 .jqx-dropdownlist-state-normal-material,
1116 .jqx-combobox-state-normal-material,
1117 .jqx-datetimeinput-material,
1118 .jqx-numberinput-material,
1119 .jqx-maskedinput-material
1120 {
1121 background: #fff;
1122 border-color: #fff;
1123 border-radius: 0;
1124 box-shadow: none;
1125 border-bottom: 1px solid #E0E0E0;
1126 outline: none;
1127 }
1128 .jqx-datetimeinput-material .jqx-action-button-material,
1129 .jqx-datetimeinput-material .jqx-action-button-rtl-material
1130 {
1131 background-color: transparent;
1132 border-color: transparent;
1133 }
1134 .jqx-datetimeinput-material, .jqx-datetimeinput-material > div,
1135 .jqx-numberinput-material, .jqx-numberinput-material > div,
1136 .jqx-maskedinput-material, .jqx-maskedinput-material > div,
1137 .jqx-dropdownlist-state-normal-material, .jqx-dropdownlist-state-normal-material > div, .jqx-dropdownlist-state-normal-material > div > div,
1138 .jqx-combobox-state-normal-material, .jqx-combobox-state-normal-material > div, .jqx-combobox-state-normal-material > div > div {
1139 overflow: visible !important;
1140 }
1141
1142 .jqx-input-material input:focus {
1143 border-radius: 0;
1144 box-shadow: none;
1145 }
1146
1147 .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 {
1148 font-size: 14px;
1149 resize: none;
1150 background: #fff;
1151 border: none;
1152 border-radius: 0;
1153 box-sizing:border-box;
1154 box-shadow: none;
1155 border-bottom: 1px solid #E0E0E0;
1156 }
1157 .jqx-input-label {
1158 visibility:inherit;
1159 }
1160 .jqx-input-bar{
1161 visibility:inherit;
1162 }
1163 input:focus ~ .jqx-input-label-material,
1164 textarea:focus ~ .jqx-input-label-material,
1165 .jqx-input-widget-material[hint=true] .jqx-input-label,
1166 .jqx-text-area-material[hint=true] .jqx-input-label,
1167 .jqx-dropdownlist-state-selected-material .jqx-input-label,
1168 .jqx-dropdownlist-state-normal-material[hint=true] .jqx-input-label,
1169 .jqx-combobox-state-normal-material[hint=true] .jqx-input-label,
1170 .jqx-combobox-material .jqx-input-label.focused,
1171 .jqx-dropdownlist-material .jqx-input-label.focused,
1172 .jqx-datetimeinput-material[hint=true] .jqx-input-label,
1173 .jqx-maskedinput-material[hint=true] .jqx-input-label,
1174 .jqx-numberinput-material[hint=true] .jqx-input-label,
1175 .jqx-formattedinput-material[hint=true] .jqx-input-label
1176 {
1177 top: -15px;
1178 font-size: 12px;
1179 color: #0077BE;
1180 }
1181 .jqx-dropdownlist-material[default-placeholder="true"] .jqx-input-label {
1182 visibility: hidden;
1183 }
1184
1185
1186 input:focus ~ .jqx-input-bar:before,
1187 textarea:focus ~ .jqx-input-bar:before,
1188 .jqx-dropdownlist-state-selected-material .jqx-input-bar:before,
1189 .jqx-dropdownlist-material .jqx-input-bar.focused:before,
1190 .jqx-combobox-material .jqx-input-bar.focused:before,
1191 .jqx-complex-input-group-material .jqx-input-bar.focused::before,
1192 .jqx-combobox-state-selected-material .jqx-input-bar:before {
1193 width: 100%;
1194 }
1195 .jqx-complex-input-group-material .jqx-fill-state-normal-material {
1196 border-color: #fafafa;
1197 }
1198
1199
1200 .jqx-input-widget-material.jqx-rtl > input {
1201 direction: rtl
1202 }
1203
1204 .jqx-input-label-material {
1205 color: #E0E0E0;
1206 font-size: 14px;
1207 font-weight: normal;
1208 position: absolute;
1209 pointer-events: none;
1210 left: 2px;
1211 top:10px;
1212 top: calc(50% - 7px);
1213 transition: 300ms ease all;
1214 }
1215 .jqx-input-label.initial {
1216 transition: none;
1217 }
1218 .jqx-input-bar-material {
1219 position: relative;
1220 display: block;
1221 z-index:1;
1222 }
1223
1224 .jqx-input-bar-material:before {
1225 content: '';
1226 height: 2px;
1227 width: 0;
1228 bottom: 0px;
1229 position: absolute;
1230 background: #0077BE;
1231 transition: 300ms ease all;
1232 left: 0%;
1233 }
1234 .jqx-formatted-input-spin-button-material, .jqx-input-group-addon-material {
1235 border-color: #fff;
1236 background: #fff;
1237 }
1238 .jqx-dropdownlist-state-selected-material,
1239 .jqx-combobox-state-selected-material {
1240 color: #0077BE;
1241 }
1242
1243
1244 .jqx-dropdownlist-state-normal-material .jqx-icon-arrow-down-material,
1245 .jqx-combobox-state-normal-material .jqx-icon-arrow-down-material,
1246 .sorticon.descending .jqx-grid-column-sorticon-material,
1247 .jqx-tree-item-arrow-expand-material,
1248 .jqx-expander-header-material .jqx-icon-arrow-down
1249 {
1250 transform: rotate(0deg);
1251 transition: transform 0.2s ease-out;
1252 }
1253 .jqx-expander-header-material .jqx-icon-arrow-up {
1254 transform: rotate(180deg);
1255 transition: transform 0.2s ease-out;
1256 background-image: url('images/material-icon-down.png');
1257 }
1258
1259 .jqx-tree-item-arrow-collapse-material
1260 {
1261 transform: rotate(-90deg);
1262 background-image: url('images/material-icon-down.png');
1263 background-repeat: no-repeat;
1264 background-position: center;
1265 transition: transform 0.2s ease-out;
1266 }
1267 .jqx-dropdownlist-state-selected-material .jqx-icon-arrow-down-material,
1268 .jqx-combobox-state-selected-material .jqx-icon-arrow-down-material,
1269 .sorticon.ascending .jqx-grid-column-sorticon-material
1270 {
1271 transform: rotate(180deg);
1272 transition: transform 0.2s ease-out;
1273 left: -1px;
1274 }
1275 .jqx-combobox-state-selected-material .jqx-icon-arrow-down-material{
1276 left:-1px;
1277 }
1278 .jqx-listbox-container {
1279 margin-top: 1px;
1280 }
1281
1282 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 {
1283 color: #999999;
1284 }
1285
1286 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 {
1287 color: #999999;
1288 }
1289
1290 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 {
1291 color: #999999;
1292 }
1293
1294 .jqx-combobox-content-focus-material, .jqx-combobox-state-focus-material, .jqx-fill-state-focus-material,
1295 .jqx-numberinput-focus-material {
1296 outline: none;
1297 }
1298
1299 .jqx-popup-material.jqx-fill-state-focus-material {
1300 outline: none;
1301 border-color: #E0E0E0 !important;
1302 }
1303
1304 .jqx-datetimeinput-content, .jqx-datetimeinput-container {
1305 overflow: visible !important;
1306 }
1307 .jqx-text-area-material, .jqx-text-area-material > div {
1308 overflow:visible !important;
1309 }
1310 .jqx-text-area-element-material {
1311 box-sizing: border-box;
1312 }
1313 .jqx-pivotgrid-content-wrapper.jqx-fill-state-normal-material {
1314 border-color: #E0E0E0;
1315 }
1316
1317 .jqx-grid-cell-material.jqx-grid-cell-selected-material > .jqx-grid-group-expand-material {
1318 background-image: url('images/material-icon-down.png');
1319 background-repeat: no-repeat;
1320 background-position: center;
1321 }
1322
1323 .jqx-grid-cell-material.jqx-grid-cell-selected-material > .jqx-grid-group-collapse-material {
1324 background-image: url('images/material-icon-right.png');
1325 background-repeat: no-repeat;
1326 background-position: center;
1327 }
1328
1329 .jqx-grid-cell-material.jqx-grid-cell-selected-material > .jqx-grid-group-collapse-rtl-material {
1330 background-image: url('images/material-icon-left.png');
1331 background-repeat: no-repeat;
1332 background-position: center;
1333 }
1334
1335 .jqx-grid-cell-material.jqx-grid-cell-selected-material > .jqx-grid-group-expand-rtl-material {
1336 background-image: url('images/material-icon-down.png');
1337 background-repeat: no-repeat;
1338 background-position: center;
1339 }
1340 .jqx-tabs-title-selected-top-material, .jqx-tabs-selection-tracker-top-material {
1341 border-color: transparent;
1342 filter: none;
1343 background: #fff;
1344 color: #333;
1345 -webkit-box-shadow: none;
1346 -moz-box-shadow: none;
1347 box-shadow: none;
1348 }
1349 .jqx-grid-cell-filter-row-material {
1350 background-color: #fafafa;
1351 }
1352
1353 .jqx-tabs-title-material, .jqx-ribbon-item-material {
1354 color: #333;
1355 }
1356 .jqx-tabs-title-selected-bottom-material,
1357 .jqx-tabs-title-selected-top-material
1358 {
1359 color: #0077BE;
1360 font-weight:500;
1361 padding-top:5px;
1362 padding-bottom:5px;
1363 }
1364 .jqx-tabs-title.jqx-fill-state-hover-material {
1365 border-color: transparent;
1366 }
1367 .jqx-ribbon-item-material {
1368 cursor: pointer;
1369 }
1370 .jqx-ribbon-item-selected-material {
1371 color: #0077BE;
1372 font-weight:500;
1373 border-color: transparent;
1374 }
1375
1376 .jqx-ribbon-item-hover-material {
1377 background: transparent;
1378 }
1379
1380 .jqx-ribbon-header-top-material {
1381 border-color: transparent;
1382 border-bottom-color: #E0E0E0;
1383 }
1384
1385 .jqx-ribbon-header-bottom-material {
1386 border-color: transparent;
1387 border-top-color: #E0E0E0;
1388 }
1389
1390 .jqx-ribbon-header-right-material {
1391 border-color: transparent;
1392 border-left-color:#E0E0E0;
1393 }
1394
1395 .jqx-ribbon-header-left-material {
1396 border-color: transparent;
1397 border-right-color:#E0E0E0;
1398 }
1399
1400 .jqx-tabs-title-selected-bottom-material, .jqx-tabs-selection-tracker-bottom-material {
1401 border-color: transparent;
1402 border-top: 1px solid #fff;
1403 filter: none;
1404 background: #fff;
1405 -webkit-box-shadow: none;
1406 -moz-box-shadow: none;
1407 box-shadow: none;
1408 }
1409
1410 .jqx-tabs-material, .jqx-ribbon-material {
1411 border-color: transparent;
1412 }
1413
1414 .jqx-tabs-header-material, .jqx-ribbon-header-material {
1415 background: transparent;
1416 }
1417 .jqx-tabs-position-bottom .jqx-tabs-header-material {
1418 border-color: transparent;
1419 }
1420 .jqx-layout-material .jqx-tabs-header-material, .jqx-layout-material .jqx-ribbon-header-material {
1421 background: #fff;
1422 border-color: #E0E0E0;
1423 }
1424 .jqx-tabs-title-bottom {
1425 border-color: transparent;
1426 }
1427 .jqx-tabs-title-hover-top-material, .jqx-tabs-title-hover-bottom-material, .jqx-tabs-header-material {
1428 -webkit-box-shadow: none !important;
1429 -moz-box-shadow: none !important;
1430 box-shadow: none !important;
1431 background: transparent;
1432 }
1433
1434 .jqx-tabs-content-material {
1435 box-sizing: border-box;
1436 border: 1px solid #E0E0E0;
1437 border-top-color: transparent;
1438 padding:5px;
1439 }
1440 .jqx-tabs-bar-material {
1441 position: absolute;
1442 bottom: 0;
1443 background: #0077BE;
1444 height: 2px;
1445 z-index:10;
1446 transition: .5s cubic-bezier(.35,0,.25,1);
1447 }
1448 .jqx-tabs-bar-material.vertical {
1449 width: 2px;
1450 }
1451 .jqx-tabs-position-bottom .jqx-tabs-bar-material {
1452 top: 0;
1453 }
1454
1455
1456 .jqx-layout-material {
1457 background-color: #cccccc;
1458 }
1459
1460 .jqx-kanban-column-header-collapsed-material {
1461 background: -moz-linear-gradient(0deg, rgba(248,248,248,1) 0%, rgba(234,234,234,1) 100%); /* ff3.6+ */
1462 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 */
1463 background: -webkit-linear-gradient(0deg, rgba(248,248,248,1) 0%, rgba(234,234,234,1) 100%); /* safari5.1+,chrome10+ */
1464 background: -o-linear-gradient(0deg, rgba(248,248,248,1) 0%, rgba(234,234,234,1) 100%); /* opera 11.10+ */
1465 background: -ms-linear-gradient(0deg, rgba(248,248,248,1) 0%, rgba(234,234,234,1) 100%); /* ie10+ */
1466 background: linear-gradient(90deg, rgba(248,248,248,1) 0%, rgba(234,234,234,1) 100%); /* w3c */
1467 }
1468
1469
1470 .jqx-calendar-cell-material {
1471 border-radius: 50%;
1472 font-size:12px;
1473 }
1474 .jqx-calendar-cell-year-material,
1475 .jqx-calendar-cell-decade-material {
1476 border-radius: 25%;
1477 }
1478
1479 .jqx-calendar-title-content-material {
1480 font-weight:bold;
1481 }
1482 .jqx-calendar-column-cell-material {
1483 color: rgba(0,0,0,.38);
1484 font-size:12px;
1485 }
1486 .jqx-grid-column-menubutton-material {
1487 background-image: url('images/material-icon-down.png');
1488 }
1489
1490 .jqx-tabs-close-button-material {
1491 background-image: url(./images/close.png);
1492 background-repeat: no-repeat;
1493 background-position: center;
1494 }
1495
1496 .jqx-tabs-close-button-selected-material {
1497 background-image: url(./images/close.png);
1498 background-repeat: no-repeat;
1499 background-position: center;
1500 }
1501
1502 .jqx-tabs-close-button-hover-material {
1503 background-image: url(./images/close.png);
1504 background-repeat: no-repeat;
1505 background-position: center;
1506 }
1507
1508 .jqx-scrollbar-button-state-pressed-material .jqx-icon-arrow-up-selected-material {
1509 background-image: url('images/material-icon-up.png');
1510 background-repeat: no-repeat;
1511 background-position: center;
1512 }
1513
1514 .jqx-scrollbar-button-state-pressed-material .jqx-icon-arrow-down-selected-material {
1515 background-image: url('images/material-icon-down.png');
1516 background-repeat: no-repeat;
1517 background-position: center;
1518 }
1519
1520 .jqx-scrollbar-button-state-pressed-material .jqx-icon-arrow-left-selected-material {
1521 background-image: url('images/material-icon-left.png');
1522 background-repeat: no-repeat;
1523 background-position: center;
1524 }
1525
1526 .jqx-scrollbar-button-state-pressed-material .jqx-icon-arrow-right-selected-material {
1527 background-image: url('images/material-icon-right.png');
1528 background-repeat: no-repeat;
1529 background-position: center;
1530 }
1531
1532 .jqx-grid-cell-material.jqx-grid-cell-selected-material > .jqx-grid-group-expand-material {
1533 background-image: url('images/material-icon-down.png');
1534 background-repeat: no-repeat;
1535 background-position: center;
1536 }
1537
1538 .jqx-grid-cell-material.jqx-grid-cell-selected-material > .jqx-grid-group-collapse-material {
1539 background-image: url('images/material-icon-right.png');
1540 background-repeat: no-repeat;
1541 background-position: center;
1542 }
1543
1544 .jqx-grid-cell-material.jqx-grid-cell-selected-material > .jqx-grid-group-collapse-rtl-material {
1545 background-image: url('images/material-icon-left.png');
1546 background-repeat: no-repeat;
1547 background-position: center;
1548 }
1549
1550 .jqx-grid-cell-material.jqx-grid-cell-selected-material > .jqx-grid-group-expand-rtl-material {
1551 background-image: url('images/material-icon-down.png');
1552 background-repeat: no-repeat;
1553 background-position: center;
1554 }
1555
1556 .jqx-grid-group-collapse-material {
1557 background-image: url(./images/material-icon-right.png);
1558 background-position: 50% 50%;
1559 background-repeat: no-repeat;
1560 }
1561
1562 .jqx-grid-group-collapse-rtl-material {
1563 padding-right: 0px;
1564 background-image: url(./images/material-icon-left.png);
1565 background-position: 50% 50%;
1566 background-repeat: no-repeat;
1567 }
1568
1569 .jqx-grid-group-expand-material, .jqx-grid-group-expand-rtl-material {
1570 padding-right: 0px;
1571 background-image: url(./images/material-icon-down.png);
1572 background-position: 50% 50%;
1573 background-repeat: no-repeat;
1574 }
1575
1576 .jqx-icon-arrow-first-material {
1577 background-image: url('images/material-icon-first.png');
1578 background-repeat: no-repeat;
1579 background-position: center;
1580 }
1581
1582 .jqx-icon-arrow-last-material {
1583 background-image: url('images/material-icon-last.png');
1584 background-repeat: no-repeat;
1585 background-position: center;
1586 }
1587
1588 .jqx-icon-arrow-first-hover-material {
1589 background-image: url('images/material-icon-first.png');
1590 background-repeat: no-repeat;
1591 background-position: center;
1592 }
1593
1594 .jqx-icon-arrow-last-hover-material {
1595 background-image: url('images/material-icon-last.png');
1596 background-repeat: no-repeat;
1597 background-position: center;
1598 }
1599
1600 .jqx-icon-arrow-first-selected-material {
1601 background-image: url('images/material-icon-first.png');
1602 background-repeat: no-repeat;
1603 background-position: center;
1604 }
1605
1606 .jqx-icon-arrow-last-selected-material {
1607 background-image: url('images/material-icon-last.png');
1608 background-repeat: no-repeat;
1609 background-position: center;
1610 }
1611
1612 .jqx-fill-state-pressed-material .jqx-icon-arrow-first-selected-material {
1613 background-image: url('images/material-icon-first-white.png');
1614 background-repeat: no-repeat;
1615 background-position: center;
1616 }
1617
1618 .jqx-fill-state-pressed-material .jqx-icon-arrow-last-selected-material {
1619 background-image: url('images/material-icon-last-white.png');
1620 background-repeat: no-repeat;
1621 background-position: center;
1622 }
1623 .jqx-fill-state-pressed-material .jqx-icon-arrow-left-selected-material {
1624 background-image: url('images/material-icon-left-white.png');
1625 background-repeat: no-repeat;
1626 background-position: center;
1627 }
1628
1629 .jqx-fill-state-pressed-material .jqx-icon-arrow-right-selected-material {
1630 background-image: url('images/material-icon-right-white.png');
1631 background-repeat: no-repeat;
1632 background-position: center;
1633 }
1634
1635 .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 {
1636 background-image: url('images/material-icon-down.png');
1637 }
1638
1639 .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 {
1640 background-image: url('images/material-icon-down.png');
1641 }
1642
1643 .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 {
1644 background-image: url('images/material-icon-down.png');
1645 }
1646
1647 .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 {
1648 background-image: url('images/material-icon-up.png');
1649 }
1650
1651 .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 {
1652 background-image: url('images/material-icon-up.png');
1653 }
1654
1655 .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 {
1656 background-image: url('images/material-icon-up.png');
1657 }
1658
1659
1660 .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 {
1661 background-image: url('images/material-icon-left.png');
1662 }
1663
1664 .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 {
1665 background-image: url('images/material-icon-left.png');
1666 }
1667
1668 .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 {
1669 background-image: url('images/material-icon-left.png');
1670 }
1671
1672 .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 {
1673 background-image: url('images/material-icon-right.png');
1674 }
1675
1676 .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 {
1677 background-image: url('images/material-icon-right.png');
1678 }
1679
1680 .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 {
1681 background-image: url('images/material-icon-right.png');
1682 }
1683
1684
1685 /* Ripple effect */
1686 .ripple {
1687 position: relative;
1688 transform: translate3d(0, 0, 0);
1689 overflow:hidden;
1690 }
1691
1692 .ink {
1693 display: block;
1694 position: absolute;
1695 pointer-events: none;
1696 border-radius: 0%;
1697 transform: scaleX(0);
1698 background: rgba(0,119,190,0.5);
1699 opacity: 0.25;
1700 }
1701
1702
1703 .outlined .ink, .flat .ink {
1704 background: rgba(0,119,190,0.5);
1705 overflow:hidden;
1706 }
1707
1708 .ink.animate {
1709 animation: ripple .7s ease;
1710 animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1711 }
1712 .jqx-checkbox-material .ripple,
1713 .jqx-radiobutton-material .ripple
1714 {
1715 overflow:visible;
1716 }
1717 .jqx-checkbox-material .ink,
1718 .jqx-radiobutton-material .ink
1719 {
1720 transform: scale(0);
1721 background: #0077BE;
1722 border-radius: 50%;
1723 }
1724 .jqx-checkbox-material .ink.animate,
1725 .jqx-radiobutton-material .ink.animate
1726 {
1727 animation: checkRipple 0.3s ease;
1728 animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1729 }
1730 .jqx-checkbox-material .ink.active,
1731 .jqx-radiobutton-material .ink.active
1732 {
1733 opacity: 0.2;
1734 transform: scale(2);
1735 }
1736 .jqx-checkbox-default-material.active .ink,
1737 .jqx-radiobutton-default-material.active .ink
1738 {
1739 opacity: 0.2;
1740 transform: scale(2);
1741 }
1742 /* Ripple effect */
1743 .buttonRipple {
1744 background-position: center;
1745 transition: background 0.8s;
1746 }
1747 .buttonRipple:hover {
1748 background: #0077BE radial-gradient(circle, transparent 1%, #0077BE 1%) center/15000%;
1749 }
1750 .buttonRipple:active {
1751 background-color: #B3E5FC;
1752 background-size: 100%;
1753 transition: background 0s;
1754 }
1755 .buttonRipple:active:not(:hover) {
1756 color: #0077BE;
1757 }
1758 @keyframes ripple {
1759 100% {
1760 opacity: 0;
1761 transform: scale(5);
1762 animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1763 }
1764 }
1765 @keyframes checkRipple {
1766 100% {
1767 opacity: 0.2;
1768 transform: scale(2);
1769 animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1770 }
1771 }
1772
1773
1774
1775
1776
1777
1778 .jqx-fill-state-pressed-material .jqx-icon-delete-material
1779 {
1780 background-image: url('images/icon-delete-white.png');
1781 }
1782 .jqx-fill-state-pressed-material .jqx-icon-edit-material
1783 {
1784 background-image: url('images/icon-edit-white.png');
1785 }
1786 .jqx-fill-state-pressed-material .jqx-icon-save-material
1787 {
1788 background-image: url('images/icon-save-white.png');
1789 }
1790 .jqx-fill-state-pressed-material .jqx-icon-cancel-material
1791 {
1792 background-image: url('images/icon-cancel-white.png');
1793 }
1794 .jqx-fill-state-pressed-material .jqx-icon-search-material
1795 {
1796 background-image: url(./images/search_white.png);
1797 }
1798 .jqx-fill-state-pressed-material .jqx-icon-plus-material
1799 {
1800 background-image: url(./images/plus_white.png);
1801 }
1802 .jqx-fill-state-pressed-material .jqx-menu-minimized-button-material {
1803 background-image: url('images/icon-menu-minimized-white.png');
1804 }
1805 .jqx-fill-state-hover-material .jqx-editor-toolbar-icon-material,
1806 .jqx-fill-state-pressed-material .jqx-editor-toolbar-icon-material {
1807 background: url('images/html_editor_white.png') no-repeat;
1808 }
1809
1810 .jqx-fill-state-hover-material .jqx-editor-toolbar-icon-fontsize-material,
1811 .jqx-fill-state-pressed-material .jqx-editor-toolbar-icon-fontsize-material,
1812 .jqx-fill-state-hover-material .jqx-editor-toolbar-icon-forecolor-material,
1813 .jqx-fill-state-pressed-material .jqx-editor-toolbar-icon-forecolor-material
1814 {
1815 background: url('images/html_editor.png') no-repeat;
1816 }
1817
1818 .jqx-editor-toolbar-button-material{
1819 border-color: #ddd;
1820 box-shadow: none !important;
1821 color: #333;
1822 }
1823
1824 jqx-editor-toolbar-icon-fontsize-material,
1825 jqx-editor-toolbar-icon-fontcolor-material {
1826
1827 }
1828
1829 /*applied to the timepicker*/
1830 .jqx-needle-central-circle-material {
1831 fill: rgb(0, 119, 190);
1832 }
1833 .jqx-needle-material {
1834 fill: rgb(0, 119, 190);
1835 }
1836 .jqx-time-picker .jqx-header .jqx-selected-material:focus {
1837 outline: 2px solid rgba(0, 119, 190, 0.5);
1838 box-shadow: 0px 0px 4px 2px rgba(0, 119, 190, 0.125);
1839 }
1840 .jqx-svg-picker-material:focus {
1841 border: 1px solid rgb(0, 119, 190) !important;
1842 }

mercurial