.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>

Requires

@function use-color()

@mixin element()