@vue-interface/input-field/dist/style.css

A Vue input field component.

.input-field,.input-field .form-group-inner{position:relative;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out}.input-field .activity-indicator{position:absolute;right:0;top:50%;-webkit-transform:translate(-1rem,-50%);transform:translate(-1rem,-50%);-webkit-transition:all .15s ease-in;transition:all .15s ease-in}.input-field .activity-indicator-xs{font-size:.5em}.input-field.has-activity .form-control-xs{padding-right:3.75em}.input-field .activity-indicator-sm{font-size:.5em}.input-field.has-activity .form-control-sm{padding-right:3em}.input-field .activity-indicator-md{font-size:.666em}.input-field.has-activity .form-control-md{padding-right:3em}.input-field .activity-indicator-lg{font-size:.75em}.input-field.has-activity .form-control-lg{padding-right:3em}.input-field .activity-indicator-xl{font-size:1em}.input-field.has-activity .activity-indicator-xl~.form-control-xl{padding-right:3.75em}.input-field .activity-indicator{opacity:1}.input-field .input-field-fade-enter,.input-field .input-field-fade-leave-to{opacity:0}.input-field.is-valid .valid-feedback,.input-field.is-invalid .invalid-feedback{display:-webkit-box;display:-ms-flexbox;display:flex}.input-field .form-control-icon{padding-left:2em}.input-field .form-group-inner-icon{position:absolute;top:50%;left:.5em;width:1em;font-size:1.25em;-webkit-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.input-field-sm .form-group-inner-icon{font-size:1em}.input-field-lg .form-group-inner-icon{left:.4em;font-size:1.75em}