Feedback
Como a interface responde: avisos, estados e espera. Status é ponto e texto, nunca pílula contornada, e nunca só cor. Tons de fundo leves, texto na cor do texto.
Alerta
Mensagem na página, perto do que ela fala. Sucesso e informação usam role="status"; perigo usa role="alert". Com data-rq="dispensar", fecha; o botão de fechar leva .rq-so-js, porque sem JS ele não faria nada.
Tipos
.rq-alerta · data-tipo · __texto · __acoesNo ritmo de hoje, o dia fecha abaixo da meta.
Confira a conexão e tente de novo.
Os números deste painel não são de nenhum cliente.
Faixa de aviso
.rq-faixa-aviso · --marca · data-lembrarUma linha no topo da página, para um recado que vale para o site inteiro. data-lembrar guarda que a pessoa fechou.
Três frentes, um objetivo: vender mais. Conhecer as frentes
Feito para vender. Falar com a Chesslab
Status e contador
Status
.rq-status · data-tipo · --vivoContador
.rq-contador · --acentoNúmero sobre um botão-ícone. O botão diz o total no aria-label; o número visual é aria-hidden.
Progresso
Linear e circular
<progress class="rq-progresso"> · .rq-progresso-circular · --valorEsqueleto e carregando
O esqueleto desenha a forma do que vai chegar; o contêiner leva aria-busy="true" e um texto para leitores de tela. Para esperas sem forma, o símbolo pisca em ciclo. Com movimento reduzido, nada brilha nem gira.
Esqueleto
.rq-esqueleto · --texto · --titulo · --circulo · --fotoCarregando
.rq-carregando · .rq-simbolo--sempre · .rq-anel-carregandoCarregando o painel
Vazio e erro
Estado vazio
.rq-vazio · __iconeDiz o que aconteceu e o que fazer. Uma ação, no máximo duas.
Nenhum pedido com esses filtros
Tente outro período ou limpe os filtros.
Página de erro
.rq-erro-pagina · __codigoPágina não encontrada.
O endereço pode ter mudado. Volte para o início ou fale com a gente.