formulaire-dynamique/dist/cjs/index.css

Package React pour formulaires dynamiques avec validation et tous types de champs

.dynamic-form{font-family:Arial,sans-serif;margin:0 auto;max-width:600px;padding:20px}.form-field-container{margin-bottom:20px}.field-label{display:block;font-weight:700;margin-bottom:5px}.form-field{border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:16px;padding:8px 12px;width:100%}.form-field.error{border-color:#f44}.error-message{color:#f44;font-size:14px;margin-top:5px}.required-asterisk{color:#f44;margin-left:3px}.field-icon{align-items:center;color:#666;display:inline-flex;font-size:16px}.field-icon,.field-icon.icon-image{margin-right:8px}.input-with-icon{align-items:center;display:flex;position:relative}.input-with-icon .form-field{padding-left:35px}.input-with-icon .field-icon{left:10px;pointer-events:none;position:absolute;z-index:1}.textarea-with-icon{align-items:flex-start;display:flex;position:relative}.textarea-with-icon .form-field{padding-left:35px}.textarea-with-icon .field-icon{left:10px;pointer-events:none;position:absolute;top:12px;z-index:1}.select-with-icon{align-items:center;display:flex;position:relative}.select-with-icon .form-field{padding-left:35px}.select-with-icon .field-icon{left:10px;pointer-events:none;position:absolute;z-index:1}.checkbox-with-icon{align-items:center;display:flex;gap:8px}.checkbox-with-icon input[type=checkbox]{margin:0;width:auto}.range-container{align-items:center;display:flex;gap:10px}.range-value{font-weight:700;min-width:30px;text-align:center}.radio-group{display:flex;flex-direction:column;gap:8px}.radio-option{align-items:center;cursor:pointer;display:flex;gap:8px}.radio-option input[type=radio]{margin:0;width:auto}.option-icon{align-items:center;display:inline-flex;font-size:14px}.checkbox-label{align-items:center;cursor:pointer;display:flex;font-weight:700;gap:8px}.checkbox-label input[type=checkbox]{margin:0;width:auto}.checkbox-text{align-items:center;display:flex}.file-input-container{display:flex;flex-direction:column;gap:10px}.file-input-wrapper{align-items:center;display:flex;position:relative}.file-input-wrapper .field-icon{left:10px;pointer-events:none;position:absolute;z-index:1}.file-input-wrapper .form-field.file{padding:4px 4px 4px 35px}.image-preview{background-color:#f9f9f9;border:2px solid #ddd;border-radius:8px;display:inline-block;padding:8px;position:relative}.preview-image{border-radius:4px;box-shadow:0 2px 4px #0000001a;display:block}.remove-preview{align-items:center;background-color:#f44;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:14px;font-weight:700;height:20px;justify-content:center;line-height:1;position:absolute;right:-5px;top:-5px;width:20px}.remove-preview:hover{background-color:#d00}.file-info{align-items:center;background-color:#f5f5f5;border:1px solid #ddd;border-radius:4px;display:flex;font-size:14px;gap:8px;padding:8px}.file-name{color:#333;font-weight:700}.file-size{color:#666;font-style:italic}.remove-file{align-items:center;background-color:#f44;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:12px;font-weight:700;height:18px;justify-content:center;line-height:1;margin-left:auto;width:18px}.remove-file:hover{background-color:#d00}.form-submit-button{background-color:#4caf50;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:16px;padding:10px 20px;transition:background-color .3s ease}.form-submit-button:hover:not(:disabled){background-color:#45a049}.form-submit-button:disabled{background-color:#ccc;cursor:not-allowed}.help-text{color:#666;font-size:12px;font-style:italic;margin-top:5px}.form-error{background-color:#fff5f5;border:1px solid #f44;border-radius:4px;color:#f44;font-weight:700;padding:20px;text-align:center}.form-field:focus{outline:2px solid #4caf50;outline-offset:2px}.form-field.file{padding:4px}@media (max-width:600px){.dynamic-form{margin:0 10px;padding:15px}.input-with-icon,.range-container,.select-with-icon,.textarea-with-icon{align-items:flex-start;flex-direction:column}.input-with-icon .form-field,.select-with-icon .form-field,.textarea-with-icon .form-field{padding-left:12px}.input-with-icon .field-icon,.select-with-icon .field-icon,.textarea-with-icon .field-icon{margin-bottom:5px;position:static}.image-preview{align-self:center}.preview-image{max-height:150px!important;max-width:150px!important}}
/*# sourceMappingURL=index.css.map */