@avarock/react-form/dist/styles.css

A customizable React form library with modular input components for building flexible forms

.form{margin:0 auto;display:grid;grid-template-columns:1fr;place-items:center;gap:2.5rem 4rem;font-family:sans-serif;padding:2rem}.form *{box-sizing:border-box}.form--light{--clr-btn-bg: #2d2d2d;--clr-btn-border: #0066cc;--clr-btn-font: #efefef;--clr-input-bg: #f0f0f0;--clr-input-bg-disabled: #e0e0e0;--clr-input-label: #0066cc;--clr-input-font: #414141;--clr-input-error: #d32f2f;--clr-input-outline: #d8d8d8;--clr-input-icon: #525252;--clr-input-placeholder: #a5a5a5;--clr-input-a-label: #c9c9c9;--clr-input-a-label-focus: #0066cc;--clr-input-a-font: #414141;--clr-input-a-border: #e3e3e3}.form--dark{--clr-btn-bg: #1a1a1a;--clr-btn-border: #3f99e7;--clr-btn-font: #efefef;--clr-input-bg: #1a1a1a;--clr-input-bg-disabled: #2c2c2c;--clr-input-label: #3f99e7;--clr-input-font: #efefef;--clr-input-error: #ca2424;--clr-input-outline: #c4c4c4;--clr-input-icon: #f1f1f1;--clr-input-placeholder: #b7b7b7;--clr-input-a-label: rgba(196, 196, 196, 0.816);--clr-input-a-label-focus: #3f99e7;--clr-input-a-font: #efefef;--clr-input-a-border: #f1f1f1}.form__submit{grid-column:1/-1;place-self:end end;font-size:1.125rem;border-radius:.5rem;border:1px solid rgba(0,0,0,0);padding:.75rem 1.5rem;font-family:inherit;font-weight:500;color:var(--clr-btn-font);background-color:var(--clr-btn-bg);transition:border-color .25s;cursor:pointer}.form__submit:hover{border-color:var(--clr-btn-border)}.form__submit:focus,.form__submit:focus-visible{outline:1px solid var(--clr-btn-border)}.input{position:relative;width:100%;font:inherit;color:inherit;text-align:left;display:grid;gap:4px}.input__container{position:relative}.input__label{width:fit-content;font-size:.9375rem;color:var(--clr-input-label);text-transform:uppercase}.input__error{margin-top:2px;width:fit-content;font-size:.875rem;color:var(--clr-input-error)}.input__icon{position:absolute;top:50%;translate:0 -50%;right:.875rem;height:1.5rem;width:1.5rem;font-family:inherit;color:var(--clr-input-icon);fill:var(--clr-input-icon);cursor:pointer;background:rgba(0,0,0,0);outline:none;border:none;padding:0}.input__icon svg{width:100%;height:100%}.input__field-base{font:inherit;color:inherit;width:100%;padding:.675rem 1.125rem;font-size:1.125rem;border:none;border-radius:6px;background-color:var(--clr-input-bg);color:var(--clr-input-font)}.input__field-base:focus{outline:1px solid var(--clr-input-outline)}.input__field-base:disabled{background-color:var(--clr-input-bg-disabled)}.input__field-base--error,.input__field-base:user-invalid{border:1px solid var(--clr-input-error)}.input__field-base::placeholder{color:var(--clr-input-placeholder)}.input__field-password{padding-right:2.875rem}.input__field-select{appearance:none;cursor:pointer}.input__field-select~.input__icon{height:1.25rem;width:1.25rem;transition:.3s cubic-bezier(0.46, 0.03, 0.52, 0.96)}.input__field-select:focus~.input__icon{rotate:180deg}.input__field-textarea{resize:none;min-height:6rem}.input__field-textarea::-webkit-scrollbar{width:.25rem}.input__field-textarea::-webkit-scrollbar-track{margin:.25rem}.input__field-textarea::-webkit-scrollbar-thumb{background-color:var(--clr-input-outline);border-radius:1rem}.input__field-textarea~.input__count{position:absolute;right:.875rem;bottom:.875rem;font-size:.875rem;color:var(--clr-input-font);padding:2px 4px;border-radius:4px;background-color:var(--clr-input-bg)}.input__container-radio{margin-top:.5rem;display:flex;align-items:center;flex-wrap:wrap;gap:1.75rem}.input__field-radio{position:relative;top:1px;cursor:pointer;appearance:none;height:1rem;width:1rem;margin-right:.375rem;border:2px solid var(--clr-input-font);border-radius:50%;transition:.2s ease-out}.input__field-radio:checked{border:2px solid var(--clr-input-label)}.input__field-radio::before{position:absolute;top:50%;left:50%;translate:-50% -50%;content:"";display:inline-block;height:70%;width:70%;border-radius:50%;background-color:var(--clr-input-label);scale:0;transition:scale .2s ease-out}.input__field-radio:checked::before{scale:1}.input__label-radio{font:inherit;font-size:1.125rem;color:var(--clr-input-font);cursor:pointer}.input:has(.input__container-checkbox){align-self:end}.input__container-checkbox{display:flex;gap:2rem}.input__field-checkbox{position:relative;bottom:5.5px;cursor:pointer;appearance:none;height:1.25rem;width:1.25rem;border:2px solid var(--clr-input-font);border-radius:4px}.input__field-checkbox:checked{border:2px solid var(--clr-input-label)}.input__field-checkbox::before{position:absolute;top:50%;left:50%;translate:-50% -50%;content:"";display:inline-block;height:75%;width:75%;border-radius:2px;background-color:var(--clr-input-label);scale:0;transition:scale .2s ease-out;transform-origin:bottom left;clip-path:polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%)}.input__field-checkbox:checked::before{scale:1}.input-animated{width:100%;align-self:end;margin:0 auto 2px;font:inherit;color:inherit;text-align:left;display:grid;gap:6px;transition:margin .2s ease-out}.input-animated:has(.input-animated__field:focus),.input-animated:has(.input-animated__field:not(:placeholder-shown)){margin-top:1.375rem}.input-animated__container{position:relative}.input-animated__label{position:absolute;left:0;bottom:.125rem;font-size:1.125rem;color:var(--clr-input-a-label);cursor:text;letter-spacing:1px;transition:.5s;text-transform:uppercase}.input-animated__field:focus~.input-animated__label,.input-animated__field:not(:placeholder-shown)~.input-animated__label{font-size:.9375rem;color:var(--clr-input-a-label-focus);transform:translateY(-2.25rem);transition:.5s}.input-animated .input__icon{top:50%;right:.25rem}.input-animated__field{width:100%;background-color:rgba(0,0,0,0);border:none;font-size:1.125rem;color:var(--clr-input-a-font);padding:.5rem 0}.input-animated__field:focus{outline:none}.input-animated__password{padding-right:2.25rem}.input-animated__error{width:fit-content;font-size:.875rem;color:var(--clr-input-error)}.input-animated__border{position:absolute;left:0;bottom:0;height:2.5px;width:100%;background:var(--clr-input-a-border);overflow:hidden}.input-animated__border::before{content:"";position:absolute;left:-100%;bottom:0;height:100%;width:100%;background:linear-gradient(to right, rgb(229, 33, 108), rgb(169, 49, 255), rgb(64, 140, 255), rgb(255, 234, 0), rgb(229, 33, 108));animation:animate 1s linear infinite;transition:.5s}.input-animated__field:focus~.input-animated__border::before{left:0;transition:.5s}@keyframes animate{from{background-position-x:0}to{background-position-x:20rem}}