ccd3962458
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
298 lines
9.9 KiB
HTML
298 lines
9.9 KiB
HTML
<!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>
|