form-group
Version:
## A vue component that resembles bootstraps FormGroup + formControl
1 lines • 10 kB
CSS
.form-group[data-v-17acd4de]{margin:.5rem 0;text-align:left;padding:.5rem 0;display:flex;flex:0 0 auto;flex-flow:row wrap;align-items:center}.form-group [type=checkbox][data-v-17acd4de],.form-group [type=radio][data-v-17acd4de]{width:auto;border:none}.form-group [type=checkbox][data-v-17acd4de]:focus,.form-group [type=radio][data-v-17acd4de]:focus{border:none}.form-group.checkbox[data-v-17acd4de],.form-group.radio[data-v-17acd4de]{width:auto}.form-control[data-v-17acd4de]{display:block;width:100%;height:calc(1.5em + .75rem + 2px);padding:.375rem .75rem;font-size:1rem;position:relative;padding:0 .5rem;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control[data-v-17acd4de]:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}textarea.form-control[data-v-17acd4de]{padding:.5rem;overflow:hidden;outline:none}@media (prefers-reduced-motion:reduce){.form-control[data-v-17acd4de]{transition:none}}.form-control[data-v-17acd4de]::-ms-expand{background-color:transparent;border:0}.form-control[data-v-17acd4de]:-moz-focusring{color:transparent;text-shadow:0 0 0 #495057}.form-control[data-v-17acd4de]::-moz-placeholder{color:#6c757d;opacity:1}.form-control[data-v-17acd4de]:-ms-input-placeholder{color:#6c757d;opacity:1}.form-control[data-v-17acd4de]::-ms-input-placeholder{color:#6c757d;opacity:1}.form-control[data-v-17acd4de]::placeholder{color:#6c757d;opacity:1}.form-control[data-v-17acd4de]:disabled,.form-control[readonly][data-v-17acd4de]{background-color:#e9ecef;opacity:1}.form-control-file[data-v-17acd4de],.form-control-range[data-v-17acd4de]{display:block;width:100%}.valid-feedback[data-v-17acd4de]{display:none;width:100%;margin-top:.25rem;font-size:80%;color:#28a745}.invalid-feedback[data-v-17acd4de]{display:none;width:100%;margin-top:.25rem;font-size:80%;color:#dc3545}.is-valid~.valid-feedback[data-v-17acd4de],.is-valid~.valid-tooltip[data-v-17acd4de],.was-validated :valid~.valid-feedback[data-v-17acd4de],.was-validated :valid~.valid-tooltip[data-v-17acd4de]{display:block}.form-control.is-valid[data-v-17acd4de],.was-validated .form-control[data-v-17acd4de]:valid{border-color:#28a745;padding-right:calc(1.5em + .75rem);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='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");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-valid[data-v-17acd4de]:focus,.was-validated .form-control[data-v-17acd4de]:valid:focus{border-color:#28a745;box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.was-validated textarea.form-control[data-v-17acd4de]:valid,textarea.form-control.is-valid[data-v-17acd4de]{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.custom-select.is-valid[data-v-17acd4de],.was-validated .custom-select[data-v-17acd4de]:valid{border-color:#28a745;padding-right:calc(.75em + 2.3125rem);background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center/8px 10px,url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='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(.75em + .375rem) calc(.75em + .375rem)}.custom-select.is-valid[data-v-17acd4de]:focus,.was-validated .custom-select[data-v-17acd4de]:valid:focus{border-color:#28a745;box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.form-check-input.is-valid~.form-check-label[data-v-17acd4de],.was-validated .form-check-input:valid~.form-check-label[data-v-17acd4de]{color:#28a745}.form-check-input.is-valid~.valid-feedback[data-v-17acd4de],.form-check-input.is-valid~.valid-tooltip[data-v-17acd4de],.was-validated .form-check-input:valid~.valid-feedback[data-v-17acd4de],.was-validated .form-check-input:valid~.valid-tooltip[data-v-17acd4de]{display:block}.custom-control-input.is-valid~.custom-control-label[data-v-17acd4de],.was-validated .custom-control-input:valid~.custom-control-label[data-v-17acd4de]{color:#28a745}.custom-control-input.is-valid~.custom-control-label[data-v-17acd4de]:before,.was-validated .custom-control-input:valid~.custom-control-label[data-v-17acd4de]:before{border-color:#28a745}.custom-control-input.is-valid:checked~.custom-control-label[data-v-17acd4de]:before,.was-validated .custom-control-input:valid:checked~.custom-control-label[data-v-17acd4de]:before{border-color:#34ce57;background-color:#34ce57}.custom-control-input.is-valid:focus~.custom-control-label[data-v-17acd4de]:before,.was-validated .custom-control-input:valid:focus~.custom-control-label[data-v-17acd4de]:before{box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.custom-control-input.is-valid:focus:not(:checked)~.custom-control-label[data-v-17acd4de]:before,.custom-file-input.is-valid~.custom-file-label[data-v-17acd4de],.was-validated .custom-control-input:valid:focus:not(:checked)~.custom-control-label[data-v-17acd4de]:before,.was-validated .custom-file-input:valid~.custom-file-label[data-v-17acd4de]{border-color:#28a745}.custom-file-input.is-valid:focus~.custom-file-label[data-v-17acd4de],.was-validated .custom-file-input:valid:focus~.custom-file-label[data-v-17acd4de]{border-color:#28a745;box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.is-invalid~.invalid-feedback[data-v-17acd4de],.is-invalid~.invalid-tooltip[data-v-17acd4de],.was-validated :invalid~.invalid-feedback[data-v-17acd4de],.was-validated :invalid~.invalid-tooltip[data-v-17acd4de]{display:block}.form-control.is-invalid[data-v-17acd4de],.was-validated .form-control[data-v-17acd4de]:invalid{border-color:#dc3545;padding-right:calc(1.5em + .75rem);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.form-control.is-invalid[data-v-17acd4de]:focus,.was-validated .form-control[data-v-17acd4de]:invalid:focus{border-color:#dc3545;box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}.was-validated textarea.form-control[data-v-17acd4de]:invalid,textarea.form-control.is-invalid[data-v-17acd4de]{padding-right:calc(1.5em + .75rem);background-position:top calc(.375em + .1875rem) right calc(.375em + .1875rem)}.custom-select.is-invalid[data-v-17acd4de],.was-validated .custom-select[data-v-17acd4de]:invalid{border-color:#dc3545;padding-right:calc(.75em + 2.3125rem);background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center/8px 10px,url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3E%3C/svg%3E") #fff no-repeat center right 1.75rem/calc(.75em + .375rem) calc(.75em + .375rem)}.custom-select.is-invalid[data-v-17acd4de]:focus,.was-validated .custom-select[data-v-17acd4de]:invalid:focus{border-color:#dc3545;box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}.form-check-input.is-invalid~.form-check-label[data-v-17acd4de],.was-validated .form-check-input:invalid~.form-check-label[data-v-17acd4de]{color:#dc3545}.form-check-input.is-invalid~.invalid-feedback[data-v-17acd4de],.form-check-input.is-invalid~.invalid-tooltip[data-v-17acd4de],.was-validated .form-check-input:invalid~.invalid-feedback[data-v-17acd4de],.was-validated .form-check-input:invalid~.invalid-tooltip[data-v-17acd4de]{display:block}.custom-control-input.is-invalid~.custom-control-label[data-v-17acd4de],.was-validated .custom-control-input:invalid~.custom-control-label[data-v-17acd4de]{color:#dc3545}.custom-control-input.is-invalid~.custom-control-label[data-v-17acd4de]:before,.was-validated .custom-control-input:invalid~.custom-control-label[data-v-17acd4de]:before{border-color:#dc3545}.custom-control-input.is-invalid:checked~.custom-control-label[data-v-17acd4de]:before,.was-validated .custom-control-input:invalid:checked~.custom-control-label[data-v-17acd4de]:before{border-color:#e4606d;background-color:#e4606d}.custom-control-input.is-invalid:focus~.custom-control-label[data-v-17acd4de]:before,.was-validated .custom-control-input:invalid:focus~.custom-control-label[data-v-17acd4de]:before{box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}.custom-control-input.is-invalid:focus:not(:checked)~.custom-control-label[data-v-17acd4de]:before,.custom-file-input.is-invalid~.custom-file-label[data-v-17acd4de],.was-validated .custom-control-input:invalid:focus:not(:checked)~.custom-control-label[data-v-17acd4de]:before,.was-validated .custom-file-input:invalid~.custom-file-label[data-v-17acd4de]{border-color:#dc3545}.custom-file-input.is-invalid:focus~.custom-file-label[data-v-17acd4de],.was-validated .custom-file-input:invalid:focus~.custom-file-label[data-v-17acd4de]{border-color:#dc3545;box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}label[data-v-17acd4de]{margin-bottom:-.3rem;background:#fff;z-index:2;margin-left:.5rem}