Início
NexoPOS

Tematização

Este guia ajuda a projetar seus componentes rapidamente para garantir uma integração perfeita com o painel do NexoPOS. Esses princípios já foram definidos com cores e gradientes para facilitar a prototipagem dos componentes.

Você ainda pode adicionar o TailwindCSS ao seu módulo e criar seu próprio estilo. Isso pode ser combinado com este princípio de design caso esta última opção tenha algumas limitações para o seu projeto.

Variáveis

As variáveis são o valor de cor que definimos para diversos fins. Aqui está uma lista de componentes que são coloridos. Os valores são definidos para o Modo Escuro. Se você criar seu próprio tema, esses valores devem ser definidos no arquivo “_variables.scss”.

Formulário:

--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;

Caixa:

--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;

Cruel:-

-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 rolagem:

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

Abas:

--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;

Menu Flutuante:

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

Tipografia:

--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;

Caixa

Uma caixa é usada para criar uma seção quadrada onde controles ou texto podem ser inseridos e utilizados. Esse recurso é mais usado para o formulário de login e de registro. Ele também é usado para criar um pop-up.

Uma caixa usa “ns-box” como classe pai. Se a sua caixa tiver um título, um corpo e um rodapé, você usará a seguinte classe para estilizar essas áreas:

  • "ns-box-header"
  • corpo: "ns-box-body"
  • rodapé: "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>

Tabela CRUD

A tabela CRUD é um componente que lista entradas. É amplamente utilizada no NexoPOS para exibir vendas, clientes, fornecedores, produtos e muito mais.

Uma tabela CRUD tem vários subcomponentes que utilizam seus próprios princípios de design. Os princípios a seguir se aplicam apenas à própria tabela.

No momento, acreditamos que apenas um componente crud é exibido por página. Portanto, ele tem o id "crud-table"; se a tabela crud tiver uma entrada no cabeçalho, você aplicará a classe "ns-crud-input" a ela. Cada linha deve ter a classe "ns-table-row". Se uma linha tiver um menu de opções, esse menu deve ser envolvido por uma div com a classe "ns-menu-wrapper" e o botão de ação deve ter a classe "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>