build.less.css 5.3 KB

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