docs_old/old/dev-style.rst_
############
Design Guide
############
.. contents::
:depth: 2
*****
Intro
*****
O guia de design do ej foi criado para auxiliar na criação e execução de elementos visuais da interface de usuário.
***************
Visual Identity
***************
Assinatura Principal sobre fundo branco ou claro:
Assinatura Principal sobre fundo escuro ou preto:
Assinatura Principal Monocromática sobre fundo branco ou claro:
Assinatura Principal Monocromática sobre fundo escuro ou preto:
Assinatura Alternativa Monocromática sobre fundo branco ou claro:
Assinatura Alternativa Monocromática sobre fundo escuro ou preto:
Assinatura Alternativa sobre fundo branco ou claro:
Assinatura Alternativa sobre fundo branco ou claro:
*******
Coulors
*******
A paleta de cores do ej é composta de 5 cores.
* Primária #30BFD3
* Acento #FF3D72
* Conteúdo #052B47
* Superfície #C4F2F4
* Dessaturada #A3D8DD
*****
Fonts
*****
As famílias tipográficas da interface são Patua One e Raleway. Seguem orientações
* Fonte de títulos: Patua One
* Fonte de texto: Raleway Regular (corpo de texto, legendas, notificações), Raleway Semibold (subtítulos, links, texto cor clara em fundo escuro), Raleway Bold (links, botões, subtítulos)
***********
Componentes
***********
Issue #532
Templates
==========
O que pode ser modificado entre um template e outro? Exemplos abaixo:
Raio das bordas de cards, botões, formulários, caixas de diálogo.
Cards
=====
Card da conversa
----------------
Texto principal: Raleway Semibold 16px; Margem interna lateral: 100px (50px;50px);
Alinhamento de texto: Centro;
Card interno da conversa
------------------------
Texto principal: Raleway Regular 20px; Alinhamento de texto: centro.
Card de comentário
------------------
Fonte: Raleway Semi Bold 18px;
Formulário
==========
* Item
* Visualização
* Formatação
* Texto (text field)
Rótulo (label)
--------------
Checkbox
--------
Radio Button
------------
Switch
------
Anexar arquivos
---------------
Botões
------
Votação
-------
Links
-----
Menus
=====
Menu expandível; máximo de elementos internos: 3; acima de 3, usar em conjunto com link
Menu de itens cujo número pode exceder a 3 (exemplo: tags, clusters).
Menu de abas.
Link selecionado: Raleway Bold, borda 4px solid. Cor: Primária (Primary)
Menu secundário (principal é a barra de navegação). Funcionalidades e links relacionados à página que se está acessando e alguns links e funcionalidades fixos.
Ícones
======
Os ícones da interface são definidos por fonte de ícones. A fonte escolhida foi Font Awesome. Além deles, a interface tem ícones próprios.
Customização do tema #220
=========================