Violin.css

# Menu Collapse Button

WIP

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

`

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

`
`

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

`
`

    {
      "preview": {
        "styles": " background-color: var(--color-system--dark); border: none; border-radius: 0 0 6px 0; cursor: pointer; width: 72px; height: 72px; outline: 0; display: flex; align-items: center; "
      }
    }

`
File:

- Content:
  `

      .inv-menu-collapse-button {
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: 0;
        width: 40px;
        height: 40px;
      }

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

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

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

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

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

## Menu Collapse Button

O Menu Collapse Button é utilizado no header do componente de Menu, em telas com 499px de largura ou menos. Ele é responsável por fechar o menu.

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

`

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

`