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.

371 lines
6.9 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. line-height: 1;
  46. width: 1em;
  47. height: 1em;
  48. right: 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-left: 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. right: 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. }
  148. .ui.radio.checkbox .box:after,
  149. .ui.radio.checkbox label:after {
  150. border: none;
  151. top: 0.2em;
  152. right: 0.2em;
  153. width: 0.6em;
  154. height: 0.6em;
  155. background-color: #555555;
  156. -webkit-transform: none;
  157. -ms-transform: none;
  158. transform: none;
  159. border-radius: 500px;
  160. }
  161. /*--------------
  162. Slider
  163. ---------------*/
  164. .ui.slider.checkbox {
  165. cursor: pointer;
  166. min-width: 3em;
  167. }
  168. /* Line */
  169. .ui.slider.checkbox:after {
  170. position: absolute;
  171. top: 0.5em;
  172. right: 0em;
  173. content: '';
  174. width: 3em;
  175. height: 2px;
  176. background-color: rgba(0, 0, 0, 0.1);
  177. }
  178. /* Button */
  179. .ui.slider.checkbox .box,
  180. .ui.slider.checkbox label {
  181. padding-right: 4em;
  182. }
  183. .ui.slider.checkbox .box:before,
  184. .ui.slider.checkbox label:before {
  185. cursor: pointer;
  186. display: block;
  187. position: absolute;
  188. top: -0.25em;
  189. right: 0em;
  190. z-index: 1;
  191. width: 1.5em;
  192. height: 1.5em;
  193. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  194. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  195. border-radius: 50rem;
  196. -webkit-transition: right 0.3s ease 0s;
  197. transition: right 0.3s ease 0s;
  198. }
  199. /* Button Activation Light */
  200. .ui.slider.checkbox .box:after,
  201. .ui.slider.checkbox label:after {
  202. opacity: 1;
  203. position: absolute;
  204. content: '';
  205. top: 0.15em;
  206. right: 0em;
  207. z-index: 2;
  208. margin-right: 0.375em;
  209. border: none;
  210. width: 0.75em;
  211. height: 0.75em;
  212. border-radius: 50rem;
  213. -webkit-transform: none;
  214. -ms-transform: none;
  215. transform: none;
  216. -webkit-transition: background 0.3s ease 0s,
  217. right 0.3s ease 0s;
  218. transition: background 0.3s ease 0s,
  219. right 0.3s ease 0s;
  220. }
  221. /* Selected Slider Toggle */
  222. .ui.slider.checkbox input:checked + .box:before,
  223. .ui.slider.checkbox input:checked + label:before,
  224. .ui.slider.checkbox input:checked + .box:after,
  225. .ui.slider.checkbox input:checked + label:after {
  226. right: 1.75em;
  227. }
  228. /* Off Color */
  229. .ui.slider.checkbox .box:after,
  230. .ui.slider.checkbox label:after {
  231. background-color: #D95C5C;
  232. }
  233. /* On Color */
  234. .ui.slider.checkbox input:checked + .box:after,
  235. .ui.slider.checkbox input:checked + label:after {
  236. background-color: #89B84C;
  237. }
  238. /*--------------
  239. Toggle
  240. ---------------*/
  241. .ui.toggle.checkbox {
  242. cursor: pointer;
  243. }
  244. .ui.toggle.checkbox .box,
  245. .ui.toggle.checkbox label {
  246. padding-right: 4em;
  247. }
  248. /* Switch */
  249. .ui.toggle.checkbox .box:before,
  250. .ui.toggle.checkbox label:before {
  251. cursor: pointer;
  252. display: block;
  253. position: absolute;
  254. content: '';
  255. top: -0.25em;
  256. right: 0em;
  257. z-index: 1;
  258. background-color: #FFFFFF;
  259. width: 3em;
  260. height: 1.5em;
  261. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  262. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  263. border-radius: 50rem;
  264. }
  265. /* Activation Light */
  266. .ui.toggle.checkbox .box:after,
  267. .ui.toggle.checkbox label:after {
  268. opacity: 1;
  269. background-color: transparent;
  270. -webkit-box-shadow: none;
  271. box-shadow: none;
  272. content: '';
  273. position: absolute;
  274. top: 0.15em;
  275. right: 0.5em;
  276. z-index: 2;
  277. border: none;
  278. width: 0.75em;
  279. height: 0.75em;
  280. background-color: #D95C5C;
  281. border-radius: 50rem;
  282. -webkit-transition: background 0.3s ease 0s,
  283. right 0.3s ease 0s;
  284. transition: background 0.3s ease 0s,
  285. right 0.3s ease 0s;
  286. }
  287. /* Active */
  288. .ui.toggle.checkbox:active .box:before,
  289. .ui.toggle.checkbox:active label:before {
  290. background-color: #F5F5F5;
  291. }
  292. /* Active */
  293. .ui.toggle.checkbox input:checked + .box:after,
  294. .ui.toggle.checkbox input:checked + label:after {
  295. right: 1.75em;
  296. background-color: #89B84C;
  297. }
  298. /*--------------
  299. Sizes
  300. ---------------*/
  301. .ui.checkbox {
  302. font-size: 1em;
  303. }
  304. .ui.large.checkbox {
  305. font-size: 1.25em;
  306. }
  307. .ui.huge.checkbox {
  308. font-size: 1.5em;
  309. }