Violin.css

# Clear Input

Ready

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

`

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

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

`
`

    <button class="inv-clear-input" {{ternary clear-input.disabled "disabled" "" }}>
      <i class="material-icons">clear</i>
    </button>

`
`

    /* Default: No context defined */

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

`
File:

- Content:
  `

      .inv-clear-input {
        min-width: 40px;
        padding: 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        margin-left: 1px;
        border-radius: 0 4px 4px 0;
        border: none;
        outline: none;
        cursor: pointer;
        background-color: var(--color-system--light);
        transition: 0.2s box-shadow, 0.2s background-color;
      }

      .inv-clear-input > i {
        color: var(--color-system--regular);
      }

      .inv-clear-input:hover {
        box-shadow: var(--shadow-8) var(--color-default--shadow);
      }

      .inv-clear-input:active {
        background-color: var(--color-default--light);
        box-shadow: var(--shadow-3) var(--color-default--shadow);
      }

      .inv-clear-input:disabled,
      .inv-clear-input:disabled:hover,
      .inv-clear-input:disabled:active {
        background-color: var(--color-default--white);
        box-shadow: none;
        cursor: not-allowed;
      }

      .inv-clear-input:disabled > i {
        color: var(--color-default--light);
      }

  `
- URL: /components/raw/clear-input/clear-input.css
- Filesystem Path: src/components/clear-input/clear-input.css
- Size: 909 Bytes

- Handle: @clear-input
- Variants (2): Default , Disabled
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/clear-input/clear-input.hbs
- Referenced by (25): @dropdown, @dropdown--open, @dropdown--action, @dropdown--counter, @dropdown--select, @dropdown--multiselect, @input-addon, @input-addon--disabled, @input-addon--icon, @input-file, @input-file--active, @input-file--file-name, @input-file--long-file-name, @input-file--disabled, @input-file--error, @input-file--error-uploaded, @input-file--error-active, @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

## Clear Input

Utilizado para facilitar a limpeza dos campos, usado em conjunto com os campos de input, sempre no final do campo.

Tendo a classe base `.inv-clear-input`, podendo ser adicionado um texto através de um `button` ou `a`

### Default Clear Input

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

`

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

`