chattigo-webkit 1.19.7

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('error') {
    border: 1px solid use-color(event, error);
  }

  @include element('label') {
    @include use-font('body', 'regular');
    color: use-color(base, 'black');
    display: inline-block;
    margin-bottom: 8px;
    width: 100%;
  }

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

  &: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__error-message - clase para los mensajes de error
  • .c-input__hint-message - clase para los mensajes de ayuda

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 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()

$box-shadow-input-focus [private]

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