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.

284 lines
5.5 KiB

  1. .ui.checkbox {
  2. position: relative;
  3. display: inline-block;
  4. min-width: 1em;
  5. height: 1.25em;
  6. line-height: 1em;
  7. outline: 0;
  8. vertical-align: middle;
  9. }
  10. .ui.checkbox input {
  11. position: absolute;
  12. top: 0;
  13. left: 0;
  14. opacity: 0;
  15. outline: 0;
  16. }
  17. .ui.checkbox .box,
  18. .ui.checkbox label {
  19. cursor: pointer;
  20. padding-left: 2em;
  21. outline: 0;
  22. }
  23. .ui.checkbox .box:before,
  24. .ui.checkbox label:before {
  25. position: absolute;
  26. top: 0;
  27. line-height: 1;
  28. width: 1em;
  29. height: 1em;
  30. left: 0;
  31. content: '';
  32. border-radius: 4px;
  33. background: #FFF;
  34. -webkit-transition: background-color .3s ease,-webkit-box-shadow .3s ease;
  35. transition: background-color .3s ease,box-shadow .3s ease;
  36. -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.2);
  37. box-shadow: 0 0 0 1px rgba(0,0,0,.2);
  38. }
  39. .ui.checkbox .box:after,
  40. .ui.checkbox label:after {
  41. -ms-filter: "alpha(Opacity=0)";
  42. filter: alpha(opacity=0);
  43. opacity: 0;
  44. content: '';
  45. position: absolute;
  46. background: transparent;
  47. border: .2em solid #333;
  48. border-top: 0;
  49. border-right: 0;
  50. -webkit-transform: rotate(-45deg);
  51. -ms-transform: rotate(-45deg);
  52. transform: rotate(-45deg);
  53. }
  54. .ui.checkbox .box:after,
  55. .ui.checkbox label:after {
  56. top: .275em;
  57. left: .2em;
  58. width: .45em;
  59. height: .15em;
  60. }
  61. .ui.checkbox label {
  62. color: rgba(0,0,0,.6);
  63. -webkit-transition: color .2s ease;
  64. transition: color .2s ease;
  65. }
  66. .ui.checkbox label:hover {
  67. color: rgba(0,0,0,.8);
  68. }
  69. .ui.checkbox input:focus+label {
  70. color: rgba(0,0,0,.8);
  71. }
  72. .ui.checkbox+label {
  73. cursor: pointer;
  74. opacity: .85;
  75. vertical-align: middle;
  76. }
  77. .ui.checkbox+label:hover {
  78. opacity: 1;
  79. }
  80. .ui.checkbox .box:hover::before,
  81. .ui.checkbox label:hover::before {
  82. -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3);
  83. box-shadow: 0 0 0 1px rgba(0,0,0,.3);
  84. }
  85. .ui.checkbox .box:active::before,
  86. .ui.checkbox label:active::before {
  87. background-color: #F5F5F5;
  88. }
  89. .ui.checkbox input:focus+.box:before,
  90. .ui.checkbox input:focus+label:before {
  91. -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3);
  92. box-shadow: 0 0 0 1px rgba(0,0,0,.3);
  93. }
  94. .ui.checkbox input:checked+.box:after,
  95. .ui.checkbox input:checked+label:after {
  96. -ms-filter: "alpha(Opacity=100)";
  97. filter: alpha(opacity=100);
  98. opacity: 1;
  99. }
  100. .ui.disabled.checkbox+.box:after,
  101. .ui.checkbox input[disabled]+.box:after,
  102. .ui.disabled.checkbox label,
  103. .ui.checkbox input[disabled]+label {
  104. opacity: .4;
  105. color: rgba(0,0,0,.3);
  106. }
  107. .ui.radio.checkbox .box:before,
  108. .ui.radio.checkbox label:before {
  109. min-width: 1em;
  110. height: 1em;
  111. border-radius: 500px;
  112. }
  113. .ui.radio.checkbox .box:after,
  114. .ui.radio.checkbox label:after {
  115. border: 0;
  116. top: .2em;
  117. left: .2em;
  118. width: .6em;
  119. height: .6em;
  120. background-color: #555;
  121. -webkit-transform: none;
  122. -ms-transform: none;
  123. transform: none;
  124. border-radius: 500px;
  125. }
  126. .ui.slider.checkbox {
  127. cursor: pointer;
  128. min-width: 3em;
  129. }
  130. .ui.slider.checkbox:after {
  131. position: absolute;
  132. top: .5em;
  133. left: 0;
  134. content: '';
  135. width: 3em;
  136. height: 2px;
  137. background-color: rgba(0,0,0,.1);
  138. }
  139. .ui.slider.checkbox .box,
  140. .ui.slider.checkbox label {
  141. padding-left: 4em;
  142. }
  143. .ui.slider.checkbox .box:before,
  144. .ui.slider.checkbox label:before {
  145. cursor: pointer;
  146. display: block;
  147. position: absolute;
  148. top: -.25em;
  149. left: 0;
  150. z-index: 1;
  151. width: 1.5em;
  152. height: 1.5em;
  153. -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
  154. box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
  155. border-radius: 50rem;
  156. -webkit-transition: left .3s ease 0s;
  157. transition: left .3s ease 0s;
  158. }
  159. .ui.slider.checkbox .box:after,
  160. .ui.slider.checkbox label:after {
  161. opacity: 1;
  162. position: absolute;
  163. content: '';
  164. top: .15em;
  165. left: 0;
  166. z-index: 2;
  167. margin-left: .375em;
  168. border: 0;
  169. width: .75em;
  170. height: .75em;
  171. border-radius: 50rem;
  172. -webkit-transform: none;
  173. -ms-transform: none;
  174. transform: none;
  175. -webkit-transition: background .3s ease 0s,left .3s ease 0s;
  176. transition: background .3s ease 0s,left .3s ease 0s;
  177. }
  178. .ui.slider.checkbox input:checked+.box:before,
  179. .ui.slider.checkbox input:checked+label:before,
  180. .ui.slider.checkbox input:checked+.box:after,
  181. .ui.slider.checkbox input:checked+label:after {
  182. left: 1.75em;
  183. }
  184. .ui.slider.checkbox .box:after,
  185. .ui.slider.checkbox label:after {
  186. background-color: #D95C5C;
  187. }
  188. .ui.slider.checkbox input:checked+.box:after,
  189. .ui.slider.checkbox input:checked+label:after {
  190. background-color: #89B84C;
  191. }
  192. .ui.toggle.checkbox {
  193. cursor: pointer;
  194. }
  195. .ui.toggle.checkbox .box,
  196. .ui.toggle.checkbox label {
  197. padding-left: 4em;
  198. }
  199. .ui.toggle.checkbox .box:before,
  200. .ui.toggle.checkbox label:before {
  201. cursor: pointer;
  202. display: block;
  203. position: absolute;
  204. content: '';
  205. top: -.25em;
  206. left: 0;
  207. z-index: 1;
  208. background-color: #FFF;
  209. width: 3em;
  210. height: 1.5em;
  211. -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
  212. box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
  213. border-radius: 50rem;
  214. }
  215. .ui.toggle.checkbox .box:after,
  216. .ui.toggle.checkbox label:after {
  217. opacity: 1;
  218. background-color: transparent;
  219. -webkit-box-shadow: none;
  220. box-shadow: none;
  221. content: '';
  222. position: absolute;
  223. top: .15em;
  224. left: .5em;
  225. z-index: 2;
  226. border: 0;
  227. width: .75em;
  228. height: .75em;
  229. background-color: #D95C5C;
  230. border-radius: 50rem;
  231. -webkit-transition: background .3s ease 0s,left .3s ease 0s;
  232. transition: background .3s ease 0s,left .3s ease 0s;
  233. }
  234. .ui.toggle.checkbox:active .box:before,
  235. .ui.toggle.checkbox:active label:before {
  236. background-color: #F5F5F5;
  237. }
  238. .ui.toggle.checkbox input:checked+.box:after,
  239. .ui.toggle.checkbox input:checked+label:after {
  240. left: 1.75em;
  241. background-color: #89B84C;
  242. }
  243. .ui.checkbox {
  244. font-size: 1em;
  245. }
  246. .ui.large.checkbox {
  247. font-size: 1.25em;
  248. }
  249. .ui.huge.checkbox {
  250. font-size: 1.5em;
  251. }