1
0

checkbox.css 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878
  1. /*!
  2. * # Fomantic-UI - Checkbox
  3. * http://github.com/fomantic/Fomantic-UI/
  4. *
  5. *
  6. * Released under the MIT license
  7. * http://opensource.org/licenses/MIT
  8. *
  9. */
  10. /*******************************
  11. Checkbox
  12. *******************************/
  13. /*--------------
  14. Content
  15. ---------------*/
  16. .ui.checkbox {
  17. position: relative;
  18. display: inline-block;
  19. -webkit-backface-visibility: hidden;
  20. backface-visibility: hidden;
  21. outline: none;
  22. vertical-align: baseline;
  23. font-style: normal;
  24. min-height: 17px;
  25. font-size: 1em;
  26. line-height: 17px;
  27. min-width: 17px;
  28. }
  29. /* HTML Checkbox */
  30. .ui.checkbox input[type="checkbox"],
  31. .ui.checkbox input[type="radio"] {
  32. cursor: pointer;
  33. position: absolute;
  34. top: 0;
  35. left: 0;
  36. opacity: 0 !important;
  37. outline: none;
  38. z-index: 3;
  39. width: 17px;
  40. height: 17px;
  41. }
  42. /*--------------
  43. Box
  44. ---------------*/
  45. .ui.checkbox .box,
  46. .ui.checkbox label {
  47. cursor: auto;
  48. position: relative;
  49. display: block;
  50. padding-left: 1.85714em;
  51. outline: none;
  52. font-size: 1em;
  53. }
  54. .ui.checkbox .box:before,
  55. .ui.checkbox label:before {
  56. position: absolute;
  57. top: 0;
  58. left: 0;
  59. width: 17px;
  60. height: 17px;
  61. content: '';
  62. background: #FFFFFF;
  63. border-radius: 0.21428571rem;
  64. -webkit-transition: border 0.1s ease, opacity 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease;
  65. transition: border 0.1s ease, opacity 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease;
  66. transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
  67. transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease;
  68. border: 1px solid #D4D4D5;
  69. }
  70. /*--------------
  71. Checkmark
  72. ---------------*/
  73. .ui.checkbox .box:after,
  74. .ui.checkbox label:after {
  75. position: absolute;
  76. font-size: 14px;
  77. top: 0;
  78. left: 0;
  79. width: 17px;
  80. height: 17px;
  81. text-align: center;
  82. opacity: 0;
  83. color: #AAAAAA;
  84. -webkit-transition: border 0.1s ease, opacity 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease;
  85. transition: border 0.1s ease, opacity 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease;
  86. transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
  87. transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease;
  88. }
  89. /*--------------
  90. Label
  91. ---------------*/
  92. /* Inside */
  93. .ui.checkbox label,
  94. .ui.checkbox + label {
  95. color: #AAAAAA;
  96. -webkit-transition: color 0.1s ease;
  97. transition: color 0.1s ease;
  98. }
  99. /* Outside */
  100. .ui.checkbox + label {
  101. vertical-align: middle;
  102. }
  103. /*******************************
  104. States
  105. *******************************/
  106. /*--------------
  107. Hover
  108. ---------------*/
  109. .ui.checkbox .box:hover::before,
  110. .ui.checkbox label:hover::before {
  111. background: #FFFFFF;
  112. border-color: rgba(34, 36, 38, 0.35);
  113. }
  114. .ui.checkbox label:hover,
  115. .ui.checkbox + label:hover {
  116. color: rgba(0, 0, 0, 0.8);
  117. }
  118. /*--------------
  119. Down
  120. ---------------*/
  121. .ui.checkbox .box:active::before,
  122. .ui.checkbox label:active::before {
  123. background: #F9FAFB;
  124. border-color: rgba(34, 36, 38, 0.35);
  125. }
  126. .ui.checkbox .box:active::after,
  127. .ui.checkbox label:active::after {
  128. color: rgba(0, 0, 0, 0.95);
  129. }
  130. .ui.checkbox input:active ~ label {
  131. color: rgba(0, 0, 0, 0.95);
  132. }
  133. /*--------------
  134. Focus
  135. ---------------*/
  136. .ui.checkbox input:focus ~ .box:before,
  137. .ui.checkbox input:focus ~ label:before {
  138. background: #FFFFFF;
  139. border-color: #96C8DA;
  140. }
  141. .ui.checkbox input:focus ~ .box:after,
  142. .ui.checkbox input:focus ~ label:after {
  143. color: rgba(0, 0, 0, 0.95);
  144. }
  145. .ui.checkbox input:focus ~ label {
  146. color: rgba(0, 0, 0, 0.95);
  147. }
  148. /*--------------
  149. Active
  150. ---------------*/
  151. .ui.checkbox input:checked ~ .box:before,
  152. .ui.checkbox input:checked ~ label:before {
  153. background: #FFFFFF;
  154. border-color: rgba(34, 36, 38, 0.35);
  155. }
  156. .ui.checkbox input:checked ~ .box:after,
  157. .ui.checkbox input:checked ~ label:after {
  158. opacity: 1;
  159. color: rgba(0, 0, 0, 0.95);
  160. }
  161. /*--------------
  162. Indeterminate
  163. ---------------*/
  164. .ui.checkbox input:not([type=radio]):indeterminate ~ .box:before,
  165. .ui.checkbox input:not([type=radio]):indeterminate ~ label:before {
  166. background: #FFFFFF;
  167. border-color: rgba(34, 36, 38, 0.35);
  168. }
  169. .ui.checkbox input:not([type=radio]):indeterminate ~ .box:after,
  170. .ui.checkbox input:not([type=radio]):indeterminate ~ label:after {
  171. opacity: 1;
  172. color: rgba(0, 0, 0, 0.95);
  173. }
  174. .ui.indeterminate.toggle.checkbox input:not([type=radio]):indeterminate ~ label:before {
  175. background: rgba(0, 0, 0, 0.15);
  176. }
  177. .ui.indeterminate.toggle.checkbox input:not([type=radio]) ~ label:after {
  178. left: 1.075rem;
  179. }
  180. /*--------------
  181. Active Focus
  182. ---------------*/
  183. .ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:before,
  184. .ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:before,
  185. .ui.checkbox input:checked:focus ~ .box:before,
  186. .ui.checkbox input:checked:focus ~ label:before {
  187. background: #FFFFFF;
  188. border-color: #96C8DA;
  189. }
  190. .ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:after,
  191. .ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:after,
  192. .ui.checkbox input:checked:focus ~ .box:after,
  193. .ui.checkbox input:checked:focus ~ label:after {
  194. color: rgba(0, 0, 0, 0.95);
  195. }
  196. /*--------------
  197. Read-Only
  198. ---------------*/
  199. .ui.read-only.checkbox,
  200. .ui.read-only.checkbox label {
  201. cursor: default;
  202. }
  203. /*--------------
  204. Disabled
  205. ---------------*/
  206. .ui.disabled.checkbox .box:after,
  207. .ui.disabled.checkbox label,
  208. .ui.checkbox input[disabled] ~ .box:after,
  209. .ui.checkbox input[disabled] ~ label {
  210. cursor: default !important;
  211. opacity: 0.5;
  212. color: #000000;
  213. }
  214. /*--------------
  215. Hidden
  216. ---------------*/
  217. /* Initialized checkbox moves input below element
  218. to prevent manually triggering */
  219. .ui.checkbox input.hidden {
  220. z-index: -1;
  221. }
  222. /* Selectable Label */
  223. .ui.checkbox input.hidden + label {
  224. cursor: pointer;
  225. -webkit-user-select: none;
  226. -moz-user-select: none;
  227. -ms-user-select: none;
  228. user-select: none;
  229. }
  230. /*******************************
  231. Types
  232. *******************************/
  233. /*--------------
  234. Radio
  235. ---------------*/
  236. .ui.radio.checkbox {
  237. min-height: 15px;
  238. }
  239. .ui.radio.checkbox .box,
  240. .ui.radio.checkbox label {
  241. padding-left: 1.85714em;
  242. }
  243. /* Box */
  244. .ui.radio.checkbox .box:before,
  245. .ui.radio.checkbox label:before {
  246. content: '';
  247. -webkit-transform: none;
  248. transform: none;
  249. width: 15px;
  250. height: 15px;
  251. border-radius: 500rem;
  252. top: 1px;
  253. left: 0;
  254. }
  255. /* Bullet */
  256. .ui.radio.checkbox .box:after,
  257. .ui.radio.checkbox label:after {
  258. border: none;
  259. content: '' !important;
  260. width: 15px;
  261. height: 15px;
  262. line-height: 15px;
  263. }
  264. /* Radio Checkbox */
  265. .ui.radio.checkbox .box:after,
  266. .ui.radio.checkbox label:after {
  267. top: 1px;
  268. left: 0;
  269. width: 15px;
  270. height: 15px;
  271. border-radius: 500rem;
  272. -webkit-transform: scale(0.46666667);
  273. transform: scale(0.46666667);
  274. background-color: #AAAAAA;
  275. }
  276. /* Focus */
  277. .ui.radio.checkbox input:focus ~ .box:before,
  278. .ui.radio.checkbox input:focus ~ label:before {
  279. background-color: #FFFFFF;
  280. }
  281. .ui.radio.checkbox input:focus ~ .box:after,
  282. .ui.radio.checkbox input:focus ~ label:after {
  283. background-color: rgba(0, 0, 0, 0.95);
  284. }
  285. /* Indeterminate */
  286. .ui.radio.checkbox input:indeterminate ~ .box:after,
  287. .ui.radio.checkbox input:indeterminate ~ label:after {
  288. opacity: 0;
  289. }
  290. /* Active */
  291. .ui.radio.checkbox input:checked ~ .box:before,
  292. .ui.radio.checkbox input:checked ~ label:before {
  293. background-color: #FFFFFF;
  294. }
  295. .ui.radio.checkbox input:checked ~ .box:after,
  296. .ui.radio.checkbox input:checked ~ label:after {
  297. background-color: rgba(0, 0, 0, 0.95);
  298. }
  299. /* Active Focus */
  300. .ui.radio.checkbox input:focus:checked ~ .box:before,
  301. .ui.radio.checkbox input:focus:checked ~ label:before {
  302. background-color: #FFFFFF;
  303. }
  304. .ui.radio.checkbox input:focus:checked ~ .box:after,
  305. .ui.radio.checkbox input:focus:checked ~ label:after {
  306. background-color: rgba(0, 0, 0, 0.95);
  307. }
  308. /*--------------
  309. Slider
  310. ---------------*/
  311. .ui.slider.checkbox {
  312. min-height: 1.25rem;
  313. }
  314. /* Input */
  315. .ui.slider.checkbox input {
  316. width: 3.5rem;
  317. height: 1.25rem;
  318. }
  319. /* Label */
  320. .ui.slider.checkbox .box,
  321. .ui.slider.checkbox label {
  322. padding-left: 4.5rem;
  323. line-height: 1rem;
  324. color: rgba(0, 0, 0, 0.4);
  325. }
  326. /* Line */
  327. .ui.slider.checkbox .box:before,
  328. .ui.slider.checkbox label:before {
  329. display: block;
  330. position: absolute;
  331. content: '';
  332. -webkit-transform: none;
  333. transform: none;
  334. border: none !important;
  335. left: 0;
  336. z-index: 1;
  337. top: 0.4rem;
  338. background-color: rgba(0, 0, 0, 0.05);
  339. width: 3.5rem;
  340. height: 0.21428571rem;
  341. border-radius: 500rem;
  342. -webkit-transition: background 0.3s ease;
  343. transition: background 0.3s ease;
  344. }
  345. /* Handle */
  346. .ui.slider.checkbox .box:after,
  347. .ui.slider.checkbox label:after {
  348. background: #FFFFFF -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
  349. background: #FFFFFF -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  350. background: #FFFFFF linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  351. position: absolute;
  352. content: '' !important;
  353. opacity: 1;
  354. z-index: 2;
  355. border: none;
  356. -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
  357. box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
  358. width: 1.5rem;
  359. height: 1.5rem;
  360. top: -0.25rem;
  361. left: 0;
  362. -webkit-transform: none;
  363. transform: none;
  364. border-radius: 500rem;
  365. -webkit-transition: left 0.3s ease;
  366. transition: left 0.3s ease;
  367. }
  368. /* Focus */
  369. .ui.slider.checkbox input:focus ~ .box:before,
  370. .ui.slider.checkbox input:focus ~ label:before {
  371. background-color: rgba(0, 0, 0, 0.15);
  372. border: none;
  373. }
  374. /* Hover */
  375. .ui.slider.checkbox .box:hover,
  376. .ui.slider.checkbox label:hover {
  377. color: rgba(0, 0, 0, 0.8);
  378. }
  379. .ui.slider.checkbox .box:hover::before,
  380. .ui.slider.checkbox label:hover::before {
  381. background: rgba(0, 0, 0, 0.15);
  382. }
  383. /* Active */
  384. .ui.slider.checkbox input:checked ~ .box,
  385. .ui.slider.checkbox input:checked ~ label {
  386. color: rgba(0, 0, 0, 0.95) !important;
  387. }
  388. .ui.slider.checkbox input:checked ~ .box:before,
  389. .ui.slider.checkbox input:checked ~ label:before {
  390. background-color: #545454 !important;
  391. }
  392. .ui.slider.checkbox input:checked ~ .box:after,
  393. .ui.slider.checkbox input:checked ~ label:after {
  394. left: 2rem;
  395. }
  396. /* Active Focus */
  397. .ui.slider.checkbox input:focus:checked ~ .box,
  398. .ui.slider.checkbox input:focus:checked ~ label {
  399. color: rgba(0, 0, 0, 0.95) !important;
  400. }
  401. .ui.slider.checkbox input:focus:checked ~ .box:before,
  402. .ui.slider.checkbox input:focus:checked ~ label:before {
  403. background-color: #000000 !important;
  404. }
  405. /*--------------
  406. Toggle
  407. ---------------*/
  408. .ui.toggle.checkbox {
  409. min-height: 1.5rem;
  410. }
  411. /* Input */
  412. .ui.toggle.checkbox input {
  413. width: 3.5rem;
  414. height: 1.5rem;
  415. }
  416. /* Label */
  417. .ui.toggle.checkbox .box,
  418. .ui.toggle.checkbox label {
  419. min-height: 1.5rem;
  420. padding-left: 4.5rem;
  421. color: #AAAAAA;
  422. }
  423. .ui.toggle.checkbox label {
  424. padding-top: 0.15em;
  425. }
  426. /* Switch */
  427. .ui.toggle.checkbox .box:before,
  428. .ui.toggle.checkbox label:before {
  429. display: block;
  430. position: absolute;
  431. content: '';
  432. z-index: 1;
  433. -webkit-transform: none;
  434. transform: none;
  435. border: none;
  436. top: 0;
  437. background: rgba(0, 0, 0, 0.05);
  438. -webkit-box-shadow: none;
  439. box-shadow: none;
  440. width: 3.5rem;
  441. height: 1.5rem;
  442. border-radius: 500rem;
  443. }
  444. /* Handle */
  445. .ui.toggle.checkbox .box:after,
  446. .ui.toggle.checkbox label:after {
  447. background: #FFFFFF -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
  448. background: #FFFFFF -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  449. background: #FFFFFF linear-gradient(transparent, rgba(0, 0, 0, 0.05));
  450. position: absolute;
  451. content: '' !important;
  452. opacity: 1;
  453. z-index: 2;
  454. border: none;
  455. -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
  456. box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
  457. width: 1.5rem;
  458. height: 1.5rem;
  459. top: 0;
  460. left: 0;
  461. border-radius: 500rem;
  462. -webkit-transition: background 0.3s ease, left 0.3s ease;
  463. transition: background 0.3s ease, left 0.3s ease;
  464. }
  465. .ui.toggle.checkbox input ~ .box:after,
  466. .ui.toggle.checkbox input ~ label:after {
  467. left: -0.05rem;
  468. -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
  469. box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
  470. }
  471. /* Focus */
  472. .ui.toggle.checkbox input:focus ~ .box:before,
  473. .ui.toggle.checkbox input:focus ~ label:before {
  474. background-color: rgba(0, 0, 0, 0.15);
  475. border: none;
  476. }
  477. /* Hover */
  478. .ui.toggle.checkbox .box:hover::before,
  479. .ui.toggle.checkbox label:hover::before {
  480. background-color: rgba(0, 0, 0, 0.15);
  481. border: none;
  482. }
  483. /* Active */
  484. .ui.toggle.checkbox input:checked ~ .box,
  485. .ui.toggle.checkbox input:checked ~ label {
  486. color: rgba(0, 0, 0, 0.95) !important;
  487. }
  488. .ui.toggle.checkbox input:checked ~ .box:before,
  489. .ui.toggle.checkbox input:checked ~ label:before {
  490. background-color: #2185D0 !important;
  491. }
  492. .ui.toggle.checkbox input:checked ~ .box:after,
  493. .ui.toggle.checkbox input:checked ~ label:after {
  494. left: 2.15rem;
  495. -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
  496. box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
  497. }
  498. /* Active Focus */
  499. .ui.toggle.checkbox input:focus:checked ~ .box,
  500. .ui.toggle.checkbox input:focus:checked ~ label {
  501. color: rgba(0, 0, 0, 0.95) !important;
  502. }
  503. .ui.toggle.checkbox input:focus:checked ~ .box:before,
  504. .ui.toggle.checkbox input:focus:checked ~ label:before {
  505. background-color: #0d71bb !important;
  506. }
  507. /*******************************
  508. Variations
  509. *******************************/
  510. /*--------------
  511. Fitted
  512. ---------------*/
  513. .ui.fitted.checkbox .box,
  514. .ui.fitted.checkbox label {
  515. padding-left: 0 !important;
  516. }
  517. .ui.fitted.toggle.checkbox {
  518. width: 3.5rem;
  519. }
  520. .ui.fitted.slider.checkbox {
  521. width: 3.5rem;
  522. }
  523. /*--------------
  524. Inverted
  525. ---------------*/
  526. .ui.inverted.checkbox label,
  527. .ui.inverted.checkbox + label {
  528. color: rgba(255, 255, 255, 0.9) !important;
  529. }
  530. /* Hover */
  531. .ui.inverted.checkbox .box:hover,
  532. .ui.inverted.checkbox label:hover {
  533. color: #ffffff !important;
  534. }
  535. .ui.inverted.checkbox .box:hover::before,
  536. .ui.inverted.checkbox label:hover::before {
  537. border-color: rgba(34, 36, 38, 0.5);
  538. }
  539. /*Slider Label */
  540. .ui.inverted.slider.checkbox .box,
  541. .ui.inverted.slider.checkbox label {
  542. color: rgba(255, 255, 255, 0.5);
  543. }
  544. /* Slider Line */
  545. .ui.inverted.slider.checkbox .box:before,
  546. .ui.inverted.slider.checkbox label:before {
  547. background-color: rgba(255, 255, 255, 0.5) !important;
  548. }
  549. /* Slider Hover */
  550. .ui.inverted.slider.checkbox .box:hover::before,
  551. .ui.inverted.slider.checkbox label:hover::before {
  552. background: rgba(255, 255, 255, 0.7) !important;
  553. }
  554. /* Slider Active */
  555. .ui.inverted.slider.checkbox input:checked ~ .box,
  556. .ui.inverted.slider.checkbox input:checked ~ label {
  557. color: #ffffff !important;
  558. }
  559. .ui.inverted.slider.checkbox input:checked ~ .box:before,
  560. .ui.inverted.slider.checkbox input:checked ~ label:before {
  561. background-color: rgba(255, 255, 255, 0.8) !important;
  562. }
  563. /* Slider Active Focus */
  564. .ui.inverted.slider.checkbox input:focus:checked ~ .box,
  565. .ui.inverted.slider.checkbox input:focus:checked ~ label {
  566. color: #ffffff !important;
  567. }
  568. .ui.inverted.slider.checkbox input:focus:checked ~ .box:before,
  569. .ui.inverted.slider.checkbox input:focus:checked ~ label:before {
  570. background-color: rgba(255, 255, 255, 0.8) !important;
  571. }
  572. /* Toggle Switch */
  573. .ui.inverted.toggle.checkbox .box:before,
  574. .ui.inverted.toggle.checkbox label:before {
  575. background-color: rgba(255, 255, 255, 0.9) !important;
  576. }
  577. /* Toggle Hover */
  578. .ui.inverted.toggle.checkbox .box:hover::before,
  579. .ui.inverted.toggle.checkbox label:hover::before {
  580. background: #ffffff !important;
  581. }
  582. /* Toggle Active */
  583. .ui.inverted.toggle.checkbox input:checked ~ .box,
  584. .ui.inverted.toggle.checkbox input:checked ~ label {
  585. color: #ffffff !important;
  586. }
  587. .ui.inverted.toggle.checkbox input:checked ~ .box:before,
  588. .ui.inverted.toggle.checkbox input:checked ~ label:before {
  589. background-color: #2185D0 !important;
  590. }
  591. /* Toggle Active Focus */
  592. .ui.inverted.toggle.checkbox input:focus:checked ~ .box,
  593. .ui.inverted.toggle.checkbox input:focus:checked ~ label {
  594. color: #ffffff !important;
  595. }
  596. .ui.inverted.toggle.checkbox input:focus:checked ~ .box:before,
  597. .ui.inverted.toggle.checkbox input:focus:checked ~ label:before {
  598. background-color: #0d71bb !important;
  599. }
  600. /*--------------------
  601. Size
  602. ---------------------*/
  603. .ui.mini.checkbox {
  604. font-size: 0.78571429em;
  605. }
  606. .ui.tiny.checkbox {
  607. font-size: 0.85714286em;
  608. }
  609. .ui.small.checkbox {
  610. font-size: 0.92857143em;
  611. }
  612. .ui.large.checkbox {
  613. font-size: 1.14285714em;
  614. }
  615. .ui.large.form .checkbox:not(.slider):not(.toggle):not(.radio) .box:after,
  616. .ui.large.checkbox:not(.slider):not(.toggle):not(.radio) .box:after,
  617. .ui.large.form .checkbox:not(.slider):not(.toggle):not(.radio) .box:before,
  618. .ui.large.checkbox:not(.slider):not(.toggle):not(.radio) .box:before,
  619. .ui.large.form .checkbox:not(.slider):not(.toggle):not(.radio) label:after,
  620. .ui.large.checkbox:not(.slider):not(.toggle):not(.radio) label:after,
  621. .ui.large.form .checkbox:not(.slider):not(.toggle):not(.radio) label:before,
  622. .ui.large.checkbox:not(.slider):not(.toggle):not(.radio) label:before {
  623. -webkit-transform: scale(1.14285714);
  624. transform: scale(1.14285714);
  625. -webkit-transform-origin: left;
  626. transform-origin: left;
  627. }
  628. .ui.large.form .checkbox.radio .box:before,
  629. .ui.large.checkbox.radio .box:before,
  630. .ui.large.form .checkbox.radio label:before,
  631. .ui.large.checkbox.radio label:before {
  632. -webkit-transform: scale(1.14285714);
  633. transform: scale(1.14285714);
  634. -webkit-transform-origin: left;
  635. transform-origin: left;
  636. }
  637. .ui.large.form .checkbox.radio .box:after,
  638. .ui.large.checkbox.radio .box:after,
  639. .ui.large.form .checkbox.radio label:after,
  640. .ui.large.checkbox.radio label:after {
  641. -webkit-transform: scale(0.57142857);
  642. transform: scale(0.57142857);
  643. -webkit-transform-origin: left;
  644. transform-origin: left;
  645. left: 0.33571429em;
  646. }
  647. .ui.big.checkbox {
  648. font-size: 1.28571429em;
  649. }
  650. .ui.big.form .checkbox:not(.slider):not(.toggle):not(.radio) .box:after,
  651. .ui.big.checkbox:not(.slider):not(.toggle):not(.radio) .box:after,
  652. .ui.big.form .checkbox:not(.slider):not(.toggle):not(.radio) .box:before,
  653. .ui.big.checkbox:not(.slider):not(.toggle):not(.radio) .box:before,
  654. .ui.big.form .checkbox:not(.slider):not(.toggle):not(.radio) label:after,
  655. .ui.big.checkbox:not(.slider):not(.toggle):not(.radio) label:after,
  656. .ui.big.form .checkbox:not(.slider):not(.toggle):not(.radio) label:before,
  657. .ui.big.checkbox:not(.slider):not(.toggle):not(.radio) label:before {
  658. -webkit-transform: scale(1.28571429);
  659. transform: scale(1.28571429);
  660. -webkit-transform-origin: left;
  661. transform-origin: left;
  662. }
  663. .ui.big.form .checkbox.radio .box:before,
  664. .ui.big.checkbox.radio .box:before,
  665. .ui.big.form .checkbox.radio label:before,
  666. .ui.big.checkbox.radio label:before {
  667. -webkit-transform: scale(1.28571429);
  668. transform: scale(1.28571429);
  669. -webkit-transform-origin: left;
  670. transform-origin: left;
  671. }
  672. .ui.big.form .checkbox.radio .box:after,
  673. .ui.big.checkbox.radio .box:after,
  674. .ui.big.form .checkbox.radio label:after,
  675. .ui.big.checkbox.radio label:after {
  676. -webkit-transform: scale(0.64285714);
  677. transform: scale(0.64285714);
  678. -webkit-transform-origin: left;
  679. transform-origin: left;
  680. left: 0.37142857em;
  681. }
  682. .ui.huge.checkbox {
  683. font-size: 1.42857143em;
  684. }
  685. .ui.huge.form .checkbox:not(.slider):not(.toggle):not(.radio) .box:after,
  686. .ui.huge.checkbox:not(.slider):not(.toggle):not(.radio) .box:after,
  687. .ui.huge.form .checkbox:not(.slider):not(.toggle):not(.radio) .box:before,
  688. .ui.huge.checkbox:not(.slider):not(.toggle):not(.radio) .box:before,
  689. .ui.huge.form .checkbox:not(.slider):not(.toggle):not(.radio) label:after,
  690. .ui.huge.checkbox:not(.slider):not(.toggle):not(.radio) label:after,
  691. .ui.huge.form .checkbox:not(.slider):not(.toggle):not(.radio) label:before,
  692. .ui.huge.checkbox:not(.slider):not(.toggle):not(.radio) label:before {
  693. -webkit-transform: scale(1.42857143);
  694. transform: scale(1.42857143);
  695. -webkit-transform-origin: left;
  696. transform-origin: left;
  697. }
  698. .ui.huge.form .checkbox.radio .box:before,
  699. .ui.huge.checkbox.radio .box:before,
  700. .ui.huge.form .checkbox.radio label:before,
  701. .ui.huge.checkbox.radio label:before {
  702. -webkit-transform: scale(1.42857143);
  703. transform: scale(1.42857143);
  704. -webkit-transform-origin: left;
  705. transform-origin: left;
  706. }
  707. .ui.huge.form .checkbox.radio .box:after,
  708. .ui.huge.checkbox.radio .box:after,
  709. .ui.huge.form .checkbox.radio label:after,
  710. .ui.huge.checkbox.radio label:after {
  711. -webkit-transform: scale(0.71428571);
  712. transform: scale(0.71428571);
  713. -webkit-transform-origin: left;
  714. transform-origin: left;
  715. left: 0.40714286em;
  716. }
  717. .ui.massive.checkbox {
  718. font-size: 1.71428571em;
  719. }
  720. .ui.massive.form .checkbox:not(.slider):not(.toggle):not(.radio) .box:after,
  721. .ui.massive.checkbox:not(.slider):not(.toggle):not(.radio) .box:after,
  722. .ui.massive.form .checkbox:not(.slider):not(.toggle):not(.radio) .box:before,
  723. .ui.massive.checkbox:not(.slider):not(.toggle):not(.radio) .box:before,
  724. .ui.massive.form .checkbox:not(.slider):not(.toggle):not(.radio) label:after,
  725. .ui.massive.checkbox:not(.slider):not(.toggle):not(.radio) label:after,
  726. .ui.massive.form .checkbox:not(.slider):not(.toggle):not(.radio) label:before,
  727. .ui.massive.checkbox:not(.slider):not(.toggle):not(.radio) label:before {
  728. -webkit-transform: scale(1.71428571);
  729. transform: scale(1.71428571);
  730. -webkit-transform-origin: left;
  731. transform-origin: left;
  732. }
  733. .ui.massive.form .checkbox.radio .box:before,
  734. .ui.massive.checkbox.radio .box:before,
  735. .ui.massive.form .checkbox.radio label:before,
  736. .ui.massive.checkbox.radio label:before {
  737. -webkit-transform: scale(1.71428571);
  738. transform: scale(1.71428571);
  739. -webkit-transform-origin: left;
  740. transform-origin: left;
  741. }
  742. .ui.massive.form .checkbox.radio .box:after,
  743. .ui.massive.checkbox.radio .box:after,
  744. .ui.massive.form .checkbox.radio label:after,
  745. .ui.massive.checkbox.radio label:after {
  746. -webkit-transform: scale(0.85714286);
  747. transform: scale(0.85714286);
  748. -webkit-transform-origin: left;
  749. transform-origin: left;
  750. left: 0.47857143em;
  751. }
  752. /*******************************
  753. Theme Overrides
  754. *******************************/
  755. @font-face {
  756. font-family: 'Checkbox';
  757. src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBD8AAAC8AAAAYGNtYXAYVtCJAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zn4huwUAAAF4AAABYGhlYWQGPe1ZAAAC2AAAADZoaGVhB30DyAAAAxAAAAAkaG10eBBKAEUAAAM0AAAAHGxvY2EAmgESAAADUAAAABBtYXhwAAkALwAAA2AAAAAgbmFtZSC8IugAAAOAAAABknBvc3QAAwAAAAAFFAAAACAAAwMTAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADoAgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6AL//f//AAAAAAAg6AD//f//AAH/4xgEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAEUAUQO7AvgAGgAAARQHAQYjIicBJjU0PwE2MzIfAQE2MzIfARYVA7sQ/hQQFhcQ/uMQEE4QFxcQqAF2EBcXEE4QAnMWEP4UEBABHRAXFhBOEBCoAXcQEE4QFwAAAAABAAABbgMlAkkAFAAAARUUBwYjISInJj0BNDc2MyEyFxYVAyUQEBf9SRcQEBAQFwK3FxAQAhJtFxAQEBAXbRcQEBAQFwAAAAABAAAASQMlA24ALAAAARUUBwYrARUUBwYrASInJj0BIyInJj0BNDc2OwE1NDc2OwEyFxYdATMyFxYVAyUQEBfuEBAXbhYQEO4XEBAQEBfuEBAWbhcQEO4XEBACEm0XEBDuFxAQEBAX7hAQF20XEBDuFxAQEBAX7hAQFwAAAQAAAAIAAHRSzT9fDzz1AAsEAAAAAADRsdR3AAAAANGx1HcAAAAAA7sDbgAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAADuwABAAAAAAAAAAAAAAAAAAAABwQAAAAAAAAAAAAAAAIAAAAEAABFAyUAAAMlAAAAAAAAAAoAFAAeAE4AcgCwAAEAAAAHAC0AAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAIAAAAAQAAAAAAAgAHAGkAAQAAAAAAAwAIADkAAQAAAAAABAAIAH4AAQAAAAAABQALABgAAQAAAAAABgAIAFEAAQAAAAAACgAaAJYAAwABBAkAAQAQAAgAAwABBAkAAgAOAHAAAwABBAkAAwAQAEEAAwABBAkABAAQAIYAAwABBAkABQAWACMAAwABBAkABgAQAFkAAwABBAkACgA0ALBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhWZXJzaW9uIDIuMABWAGUAcgBzAGkAbwBuACAAMgAuADBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhDaGVja2JveABDAGgAZQBjAGsAYgBvAHhSZWd1bGFyAFIAZQBnAHUAbABhAHJDaGVja2JveABDAGgAZQBjAGsAYgBvAHhGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype');
  758. }
  759. /* Checkmark */
  760. .ui.checkbox label:after,
  761. .ui.checkbox .box:after {
  762. font-family: 'Checkbox';
  763. }
  764. /* Checked */
  765. .ui.checkbox input:checked ~ .box:after,
  766. .ui.checkbox input:checked ~ label:after {
  767. content: '\e800';
  768. }
  769. /* Indeterminate */
  770. .ui.checkbox input:indeterminate ~ .box:after,
  771. .ui.checkbox input:indeterminate ~ label:after {
  772. font-size: 12px;
  773. content: '\e801';
  774. }
  775. /* UTF Reference
  776. .check:before { content: '\e800'; }
  777. .dash:before { content: '\e801'; }
  778. .plus:before { content: '\e802'; }
  779. */
  780. /*******************************
  781. Site Overrides
  782. *******************************/