1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | .form-control {
|
8 | display: block;
|
9 | width: 100%;
|
10 | height: $input-height;
|
11 | padding: $input-padding-y $input-padding-x;
|
12 | font-family: $input-font-family;
|
13 | @include font-size($input-font-size);
|
14 | font-weight: $input-font-weight;
|
15 | line-height: $input-line-height;
|
16 | color: $input-color;
|
17 | background-color: $input-bg;
|
18 | background-clip: padding-box;
|
19 | border: $input-border-width solid $input-border-color;
|
20 |
|
21 |
|
22 | @include border-radius($input-border-radius, 0);
|
23 |
|
24 | @include box-shadow($input-box-shadow);
|
25 | @include transition($input-transition);
|
26 |
|
27 |
|
28 | &::-ms-expand {
|
29 | background-color: transparent;
|
30 | border: 0;
|
31 | }
|
32 |
|
33 |
|
34 | &:-moz-focusring {
|
35 | color: transparent;
|
36 | text-shadow: 0 0 0 $input-color;
|
37 | }
|
38 |
|
39 |
|
40 | @include form-control-focus($ignore-warning: true);
|
41 |
|
42 |
|
43 | &::placeholder {
|
44 | color: $input-placeholder-color;
|
45 |
|
46 | opacity: 1;
|
47 | }
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 |
|
54 | &:disabled,
|
55 | &[readonly] {
|
56 | background-color: $input-disabled-bg;
|
57 |
|
58 | opacity: 1;
|
59 | }
|
60 | }
|
61 |
|
62 | input[type="date"],
|
63 | input[type="time"],
|
64 | input[type="datetime-local"],
|
65 | input[type="month"] {
|
66 | &.form-control {
|
67 | appearance: none;
|
68 | }
|
69 | }
|
70 |
|
71 | select.form-control {
|
72 | &:focus::-ms-value {
|
73 | // Suppress the nested default white text on blue background highlight given to
|
74 | // the selected option text when the (still closed) <select> receives focus
|
75 | // in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
|
76 | // match the appearance of the native widget.
|
77 | // See https://github.com/twbs/bootstrap/issues/19398.
|
78 | color: $input-color;
|
79 | background-color: $input-bg;
|
80 | }
|
81 | }
|
82 |
|
83 |
|
84 | .form-control-file,
|
85 | .form-control-range {
|
86 | display: block;
|
87 | width: 100%;
|
88 | }
|
89 |
|
90 |
|
91 |
|
92 |
|
93 |
|
94 |
|
95 |
|
96 |
|
97 | .col-form-label {
|
98 | padding-top: add($input-padding-y, $input-border-width);
|
99 | padding-bottom: add($input-padding-y, $input-border-width);
|
100 | margin-bottom: 0;
|
101 | @include font-size(inherit);
|
102 | line-height: $input-line-height;
|
103 | }
|
104 |
|
105 | .col-form-label-lg {
|
106 | padding-top: add($input-padding-y-lg, $input-border-width);
|
107 | padding-bottom: add($input-padding-y-lg, $input-border-width);
|
108 | @include font-size($input-font-size-lg);
|
109 | line-height: $input-line-height-lg;
|
110 | }
|
111 |
|
112 | .col-form-label-sm {
|
113 | padding-top: add($input-padding-y-sm, $input-border-width);
|
114 | padding-bottom: add($input-padding-y-sm, $input-border-width);
|
115 | @include font-size($input-font-size-sm);
|
116 | line-height: $input-line-height-sm;
|
117 | }
|
118 |
|
119 |
|
120 |
|
121 |
|
122 |
|
123 |
|
124 |
|
125 | .form-control-plaintext {
|
126 | display: block;
|
127 | width: 100%;
|
128 | padding: $input-padding-y 0;
|
129 | margin-bottom: 0;
|
130 | @include font-size($input-font-size);
|
131 | line-height: $input-line-height;
|
132 | color: $input-plaintext-color;
|
133 | background-color: transparent;
|
134 | border: solid transparent;
|
135 | border-width: $input-border-width 0;
|
136 |
|
137 | &.form-control-sm,
|
138 | &.form-control-lg {
|
139 | padding-right: 0;
|
140 | padding-left: 0;
|
141 | }
|
142 | }
|
143 |
|
144 |
|
145 |
|
146 |
|
147 |
|
148 |
|
149 |
|
150 |
|
151 |
|
152 | .form-control-sm {
|
153 | height: $input-height-sm;
|
154 | padding: $input-padding-y-sm $input-padding-x-sm;
|
155 | @include font-size($input-font-size-sm);
|
156 | line-height: $input-line-height-sm;
|
157 | @include border-radius($input-border-radius-sm);
|
158 | }
|
159 |
|
160 | .form-control-lg {
|
161 | height: $input-height-lg;
|
162 | padding: $input-padding-y-lg $input-padding-x-lg;
|
163 | @include font-size($input-font-size-lg);
|
164 | line-height: $input-line-height-lg;
|
165 | @include border-radius($input-border-radius-lg);
|
166 | }
|
167 |
|
168 |
|
169 | select.form-control {
|
170 | &[size],
|
171 | &[multiple] {
|
172 | height: auto;
|
173 | }
|
174 | }
|
175 |
|
176 | textarea.form-control {
|
177 | height: auto;
|
178 | }
|
179 |
|
180 |
|
181 |
|
182 |
|
183 |
|
184 |
|
185 | .form-group {
|
186 | margin-bottom: $form-group-margin-bottom;
|
187 | }
|
188 |
|
189 | .form-text {
|
190 | display: block;
|
191 | margin-top: $form-text-margin-top;
|
192 | }
|
193 |
|
194 |
|
195 |
|
196 |
|
197 |
|
198 |
|
199 | .form-row {
|
200 | display: flex;
|
201 | flex-wrap: wrap;
|
202 | margin-right: -$form-grid-gutter-width / 2;
|
203 | margin-left: -$form-grid-gutter-width / 2;
|
204 |
|
205 | > .col,
|
206 | > [class*="col-"] {
|
207 | padding-right: $form-grid-gutter-width / 2;
|
208 | padding-left: $form-grid-gutter-width / 2;
|
209 | }
|
210 | }
|
211 |
|
212 |
|
213 |
|
214 |
|
215 |
|
216 |
|
217 | .form-check {
|
218 | position: relative;
|
219 | display: block;
|
220 | padding-left: $form-check-input-gutter;
|
221 | }
|
222 |
|
223 | .form-check-input {
|
224 | position: absolute;
|
225 | margin-top: $form-check-input-margin-y;
|
226 | margin-left: -$form-check-input-gutter;
|
227 |
|
228 |
|
229 | &[disabled] ~ .form-check-label,
|
230 | &:disabled ~ .form-check-label {
|
231 | color: $text-muted;
|
232 | }
|
233 | }
|
234 |
|
235 | .form-check-label {
|
236 | margin-bottom: 0;
|
237 | }
|
238 |
|
239 | .form-check-inline {
|
240 | display: inline-flex;
|
241 | align-items: center;
|
242 | padding-left: 0;
|
243 | margin-right: $form-check-inline-margin-x;
|
244 |
|
245 |
|
246 | .form-check-input {
|
247 | position: static;
|
248 | margin-top: 0;
|
249 | margin-right: $form-check-inline-input-margin-x;
|
250 | margin-left: 0;
|
251 | }
|
252 | }
|
253 |
|
254 |
|
255 |
|
256 |
|
257 |
|
258 |
|
259 |
|
260 |
|
261 |
|
262 | @each $state, $data in $form-validation-states {
|
263 | @include form-validation-state($state, map-get($data, color), map-get($data, icon));
|
264 | }
|
265 |
|
266 |
|
267 |
|
268 |
|
269 |
|
270 |
|
271 |
|
272 |
|
273 |
|
274 |
|
275 | .form-inline {
|
276 | display: flex;
|
277 | flex-flow: row wrap;
|
278 | align-items: center;
|
279 |
|
280 |
|
281 |
|
282 |
|
283 | .form-check {
|
284 | width: 100%;
|
285 | }
|
286 |
|
287 |
|
288 | @include media-breakpoint-up(sm) {
|
289 | label {
|
290 | display: flex;
|
291 | align-items: center;
|
292 | justify-content: center;
|
293 | margin-bottom: 0;
|
294 | }
|
295 |
|
296 |
|
297 | .form-group {
|
298 | display: flex;
|
299 | flex: 0 0 auto;
|
300 | flex-flow: row wrap;
|
301 | align-items: center;
|
302 | margin-bottom: 0;
|
303 | }
|
304 |
|
305 |
|
306 | .form-control {
|
307 | display: inline-block;
|
308 | width: auto;
|
309 | vertical-align: middle;
|
310 | }
|
311 |
|
312 |
|
313 | .form-control-plaintext {
|
314 | display: inline-block;
|
315 | }
|
316 |
|
317 | .input-group,
|
318 | .custom-select {
|
319 | width: auto;
|
320 | }
|
321 |
|
322 |
|
323 |
|
324 | .form-check {
|
325 | display: flex;
|
326 | align-items: center;
|
327 | justify-content: center;
|
328 | width: auto;
|
329 | padding-left: 0;
|
330 | }
|
331 | .form-check-input {
|
332 | position: relative;
|
333 | flex-shrink: 0;
|
334 | margin-top: 0;
|
335 | margin-right: $form-check-input-margin-x;
|
336 | margin-left: 0;
|
337 | }
|
338 |
|
339 | .custom-control {
|
340 | align-items: center;
|
341 | justify-content: center;
|
342 | }
|
343 | .custom-control-label {
|
344 | margin-bottom: 0;
|
345 | }
|
346 | }
|
347 | }
|