Violin.css

# Input

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <!-- Default -->
    <input id="" name="" type="text" class="inv-input " value="" placeholder="Ex: 000-00-000" />

    <!-- Disabled -->
    <input id="" name="" type="text" class="inv-input " value="" placeholder="Ex: 000-00-000" disabled />

    <!-- Error -->
    <input id="" name="" type="text" class="inv-input inv-input--error" value="" placeholder="Ex: 000-00-000" />

    <!-- Focused -->
    <input id="" name="" type="text" class="inv-input inv-input--focused" value="" placeholder="Ex: 000-00-000" />

`
`

    <input
      id="{{input.for}}"
      name="{{input.for}}"
      type="text"
      class="inv-input {{ input.modifier }}"
      value="{{ input.value }}"
      placeholder="{{ ternary input.placeholder input.placeholder "Ex: 000-00-000" }}"
      {{ternary disabled "disabled" "" }}
    />

`
`

    /* Default: No context defined */

    /* Disabled */
    {
      "disabled": true
    }

    /* Error */
    {
      "input": {
        "modifier": "inv-input--error"
      }
    }

    /* Focused */
    {
      "input": {
        "modifier": "inv-input--focused"
      }
    }

`
File:

- Content:
  `

      .inv-input {
        flex: 1 1 auto;
        background-color: var(--color-system--light);
        color: var(--color-system--dark);
        font-size: 14px;
        border-radius: 4px;
        min-height: 40px;
        border: none;
        outline: none;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 16px;
        padding-right: 16px;
        line-height: normal;
        transition: background-color 0.1s ease-in-out;
      }

      .inv-input::placeholder {
        color: var(--color-system--regular);
      }

      .inv-input:disabled {
        background-color: var(--color-default--white);
        cursor: not-allowed;
        color: var(--color-default--regular);
      }

      .inv-input:focus,
      .inv-input--focused {
        background-color: var(--color-system--white);
        -webkit-appearance: none;
        -webkit-box-shadow: var(--shadow-border-2) var(--color-primary--regular) inset;
        box-shadow: var(--shadow-border-2) var(--color-primary--regular) inset;
      }

      .inv-input--error {
        background-color: var(--color-error--white);
      }

      .inv-input--error:focus {
        -webkit-appearance: none;
        -webkit-box-shadow: var(--shadow-border-2) var(--color-error--regular) inset;
        box-shadow: var(--shadow-border-2) var(--color-error--regular) inset;
      }

  `
- URL: /components/raw/input/input.css
- Filesystem Path: src/components/input/input.css
- Size: 1.1 KB

- Handle: @input
- Variants (4): Default , Disabled , Error , Focused
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/input/input.hbs
- Referenced by (16): @dropdown, @dropdown--open, @dropdown--action, @dropdown--counter, @dropdown--select, @dropdown--multiselect, @form-field, @form-field--icon, @form-field--progress, @form-field--error, @form-field--disabled, @input-addon, @input-addon--disabled, @input-addon--icon, @menu-search, @menu-search--open

## Inputs

Campos de input da aplicação

Tendo a classe base `.inv-input`, podendo ser utilizado apenas com a tag `input`

### Default Input

Input padrão, comum para ações regulares dos usuários.

`

    <input type="text" class="inv-input" name="" placeholder="" value="" />

`

Modificadores | Uso
--- | ---
`.inv-input--error` | Modifica o input com estilização de erro
`.inv-input--focused` | Modifica o input com estilização de focus

### Error Input

Versão de indicação de erro no input.

`

    <input type="text" class="inv-input inv-input--error" name="" placeholder="" value="" />

`

### Focused Input

Versão de indicação de focus no input.

`

    <input type="text" class="inv-input inv-input--focused" name="" placeholder="" value="" />

`