react-dynamic-inputs
Version:
Lightweight component for creating dynamic inputs
2 lines • 1.34 kB
CSS
.dir__main{width:100%}.dir__wrapper{gap:1rem}.dir__inputs-wrapper,.dir__wrapper{display:flex;flex-direction:column;width:100%}.dir__inputs-wrapper{gap:.75rem}.dir__item{width:100%}.dir__input-group{align-items:center;display:flex;gap:.5rem;width:100%}.dir__input{border:1px solid #d1d5db;border-radius:.375rem;flex:1;font-size:1rem;line-height:1.5;padding:.5rem .75rem;transition:all .2s ease-in-out}.dir__input:focus{border-color:transparent;box-shadow:0 0 0 2px #3b82f6;outline:none}.dir__remove-btn{align-items:center;background-color:#e2e8f0;border:none;border-radius:9999px;cursor:pointer;display:flex;justify-content:center;padding:.25rem;transition:all .2s ease-in-out}.dir__remove-btn:hover{background-color:#cbd5e1;color:#dc2626}.dir__remove-btn:disabled{opacity:.5;pointer-events:none}.dir__add-btn{background-color:#3b82f6;border:none;border-radius:.375rem;color:#fff;cursor:pointer;font-size:1rem;padding:.5rem 1rem;transition:background-color .2s ease-in-out}.dir__add-btn:hover{background-color:#2563eb}.dir--disabled,.dir__add-btn:disabled{opacity:.5;pointer-events:none}.dir--error .dir__input{border-color:#ef4444}.dir--error .dir__input:focus{box-shadow:0 0 0 2px #ef4444}.dir--success .dir__input{border-color:#22c55e}.dir--success .dir__input:focus{box-shadow:0 0 0 2px #22c55e}
/*# sourceMappingURL=index.css.map */