Alertas
- Home >
- Componentes >
- 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.
- HTML
- CSS
<div class="alerts-wrapper">
<div class="alert-msg msgsuccess">
<i class="icon-ok-circle"> </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"> </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;
}
Este website utiliza cookies. Ao continuar a navegação está a aceitar a sua utilização.
Caso pretenda saber mais, consulte a nossa política de privacidade.