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.

380 lines
7.1 KiB

  1. /*
  2. * # Semantic - Checkbox
  3. * http://github.com/jlukic/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Checkbox
  13. *******************************/
  14. /*--------------
  15. Standard
  16. ---------------*/
  17. /*--- Content ---*/
  18. .ui.checkbox {
  19. position: relative;
  20. display: inline-block;
  21. min-width: 1em;
  22. height: 1.25em;
  23. line-height: 1em;
  24. outline: none;
  25. vertical-align: middle;
  26. }
  27. .ui.checkbox input {
  28. position: absolute;
  29. top: 0px;
  30. left: 0px;
  31. opacity: 0;
  32. outline: none;
  33. }
  34. /*--- Box ---*/
  35. .ui.checkbox .box,
  36. .ui.checkbox label {
  37. cursor: pointer;
  38. padding-left: 2em;
  39. outline: none;
  40. }
  41. .ui.checkbox .box:before,
  42. .ui.checkbox label:before {
  43. position: absolute;
  44. top: 0em;
  45. line-height: 1;
  46. width: 1em;
  47. height: 1em;
  48. left: 0em;
  49. content: '';
  50. border-radius: 4px;
  51. background: #FFFFFF;
  52. -webkit-transition: background-color 0.3s ease, -webkit-box-shadow 0.3s ease;
  53. transition: background-color 0.3s ease, box-shadow 0.3s ease;
  54. -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
  55. box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
  56. }
  57. /*--- Checkbox ---*/
  58. .ui.checkbox .box:after,
  59. .ui.checkbox label:after {
  60. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  61. filter: alpha(opacity=0);
  62. opacity: 0;
  63. content: '';
  64. position: absolute;
  65. background: transparent;
  66. border: 0.2em solid #333333;
  67. border-top: none;
  68. border-right: none;
  69. -webkit-transform: rotate(-45deg);
  70. -ms-transform: rotate(-45deg);
  71. transform: rotate(-45deg);
  72. }
  73. .ui.checkbox .box:after,
  74. .ui.checkbox label:after {
  75. top: 0.275em;
  76. left: 0.2em;
  77. width: 0.45em;
  78. height: 0.15em;
  79. }
  80. /*--- Inside Label ---*/
  81. .ui.checkbox label {
  82. color: rgba(0, 0, 0, 0.6);
  83. -webkit-transition: color 0.2s ease;
  84. transition: color 0.2s ease;
  85. }
  86. .ui.checkbox label:hover {
  87. color: rgba(0, 0, 0, 0.8);
  88. }
  89. .ui.checkbox input:focus + label {
  90. color: rgba(0, 0, 0, 0.8);
  91. }
  92. /*--- Outside Label ---*/
  93. .ui.checkbox + label {
  94. cursor: pointer;
  95. opacity: 0.85;
  96. vertical-align: middle;
  97. }
  98. .ui.checkbox + label:hover {
  99. opacity: 1;
  100. }
  101. /*******************************
  102. States
  103. *******************************/
  104. /*--- Hover ---*/
  105. .ui.checkbox .box:hover::before,
  106. .ui.checkbox label:hover::before {
  107. -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
  108. box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
  109. }
  110. /*--- Down ---*/
  111. .ui.checkbox .box:active::before,
  112. .ui.checkbox label:active::before {
  113. background-color: #F5F5F5;
  114. }
  115. /*--- Focus ---*/
  116. .ui.checkbox input:focus + .box:before,
  117. .ui.checkbox input:focus + label:before {
  118. -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
  119. box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
  120. }
  121. /*--- Active ---*/
  122. .ui.checkbox input:checked + .box:after,
  123. .ui.checkbox input:checked + label:after {
  124. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  125. filter: alpha(opacity=100);
  126. opacity: 1;
  127. }
  128. /*--- Disabled ---*/
  129. .ui.disabled.checkbox + .box:after,
  130. .ui.checkbox input[disabled] + .box:after,
  131. .ui.disabled.checkbox label,
  132. .ui.checkbox input[disabled] + label {
  133. opacity: 0.4;
  134. color: rgba(0, 0, 0, 0.3);
  135. }
  136. /*******************************
  137. Variations
  138. *******************************/
  139. /*--------------
  140. Radio
  141. ---------------*/
  142. .ui.radio.checkbox .box:before,
  143. .ui.radio.checkbox label:before {
  144. min-width: 1em;
  145. height: 1em;
  146. border-radius: 500px;
  147. -webkit-transform: none;
  148. -ms-transform: none;
  149. transform: none;
  150. }
  151. .ui.radio.checkbox .box:after,
  152. .ui.radio.checkbox label:after {
  153. border: none;
  154. top: 0.2em;
  155. left: 0.2em;
  156. width: 0.6em;
  157. height: 0.6em;
  158. background-color: #555555;
  159. -webkit-transform: none;
  160. -ms-transform: none;
  161. transform: none;
  162. border-radius: 500px;
  163. }
  164. /*--------------
  165. Slider
  166. ---------------*/
  167. .ui.slider.checkbox {
  168. cursor: pointer;
  169. min-width: 3em;
  170. }
  171. /* Line */
  172. .ui.slider.checkbox:after {
  173. position: absolute;
  174. top: 0.5em;
  175. left: 0em;
  176. content: '';
  177. width: 3em;
  178. height: 2px;
  179. background-color: rgba(0, 0, 0, 0.1);
  180. }
  181. /* Button */
  182. .ui.slider.checkbox .box,
  183. .ui.slider.checkbox label {
  184. padding-left: 4em;
  185. }
  186. .ui.slider.checkbox .box:before,
  187. .ui.slider.checkbox label:before {
  188. cursor: pointer;
  189. display: block;
  190. position: absolute;
  191. top: -0.25em;
  192. left: 0em;
  193. z-index: 1;
  194. width: 1.5em;
  195. height: 1.5em;
  196. -webkit-transform: none;
  197. -ms-transform: none;
  198. transform: none;
  199. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  200. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  201. border-radius: 50rem;
  202. -webkit-transition: left 0.3s ease 0s;
  203. transition: left 0.3s ease 0s;
  204. }
  205. /* Button Activation Light */
  206. .ui.slider.checkbox .box:after,
  207. .ui.slider.checkbox label:after {
  208. opacity: 1;
  209. position: absolute;
  210. content: '';
  211. top: 0.15em;
  212. left: 0em;
  213. z-index: 2;
  214. margin-left: 0.375em;
  215. border: none;
  216. width: 0.75em;
  217. height: 0.75em;
  218. border-radius: 50rem;
  219. -webkit-transform: none;
  220. -ms-transform: none;
  221. transform: none;
  222. -webkit-transition: background 0.3s ease 0s,
  223. left 0.3s ease 0s;
  224. transition: background 0.3s ease 0s,
  225. left 0.3s ease 0s;
  226. }
  227. /* Selected Slider Toggle */
  228. .ui.slider.checkbox input:checked + .box:before,
  229. .ui.slider.checkbox input:checked + label:before,
  230. .ui.slider.checkbox input:checked + .box:after,
  231. .ui.slider.checkbox input:checked + label:after {
  232. left: 1.75em;
  233. }
  234. /* Off Color */
  235. .ui.slider.checkbox .box:after,
  236. .ui.slider.checkbox label:after {
  237. background-color: #D95C5C;
  238. }
  239. /* On Color */
  240. .ui.slider.checkbox input:checked + .box:after,
  241. .ui.slider.checkbox input:checked + label:after {
  242. background-color: #89B84C;
  243. }
  244. /*--------------
  245. Toggle
  246. ---------------*/
  247. .ui.toggle.checkbox {
  248. cursor: pointer;
  249. }
  250. .ui.toggle.checkbox .box,
  251. .ui.toggle.checkbox label {
  252. padding-left: 4em;
  253. }
  254. /* Switch */
  255. .ui.toggle.checkbox .box:before,
  256. .ui.toggle.checkbox label:before {
  257. cursor: pointer;
  258. display: block;
  259. position: absolute;
  260. content: '';
  261. top: -0.25em;
  262. left: 0em;
  263. z-index: 1;
  264. background-color: #FFFFFF;
  265. width: 3em;
  266. height: 1.5em;
  267. -webkit-transform: none;
  268. -ms-transform: none;
  269. transform: none;
  270. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  271. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  272. border-radius: 50rem;
  273. }
  274. /* Activation Light */
  275. .ui.toggle.checkbox .box:after,
  276. .ui.toggle.checkbox label:after {
  277. opacity: 1;
  278. background-color: transparent;
  279. -webkit-box-shadow: none;
  280. box-shadow: none;
  281. content: '';
  282. position: absolute;
  283. top: 0.15em;
  284. left: 0.5em;
  285. z-index: 2;
  286. border: none;
  287. width: 0.75em;
  288. height: 0.75em;
  289. background-color: #D95C5C;
  290. border-radius: 50rem;
  291. -webkit-transition: background 0.3s ease 0s,
  292. left 0.3s ease 0s;
  293. transition: background 0.3s ease 0s,
  294. left 0.3s ease 0s;
  295. }
  296. /* Active */
  297. .ui.toggle.checkbox:active .box:before,
  298. .ui.toggle.checkbox:active label:before {
  299. background-color: #F5F5F5;
  300. }
  301. /* Active */
  302. .ui.toggle.checkbox input:checked + .box:after,
  303. .ui.toggle.checkbox input:checked + label:after {
  304. left: 1.75em;
  305. background-color: #89B84C;
  306. }
  307. /*--------------
  308. Sizes
  309. ---------------*/
  310. .ui.checkbox {
  311. font-size: 1em;
  312. }
  313. .ui.large.checkbox {
  314. font-size: 1.25em;
  315. }
  316. .ui.huge.checkbox {
  317. font-size: 1.5em;
  318. }