MDL 1.0
Herramienta de desarrollo: identificadores MTX-*,
fichas técnicas, estados completos y biblioteca mtx-*
en static/css/mdl.css.
Toda la operación.Una sola plataforma.
Design Tokens
Nunca valores sueltos
| Radius | --mdl-radius-sm → --mdl-radius-xl |
|---|---|
| Shadow | --mdl-shadow-xs → --mdl-shadow-xl |
| Breakpoints | XS 480 · SM 640 · MD 768 · LG 1024 · XL 1280 · 2XL 1536 |
| Regla | ❌ border-radius: 14px · ✅ var(--mdl-radius-lg) |
Ver tokens.md completo
Roustix Motion
| Hover | 150ms · --mdl-duration-hover |
|---|---|
| Fade | 200ms · --mdl-duration-fade |
| Modal | 250ms · --mdl-duration-modal |
| Sidebar | 300ms · --mdl-duration-sidebar |
Dark Mode
Selectores: .theme-dashboard-dark, [data-mdl-theme="dark"]. Capítulo completo en dark-mode.md.
Responsive · XS → 2XL
Medidas oficiales en responsive.md. Utilidades: mtx-hide-sm, mtx-stack-sm.
Patrones · MTX-PAT-*
Flujos, no botones sueltos
| MTX-PAT-001 | Registrar OT |
|---|---|
| MTX-PAT-002 | Buscar Activo |
| MTX-PAT-005 | Importar Excel |
| MTX-PAT-007 | Confirmar Acción |
patterns.md — corazón del MDL
Primary Button
| Uso | Acción principal — Guardar, Crear OT, Confirmar |
|---|---|
| No usar | Destructivas, secundarias, más de uno por vista |
| Clase | mtx-btn mtx-btn-primary |
| Ficha | components/MTX-BTN-001.md |
Estados
<button class="mtx-btn mtx-btn-primary">Guardar</button>
01 · Botones
02 · Cards · estados
Default
03 · Formularios · estados
05 · Tables
| Activo | Estado |
|---|---|
| CPS-001 | Operativo |
12 · Modals · 250ms
Confirmar acción
¿Cerrar esta OT?
18 · PDF
Header · Footer · Tabla · KPIs · Gráficas · Numeración · Firma · QR — ver docs/mrl/
MRL-HDR-001 · MRL-TBL-001
19 · Email
Bienvenida · Reset password · Nueva OT · Trial · Factura · Pago · Empresa · Invitación — email.md
Plantilla transaccional unificada.
Toda la operación.Una sola plataforma.