Violin.css

# Menu Expand Button

WIP

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

`

    <button class="inv-menu-expand-button">
      <i class="material-icons">menu</i>
    </button>

`
`

    <button class="inv-menu-expand-button">
      <i class="material-icons">menu</i>
    </button>

`
`

    /* No context defined for this component. */

`
File:

- Content:
  `

      .inv-menu-expand-button {
        background-color: var(--color-system--dark);
        border: none;
        border-radius: 0 0 6px 0;
        cursor: pointer;
        width: 56px;
        height: 56px;
        outline: 0;
      }

      .inv-menu-expand-button > i {
        font-size: 40px;
        color: var(--color-system--white);
        transition: color 0.1s;
      }

      .inv-menu-expand-button:hover > i {
        color: var(--color-default--regular);
      }

      .inv-menu-expand-button:active > i {
        color: var(--color-default--dark);
      }

  `
- URL: /components/raw/menu-expand-button/menu-expand-button.css
- Filesystem Path: src/components/menu-expand-button/menu-expand-button.css
- Size: 454 Bytes

- Handle: @menu-expand-button
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/menu-expand-button/menu-expand-button.hbs
- Referenced by (4): @menu, @menu--mobile, @menu--categorie, @menu--open

## Menu Expand Button

O Menu Expand Button é mostrado em telas com largura de 499px ou menos. Ele é utilizado para expandir o menu para o usuário.

Classe principal: `.inv-menu-expand-button`.

`

    <button class="inv-menu-expand-button">
      <i class="material-icons">menu</i>
    </button>

`