.app-c-profile-data
scss
.app-c-profile-data {
background-color: use-color(base, 'white');
margin: auto;
padding: 32px 0;
width: 200px;
@include element('picture-status') {
margin-bottom: 8px;
position: relative;
text-align: center;
}
@include element('img') {
border-radius: 50%;
height: 120px;
object-fit: cover;
width: 120px;
}
@include element('status-badge') {
background-color: use-color(event, success);
border: solid 3px use-color(base, 'white');
border-radius: 50%;
display: inline-block;
height: 26px;
position: absolute;
right: 43px;
top: 3px;
width: 26px;
&.paused {
background-color: use-color(event, warning);
}
}
@include element('info') {
@include use-font('body', 'light');
color: use-color('grey');
display: inline-block;
text-align: center;
text-transform: capitalize;
width: 100%;
}
}Esta componente contiene data informativa del agente logeado en la app.
Contiene una imagen(dummy) del agente con un badge que identifica el status.
Este badge maneja un estado por defecto active que tendría el color de event success,
si se agrega la clase paused cambia al color al de event warning.
Example
html
<div class="app-c-profile-data">
<div class="app-c-profile-data__picture-status">
<img class="app-c-profile-data__img" src="https://cdn.chattigo.com/assets/img/profiles/10_dummy.png" />
<span class="app-c-profile-data__status-badge"></span>
</div>
<span class="app-c-profile-data__info">
duración sesión: 04:19:21
</span>
<span class="app-c-profile-data__info">
chats cerrados: 10
</span>
</div>