t-fighting-design/theme/input.css

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

.f-input{display:inline-flex;justify-content:center;align-items:center;flex-wrap:nowrap;height:35px;width:100%}.f-input__wrapper{display:inline-flex;flex:1;justify-content:center;align-items:center;padding:3px 7px;box-sizing:border-box;transition:.3s;background:#eee;height:100%;border:1px solid transparent}.f-input__wrapper .f-input__icon{color:#333}.f-input__wrapper .f-input__input{height:100%;width:100%;border:none;outline:none;background:none;margin:0 5px;color:#333;font-size:14px}.f-input__wrapper .f-input__show-password,.f-input__wrapper .f-input__clear-btn{cursor:pointer;color:#c3c3c3}.f-input__wrapper:focus-within{background:#fff;border-color:#2d5af1}.f-input__search{cursor:pointer}.f-input__search .f-button{border-top-left-radius:0;border-bottom-left-radius:0}.f-input__disabled{cursor:not-allowed}.f-input__disabled .f-input__clear-btn,.f-input__disabled .f-input__input{cursor:not-allowed;color:#757575}.f-input.f-input__large{height:40px}.f-input.f-input__large .f-input__input{font-size:15px}.f-input.f-input__middle{height:35px}.f-input.f-input__middle .f-input__input{font-size:14px}.f-input.f-input__small{height:30px}.f-input.f-input__small .f-input__input{font-size:13px}.f-input.f-input__mini{height:25px}.f-input.f-input__mini .f-input__input{font-size:12px}