checkbox3.min.css 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450
  1. .checkbox3 label::before,
  2. .radio3 label::before {
  3. overflow: hidden;
  4. vertical-align: middle;
  5. text-align: center
  6. }
  7. .checkbox3 label,
  8. .radio3 label {
  9. white-space: nowrap;
  10. cursor: pointer
  11. }
  12. .checkbox3 {
  13. position: relative
  14. }
  15. .checkbox3 input {
  16. position: absolute;
  17. left: -9999px
  18. }
  19. .checkbox3 label::after,
  20. .checkbox3 label::before {
  21. content: '';
  22. top: 10px;
  23. bottom: 10px;
  24. left: 0;
  25. display: block
  26. }
  27. .checkbox3 label {
  28. display: block;
  29. position: relative;
  30. padding: 11px 0 11px 30px;
  31. font-size: 12px;
  32. margin-bottom: 0;
  33. margin-top: -4px
  34. }
  35. .checkbox3 label::before {
  36. position: absolute;
  37. width: 23px;
  38. height: 23px;
  39. border: 1px solid #CCC;
  40. -moz-border-radius: 1px;
  41. border-radius: 1px;
  42. -webkit-transition: background-color .2s;
  43. -moz-transition: background-color .2s;
  44. transition: background-color .2s
  45. }
  46. .checkbox3 label::after {
  47. position: absolute;
  48. width: 23px;
  49. height: 23px;
  50. border: 12px solid #FFF;
  51. margin: 1px;
  52. -webkit-transition: all 50ms;
  53. -moz-transition: all 50ms;
  54. transition: all 50ms;
  55. opacity: 0
  56. }
  57. .checkbox3 input:checked+label::before {
  58. border-width: 1px;
  59. border-style: solid;
  60. background-color: #444;
  61. border-color: #444;
  62. color: #fff
  63. }
  64. .checkbox3 input:checked+label::after {
  65. border: 3px solid #FFF;
  66. opacity: 1
  67. }
  68. .checkbox3.checkbox-sm label {
  69. padding: 8px 0 8px 22px
  70. }
  71. .checkbox3.checkbox-sm label::before {
  72. width: 14px;
  73. height: 14px;
  74. line-height: 14px
  75. }
  76. .checkbox3.checkbox-sm label::after {
  77. width: 12px;
  78. height: 12px
  79. }
  80. .checkbox3.checkbox-lg label {
  81. padding: 15px 0 15px 40px
  82. }
  83. .checkbox3.checkbox-lg label::before {
  84. width: 28px;
  85. height: 27px;
  86. line-height: 24px
  87. }
  88. .checkbox3.checkbox-lg label::after {
  89. width: 26px;
  90. height: 25px
  91. }
  92. .checkbox3.checkbox-inline,
  93. .radio3.radio-inline {
  94. padding-top: 0;
  95. padding-left: 0;
  96. padding-right: 0;
  97. margin-left: 0;
  98. margin-right: 0
  99. }
  100. .checkbox3.checkbox-inline input[type=checkbox],
  101. .checkbox3.checkbox-inline input[type=radio],
  102. .radio3.radio-inline input[type=checkbox],
  103. .radio3.radio-inline input[type=radio] {
  104. position: absolute
  105. }
  106. .checkbox3.checkbox-check input:checked+label::after,
  107. .checkbox3.checkbox-check label::after {
  108. border: 0
  109. }
  110. .checkbox3.checkbox-check label::after {
  111. content: "\f00c";
  112. font-family: FontAwesome;
  113. font-size: 12px;
  114. color: #FFF;
  115. width: 20px;
  116. height: 23px;
  117. line-height: 20px;
  118. vertical-align: middle;
  119. text-align: center;
  120. border-width: 0
  121. }
  122. .checkbox3.checkbox-check.checkbox-sm label::after {
  123. font-size: 9px;
  124. line-height: 12px;
  125. width: 12px
  126. }
  127. .checkbox3.checkbox-check.checkbox-lg label::after {
  128. font-size: 16px;
  129. line-height: 26px;
  130. width: 26px
  131. }
  132. .checkbox3.checkbox-check.checkbox-light label::after {
  133. color: #0c6dc3
  134. }
  135. .checkbox3.checkbox-circle label::after,
  136. .checkbox3.checkbox-circle label::before {
  137. -moz-border-radius: 20px;
  138. border-radius: 20px
  139. }
  140. .checkbox3.checkbox-round label::after,
  141. .checkbox3.checkbox-round label::before,
  142. .checkbox3.checkbox-s1 label::after,
  143. .checkbox3.checkbox-s1 label::before {
  144. -moz-border-radius: 4px;
  145. border-radius: 4px
  146. }
  147. .checkbox3.checkbox-light label::before {
  148. background-color: transparent
  149. }
  150. .checkbox3.checkbox-light input:checked+label::before {
  151. background-color: transparent;
  152. border-color: #0c6dc3
  153. }
  154. .checkbox3.checkbox-info input:checked+label::before {
  155. background-color: #2caef5;
  156. border-color: #2caef5
  157. }
  158. .checkbox3.checkbox-primary input:checked+label::before {
  159. background-color: #4183d7;
  160. border-color: #4183d7
  161. }
  162. .checkbox3.checkbox-success input:checked+label::before {
  163. background-color: #36b846;
  164. border-color: #36b846
  165. }
  166. .checkbox3.checkbox-warning input:checked+label::before {
  167. background-color: #ff9c00;
  168. border-color: #ff9c00
  169. }
  170. .checkbox3.checkbox-danger input:checked+label::before {
  171. background-color: #e50011;
  172. border-color: #e50011
  173. }
  174. .checkbox3.checkbox-primary.checkbox-light input:checked+label::before {
  175. background-color: transparent;
  176. border-color: #4183d7
  177. }
  178. .checkbox3.checkbox-primary.checkbox-light input:checked+label::after {
  179. color: #4183d7
  180. }
  181. .checkbox3.checkbox-info.checkbox-light input:checked+label::before {
  182. background-color: transparent;
  183. border-color: #2caef5
  184. }
  185. .checkbox3.checkbox-info.checkbox-light input:checked+label::after {
  186. color: #2caef5
  187. }
  188. .checkbox3.checkbox-success.checkbox-light input:checked+label::before {
  189. background-color: transparent;
  190. border-color: #36b846
  191. }
  192. .checkbox3.checkbox-success.checkbox-light input:checked+label::after {
  193. color: #36b846
  194. }
  195. .checkbox3.checkbox-warning.checkbox-light input:checked+label::before {
  196. background-color: transparent;
  197. border-color: #ff9c00
  198. }
  199. .checkbox3.checkbox-warning.checkbox-light input:checked+label::after {
  200. color: #ff9c00
  201. }
  202. .checkbox3.checkbox-danger.checkbox-light input:checked+label::before {
  203. background-color: transparent;
  204. border-color: #e50011
  205. }
  206. .checkbox3.checkbox-danger.checkbox-light input:checked+label::after {
  207. color: #e50011
  208. }
  209. .radio3 {
  210. position: relative
  211. }
  212. .radio3 input {
  213. position: absolute;
  214. left: -9999px
  215. }
  216. .radio3 label {
  217. display: block;
  218. position: relative;
  219. padding: 11px 0 11px 25px;
  220. font-size: 12px;
  221. margin-bottom: 0;
  222. margin-top: -4px
  223. }
  224. .radio3 label::after,
  225. .radio3 label::before {
  226. content: '';
  227. display: block;
  228. position: absolute;
  229. top: 10px;
  230. bottom: 10px;
  231. left: 0
  232. }
  233. .radio3 label::before {
  234. width: 23px;
  235. height: 23px;
  236. border: 1px solid #CCC;
  237. -webkit-transition: background-color .2s;
  238. -moz-transition: background-color .2s;
  239. transition: background-color .2s
  240. }
  241. .radio3 label::after {
  242. width: 23px;
  243. height: 23px;
  244. border: 12px solid #FFF;
  245. margin: 1px;
  246. -webkit-transition: all 50ms;
  247. -moz-transition: all 50ms;
  248. transition: all 50ms;
  249. opacity: 0
  250. }
  251. .radio3 input:checked+label::before {
  252. font-family: FontAwesome;
  253. border-width: 1px;
  254. border-style: solid;
  255. background-color: #1380d7;
  256. border-color: #1380d7;
  257. color: #fff
  258. }
  259. .radio3 input:checked+label::after {
  260. border: 3px solid #FFF;
  261. opacity: 1
  262. }
  263. .radio3.radio-check label::after,
  264. .radio3.radio-check.radio-light label::after {
  265. content: "\f00c";
  266. font-family: FontAwesome;
  267. color: #FFF;
  268. width: 20px;
  269. height: 23px;
  270. line-height: 20px;
  271. vertical-align: middle;
  272. text-align: center;
  273. border-width: 0
  274. }
  275. .radio3 label::after,
  276. .radio3 label::before {
  277. -moz-border-radius: 20px;
  278. border-radius: 20px
  279. }
  280. .radio3.radio-check input:checked+label::after {
  281. border-width: 0
  282. }
  283. .radio3.radio-check.radio-light input:checked+label::before {
  284. background-color: transparent
  285. }
  286. .radio3.radio-check.radio-light input:checked+label::after {
  287. border-width: 0;
  288. color: #444
  289. }
  290. .radio3.radio-sm label {
  291. padding: 8px 0 8px 22px
  292. }
  293. .radio3.radio-sm label::before {
  294. width: 14px;
  295. height: 14px;
  296. line-height: 14px
  297. }
  298. .radio3.radio-sm label::after {
  299. width: 12px;
  300. height: 12px
  301. }
  302. .radio3.radio-lg label {
  303. padding: 15px 0 15px 40px
  304. }
  305. .radio3.radio-lg label::before {
  306. width: 28px;
  307. height: 27px;
  308. line-height: 24px
  309. }
  310. .radio3.radio-lg label::after {
  311. width: 26px;
  312. height: 25px
  313. }
  314. .radio3.radio-check.radio-sm label::after {
  315. font-size: 9px;
  316. line-height: 12px;
  317. width: 12px
  318. }
  319. .radio3.radio-check.radio-lg label::after {
  320. font-size: 16px;
  321. line-height: 26px;
  322. width: 26px
  323. }
  324. .radio3.radio-primary input:checked+label::before {
  325. background-color: #4183d7;
  326. border-color: #4183d7
  327. }
  328. .radio3.radio-info input:checked+label::before {
  329. background-color: #2caef5;
  330. border-color: #2caef5
  331. }
  332. .radio3.radio-success input:checked+label::before {
  333. background-color: #36b846;
  334. border-color: #36b846
  335. }
  336. .radio3.radio-warning input:checked+label::before {
  337. background-color: #ff9c00;
  338. border-color: #ff9c00
  339. }
  340. .radio3.radio-danger input:checked+label::before {
  341. background-color: #e50011;
  342. border-color: #e50011
  343. }
  344. .radio3.radio-primary.radio-light input:checked+label::before {
  345. background-color: transparent
  346. }
  347. .radio3.radio-primary.radio-light input:checked+label::after {
  348. color: #4183d7
  349. }
  350. .radio3.radio-info.radio-light input:checked+label::before {
  351. background-color: transparent
  352. }
  353. .radio3.radio-info.radio-light input:checked+label::after {
  354. color: #2caef5
  355. }
  356. .radio3.radio-success.radio-light input:checked+label::before {
  357. background-color: transparent
  358. }
  359. .radio3.radio-success.radio-light input:checked+label::after {
  360. color: #36b846
  361. }
  362. .radio3.radio-warning.radio-light input:checked+label::before {
  363. background-color: transparent
  364. }
  365. .radio3.radio-warning.radio-light input:checked+label::after {
  366. color: #ff9c00
  367. }
  368. .radio3.radio-danger.radio-light input:checked+label::before {
  369. background-color: transparent
  370. }
  371. .radio3.radio-danger.radio-light input:checked+label::after {
  372. color: #e50011
  373. }