feat: agregar design system completo con 2 temas (Industrial + Moderno)
- 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)
This commit is contained in:
Lucy
412
docs/design/design-system/components/search.html
Normal file
412
docs/design/design-system/components/search.html
Normal file
@@ -0,0 +1,412 @@
|
||||
<!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 — Search Bar</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); }
|
||||
|
||||
/* ====== Search Bar ====== */
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--color-bg-elevated);
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-1);
|
||||
transition: var(--transition-fast);
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .search-bar {
|
||||
border-radius: 0;
|
||||
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
|
||||
}
|
||||
|
||||
.search-bar:focus-within {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: var(--shadow-focus);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
padding: var(--space-2) var(--space-3);
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--text-body-lg);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--color-text-primary);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-body);
|
||||
padding: var(--space-3);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.search-shortcut {
|
||||
padding: var(--space-1) var(--space-2);
|
||||
background: var(--color-surface-2);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: var(--text-caption);
|
||||
color: var(--color-text-muted);
|
||||
font-family: var(--font-mono);
|
||||
margin-right: var(--space-2);
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
padding: var(--space-3) var(--space-5);
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-inverse);
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-body-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
cursor: pointer;
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .search-btn {
|
||||
border-radius: 0;
|
||||
clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
|
||||
}
|
||||
|
||||
.search-btn:hover {
|
||||
background: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
/* ====== Search with Dropdown ====== */
|
||||
.search-wrapper {
|
||||
position: relative;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.search-dropdown {
|
||||
position: absolute;
|
||||
top: calc(100% + var(--space-2));
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
z-index: var(--z-dropdown);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .search-dropdown {
|
||||
border-radius: 0;
|
||||
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
|
||||
}
|
||||
|
||||
.search-dropdown-header {
|
||||
padding: var(--space-2) var(--space-4);
|
||||
font-size: var(--text-caption);
|
||||
color: var(--color-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: var(--tracking-widest);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.search-result {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
cursor: pointer;
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
.search-result:hover {
|
||||
background: var(--color-primary-muted);
|
||||
}
|
||||
|
||||
.search-result-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: var(--color-surface-2);
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: var(--text-body-lg);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .search-result-icon {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.search-result-info { flex: 1; }
|
||||
|
||||
.search-result-title {
|
||||
font-size: var(--text-body-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.search-result-title mark {
|
||||
background: var(--color-primary-muted);
|
||||
color: var(--color-primary);
|
||||
padding: 0 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.search-result-meta {
|
||||
font-size: var(--text-caption);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.search-result-price {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-primary);
|
||||
font-size: var(--text-body-sm);
|
||||
}
|
||||
|
||||
.search-result-stock {
|
||||
font-size: var(--text-caption);
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.search-dropdown-footer {
|
||||
padding: var(--space-2) var(--space-4);
|
||||
font-size: var(--text-caption);
|
||||
color: var(--color-text-muted);
|
||||
border-top: 1px solid var(--color-border);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ====== Vehicle Search ====== */
|
||||
.vehicle-search {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
flex-wrap: wrap;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.vehicle-select {
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text-primary);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-body-sm);
|
||||
cursor: pointer;
|
||||
transition: var(--transition-fast);
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 12px center;
|
||||
padding-right: var(--space-8);
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .vehicle-select {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.vehicle-select:focus {
|
||||
border-color: var(--color-primary);
|
||||
outline: none;
|
||||
box-shadow: var(--shadow-focus);
|
||||
}
|
||||
|
||||
.vehicle-search-btn {
|
||||
padding: var(--space-3) var(--space-6);
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-inverse);
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-body-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
cursor: pointer;
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .vehicle-search-btn {
|
||||
border-radius: 0;
|
||||
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
|
||||
}
|
||||
|
||||
.vehicle-search-btn:hover { background: var(--color-primary-hover); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="theme-switcher">
|
||||
<button class="active" onclick="setTheme('industrial')">🔧 Industrial</button>
|
||||
<button onclick="setTheme('modern')">⚡ Moderno</button>
|
||||
</div>
|
||||
|
||||
<h1>Search</h1>
|
||||
<p class="subtitle">Barras de búsqueda con autocompletado para el catálogo POS</p>
|
||||
|
||||
<!-- Basic Search -->
|
||||
<section>
|
||||
<h2>Búsqueda General</h2>
|
||||
<div class="label">Barra de búsqueda principal del catálogo</div>
|
||||
|
||||
<div class="search-bar" style="margin-bottom: var(--space-6);">
|
||||
<span class="search-icon">🔍</span>
|
||||
<input class="search-input" type="text" placeholder="Buscar por nombre, SKU, OEM, marca...">
|
||||
<span class="search-shortcut">Ctrl+K</span>
|
||||
<button class="search-btn">Buscar</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Search with Autocomplete -->
|
||||
<section>
|
||||
<h2>Búsqueda con Autocompletado</h2>
|
||||
<div class="label">Resultados en tiempo real mientras el usuario escribe</div>
|
||||
|
||||
<div class="search-wrapper" style="margin-bottom: var(--space-6);">
|
||||
<div class="search-bar">
|
||||
<span class="search-icon">🔍</span>
|
||||
<input class="search-input" type="text" value="pastillas de freno" placeholder="Buscar...">
|
||||
<button class="search-btn">Buscar</button>
|
||||
</div>
|
||||
|
||||
<div class="search-dropdown">
|
||||
<div class="search-dropdown-header">Productos (4 resultados)</div>
|
||||
|
||||
<div class="search-result">
|
||||
<div class="search-result-icon">🔧</div>
|
||||
<div class="search-result-info">
|
||||
<div class="search-result-title"><mark>Pastillas de freno</mark> Brembo P50 042</div>
|
||||
<div class="search-result-meta">SKU: BRM-P50042 · OEM: 04465-33450</div>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<div class="search-result-price">$1,250.00</div>
|
||||
<div class="search-result-stock">12 en stock</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="search-result">
|
||||
<div class="search-result-icon">🔧</div>
|
||||
<div class="search-result-info">
|
||||
<div class="search-result-title"><mark>Pastillas de freno</mark> Wagner QC1210</div>
|
||||
<div class="search-result-meta">SKU: WGN-QC1210 · OEM: 04465-02220</div>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<div class="search-result-price">$890.00</div>
|
||||
<div class="search-result-stock">8 en stock</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="search-result">
|
||||
<div class="search-result-icon">🔧</div>
|
||||
<div class="search-result-info">
|
||||
<div class="search-result-title"><mark>Pastillas de freno</mark> Akebono ACT1210</div>
|
||||
<div class="search-result-meta">SKU: AKB-ACT1210 · Aftermarket</div>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<div class="search-result-price">$650.00</div>
|
||||
<div class="search-result-stock" style="color: var(--color-warning);">3 en stock</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="search-dropdown-footer">Ver los 4 resultados para "pastillas de freno" →</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Vehicle Search -->
|
||||
<section>
|
||||
<h2>Búsqueda por Vehículo</h2>
|
||||
<div class="label">Filtrar catálogo por marca, modelo y año</div>
|
||||
|
||||
<div class="vehicle-search">
|
||||
<select class="vehicle-select">
|
||||
<option>Marca</option>
|
||||
<option>Toyota</option>
|
||||
<option>Honda</option>
|
||||
<option>Nissan</option>
|
||||
<option>Chevrolet</option>
|
||||
<option>Ford</option>
|
||||
<option>Volkswagen</option>
|
||||
</select>
|
||||
<select class="vehicle-select">
|
||||
<option>Modelo</option>
|
||||
<option>Corolla</option>
|
||||
<option>Camry</option>
|
||||
<option>RAV4</option>
|
||||
<option>Hilux</option>
|
||||
</select>
|
||||
<select class="vehicle-select">
|
||||
<option>Año</option>
|
||||
<option>2024</option>
|
||||
<option>2023</option>
|
||||
<option>2022</option>
|
||||
<option>2021</option>
|
||||
<option>2020</option>
|
||||
</select>
|
||||
<select class="vehicle-select">
|
||||
<option>Motor</option>
|
||||
<option>1.8L</option>
|
||||
<option>2.0L</option>
|
||||
<option>2.5L</option>
|
||||
</select>
|
||||
<button class="vehicle-search-btn">🔍 Buscar partes</button>
|
||||
</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>
|
||||
Reference in New Issue
Block a user