.app-c-empty-inbox
scss
.app-c-empty-inbox {
background-color: use-color(base, true-white);
background-image: url('https://cdn.chattigo.com/assets/img/isotipo-grey.svg');
background-position: -20% 20%;
background-repeat: no-repeat;
background-size: 600px;
box-sizing: border-box;
min-height: 100vh;
padding-top: 85px;
@include media-breakpoint-only(tablet) {
background-position: -20% 120%;
background-size: 1460px;
}
@include media-breakpoint-only(tablet-landscape) {
background-position: -120% 120%;
background-size: 1460px;
}
@include element(image) {
display: flex;
height: 98px;
margin: 0 auto 19px;
width: 98px;
}
@include element(message) {
@include use-font('subheading','regular');
margin: auto;
text-align: center;
width: 160px;
&::first-letter {
text-transform: uppercase;
}
}
}
Para cuando no existan mensajes en el inbox de la app, este componente debe usarce como contenido.
Example
html
<div class="app-c-empty-inbox">
<img class="app-c-empty-inbox__image" src="https://cdn.chattigo.com/assets/img/smile-empty-state.png" />
<p class="app-c-empty-inbox__message">
no tienes chats en este momento.
</p>
</div>