Alertas

Alertas

Os alertas são apresentados principalmente quando se submetem conteúdos (formulários) por parte do utilizador. Por norma estão invisíveis e são apresentados em forma de notificação após ter sido efetuada uma ação.

Exemplo de mensagem de sucesso
Exemplo de mensagem de alerta
Exemplo de mensagem de erro
Código
Ocultar Código
  • HTML
  • CSS
<div class="alerts-wrapper">
     <div class="alert-msg msgsuccess">
         <i class="icon-ok-circle">&nbsp;</i><span>Exemplo de mensagem de sucesso</span>
     </div>
     <div class="alert-msg msgalert">
         <span class="icon-stack">
  <i class="icon-circle-blank icon-stack-base"></i>
  <i class="icon-exclamation icon-light"></i>
 </span><span>Exemplo de mensagem de alerta</span>
     </div>
     <div class="alert-msg msgerror">
         <i class="icon-remove-circle">&nbsp;</i><span>Exemplo de mensagem de erro</span>
     </div>
 </div>
.alerts-wrapper .alert-msg{

    padding: 15px 20px;

    border: 2px solid;

    font-family: "latobold";

    font-size: 16px;

    margin-top: 15px;

    margin-bottom: 15px;

}

.alerts-wrapper .alert-msg i{

    font-size: 17px;

    vertical-align: middle;

    margin-right: 10px;

    height: auto;

    width: auto;

}



.alerts-wrapper .alert-msg span{

    vertical-align: middle;

}

.alerts-wrapper .alert-msg span.icon-stack{

    height: 17px;

    width: 17px;

    line-height: 14px;

    margin-right: 10px;

    margin-left: -1px;

}



.alerts-wrapper .alert-msg span.icon-stack i{

    font-size: 8px;

    color: #F7931E;

}

.alerts-wrapper .alert-msg span.icon-stack i.icon-stack-base{

    font-size: 17px;

}

.alerts-wrapper .alert-msg.msgsuccess{

    border-color: #00A551;

    color: #00A551;

}

.alerts-wrapper .alert-msg.msgerror{

    border-color: #BE1E2D;

    color: #BE1E2D;

}

.alerts-wrapper .alert-msg.msgalert{

    border-color: #F7931E;

    color: #F7931E;

}
Caixa de diálogo
Carregadores