de5fff4f5c
COMPLETADO: Fase 1 de la migración a Clean Architecture + POO ## Estructura de Carpetas - ✓ Estructura completa de 4 capas (Domain, Application, Infrastructure, Presentation) - ✓ Carpetas de Use Cases (SaveComponent, GetComponent, DeleteComponent, SyncSchema) - ✓ Estructura de tests (Unit, Integration, E2E) - ✓ Carpetas de schemas y templates ## Composer y Autoloading - ✓ PSR-4 autoloading configurado para ROITheme namespace - ✓ Autoloader optimizado regenerado ## DI Container - ✓ DIContainer implementado con patrón Singleton - ✓ Métodos set(), get(), has() para gestión de servicios - ✓ Getters específicos para ComponentRepository, ValidationService, CacheService - ✓ Placeholders que serán implementados en Fase 5 - ✓ Prevención de clonación y deserialización ## Interfaces - ✓ ComponentRepositoryInterface (Domain) - ✓ ValidationServiceInterface (Application) - ✓ CacheServiceInterface (Application) - ✓ Component entity placeholder (Domain) ## Bootstrap - ✓ functions.php actualizado con carga de Composer autoloader - ✓ Inicialización del DIContainer - ✓ Helper function roi_container() disponible globalmente ## Tests - ✓ 10 tests unitarios para DIContainer (100% cobertura) - ✓ Total: 13 tests unitarios, 28 assertions - ✓ Suite de tests pasando correctamente ## Validación - ✓ Script de validación automatizado (48/48 checks pasados) - ✓ 100% de validaciones exitosas La arquitectura base está lista para la Fase 2. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
420 lines
9.2 KiB
CSS
420 lines
9.2 KiB
CSS
/**
|
|
* Modal de Contacto - Estilos
|
|
*
|
|
* Estilos para el modal de contacto con webhook
|
|
* Compatible con Bootstrap 5.3.2
|
|
*
|
|
* @package ROI_Theme
|
|
* @since 1.0.0
|
|
*/
|
|
|
|
/* ==========================================================================
|
|
1. ESTRUCTURA DEL MODAL
|
|
========================================================================== */
|
|
|
|
.modal-content {
|
|
border-radius: 16px;
|
|
border: none;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 1.5rem 1.5rem 1rem 1.5rem;
|
|
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 1.5rem;
|
|
color: #2c3e50;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.btn-close {
|
|
opacity: 0.6;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.btn-close:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.btn-close:focus {
|
|
box-shadow: 0 0 0 0.25rem rgba(255, 133, 0, 0.25);
|
|
outline: none;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 1rem 1.5rem 1.5rem 1.5rem;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
2. FORMULARIO
|
|
========================================================================== */
|
|
|
|
.form-label {
|
|
font-weight: 600;
|
|
color: #495057;
|
|
margin-bottom: 0.5rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.form-label .text-danger {
|
|
font-weight: 700;
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.form-control {
|
|
border-radius: 8px;
|
|
border: 1px solid #dee2e6;
|
|
padding: 0.65rem 1rem;
|
|
transition: all 0.3s ease;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.form-control:hover {
|
|
border-color: #adb5bd;
|
|
}
|
|
|
|
.form-control:focus {
|
|
border-color: #FF8600;
|
|
box-shadow: 0 0 0 0.2rem rgba(255, 133, 0, 0.15);
|
|
outline: none;
|
|
}
|
|
|
|
.form-control.is-invalid {
|
|
border-color: #dc3545;
|
|
padding-right: calc(1.5em + 0.75rem);
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
|
|
background-repeat: no-repeat;
|
|
background-position: right calc(0.375em + 0.1875rem) center;
|
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
|
}
|
|
|
|
.form-control.is-invalid:focus {
|
|
border-color: #dc3545;
|
|
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
|
|
}
|
|
|
|
.form-control.is-valid {
|
|
border-color: #28a745;
|
|
padding-right: calc(1.5em + 0.75rem);
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
|
|
background-repeat: no-repeat;
|
|
background-position: right calc(0.375em + 0.1875rem) center;
|
|
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
|
}
|
|
|
|
.form-control.is-valid:focus {
|
|
border-color: #28a745;
|
|
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
|
|
}
|
|
|
|
.invalid-feedback {
|
|
display: none;
|
|
width: 100%;
|
|
margin-top: 0.25rem;
|
|
font-size: 0.875em;
|
|
color: #dc3545;
|
|
}
|
|
|
|
.form-control.is-invalid ~ .invalid-feedback {
|
|
display: block;
|
|
}
|
|
|
|
textarea.form-control {
|
|
resize: vertical;
|
|
min-height: 80px;
|
|
}
|
|
|
|
.form-text {
|
|
display: block;
|
|
margin-top: 0.25rem;
|
|
font-size: 0.875em;
|
|
color: #6c757d;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
3. BOTÓN DE ENVÍO
|
|
========================================================================== */
|
|
|
|
.btn-submit-form {
|
|
background: linear-gradient(135deg, #FF5722 0%, #FF6B35 100%);
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
padding: 0.75rem 1.5rem;
|
|
border: none;
|
|
border-radius: 8px;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 12px rgba(255, 87, 34, 0.3);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.btn-submit-form::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
|
transition: left 0.5s ease;
|
|
}
|
|
|
|
.btn-submit-form:hover {
|
|
background: linear-gradient(135deg, #E64A19 0%, #FF5722 100%);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 16px rgba(255, 87, 34, 0.4);
|
|
}
|
|
|
|
.btn-submit-form:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
.btn-submit-form:active {
|
|
transform: translateY(0);
|
|
box-shadow: 0 2px 8px rgba(255, 87, 34, 0.3);
|
|
}
|
|
|
|
.btn-submit-form:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 0.25rem rgba(255, 133, 0, 0.5), 0 4px 12px rgba(255, 87, 34, 0.3);
|
|
}
|
|
|
|
.btn-submit-form:disabled {
|
|
opacity: 0.7;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Spinner en botón */
|
|
.spinner-border-sm {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border-width: 0.15em;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
4. MENSAJES DE FEEDBACK
|
|
========================================================================== */
|
|
|
|
#formMessage {
|
|
animation: slideDown 0.3s ease-out;
|
|
border-radius: 8px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
@keyframes slideDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.alert {
|
|
padding: 0.75rem 1rem;
|
|
margin-bottom: 0;
|
|
border: none;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.alert-success {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
border-left: 4px solid #28a745;
|
|
}
|
|
|
|
.alert-danger {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
border-left: 4px solid #dc3545;
|
|
}
|
|
|
|
.alert-warning {
|
|
background-color: #fff3cd;
|
|
color: #856404;
|
|
border-left: 4px solid #ffc107;
|
|
}
|
|
|
|
.alert-info {
|
|
background-color: #d1ecf1;
|
|
color: #0c5460;
|
|
border-left: 4px solid #17a2b8;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
5. ANIMACIONES DEL MODAL
|
|
========================================================================== */
|
|
|
|
.modal.fade .modal-dialog {
|
|
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
|
|
transform: translate(0, -50px);
|
|
}
|
|
|
|
.modal.show .modal-dialog {
|
|
transform: none;
|
|
}
|
|
|
|
/* Backdrop personalizado */
|
|
.modal-backdrop.show {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
6. RESPONSIVE
|
|
========================================================================== */
|
|
|
|
/* Tablets y dispositivos pequeños */
|
|
@media (max-width: 768px) {
|
|
.modal-dialog {
|
|
margin: 1rem;
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 0.75rem 1rem 1rem 1rem;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.form-control {
|
|
font-size: 16px; /* Previene zoom en iOS */
|
|
}
|
|
}
|
|
|
|
/* Móviles pequeños */
|
|
@media (max-width: 576px) {
|
|
.modal-dialog {
|
|
margin: 0.5rem;
|
|
max-width: calc(100% - 1rem);
|
|
}
|
|
|
|
.modal-content {
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 0.5rem 0.75rem 0.75rem 0.75rem;
|
|
}
|
|
|
|
.btn-submit-form {
|
|
padding: 0.65rem 1.25rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
}
|
|
|
|
/* ==========================================================================
|
|
7. ACCESIBILIDAD
|
|
========================================================================== */
|
|
|
|
/* Indicador de foco visible para navegación por teclado */
|
|
.modal-content *:focus-visible {
|
|
outline: 2px solid #FF8600;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Mejora de contraste para lectores de pantalla */
|
|
.screen-reader-text {
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
clip-path: inset(50%);
|
|
height: 1px;
|
|
width: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
/* High contrast mode support */
|
|
@media (prefers-contrast: high) {
|
|
.form-control {
|
|
border-width: 2px;
|
|
}
|
|
|
|
.btn-submit-form {
|
|
border: 2px solid #000;
|
|
}
|
|
}
|
|
|
|
/* Reduced motion support */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.modal.fade .modal-dialog,
|
|
.btn-submit-form,
|
|
.form-control,
|
|
.btn-close {
|
|
transition: none;
|
|
}
|
|
|
|
.btn-submit-form::before {
|
|
display: none;
|
|
}
|
|
|
|
#formMessage {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
/* ==========================================================================
|
|
8. DARK MODE (OPCIONAL)
|
|
========================================================================== */
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.modal-content {
|
|
background-color: #2c3e50;
|
|
color: #ecf0f1;
|
|
}
|
|
|
|
.modal-header {
|
|
background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
|
|
}
|
|
|
|
.modal-title {
|
|
color: #ecf0f1;
|
|
}
|
|
|
|
.form-label {
|
|
color: #bdc3c7;
|
|
}
|
|
|
|
.form-control {
|
|
background-color: #34495e;
|
|
border-color: #4a5f7f;
|
|
color: #ecf0f1;
|
|
}
|
|
|
|
.form-control:focus {
|
|
background-color: #34495e;
|
|
border-color: #FF8600;
|
|
}
|
|
|
|
.form-text {
|
|
color: #95a5a6;
|
|
}
|
|
|
|
.btn-close {
|
|
filter: invert(1);
|
|
}
|
|
}
|
|
|
|
/* ==========================================================================
|
|
9. PRINT STYLES
|
|
========================================================================== */
|
|
|
|
@media print {
|
|
.modal,
|
|
.modal-backdrop {
|
|
display: none !important;
|
|
}
|
|
}
|