awesome-bootstrap-checkbox.css 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
  1. .checkbox {
  2. padding-left: 20px;
  3. }
  4. .checkbox label {
  5. display: inline-block;
  6. vertical-align: middle;
  7. position: relative;
  8. padding-left: 5px;
  9. }
  10. .checkbox label::before {
  11. content: "";
  12. display: inline-block;
  13. position: absolute;
  14. width: 17px;
  15. height: 17px;
  16. left: 0;
  17. margin-left: -20px;
  18. border: 1px solid #cccccc;
  19. border-radius: 3px;
  20. background-color: #fff;
  21. -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  22. -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  23. transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  24. }
  25. .checkbox label::after {
  26. display: inline-block;
  27. position: absolute;
  28. width: 16px;
  29. height: 16px;
  30. left: 0;
  31. top: 0;
  32. margin-left: -20px;
  33. padding-left: 3px;
  34. padding-top: 1px;
  35. font-size: 11px;
  36. color: #555555;
  37. line-height: 1.4;
  38. }
  39. .checkbox input[type="checkbox"],
  40. .checkbox input[type="radio"] {
  41. opacity: 0;
  42. z-index: 1;
  43. cursor: pointer;
  44. }
  45. .checkbox input[type="checkbox"]:focus + label::before,
  46. .checkbox input[type="radio"]:focus + label::before {
  47. outline: thin dotted;
  48. outline: 5px auto -webkit-focus-ring-color;
  49. outline-offset: -2px;
  50. }
  51. .checkbox input[type="checkbox"]:checked + label::after,
  52. .checkbox input[type="radio"]:checked + label::after {
  53. font-family: "FontAwesome";
  54. content: "\f00c";
  55. }
  56. .checkbox input[type="checkbox"]:indeterminate + label::after,
  57. .checkbox input[type="radio"]:indeterminate + label::after {
  58. display: block;
  59. content: "";
  60. width: 10px;
  61. height: 3px;
  62. background-color: #555555;
  63. border-radius: 2px;
  64. margin-left: -16.5px;
  65. margin-top: 7px;
  66. }
  67. .checkbox input[type="checkbox"]:disabled,
  68. .checkbox input[type="radio"]:disabled {
  69. cursor: not-allowed;
  70. }
  71. .checkbox input[type="checkbox"]:disabled + label,
  72. .checkbox input[type="radio"]:disabled + label {
  73. opacity: 0.65;
  74. }
  75. .checkbox input[type="checkbox"]:disabled + label::before,
  76. .checkbox input[type="radio"]:disabled + label::before {
  77. background-color: #eeeeee;
  78. cursor: not-allowed;
  79. }
  80. .checkbox.checkbox-circle label::before {
  81. border-radius: 50%;
  82. }
  83. .checkbox.checkbox-inline {
  84. margin-top: 0;
  85. }
  86. .checkbox-primary input[type="checkbox"]:checked + label::before,
  87. .checkbox-primary input[type="radio"]:checked + label::before {
  88. background-color: #337ab7;
  89. border-color: #337ab7;
  90. }
  91. .checkbox-primary input[type="checkbox"]:checked + label::after,
  92. .checkbox-primary input[type="radio"]:checked + label::after {
  93. color: #fff;
  94. }
  95. .checkbox-danger input[type="checkbox"]:checked + label::before,
  96. .checkbox-danger input[type="radio"]:checked + label::before {
  97. background-color: #d9534f;
  98. border-color: #d9534f;
  99. }
  100. .checkbox-danger input[type="checkbox"]:checked + label::after,
  101. .checkbox-danger input[type="radio"]:checked + label::after {
  102. color: #fff;
  103. }
  104. .checkbox-info input[type="checkbox"]:checked + label::before,
  105. .checkbox-info input[type="radio"]:checked + label::before {
  106. background-color: #5bc0de;
  107. border-color: #5bc0de;
  108. }
  109. .checkbox-info input[type="checkbox"]:checked + label::after,
  110. .checkbox-info input[type="radio"]:checked + label::after {
  111. color: #fff;
  112. }
  113. .checkbox-warning input[type="checkbox"]:checked + label::before,
  114. .checkbox-warning input[type="radio"]:checked + label::before {
  115. background-color: #f0ad4e;
  116. border-color: #f0ad4e;
  117. }
  118. .checkbox-warning input[type="checkbox"]:checked + label::after,
  119. .checkbox-warning input[type="radio"]:checked + label::after {
  120. color: #fff;
  121. }
  122. .checkbox-success input[type="checkbox"]:checked + label::before,
  123. .checkbox-success input[type="radio"]:checked + label::before {
  124. background-color: #5cb85c;
  125. border-color: #5cb85c;
  126. }
  127. .checkbox-success input[type="checkbox"]:checked + label::after,
  128. .checkbox-success input[type="radio"]:checked + label::after {
  129. color: #fff;
  130. }
  131. .checkbox-primary input[type="checkbox"]:indeterminate + label::before,
  132. .checkbox-primary input[type="radio"]:indeterminate + label::before {
  133. background-color: #337ab7;
  134. border-color: #337ab7;
  135. }
  136. .checkbox-primary input[type="checkbox"]:indeterminate + label::after,
  137. .checkbox-primary input[type="radio"]:indeterminate + label::after {
  138. background-color: #fff;
  139. }
  140. .checkbox-danger input[type="checkbox"]:indeterminate + label::before,
  141. .checkbox-danger input[type="radio"]:indeterminate + label::before {
  142. background-color: #d9534f;
  143. border-color: #d9534f;
  144. }
  145. .checkbox-danger input[type="checkbox"]:indeterminate + label::after,
  146. .checkbox-danger input[type="radio"]:indeterminate + label::after {
  147. background-color: #fff;
  148. }
  149. .checkbox-info input[type="checkbox"]:indeterminate + label::before,
  150. .checkbox-info input[type="radio"]:indeterminate + label::before {
  151. background-color: #5bc0de;
  152. border-color: #5bc0de;
  153. }
  154. .checkbox-info input[type="checkbox"]:indeterminate + label::after,
  155. .checkbox-info input[type="radio"]:indeterminate + label::after {
  156. background-color: #fff;
  157. }
  158. .checkbox-warning input[type="checkbox"]:indeterminate + label::before,
  159. .checkbox-warning input[type="radio"]:indeterminate + label::before {
  160. background-color: #f0ad4e;
  161. border-color: #f0ad4e;
  162. }
  163. .checkbox-warning input[type="checkbox"]:indeterminate + label::after,
  164. .checkbox-warning input[type="radio"]:indeterminate + label::after {
  165. background-color: #fff;
  166. }
  167. .checkbox-success input[type="checkbox"]:indeterminate + label::before,
  168. .checkbox-success input[type="radio"]:indeterminate + label::before {
  169. background-color: #5cb85c;
  170. border-color: #5cb85c;
  171. }
  172. .checkbox-success input[type="checkbox"]:indeterminate + label::after,
  173. .checkbox-success input[type="radio"]:indeterminate + label::after {
  174. background-color: #fff;
  175. }
  176. .radio {
  177. padding-left: 20px;
  178. }
  179. .radio label {
  180. display: inline-block;
  181. vertical-align: middle;
  182. position: relative;
  183. padding-left: 5px;
  184. }
  185. .radio label::before {
  186. content: "";
  187. display: inline-block;
  188. position: absolute;
  189. width: 17px;
  190. height: 17px;
  191. left: 0;
  192. margin-left: -20px;
  193. border: 1px solid #cccccc;
  194. border-radius: 50%;
  195. background-color: #fff;
  196. -webkit-transition: border 0.15s ease-in-out;
  197. -o-transition: border 0.15s ease-in-out;
  198. transition: border 0.15s ease-in-out;
  199. }
  200. .radio label::after {
  201. display: inline-block;
  202. position: absolute;
  203. content: " ";
  204. width: 11px;
  205. height: 11px;
  206. left: 3px;
  207. top: 3px;
  208. margin-left: -20px;
  209. border-radius: 50%;
  210. background-color: #555555;
  211. -webkit-transform: scale(0, 0);
  212. -ms-transform: scale(0, 0);
  213. -o-transform: scale(0, 0);
  214. transform: scale(0, 0);
  215. -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  216. -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  217. -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  218. transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  219. }
  220. .radio input[type="radio"] {
  221. opacity: 0;
  222. z-index: 1;
  223. cursor: pointer;
  224. }
  225. .radio input[type="radio"]:focus + label::before {
  226. outline: thin dotted;
  227. outline: 5px auto -webkit-focus-ring-color;
  228. outline-offset: -2px;
  229. }
  230. .radio input[type="radio"]:checked + label::after {
  231. -webkit-transform: scale(1, 1);
  232. -ms-transform: scale(1, 1);
  233. -o-transform: scale(1, 1);
  234. transform: scale(1, 1);
  235. }
  236. .radio input[type="radio"]:disabled {
  237. cursor: not-allowed;
  238. }
  239. .radio input[type="radio"]:disabled + label {
  240. opacity: 0.65;
  241. }
  242. .radio input[type="radio"]:disabled + label::before {
  243. cursor: not-allowed;
  244. }
  245. .radio.radio-inline {
  246. margin-top: 0;
  247. }
  248. .radio-primary input[type="radio"] + label::after {
  249. background-color: #337ab7;
  250. }
  251. .radio-primary input[type="radio"]:checked + label::before {
  252. border-color: #337ab7;
  253. }
  254. .radio-primary input[type="radio"]:checked + label::after {
  255. background-color: #337ab7;
  256. }
  257. .radio-danger input[type="radio"] + label::after {
  258. background-color: #d9534f;
  259. }
  260. .radio-danger input[type="radio"]:checked + label::before {
  261. border-color: #d9534f;
  262. }
  263. .radio-danger input[type="radio"]:checked + label::after {
  264. background-color: #d9534f;
  265. }
  266. .radio-info input[type="radio"] + label::after {
  267. background-color: #5bc0de;
  268. }
  269. .radio-info input[type="radio"]:checked + label::before {
  270. border-color: #5bc0de;
  271. }
  272. .radio-info input[type="radio"]:checked + label::after {
  273. background-color: #5bc0de;
  274. }
  275. .radio-warning input[type="radio"] + label::after {
  276. background-color: #f0ad4e;
  277. }
  278. .radio-warning input[type="radio"]:checked + label::before {
  279. border-color: #f0ad4e;
  280. }
  281. .radio-warning input[type="radio"]:checked + label::after {
  282. background-color: #f0ad4e;
  283. }
  284. .radio-success input[type="radio"] + label::after {
  285. background-color: #5cb85c;
  286. }
  287. .radio-success input[type="radio"]:checked + label::before {
  288. border-color: #5cb85c;
  289. }
  290. .radio-success input[type="radio"]:checked + label::after {
  291. background-color: #5cb85c;
  292. }
  293. input[type="checkbox"].styled:checked + label:after,
  294. input[type="radio"].styled:checked + label:after {
  295. font-family: 'FontAwesome';
  296. content: "\f00c";
  297. }
  298. input[type="checkbox"] .styled:checked + label::before,
  299. input[type="radio"] .styled:checked + label::before {
  300. color: #fff;
  301. }
  302. input[type="checkbox"] .styled:checked + label::after,
  303. input[type="radio"] .styled:checked + label::after {
  304. color: #fff;
  305. }