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.

252 lines
6.6 KiB

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