46360b6827
- Tokens CSS con variables para ambos temas (dark/light) - 21 componentes reutilizables (buttons, cards, tables, modals, etc.) - 10 pantallas POS (login, catálogo, POS, inventario, clientes, facturación, contabilidad, dashboard, configuración, reportes) - Preview interactivo con selector de tema - Generado por el equipo de Hugo (Milo-UX, Iris-UI, Zara-Frontend)
399 lines
12 KiB
HTML
399 lines
12 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 — Toggles & Switches</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: var(--z-sticky); 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); }
|
|
.label { font-size: var(--text-caption); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--tracking-widest); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); }
|
|
|
|
/* ====== Toggle Switch ====== */
|
|
.toggle-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
max-width: 400px;
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
|
|
.toggle-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.toggle-label-text {
|
|
font-size: var(--text-body-sm);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.toggle-label-desc {
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.toggle {
|
|
position: relative;
|
|
width: 44px;
|
|
height: 24px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.toggle input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.toggle-slider {
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background: var(--color-border-strong);
|
|
border-radius: var(--radius-full);
|
|
cursor: pointer;
|
|
transition: var(--transition-fast);
|
|
}
|
|
|
|
[data-theme="industrial"] .toggle-slider {
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.toggle-slider::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 18px;
|
|
height: 18px;
|
|
left: 3px;
|
|
bottom: 3px;
|
|
background: white;
|
|
border-radius: var(--radius-full);
|
|
transition: var(--transition-fast);
|
|
}
|
|
|
|
[data-theme="industrial"] .toggle-slider::before {
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.toggle input:checked + .toggle-slider {
|
|
background: var(--color-primary);
|
|
}
|
|
|
|
.toggle input:checked + .toggle-slider::before {
|
|
transform: translateX(20px);
|
|
}
|
|
|
|
.toggle input:focus-visible + .toggle-slider {
|
|
box-shadow: var(--shadow-focus);
|
|
}
|
|
|
|
.toggle input:disabled + .toggle-slider {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Toggle sizes */
|
|
.toggle-sm { width: 36px; height: 20px; }
|
|
.toggle-sm .toggle-slider::before { width: 14px; height: 14px; }
|
|
.toggle-sm input:checked + .toggle-slider::before { transform: translateX(16px); }
|
|
|
|
.toggle-lg { width: 52px; height: 28px; }
|
|
.toggle-lg .toggle-slider::before { width: 22px; height: 22px; }
|
|
.toggle-lg input:checked + .toggle-slider::before { transform: translateX(24px); }
|
|
|
|
/* ====== Checkboxes ====== */
|
|
.checkbox-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
|
|
.checkbox-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.checkbox-custom {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid var(--color-border-strong);
|
|
border-radius: var(--radius-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: var(--transition-fast);
|
|
flex-shrink: 0;
|
|
background: var(--color-bg-base);
|
|
}
|
|
|
|
[data-theme="industrial"] .checkbox-custom {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.checkbox-item input { display: none; }
|
|
|
|
.checkbox-item input:checked + .checkbox-custom {
|
|
background: var(--color-primary);
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
.checkbox-item input:checked + .checkbox-custom::after {
|
|
content: '✓';
|
|
color: var(--color-text-inverse);
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.checkbox-item:hover .checkbox-custom {
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
.checkbox-text {
|
|
font-size: var(--text-body-sm);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
/* ====== Radio Buttons ====== */
|
|
.radio-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
margin-bottom: var(--space-6);
|
|
}
|
|
|
|
.radio-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.radio-custom {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid var(--color-border-strong);
|
|
border-radius: var(--radius-full);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: var(--transition-fast);
|
|
flex-shrink: 0;
|
|
background: var(--color-bg-base);
|
|
}
|
|
|
|
[data-theme="industrial"] .radio-custom {
|
|
border-radius: var(--radius-full); /* radios stay circular even in industrial */
|
|
}
|
|
|
|
.radio-item input { display: none; }
|
|
|
|
.radio-item input:checked + .radio-custom {
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
.radio-item input:checked + .radio-custom::after {
|
|
content: '';
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: var(--radius-full);
|
|
background: var(--color-primary);
|
|
}
|
|
|
|
.radio-item:hover .radio-custom {
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
.radio-text {
|
|
font-size: var(--text-body-sm);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.radio-text-desc {
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-muted);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="theme-switcher">
|
|
<button class="active" onclick="setTheme('industrial')">🔧 Industrial</button>
|
|
<button onclick="setTheme('modern')">⚡ Moderno</button>
|
|
</div>
|
|
|
|
<h1>Toggles & Switches</h1>
|
|
<p class="subtitle">Switches, checkboxes y radio buttons del sistema POS</p>
|
|
|
|
<!-- Toggle Switches -->
|
|
<section>
|
|
<h2>Toggle Switches</h2>
|
|
<div class="label">Configuración del sistema POS</div>
|
|
|
|
<div class="toggle-group">
|
|
<div class="toggle-row">
|
|
<div>
|
|
<div class="toggle-label-text">Notificaciones de stock bajo</div>
|
|
<div class="toggle-label-desc">Alertar cuando un producto baje de 5 unidades</div>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" checked>
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="toggle-row">
|
|
<div>
|
|
<div class="toggle-label-text">Modo oscuro</div>
|
|
<div class="toggle-label-desc">Tema industrial para el POS</div>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" checked>
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="toggle-row">
|
|
<div>
|
|
<div class="toggle-label-text">Impresión automática</div>
|
|
<div class="toggle-label-desc">Imprimir ticket al completar venta</div>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox">
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="toggle-row">
|
|
<div>
|
|
<div class="toggle-label-text">Descuentos manuales</div>
|
|
<div class="toggle-label-desc">Permitir al vendedor aplicar descuentos (deshabilitado)</div>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" disabled>
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="label">Tamaños de toggle</div>
|
|
<div style="display: flex; gap: var(--space-6); align-items: center; margin-bottom: var(--space-6);">
|
|
<label class="toggle toggle-sm">
|
|
<input type="checkbox" checked>
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
<span style="font-size: var(--text-caption); color: var(--color-text-muted);">SM</span>
|
|
|
|
<label class="toggle">
|
|
<input type="checkbox" checked>
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
<span style="font-size: var(--text-caption); color: var(--color-text-muted);">MD</span>
|
|
|
|
<label class="toggle toggle-lg">
|
|
<input type="checkbox" checked>
|
|
<span class="toggle-slider"></span>
|
|
</label>
|
|
<span style="font-size: var(--text-caption); color: var(--color-text-muted);">LG</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Checkboxes -->
|
|
<section>
|
|
<h2>Checkboxes</h2>
|
|
<div class="label">Selección múltiple (filtros de categoría)</div>
|
|
|
|
<div class="checkbox-group">
|
|
<label class="checkbox-item">
|
|
<input type="checkbox" checked>
|
|
<span class="checkbox-custom"></span>
|
|
<span class="checkbox-text">Frenos y pastillas</span>
|
|
</label>
|
|
<label class="checkbox-item">
|
|
<input type="checkbox" checked>
|
|
<span class="checkbox-custom"></span>
|
|
<span class="checkbox-text">Filtros de aceite</span>
|
|
</label>
|
|
<label class="checkbox-item">
|
|
<input type="checkbox">
|
|
<span class="checkbox-custom"></span>
|
|
<span class="checkbox-text">Bujías y encendido</span>
|
|
</label>
|
|
<label class="checkbox-item">
|
|
<input type="checkbox">
|
|
<span class="checkbox-custom"></span>
|
|
<span class="checkbox-text">Suspensión y dirección</span>
|
|
</label>
|
|
<label class="checkbox-item">
|
|
<input type="checkbox">
|
|
<span class="checkbox-custom"></span>
|
|
<span class="checkbox-text">Sistema eléctrico</span>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Radio Buttons -->
|
|
<section>
|
|
<h2>Radio Buttons</h2>
|
|
<div class="label">Selección única (método de pago)</div>
|
|
|
|
<div class="radio-group">
|
|
<label class="radio-item">
|
|
<input type="radio" name="payment" checked>
|
|
<span class="radio-custom"></span>
|
|
<div>
|
|
<div class="radio-text">Efectivo</div>
|
|
<div class="radio-text-desc">Pago en efectivo en caja</div>
|
|
</div>
|
|
</label>
|
|
<label class="radio-item">
|
|
<input type="radio" name="payment">
|
|
<span class="radio-custom"></span>
|
|
<div>
|
|
<div class="radio-text">Tarjeta de crédito/débito</div>
|
|
<div class="radio-text-desc">Terminal punto de venta</div>
|
|
</div>
|
|
</label>
|
|
<label class="radio-item">
|
|
<input type="radio" name="payment">
|
|
<span class="radio-custom"></span>
|
|
<div>
|
|
<div class="radio-text">Transferencia bancaria</div>
|
|
<div class="radio-text-desc">SPEI o depósito</div>
|
|
</div>
|
|
</label>
|
|
<label class="radio-item">
|
|
<input type="radio" name="payment">
|
|
<span class="radio-custom"></span>
|
|
<div>
|
|
<div class="radio-text">Crédito del cliente</div>
|
|
<div class="radio-text-desc">Cargo a cuenta por cobrar</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
function setTheme(theme) {
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
document.querySelectorAll('.theme-switcher button').forEach(btn => {
|
|
btn.classList.toggle('active', btn.textContent.includes(theme === 'industrial' ? 'Industrial' : 'Moderno'));
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|