PluginProbe
ezCache / 1.3
ezCache v1.3
2.6.5 2.6.4 2.6.2 2.6.3 2.6.1 2.6.0 2.5.6 2.5.5 2.5.4 2.5.3 2.5.2 2.5.1 2.5 2.2.1 2.2.2 trunk 1.2 1.2.1 1.2.2 1.2.3 1.2.4 1.3 1.3.1 1.3.10 1.3.11 All 49 releases
ezcache / assets / src / scss / _forms.scss

_forms.scss in ezCache 1.3, at assets/src/scss/_forms.scss

629 lines 16.9 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 input,
2 button,
3 select,
4 optgroup,
5 textarea {
6 margin: 0;
7 font-family: inherit;
8 font-size: inherit;
9 line-height: inherit;
10 }
11
12 button,
13 input {
14 overflow: visible;
15 }
16
17 button,
18 select {
19 text-transform: none;
20 }
21
22 select {
23 word-wrap: normal;
24 }
25
26 button,
27 [type="button"]="button""],
28 [type="reset"]="reset""],
29 [type="submit"]="submit""] {
30 -webkit-appearance: button;
31 }
32
33 button:not(:disabled),
34 [type="button"]="button""]:not(:disabled),
35 [type="reset"]="reset""]:not(:disabled),
36 [type="submit"]="submit""]:not(:disabled) {
37 cursor: pointer;
38 }
39
40 button::-moz-focus-inner,
41 [type="button"]="button""]::-moz-focus-inner,
42 [type="reset"]="reset""]::-moz-focus-inner,
43 [type="submit"]="submit""]::-moz-focus-inner {
44 padding: 0;
45 border-style: none;
46 }
47
48 input[type="radio"]="radio""],
49 input[type="checkbox"]="checkbox""] {
50 box-sizing: border-box;
51 padding: 0;
52 }
53
54 input[type="date"]="date""],
55 input[type="time"]="time""],
56 input[type="datetime-local"]="datetime-local""],
57 input[type="month"]="month""] {
58 -webkit-appearance: listbox;
59 }
60
61 textarea {
62 overflow: auto;
63 resize: vertical;
64 }
65
66 fieldset {
67 min-width: 0;
68 padding: 0;
69 margin: 0;
70 border: 0;
71 }
72
73 legend {
74 display: block;
75 width: 100%;
76 max-width: 100%;
77 padding: 0;
78 margin-bottom: .5rem;
79 font-size: 1.5rem;
80 line-height: inherit;
81 color: inherit;
82 white-space: normal;
83 }
84
85 progress {
86 vertical-align: baseline;
87 }
88
89 [type="number"]="number""]::-webkit-inner-spin-button,
90 [type="number"]="number""]::-webkit-outer-spin-button {
91 height: auto;
92 }
93
94 [type="search"]="search""] {
95 outline-offset: -2px;
96 -webkit-appearance: none;
97 }
98
99 [type="search"]="search""]::-webkit-search-decoration {
100 -webkit-appearance: none;
101 }
102
103 ::-webkit-file-upload-button {
104 font: inherit;
105 -webkit-appearance: button;
106 }
107
108
109 .form-control {
110 display: block;
111 width: 100%;
112 height: calc(1.5em + 0.75rem + 2px);
113 padding: 0.375rem 0.75rem;
114 font-size: 1rem;
115 font-weight: 400;
116 line-height: 1.5;
117 color: #495057;
118 background-color: #fff;
119 background-clip: padding-box;
120 border: 1px solid #ced4da;
121 border-radius: 0.25rem;
122 transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
123 }
124
125 @media (prefers-reduced-motion: reduce) {
126 .form-control {
127 transition: none;
128 }
129 }
130
131 .form-control::-ms-expand {
132 background-color: transparent;
133 border: 0;
134 }
135
136 .form-control:focus {
137 color: #495057;
138 background-color: #fff;
139 border-color: #80bdff;
140 outline: 0;
141 box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
142 }
143
144 .form-control::-webkit-input-placeholder {
145 color: #e5e5e5;
146 opacity: 1;
147 }
148
149 .form-control::-moz-placeholder {
150 color: #e5e5e5;
151 opacity: 1;
152 }
153
154 .form-control:-ms-input-placeholder {
155 color: #e5e5e5;
156 opacity: 1;
157 }
158
159 .form-control::-ms-input-placeholder {
160 color: #e5e5e5;
161 opacity: 1;
162 }
163
164 .form-control::placeholder {
165 color: #e5e5e5;
166 opacity: 1;
167 }
168
169 .form-control:disabled, .form-control[readonly]] {
170 background-color: #e9ecef;
171 opacity: 1;
172 }
173
174 select.form-control:focus::-ms-value {
175 color: #495057;
176 background-color: #fff;
177 }
178
179 .form-control-file,
180 .form-control-range {
181 display: block;
182 width: 100%;
183 }
184
185 .col-form-label {
186 padding-top: calc(0.375rem + 1px);
187 padding-bottom: calc(0.375rem + 1px);
188 margin-bottom: 0;
189 font-size: inherit;
190 line-height: 1.5;
191 }
192
193 .col-form-label-lg {
194 padding-top: calc(0.5rem + 1px);
195 padding-bottom: calc(0.5rem + 1px);
196 font-size: 1.25rem;
197 line-height: 1.5;
198 }
199
200 .col-form-label-sm {
201 padding-top: calc(0.25rem + 1px);
202 padding-bottom: calc(0.25rem + 1px);
203 font-size: 0.875rem;
204 line-height: 1.5;
205 }
206
207 .form-control-plaintext {
208 display: block;
209 width: 100%;
210 padding-top: 0.375rem;
211 padding-bottom: 0.375rem;
212 margin-bottom: 0;
213 line-height: 1.5;
214 color: #212529;
215 background-color: transparent;
216 border: solid transparent;
217 border-width: 1px 0;
218 }
219
220 .form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {
221 padding-right: 0;
222 padding-left: 0;
223 }
224
225 .form-control-sm {
226 height: calc(1.5em + 0.5rem + 2px);
227 padding: 0.25rem 0.5rem;
228 font-size: 0.875rem;
229 line-height: 1.5;
230 border-radius: 0.2rem;
231 }
232
233 .form-control-lg {
234 height: calc(1.5em + 1rem + 2px);
235 padding: 0.5rem 1rem;
236 font-size: 1.25rem;
237 line-height: 1.5;
238 border-radius: 0.3rem;
239 }
240
241 select.form-control[size]], select.form-control[multiple]] {
242 height: auto;
243 }
244
245 textarea.form-control {
246 height: auto;
247 }
248
249 .form-group {
250 margin-bottom: 1rem;
251 }
252
253 .form-text {
254 display: block;
255 margin-top: 0.25rem;
256 }
257
258 .form-row {
259 display: -ms-flexbox;
260 display: flex;
261 -ms-flex-wrap: wrap;
262 flex-wrap: wrap;
263 margin-right: -5px;
264 margin-left: -5px;
265 }
266
267 .form-row > .col,
268 .form-row > [class*="col-"]*="col-""] {
269 padding-right: 5px;
270 padding-left: 5px;
271 }
272
273 .form-check {
274 position: relative;
275 display: block;
276 padding-left: 1.25rem;
277 }
278
279 .form-check-input {
280 position: absolute;
281 margin-top: 0.3rem;
282 margin-left: -1.25rem;
283 }
284
285 .form-check-input:disabled ~ .form-check-label {
286 color: #6c757d;
287 }
288
289 .form-check-label {
290 margin-bottom: 0;
291 }
292
293 .form-check-inline {
294 display: -ms-inline-flexbox;
295 display: inline-flex;
296 -ms-flex-align: center;
297 align-items: center;
298 padding-left: 0;
299 margin-right: 0.75rem;
300 }
301
302 .form-check-inline .form-check-input {
303 position: static;
304 margin-top: 0;
305 margin-right: 0.3125rem;
306 margin-left: 0;
307 }
308
309 .valid-feedback {
310 display: none;
311 width: 100%;
312 margin-top: 0.25rem;
313 font-size: 80%;
314 color: #28a745;
315 }
316
317 .valid-tooltip {
318 position: absolute;
319 top: 100%;
320 z-index: 5;
321 display: none;
322 max-width: 100%;
323 padding: 0.25rem 0.5rem;
324 margin-top: .1rem;
325 font-size: 0.875rem;
326 line-height: 1.5;
327 color: #fff;
328 background-color: rgba(40, 167, 69, 0.9);
329 border-radius: 0.25rem;
330 }
331
332 .was-validated .form-control:valid, .form-control.is-valid {
333 border-color: #28a745;
334 padding-right: calc(1.5em + 0.75rem);
335 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
336 background-repeat: no-repeat;
337 background-position: center right calc(0.375em + 0.1875rem);
338 background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
339 }
340
341 .was-validated .form-control:valid:focus, .form-control.is-valid:focus {
342 border-color: #28a745;
343 box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
344 }
345
346 .was-validated .form-control:valid ~ .valid-feedback,
347 .was-validated .form-control:valid ~ .valid-tooltip, .form-control.is-valid ~ .valid-feedback,
348 .form-control.is-valid ~ .valid-tooltip {
349 display: block;
350 }
351
352 .was-validated textarea.form-control:valid, textarea.form-control.is-valid {
353 padding-right: calc(1.5em + 0.75rem);
354 background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
355 }
356
357 .was-validated .custom-select:valid, .custom-select.is-valid {
358 border-color: #28a745;
359 padding-right: calc((1em + 0.75rem) * 3 / 4 + 1.75rem);
360 background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
361 }
362
363 .was-validated .custom-select:valid:focus, .custom-select.is-valid:focus {
364 border-color: #28a745;
365 box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
366 }
367
368 .was-validated .custom-select:valid ~ .valid-feedback,
369 .was-validated .custom-select:valid ~ .valid-tooltip, .custom-select.is-valid ~ .valid-feedback,
370 .custom-select.is-valid ~ .valid-tooltip {
371 display: block;
372 }
373
374 .was-validated .form-control-file:valid ~ .valid-feedback,
375 .was-validated .form-control-file:valid ~ .valid-tooltip, .form-control-file.is-valid ~ .valid-feedback,
376 .form-control-file.is-valid ~ .valid-tooltip {
377 display: block;
378 }
379
380 .was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
381 color: #28a745;
382 }
383
384 .was-validated .form-check-input:valid ~ .valid-feedback,
385 .was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback,
386 .form-check-input.is-valid ~ .valid-tooltip {
387 display: block;
388 }
389
390 .was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label {
391 color: #28a745;
392 }
393
394 .was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before {
395 border-color: #28a745;
396 }
397
398 .was-validated .custom-control-input:valid ~ .valid-feedback,
399 .was-validated .custom-control-input:valid ~ .valid-tooltip, .custom-control-input.is-valid ~ .valid-feedback,
400 .custom-control-input.is-valid ~ .valid-tooltip {
401 display: block;
402 }
403
404 .was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before {
405 border-color: #34ce57;
406 background-color: #34ce57;
407 }
408
409 .was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before {
410 box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
411 }
412
413 .was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before {
414 border-color: #28a745;
415 }
416
417 .was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label {
418 border-color: #28a745;
419 }
420
421 .was-validated .custom-file-input:valid ~ .valid-feedback,
422 .was-validated .custom-file-input:valid ~ .valid-tooltip, .custom-file-input.is-valid ~ .valid-feedback,
423 .custom-file-input.is-valid ~ .valid-tooltip {
424 display: block;
425 }
426
427 .was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label {
428 border-color: #28a745;
429 box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
430 }
431
432 .invalid-feedback {
433 display: none;
434 width: 100%;
435 margin-top: 0.25rem;
436 font-size: 80%;
437 color: #dc3545;
438 }
439
440 .invalid-tooltip {
441 position: absolute;
442 top: 100%;
443 z-index: 5;
444 display: none;
445 max-width: 100%;
446 padding: 0.25rem 0.5rem;
447 margin-top: .1rem;
448 font-size: 0.875rem;
449 line-height: 1.5;
450 color: #fff;
451 background-color: rgba(220, 53, 69, 0.9);
452 border-radius: 0.25rem;
453 }
454
455 .was-validated .form-control:invalid, .form-control.is-invalid {
456 border-color: #dc3545;
457 padding-right: calc(1.5em + 0.75rem);
458 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
459 background-repeat: no-repeat;
460 background-position: center right calc(0.375em + 0.1875rem);
461 background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
462 }
463
464 .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
465 border-color: #dc3545;
466 box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
467 }
468
469 .was-validated .form-control:invalid ~ .invalid-feedback,
470 .was-validated .form-control:invalid ~ .invalid-tooltip, .form-control.is-invalid ~ .invalid-feedback,
471 .form-control.is-invalid ~ .invalid-tooltip {
472 display: block;
473 }
474
475 .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
476 padding-right: calc(1.5em + 0.75rem);
477 background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
478 }
479
480 .was-validated .custom-select:invalid, .custom-select.is-invalid {
481 border-color: #dc3545;
482 padding-right: calc((1em + 0.75rem) * 3 / 4 + 1.75rem);
483 background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
484 }
485
486 .was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus {
487 border-color: #dc3545;
488 box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
489 }
490
491 .was-validated .custom-select:invalid ~ .invalid-feedback,
492 .was-validated .custom-select:invalid ~ .invalid-tooltip, .custom-select.is-invalid ~ .invalid-feedback,
493 .custom-select.is-invalid ~ .invalid-tooltip {
494 display: block;
495 }
496
497 .was-validated .form-control-file:invalid ~ .invalid-feedback,
498 .was-validated .form-control-file:invalid ~ .invalid-tooltip, .form-control-file.is-invalid ~ .invalid-feedback,
499 .form-control-file.is-invalid ~ .invalid-tooltip {
500 display: block;
501 }
502
503 .was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
504 color: #dc3545;
505 }
506
507 .was-validated .form-check-input:invalid ~ .invalid-feedback,
508 .was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback,
509 .form-check-input.is-invalid ~ .invalid-tooltip {
510 display: block;
511 }
512
513 .was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label {
514 color: #dc3545;
515 }
516
517 .was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before {
518 border-color: #dc3545;
519 }
520
521 .was-validated .custom-control-input:invalid ~ .invalid-feedback,
522 .was-validated .custom-control-input:invalid ~ .invalid-tooltip, .custom-control-input.is-invalid ~ .invalid-feedback,
523 .custom-control-input.is-invalid ~ .invalid-tooltip {
524 display: block;
525 }
526
527 .was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before {
528 border-color: #e4606d;
529 background-color: #e4606d;
530 }
531
532 .was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before {
533 box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
534 }
535
536 .was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before {
537 border-color: #dc3545;
538 }
539
540 .was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label {
541 border-color: #dc3545;
542 }
543
544 .was-validated .custom-file-input:invalid ~ .invalid-feedback,
545 .was-validated .custom-file-input:invalid ~ .invalid-tooltip, .custom-file-input.is-invalid ~ .invalid-feedback,
546 .custom-file-input.is-invalid ~ .invalid-tooltip {
547 display: block;
548 }
549
550 .was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label {
551 border-color: #dc3545;
552 box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
553 }
554
555 .form-inline {
556 display: -ms-flexbox;
557 display: flex;
558 -ms-flex-flow: row wrap;
559 flex-flow: row wrap;
560 -ms-flex-align: center;
561 align-items: center;
562 }
563
564 .form-inline .form-check {
565 width: 100%;
566 }
567
568 @media (min-width: 576px) {
569 .form-inline label {
570 display: -ms-flexbox;
571 display: flex;
572 -ms-flex-align: center;
573 align-items: center;
574 -ms-flex-pack: center;
575 justify-content: center;
576 margin-bottom: 0;
577 }
578 .form-inline .form-group {
579 display: -ms-flexbox;
580 display: flex;
581 -ms-flex: 0 0 auto;
582 flex: 0 0 auto;
583 -ms-flex-flow: row wrap;
584 flex-flow: row wrap;
585 -ms-flex-align: center;
586 align-items: center;
587 margin-bottom: 0;
588 }
589 .form-inline .form-control {
590 display: inline-block;
591 width: auto;
592 vertical-align: middle;
593 }
594 .form-inline .form-control-plaintext {
595 display: inline-block;
596 }
597 .form-inline .input-group,
598 .form-inline .custom-select {
599 width: auto;
600 }
601 .form-inline .form-check {
602 display: -ms-flexbox;
603 display: flex;
604 -ms-flex-align: center;
605 align-items: center;
606 -ms-flex-pack: center;
607 justify-content: center;
608 width: auto;
609 padding-left: 0;
610 }
611 .form-inline .form-check-input {
612 position: relative;
613 -ms-flex-negative: 0;
614 flex-shrink: 0;
615 margin-top: 0;
616 margin-right: 0.25rem;
617 margin-left: 0;
618 }
619 .form-inline .custom-control {
620 -ms-flex-align: center;
621 align-items: center;
622 -ms-flex-pack: center;
623 justify-content: center;
624 }
625 .form-inline .custom-control-label {
626 margin-bottom: 0;
627 }
628 }
629