Flexible Alerts
.c-flex-alert
scss
.c-flex-alert {
align-items: center;
background-color: use-color('base', 'true-white');
border-radius: 4px;
box-shadow: $box-shadow-card-lvl-1;
display: flex;
flex-wrap: wrap;
font-size: 22px;
justify-content: space-between;
padding: 8px;
transition: box-shadow ease-in-out 0.25s;
@include media-breakpoint-up('webchat') {
flex-wrap: nowrap;
}
@include element('img') {
background-color: use-color('grey', true-white);
border-radius: 50%;
box-shadow: $box-shadow-card-lvl-1;
flex-shrink: 0;
height: 36px;
margin-right: 16px;
overflow: hidden;
width: 36px;
img {
height: 100%;
width: 100%;
}
}
@include element('text') {
margin-right: 4px;
width: 100%;
p {
margin: 0;
}
}
@include element('title') {
@include use-font('body', 'semibold');
}
@include element('body') {
@include use-font('body', 'regular');
}
@include element('footer') {
margin-top: 4px;
}
@include element('time') {
@include use-font('caption', 'regular');
color: use-color('grey', 'light');
margin-right: 16px;
}
@include element('tags') {
display: inline-flex;
margin-bottom: 4px;
margin-top: 4px;
@include media-breakpoint-up('webchat') {
margin-bottom: 0;
}
}
@include element('actions') {
display: flex;
justify-content: space-around;
margin-top: 6px;
width: 100%;
@include media-breakpoint-up('webchat') {
margin-bottom: 0;
margin-top: initial;
width: auto;
}
button + button {
margin-left: 8px;
}
}
@include modifier('error') {
background-color: lighten(use-color('event', 'error'), 55%);
border: 1px solid lighten(use-color('event', 'error'), 45%);
color: darken(use-color('event', 'error'), 4%);
}
@include modifier('info') {
background-color: transparentize(use-color('event', 'info'), 0.96);
border: 1px solid transparentize(use-color('event', 'info'), 0.7);
color: darken(use-color('event', 'info'), 30%);
}
@include modifier('success') {
background-color: transparentize(use-color('event', 'success'), 0.96);
border: 1px solid transparentize(use-color('event', 'success'), 0.7);
color: darken(use-color('event', 'success'), 10%);
}
@include modifier('dark') {
background-color: use-color('base', 'black');
border: 0;
color: use-color('base', 'white');
.c-close-btn {
background-color: darken(use-color('grey', 'light'), 8%);
}
}
@include modifier('dark') {
background-color: use-color('base', 'black');
border: 0;
color: use-color('base', 'white');
.c-close-btn {
background-color: darken(use-color('grey', 'light'), 8%);
}
}
@include modifier('sticky') {
bottom: 24px;
left: 8px;
min-width: 220px;
position: fixed;
width: calc(100% - 32px);
z-index: use-layer('modal-3');
@include media-breakpoint-up('webchat') {
left: 24px;
max-width: 404px;
min-width: 360px;
width: auto;
}
@include media-breakpoint-up('tablet') {
max-width: none;
}
}
& + & {
margin-top: 8px;
}
&[class*='--'] {
text-align: center;
}
&:hover {
box-shadow: $box-shadow-card-lvl-2;
}
}Definicion de alertas por acciones
En Chattigo las alertas definen su posición según el nivel de importancia del mensaje que contengan, y se miden en una escala de 1 a 5 donde 1 es muy importante y 5 poco importante, además:
1 a 2 se quedan permanentemente(o hasta que el usuario las despache) en el tope de la pantalla
y de 3 a 5 son efímeras, aparecen por unos segundos en la esquina inferior izquierda de la pantalla y luego se van automáticamente.
Ejemplos con mensajes
-
Error: Permanente(1 o 2): Tu tarjeta de crédito ha sido rechazada, su compra no fue realizada. Efímera(3, 4 o 5): Tu archivo no se ha podido cargar ya que sobrepasa el tamaño mínimo.
-
Éxito: Efímera(3, 4 o 5): Tu compra ha sido realizada con éxito.
-
Permisos: Permanente(1 o 2): Para ingresar a la plataforma por favor valida tu email.
-
Información/ayuda: Permanente(1 o 2): Por el contexto global, las oficinas de Chattigo se encuentran cerradas. Efímera(3, 4 o 5): Se eliminó el chat de Alejandra Perez.
Este componente basado en flexbox, es la base de alertas y notificaciones. Por defecto se alinea a la izquierda, pero en el caso de usar sus modificadores de alerta se alinea automáticamente al centro.
Examples
html
<div class="c-flex-alert">
<div class="c-flex-alert__text">
<p class="c-flex-alert__body">
Porter Collins created an issue
</p>
</div>
<div class="c-flex-alert__actions">
<button class="c-close-btn">
Cerrar
</button>
</div>
</div>
html
Modificadores: error, info, success y dark
<div class="c-flex-alert c-flex-alert--info">
<div class="c-flex-alert__text">
<p class="c-flex-alert__body">
UXUI-310 Centro notificaciones nuevo dashboard
</p>
</div>
<div class="c-flex-alert__actions">
<button class="c-close-btn">
Cerrar
</button>
</div>
</div>
<div class="c-flex-alert c-flex-alert--error">
<div class="c-flex-alert__text">
<p class="c-flex-alert__body">
UXUI-310 Centro notificaciones nuevo dashboard
</p>
</div>
<div class="c-flex-alert__actions">
<button class="c-close-btn">
Deshacer
</button>
<button class="c-close-btn">
Cerrar
</button>
</div>
</div>
<div class="c-flex-alert c-flex-alert--success">
🙌
<div class="c-flex-alert__text">
<p class="c-flex-alert__body">
UXUI-310 Centro notificaciones nuevo dashboard
</p>
</div>
</div>
<div class="c-flex-alert c-flex-alert--dark">
<div class="c-flex-alert__text">
<p class="c-flex-alert__body">
Test message 13/07/2020 Test message 09:00 horas
</p>
</div>
<div class="c-flex-alert__actions">
<button class="c-close-btn">
Action2
</button>
</div>
</div>
<div class="c-flex-alert c-flex-alert--dark c-flex-alert--sticky">
<div class="c-flex-alert__text">
<p class="c-flex-alert__body">
Test message
</p>
</div>
<div class="c-flex-alert__actions">
<button class="c-close-btn">
Action1
Ir
</button>
<button class="c-close-btn">
Reagendar
</button>
</div>
</div>