formulaire-dynamique
Version:
Package React pour formulaires dynamiques avec validation et tous types de champs
1 lines • 8.4 kB
Source Map (JSON)
{"version":3,"sources":["formStyles.css"],"names":[],"mappings":"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","file":"index.css","sourcesContent":[".dynamic-form {\n max-width: 600px;\n margin: 0 auto;\n padding: 20px;\n font-family: Arial, sans-serif;\n}\n\n.form-field-container {\n margin-bottom: 20px;\n}\n\n.field-label {\n display: block;\n margin-bottom: 5px;\n font-weight: bold;\n}\n\n.form-field {\n width: 100%;\n padding: 8px 12px;\n border: 1px solid #ddd;\n border-radius: 4px;\n font-size: 16px;\n box-sizing: border-box;\n}\n\n.form-field.error {\n border-color: #ff4444;\n}\n\n.error-message {\n color: #ff4444;\n font-size: 14px;\n margin-top: 5px;\n}\n\n.required-asterisk {\n color: #ff4444;\n margin-left: 3px;\n}\n\n/* Styles pour les icônes */\n.field-icon {\n display: inline-flex;\n align-items: center;\n color: #666;\n font-size: 16px;\n margin-right: 8px;\n}\n\n.field-icon.icon-image {\n margin-right: 8px;\n}\n\n.input-with-icon {\n display: flex;\n align-items: center;\n position: relative;\n}\n\n.input-with-icon .form-field {\n padding-left: 35px;\n}\n\n.input-with-icon .field-icon {\n position: absolute;\n left: 10px;\n z-index: 1;\n pointer-events: none;\n}\n\n.textarea-with-icon {\n display: flex;\n align-items: flex-start;\n position: relative;\n}\n\n.textarea-with-icon .form-field {\n padding-left: 35px;\n}\n\n.textarea-with-icon .field-icon {\n position: absolute;\n left: 10px;\n top: 12px;\n z-index: 1;\n pointer-events: none;\n}\n\n.select-with-icon {\n display: flex;\n align-items: center;\n position: relative;\n}\n\n.select-with-icon .form-field {\n padding-left: 35px;\n}\n\n.select-with-icon .field-icon {\n position: absolute;\n left: 10px;\n z-index: 1;\n pointer-events: none;\n}\n\n.checkbox-with-icon {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.checkbox-with-icon input[type=\"checkbox\"] {\n width: auto;\n margin: 0;\n}\n\n.range-container {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.range-value {\n min-width: 30px;\n text-align: center;\n font-weight: bold;\n}\n\n.radio-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.radio-option {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n}\n\n.radio-option input[type=\"radio\"] {\n width: auto;\n margin: 0;\n}\n\n.option-icon {\n display: inline-flex;\n align-items: center;\n font-size: 14px;\n}\n\n.checkbox-label {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n font-weight: bold;\n}\n\n.checkbox-label input[type=\"checkbox\"] {\n width: auto;\n margin: 0;\n}\n\n.checkbox-text {\n display: flex;\n align-items: center;\n}\n\n/* Styles pour les fichiers et aperçus d'images */\n.file-input-container {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.file-input-wrapper {\n display: flex;\n align-items: center;\n position: relative;\n}\n\n.file-input-wrapper .field-icon {\n position: absolute;\n left: 10px;\n z-index: 1;\n pointer-events: none;\n}\n\n.file-input-wrapper .form-field.file {\n padding: 4px;\n padding-left: 35px;\n}\n\n.image-preview {\n position: relative;\n display: inline-block;\n border: 2px solid #ddd;\n border-radius: 8px;\n padding: 8px;\n background-color: #f9f9f9;\n}\n\n.preview-image {\n display: block;\n border-radius: 4px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.remove-preview {\n position: absolute;\n top: -5px;\n right: -5px;\n background-color: #ff4444;\n color: white;\n border: none;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n font-size: 14px;\n line-height: 1;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n}\n\n.remove-preview:hover {\n background-color: #dd0000;\n}\n\n.file-info {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px;\n background-color: #f5f5f5;\n border: 1px solid #ddd;\n border-radius: 4px;\n font-size: 14px;\n}\n\n.file-name {\n font-weight: bold;\n color: #333;\n}\n\n.file-size {\n color: #666;\n font-style: italic;\n}\n\n.remove-file {\n background-color: #ff4444;\n color: white;\n border: none;\n border-radius: 50%;\n width: 18px;\n height: 18px;\n font-size: 12px;\n line-height: 1;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n margin-left: auto;\n}\n\n.remove-file:hover {\n background-color: #dd0000;\n}\n\n.form-submit-button {\n background-color: #4CAF50;\n color: white;\n padding: 10px 20px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 16px;\n transition: background-color 0.3s ease;\n}\n\n.form-submit-button:hover:not(:disabled) {\n background-color: #45a049;\n}\n\n.form-submit-button:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\n\n.help-text {\n font-size: 12px;\n color: #666;\n margin-top: 5px;\n font-style: italic;\n}\n\n.form-error {\n color: #ff4444;\n padding: 20px;\n border: 1px solid #ff4444;\n border-radius: 4px;\n background-color: #fff5f5;\n text-align: center;\n font-weight: bold;\n}\n\n.form-field:focus {\n outline: 2px solid #4CAF50;\n outline-offset: 2px;\n}\n\n.form-field.file {\n padding: 4px;\n}\n\n@media (max-width: 600px) {\n .dynamic-form {\n padding: 15px;\n margin: 0 10px;\n }\n \n .range-container {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .input-with-icon,\n .textarea-with-icon,\n .select-with-icon {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .input-with-icon .form-field,\n .textarea-with-icon .form-field,\n .select-with-icon .form-field {\n padding-left: 12px;\n }\n\n .input-with-icon .field-icon,\n .textarea-with-icon .field-icon,\n .select-with-icon .field-icon {\n position: static;\n margin-bottom: 5px;\n }\n\n .image-preview {\n align-self: center;\n }\n\n .preview-image {\n max-width: 150px !important;\n max-height: 150px !important;\n }\n}"]}