checkbox.css 20 KB

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