<!-- Default -->
<div class="inv-warning ">
Alerta default
</div>
<!-- Success -->
<div class="inv-warning inv-warning--success">
Operação realizada com sucesso
</div>
<!-- Error -->
<div class="inv-warning inv-warning--error">
Ocorreu um erro interno no sistema
</div>
<div class="inv-warning {{ warning.modifier }}">
{{ warning.text }}
</div>
/* Default */
{
"warning": {
"text": "Alerta default"
}
}
/* Success */
{
"warning": {
"text": "Operação realizada com sucesso",
"modifier": "inv-warning--success"
}
}
/* Error */
{
"warning": {
"text": "Ocorreu um erro interno no sistema",
"modifier": "inv-warning--error"
}
}
.inv-warning {
text-align: center;
background-color: var(--color-default--white);
color: var(--color-default--dark);
box-shadow: var(--shadow-border-1) var(--color-default--regular) inset;
font-size: 14px;
padding: 10px 8px;
line-height: normal;
border-radius: 6px;
}
.inv-warning--success {
box-shadow: var(--shadow-border-1) var(--color-done--regular) inset;
background-color: var(--color-done--white);
color: var(--color-done--dark);
}
.inv-warning--error {
box-shadow: var(--shadow-border-1) var(--color-error--regular) inset;
background-color: var(--color-error--white);
color: var(--color-error--dark);
}
Utilizados como alertas de informações no sistema.
Tendo a classe base .inv-warning, e podendo ser utilizado em conjunto com <div>
Alerta padrão.
<div class="inv-warning">
Alerta padrão
</div>| Modificadores | Uso |
|---|---|
.inv-warning--success |
Modifica o alerta com estilização com a cor success |
.inv-warning--error |
Modifica o alerta com estilização com a cor error |
Alerta com estado de sucesso.
<div class="inv-warning inv-warning--success">
Operação realizada com sucesso
</div>Alerta com estado de erro.
<div class="inv-warning inv-warning--error">
Ocorreu um erro interno no servidor.
</div>