.app-form

scss
.app-form {
  margin: 40px 24px 32px;
  
  @include element('info') {
    @include use-font('body', 'regular');
  }

  @include modifier('search') {
    margin: 16px;
    position: relative;
    
    &::before {
      bottom: 0;
      color: use-color('grey', light-alt);
      content: '\E010'; //icon-search
      font-family: 'chattigoicons';
      font-size: 16px;
      left: 8px;
      margin: auto;
      position: absolute;
      top: 0;
      z-index: use-layer('base');
    }
  }

  // overrides
  .c-input {
    height: 48px;
    margin-bottom: 16px;
  }

  .c-button {
    margin: 0;
  }
}

Esta clase contiene las sobreescrituras de estilo necesario para el uso de los componentes de formulario.

Examples

html form recuperar contraseña
<form class="app-form">
  <p class="app-form__info">
    Ingresa tu nombre de usuario para solicitar la información de los supervisores 
    que podrán ayudarte con la recuperación de tu contraseña.
  </p>

  <input type="text" class="c-input" />

  <button class="c-button">
    Solicitar información
  </button>
</form>
html app input search
<form class="app-form--search">
  <input type="text" class="c-input c-input--search" placeholder="Buscar" />
</form>

Requires

@mixin use-font()