Login Card component

.c-login-card

scss
.c-login-card {
  background-color: use-color(base, true-white);
  background-image: url('https://cdn.chattigo.com/assets/img/isotipo-grey.svg');
  background-position: -15% 0;
  background-repeat: no-repeat;
  background-size: 740px;
  box-sizing: border-box;
  color: use-color('base', 'black');
  margin: auto;
  min-height: 100vh;
  padding: 20px 0 40px;

  @include media-breakpoint-only(tablet) {
    background-position: -115% 140%;
    background-size: 1100px;
  }

  @include media-breakpoint-only(tablet-landscape) {
    background-position: -120% 120%;
    background-size: 1460px;
  }

  @include media-breakpoint-up(desktop) {
    background-image: none;
    background-position: bottom left;
    background-size: 1460px;
    border-radius: 8px;
    box-shadow: $box-shadow-card-lvl-2;
    margin: 20vh auto 0;
    min-height: 544px;
    padding: 30px 0;
    width: 456px;
  }

  @include element('logo') {
    margin-bottom: 16px;
    margin-top: 40px;

    @include media-breakpoint-up(tablet) {
      margin-top: 32px;
    }
  }

  @include element('logo-isotipo') {
    height: 60px;
  }
  
  @include element('logo-letters') {
    display: inline-block;
    height: 23px;
    margin-top: 14px;
    width: 100%;
  }

  @include element('header') {
    margin: 0 auto 20px;
    text-align: center;
    width: 100%;
  }

  @include element('body') {
    margin: auto;
    padding: 0 18px;
    text-align: center;

    @include media-breakpoint-up(tablet) {
      margin-bottom: 32px;
      padding: 0 36px;
      width: 360px;
    }
  }

  @include element('error-message') {
    @include use-font('body', 'regular');
    color: use-color(event, error);
    cursor: not-allowed;
    display: inline-block;
    margin: 0;
    padding-top: 4px;
    word-break: break-word;
  }

  @include element('error-block') {
    height: 36px;
    margin: 0 0 16px;
    text-align: center;
  }

  @include element('h2') {
    @include use-font('h3', 'bold');
    margin: 0;
    margin-bottom: 8px;
    padding: 0 15px;
  }
  
  @include element('subheading') {
    @include use-font('subheading', 'regular');
    display: inline-block;
    margin: 0;
    padding: 0 20px;
  }

  // components rewirtes
  @include element('input') {
    line-height: 24px;
    margin-bottom: 16px;
  }

  .c-button {
    margin-bottom: 16px;
  }
}

Classes & Estructura para el uso del Login Card de Chattigo.

Example

html
<div class="c-login-card">
  <div class="c-login-card__header">
    <div class="c-login-card__logo">
      <img class="c-login-card__logo-isotipo" src="https://cdn.chattigo.com/assets/img/isotipo.svg" />
      <img class="c-login-card__logo-letters" src="https://cdn.chattigo.com/assets/img/letters-logo.svg" />
    </div>

    <h2 class="c-login-card__subheading">
      Optimiza la relación con tus clientes
    </h2>
  </div>

  <div class="c-login-card__body">
    
    <input type="text" class="c-input c-login-card__input" placeholder="Usuario" />
    <input type="password" class="c-input c-login-card__input" placeholder="Contraseña" />

    <div class="c-login-card__error-block">
      <p class="c-login-card__error-message">
        Login incorrecto, intente de nuevo.
      </p>
    </div>

    <button class="c-button">
      Ingresar
    </button>
    <a href="#1" class="c-action-link">
      ¿Olvidaste su contraseña?
    </a>
  </div>
</div>

Requires

@mixin element()

@mixin use-font()

@function use-color()

.c-login-background

scss
.c-login-background {
  background-color: use-color(primary);
  background-image: url('https://cdn.chattigo.com/assets/img/background-login.svg'), use-color(gradients, balanced-dos);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  height: auto;
  left: 0;
  min-height: 100vh;
  position: absolute;
  top: 0;
  width: 100%;
}

Esta clase esta hecha para ser usada como el contenedor del elemento .c-login-card.

Example

html
<div class="u-widget-example-margin"> <!-- div only for example -->

  <div class="c-login-background"></div>

</div>

Requires

@function use-color()