formValidation.css 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299
  1. /*!
  2. * FormValidation (http://formvalidation.io)
  3. * The best jQuery plugin to validate form fields. Support Bootstrap, Foundation, Pure, SemanticUI, UIKit and custom frameworks
  4. *
  5. * @version v0.8.1, built on 2016-07-29 1:10:54 AM
  6. * @author https://twitter.com/formvalidation
  7. * @copyright (c) 2013 - 2016 Nguyen Huu Phuoc
  8. * @license http://formvalidation.io/license/
  9. */
  10. .fv-has-feedback {
  11. position: relative;
  12. }
  13. .fv-control-feedback {
  14. position: absolute;
  15. top: 0;
  16. right: 0;
  17. z-index: 3;
  18. display: block;
  19. text-align: center;
  20. }
  21. .fv-help-block {
  22. display: block;
  23. }
  24. /* Hide the clear icon for field using placeholder attribute on IE10/11 */
  25. .fv-form [placeholder]::-ms-clear {
  26. display: none;
  27. }
  28. /* -------------------
  29. * Support Bootstrap 3
  30. * ------------------- */
  31. .fv-form-bootstrap .help-block {
  32. margin-bottom: 0;
  33. }
  34. .fv-form-bootstrap .tooltip-inner {
  35. text-align: left;
  36. }
  37. .fv-form-bootstrap .fv-bootstrap-icon-input-group {
  38. z-index: 100;
  39. }
  40. /* Inline form */
  41. .form-inline.fv-form-bootstrap .form-group {
  42. vertical-align: top;
  43. }
  44. /* -------------------------
  45. * Support Bootstrap 4 alpha
  46. * ------------------------- */
  47. .fv-form-bootstrap4 .fv-control-feedback {
  48. width: 38px;
  49. height: 38px;
  50. line-height: 38px;
  51. }
  52. /* For horizontal form */
  53. .fv-form-bootstrap4 .form-group.row .fv-control-feedback {
  54. right: 15px;
  55. }
  56. .fv-form-bootstrap4 .form-group.row .form-check~.fv-control-feedback {
  57. top: -7px; /* labelHeight/2 - iconHeight/2 */
  58. }
  59. /* Inline form */
  60. .fv-form-bootstrap4.form-inline .form-group {
  61. vertical-align: top;
  62. }
  63. /* Stacked form */
  64. .fv-form-bootstrap4:not(.form-inline) label~.fv-control-feedback {
  65. top: 32px;
  66. }
  67. /* Without label */
  68. .fv-form-bootstrap4:not(.form-inline) label.sr-only~.fv-control-feedback {
  69. top: -7px; /* labelHeight/2 - iconHeight/2 */
  70. }
  71. .fv-form-bootstrap4:not(.form-inline) .form-check~.fv-control-feedback {
  72. top: 25px; /* labelHeight + checkboxHeight/2 - iconHeight/2 */
  73. }
  74. .fv-form-bootstrap4 .has-success label,
  75. .fv-form-bootstrap4 .has-success .fv-control-feedback {
  76. color: #5cb85c;
  77. }
  78. .fv-form-bootstrap4 .has-warning label,
  79. .fv-form-bootstrap4 .has-warning .fv-control-feedback {
  80. color: #f0ad4e;
  81. }
  82. /* --------------------
  83. * Support Foundation 5
  84. * -------------------- */
  85. /* Icon position */
  86. .fv-form-foundation5 .fv-control-feedback {
  87. right: 15px; /* The padding-right of .columns */
  88. width: 37px; /* Same as height of input */
  89. height: 37px;
  90. line-height: 37px;
  91. }
  92. .fv-form-foundation5 .row .row:not(.collapse) .fv-control-feedback {
  93. right: 8px; /* Multiple fields in the same row, same as padding-right of .row .row .column(s) */
  94. }
  95. .fv-form-foundation5 .row .collapse .fv-control-feedback {
  96. right: 0;
  97. }
  98. .fv-form-foundation5.fv-form-horizontal [type="checkbox"]~.fv-control-feedback,
  99. .fv-form-foundation5.fv-form-horizontal [type="radio"]~.fv-control-feedback {
  100. top: -8px; /* labelHeight/2 - iconHeight/2 */
  101. }
  102. /* Stacked form */
  103. .fv-form-foundation5 label .fv-control-feedback {
  104. top: 21px; /* Same as height of label */
  105. }
  106. .fv-form-foundation5 [type="checkbox"]~.fv-control-feedback,
  107. .fv-form-foundation5 [type="radio"]~.fv-control-feedback {
  108. top: 15px;
  109. }
  110. /* Color */
  111. .fv-form-foundation5 .error .fv-control-feedback {
  112. color: #f04124; /* Same as $alert-color, .error */
  113. }
  114. .fv-form-foundation5 .fv-has-success label,
  115. .fv-form-foundation5 .fv-has-success .fv-control-feedback {
  116. color: #43AC6A; /* Same as $success-color */
  117. }
  118. /* --------------------
  119. * Support Foundation 6
  120. * -------------------- */
  121. /* Icon position */
  122. .fv-form-foundation .fv-control-feedback {
  123. right: 15px; /* The padding-right of .columns */
  124. width: 39px; /* Same as height of input */
  125. height: 39px;
  126. line-height: 39px;
  127. }
  128. .fv-form-foundation [type="checkbox"]~.fv-control-feedback,
  129. .fv-form-foundation [type="radio"]~.fv-control-feedback {
  130. top: -7px; /* labelHeight/2 - iconHeight/2 */
  131. }
  132. .fv-form-foundation .form-error {
  133. display: block;
  134. }
  135. /* Stacked form */
  136. .fv-form-foundation label .fv-control-feedback,
  137. .fv-form-foundation fieldset [type="checkbox"]~.fv-control-feedback,
  138. .fv-form-foundation fieldset [type="radio"]~.fv-control-feedback {
  139. top: 25px; /* Same as height of label */
  140. }
  141. /* Color */
  142. .fv-form-foundation .fv-has-error label,
  143. .fv-form-foundation .fv-has-error fieldset legend,
  144. .fv-form-foundation .fv-has-error .fv-control-feedback {
  145. color: #ec5840; /* Same as .alert */
  146. }
  147. .fv-form-foundation .fv-has-success label,
  148. .fv-form-foundation .fv-has-success fieldset legend,
  149. .fv-form-foundation .fv-has-success .fv-control-feedback {
  150. color: #3adb76; /* Same as .success */
  151. }
  152. /* Tooltip */
  153. .fv-foundation-tooltip:before {
  154. border-color: transparent transparent #0a0a0a;
  155. }
  156. /* ------------
  157. * Support Pure
  158. * ------------ */
  159. .fv-form-pure .fv-control-feedback {
  160. width: 36px; /* Height of Pure input */
  161. height: 36px;
  162. line-height: 36px;
  163. }
  164. /* Horizontal form */
  165. .fv-form-pure.pure-form-aligned [type="checkbox"]~.fv-control-feedback,
  166. .fv-form-pure.pure-form-aligned [type="radio"]~.fv-control-feedback {
  167. top: -9px; /* labelHeight/2 - iconHeight/2 */
  168. }
  169. .fv-form-pure.pure-form-aligned .fv-help-block {
  170. margin-top: 5px;
  171. margin-left: 180px;
  172. }
  173. /* Stacked form */
  174. .fv-form-pure.pure-form-stacked .pure-control-group {
  175. margin-bottom: 8px;
  176. }
  177. .fv-form-pure.pure-form-stacked .fv-control-feedback {
  178. top: 22px; /* Same as height of label */
  179. }
  180. .fv-form-pure.pure-form-stacked .pure-radio~.fv-control-feedback {
  181. top: 20px;
  182. }
  183. .fv-form-pure.pure-form-stacked .fv-sr-only~.fv-control-feedback {
  184. top: -9px;
  185. }
  186. .fv-form-pure .fv-has-error label,
  187. .fv-form-pure .fv-has-error .fv-help-block,
  188. .fv-form-pure .fv-has-error .fv-control-feedback {
  189. color: #CA3C3C; /* Same as .button-error */
  190. }
  191. .fv-form-pure .fv-has-success label,
  192. .fv-form-pure .fv-has-success .fv-help-block,
  193. .fv-form-pure .fv-has-success .fv-control-feedback {
  194. color: #1CB841; /* Same as .button-success */
  195. }
  196. /* -------------------
  197. * Support Semantic UI
  198. * ------------------- */
  199. .fv-form-semantic.ui.form .fields.error label {
  200. color: #9f3a38; /* Same as .ui.form .field.error .input */
  201. }
  202. .fv-form-semantic .fv-control-feedback {
  203. right: 7px;
  204. }
  205. .fv-form-semantic .error .icon {
  206. color: #9f3a38;
  207. }
  208. /* --------------
  209. * Support UI Kit
  210. * -------------- */
  211. .fv-form-uikit .fv-control-feedback {
  212. top: 25px; /* Height of UIKit label */
  213. width: 30px; /* Height of UIKit input */
  214. height: 30px;
  215. line-height: 30px;
  216. }
  217. .fv-form-uikit .uk-text-danger {
  218. display: block;
  219. }
  220. /* UIKit horizontal form */
  221. .fv-form-uikit.uk-form-horizontal .fv-control-feedback {
  222. top: 0;
  223. }
  224. .fv-form-uikit.uk-form-horizontal [type="checkbox"]~.fv-control-feedback,
  225. .fv-form-uikit.uk-form-horizontal [type="radio"]~.fv-control-feedback {
  226. top: -7px;
  227. }
  228. /* Without labels */
  229. .fv-form-uikit label.fv-sr-only~.fv-control-feedback {
  230. top: -7px !important;
  231. }
  232. /* Stacked form */
  233. .fv-form-uikit.uk-form-stacked [type="checkbox"]~.fv-control-feedback,
  234. .fv-form-uikit.uk-form-stacked [type="radio"]~.fv-control-feedback {
  235. top: 20px;
  236. }
  237. .fv-form-uikit .fv-has-error label,
  238. .fv-form-uikit .fv-has-error .uk-form-label,
  239. .fv-form-uikit .fv-has-error .fv-control-feedback {
  240. color: #D85030; /* Same as .uk-form-danger */
  241. }
  242. .fv-form-uikit .fv-has-success label,
  243. .fv-form-uikit .fv-has-success .uk-form-label,
  244. .fv-form-uikit .fv-has-success .fv-control-feedback {
  245. color: #659F13; /* Same as .uk-form-success */
  246. }