formValidation.css
4.19 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
/**
* FormValidation (http://formvalidation.io)
* The best jQuery plugin to validate form fields. Support Bootstrap, Foundation, Pure, SemanticUI, UIKit and custom frameworks
*
* @author http://twitter.com/nghuuphuoc
* @copyright (c) 2013 - 2015 Nguyen Huu Phuoc
* @license http://formvalidation.io/license/
*/
.fv-has-feedback {
position: relative;
}
.fv-control-feedback {
position: absolute;
top: 0;
right: 0;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
}
.fv-has-feedback .fv-control-feedback {
/*right: 15px;*/
}
.fv-help-block {
display: block;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~ For Bootstrap form ~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.fv-form-bootstrap .help-block {
margin-bottom: 0;
}
.fv-form-bootstrap .tooltip-inner {
text-align: left;
}
/* Bootstrap stacked form without label */
.fv-form-bootstrap .fv-icon-no-label {
top: 0;
}
.fv-form-bootstrap .fv-bootstrap-icon-input-group {
z-index: 100;
}
/* Bootstrap inline form */
.form-inline.fv-form-bootstrap .form-group {
vertical-align: top;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~ For Foundation form ~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.fv-form-foundation .fv-control-feedback {
top: 21px; /* The height of Foundation label */
right: 15px; /* The padding-right of .columns */
width: 37px;
height: 37px;
line-height: 37px;
}
.fv-form-foundation .collapse .fv-control-feedback {
top: 0;
right: 0;
}
/* Foundation horizontal form */
.fv-form-horizontal.fv-form-foundation .fv-control-feedback {
top: 0;
}
/* Foundation stacked form without label */
.fv-form-foundation .fv-icon-no-label {
top: 0;
}
.fv-form-foundation .error .fv-control-feedback {
color: #f04124;
}
/**
* Foundation reset the bottom marin to 0 when the row has '.error' class
* I need to adjust it when using tooltip to show the error
*/
.fv-form-foundation .error.fv-has-tooltip input, .error.fv-has-tooltip textarea, .error.fv-has-tooltip select {
margin-bottom: 1rem;
}
/* ~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~ For Pure form ~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~ */
.fv-form-pure .fv-control-feedback {
top: 22px; /* Height of Pure label */
width: 36px; /* Height of Pure input */
height: 36px;
line-height: 36px;
}
.pure-form-stacked.fv-form-pure .fv-control-feedback {
top: 4px;
}
.pure-form-aligned .pure-control-group .fv-help-block {
margin-top: 5px;
margin-left: 180px;
}
.pure-form-aligned.fv-form-pure .fv-control-feedback, /* Pure horizontal form */
.fv-form-pure .fv-icon-no-label { /* Pure stacked form without label */
top: 0;
}
.fv-form-pure .fv-has-error label,
.fv-form-pure .fv-has-error .fv-help-block,
.fv-form-pure .fv-has-error .fv-control-feedback {
color: #CA3C3C; /* Same as .button-error */
}
.fv-form-pure .fv-has-success label,
.fv-form-pure .fv-has-success .fv-control-feedback {
/*color: #1CB841;*/ /* Same as .button-success */
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~ For Semantic form ~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~ */
.fv-form-semantic .fv-control-feedback.icon {
right: 7px;
}
.fv-form-semantic .error .icon {
color: #d95c5c;
}
/* Semantic horizontal form */
.fv-form-horizontal.fv-form-semantic .row {
padding-bottom: 0;
}
/* ~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~ For UIKit form ~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~ */
.fv-form-uikit .fv-control-feedback {
top: 25px; /* Height of UIKit label */
width: 30px; /* Height of UIKit input */
height: 30px;
line-height: 30px;
}
.fv-form-uikit .uk-text-danger {
display: block;
}
/* UIKit horizontal form */
.uk-form-horizontal.fv-form-uikit .fv-control-feedback {
/*line-height: normal;*/
top: 0;
}
.fv-form-uikit .fv-has-error label,
.fv-form-uikit .fv-has-error .uk-form-label,
.fv-form-uikit .fv-has-error .fv-control-feedback {
color: #D85030; /* Same as .uk-form-danger */
}
.fv-form-uikit .fv-has-success label,
.fv-form-uikit .fv-has-success .uk-form-label,
.fv-form-uikit .fv-has-success .fv-control-feedback {
/*color: #659F13;*/ /* Same as .uk-form-success */
}
/* UIKit stacked form without label */
.fv-form-uikit .fv-icon-no-label {
top: 0;
}