/public/assets/css/circle-checkbox.css

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