Beneficio Glass 1
Descripción corta del beneficio. Hover para efecto.
Página de Prueba - Estilos Aurora
Página de Prueba - Estilos Aurora TEST-AURORA-STYLES Esta página demuestra la implementación y apariencia de los diversos componentes visuales y estilos definidos por el tema Aurora. El objetivo es verificar la correcta aplicación de animaciones, layouts y elementos específicos.
- El contenido a continuación replica las secciones de la página de prueba original, adaptadas al formato de pestaña de descripción general de Odoo con el tema Aurora
- Prueba de Animaciones Globales .aurora-anim-fade-up .aurora-anim-zoom-in .aurora-anim-slide-in-left .aurora-anim-text-focus-in 3
- Prueba de Estilos Base Globales Aurora (El wrapper principal ya está aplicado a toda esta pestaña) Este contenedor debe tener el fondo gradiente animado, padding, radius, shadow y tipografía base
Página de Prueba - Estilos Aurora TEST-AURORA-STYLES
Esta página demuestra la implementación y apariencia de los diversos componentes visuales y estilos definidos por el tema Aurora. El objetivo es verificar la correcta aplicación de animaciones, layouts y elementos específicos.
El contenido a continuación replica las secciones de la página de prueba original, adaptadas al formato de pestaña de descripción general de Odoo con el tema Aurora.
2. Prueba de Animaciones Globales
.aurora-anim-fade-up
.aurora-anim-zoom-in
.aurora-anim-text-focus-in
3. Prueba de Estilos Base Globales Aurora
(El wrapper principal ya está aplicado a toda esta pestaña)
Este contenedor debe tener el fondo gradiente animado, padding, radius, shadow y tipografía base.
Título de Sección (.aurora-h5) en .aurora-section-header
Este es un párrafo con la clase .aurora-lead. Debería ser más grande y con peso ligero.
Este es un párrafo de texto normal dentro de una .aurora-content-section. Debe heredar el color de texto de --aurora-text. Aquí hay un texto con la clase .aurora-accent-text para probar el color de acento.
Al hacer hover sobre esta sección, debería tener una sombra y transformación.
Otra .aurora-content-section
Para verificar márgenes y que :last-child no tenga margen inferior si es la última.
4. Prueba de Componentes Específicos Aurora
Benefits Grid (.aurora-benefits-grid)
Beneficio Glass 2
Efecto de hover en ícono y tarjeta.
Beneficio Glass 3
Prueba de ::before y blur.
Styled List (.aurora-styled-list)
- Elemento de lista con énfasis y hover.
- Otro elemento para probar el efecto.
- Este elemento tiene un ícono diferente.
Downloads Grid (.aurora-downloads-grid)
Hover sobre las tarjetas de descarga para ver efectos (color, ícono, flecha).
Subtítulo de Componente (.aurora-component-subhead)
Este es un texto debajo del subtítulo.
SKU-TEST-001 Producto con badge de SKU (.aurora-sku-badge).
Otro Subtítulo (para probar :first-of-type)
Texto...
Lista específica de componentes:
- Elemento con clase
.component-listpara probarem { line-height: 1.6; }
5. Prueba de Ajustes Responsive
Reduce el ancho de la ventana del navegador a menos de 767px para ver los cambios:
- Padding del wrapper principal y secciones de contenido.
- Tamaño de fuente de .aurora-h5 y .aurora-lead.
- Blur en backdrop-filter.
- Tamaño de ícono en galería.
- Márgenes en downloads grid.
Galería de la Página de Prueba
