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.

374 lines
7.0 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. right: 0px;
  31. opacity: 0;
  32. outline: none;
  33. }
  34. /*--- Box ---*/
  35. .ui.checkbox .box,
  36. .ui.checkbox label {
  37. cursor: pointer;
  38. padding-right: 2em;
  39. outline: none;
  40. }
  41. .ui.checkbox .box:before,
  42. .ui.checkbox label:before {
  43. position: absolute;
  44. top: 0em;
  45. right: 0em;
  46. line-height: 1;
  47. width: 1em;
  48. height: 1em;
  49. right: 0em;
  50. content: '';
  51. border-radius: 4px;
  52. background: #FFFFFF;
  53. -webkit-transition: background-color 0.3s ease,
  54. -webkit-box-shadow 0.3s ease;
  55. transition: background-color 0.3s ease,
  56. box-shadow 0.3s ease;
  57. -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
  58. box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
  59. }
  60. /*--- Checkbox ---*/
  61. .ui.checkbox .box:after,
  62. .ui.checkbox label:after {
  63. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  64. filter: alpha(opacity=0);
  65. opacity: 0;
  66. content: '';
  67. position: absolute;
  68. background: transparent;
  69. border: 0.2em solid #333333;
  70. border-top: none;
  71. border-left: none;
  72. -webkit-transform: rotate(-45deg);
  73. -ms-transform: rotate(-45deg);
  74. transform: rotate(-45deg);
  75. }
  76. .ui.checkbox .box:after,
  77. .ui.checkbox label:after {
  78. top: 0.275em;
  79. right: 0.2em;
  80. width: 0.45em;
  81. height: 0.15em;
  82. }
  83. /*--- Inside Label ---*/
  84. .ui.checkbox label {
  85. color: rgba(0, 0, 0, 0.6);
  86. -webkit-transition: color 0.2s ease;
  87. transition: color 0.2s ease;
  88. }
  89. .ui.checkbox label:hover {
  90. color: rgba(0, 0, 0, 0.8);
  91. }
  92. .ui.checkbox input:focus + label {
  93. color: rgba(0, 0, 0, 0.8);
  94. }
  95. /*--- Outside Label ---*/
  96. .ui.checkbox + label {
  97. cursor: pointer;
  98. opacity: 0.85;
  99. vertical-align: middle;
  100. }
  101. .ui.checkbox + label:hover {
  102. opacity: 1;
  103. }
  104. /*******************************
  105. States
  106. *******************************/
  107. /*--- Hover ---*/
  108. .ui.checkbox .box:hover::before,
  109. .ui.checkbox label:hover::before {
  110. -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
  111. box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
  112. }
  113. /*--- Down ---*/
  114. .ui.checkbox .box:active::before,
  115. .ui.checkbox label:active::before {
  116. background-color: #F5F5F5;
  117. }
  118. /*--- Focus ---*/
  119. .ui.checkbox input:focus + .box:before,
  120. .ui.checkbox input:focus + label:before {
  121. -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
  122. box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
  123. }
  124. /*--- Active ---*/
  125. .ui.checkbox input:checked + .box:after,
  126. .ui.checkbox input:checked + label:after {
  127. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  128. filter: alpha(opacity=100);
  129. opacity: 1;
  130. }
  131. /*--- Disabled ---*/
  132. .ui.disabled.checkbox + .box:after,
  133. .ui.checkbox input[disabled] + .box:after,
  134. .ui.disabled.checkbox label,
  135. .ui.checkbox input[disabled] + label {
  136. opacity: 0.4;
  137. color: rgba(0, 0, 0, 0.3);
  138. }
  139. /*******************************
  140. Variations
  141. *******************************/
  142. /*--------------
  143. Radio
  144. ---------------*/
  145. .ui.radio.checkbox .box:before,
  146. .ui.radio.checkbox label:before {
  147. min-width: 1em;
  148. height: 1em;
  149. border-radius: 500px;
  150. }
  151. .ui.radio.checkbox .box:after,
  152. .ui.radio.checkbox label:after {
  153. border: none;
  154. top: 0.2em;
  155. right: 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. right: 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-right: 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. right: 0em;
  193. z-index: 1;
  194. width: 1.5em;
  195. height: 1.5em;
  196. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  197. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  198. border-radius: 50rem;
  199. -webkit-transition: right 0.3s ease 0s;
  200. transition: right 0.3s ease 0s;
  201. }
  202. /* Button Activation Light */
  203. .ui.slider.checkbox .box:after,
  204. .ui.slider.checkbox label:after {
  205. opacity: 1;
  206. position: absolute;
  207. content: '';
  208. top: 0.15em;
  209. right: 0em;
  210. z-index: 2;
  211. margin-right: 0.375em;
  212. border: none;
  213. width: 0.75em;
  214. height: 0.75em;
  215. border-radius: 50rem;
  216. -webkit-transform: none;
  217. -ms-transform: none;
  218. transform: none;
  219. -webkit-transition: background 0.3s ease 0s,
  220. right 0.3s ease 0s;
  221. transition: background 0.3s ease 0s,
  222. right 0.3s ease 0s;
  223. }
  224. /* Selected Slider Toggle */
  225. .ui.slider.checkbox input:checked + .box:before,
  226. .ui.slider.checkbox input:checked + label:before,
  227. .ui.slider.checkbox input:checked + .box:after,
  228. .ui.slider.checkbox input:checked + label:after {
  229. right: 1.75em;
  230. }
  231. /* Off Color */
  232. .ui.slider.checkbox .box:after,
  233. .ui.slider.checkbox label:after {
  234. background-color: #D95C5C;
  235. }
  236. /* On Color */
  237. .ui.slider.checkbox input:checked + .box:after,
  238. .ui.slider.checkbox input:checked + label:after {
  239. background-color: #89B84C;
  240. }
  241. /*--------------
  242. Toggle
  243. ---------------*/
  244. .ui.toggle.checkbox {
  245. cursor: pointer;
  246. }
  247. .ui.toggle.checkbox .box,
  248. .ui.toggle.checkbox label {
  249. padding-right: 4em;
  250. }
  251. /* Switch */
  252. .ui.toggle.checkbox .box:before,
  253. .ui.toggle.checkbox label:before {
  254. cursor: pointer;
  255. display: block;
  256. position: absolute;
  257. content: '';
  258. top: -0.25em;
  259. right: 0em;
  260. z-index: 1;
  261. background-color: #FFFFFF;
  262. width: 3em;
  263. height: 1.5em;
  264. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  265. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  266. border-radius: 50rem;
  267. }
  268. /* Activation Light */
  269. .ui.toggle.checkbox .box:after,
  270. .ui.toggle.checkbox label:after {
  271. opacity: 1;
  272. background-color: transparent;
  273. -webkit-box-shadow: none;
  274. box-shadow: none;
  275. content: '';
  276. position: absolute;
  277. top: 0.15em;
  278. right: 0.5em;
  279. z-index: 2;
  280. border: none;
  281. width: 0.75em;
  282. height: 0.75em;
  283. background-color: #D95C5C;
  284. border-radius: 50rem;
  285. -webkit-transition: background 0.3s ease 0s,
  286. right 0.3s ease 0s;
  287. transition: background 0.3s ease 0s,
  288. right 0.3s ease 0s;
  289. }
  290. /* Active */
  291. .ui.toggle.checkbox:active .box:before,
  292. .ui.toggle.checkbox:active label:before {
  293. background-color: #F5F5F5;
  294. }
  295. /* Active */
  296. .ui.toggle.checkbox input:checked + .box:after,
  297. .ui.toggle.checkbox input:checked + label:after {
  298. right: 1.75em;
  299. background-color: #89B84C;
  300. }
  301. /*--------------
  302. Sizes
  303. ---------------*/
  304. .ui.checkbox {
  305. font-size: 1em;
  306. }
  307. .ui.large.checkbox {
  308. font-size: 1.25em;
  309. }
  310. .ui.huge.checkbox {
  311. font-size: 1.5em;
  312. }