.app-c-alert
scss
.app-c-alert {
align-items: center;
background-image: use-color(gradients, primary-hard);
border-radius: 4px;
box-sizing: border-box;
color: use-color(base, true-white);
display: flex;
height: 44px;
margin: 8px;
padding: 8px;
@include element('icon') {
font-size: 26px;
margin-right: 8px;
&:nth-last-child(1) {
font-size: 16px;
margin-left: 8px;
margin-right: 0;
}
}
@include element('message') {
@include use-font('caption', 'regular');
line-height: 11px;
margin-right: 16px;
}
@include element('time') {
@include use-font('caption', 'regular');
align-self: center;
line-height: 11px;
margin-left: auto;
max-width: 55px;
min-width: 55px;
strong {
@include use-font('subheading', 'bold');
line-height: 15px;
}
}
@include modifier('paused') {
background-image: use-color(gradients, night-mode);
}
}Alertas de notificación in app
Estas alertas están hechas para ser desplegadas en la Inbox page de la app.
Examples
html
<div class="app-c-alert">
<span class="app-c-alert__icon icon-notification"></span>
<div class="app-c-alert__message">
Tu dispositivo se encuentra sin conexión. Revisa tu red y vuelve a intentarlo.
</div>
</div>
html
<div class="app-c-alert app-c-alert--paused">
<span class="app-c-alert__icon icon-time-out"></span>
<div class="app-c-alert__message">
Te encuentras en estado de pausa. Por ahora no recibirás nuevos chats.
</div>
<div class="app-c-alert__time">
<strong>27</strong> min. de pausa
</div>
<span class="app-c-alert__icon icon-arrow-left"></span>
</div>