/public/css/bootstrap-material-design.css

https://gitlab.com/adamm0/swedish · CSS · 1389 lines · 1349 code · 0 blank · 40 comment · 0 complexity · c0398c63e847e6a55452247e761a7852 MD5 · raw file

  1. /*
  2. To get this list of colors inject jQuery at http://www.google.com/design/spec/style/color.html#color-color-palette
  3. Then, run this script to get the list.
  4. (function() {
  5. var colors = {}, main = {};
  6. $(".color-group").each(function() {
  7. var color = $(this).find(".name").text().trim().toLowerCase().replace(" ", "-");
  8. colors[color] = {};
  9. $(this).find(".color").not(".main-color").each(function() {
  10. var shade = $(this).find(".shade").text().trim(),
  11. hex = $(this).find(".hex").text().trim();
  12. colors[color][shade] = hex;
  13. });
  14. main[color] = color + "-" + $(this).find(".main-color .shade").text().trim();
  15. });
  16. var LESS = "";
  17. $.each(colors, function(name, shades) {
  18. LESS += "\n\n";
  19. $.each(shades, function(shade, hex) {
  20. LESS += "@" + name + "-" + shade + ": " + hex + ";\n";
  21. });
  22. if (main[name]) {
  23. LESS += "@" + name + ": " + main[name] + ";\n";
  24. }
  25. });
  26. console.log(LESS);
  27. })();
  28. */
  29. /* ANIMATION */
  30. /* SHADOWS */
  31. /* Shadows (from mdl http://www.getmdl.io/) */
  32. body {
  33. background-color: #EEEEEE;
  34. }
  35. body.inverse {
  36. background: #333333;
  37. }
  38. body.inverse,
  39. body.inverse .form-control {
  40. color: rgba(255,255,255, 0.84);
  41. }
  42. body.inverse .modal,
  43. body.inverse .panel-default,
  44. body.inverse .card,
  45. body.inverse .modal .form-control,
  46. body.inverse .panel-default .form-control,
  47. body.inverse .card .form-control {
  48. background-color: initial;
  49. color: initial;
  50. }
  51. body,
  52. h1,
  53. h2,
  54. h3,
  55. h4,
  56. h5,
  57. h6,
  58. .h1,
  59. .h2,
  60. .h3,
  61. .h4 {
  62. font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  63. font-weight: 300;
  64. }
  65. h5,
  66. h6 {
  67. font-weight: 400;
  68. }
  69. a,
  70. a:hover,
  71. a:focus {
  72. color: #009688;
  73. }
  74. a .material-icons,
  75. a:hover .material-icons,
  76. a:focus .material-icons {
  77. vertical-align: middle;
  78. }
  79. .form-horizontal .radio,
  80. .form-horizontal .checkbox,
  81. .form-horizontal .radio-inline,
  82. .form-horizontal .checkbox-inline {
  83. padding-top: 0;
  84. }
  85. .form-horizontal .radio {
  86. margin-bottom: 10px;
  87. }
  88. .form-horizontal label {
  89. text-align: right;
  90. }
  91. .form-horizontal label.control-label {
  92. margin: 0;
  93. }
  94. body .container .well.well-sm,
  95. body .container-fluid .well.well-sm {
  96. padding: 10px;
  97. }
  98. body .container .well.well-lg,
  99. body .container-fluid .well.well-lg {
  100. padding: 26px;
  101. }
  102. body .container .well,
  103. body .container-fluid .well,
  104. body .container .jumbotron,
  105. body .container-fluid .jumbotron {
  106. background-color: #fff;
  107. padding: 19px;
  108. margin-bottom: 20px;
  109. -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  110. box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  111. border-radius: 2px;
  112. border: 0;
  113. }
  114. body .container .well p,
  115. body .container-fluid .well p,
  116. body .container .jumbotron p,
  117. body .container-fluid .jumbotron p {
  118. font-weight: 300;
  119. }
  120. body .container .well,
  121. body .container-fluid .well,
  122. body .container .jumbotron,
  123. body .container-fluid .jumbotron,
  124. body .container .well-default,
  125. body .container-fluid .well-default,
  126. body .container .jumbotron-default,
  127. body .container-fluid .jumbotron-default {
  128. background-color: #ffffff;
  129. }
  130. body .container .well-inverse,
  131. body .container-fluid .well-inverse,
  132. body .container .jumbotron-inverse,
  133. body .container-fluid .jumbotron-inverse {
  134. background-color: #3f51b5;
  135. }
  136. body .container .well-primary,
  137. body .container-fluid .well-primary,
  138. body .container .jumbotron-primary,
  139. body .container-fluid .jumbotron-primary {
  140. background-color: #009688;
  141. }
  142. body .container .well-success,
  143. body .container-fluid .well-success,
  144. body .container .jumbotron-success,
  145. body .container-fluid .jumbotron-success {
  146. background-color: #4caf50;
  147. }
  148. body .container .well-info,
  149. body .container-fluid .well-info,
  150. body .container .jumbotron-info,
  151. body .container-fluid .jumbotron-info {
  152. background-color: #03a9f4;
  153. }
  154. body .container .well-warning,
  155. body .container-fluid .well-warning,
  156. body .container .jumbotron-warning,
  157. body .container-fluid .jumbotron-warning {
  158. background-color: #ff5722;
  159. }
  160. body .container .well-danger,
  161. body .container-fluid .well-danger,
  162. body .container .jumbotron-danger,
  163. body .container-fluid .jumbotron-danger {
  164. background-color: #f44336;
  165. }
  166. .btn,
  167. .input-group-btn .btn {
  168. border: none;
  169. border-radius: 2px;
  170. position: relative;
  171. padding: 8px 30px;
  172. margin: 10px 1px;
  173. font-size: 14px;
  174. font-weight: 500;
  175. text-transform: uppercase;
  176. letter-spacing: 0;
  177. will-change: box-shadow, transform;
  178. -webkit-transition: -webkit-box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  179. -o-transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  180. transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  181. outline: 0;
  182. cursor: pointer;
  183. text-decoration: none;
  184. background: transparent;
  185. }
  186. .btn::-moz-focus-inner,
  187. .input-group-btn .btn::-moz-focus-inner {
  188. border: 0;
  189. }
  190. .btn:not(.btn-raised),
  191. .input-group-btn .btn:not(.btn-raised) {
  192. -webkit-box-shadow: none;
  193. box-shadow: none;
  194. }
  195. .btn:not(.btn-raised),
  196. .input-group-btn .btn:not(.btn-raised),
  197. .btn:not(.btn-raised).btn-default,
  198. .input-group-btn .btn:not(.btn-raised).btn-default {
  199. color: rgba(0,0,0, 0.87);
  200. }
  201. .btn:not(.btn-raised).btn-inverse,
  202. .input-group-btn .btn:not(.btn-raised).btn-inverse {
  203. color: #3f51b5;
  204. }
  205. .btn:not(.btn-raised).btn-primary,
  206. .input-group-btn .btn:not(.btn-raised).btn-primary {
  207. color: #009688;
  208. }
  209. .btn:not(.btn-raised).btn-success,
  210. .input-group-btn .btn:not(.btn-raised).btn-success {
  211. color: #4caf50;
  212. }
  213. .btn:not(.btn-raised).btn-info,
  214. .input-group-btn .btn:not(.btn-raised).btn-info {
  215. color: #03a9f4;
  216. }
  217. .btn:not(.btn-raised).btn-warning,
  218. .input-group-btn .btn:not(.btn-raised).btn-warning {
  219. color: #ff5722;
  220. }
  221. .btn:not(.btn-raised).btn-danger,
  222. .input-group-btn .btn:not(.btn-raised).btn-danger {
  223. color: #f44336;
  224. }
  225. .btn:not(.btn-raised):not(.btn-link):hover,
  226. .input-group-btn .btn:not(.btn-raised):not(.btn-link):hover,
  227. .btn:not(.btn-raised):not(.btn-link):focus,
  228. .input-group-btn .btn:not(.btn-raised):not(.btn-link):focus {
  229. background-color: rgba(153, 153, 153, 0.2);
  230. }
  231. .theme-dark .btn:not(.btn-raised):not(.btn-link):hover,
  232. .theme-dark .input-group-btn .btn:not(.btn-raised):not(.btn-link):hover,
  233. .theme-dark .btn:not(.btn-raised):not(.btn-link):focus,
  234. .theme-dark .input-group-btn .btn:not(.btn-raised):not(.btn-link):focus {
  235. background-color: rgba(204, 204, 204, 0.15);
  236. }
  237. .btn.btn-raised,
  238. .input-group-btn .btn.btn-raised,
  239. .btn.btn-fab,
  240. .input-group-btn .btn.btn-fab,
  241. .btn-group-raised .btn,
  242. .btn-group-raised .input-group-btn .btn,
  243. .btn.btn-raised.btn-default,
  244. .input-group-btn .btn.btn-raised.btn-default,
  245. .btn.btn-fab.btn-default,
  246. .input-group-btn .btn.btn-fab.btn-default,
  247. .btn-group-raised .btn.btn-default,
  248. .btn-group-raised .input-group-btn .btn.btn-default {
  249. background-color: #EEEEEE;
  250. color: rgba(0,0,0, 0.87);
  251. }
  252. .btn.btn-raised.btn-inverse,
  253. .input-group-btn .btn.btn-raised.btn-inverse,
  254. .btn.btn-fab.btn-inverse,
  255. .input-group-btn .btn.btn-fab.btn-inverse,
  256. .btn-group-raised .btn.btn-inverse,
  257. .btn-group-raised .input-group-btn .btn.btn-inverse {
  258. background-color: #3f51b5;
  259. color: #ffffff;
  260. }
  261. .btn.btn-raised.btn-primary,
  262. .input-group-btn .btn.btn-raised.btn-primary,
  263. .btn.btn-fab.btn-primary,
  264. .input-group-btn .btn.btn-fab.btn-primary,
  265. .btn-group-raised .btn.btn-primary,
  266. .btn-group-raised .input-group-btn .btn.btn-primary {
  267. background-color: #009688;
  268. color: rgba(255,255,255, 0.84);
  269. }
  270. .btn.btn-raised.btn-success,
  271. .input-group-btn .btn.btn-raised.btn-success,
  272. .btn.btn-fab.btn-success,
  273. .input-group-btn .btn.btn-fab.btn-success,
  274. .btn-group-raised .btn.btn-success,
  275. .btn-group-raised .input-group-btn .btn.btn-success {
  276. background-color: #4caf50;
  277. color: rgba(255,255,255, 0.84);
  278. }
  279. .btn.btn-raised.btn-info,
  280. .input-group-btn .btn.btn-raised.btn-info,
  281. .btn.btn-fab.btn-info,
  282. .input-group-btn .btn.btn-fab.btn-info,
  283. .btn-group-raised .btn.btn-info,
  284. .btn-group-raised .input-group-btn .btn.btn-info {
  285. background-color: #03a9f4;
  286. color: rgba(255,255,255, 0.84);
  287. }
  288. .btn.btn-raised.btn-warning,
  289. .input-group-btn .btn.btn-raised.btn-warning,
  290. .btn.btn-fab.btn-warning,
  291. .input-group-btn .btn.btn-fab.btn-warning,
  292. .btn-group-raised .btn.btn-warning,
  293. .btn-group-raised .input-group-btn .btn.btn-warning {
  294. background-color: #ff5722;
  295. color: rgba(255,255,255, 0.84);
  296. }
  297. .btn.btn-raised.btn-danger,
  298. .input-group-btn .btn.btn-raised.btn-danger,
  299. .btn.btn-fab.btn-danger,
  300. .input-group-btn .btn.btn-fab.btn-danger,
  301. .btn-group-raised .btn.btn-danger,
  302. .btn-group-raised .input-group-btn .btn.btn-danger {
  303. background-color: #f44336;
  304. color: rgba(255,255,255, 0.84);
  305. }
  306. .btn.btn-raised:not(.btn-link),
  307. .input-group-btn .btn.btn-raised:not(.btn-link),
  308. .btn-group-raised .btn:not(.btn-link),
  309. .btn-group-raised .input-group-btn .btn:not(.btn-link) {
  310. -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  311. box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  312. }
  313. .btn.btn-raised:not(.btn-link):hover,
  314. .input-group-btn .btn.btn-raised:not(.btn-link):hover,
  315. .btn-group-raised .btn:not(.btn-link):hover,
  316. .btn-group-raised .input-group-btn .btn:not(.btn-link):hover,
  317. .btn.btn-raised:not(.btn-link):focus,
  318. .input-group-btn .btn.btn-raised:not(.btn-link):focus,
  319. .btn-group-raised .btn:not(.btn-link):focus,
  320. .btn-group-raised .input-group-btn .btn:not(.btn-link):focus,
  321. .btn.btn-raised:not(.btn-link).active,
  322. .input-group-btn .btn.btn-raised:not(.btn-link).active,
  323. .btn-group-raised .btn:not(.btn-link).active,
  324. .btn-group-raised .input-group-btn .btn:not(.btn-link).active,
  325. .btn.btn-raised:not(.btn-link):active,
  326. .input-group-btn .btn.btn-raised:not(.btn-link):active,
  327. .btn-group-raised .btn:not(.btn-link):active,
  328. .btn-group-raised .input-group-btn .btn:not(.btn-link):active {
  329. outline: 0;
  330. }
  331. .btn.btn-raised:not(.btn-link):hover,
  332. .input-group-btn .btn.btn-raised:not(.btn-link):hover,
  333. .btn-group-raised .btn:not(.btn-link):hover,
  334. .btn-group-raised .input-group-btn .btn:not(.btn-link):hover,
  335. .btn.btn-raised:not(.btn-link):focus,
  336. .input-group-btn .btn.btn-raised:not(.btn-link):focus,
  337. .btn-group-raised .btn:not(.btn-link):focus,
  338. .btn-group-raised .input-group-btn .btn:not(.btn-link):focus,
  339. .btn.btn-raised:not(.btn-link).active,
  340. .input-group-btn .btn.btn-raised:not(.btn-link).active,
  341. .btn-group-raised .btn:not(.btn-link).active,
  342. .btn-group-raised .input-group-btn .btn:not(.btn-link).active,
  343. .btn.btn-raised:not(.btn-link):active,
  344. .input-group-btn .btn.btn-raised:not(.btn-link):active,
  345. .btn-group-raised .btn:not(.btn-link):active,
  346. .btn-group-raised .input-group-btn .btn:not(.btn-link):active,
  347. .btn.btn-raised:not(.btn-link):hover.btn-default,
  348. .input-group-btn .btn.btn-raised:not(.btn-link):hover.btn-default,
  349. .btn-group-raised .btn:not(.btn-link):hover.btn-default,
  350. .btn-group-raised .input-group-btn .btn:not(.btn-link):hover.btn-default,
  351. .btn.btn-raised:not(.btn-link):focus.btn-default,
  352. .input-group-btn .btn.btn-raised:not(.btn-link):focus.btn-default,
  353. .btn-group-raised .btn:not(.btn-link):focus.btn-default,
  354. .btn-group-raised .input-group-btn .btn:not(.btn-link):focus.btn-default,
  355. .btn.btn-raised:not(.btn-link).active.btn-default,
  356. .input-group-btn .btn.btn-raised:not(.btn-link).active.btn-default,
  357. .btn-group-raised .btn:not(.btn-link).active.btn-default,
  358. .btn-group-raised .input-group-btn .btn:not(.btn-link).active.btn-default,
  359. .btn.btn-raised:not(.btn-link):active.btn-default,
  360. .input-group-btn .btn.btn-raised:not(.btn-link):active.btn-default,
  361. .btn-group-raised .btn:not(.btn-link):active.btn-default,
  362. .btn-group-raised .input-group-btn .btn:not(.btn-link):active.btn-default {
  363. background-color: #e4e4e4;
  364. }
  365. .btn.btn-raised:not(.btn-link):hover.btn-inverse,
  366. .input-group-btn .btn.btn-raised:not(.btn-link):hover.btn-inverse,
  367. .btn-group-raised .btn:not(.btn-link):hover.btn-inverse,
  368. .btn-group-raised .input-group-btn .btn:not(.btn-link):hover.btn-inverse,
  369. .btn.btn-raised:not(.btn-link):focus.btn-inverse,
  370. .input-group-btn .btn.btn-raised:not(.btn-link):focus.btn-inverse,
  371. .btn-group-raised .btn:not(.btn-link):focus.btn-inverse,
  372. .btn-group-raised .input-group-btn .btn:not(.btn-link):focus.btn-inverse,
  373. .btn.btn-raised:not(.btn-link).active.btn-inverse,
  374. .input-group-btn .btn.btn-raised:not(.btn-link).active.btn-inverse,
  375. .btn-group-raised .btn:not(.btn-link).active.btn-inverse,
  376. .btn-group-raised .input-group-btn .btn:not(.btn-link).active.btn-inverse,
  377. .btn.btn-raised:not(.btn-link):active.btn-inverse,
  378. .input-group-btn .btn.btn-raised:not(.btn-link):active.btn-inverse,
  379. .btn-group-raised .btn:not(.btn-link):active.btn-inverse,
  380. .btn-group-raised .input-group-btn .btn:not(.btn-link):active.btn-inverse {
  381. background-color: #495bc0;
  382. }
  383. .btn.btn-raised:not(.btn-link):hover.btn-primary,
  384. .input-group-btn .btn.btn-raised:not(.btn-link):hover.btn-primary,
  385. .btn-group-raised .btn:not(.btn-link):hover.btn-primary,
  386. .btn-group-raised .input-group-btn .btn:not(.btn-link):hover.btn-primary,
  387. .btn.btn-raised:not(.btn-link):focus.btn-primary,
  388. .input-group-btn .btn.btn-raised:not(.btn-link):focus.btn-primary,
  389. .btn-group-raised .btn:not(.btn-link):focus.btn-primary,
  390. .btn-group-raised .input-group-btn .btn:not(.btn-link):focus.btn-primary,
  391. .btn.btn-raised:not(.btn-link).active.btn-primary,
  392. .input-group-btn .btn.btn-raised:not(.btn-link).active.btn-primary,
  393. .btn-group-raised .btn:not(.btn-link).active.btn-primary,
  394. .btn-group-raised .input-group-btn .btn:not(.btn-link).active.btn-primary,
  395. .btn.btn-raised:not(.btn-link):active.btn-primary,
  396. .input-group-btn .btn.btn-raised:not(.btn-link):active.btn-primary,
  397. .btn-group-raised .btn:not(.btn-link):active.btn-primary,
  398. .btn-group-raised .input-group-btn .btn:not(.btn-link):active.btn-primary {
  399. background-color: #00aa9a;
  400. }
  401. .btn.btn-raised:not(.btn-link):hover.btn-success,
  402. .input-group-btn .btn.btn-raised:not(.btn-link):hover.btn-success,
  403. .btn-group-raised .btn:not(.btn-link):hover.btn-success,
  404. .btn-group-raised .input-group-btn .btn:not(.btn-link):hover.btn-success,
  405. .btn.btn-raised:not(.btn-link):focus.btn-success,
  406. .input-group-btn .btn.btn-raised:not(.btn-link):focus.btn-success,
  407. .btn-group-raised .btn:not(.btn-link):focus.btn-success,
  408. .btn-group-raised .input-group-btn .btn:not(.btn-link):focus.btn-success,
  409. .btn.btn-raised:not(.btn-link).active.btn-success,
  410. .input-group-btn .btn.btn-raised:not(.btn-link).active.btn-success,
  411. .btn-group-raised .btn:not(.btn-link).active.btn-success,
  412. .btn-group-raised .input-group-btn .btn:not(.btn-link).active.btn-success,
  413. .btn.btn-raised:not(.btn-link):active.btn-success,
  414. .input-group-btn .btn.btn-raised:not(.btn-link):active.btn-success,
  415. .btn-group-raised .btn:not(.btn-link):active.btn-success,
  416. .btn-group-raised .input-group-btn .btn:not(.btn-link):active.btn-success {
  417. background-color: #59b75c;
  418. }
  419. .btn.btn-raised:not(.btn-link):hover.btn-info,
  420. .input-group-btn .btn.btn-raised:not(.btn-link):hover.btn-info,
  421. .btn-group-raised .btn:not(.btn-link):hover.btn-info,
  422. .btn-group-raised .input-group-btn .btn:not(.btn-link):hover.btn-info,
  423. .btn.btn-raised:not(.btn-link):focus.btn-info,
  424. .input-group-btn .btn.btn-raised:not(.btn-link):focus.btn-info,
  425. .btn-group-raised .btn:not(.btn-link):focus.btn-info,
  426. .btn-group-raised .input-group-btn .btn:not(.btn-link):focus.btn-info,
  427. .btn.btn-raised:not(.btn-link).active.btn-info,
  428. .input-group-btn .btn.btn-raised:not(.btn-link).active.btn-info,
  429. .btn-group-raised .btn:not(.btn-link).active.btn-info,
  430. .btn-group-raised .input-group-btn .btn:not(.btn-link).active.btn-info,
  431. .btn.btn-raised:not(.btn-link):active.btn-info,
  432. .input-group-btn .btn.btn-raised:not(.btn-link):active.btn-info,
  433. .btn-group-raised .btn:not(.btn-link):active.btn-info,
  434. .btn-group-raised .input-group-btn .btn:not(.btn-link):active.btn-info {
  435. background-color: #0fb2fc;
  436. }
  437. .btn.btn-raised:not(.btn-link):hover.btn-warning,
  438. .input-group-btn .btn.btn-raised:not(.btn-link):hover.btn-warning,
  439. .btn-group-raised .btn:not(.btn-link):hover.btn-warning,
  440. .btn-group-raised .input-group-btn .btn:not(.btn-link):hover.btn-warning,
  441. .btn.btn-raised:not(.btn-link):focus.btn-warning,
  442. .input-group-btn .btn.btn-raised:not(.btn-link):focus.btn-warning,
  443. .btn-group-raised .btn:not(.btn-link):focus.btn-warning,
  444. .btn-group-raised .input-group-btn .btn:not(.btn-link):focus.btn-warning,
  445. .btn.btn-raised:not(.btn-link).active.btn-warning,
  446. .input-group-btn .btn.btn-raised:not(.btn-link).active.btn-warning,
  447. .btn-group-raised .btn:not(.btn-link).active.btn-warning,
  448. .btn-group-raised .input-group-btn .btn:not(.btn-link).active.btn-warning,
  449. .btn.btn-raised:not(.btn-link):active.btn-warning,
  450. .input-group-btn .btn.btn-raised:not(.btn-link):active.btn-warning,
  451. .btn-group-raised .btn:not(.btn-link):active.btn-warning,
  452. .btn-group-raised .input-group-btn .btn:not(.btn-link):active.btn-warning {
  453. background-color: #ff6736;
  454. }
  455. .btn.btn-raised:not(.btn-link):hover.btn-danger,
  456. .input-group-btn .btn.btn-raised:not(.btn-link):hover.btn-danger,
  457. .btn-group-raised .btn:not(.btn-link):hover.btn-danger,
  458. .btn-group-raised .input-group-btn .btn:not(.btn-link):hover.btn-danger,
  459. .btn.btn-raised:not(.btn-link):focus.btn-danger,
  460. .input-group-btn .btn.btn-raised:not(.btn-link):focus.btn-danger,
  461. .btn-group-raised .btn:not(.btn-link):focus.btn-danger,
  462. .btn-group-raised .input-group-btn .btn:not(.btn-link):focus.btn-danger,
  463. .btn.btn-raised:not(.btn-link).active.btn-danger,
  464. .input-group-btn .btn.btn-raised:not(.btn-link).active.btn-danger,
  465. .btn-group-raised .btn:not(.btn-link).active.btn-danger,
  466. .btn-group-raised .input-group-btn .btn:not(.btn-link).active.btn-danger,
  467. .btn.btn-raised:not(.btn-link):active.btn-danger,
  468. .input-group-btn .btn.btn-raised:not(.btn-link):active.btn-danger,
  469. .btn-group-raised .btn:not(.btn-link):active.btn-danger,
  470. .btn-group-raised .input-group-btn .btn:not(.btn-link):active.btn-danger {
  471. background-color: #f55549;
  472. }
  473. .btn.btn-raised:not(.btn-link).active,
  474. .input-group-btn .btn.btn-raised:not(.btn-link).active,
  475. .btn-group-raised .btn:not(.btn-link).active,
  476. .btn-group-raised .input-group-btn .btn:not(.btn-link).active,
  477. .btn.btn-raised:not(.btn-link):active,
  478. .input-group-btn .btn.btn-raised:not(.btn-link):active,
  479. .btn-group-raised .btn:not(.btn-link):active,
  480. .btn-group-raised .input-group-btn .btn:not(.btn-link):active,
  481. .btn.btn-raised:not(.btn-link).active:hover,
  482. .input-group-btn .btn.btn-raised:not(.btn-link).active:hover,
  483. .btn-group-raised .btn:not(.btn-link).active:hover,
  484. .btn-group-raised .input-group-btn .btn:not(.btn-link).active:hover,
  485. .btn.btn-raised:not(.btn-link):active:hover,
  486. .input-group-btn .btn.btn-raised:not(.btn-link):active:hover,
  487. .btn-group-raised .btn:not(.btn-link):active:hover,
  488. .btn-group-raised .input-group-btn .btn:not(.btn-link):active:hover {
  489. -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  490. box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  491. }
  492. .btn.btn-raised:not(.btn-link):focus,
  493. .input-group-btn .btn.btn-raised:not(.btn-link):focus,
  494. .btn-group-raised .btn:not(.btn-link):focus,
  495. .btn-group-raised .input-group-btn .btn:not(.btn-link):focus,
  496. .btn.btn-raised:not(.btn-link):focus.active,
  497. .input-group-btn .btn.btn-raised:not(.btn-link):focus.active,
  498. .btn-group-raised .btn:not(.btn-link):focus.active,
  499. .btn-group-raised .input-group-btn .btn:not(.btn-link):focus.active,
  500. .btn.btn-raised:not(.btn-link):focus:active,
  501. .input-group-btn .btn.btn-raised:not(.btn-link):focus:active,
  502. .btn-group-raised .btn:not(.btn-link):focus:active,
  503. .btn-group-raised .input-group-btn .btn:not(.btn-link):focus:active,
  504. .btn.btn-raised:not(.btn-link):focus:hover,
  505. .input-group-btn .btn.btn-raised:not(.btn-link):focus:hover,
  506. .btn-group-raised .btn:not(.btn-link):focus:hover,
  507. .btn-group-raised .input-group-btn .btn:not(.btn-link):focus:hover,
  508. .btn.btn-raised:not(.btn-link):focus.active:hover,
  509. .input-group-btn .btn.btn-raised:not(.btn-link):focus.active:hover,
  510. .btn-group-raised .btn:not(.btn-link):focus.active:hover,
  511. .btn-group-raised .input-group-btn .btn:not(.btn-link):focus.active:hover,
  512. .btn.btn-raised:not(.btn-link):focus:active:hover,
  513. .input-group-btn .btn.btn-raised:not(.btn-link):focus:active:hover,
  514. .btn-group-raised .btn:not(.btn-link):focus:active:hover,
  515. .btn-group-raised .input-group-btn .btn:not(.btn-link):focus:active:hover {
  516. -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
  517. box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
  518. }
  519. .btn.btn-fab,
  520. .input-group-btn .btn.btn-fab {
  521. border-radius: 50%;
  522. font-size: 24px;
  523. height: 56px;
  524. margin: auto;
  525. min-width: 56px;
  526. width: 56px;
  527. padding: 0;
  528. overflow: hidden;
  529. -webkit-box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
  530. box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
  531. position: relative;
  532. line-height: normal;
  533. }
  534. .btn.btn-fab .ripple-container,
  535. .input-group-btn .btn.btn-fab .ripple-container {
  536. border-radius: 50%;
  537. }
  538. .btn.btn-fab.btn-fab-mini,
  539. .input-group-btn .btn.btn-fab.btn-fab-mini,
  540. .btn-group-sm .btn.btn-fab,
  541. .btn-group-sm .input-group-btn .btn.btn-fab {
  542. height: 40px;
  543. min-width: 40px;
  544. width: 40px;
  545. }
  546. .btn.btn-fab.btn-fab-mini.material-icons,
  547. .input-group-btn .btn.btn-fab.btn-fab-mini.material-icons,
  548. .btn-group-sm .btn.btn-fab.material-icons,
  549. .btn-group-sm .input-group-btn .btn.btn-fab.material-icons {
  550. top: 0px;
  551. left: 0px;
  552. }
  553. .btn.btn-fab i.material-icons,
  554. .input-group-btn .btn.btn-fab i.material-icons {
  555. position: absolute;
  556. top: 50%;
  557. left: 50%;
  558. -webkit-transform: translate(-12px, -12px);
  559. -ms-transform: translate(-12px, -12px);
  560. -o-transform: translate(-12px, -12px);
  561. transform: translate(-12px, -12px);
  562. line-height: 24px;
  563. width: 24px;
  564. }
  565. .btn i.material-icons,
  566. .input-group-btn .btn i.material-icons {
  567. vertical-align: middle;
  568. }
  569. .btn.btn-lg,
  570. .input-group-btn .btn.btn-lg,
  571. .btn-group-lg .btn,
  572. .btn-group-lg .input-group-btn .btn {
  573. font-size: 16px;
  574. }
  575. .btn.btn-sm,
  576. .input-group-btn .btn.btn-sm,
  577. .btn-group-sm .btn,
  578. .btn-group-sm .input-group-btn .btn {
  579. padding: 5px 20px;
  580. font-size: 12px;
  581. }
  582. .btn.btn-xs,
  583. .input-group-btn .btn.btn-xs,
  584. .btn-group-xs .btn,
  585. .btn-group-xs .input-group-btn .btn {
  586. padding: 4px 15px;
  587. font-size: 10px;
  588. }
  589. fieldset[disabled][disabled] .btn,
  590. fieldset[disabled][disabled] .input-group-btn .btn,
  591. fieldset[disabled][disabled] .btn-group,
  592. fieldset[disabled][disabled] .btn-group-vertical,
  593. .btn.disabled,
  594. .input-group-btn .btn.disabled,
  595. .btn-group.disabled,
  596. .btn-group-vertical.disabled,
  597. .btn:disabled,
  598. .input-group-btn .btn:disabled,
  599. .btn-group:disabled,
  600. .btn-group-vertical:disabled,
  601. .btn[disabled][disabled],
  602. .input-group-btn .btn[disabled][disabled],
  603. .btn-group[disabled][disabled],
  604. .btn-group-vertical[disabled][disabled] {
  605. color: rgba(0, 0, 0, 0.26);
  606. background: transparent;
  607. }
  608. .theme-dark fieldset[disabled][disabled] .btn,
  609. .theme-dark fieldset[disabled][disabled] .input-group-btn .btn,
  610. .theme-dark fieldset[disabled][disabled] .btn-group,
  611. .theme-dark fieldset[disabled][disabled] .btn-group-vertical,
  612. .theme-dark .btn.disabled,
  613. .theme-dark .input-group-btn .btn.disabled,
  614. .theme-dark .btn-group.disabled,
  615. .theme-dark .btn-group-vertical.disabled,
  616. .theme-dark .btn:disabled,
  617. .theme-dark .input-group-btn .btn:disabled,
  618. .theme-dark .btn-group:disabled,
  619. .theme-dark .btn-group-vertical:disabled,
  620. .theme-dark .btn[disabled][disabled],
  621. .theme-dark .input-group-btn .btn[disabled][disabled],
  622. .theme-dark .btn-group[disabled][disabled],
  623. .theme-dark .btn-group-vertical[disabled][disabled] {
  624. color: rgba(255, 255, 255, 0.3);
  625. }
  626. fieldset[disabled][disabled] .btn.btn-raised,
  627. fieldset[disabled][disabled] .input-group-btn .btn.btn-raised,
  628. fieldset[disabled][disabled] .btn-group.btn-raised,
  629. fieldset[disabled][disabled] .btn-group-vertical.btn-raised,
  630. .btn.disabled.btn-raised,
  631. .input-group-btn .btn.disabled.btn-raised,
  632. .btn-group.disabled.btn-raised,
  633. .btn-group-vertical.disabled.btn-raised,
  634. .btn:disabled.btn-raised,
  635. .input-group-btn .btn:disabled.btn-raised,
  636. .btn-group:disabled.btn-raised,
  637. .btn-group-vertical:disabled.btn-raised,
  638. .btn[disabled][disabled].btn-raised,
  639. .input-group-btn .btn[disabled][disabled].btn-raised,
  640. .btn-group[disabled][disabled].btn-raised,
  641. .btn-group-vertical[disabled][disabled].btn-raised,
  642. fieldset[disabled][disabled] .btn.btn-group-raised,
  643. fieldset[disabled][disabled] .input-group-btn .btn.btn-group-raised,
  644. fieldset[disabled][disabled] .btn-group.btn-group-raised,
  645. fieldset[disabled][disabled] .btn-group-vertical.btn-group-raised,
  646. .btn.disabled.btn-group-raised,
  647. .input-group-btn .btn.disabled.btn-group-raised,
  648. .btn-group.disabled.btn-group-raised,
  649. .btn-group-vertical.disabled.btn-group-raised,
  650. .btn:disabled.btn-group-raised,
  651. .input-group-btn .btn:disabled.btn-group-raised,
  652. .btn-group:disabled.btn-group-raised,
  653. .btn-group-vertical:disabled.btn-group-raised,
  654. .btn[disabled][disabled].btn-group-raised,
  655. .input-group-btn .btn[disabled][disabled].btn-group-raised,
  656. .btn-group[disabled][disabled].btn-group-raised,
  657. .btn-group-vertical[disabled][disabled].btn-group-raised,
  658. fieldset[disabled][disabled] .btn.btn-raised.active,
  659. fieldset[disabled][disabled] .input-group-btn .btn.btn-raised.active,
  660. fieldset[disabled][disabled] .btn-group.btn-raised.active,
  661. fieldset[disabled][disabled] .btn-group-vertical.btn-raised.active,
  662. .btn.disabled.btn-raised.active,
  663. .input-group-btn .btn.disabled.btn-raised.active,
  664. .btn-group.disabled.btn-raised.active,
  665. .btn-group-vertical.disabled.btn-raised.active,
  666. .btn:disabled.btn-raised.active,
  667. .input-group-btn .btn:disabled.btn-raised.active,
  668. .btn-group:disabled.btn-raised.active,
  669. .btn-group-vertical:disabled.btn-raised.active,
  670. .btn[disabled][disabled].btn-raised.active,
  671. .input-group-btn .btn[disabled][disabled].btn-raised.active,
  672. .btn-group[disabled][disabled].btn-raised.active,
  673. .btn-group-vertical[disabled][disabled].btn-raised.active,
  674. fieldset[disabled][disabled] .btn.btn-group-raised.active,
  675. fieldset[disabled][disabled] .input-group-btn .btn.btn-group-raised.active,
  676. fieldset[disabled][disabled] .btn-group.btn-group-raised.active,
  677. fieldset[disabled][disabled] .btn-group-vertical.btn-group-raised.active,
  678. .btn.disabled.btn-group-raised.active,
  679. .input-group-btn .btn.disabled.btn-group-raised.active,
  680. .btn-group.disabled.btn-group-raised.active,
  681. .btn-group-vertical.disabled.btn-group-raised.active,
  682. .btn:disabled.btn-group-raised.active,
  683. .input-group-btn .btn:disabled.btn-group-raised.active,
  684. .btn-group:disabled.btn-group-raised.active,
  685. .btn-group-vertical:disabled.btn-group-raised.active,
  686. .btn[disabled][disabled].btn-group-raised.active,
  687. .input-group-btn .btn[disabled][disabled].btn-group-raised.active,
  688. .btn-group[disabled][disabled].btn-group-raised.active,
  689. .btn-group-vertical[disabled][disabled].btn-group-raised.active,
  690. fieldset[disabled][disabled] .btn.btn-raised:active,
  691. fieldset[disabled][disabled] .input-group-btn .btn.btn-raised:active,
  692. fieldset[disabled][disabled] .btn-group.btn-raised:active,
  693. fieldset[disabled][disabled] .btn-group-vertical.btn-raised:active,
  694. .btn.disabled.btn-raised:active,
  695. .input-group-btn .btn.disabled.btn-raised:active,
  696. .btn-group.disabled.btn-raised:active,
  697. .btn-group-vertical.disabled.btn-raised:active,
  698. .btn:disabled.btn-raised:active,
  699. .input-group-btn .btn:disabled.btn-raised:active,
  700. .btn-group:disabled.btn-raised:active,
  701. .btn-group-vertical:disabled.btn-raised:active,
  702. .btn[disabled][disabled].btn-raised:active,
  703. .input-group-btn .btn[disabled][disabled].btn-raised:active,
  704. .btn-group[disabled][disabled].btn-raised:active,
  705. .btn-group-vertical[disabled][disabled].btn-raised:active,
  706. fieldset[disabled][disabled] .btn.btn-group-raised:active,
  707. fieldset[disabled][disabled] .input-group-btn .btn.btn-group-raised:active,
  708. fieldset[disabled][disabled] .btn-group.btn-group-raised:active,
  709. fieldset[disabled][disabled] .btn-group-vertical.btn-group-raised:active,
  710. .btn.disabled.btn-group-raised:active,
  711. .input-group-btn .btn.disabled.btn-group-raised:active,
  712. .btn-group.disabled.btn-group-raised:active,
  713. .btn-group-vertical.disabled.btn-group-raised:active,
  714. .btn:disabled.btn-group-raised:active,
  715. .input-group-btn .btn:disabled.btn-group-raised:active,
  716. .btn-group:disabled.btn-group-raised:active,
  717. .btn-group-vertical:disabled.btn-group-raised:active,
  718. .btn[disabled][disabled].btn-group-raised:active,
  719. .input-group-btn .btn[disabled][disabled].btn-group-raised:active,
  720. .btn-group[disabled][disabled].btn-group-raised:active,
  721. .btn-group-vertical[disabled][disabled].btn-group-raised:active,
  722. fieldset[disabled][disabled] .btn.btn-raised:focus:not(:active),
  723. fieldset[disabled][disabled] .input-group-btn .btn.btn-raised:focus:not(:active),
  724. fieldset[disabled][disabled] .btn-group.btn-raised:focus:not(:active),
  725. fieldset[disabled][disabled] .btn-group-vertical.btn-raised:focus:not(:active),
  726. .btn.disabled.btn-raised:focus:not(:active),
  727. .input-group-btn .btn.disabled.btn-raised:focus:not(:active),
  728. .btn-group.disabled.btn-raised:focus:not(:active),
  729. .btn-group-vertical.disabled.btn-raised:focus:not(:active),
  730. .btn:disabled.btn-raised:focus:not(:active),
  731. .input-group-btn .btn:disabled.btn-raised:focus:not(:active),
  732. .btn-group:disabled.btn-raised:focus:not(:active),
  733. .btn-group-vertical:disabled.btn-raised:focus:not(:active),
  734. .btn[disabled][disabled].btn-raised:focus:not(:active),
  735. .input-group-btn .btn[disabled][disabled].btn-raised:focus:not(:active),
  736. .btn-group[disabled][disabled].btn-raised:focus:not(:active),
  737. .btn-group-vertical[disabled][disabled].btn-raised:focus:not(:active),
  738. fieldset[disabled][disabled] .btn.btn-group-raised:focus:not(:active),
  739. fieldset[disabled][disabled] .input-group-btn .btn.btn-group-raised:focus:not(:active),
  740. fieldset[disabled][disabled] .btn-group.btn-group-raised:focus:not(:active),
  741. fieldset[disabled][disabled] .btn-group-vertical.btn-group-raised:focus:not(:active),
  742. .btn.disabled.btn-group-raised:focus:not(:active),
  743. .input-group-btn .btn.disabled.btn-group-raised:focus:not(:active),
  744. .btn-group.disabled.btn-group-raised:focus:not(:active),
  745. .btn-group-vertical.disabled.btn-group-raised:focus:not(:active),
  746. .btn:disabled.btn-group-raised:focus:not(:active),
  747. .input-group-btn .btn:disabled.btn-group-raised:focus:not(:active),
  748. .btn-group:disabled.btn-group-raised:focus:not(:active),
  749. .btn-group-vertical:disabled.btn-group-raised:focus:not(:active),
  750. .btn[disabled][disabled].btn-group-raised:focus:not(:active),
  751. .input-group-btn .btn[disabled][disabled].btn-group-raised:focus:not(:active),
  752. .btn-group[disabled][disabled].btn-group-raised:focus:not(:active),
  753. .btn-group-vertical[disabled][disabled].btn-group-raised:focus:not(:active) {
  754. -webkit-box-shadow: none;
  755. box-shadow: none;
  756. }
  757. .btn-group,
  758. .btn-group-vertical {
  759. position: relative;
  760. margin: 10px 1px;
  761. }
  762. .btn-group.open > .dropdown-toggle.btn,
  763. .btn-group-vertical.open > .dropdown-toggle.btn,
  764. .btn-group.open > .dropdown-toggle.btn.btn-default,
  765. .btn-group-vertical.open > .dropdown-toggle.btn.btn-default {
  766. background-color: #EEEEEE;
  767. }
  768. .btn-group.open > .dropdown-toggle.btn.btn-inverse,
  769. .btn-group-vertical.open > .dropdown-toggle.btn.btn-inverse {
  770. background-color: #3f51b5;
  771. }
  772. .btn-group.open > .dropdown-toggle.btn.btn-primary,
  773. .btn-group-vertical.open > .dropdown-toggle.btn.btn-primary {
  774. background-color: #009688;
  775. }
  776. .btn-group.open > .dropdown-toggle.btn.btn-success,
  777. .btn-group-vertical.open > .dropdown-toggle.btn.btn-success {
  778. background-color: #4caf50;
  779. }
  780. .btn-group.open > .dropdown-toggle.btn.btn-info,
  781. .btn-group-vertical.open > .dropdown-toggle.btn.btn-info {
  782. background-color: #03a9f4;
  783. }
  784. .btn-group.open > .dropdown-toggle.btn.btn-warning,
  785. .btn-group-vertical.open > .dropdown-toggle.btn.btn-warning {
  786. background-color: #ff5722;
  787. }
  788. .btn-group.open > .dropdown-toggle.btn.btn-danger,
  789. .btn-group-vertical.open > .dropdown-toggle.btn.btn-danger {
  790. background-color: #f44336;
  791. }
  792. .btn-group .dropdown-menu,
  793. .btn-group-vertical .dropdown-menu {
  794. border-radius: 0 0 2px 2px;
  795. }
  796. .btn-group.btn-group-raised,
  797. .btn-group-vertical.btn-group-raised {
  798. -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  799. box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  800. }
  801. .btn-group .btn + .btn,
  802. .btn-group-vertical .btn + .btn,
  803. .btn-group .btn,
  804. .btn-group-vertical .btn,
  805. .btn-group .btn:active,
  806. .btn-group-vertical .btn:active,
  807. .btn-group .btn-group,
  808. .btn-group-vertical .btn-group {
  809. margin: 0;
  810. }
  811. .checkbox label,
  812. label.checkbox-inline {
  813. cursor: pointer;
  814. padding-left: 0;
  815. color: rgba(0,0,0, 0.26);
  816. }
  817. .form-group.is-focused .checkbox label,
  818. .form-group.is-focused label.checkbox-inline {
  819. color: rgba(0,0,0, 0.26);
  820. }
  821. .form-group.is-focused .checkbox label:hover,
  822. .form-group.is-focused label.checkbox-inline:hover,
  823. .form-group.is-focused .checkbox label:focus,
  824. .form-group.is-focused label.checkbox-inline:focus {
  825. color: rgba(0,0,0, .54);
  826. }
  827. fieldset[disabled] .form-group.is-focused .checkbox label,
  828. fieldset[disabled] .form-group.is-focused label.checkbox-inline {
  829. color: rgba(0,0,0, 0.26);
  830. }
  831. .checkbox input[type=checkbox],
  832. label.checkbox-inline input[type=checkbox] {
  833. opacity: 0;
  834. position: absolute;
  835. margin: 0;
  836. z-index: -1;
  837. width: 0;
  838. height: 0;
  839. overflow: hidden;
  840. left: 0;
  841. pointer-events: none;
  842. }
  843. .checkbox .checkbox-material,
  844. label.checkbox-inline .checkbox-material {
  845. vertical-align: middle;
  846. position: relative;
  847. top: 3px;
  848. }
  849. .checkbox .checkbox-material:before,
  850. label.checkbox-inline .checkbox-material:before {
  851. display: block;
  852. position: absolute;
  853. top: -5px;
  854. left: 0;
  855. content: "";
  856. background-color: rgba(0, 0, 0, 0.84);
  857. height: 20px;
  858. width: 20px;
  859. border-radius: 100%;
  860. z-index: 1;
  861. opacity: 0;
  862. margin: 0;
  863. -webkit-transform: scale3d(2.3, 2.3, 1);
  864. transform: scale3d(2.3, 2.3, 1);
  865. }
  866. .checkbox .checkbox-material .check,
  867. label.checkbox-inline .checkbox-material .check {
  868. position: relative;
  869. display: inline-block;
  870. width: 20px;
  871. height: 20px;
  872. border: 2px solid rgba(0,0,0, .54);
  873. border-radius: 2px;
  874. overflow: hidden;
  875. z-index: 1;
  876. }
  877. .checkbox .checkbox-material .check:before,
  878. label.checkbox-inline .checkbox-material .check:before {
  879. position: absolute;
  880. content: "";
  881. -webkit-transform: rotate(45deg);
  882. -ms-transform: rotate(45deg);
  883. -o-transform: rotate(45deg);
  884. transform: rotate(45deg);
  885. display: block;
  886. margin-top: -4px;
  887. margin-left: 6px;
  888. width: 0;
  889. height: 0;
  890. -webkit-box-shadow: 0 0 0 0,
  891. 0 0 0 0,
  892. 0 0 0 0,
  893. 0 0 0 0,
  894. 0 0 0 0,
  895. 0 0 0 0,
  896. 0 0 0 0 inset;
  897. box-shadow: 0 0 0 0,
  898. 0 0 0 0,
  899. 0 0 0 0,
  900. 0 0 0 0,
  901. 0 0 0 0,
  902. 0 0 0 0,
  903. 0 0 0 0 inset;
  904. }
  905. .checkbox input[type=checkbox]:focus + .checkbox-material .check:after,
  906. label.checkbox-inline input[type=checkbox]:focus + .checkbox-material .check:after {
  907. opacity: 0.2;
  908. }
  909. .checkbox input[type=checkbox]:focus:checked + .checkbox-material:before,
  910. label.checkbox-inline input[type=checkbox]:focus:checked + .checkbox-material:before {
  911. -webkit-animation: rippleOn 500ms;
  912. -o-animation: rippleOn 500ms;
  913. animation: rippleOn 500ms;
  914. }
  915. .checkbox input[type=checkbox]:focus:checked + .checkbox-material .check:before,
  916. label.checkbox-inline input[type=checkbox]:focus:checked + .checkbox-material .check:before {
  917. -webkit-animation: checkbox-on 0.3s forwards;
  918. -o-animation: checkbox-on 0.3s forwards;
  919. animation: checkbox-on 0.3s forwards;
  920. }
  921. .checkbox input[type=checkbox]:focus:checked + .checkbox-material .check:after,
  922. label.checkbox-inline input[type=checkbox]:focus:checked + .checkbox-material .check:after {
  923. -webkit-animation: rippleOn 500ms forwards;
  924. -o-animation: rippleOn 500ms forwards;
  925. animation: rippleOn 500ms forwards;
  926. }
  927. .checkbox input[type=checkbox]:focus:not(:checked) + .checkbox-material:before,
  928. label.checkbox-inline input[type=checkbox]:focus:not(:checked) + .checkbox-material:before {
  929. -webkit-animation: rippleOff 500ms;
  930. -o-animation: rippleOff 500ms;
  931. animation: rippleOff 500ms;
  932. }
  933. .checkbox input[type=checkbox]:focus:not(:checked) + .checkbox-material .check:before,
  934. label.checkbox-inline input[type=checkbox]:focus:not(:checked) + .checkbox-material .check:before {
  935. -webkit-animation: checkbox-off 0.3s forwards;
  936. -o-animation: checkbox-off 0.3s forwards;
  937. animation: checkbox-off 0.3s forwards;
  938. }
  939. .checkbox input[type=checkbox]:focus:not(:checked) + .checkbox-material .check:after,
  940. label.checkbox-inline input[type=checkbox]:focus:not(:checked) + .checkbox-material .check:after {
  941. -webkit-animation: rippleOff 500ms forwards;
  942. -o-animation: rippleOff 500ms forwards;
  943. animation: rippleOff 500ms forwards;
  944. }
  945. .checkbox input[type=checkbox]:checked + .checkbox-material .check,
  946. label.checkbox-inline input[type=checkbox]:checked + .checkbox-material .check {
  947. color: #009688;
  948. border-color: #009688;
  949. }
  950. .checkbox input[type=checkbox]:checked + .checkbox-material .check:before,
  951. label.checkbox-inline input[type=checkbox]:checked + .checkbox-material .check:before {
  952. color: #009688;
  953. -webkit-box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
  954. box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
  955. }
  956. fieldset[disabled] .checkbox,
  957. fieldset[disabled] label.checkbox-inline,
  958. fieldset[disabled] .checkbox input[type=checkbox],
  959. fieldset[disabled] label.checkbox-inline input[type=checkbox],
  960. .checkbox input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
  961. label.checkbox-inline input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
  962. .checkbox input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check,
  963. label.checkbox-inline input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check,
  964. .checkbox input[type=checkbox][disabled] + .circle,
  965. label.checkbox-inline input[type=checkbox][disabled] + .circle {
  966. opacity: 0.5;
  967. }
  968. .checkbox input[type=checkbox][disabled] + .checkbox-material .check:after,
  969. label.checkbox-inline input[type=checkbox][disabled] + .checkbox-material .check:after {
  970. background-color: rgba(0,0,0, 0.87);
  971. -webkit-transform: rotate(-45deg);
  972. -ms-transform: rotate(-45deg);
  973. -o-transform: rotate(-45deg);
  974. transform: rotate(-45deg);
  975. }
  976. @-webkit-keyframes checkbox-on {
  977. 0% {
  978. -webkit-box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
  979. box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
  980. }
  981. 50% {
  982. -webkit-box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
  983. box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
  984. }
  985. 100% {
  986. -webkit-box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
  987. box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
  988. }
  989. }
  990. @-o-keyframes checkbox-on {
  991. 0% {
  992. box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
  993. }
  994. 50% {
  995. box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
  996. }
  997. 100% {
  998. box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
  999. }
  1000. }
  1001. @keyframes checkbox-on {
  1002. 0% {
  1003. -webkit-box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
  1004. box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
  1005. }
  1006. 50% {
  1007. -webkit-box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
  1008. box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
  1009. }
  1010. 100% {
  1011. -webkit-box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
  1012. box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
  1013. }
  1014. }
  1015. @-webkit-keyframes checkbox-off {
  1016. 0% {
  1017. -webkit-box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
  1018. box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
  1019. }
  1020. 25% {
  1021. -webkit-box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
  1022. box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
  1023. }
  1024. 50% {
  1025. -webkit-transform: rotate(45deg);
  1026. transform: rotate(45deg);
  1027. margin-top: -4px;
  1028. margin-left: 6px;
  1029. width: 0;
  1030. height: 0;
  1031. -webkit-box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
  1032. box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
  1033. }
  1034. 51% {
  1035. -webkit-transform: rotate(0deg);
  1036. transform: rotate(0deg);
  1037. margin-top: -2px;
  1038. margin-left: -2px;
  1039. width: 20px;
  1040. height: 20px;
  1041. -webkit-box-shadow: 0 0 0 0,
  1042. 0 0 0 0,
  1043. 0 0 0 0,
  1044. 0 0 0 0,
  1045. 0 0 0 0,
  1046. 0 0 0 0,
  1047. 0px 0 0 10px inset;
  1048. box-shadow: 0 0 0 0,
  1049. 0 0 0 0,
  1050. 0 0 0 0,
  1051. 0 0 0 0,
  1052. 0 0 0 0,
  1053. 0 0 0 0,
  1054. 0px 0 0 10px inset;
  1055. }
  1056. 100% {
  1057. -webkit-transform: rotate(0deg);
  1058. transform: rotate(0deg);
  1059. margin-top: -2px;
  1060. margin-left: -2px;
  1061. width: 20px;
  1062. height: 20px;
  1063. -webkit-box-shadow: 0 0 0 0,
  1064. 0 0 0 0,
  1065. 0 0 0 0,
  1066. 0 0 0 0,
  1067. 0 0 0 0,
  1068. 0 0 0 0,
  1069. 0px 0 0 0 inset;
  1070. box-shadow: 0 0 0 0,
  1071. 0 0 0 0,
  1072. 0 0 0 0,
  1073. 0 0 0 0,
  1074. 0 0 0 0,
  1075. 0 0 0 0,
  1076. 0px 0 0 0 inset;
  1077. }
  1078. }
  1079. @-o-keyframes checkbox-off {
  1080. 0% {
  1081. box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
  1082. }
  1083. 25% {
  1084. box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
  1085. }
  1086. 50% {
  1087. -o-transform: rotate(45deg);
  1088. transform: rotate(45deg);
  1089. margin-top: -4px;
  1090. margin-left: 6px;
  1091. width: 0;
  1092. height: 0;
  1093. box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
  1094. }
  1095. 51% {
  1096. -o-transform: rotate(0deg);
  1097. transform: rotate(0deg);
  1098. margin-top: -2px;
  1099. margin-left: -2px;
  1100. width: 20px;
  1101. height: 20px;
  1102. box-shadow: 0 0 0 0,
  1103. 0 0 0 0,
  1104. 0 0 0 0,
  1105. 0 0 0 0,
  1106. 0 0 0 0,
  1107. 0 0 0 0,
  1108. 0px 0 0 10px inset;
  1109. }
  1110. 100% {
  1111. -o-transform: rotate(0deg);
  1112. transform: rotate(0deg);
  1113. margin-top: -2px;
  1114. margin-left: -2px;
  1115. width: 20px;
  1116. height: 20px;
  1117. box-shadow: 0 0 0 0,
  1118. 0 0 0 0,
  1119. 0 0 0 0,
  1120. 0 0 0 0,
  1121. 0 0 0 0,
  1122. 0 0 0 0,
  1123. 0px 0 0 0 inset;
  1124. }
  1125. }
  1126. @keyframes checkbox-off {
  1127. 0% {
  1128. -webkit-box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
  1129. box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
  1130. }
  1131. 25% {
  1132. -webkit-box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
  1133. box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
  1134. }
  1135. 50% {
  1136. -webkit-transform: rotate(45deg);
  1137. -o-transform: rotate(45deg);
  1138. transform: rotate(45deg);
  1139. margin-top: -4px;
  1140. margin-left: 6px;
  1141. width: 0;
  1142. height: 0;
  1143. -webkit-box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
  1144. box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
  1145. }
  1146. 51% {
  1147. -webkit-transform: rotate(0deg);
  1148. -o-transform: rotate(0deg);
  1149. transform: rotate(0deg);
  1150. margin-top: -2px;
  1151. margin-left: -2px;
  1152. width: 20px;
  1153. height: 20px;
  1154. -webkit-box-shadow: 0 0 0 0,
  1155. 0 0 0 0,
  1156. 0 0 0 0,
  1157. 0 0 0 0,
  1158. 0 0 0 0,
  1159. 0 0 0 0,
  1160. 0px 0 0 10px inset;
  1161. box-shadow: 0 0 0 0,
  1162. 0 0 0 0,
  1163. 0 0 0 0,
  1164. 0 0 0 0,
  1165. 0 0 0 0,
  1166. 0 0 0 0,
  1167. 0px 0 0 10px inset;
  1168. }
  1169. 100% {
  1170. -webkit-transform: rotate(0deg);
  1171. -o-transform: rotate(0deg);
  1172. transform: rotate(0deg);
  1173. margin-top: -2px;
  1174. margin-left: -2px;
  1175. width: 20px;
  1176. height: 20px;
  1177. -webkit-box-shadow: 0 0 0 0,
  1178. 0 0 0 0,
  1179. 0 0 0 0,
  1180. 0 0 0 0,
  1181. 0 0 0 0,
  1182. 0 0 0 0,
  1183. 0px 0 0 0 inset;
  1184. box-shadow: 0 0 0 0,
  1185. 0 0 0 0,
  1186. 0 0 0 0,
  1187. 0 0 0 0,
  1188. 0 0 0 0,
  1189. 0 0 0 0,
  1190. 0px 0 0 0 inset;
  1191. }
  1192. }
  1193. @-webkit-keyframes rippleOn {
  1194. 0% {
  1195. opacity: 0;
  1196. }
  1197. 50% {
  1198. opacity: 0.2;
  1199. }
  1200. 100% {
  1201. opacity: 0;
  1202. }
  1203. }
  1204. @-o-keyframes rippleOn {
  1205. 0% {
  1206. opacity: 0;
  1207. }
  1208. 50% {
  1209. opacity: 0.2;
  1210. }
  1211. 100% {
  1212. opacity: 0;
  1213. }
  1214. }
  1215. @keyframes rippleOn {
  1216. 0% {
  1217. opacity: 0;
  1218. }
  1219. 50% {
  1220. opacity: 0.2;
  1221. }
  1222. 100% {
  1223. opacity: 0;
  1224. }
  1225. }
  1226. @-webkit-keyframes rippleOff {
  1227. 0% {
  1228. opacity: 0;
  1229. }
  1230. 50% {
  1231. opacity: 0.2;
  1232. }
  1233. 100% {
  1234. opacity: 0;
  1235. }
  1236. }
  1237. @-o-keyframes rippleOff {
  1238. 0% {
  1239. opacity: 0;
  1240. }
  1241. 50% {
  1242. opacity: 0.2;
  1243. }
  1244. 100% {
  1245. opacity: 0;
  1246. }
  1247. }
  1248. @keyframes rippleOff {
  1249. 0% {
  1250. opacity: 0;
  1251. }
  1252. 50% {
  1253. opacity: 0.2;
  1254. }
  1255. 100% {
  1256. opacity: 0;
  1257. }
  1258. }
  1259. .togglebutton {
  1260. vertical-align: middle;
  1261. }
  1262. .togglebutton,
  1263. .togglebutton label,
  1264. .togglebutton input,
  1265. .togglebutton .toggle {
  1266. -webkit-user-select: none;
  1267. -moz-user-select: none;
  1268. -ms-user-select: none;
  1269. user-select: none;
  1270. }
  1271. .togglebutton label {
  1272. cursor: pointer;
  1273. color: rgba(0,0,0, 0.26);
  1274. }
  1275. .form-group.is-focused .togglebutton label {
  1276. color: rgba(0,0,0, 0.26);
  1277. }
  1278. .form-group.is-focused .togglebutton label:hover,
  1279. .form-group.is-focused .togglebutton label:focus {
  1280. color: rgba(0,0,0, .54);
  1281. }
  1282. fieldset[disabled] .form-group.is-focused .togglebutton label {
  1283. color: rgba(0,0,0, 0.26);
  1284. }
  1285. .togglebutton label input[type=checkbox] {
  1286. opacity: 0;
  1287. width: 0;
  1288. height: 0;
  1289. }
  1290. .togglebutton label .toggle {
  1291. text-align: left;
  1292. }
  1293. .togglebutton label .toggle,
  1294. .togglebutton label input[type=checkbox][disabled] + .toggle {
  1295. content: "";
  1296. display: inline-block;
  1297. width: 30px;
  1298. height: 15px;
  1299. background-color: rgba(80, 80, 80, 0.7);
  1300. border-radius: 15px;
  1301. margin-right: 15px;
  1302. -webkit-transition: background 0.3s ease;
  1303. -o-transition: background 0.3s ease;
  1304. transition: background 0.3s ease;
  1305. vertical-align: middle;
  1306. }
  1307. .togglebutton label .toggle:after {
  1308. content: "";
  1309. display: inline-block;
  1310. width: 20px;
  1311. height: 20px;
  1312. background-color: #F1F1F1;
  1313. border-radius: 20px;
  1314. position: relative;
  1315. -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
  1316. box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
  1317. left: -5px;
  1318. top: -2px;
  1319. -webkit-transition: left 0.3s ease, background 0.3s ease, -webkit-box-shadow 0.1s ease;
  1320. -o-transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
  1321. transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
  1322. }
  1323. .togglebutton label input[type=checkbox][disabled] + .toggle:after,
  1324. .togglebutton label input[type=checkbox][disabled]:checked + .toggle:after {
  1325. background-color: #BDBDBD;
  1326. }
  1327. .togglebutton label input[type=checkbox] + .toggle:active:after,
  1328. .togglebutton label input[type=checkbox][disabled] + .toggle:active:after {
  1329. -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
  1330. box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
  1331. }
  1332. .togglebutton label input[type=checkbox]:checked + .toggle:after {
  1333. left: 15px;
  1334. }
  1335. .togglebutton label input[type=checkbox]:checked + .toggle {
  1336. background-color: rgba(0, 150, 136, 0.5);
  1337. }
  1338. .togglebutton label input[type=checkbox]:checked + .toggle:after {
  1339. background-color: #009688;
  1340. }
  1341. .togglebutton label input[type=checkbox]:checked + .toggle:active:after {
  1342. -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 150, 136, 0.1);
  1343. box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 150, 136, 0.1);
  1344. }
  1345. .radio label,
  1346. label.radio-inline {
  1347. cursor: pointer;
  1348. padding-left: 45px;
  1349. position: relative;
  1350. color: rgba(0,0,0, 0.26);
  1351. }
  1352. .form-group.is-focused .radio label,
  1353. .form-group.is-focused label.radio-inline {
  1354. color: rgba(0,0,0, 0.26);
  1355. }
  1356. .form-group.is-focused .radio label:hover,
  1357. .form-group.is-focused label.radio-inline:hover,
  1358. .form-group.is-focused .radio label:focus,
  1359. .form-group.is-focused label.radio-inline:focus {
  1360. color: rgba(0,0,0, .54);
  1361. }
  1362. fieldset[disabled] .form-group.is-focused .radio label,
  1363. fieldset[disabled] .form-group.is-focused label.radio-inline {
  1364. color: rgba(0,0,0, 0.26);
  1365. }
  1366. .radio span,
  1367. label.radio-inline span {
  1368. display: block;
  1369. position: absolute;
  1370. left: 10px;
  1371. top: 2px;
  1372. -webkit-transition-duration: 0.2s;
  1373. -o-transition-duration: 0.2s;
  1374. transition-duration: 0.2s;
  1375. }
  1376. .radio .circle,
  1377. label.radio-inline .circle {
  1378. border: 2px solid rgba(0,0,0, .54);
  1379. height: 15px;
  1380. wid