Input Icon

Ready

HTML
View
Context
Assets
Info
Notes


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


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


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


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


        
        
            /* Default */
{
  "input-icon": {
    "icon": "event"
  }
}


        
            /* Active */
{
  "input-icon": {
    "icon": "visibility",
    "modifier": "inv-input-icon--active"
  }
}


        
            /* Disable */
{
  "input-icon": {
    "icon": "visibility",
    "disabled": true,
    "modifier": "inv-input-icon--disabled"
  }
}

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
Variants (3): Default , Active , Disable
Preview:
- With layout
- Component only
Filesystem Path: src/components/input-icon/input-icon.hbs
Referenced by (22): @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-map, @input-map--selected, @input-map--search-empty, @input-map--search-value, @input-map--search-disabled, @input-map--search-value-disabled, @input-map--search-empty-error, @input-map--search-value-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>