No Description
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.

form-validation.css 4.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. .fv-sr-only {
  2. display: none;
  3. }
  4. .fv-plugins-framework input::-ms-clear,
  5. .fv-plugins-framework textarea::-ms-clear {
  6. display: none;
  7. height: 0;
  8. width: 0;
  9. }
  10. .fv-plugins-icon-container {
  11. position: relative;
  12. }
  13. .fv-plugins-icon {
  14. position: absolute;
  15. right: 0;
  16. text-align: center;
  17. top: 0;
  18. }
  19. .fv-plugins-icon--enabled {
  20. visibility: visible;
  21. }
  22. .fv-plugins-icon--disabled {
  23. visibility: hidden;
  24. }
  25. .fv-plugins-message-container--enabled {
  26. display: block;
  27. }
  28. .fv-plugins-message-container--disabled {
  29. display: none;
  30. }
  31. .fv-plugins-tooltip {
  32. max-width: 256px;
  33. position: absolute;
  34. text-align: center;
  35. z-index: 10000;
  36. }
  37. .fv-plugins-tooltip .fv-plugins-tooltip__content {
  38. background: #000;
  39. border-radius: 3px;
  40. color: #eee;
  41. padding: 8px;
  42. position: relative;
  43. }
  44. .fv-plugins-tooltip .fv-plugins-tooltip__content:before {
  45. border: 8px solid transparent;
  46. content: "";
  47. position: absolute;
  48. }
  49. .fv-plugins-tooltip--hide {
  50. display: none;
  51. }
  52. .fv-plugins-tooltip--top-left {
  53. transform: translateY(-8px);
  54. }
  55. .fv-plugins-tooltip--top-left .fv-plugins-tooltip__content:before {
  56. border-top-color: #000;
  57. left: 8px;
  58. top: 100%;
  59. }
  60. .fv-plugins-tooltip--top {
  61. transform: translateY(-8px);
  62. }
  63. .fv-plugins-tooltip--top .fv-plugins-tooltip__content:before {
  64. border-top-color: #000;
  65. left: 50%;
  66. margin-left: -8px;
  67. top: 100%;
  68. }
  69. .fv-plugins-tooltip--top-right {
  70. transform: translateY(-8px);
  71. }
  72. .fv-plugins-tooltip--top-right .fv-plugins-tooltip__content:before {
  73. border-top-color: #000;
  74. right: 8px;
  75. top: 100%;
  76. }
  77. .fv-plugins-tooltip--right {
  78. transform: translateX(8px);
  79. }
  80. .fv-plugins-tooltip--right .fv-plugins-tooltip__content:before {
  81. border-right-color: #000;
  82. margin-top: -8px;
  83. right: 100%;
  84. top: 50%;
  85. }
  86. .fv-plugins-tooltip--bottom-right {
  87. transform: translateY(8px);
  88. }
  89. .fv-plugins-tooltip--bottom-right .fv-plugins-tooltip__content:before {
  90. border-bottom-color: #000;
  91. bottom: 100%;
  92. right: 8px;
  93. }
  94. .fv-plugins-tooltip--bottom {
  95. transform: translateY(8px);
  96. }
  97. .fv-plugins-tooltip--bottom .fv-plugins-tooltip__content:before {
  98. border-bottom-color: #000;
  99. bottom: 100%;
  100. left: 50%;
  101. margin-left: -8px;
  102. }
  103. .fv-plugins-tooltip--bottom-left {
  104. transform: translateY(8px);
  105. }
  106. .fv-plugins-tooltip--bottom-left .fv-plugins-tooltip__content:before {
  107. border-bottom-color: #000;
  108. bottom: 100%;
  109. left: 8px;
  110. }
  111. .fv-plugins-tooltip--left {
  112. transform: translateX(-8px);
  113. }
  114. .fv-plugins-tooltip--left .fv-plugins-tooltip__content:before {
  115. border-left-color: #000;
  116. left: 100%;
  117. margin-top: -8px;
  118. top: 50%;
  119. }
  120. .fv-plugins-tooltip-icon {
  121. cursor: pointer;
  122. pointer-events: inherit;
  123. }
  124. .fv-plugins-bootstrap5 {
  125. /* Support floating label */
  126. /* For horizontal form */
  127. /* Stacked form */
  128. /* Inline form */
  129. }
  130. .fv-plugins-bootstrap5 .fv-plugins-bootstrap5-row-invalid .fv-plugins-icon {
  131. color: #dc3545;
  132. }
  133. .fv-plugins-bootstrap5 .fv-plugins-bootstrap5-row-valid .fv-plugins-icon {
  134. color: #198754;
  135. }
  136. .fv-plugins-bootstrap5 .fv-plugins-icon {
  137. align-items: center;
  138. display: flex;
  139. justify-content: center;
  140. height: 38px;
  141. width: 38px;
  142. }
  143. .fv-plugins-bootstrap5 .input-group ~ .fv-plugins-icon {
  144. z-index: 3;
  145. }
  146. .fv-plugins-bootstrap5 .fv-plugins-icon-input-group {
  147. right: -38px;
  148. }
  149. .fv-plugins-bootstrap5 .form-floating .fv-plugins-icon {
  150. height: 58px;
  151. }
  152. .fv-plugins-bootstrap5 .row .fv-plugins-icon {
  153. right: 12px;
  154. }
  155. .fv-plugins-bootstrap5 .row .fv-plugins-icon-check {
  156. top: -7px; /* labelHeight/2 - iconHeight/2 */
  157. }
  158. .fv-plugins-bootstrap5:not(.fv-plugins-bootstrap5-form-inline) label ~ .fv-plugins-icon {
  159. top: 32px;
  160. }
  161. .fv-plugins-bootstrap5:not(.fv-plugins-bootstrap5-form-inline) label ~ .fv-plugins-icon-check {
  162. top: 25px;
  163. }
  164. .fv-plugins-bootstrap5:not(.fv-plugins-bootstrap5-form-inline) label.sr-only ~ .fv-plugins-icon-check {
  165. top: -7px;
  166. }
  167. .fv-plugins-bootstrap5.fv-plugins-bootstrap5-form-inline .fv-plugins-icon {
  168. right: calc(var(--bs-gutter-x, 1.5rem) / 2);
  169. }
  170. .fv-plugins-bootstrap5 .form-select.fv-plugins-icon-input.is-valid,
  171. .fv-plugins-bootstrap5 .form-select.fv-plugins-icon-input.is-invalid,
  172. .fv-plugins-bootstrap5 .form-control.fv-plugins-icon-input.is-valid,
  173. .fv-plugins-bootstrap5 .form-control.fv-plugins-icon-input.is-invalid {
  174. background-image: none;
  175. }