feat(design): add 16 new components + update 5 pages (ronda 2)
Bloqueantes POS: modal-pago, ticket-termico, banner-cliente, fkeys-footer, columnas-costo-margen Componentes nuevos: calculadora-cambio, panel-deslizante, badge-cfdi, arbol-colapsable, tarjeta-metrica, grafica-barras, selector-periodo, etiqueta-codigo-barras Estados: estado-vacio, banner-offline, modal-confirmacion Páginas actualizadas: facturación, contabilidad, dashboard, configuración, reportes
This commit is contained in:
Lucy
297
docs/design/design-system/components/estado-vacio.html
Normal file
297
docs/design/design-system/components/estado-vacio.html
Normal file
@@ -0,0 +1,297 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es" data-theme="industrial">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Nexus Autoparts — Estado Vacío</title>
|
||||
<link rel="stylesheet" href="../tokens/tokens.css">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: var(--font-body); background: var(--color-bg-base);
|
||||
color: var(--color-text-primary); padding: var(--space-8);
|
||||
transition: var(--transition-normal);
|
||||
}
|
||||
.theme-switcher {
|
||||
position: sticky; top: 0; z-index: calc(var(--z-modal) + 10);
|
||||
display: flex; gap: var(--space-2);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: var(--color-bg-elevated);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
margin: calc(-1 * var(--space-8)); margin-bottom: var(--space-8);
|
||||
}
|
||||
.theme-switcher button {
|
||||
padding: var(--space-2) var(--space-4);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-bg-base); color: var(--color-text-primary);
|
||||
border-radius: var(--radius-md); cursor: pointer;
|
||||
font-family: var(--font-body); font-size: var(--text-body-sm);
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
.theme-switcher button.active {
|
||||
background: var(--color-primary); color: var(--color-text-inverse);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
h1 { font-family: var(--font-heading); font-size: var(--text-h2);
|
||||
font-weight: var(--heading-weight-primary); margin-bottom: var(--space-2);
|
||||
color: var(--color-text-accent); }
|
||||
.subtitle { color: var(--color-text-muted); font-size: var(--text-body); margin-bottom: var(--space-8); }
|
||||
section { margin-bottom: var(--space-10); }
|
||||
section > h2 {
|
||||
font-family: var(--font-heading); font-size: var(--text-h4);
|
||||
font-weight: var(--heading-weight-secondary); color: var(--color-text-secondary);
|
||||
margin-bottom: var(--space-4); padding-bottom: var(--space-2);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
/* === Empty State Component === */
|
||||
.variants-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: var(--space-6);
|
||||
}
|
||||
|
||||
.variant-card {
|
||||
background: var(--color-surface-1);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.variant-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-body-sm);
|
||||
color: var(--color-text-muted);
|
||||
background: var(--color-bg-overlay);
|
||||
padding: var(--space-1) var(--space-3);
|
||||
border-radius: var(--radius-full);
|
||||
margin-bottom: var(--space-4);
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
max-width: 320px;
|
||||
padding: var(--space-8) var(--space-4);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.empty-state__icon {
|
||||
font-size: 48px;
|
||||
line-height: 1;
|
||||
margin-bottom: var(--space-4);
|
||||
opacity: 0.6;
|
||||
filter: grayscale(30%);
|
||||
}
|
||||
|
||||
.empty-state__title {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-h5);
|
||||
font-weight: var(--heading-weight-secondary);
|
||||
color: var(--color-text-primary);
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.empty-state__subtitle {
|
||||
font-size: var(--text-body-sm);
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1.5;
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
|
||||
.empty-state__action {
|
||||
padding: var(--space-2) var(--space-5);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-body-sm);
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: var(--transition-fast);
|
||||
border: 1px solid var(--btn-secondary-border);
|
||||
background: var(--btn-secondary-bg);
|
||||
color: var(--btn-secondary-text);
|
||||
}
|
||||
|
||||
.empty-state__action:hover {
|
||||
background: var(--btn-secondary-bg-hover);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.empty-state__action--primary {
|
||||
background: var(--btn-primary-bg);
|
||||
color: var(--btn-primary-text);
|
||||
border-color: var(--btn-primary-border);
|
||||
}
|
||||
|
||||
.empty-state__action--primary:hover {
|
||||
background: var(--btn-primary-bg-hover);
|
||||
}
|
||||
|
||||
/* Context: inside table */
|
||||
.context-table {
|
||||
width: 100%;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.context-table__header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
background: var(--color-surface-2);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
font-size: var(--text-body-sm);
|
||||
font-weight: 600;
|
||||
color: var(--color-text-muted);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.context-table__body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: var(--space-6) var(--space-4);
|
||||
background: var(--color-bg-base);
|
||||
min-height: 200px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Context: inside card */
|
||||
.context-card {
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.context-card__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
background: var(--color-surface-1);
|
||||
}
|
||||
|
||||
.context-card__header span {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: var(--heading-weight-secondary);
|
||||
font-size: var(--text-body);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.context-card__body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: var(--space-4);
|
||||
min-height: 180px;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="theme-switcher">
|
||||
<button class="active" onclick="document.documentElement.dataset.theme='industrial'; this.classList.add('active'); this.nextElementSibling.classList.remove('active')">🔧 Industrial</button>
|
||||
<button onclick="document.documentElement.dataset.theme='modern'; this.classList.add('active'); this.previousElementSibling.classList.remove('active')">⚡ Moderno</button>
|
||||
</div>
|
||||
<h1>Estado Vacío</h1>
|
||||
<p class="subtitle">Componente reutilizable para estados vacíos en tablas, cards y páginas completas.</p>
|
||||
|
||||
<!-- ========== Variants ========== -->
|
||||
<section>
|
||||
<h2>Variantes</h2>
|
||||
<div class="variants-grid">
|
||||
|
||||
<!-- a) No hay productos -->
|
||||
<div class="variant-card">
|
||||
<span class="variant-label">a) Sin productos</span>
|
||||
<div class="empty-state">
|
||||
<div class="empty-state__icon">📦</div>
|
||||
<div class="empty-state__title">No se encontraron productos</div>
|
||||
<div class="empty-state__subtitle">Intenta con otro término de búsqueda</div>
|
||||
<button class="empty-state__action">Limpiar filtros</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- b) No hay ventas -->
|
||||
<div class="variant-card">
|
||||
<span class="variant-label">b) Sin ventas</span>
|
||||
<div class="empty-state">
|
||||
<div class="empty-state__icon">🧾</div>
|
||||
<div class="empty-state__title">No hay ventas registradas hoy</div>
|
||||
<div class="empty-state__subtitle">Las ventas aparecerán aquí conforme se realicen</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- c) Sin resultados -->
|
||||
<div class="variant-card">
|
||||
<span class="variant-label">c) Sin resultados</span>
|
||||
<div class="empty-state">
|
||||
<div class="empty-state__icon">🔍</div>
|
||||
<div class="empty-state__title">Sin resultados para 'BAL-2847'</div>
|
||||
<div class="empty-state__subtitle">Verifica el número de parte o nombre</div>
|
||||
<button class="empty-state__action empty-state__action--primary">Nueva búsqueda</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- d) Sin conexión -->
|
||||
<div class="variant-card">
|
||||
<span class="variant-label">d) Sin conexión</span>
|
||||
<div class="empty-state">
|
||||
<div class="empty-state__icon">📡</div>
|
||||
<div class="empty-state__title">Sin conexión al servidor</div>
|
||||
<div class="empty-state__subtitle">Verifica tu conexión a internet</div>
|
||||
<button class="empty-state__action empty-state__action--primary">Reintentar</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ========== Contextual usage: inside a table ========== -->
|
||||
<section>
|
||||
<h2>Uso en contexto: Dentro de tabla</h2>
|
||||
<div class="context-table">
|
||||
<div class="context-table__header">
|
||||
<span>Producto</span>
|
||||
<span>No. Parte</span>
|
||||
<span>Stock</span>
|
||||
<span>Precio</span>
|
||||
</div>
|
||||
<div class="context-table__body">
|
||||
<div class="empty-state">
|
||||
<div class="empty-state__icon">🔍</div>
|
||||
<div class="empty-state__title">Sin resultados para 'xyz'</div>
|
||||
<div class="empty-state__subtitle">Verifica el número de parte o nombre</div>
|
||||
<button class="empty-state__action">Limpiar filtros</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ========== Contextual usage: inside a card ========== -->
|
||||
<section>
|
||||
<h2>Uso en contexto: Dentro de card</h2>
|
||||
<div class="context-card">
|
||||
<div class="context-card__header">
|
||||
<span>Ventas del día</span>
|
||||
<span style="font-size: var(--text-body-sm); color: var(--color-text-muted);">01 Abr 2026</span>
|
||||
</div>
|
||||
<div class="context-card__body">
|
||||
<div class="empty-state">
|
||||
<div class="empty-state__icon">🧾</div>
|
||||
<div class="empty-state__title">No hay ventas registradas hoy</div>
|
||||
<div class="empty-state__subtitle">Las ventas aparecerán aquí conforme se realicen</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user