Violin.css

# Input Icon: Default

Ready

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

`

    <i class="material-icons inv-input-icon ">
      event
    </i>

`
`

    <i class="material-icons inv-input-icon {{ input-icon.modifier }}">
      {{ input-icon.icon }}
    </i>

`
`

    {
      "input-icon": {
        "icon": "event"
      }
    }

`
File:

- Content:
  `

      .inv-input-icon {
        cursor: pointer;
        color: var(--color-default--regular);
        max-width: 24px;
        max-height: 24px;
      }

      .inv-input-icon--active {
        color: var(--color-primary--regular);
      }

      .inv-input-icon--disabled {
        color: var(--color-default--light);
        cursor: not-allowed;
      }

  `
- URL: /components/raw/input-icon/input-icon.css
- Filesystem Path: src/components/input-icon/input-icon.css
- Size: 279 Bytes

- Handle: @input-icon--default
- Variants (3): Default , Active , Disable
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/input-icon/input-icon.hbs
- Referenced by (19): @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, @input-file, @input-file--file-selected, @input-file--input-file-disabled, @input-file--input-file-required, @input-file--input-file-error

## Input Icon

Utilizadas nos campos de input

Tendo a classe base `.inv-input-icon`, podendo ser adicionado um `i`

### Default Input Icon

Icone padrão, usado em componentes para indicar qual o tipo de input, exemplo: Datepicker e Dropdown. Também para realizar ações, ex: ver senha.

`

    <i class="material-icons inv-input-icon">visibility</i>

`

Modificadores | Uso
--- | ---
`.inv-input-icon--active` | Modifica o icon input com estilização de ativo
`.inv-input-icon--disabled` | Modifica o icon input com estilização de desabilitado

### Active Input Icon

Versão ativa.

`

    <i class="material-icons inv-input-icon inv-input-icon--active">visibility</i>

`

### Disabled Input Icon

Versão desabilitada, sendo feita automaticamente quando o icone estiver em conjunto com o input dentro de um campo de formulário.

Também podendo ser feita de forma manual adicionando a classe `.inv-input-icon--disabled`

`

    <i class="material-icons inv-input-icon inv-input-icon--disabled">visibility</i>

`