# Sistema de Diseño — Nucleo 3 ## Estructura de archivos CSS ``` assets/css/ ├── variables.less # Variables CSS (:root), breakpoints ├── color.less # Paleta de colores completa ├── font.less # Tipografía ├── index.less # Estilos base, botones, badges, alerts, mixins ├── form.less # Formularios y controles ├── table.less # Tablas (DataTables, macro table) ├── nav.less # Navegación, sidebar, header ├── modal.less # Modales ├── icons.less # Iconos └── dist/ # Archivos compilados (.css) ``` ## Compilar LESS ```bash ssh wappcom@dev.io 'cd www/nucleo/nucleo.3 && lessc assets/css/ARCHIVO.less assets/css/dist/ARCHIVO.css' ``` --- ## Variables CSS (color.less) ### Paleta base ```css --color-blue: #3369e7 --color-green: #11b671 --color-red: #fe3535 --color-orange: #ffc168 --color-purple: #8e43e7 --color-gray: #8e8c97 --color-text: #2c3136 --color-line: #dee2ed --color-white: #ffffff --color-black: #000000 ``` ### Estados ```css --color-primary: #3369e7 /* azul */ --color-success: #11b671 /* verde */ --color-info: #00aeff /* sky blue */ --color-warning: #ffc168 /* naranja */ --color-danger: #fe3535 /* rojo */ ``` ### Variantes suaves (backgrounds) ```css --color-primary-soft: #4674de --color-success-soft: #a7f3d3 --color-danger-soft: #fcd0d0 --color-warning-soft: #ffc168 ``` ### Formularios ```css --color-input-bg: #f4f4fb --color-input-border: #dee2ed --color-input-text: #383551 --color-placeholder-input: #97a0aa --color-form-label: #797a88 ``` ### Tablas ```css --color-table-bg: #ffffff --color-table-head-bg: #f2f3f9 --color-table-even: #f7f7fa --color-table-text-thead: #828da1 ``` ### Bordes y radios ```css --border-radius: 7px --border-radius-btn: 7px --border-radius-form: 7px --border-radius-table: 10px ``` --- ## Botones (index.less) ### Clases de botones ```html ``` ### Tamaños ```html ``` ### Con iconos ```html ``` --- ## Badges / Pills ```html Primary Success Info Warning Danger Gray Purple ``` --- ## Alerts ```html
Error message
Success message
Warning message
Info message
``` ### Toast notifications ```html
Mensaje
``` --- ## Formularios (form.less) ### Estructura básica ```html
``` ### Input con icono ```html
``` ### Select ```html ``` ### Checkbox ```html
``` ### Switch toggle ```html
``` ### Grupo de radio (segmented control) ```html
``` --- ## Tablas (table.less) ### Tabla básica ```html
ID Nombre Estado Acciones
1 Item name Activo
``` ### State pills ```html Activo Inactivo Error Info Warning ``` ### Dropdown actions ```html
``` ### Column widths ```html ID Imagen Acciones ``` --- ## Layout / Contenedores ### Grid columns (ancho fijo) ```html
4%
10%
15%
20%
25%
33%
50%
75%
100%
``` ### Espaciado ```html
margen 4%
margen 43%
``` ### Section ```html
Izquierda
Derecha
``` ### Flex helpers ```html
``` --- ## Navegación ### Sidebar (menú módulo) ```html ``` ### Tabs ```html
Contenido 1
Contenido 2
``` --- ## Mixins útiles ( LESS) ```less .widthAvailable() // width: fill-available .heightAvailable() // height: fill-available .boxShadow() // sombra básica .boxShadowWindow() // sombra para modales .boxShadowList() // sombra para listas dropdown .transition(@x: .3s) // transición .border(@x) // borde .borderRadius(@x) // border-radius ``` --- ## Reglas de uso 1. **Usar variables CSS** — nunca hardcodear colores hex 2. **Compilar LESS** — siempre después de editar `.less` 3. **No estilos inline** — todo en LESS 4. **No clases inventadas** — usar las existentes del sistema 5. **Responsive** — breakpoints definidos en `variables.less` ## Iconos Usar fuente `font-brave` con clases `.icon`: ```html ```