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

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