Locaweb Style

Documentação

Saiba todas as features que te ajudarão a produzir sistemas mais rapidamente.

Alertas

Os Alertas são usados para enviar um feedback contextual de sucesso, erro, warning ou apenas uma notificação de novas features no sistema.

Sucesso! Você conseguiu, parabéns!
Atenção: Você tem informações importantes para ler.
Cuidado: Cheque duas vezes. Você pode ter esquecido alguma informação.
Vish! Algo muito ruim aconteceu e você vai precisar refazer tudo. Clique aqui.
1
2
3
4
<div class="ls-alert-success"><strong>Sucesso!</strong> Você conseguiu, parabéns!</div>
<div class="ls-alert-info"><strong>Atenção:</strong> Você tem informações importantes para ler.</div>
<div class="ls-alert-warning"><strong>Cuidado:</strong> Cheque duas vezes. Você pode ter esquecido alguma informação.</div>
<div class="ls-alert-danger"><strong>Vish!</strong> Algo muito ruim aconteceu e você vai precisar refazer tudo. <a href="#">Clique aqui.</a></div>

Fechando alertas

Basicamente, se você tiver boxes de notificações, alertas ou qualquer outro tipo de elemento e gostaria de dar a opção do usuário remover da tela, você vai usar essa função.

Atenção

Nós não tratamos cookies ou qualquer solução back-end que previna o reaparecimento do elemento removido se o usuário der refresh na página. Você vai precisar fazer sua própria solução caso queira que o elemento não reapareça quando a página for atualizada.

Seletor Descrição
.ls-dismissable É o elemento que será dispensado.
data-ls-module="dismiss" É o nosso trigger. É ele que ativa o script. Precisa estar no elemento que irá ser clicado para remover o .ls-dismissable, por exemplo um link, botão etc...
data-target="#target-id" Necessário quando o elemento que será o trigger não for filho direto de .ls-dismissable, que é o elemento que será removido. Ele aceita IDs ou CLASSES.

Acessibilidade

Via javascript é adicionada a ARIA role="alert"

Veja primeiro o exemplo abaixo: ao clicar no X do lado direito, o alerta é fechado.

× Olá! Este é um alerta que pode ser dispensado.
1
2
3
4
<div class="ls-alert-warning ls-dismissable">
  <span data-ls-module="dismiss" class="ls-dismiss">&times;</span>
  <strong>Olá!</strong> Este é um alerta que pode ser dispensado.
</div>

A classe ls-dismissable avisa nosso script que ele será removido pelo elemento com a classe ls-dismiss e com o atributo data-ls-module="dismiss". Perceba que nesse formato o elemento .ls-dismiss é filho direto do elemento que será removido.

Tamanhos dos alertas

O Locaweb Style tem algumas classes funcionais para nos ajudar a aumentar o espaçamento dos elementos. Basta usar uma das classes abaixo para aumentar o tamanho dos alertas:

NomeDescrição
.ls-xs-spaceColoca um padding de 5px na caixa
.ls-sm-spaceColoca um padding de 10px na caixa
.ls-md-spaceColoca um padding de 20px na caixa
.ls-lg-spaceColoca um padding de 40px na caixa
Sucesso! Você conseguiu, parabéns! Entre aqui.
Atenção: Você tem informações importantes para ler.
1
2
<div class="ls-alert-success ls-md-space"><strong>Sucesso!</strong> Você conseguiu, parabéns! <strong><a href="#">Entre aqui</a></strong>.</div>
<div class="ls-alert-info ls-sm-space"><strong>Atenção:</strong> Você tem informações importantes para ler.</div>

Fixando alertas

Para fixar alertas, tanto em cima quanto em baixo, basta utilizar as classes .ls-alert-fixed-top (em cima) ou .ls-alert-fixed-bottom (em baixo).

Veja um exemplo no painel

1
2
<div class="ls-alert-success ls-alert-fixed-top">...</div>
<div class="ls-alert-success ls-alert-fixed-bottom">...</div>