Violin.css

# Input Addon

Ready

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

`

    <!-- Default -->
    <div class="inv-input-addon ">
        <div class="inv-input-addon__prepend">
            <input type="checkbox" class="inv-checkbox" />
        </div>

        <div class="inv-input-addon__input ">
            <input id="" name="" type="text" class="inv-input " placeholder="Ex: 000-00-000" />

        </div>

        <button class="inv-clear-input">
        <i class="material-icons">clear</i>
      </button>
    </div>

    <!-- Disabled -->
    <div class="inv-input-addon inv-input-addon--disabled">
        <div class="inv-input-addon__prepend">
            <input type="checkbox" class="inv-checkbox" disabled />
        </div>

        <div class="inv-input-addon__input ">
            <input id="" name="" type="text" class="inv-input " placeholder="Ex: 000-00-000" disabled />

        </div>

        <button class="inv-clear-input" disabled>
        <i class="material-icons">clear</i>
      </button>
    </div>

    <!-- Icon -->
    <div class="inv-input-addon ">
        <div class="inv-input-addon__prepend">
            <input type="checkbox" class="inv-checkbox" />
        </div>

        <div class="inv-input-addon__input inv-input-addon__input--icon">
            <input id="" name="" type="text" class="inv-input " placeholder="Ex: 000-00-000" />

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

        <button class="inv-clear-input">
        <i class="material-icons">clear</i>
      </button>
    </div>

`
`

    <div class="inv-input-addon {{ternary disabled "inv-input-addon--disabled" "" }}">
      <div class="inv-input-addon__prepend">
        {{> @checkbox}}
      </div>

      <div class="inv-input-addon__input {{ inputAddon.modifier }}">
        {{> @input}}

        {{#if input-icon.icon}}
          {{> @input-icon}}
        {{/if}}
      </div>

      {{> @clear-input}}
    </div>

`
`

    /* Default: No context defined */

    /* Disabled */
    {
      "disabled": true,
      "clear-input": {
        "disabled": true
      }
    }

    /* Icon */
    {
      "input-icon": {
        "icon": "visibility"
      },
      "inputAddon": {
        "modifier": "inv-input-addon__input--icon"
      }
    }

`
File:

- Content:
  `

      .inv-input-addon {
        display: flex;
        align-items: stretch;
      }

      .inv-input-addon__prepend {
        background-color: var(--color-system--white);
        box-shadow: var(--shadow-border-1) var(--color-system--light) inset;
        border-radius: 4px 0 0 4px;
        padding-left: 4px;
        padding-right: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        margin-right: 1px;
      }

      .inv-input-addon--disabled > .inv-input-addon__prepend {
        background-color: var(--color-default--white);
        box-shadow: none;
        cursor: not-allowed;
      }

      .inv-input-addon__input {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
      }

      .inv-input-addon__input--icon > .inv-input {
        padding-right: 40px;
      }

      .inv-input-addon__input:not(:last-child) > .inv-input {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }

      .inv-input-addon__input:not(:first-child) > .inv-input {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }

      .inv-input-addon__input > .inv-input-icon {
        position: absolute;
        top: 8px;
        right: 8px;
      }

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

- Handle: @input-addon
- Variants (3): Default , Disabled , Icon
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/input-addon/input-addon.hbs
- References (4): @checkbox, @input, @input-icon, @clear-input

## Input Addon

Utilizado para agrupar um campo ao lado de um input

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

Os elementos disponíveis para serem utilizados com o componente são:

- Elemento alocado a esquerda do input `<div class="inv-input-addon__prepend>`
- `inv-input`
- `inv-clear-input`

Ao colocar um campo ao lado esquedo do input, deverá ser criada uma `div` com a classe `inv-input-addon__prepend`

### Default Input Addon

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

`

    <div class="inv-input-addon">
      <div class="inv-input-addon__prepend">
        <input type="checkbox" class="inv-checkbox" />
      </div>
      <input id="" name="" type="text" class="inv-input " placeholder="Ex: 000-00-000" />
      <button class="inv-clear-input">
      <i class="material-icons">clear</i>
    </button>
    </div>

    <div class="inv-input-addon inv-input-addon--disabled">
      <div class="inv-input-addon__prepend">
        <input type="checkbox" class="inv-checkbox" disabled />
      </div>
      <input id="" name="" type="text" class="inv-input " placeholder="Ex: 000-00-000" disabled />
      <button class="inv-clear-input" disabled>
        <i class="material-icons">clear</i>
      </button>
    </div>

`

Modificadores | Uso
--- | ---
`.inv-input-addon--disabled` | Modifica o addon com estilização de desabilitado
`.inv-input-addon--icon` | Modifica o addon para ter suporte a icone de ação

### Addon Disabled

Versão desabilitada.

`

    <div class="inv-input-addon inv-input-addon--disabled">
      <div class="inv-input-addon__prepend">
        <input type="checkbox" class="inv-checkbox" disabled />
      </div>
      <input id="" name="" type="text" class="inv-input " placeholder="Ex: 000-00-000" disabled />
      <button class="inv-clear-input" disabled>
        <i class="material-icons">clear</i>
      </button>
    </div>

`

### Addon Icon

Campo de addon com icone de ação do input.

`

    <div class="inv-input-addon">
      <div class="inv-input-addon__prepend">
        <input type="checkbox" class="inv-checkbox" />
      </div>

      <div class="inv-input-addon__input inv-input-addon__input--icon">
        <input name="icon" type="text" class="inv-input" />
        <i class="material-icons inv-input-icon">visibility</i>
      </div>

      <button class="inv-clear-input">
        <i class="material-icons">clear</i>
      </button>
    </div>

`