You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

485 lines
19 KiB

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. /*
  2. * # Semantic UI
  3. * https://github.com/Semantic-Org/Semantic-UI
  4. * http://www.semantic-ui.com/
  5. *
  6. * Copyright 2014 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Checkbox
  13. *******************************/
  14. /*--------------
  15. Content
  16. ---------------*/
  17. .ui.checkbox {
  18. position: relative;
  19. display: inline-block;
  20. height: 17px;
  21. font-size: 1rem;
  22. line-height: 15px;
  23. min-width: 17px;
  24. -webkit-backface-visibility: hidden;
  25. backface-visibility: hidden;
  26. outline: none;
  27. vertical-align: middle;
  28. }
  29. .ui.checkbox input {
  30. position: absolute;
  31. top: 0px;
  32. left: 0px;
  33. opacity: 0 !important;
  34. outline: none;
  35. z-index: -1;
  36. }
  37. /*--------------
  38. Box
  39. ---------------*/
  40. .ui.checkbox .box,
  41. .ui.checkbox label {
  42. display: block;
  43. cursor: pointer;
  44. padding-left: 1.75em;
  45. outline: none;
  46. }
  47. .ui.checkbox label {
  48. font-size: 1em;
  49. }
  50. .ui.checkbox .box:before,
  51. .ui.checkbox label:before {
  52. position: absolute;
  53. line-height: 1;
  54. width: 17px;
  55. height: 17px;
  56. top: 0em;
  57. left: 0em;
  58. content: '';
  59. background: #ffffff;
  60. border-radius: 0.25em;
  61. -webkit-transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
  62. transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
  63. border: 1px solid #d4d4d5;
  64. }
  65. /*--------------
  66. Checkmark
  67. ---------------*/
  68. .ui.checkbox .box:after,
  69. .ui.checkbox label:after {
  70. position: absolute;
  71. top: 0px;
  72. left: 0px;
  73. line-height: 17px;
  74. width: 17px;
  75. height: 17px;
  76. text-align: center;
  77. opacity: 0;
  78. color: rgba(0, 0, 0, 0.8);
  79. -webkit-transition: all 0.1s ease;
  80. transition: all 0.1s ease;
  81. }
  82. /*--------------
  83. Label
  84. ---------------*/
  85. /* Inside */
  86. .ui.checkbox label,
  87. .ui.checkbox + label {
  88. cursor: pointer;
  89. color: rgba(0, 0, 0, 0.8);
  90. -webkit-transition: color 0.2s ease;
  91. transition: color 0.2s ease;
  92. -webkit-user-select: none;
  93. -moz-user-select: none;
  94. -ms-user-select: none;
  95. user-select: none;
  96. }
  97. /* Outside */
  98. .ui.checkbox + label {
  99. vertical-align: middle;
  100. }
  101. /*******************************
  102. States
  103. *******************************/
  104. /*--------------
  105. Hover
  106. ---------------*/
  107. .ui.checkbox .box:hover::before,
  108. .ui.checkbox label:hover::before {
  109. background: #ffffff;
  110. border: 1px solid rgba(39, 41, 43, 0.3);
  111. }
  112. .ui.checkbox label:hover,
  113. .ui.checkbox + label:hover {
  114. color: rgba(0, 0, 0, 0.8);
  115. }
  116. /*--------------
  117. Down
  118. ---------------*/
  119. .ui.checkbox .box:active::before,
  120. .ui.checkbox label:active::before {
  121. background: #f5f5f5;
  122. border: 1px solid 1px solid rgba(39, 41, 43, 0.3);
  123. }
  124. .ui.checkbox input:active ~ label {
  125. color: rgba(0, 0, 0, 0.8);
  126. }
  127. /*--------------
  128. Focus
  129. ---------------*/
  130. .ui.checkbox input:focus ~ .box:before,
  131. .ui.checkbox input:focus ~ label:before {
  132. background: #f5f5f5;
  133. border: 1px solid 1px solid rgba(39, 41, 43, 0.3);
  134. }
  135. .ui.checkbox input:focus ~ label {
  136. color: rgba(0, 0, 0, 0.8);
  137. }
  138. /*--------------
  139. Active
  140. ---------------*/
  141. .ui.checkbox input:checked ~ .box:after,
  142. .ui.checkbox input:checked ~ label:after {
  143. opacity: 1;
  144. }
  145. /*--------------
  146. Read-Only
  147. ---------------*/
  148. .ui.read-only.checkbox,
  149. .ui.read-only.checkbox label {
  150. cursor: default;
  151. }
  152. /*--------------
  153. Disabled
  154. ---------------*/
  155. .ui.disabled.checkbox .box:after,
  156. .ui.disabled.checkbox label,
  157. .ui.checkbox input[disabled] ~ .box:after,
  158. .ui.checkbox input[disabled] ~ label {
  159. cursor: default;
  160. opacity: 0.5;
  161. color: #000000;
  162. }
  163. /*******************************
  164. Types
  165. *******************************/
  166. /*--------------
  167. Radio
  168. ---------------*/
  169. .ui.radio.checkbox {
  170. height: 14px;
  171. }
  172. /* Box */
  173. .ui.radio.checkbox .box:before,
  174. .ui.radio.checkbox label:before {
  175. width: 14px;
  176. height: 14px;
  177. border-radius: 500rem;
  178. top: 1px;
  179. left: 0px;
  180. -webkit-transform: none;
  181. -ms-transform: none;
  182. transform: none;
  183. }
  184. /* Circle */
  185. .ui.radio.checkbox .box:after,
  186. .ui.radio.checkbox label:after {
  187. border: none;
  188. width: 14px;
  189. height: 14px;
  190. line-height: 14px;
  191. top: 1px;
  192. left: 0px;
  193. font-size: 9px;
  194. }
  195. /* Radio Checkbox */
  196. .ui.radio.checkbox .box:after,
  197. .ui.radio.checkbox label:after {
  198. width: 14px;
  199. height: 14px;
  200. border-radius: 500rem;
  201. -webkit-transform: scale(0.42857143);
  202. -ms-transform: scale(0.42857143);
  203. transform: scale(0.42857143);
  204. background-color: rgba(0, 0, 0, 0.8);
  205. }
  206. /*--------------
  207. Slider
  208. ---------------*/
  209. .ui.slider.checkbox {
  210. cursor: pointer;
  211. height: 1.25rem;
  212. }
  213. .ui.slider.checkbox .box,
  214. .ui.slider.checkbox label {
  215. padding-left: 4.5rem;
  216. line-height: 1rem;
  217. color: rgba(0, 0, 0, 0.4);
  218. }
  219. /* Line */
  220. .ui.slider.checkbox .box:before,
  221. .ui.slider.checkbox label:before {
  222. cursor: pointer;
  223. display: block;
  224. position: absolute;
  225. content: '';
  226. top: 0.4rem;
  227. left: 0em;
  228. z-index: 1;
  229. border: none !important;
  230. background-color: rgba(0, 0, 0, 0.05);
  231. width: 3.5rem;
  232. height: 0.25rem;
  233. -webkit-transform: none;
  234. -ms-transform: none;
  235. transform: none;
  236. border-radius: 500rem;
  237. -webkit-transition: background 0.3s ease
  238. ;
  239. transition: background 0.3s ease
  240. ;
  241. }
  242. /* Handle */
  243. .ui.slider.checkbox .box:after,
  244. .ui.slider.checkbox label:after {
  245. background: #ffffff -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  246. background: #ffffff linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  247. position: absolute;
  248. content: '';
  249. opacity: 1;
  250. z-index: 2;
  251. border: none;
  252. box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.05), 0px 0px 0px 1px rgba(39, 41, 43, 0.15) inset;
  253. width: 1.5rem;
  254. height: 1.5rem;
  255. top: -0.25rem;
  256. left: 0em;
  257. -webkit-transform: none;
  258. -ms-transform: none;
  259. transform: none;
  260. border-radius: 500rem;
  261. -webkit-transition: left 0.3s ease 0s
  262. ;
  263. transition: left 0.3s ease 0s
  264. ;
  265. }
  266. /* Focus */
  267. .ui.slider.checkbox input:focus ~ .box:before,
  268. .ui.slider.checkbox input:focus ~ label:before {
  269. background-color: rgba(0, 0, 0, 0.1);
  270. border: none;
  271. }
  272. /* Hover */
  273. .ui.slider.checkbox .box:hover,
  274. .ui.slider.checkbox label:hover {
  275. color: rgba(0, 0, 0, 0.8);
  276. }
  277. .ui.slider.checkbox .box:hover::before,
  278. .ui.slider.checkbox label:hover::before {
  279. background: rgba(0, 0, 0, 0.1);
  280. }
  281. /* Active */
  282. .ui.slider.checkbox input:checked ~ .box,
  283. .ui.slider.checkbox input:checked ~ label {
  284. color: rgba(0, 0, 0, 0.8);
  285. }
  286. .ui.slider.checkbox input:checked ~ .box:before,
  287. .ui.slider.checkbox input:checked ~ label:before {
  288. background-color: rgba(0, 0, 0, 0.1);
  289. }
  290. .ui.slider.checkbox input:checked ~ .box:after,
  291. .ui.slider.checkbox input:checked ~ label:after {
  292. left: 2rem;
  293. }
  294. /*--------------
  295. Toggle
  296. ---------------*/
  297. .ui.toggle.checkbox {
  298. cursor: pointer;
  299. height: 1.5rem;
  300. }
  301. .ui.toggle.checkbox .box,
  302. .ui.toggle.checkbox label {
  303. height: 1.5rem;
  304. padding-left: 4.5rem;
  305. line-height: 1.5rem;
  306. color: rgba(0, 0, 0, 0.8);
  307. }
  308. /* Switch */
  309. .ui.toggle.checkbox .box:before,
  310. .ui.toggle.checkbox label:before {
  311. cursor: pointer;
  312. display: block;
  313. position: absolute;
  314. content: '';
  315. top: 0rem;
  316. z-index: 1;
  317. border: none;
  318. background-color: rgba(0, 0, 0, 0.05);
  319. width: 3.5rem;
  320. height: 1.5rem;
  321. border-radius: 500rem;
  322. }
  323. /* Handle */
  324. .ui.toggle.checkbox .box:after,
  325. .ui.toggle.checkbox label:after {
  326. background: #ffffff -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  327. background: #ffffff linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  328. position: absolute;
  329. content: '';
  330. opacity: 1;
  331. z-index: 2;
  332. border: none;
  333. box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.05), 0px 0px 0px 1px rgba(39, 41, 43, 0.15) inset;
  334. width: 1.5rem;
  335. height: 1.5rem;
  336. top: 0rem;
  337. left: 0em;
  338. border-radius: 500rem;
  339. -webkit-transition: background 0.3s ease 0s,
  340. left 0.3s ease 0s
  341. ;
  342. transition: background 0.3s ease 0s,
  343. left 0.3s ease 0s
  344. ;
  345. }
  346. .ui.toggle.checkbox input ~ .box:after,
  347. .ui.toggle.checkbox input ~ label:after {
  348. left: -0.05rem;
  349. }
  350. /* Focus */
  351. .ui.toggle.checkbox input:focus ~ .box:before,
  352. .ui.toggle.checkbox input:focus ~ label:before {
  353. background-color: rgba(0, 0, 0, 0.1);
  354. border: none;
  355. }
  356. /* Hover */
  357. .ui.toggle.checkbox .box:hover::before,
  358. .ui.toggle.checkbox label:hover::before {
  359. background-color: rgba(0, 0, 0, 0.1);
  360. border: none;
  361. }
  362. /* Active */
  363. .ui.toggle.checkbox input:checked ~ .box,
  364. .ui.toggle.checkbox input:checked ~ label {
  365. color: #5bbd72;
  366. }
  367. .ui.toggle.checkbox input:checked ~ .box:before,
  368. .ui.toggle.checkbox input:checked ~ label:before {
  369. background-color: #5bbd72;
  370. }
  371. .ui.toggle.checkbox input:checked ~ .box:after,
  372. .ui.toggle.checkbox input:checked ~ label:after {
  373. left: 2.05rem;
  374. }
  375. /*******************************
  376. Variations
  377. *******************************/
  378. /*--------------
  379. Fitted
  380. ---------------*/
  381. .ui.fitted.checkbox .box,
  382. .ui.fitted.checkbox label {
  383. padding-left: 0em !important;
  384. }
  385. .ui.fitted.toggle.checkbox,
  386. .ui.fitted.toggle.checkbox {
  387. width: 3.5rem;
  388. }
  389. .ui.fitted.slider.checkbox,
  390. .ui.fitted.slider.checkbox {
  391. width: 3.5rem;
  392. }
  393. /*******************************
  394. Theme Overrides
  395. *******************************/
  396. @font-face {
  397. font-family: 'Checkbox';
  398. src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAOAIAAAwBgT1MvMj3hSQEAAADsAAAAVmNtYXDQEhm3AAABRAAAAUpjdnQgBkn/lAAABuwAAAAcZnBnbYoKeDsAAAcIAAAJkWdhc3AAAAAQAAAG5AAAAAhnbHlm32cEdgAAApAAAAC2aGVhZAErPHsAAANIAAAANmhoZWEHUwNNAAADgAAAACRobXR4CykAAAAAA6QAAAAMbG9jYQA4AFsAAAOwAAAACG1heHAApgm8AAADuAAAACBuYW1lzJ0aHAAAA9gAAALNcG9zdK69QJgAAAaoAAAAO3ByZXCSoZr/AAAQnAAAAFYAAQO4AZAABQAIAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA6ADoAQNS/2oAWgMLAE8AAAABAAAAAAAAAAAAAwAAAAMAAAAcAAEAAAAAAEQAAwABAAAAHAAEACgAAAAGAAQAAQACAADoAf//AAAAAOgA//8AABgBAAEAAAAAAAAAAAEGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAADpAKYABUAHEAZDwEAAQFCAAIBAmoAAQABagAAAGEUFxQDEisBFAcBBiInASY0PwE2Mh8BATYyHwEWA6QP/iAQLBD+6g8PTBAsEKQBbhAsEEwPAhYWEP4gDw8BFhAsEEwQEKUBbxAQTBAAAAH//f+xA18DCwAMABJADwABAQpDAAAACwBEFRMCESsBFA4BIi4CPgEyHgEDWXLG6MhuBnq89Lp+AV51xHR0xOrEdHTEAAAAAAEAAAABAADDeRpdXw889QALA+gAAAAAzzWYjQAAAADPNWBN//3/sQOkAwsAAAAIAAIAAAAAAAAAAQAAA1L/agBaA+gAAP/3A6QAAQAAAAAAAAAAAAAAAAAAAAMD6AAAA+gAAANZAAAAAAAAADgAWwABAAAAAwAWAAEAAAAAAAIABgATAG4AAAAtCZEAAAAAAAAAEgDeAAEAAAAAAAAANQAAAAEAAAAAAAEACAA1AAEAAAAAAAIABwA9AAEAAAAAAAMACABEAAEAAAAAAAQACABMAAEAAAAAAAUACwBUAAEAAAAAAAYACABfAAEAAAAAAAoAKwBnAAEAAAAAAAsAEwCSAAMAAQQJAAAAagClAAMAAQQJAAEAEAEPAAMAAQQJAAIADgEfAAMAAQQJAAMAEAEtAAMAAQQJAAQAEAE9AAMAAQQJAAUAFgFNAAMAAQQJAAYAEAFjAAMAAQQJAAoAVgFzAAMAAQQJAAsAJgHJQ29weXJpZ2h0IChDKSAyMDE0IGJ5IG9yaWdpbmFsIGF1dGhvcnMgQCBmb250ZWxsby5jb21mb250ZWxsb1JlZ3VsYXJmb250ZWxsb2ZvbnRlbGxvVmVyc2lvbiAxLjBmb250ZWxsb0dlbmVyYXRlZCBieSBzdmcydHRmIGZyb20gRm9udGVsbG8gcHJvamVjdC5odHRwOi8vZm9udGVsbG8uY29tAEMAbwBwAHkAcgBpAGcAaAB0ACAAKABDACkAIAAyADAAMQA0ACAAYgB5ACAAbwByAGkAZwBpAG4AYQBsACAAYQB1AHQAaABvAHIAcwAgAEAAIABmAG8AbgB0AGUAbABsAG8ALgBjAG8AbQBmAG8AbgB0AGUAbABsAG8AUgBlAGcAdQBsAGEAcgBmAG8AbgB0AGUAbABsAG8AZgBvAG4AdABlAGwAbABvAFYAZQByAHMAaQBvAG4AIAAxAC4AMABmAG8AbgB0AGUAbABsAG8ARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABzAHYAZwAyAHQAdABmACAAZgByAG8AbQAgAEYAbwBuAHQAZQBsAGwAbwAgAHAAcgBvAGoAZQBjAHQALgBoAHQAdABwADoALwAvAGYAbwBuAHQAZQBsAGwAbwAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAQIBAwljaGVja21hcmsGY2lyY2xlAAAAAAEAAf//AA8AAAAAAAAAAAAAAAAAAAAAADIAMgML/7EDC/+xsAAssCBgZi2wASwgZCCwwFCwBCZasARFW1ghIyEbilggsFBQWCGwQFkbILA4UFghsDhZWSCwCkVhZLAoUFghsApFILAwUFghsDBZGyCwwFBYIGYgiophILAKUFhgGyCwIFBYIbAKYBsgsDZQWCGwNmAbYFlZWRuwACtZWSOwAFBYZVlZLbACLCBFILAEJWFkILAFQ1BYsAUjQrAGI0IbISFZsAFgLbADLCMhIyEgZLEFYkIgsAYjQrIKAAIqISCwBkMgiiCKsAArsTAFJYpRWGBQG2FSWVgjWSEgsEBTWLAAKxshsEBZI7AAUFhlWS2wBCywB0MrsgACAENgQi2wBSywByNCIyCwACNCYbCAYrABYLAEKi2wBiwgIEUgsAJFY7ABRWJgRLABYC2wBywgIEUgsAArI7ECBCVgIEWKI2EgZCCwIFBYIbAAG7AwUFiwIBuwQFlZI7AAUFhlWbADJSNhRESwAWAtsAgssQUFRbABYUQtsAkssAFgICCwCUNKsABQWCCwCSNCWbAKQ0qwAFJYILAKI0JZLbAKLCC4BABiILgEAGOKI2GwC0NgIIpgILALI0IjLbALLEtUWLEHAURZJLANZSN4LbAMLEtRWEtTWLEHAURZGyFZJLATZSN4LbANLLEADENVWLEMDEOwAWFCsAorWbAAQ7ACJUKxCQIlQrEKAiVCsAEWIyCwAyVQWLEBAENgsAQlQoqKIIojYbAJKiEjsAFhIIojYbAJKiEbsQEAQ2CwAiVCsAIlYbAJKiFZsAlDR7AKQ0dgsIBiILACRWOwAUViYLEAABMjRLABQ7AAPrIBAQFDYEItsA4ssQAFRVRYALAMI0IgYLABYbUNDQEACwBCQopgsQ0FK7BtKxsiWS2wDyyxAA4rLbAQLLEBDistsBEssQIOKy2wEiyxAw4rLbATLLEEDistsBQssQUOKy2wFSyxBg4rLbAWLLEHDistsBcssQgOKy2wGCyxCQ4rLbAZLLAIK7EABUVUWACwDCNCIGCwAWG1DQ0BAAsAQkKKYLENBSuwbSsbIlktsBossQAZKy2wGyyxARkrLbAcLLECGSstsB0ssQMZKy2wHiyxBBkrLbAfLLEFGSstsCAssQYZKy2wISyxBxkrLbAiLLEIGSstsCMssQkZKy2wJCwgPLABYC2wJSwgYLANYCBDI7ABYEOwAiVhsAFgsCQqIS2wJiywJSuwJSotsCcsICBHICCwAkVjsAFFYmAjYTgjIIpVWCBHICCwAkVjsAFFYmAjYTgbIVktsCgssQAFRVRYALABFrAnKrABFTAbIlktsCkssAgrsQAFRVRYALABFrAnKrABFTAbIlktsCosIDWwAWAtsCssALADRWOwAUVisAArsAJFY7ABRWKwACuwABa0AAAAAABEPiM4sSoBFSotsCwsIDwgRyCwAkVjsAFFYmCwAENhOC2wLSwuFzwtsC4sIDwgRyCwAkVjsAFFYmCwAENhsAFDYzgtsC8ssQIAFiUgLiBHsAAjQrACJUmKikcjRyNhIFhiGyFZsAEjQrIuAQEVFCotsDAssAAWsAQlsAQlRyNHI2GwBkUrZYouIyAgPIo4LbAxLLAAFrAEJbAEJSAuRyNHI2EgsAQjQrAGRSsgsGB
  399. }
  400. .ui.checkbox label:before,
  401. .ui.checkbox .box:before,
  402. .ui.checkbox label:after,
  403. .ui.checkbox .box:after {
  404. font-family: 'Checkbox';
  405. }
  406. .ui.checkbox label:after,
  407. .ui.checkbox .box:after {
  408. content: '\e800';
  409. }
  410. /* UTF Reference
  411. .check:before { content: '\e800'; } ''
  412. .circle:before { content: '\e801'; }
  413. .ok-circled:before { content: '\e806'; }
  414. .ok-circle:before { content: '\e805'; }
  415. .cancel-circle:before { content: '\e807'; }
  416. .cancel-circle-1:before { content: '\e804'; }
  417. .empty-circle:before { content: '\e802'; }
  418. .radio:before { content: '\e803'; }
  419. */
  420. /*******************************
  421. Site Overrides
  422. *******************************/