Inputs components classes

.c-input

scss
.c-input {
  @include use-font('body', 'regular');
  border: 1px solid use-color('grey', 'light-i');
  border-radius: 4px;
  box-sizing: border-box;
  color: use-color('base', 'black');
  margin-bottom: 12px;
  padding: 8px;
  width: 100%;

  @include modifier('search') {
    height: 28px;
    margin-bottom: 0;
    padding: 4px 8px 4px 32px;
    position: relative;
  }

  @include modifier('file') {
    display: none;

    &::-webkit-file-upload-button {
      visibility: hidden;
    }
  }

  @include modifier('message') {
    margin-bottom: 0;
  }

  @include modifier('thin') {
    height: 34px !important;
    padding-left: 8px !important;
  }

  @include modifier('file') {
    display: none;

    &::-webkit-file-upload-button {
      visibility: hidden;
    }
  }

  @include modifier('message') {
    margin-bottom: 0;
  }

  @include modifier('error') {
    border: 1px solid use-color(event, error);
  }

  @include modifier('warning') {
    border: 1px solid use-color('secondary', 'base');
  }

  @include element('label') {
    @include use-font('body', 'regular');
    align-items: center;
    color: use-color(base, 'black');
    display: flex;
    margin-bottom: 8px;
    width: 100%;

    [class^='icon-'],
    [class*=' icon-'] {
      color: use-color('secondary', 'base');
      font-size: 24px;
      line-height: 1;
      margin-right: 8px;
    }
  }

  @include element('error-message') {
    @include use-font('caption', 'regular');
    color: use-color(event, error);
    margin: -8px 0 8px;
    padding: 0;
    width: 100%;
  }

  @include element('warning-message') {
    @include use-font('body-alt', 'regular');
    margin: -8px 0 8px;
    padding: 0;
    width: 100%;

    @include modifier('with-btn') {
      margin-bottom: 16px;
    }

    @include modifier('warning-btn-wrapper') {
      display: flex;
      justify-content: flex-end;
    }
  }
  
  @include element('hint-message') {
    @include use-font('caption', 'regular');
    color: use-color('grey', light);
    margin: -8px 0 8px;
    padding: 0;
    width: 100%;
  }

  @include element('actions') {
    display: flex;
    justify-content: space-between;
    margin: 0 0 8px;
  }

  @include element('prefix') {
    align-items: center;
    background-color: use-color('base', 'true-white');
    border: solid 1px use-color('grey', 'light-i');
    border-radius: 4px 0 0 4px;
    color: use-color('grey', 'light');
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
    width: 40px;
  }

  @include element('suffix') {
    align-items: center;
    background-color: use-color('base', 'true-white');
    border: solid 1px use-color('grey', 'light-i');
    border-radius: 0 4px 4px 0;
    color: use-color('grey', 'light');
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
    padding: 0 4px;
    width: 40px;

    &:hover {
      background-color: use-color('grey', 'light-iii');
    }

    // overrides
    [class^='icon-'],
    [class*=' icon-'] {
      display: flex;
      font-size: 24px;
    }
  }

  &:focus {
    box-shadow: $box-shadow-input-focus;
    outline: 0;
  }

  &:disabled,
  &[disabled] {
    background-color: use-color('grey', light-i);
    border: 1px solid use-color('grey', light-alt);
    cursor: not-allowed;
  }
}

Esta clase esta hecha para el uso en elementos del tipo inputs y textarea.

Consta con clases para el label, modificadores de error y estado disable:

  • .c-input__label - clase para el label del input
  • .c-input - estilos base del input
  • .c-input .c-input--error - clase modificadora para estilos de error en input
  • .c-input .c-input--warning - clase modificadora para estilos de warning en input
  • .c-input__error-message - clase para los mensajes de error
  • .c-warning-message - clase para los mensajes de warning. Con las clases utilitarias u-hidden y u-visible se controla la visibilidad
  • .c-warning-message - Para posicionar el botón, se lo usa dentro de un wrapper con la clase .c-input__warning-message--warning-btn-wrapper que lo alinea a la izquierda
  • .c-input__hint-message - clase para los mensajes de ayuda

Sufijos y Prefijos

Estos elementos están creados para ser usados dentro del bloque c-input-wrapper acompañando al input antes o después de este.

  • .c-input__prefix
  • .c-input__suffix

Modificadores para inputs:

  • .c-input--search
  • .c-input--file

Examples

html
<input type="text" class="c-input" placeholder="USUARIO" />
<!-- input disabled -->
<input type="text" class="c-input" placeholder="USUARIO" disabled />
html error
<!-- input with error -->
<input type="text" class="c-input c-input--error" placeholder="USUARIO" />
<p class="c-input__error-message">
  Mensaje de error predeterminado
</p>
html warning
<p>
  Indentificador *
</p>
<input type="text" class="c-input c-input--warning" placeholder="87378261007" />
<p class="c-input__warning-message c-input__warning-message--with-btn">
  Este identificador ya se encuentra en otro contacto ¿Desea asociarlo?
</p>
<div class="c-input__warning-message--warning-btn-wrapper">
  <button class="c-button c-button--secondary c-button--secondary--half-width">
    Ascociar a contacto
  </button>
</div>
html hint
<!-- input with error -->
<input type="text" class="c-input" placeholder="USUARIO" />
<p class="c-input__hint-message">
  Mensaje de ayuda predeterminado
</p>
html w/ label
<!-- input with label -->
<label class="c-input__label">Input label:</label>
<input type="text" class="c-input" placeholder="USUARIO" />
html app input search
<form class="app-form--search">
  <input type="text" class="c-input c-input--search" placeholder="Buscar" />
</form>

Requires

@mixin element()

@mixin modifier()

@mixin use-font()

@function use-color()

.c-input-wrapper

scss
.c-input-wrapper {
  display: flex;
  position: relative;

  @include modifier('prefix') {
    // overrides
    .c-input {
      border-left: 0;
      border-radius: 0 4px 4px 0;
    }
  }
  
  @include modifier('suffix') {
    // overrides
    .c-input {
      border-radius: 4px 0 0 4px;
      border-right: 0;
    }
  }
}

Bloque creado para contener los elementos cuando el input esta acompañado de un prefijo o sufijo.

consta con 2 clases modificadoras:

  • c-input-wrapper--prefix
  • c-input-wrapper--suffix

Estás clases modifican el border de los inputs según corresponda.

Examples

html prefix
<span class="c-input-wrapper c-input-wrapper--prefix">
  <span class="c-input__prefix">
    <span class="icon-search"></span>
  </span>
  <input type="text" class="c-input" placeholder="Buscar" />
</span>
html suffix
<div class="c-input-wrapper c-input-wrapper--suffix">
  <input type="text" class="c-input" />
  <a class="c-action-link c-input__suffix">
    <span class="icon-weekly"></span>
  </a>
</div>

.c-select

scss
.c-select {
  @include use-font('body', 'regular');
  appearance: none;
  background-color: use-color(base, true-white);
  background-image: 
    linear-gradient(45deg, transparent 50%, use-color('grey', light) 50%), 
    linear-gradient(135deg, use-color('grey', light) 50%, transparent 50%);
  background-position:
    calc(100% - 12px) 16px,
    calc(100% - 8px) 16px;
  background-repeat: no-repeat;
  background-size:
    5px 5px,
    5px 5px;
  border: 1px solid use-color('grey', light-i);
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  margin-bottom: 12px;
  padding: 8px 24px 8px 8px;
  position: relative;
  width: 100%;

  @include modifier('thin') {
    padding: 5px !important;
  }

  @include modifier(error) {
    border: 1px solid use-color(event, error);
  }

  &:focus {
    outline: 0;
  }

  &:disabled {
    background-image: 
      linear-gradient(45deg, transparent 50%, use-color('grey', light-i) 50%), 
      linear-gradient(135deg, use-color('grey', light-i) 50%, transparent 50%);
    cursor: not-allowed;
  }
}

Esta clase esta hecha para ser utilizada en todos los selects elements.

Nota: En caso de querer usar un mensaje de error, hay que utilizar la clase
.c-input__error-message al igual que en los inputs con la clase .c-input.

Examples

html
<select class="c-select">
  <option id="0">
    Select option
  </option>
  <option id="1">Option 1</option>
  <option id="2">Option 2</option>
</select>
html disabled
<select class="c-select" disabled>
  <option id="0">
    Select option
  </option>
  <option id="1">Option 1</option>
  <option id="2">Option 2</option>
</select>
html error
<select class="c-select c-select--error">
  <option id="0">
    Select option
  </option>
  <option id="1">Option 1</option>
  <option id="2">Option 2</option>
</select>
<p class="c-input__error-message">
  Mensaje de error predeterminado
</p>

Requires

@mixin use-font()

@mixin modifier()

@function use-color()

.c-input-prefix

scss
.c-input-prefix {
  position: relative;

  @include modifier('currency-us') {
    .c-input {
      padding-left: 32px;
    }

    &::before {
      content: 'US$';
    }
  }
  
  @include modifier('currency-cl') {
    .c-input {
      padding-left: 38px;
    }

    &::before {
      content: 'CLP$';
    }
  }

  &::before {
    @include use-font('body', 'regular');
    color: use-color('grey', 'light');
    left: 5px;
    position: absolute;
    top: 9px;
  }
}

Este componente[.c-input-prefix] esta hecho para contener al component .c-input.

Funciona como un modificador del input dando espacio suficiente para agregar un prefijo.

El contenido del prefijo depende de la clase modificadora, actualmente solo tenemos prefijos para los casos de currency:

  • currency us: c-input-prefix--currency-us
  • currency cl: c-input-prefix--currency-cl

Examples

html currency us
<div class="c-input-prefix c-input-prefix--currency-us">
  <input type="text" class="c-input" value="30.00" />
</div>
html currency cl
<div class="c-input-prefix c-input-prefix--currency-cl">
  <input type="text" class="c-input" value="60.000" />
</div>

Requires

@mixin use-font()

@mixin modifier()

@function use-color()

.c-file-drop-area

scss
.c-file-drop-area {
  background-color: use-color('base', 'true-white');
  border: solid 1px use-color('grey', 'light-i');
  border-radius: 4px;
  border-style: dotted;
  color: use-color('grey');
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
  padding-top: 16px;
  text-align: center;
  text-decoration: none;

  @include element('footer') {
    background-color: use-color('grey', 'light-iii');
    border-radius: 0 0 4px 4px;
    cursor: pointer;
    display: flex;
    margin-top: 12px;
    padding: 12px;
    width: auto;

    [class^='icon-'],
    [class*=' icon-'] {
      color: use-color('grey', 'light');
      font-size: 24px;
    }
  }

  @include element('message') {
    @include use-font('caption');
    margin: auto;
    max-width: 180px;

    @include if-block-has-modifier('c-file-drop-area', 'lite') {
      margin: 0;
      max-width: 100%;
      text-align: center;

      .c-action-link {
        @include use-font('caption');
      }
    }

    strong {
      display: inline-block;
      width: 100%;
    }
  }

  @include element('preview-image') {
    height: 110px;
    margin: 0 auto 4px;
  }

  @include modifier('lite') {
    background-color: use-color('grey', 'light-iii');
    border-radius: 0 0 4px 4px;
    cursor: pointer;
    display: flex;
    margin-top: 0;
    padding: 8px 0;
    width: auto;

    [class^='icon-'],
    [class*=' icon-'] {
      color: use-color('secondary', 'light-alt');
      font-size: 24px;
    }
  }

  &:hover {
    background-color: use-color('grey', 'light-iii');
    cursor: pointer;
  }

  span {
    color: use-color('secondary', 'light-alt');
    font-size: 75px;
    margin: auto;
  }

  [class^='icon-'],
  [class*=' icon-'] {
    display: flex;
  }

  .c-action-link {
    @include use-font('body');
  }
}

Estilo de input file para la carga de archivos y preview para la carga de imagenes.

Examples

html drop area
<input type="file" class="c-input--file" id="input-file">

<label for="input-file" class="c-file-drop-area">
  <span class="icon-upload-cloud"></span>

  <div class="c-file-drop-area__footer">
    <div class="c-file-drop-area__message">
      <strong>Arrastra y suelta</strong>
      o selecciona un archivo.
    </div>
  </div>
</label>
html preview image
<div class="c-file-drop-area">
  <img class="c-file-drop-area__preview-image" src="https://feature-ux-450-diseno-migracion-administrador--chattigo-webkit.netlify.app/assets/img/example-preview-image.png" />

  <span class="c-action-link">
    fotoadjunta.jpg
  </span>

  <div class="c-file-drop-area__footer">
    <span class="icon-trash"></span>
  </div>
</div>
html drop area lite
<input type="file" class="c-input--file" id="input-file">

<label class="c-file-drop-area c-file-drop-area--lite" for="input-file">
  <span class="icon-upload-cloud"></span>
  <div class="c-file-drop-area__message">
    <strong>
     Arrastra, suelta o selecciona un <a class="c-action-link">archivo</a>.
    </strong>
  </div>
</label>

.c-minutes-selector

scss
.c-minutes-selector {
  @include element('arrow') {
    color: use-color('secondary', 'base');
    display: block;
    margin-left: 12px;
  }

  @include element('input') {
    border-color: use-color('grey', 'light-alt');
    border-radius: 8px;
    border-style: solid;
    color: use-color('grey', 'light-alt');
    margin-bottom: 4px;
    text-align: center;
    width: 32px;

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      margin: 0;
    }
  }

  @include element('label') {
    border: 1px solid use-color('secondary', 'base');
    border-radius: 8px;
    color: use-color('grey', 'light-alt');
    display: inline-block;
    font-size: 12px;
    margin-left: 4px;
    padding: 4px;
  }
}

Estilo de input file para la carga de archivos y preview para la carga de imagenes.

Example

html selector de minutos
<div class="c-minutes-selector">
  <span class="c-minutes-selector__arrow icon-arrow-up"></span>
  <input type="number"class="c-minutes-selector__input" min="0" step="1" max="120" value="0">
  <span class="c-minutes-selector__label"> minutos </span>
  <span class="c-minutes-selector__arrow icon-arrow-down" (click)="restMinutes()"></span>
</div>