Inicio
NexoPOS

Tematización

Esta guía le ayuda a diseñar sus componentes rápidamente para garantizar una integración fluida con el panel de NexoPOS. Estos principios ya se han establecido con colores y degradados para facilitar la creación de prototipos de componentes.

Aún puedes agregar TailwindCSS a tu módulo y crear tu propio estilo. Eso se puede combinar con este principio de diseño en caso de que este último tenga algunas limitaciones para tu proyecto.

Variables

Las variables son el valor de color que hemos establecido para diversos fines. Aquí hay una lista de componentes que están coloreados. Los valores se establecen para el Modo Oscuro. Si creas tu propio tema, esos valores deben definirse en tu archivo "_variables.scss".

Formulario:

--input-edge: 30 41 59;
--input-background: 51 65 85;
--input-disabled: 30 41 59;
--input-button: 71 85 105;
--input-button-hover: 59 130 246;
--input-button-active: 59 130 246;
--input-option-hover: 100 116 139;

Caja:

--box-background: 51 65 85;
--box-edge: 71 85 105;
--box-elevation-background: 71 85 105;
--box-elevation-edge: 100 116 139;
--box-elevation-hover: 100 116 139;

Crud:-

-crud-button-edge: 30 41 59;
--pos-button-edge: 30 41 59;

Teclado numérico:

--numpad-background: 71 85 105;
--numpad-typography: 250 250 250;
--numpad-edge: 71 85 105;
--numpad-hover: 71 85 105;
--numpad-hover-edge: 71 85 105;

Barra de desplazamiento:

--scroll-thumb: 51 65 85;
--scroll-track: 0 0 0;
--scroll-popup-thumb: 71 85 105;

Pestañas:

--tab-active: 51 65 85;
--tab-active-border: 30 41 59;
--tab-inactive: 30 41 59;
--tab-table-th: 100 116 139;
--tab-table-th-edge: 100 116 139;
--table-th: 51 65 85;
--table-th-edge: 71 85 105;

Menú flotante:

--option-hover: 100 116 139;
--floating-menu: 71 85 105;
--floating-menu-hover: 100 116 139;
--floating-menu-edge: 51 65 85;

Tipografía:

--pre: 30 41 59;
--typography: 255 255 255;
--surface: 15 23 42;
--popup-surface: 51 65 85;
--primary: 226 232 240;
--secondary: 203 213 225;
--tertiary: 148 163 184;
--info-primary: 96 165 250;
--info-secondary: 59 130 246;
--info-tertiary: 37 99 235;
--info-light-primary: 191 219 254;
--info-light-secondary: 147 197 253;
--info-light-tertiary: 96 165 250;
--error-primary: 248 113 113;
--error-secondary: 239 68 68;
--error-tertiary: 220 38 38;
--error-light-primary: 254 202 202;
--error-light-secondary: 252 165 165;
--error-light-tertiary: 248 113 113;
--success-primary: 34 197 94;
--success-secondary: 22 163 74;
--success-tertiary: 21 128 61;
--success-light-primary: 187 247 208;
--success-light-secondary: 134 239 172
--success-light-tertiary: 74 222 128;
--warning-primary: 251 146 60;
--warning-secondary: 249 115 22;
--warning-tertiary: 234 88 12;
--warning-light-primary: 255 237 213;
--warning-light-secondary: 254 215 170
--warning-light-tertiary: 253 186 116;
--danger-primary: 202 138 4;
--danger-secondary: 161 98 7;
--danger-tertiary: 133 77 14;
--danger-light-primary: 254 249 195;
--danger-light-secondary: 254 240 138;
--danger-light-tertiary: 253 224 71;
--default-primary: 203 213 225;
--default-secondary: 148 163 184;
--default-tertiary: 100 116 139;
--default-light-primary: 226 232 240;
--default-light-secondary: 203 213 225
--default-light-tertiary: 148 163 184;

Caja

Se utiliza una caja para crear una sección cuadrada donde se pueden usar controles o texto. Esta función se usa principalmente para el formulario de inicio de sesión y el de registro. También se utiliza para crear un cuadro emergente.

Una caja usa «ns-box» como clase padre. Si tu caja tiene un título, un cuerpo y un pie de página, usarás la siguiente clase para dar estilo a esas áreas:

  • "ns-box-header"
  • cuerpo: "ns-box-body"
  • pie de página: "ns-box-footer"
<div class="ns-box">
  <div class="ns-box-header">Box Header</div>
  <div class="ns-box-body">
    <!-- Your content here -->
  </div>
  <div class="ns-box-footer"></div>
</div>

Tabla CRUD

La tabla CRUD es un componente que lista entradas. Se usa ampliamente en NexoPOS para mostrar ventas, clientes, proveedores, productos y mucho más.

Una tabla CRUD tiene varios subcomponentes que utilizan sus propios principios de diseño. Los siguientes principios solo se aplican a la tabla en sí.

En este momento, creemos que solo se muestra un componente crud por página. Por lo tanto, tiene el id "crud-table". Si la tabla crud tiene un input en el encabezado, le aplicarás la clase "ns-crud-input". Cada fila debe tener la clase "ns-table-row". Si una fila tiene un menú de opciones, ese menú debe estar envuelto con un div que tenga la clase "ns-menu-wrapper" y el botón de acción debe tener la clase "ns-action-button".

<div id="crud-table">
    <!-- any elements that organize the layout -->
      <div class="ns-crud-input">
          <input type="text">
          <button class="ns-crud-input-button">Click</button>
      </div>
      <button class="ns-crud-button">Button</button
    <!-- any elements that organize the layout -->
</div>