Locaweb Style

Documentação

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

Box de notificação

Boxes de notificações usado para dividir ou agrupar notificações.

×

Configuração do serviço

Et tempora quae et iure impedit

Eum quia at occaecati voluptatibus optio voluptatem mollitia alias deserunt voluptates aperiam voluptas architecto. exercitationem illo dolores eaque est deserunt dolorem ut dolor deleniti. qui laboriosam repudiandae voluptatem vel beatae amet eum omnis perspiciatis nisi recusandae. optio et fugit exercitationem unde voluptatem. nihil sit vel sed soluta aut est voluptates. distinctio numquam minima reiciendis. et ab esse atque

1
2
3
4
5
6
7
8
<div class="ls-alert-box ls-dismissable">
  <header class="ls-info-header">
    <span data-ls-module="dismiss" class="ls-dismiss">&times;</span>
    <h2 class="ls-title-3">Configuração do serviço</h2>
    <p>Ut eum est rerum possimus voluptatem placeat</p>
  </header><!-- /header -->
  <p>Doloremque dolor distinctio provident. aut doloribus nulla totam temporibus sit maiores maxime sapiente suscipit est. eos perferendis sint dolor explicabo corporis odit voluptas eveniet eveniet odio iure et. cum voluptatem molestias eaque inventore. tempora qui dignissimos et explicabo in quisquam beatae natus incidunt. deserunt accusantium consequuntur necessitatibus illo deleniti aut saepe vero esse omnis porro id</p>
</div>

Fechando os boxes de notificações

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.

Alterando o status e cores do box de notificações

Para alterar as cores dos boxes de notificações, basta seguir a tabela abaixo:

Seletor Descrição
.ls-alert-box-success O elemento é representado com status/cor de sucesso.
.ls-alert-box-info O elemento é representado com status/cor de informações.
.ls-alert-box-warning O elemento é representado com status/cor de atenção.
.ls-alert-box-danger O elemento é representado com status/cor de perigo.