Violin.css

# Menu List: Open

WIP

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

`

    <div class="inv-menu-list inv-menu-list--open">
        <a href="#" class="inv-menu-list_item">
          <i class="material-icons">wifi</i>
          <span>Profile</span>
        </a>
        <a href="#" class="inv-menu-list_item">
          <i class="material-icons">face</i>
          <span>Pontos de Venda</span>
        </a>
        <a href="#" class="inv-menu-list_item">
          <i class="material-icons">search</i>
          <span>Métricas</span>
        </a>
        <a href="#" class="inv-menu-list_item">
          <i class="material-icons">people</i>
          <span>Acessos Externos</span>
        </a>
    </div>

`
`

    <div class="inv-menu-list {{ menu-list.modifier }}">
      {{#each menu-list.list}}
        <a href="#" class="inv-menu-list_item">
          <i class="material-icons">{{this.item.icon}}</i>
          <span>{{this.item.text}}</span>
        </a>
      {{/each}}
    </div>

`
`

    {
      "preview": {
        "styles": " padding: 0; background-color: #1d2e44; border-radius: 0; height: 100%; "
      },
      "menu-list": {
        "list": [
          {
            "item": {
              "icon": "wifi",
              "text": "Profile"
            }
          },
          {
            "item": {
              "icon": "face",
              "text": "Pontos de Venda"
            }
          },
          {
            "item": {
              "icon": "search",
              "text": "Métricas"
            }
          },
          {
            "item": {
              "icon": "people",
              "text": "Acessos Externos"
            }
          }
        ],
        "modifier": "inv-menu-list--open"
      }
    }

`
File:

- Content:
  `

      .inv-menu-list {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: auto;
        padding-left: var(--space-8);
        padding-right: var(--space-8);
      }

      .inv-menu-list_item,
      .inv-menu-list--open > .inv-menu-list_item {
        min-height: 22px;
        border-radius: 4px;
        text-decoration: none;
        transition: background-color 0.1s;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        padding-left: var(--space-16);
        padding-right: var(--space-16);
        padding-top: 12px;
        padding-bottom: 12px;
      }

      .inv-menu-list_item:hover {
        background-color: rgba(232, 234, 236, 0.2);
      }

      .inv-menu-list_item:active {
        background-color: rgba(232, 234, 236, 0.1);
      }

      .inv-menu-list_item > i {
        font-size: 24px;
        color: var(--color-system--regular);
      }

      .inv-menu-list_item > span {
        color: var(--color-system--white);
        font-weight: 600;
        font-size: 14px;
        padding-left: var(--space-16);
      }

      @media (min-width: 500px) {
        .inv-menu-list {
          overflow: hidden;
        }

        .inv-menu-list--open {
          overflow: auto;
        }

        .inv-menu-list_item {
          justify-content: center;
        }

        .inv-menu-list_item > span {
          display: none;
        }

        .inv-menu-list--open > .inv-menu-list_item {
          justify-content: flex-start;
        }

        .inv-menu-list--open > .inv-menu-list_item > span {
          display: block;
        }
      }

  `
- URL: /components/raw/menu-list/menu-list.css
- Filesystem Path: src/components/menu-list/menu-list.css
- Size: 1.3 KB

- Handle: @menu-list--open
- Variants (2): Default , Open
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/menu-list/menu-list.hbs
- Referenced by (4): @menu, @menu--mobile, @menu--categorie, @menu--open

## Menu List

Lista de itens exibidos no Menu. Sua classe principal é `.inv-menu-list`.

`

    <div class="inv-menu-list ">
        <a href="#" class="inv-menu-list_item">
          <i class="material-icons">wifi</i>
          <span>Profile</span>
        </a>
        <a href="#" class="inv-menu-list_item">
          <i class="material-icons">face</i>
          <span>Pontos de Venda</span>
        </a>
        <a href="#" class="inv-menu-list_item">
          <i class="material-icons">search</i>
          <span>Métricas</span>
        </a>
        <a href="#" class="inv-menu-list_item">
          <i class="material-icons">people</i>
          <span>Acessos Externos</span>
        </a>
    </div>

`