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;
}