jqx.material.css 56 KB

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