Violin.css

Menu: Open 

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

    <div class="inv-menu__container inv-menu__container--open">

        <div class="inv-menu-header">
            <button class="inv-menu-btn">
                <i class="material-icons">keyboard_arrow_left</i>
            </button>
            <img class="inv-menu-logo inv-menu-logo--small" src="https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/logo.png" alt="Menu Logo" />
            <img class="inv-menu-logo inv-menu-logo--large" src="https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/logo-full.png" alt="Menu Logo" />
        </div>

        <div class="inv-menu__search" title="Click to search">
            <i class="material-icons">search</i>
            <span>Ctrl+k para buscar</span>
        </div>
        <div class="inv-menu__search-tip">Ctrl+k</div>

        <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>

        <a class="inv-menu__user" href="#">
            <img src="https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/pikachu.jpg" alt="User Avatar">
            <span>João</span>
        </a>

    </div>
</div>
 
<div class="inv-menu {{ menu.modifier }}">
  <button class="inv-menu-btn inv-menu-btn--expand">
    <i class="material-icons">menu</i>
  </button>

  <div class="inv-menu__container {{ ternary menu.open "inv-menu__container--open" "" }}">

    <div class="inv-menu-header">
      <button class="inv-menu-btn">
        <i class="material-icons">keyboard_arrow_left</i>
      </button>
      <img
          class="inv-menu-logo inv-menu-logo--small"
          src="https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/logo.png"
          alt="{{ menu-logo.alt }}" />
      <img
          class="inv-menu-logo inv-menu-logo--large"
          src="https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/logo-full.png"
          alt="{{ menu-logo.alt }}" />
    </div>

    <div class="inv-menu__search" title="Click to search">
      <i class="material-icons">search</i>
      <span>Ctrl+k para buscar</span>
    </div>
    <div class="inv-menu__search-tip">Ctrl+k</div>

    {{#if menu.categorie}}

      <div class="inv-menu-list-categorie-container">
        <a href="#" class="inv-menu-list-categorie__back-button">
          <i class="material-icons">keyboard_arrow_left</i>
        </a>
        <div class="inv-menu-list-categorie">
          <div class="inv-menu-list-categorie__title">
            <i class="material-icons">people</i><span>Colaboradores</span>
          </div>
          {{#each menu-list-categorie.list}}
            {{#if this.item.title}}
              <div class="inv-menu-list-categorie__separator">{{ this.item.title }}</div>
            {{else}}
              <a href="#" class="inv-menu-list-categorie__item">{{ this.item.text }}</a>
            {{/if}}
          {{/each}}
        </div>
      </div>

    {{else}}

      <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>

    {{/if}}

    <a class="inv-menu__user" href="#">
      <img src="https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/pikachu.jpg"
        alt="User Avatar">
      <span>João</span>
    </a>

  </div>
</div>
 
{
  "preview": {
    "styles": " height: 100%; "
  },
  "menu-logo": {
    "src": "/assets/images/logo-full.png",
    "alt": "Menu Logo"
  },
  "icon": "search",
  "input": {
    "placeholder": "Ctrl+k para buscar"
  },
  "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"
  },
  "menu-list-categorie": {
    "list": [
      {
        "item": {
          "icon": "people",
          "text": "Colaboradores"
        }
      },
      {
        "item": {
          "text": "Afastamento"
        }
      },
      {
        "item": {
          "text": "Perfil de Acesso"
        }
      },
      {
        "item": {
          "text": "Jornada de Trabalho"
        }
      },
      {
        "item": {
          "title": "Relatórios"
        }
      },
      {
        "item": {
          "text": "Histórico de Contratação de Colaboradores"
        }
      }
    ]
  },
  "menu": {
    "open": true,
    "modifier": "inv-menu--visible"
  },
  "menu-search": {
    "modifier": "inv-menu-search--open"
  }
}
  • Content: 
    .inv-menu-list-categorie-container {
  display: flex;
  padding-right: var(--space-16);
  height: 100%;
  overflow: auto;
}

.inv-menu-list-categorie__back-button {
  text-decoration: none;
  cursor: pointer;
}

.inv-menu-list-categorie__back-button > i {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 24px;
  color: var(--color-system--white);
}

.inv-menu-list-categorie {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.inv-menu-list-categorie__title {
  display: flex;
  align-items: center;
  color: var(--color-system--white);
  min-height: 44px;
  font-weight: 600;
  font-size: 14px;
}

.inv-menu-list-categorie__item {
  min-height: 20px;
  width: 100%;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.1s;
  display: flex;
  flex-shrink: 0;
  color: var(--color-system--white);
  font-weight: 600;
  font-size: 14px;
  padding-left: var(--space-8);
  padding-top: 12px;
  padding-bottom: 12px;
}

.inv-menu-list-categorie__item:hover {
  background-color: rgba(232, 234, 236, 0.2);
  color: var(--color-system--white);
  text-decoration: none;
}

.inv-menu-list-categorie__item:active {
  background-color: rgba(232, 234, 236, 0.1);
  color: var(--color-system--white);
  text-decoration: none;
}

.inv-menu-list-categorie__separator {
  font-size: 12px;
  font-weight: bold;
  color: var(--color-primary--light);
  padding-left: var(--space-8);
  display: flex;
  align-items: center;
  min-height: 13.33px;
  padding-top: 20px;
  padding-bottom: 10px;
}

.inv-menu-list-categorie__title > i {
  padding-left: var(--space-8);
}

.inv-menu-list-categorie__title > span {
  padding-left: var(--space-8);
}
  • URL: /components/raw/menu/menu-categorie.css
  • Filesystem Path: src/components/menu/menu-categorie.css
  • Size: 1.7 KB
  • Content: 
    .inv-menu-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

.inv-menu-list__item {
  min-height: 44px;
  max-height: 44px;
  border-radius: 4px;
  transition: background-color 0.1s;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-left: var(--space-16);
  padding-right: var(--space-16);
  cursor: pointer;
  text-decoration: none;
  color: var(--color-system--white);
  font-weight: 600;
  font-size: 14px;
}

.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);
  padding-right: var(--space-16);
}

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

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

  .inv-menu-list__item {
    color: transparent;
  }

  .inv-menu__container:hover > .inv-menu-list > .inv-menu-list__item,
  .inv-menu-list--open > .inv-menu-list__item {
    color: var(--color-system--white);
  }
}
  • URL: /components/raw/menu/menu-list.css
  • Filesystem Path: src/components/menu/menu-list.css
  • Size: 1.2 KB
  • Content: 
    .inv-menu__container {
  display: none;
  background: var(--color-system--dark);
  flex-direction: column;
  height: 100%;
  padding-top: var(--space-16);
  box-sizing: border-box;
  overflow-x: hidden;
}

.inv-menu--visible > .inv-menu__container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-index-1);
  display: flex;
}

.inv-menu-header {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "a b c";
  padding-left: var(--space-8);
  padding-right: var(--space-8);
  min-height: 40px;
  max-height: 40px;
}

.inv-menu-btn {
  background-color: var(--color-system--dark);
  border: none;
  cursor: pointer;
  outline: 0;
  width: 40px;
  height: 40px;
}

.inv-menu-btn--expand {
  border-radius: 0 0 6px 0;
  width: 56px;
  height: 56px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-index-1);
  display: flex;
}

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

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

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

.inv-menu-logo {
  position: absolute;
  grid-area: b;
  justify-self: center;
  min-height: inherit;
  max-height: inherit;
  transition: opacity 0.1s;
  visibility: visible;
  opacity: 1;
}

.inv-menu-logo--small {
  visibility: hidden;
  opacity: 0;
}

.inv-menu__search {
  display: flex;
  align-items: center;
  min-height: 40px;
  max-height: 40px;
  border-radius: 10px;
  box-sizing: border-box;
  font-weight: 600;
  color: var(--color-system--regular);
  background-color: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  user-select: none;
  margin-top: var(--space-32);
  margin-left: var(--space-8);
  margin-right: var(--space-8);
}

.inv-menu__search > i {
  padding-left: 16px;
  padding-right: 16px;
  color: var(--color-primary--light);
}

.inv-menu__search-tip {
  visibility: hidden;
  margin-bottom: 12px;
}

.inv-menu__user {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #1a2f50;
  height: 62px;
  width: 236px;
  min-height: 62px;
  max-height: 62px;
  color: var(--color-system--white);
  font-size: 14px;
  font-weight: 600;
}

.inv-menu__user > img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  margin-left: 16px;
  text-decoration: none;
}

.inv-menu__user > span {
  padding-left: 8px;
  max-width: calc(100% - 40px);
  word-wrap: break-word;
  text-decoration: none;
  margin-right: 16px;
  max-height: 34px;
  overflow: hidden;
}

.inv-menu__user:hover {
  background-color: rgba(232, 234, 236, 0.2);
  color: var(--color-system--white);
  text-decoration: none;
}

.inv-menu__user:active {
  background-color: rgba(232, 234, 236, 0.1);
  color: var(--color-system--white);
}

@media (min-width: 500px) {
  .inv-menu {
    height: 100%;
  }

  .inv-menu > .inv-menu-btn--expand {
    display: none;
  }

  .inv-menu__container {
    display: flex;
    max-width: 72px;
    height: auto;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-index-1);
  }

  .inv-menu-header {
    display: flex;
    justify-content: center;
    flex-shrink: 0;
  }

  .inv-menu-header > .inv-menu-btn {
    display: none;
  }

  .inv-menu-logo--small {
    visibility: visible;
    opacity: 1;
  }

  .inv-menu-logo--large {
    visibility: hidden;
    opacity: 0;
  }

  .inv-menu__search > span {
    display: none;
  }

  .inv-menu__search-tip {
    visibility: visible;
    text-align: center;
    font-weight: 600;
    font-size: 10px;
    color: var(--color-system--regular);
    line-height: 14px;
    outline: 0;
    user-select: none;
  }

  .inv-menu__user {
    cursor: default;
    pointer-events: none;
  }

  .inv-menu__user > span {
    display: none;
    padding-left: unset;
  }

  .inv-menu__container:hover,
  .inv-menu__container--open {
    max-width: 236px;
  }

  .inv-menu__container:hover > .inv-menu-header > .inv-menu-logo--small,
  .inv-menu__container--open > .inv-menu-header > .inv-menu-logo--small {
    visibility: hidden;
    opacity: 0;
  }

  .inv-menu__container:hover > .inv-menu-header > .inv-menu-logo--large,
  .inv-menu__container--open > .inv-menu-header > .inv-menu-logo--large {
    visibility: visible;
    opacity: 1;
  }

  .inv-menu__container:hover > .inv-menu__search > span,
  .inv-menu__container--open > .inv-menu__search > span {
    display: block;
  }

  .inv-menu__container:hover > .inv-menu__search-tip,
  .inv-menu__container--open > .inv-menu__search-tip {
    visibility: hidden;
  }

  .inv-menu__container:hover > .inv-menu__user,
  .inv-menu__container--open > .inv-menu__user {
    justify-content: flex-start;
    cursor: pointer;
    pointer-events: initial;
  }

  .inv-menu__container:hover > .inv-menu__user > span,
  .inv-menu__container--open > .inv-menu__user > span {
    display: block;
    padding-left: 8px;
  }
}
  • URL: /components/raw/menu/menu.css
  • Filesystem Path: src/components/menu/menu.css
  • Size: 5 KB

Menu

Menu com as opções de navegação do sistema.

Table of Contents

  • Menu
    • Default
  • Menu Expand Button
  • Menu Container
  • Menu Header, Menu Collapse Button & Imagem
  • Menu Search
  • Menu List
  • Menu List Categories
  • Menu Images
  • Screens and Behaviors

Onde todas as seções do menu são adicioadas, representado pela classe .inv-menu. | Modificador | Tipo | Local | | ————- |:————-:| —–:| | .inv-menu | default | div | | .inv-menu--open | menu aberto | div |

<div class="inv-menu"><div>
<div class="inv-menu inv-menu--open"><div>

Default

Menu default. Em telas com menos de 500px ele aparece com os itens à mostra, em telas com 500px ou mais ele aparece por default com as descrições dos itens escondidas. A versão 500px default não possui scroll quando os itens excedem o espaço do menu pois o mesmo foi projetado para abrir quando o usuário passar o mouse por cima (ou tocar qualquer parte do menu), ou seja, o usuário não irá de fato interagir com o menu 500px default, somente com as versões do menu aberto.

Botão para expandir o menu. Este só aparece em telas até 499px. Telas com ou mais de 500px terão o menu fixo,em sua forma fechada. Confira a documentação completa do Menu Expand Button

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

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

Container das seções header, listas e footer do menu. O menu container é repre sentado pela classe inv-menu__container. | Modificador | Tipo | Local | | ————- |:————-:| —–:| | .inv-menu__container | default | div | | .inv-menu__container--open | menu container aberto | div |

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

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

Menu Header, Menu Collapse Button & Imagem

Header do menu. Nele nós temos o Collapse Button e uma imagem de escolha de quem implementar. O menu header é representado pela classe .inv-menu-header e fica sempre dentro do Menu Container.

  • Collapse Button: botão para fechar o menu. Este só aparece em telas até 499px.
  • Imagem: uma imagem de escolhe de quem implementa o menu. Pode ser a imagem da empresa, do sistema, do cliente que esta utilizando o sistema, etc.

Confira a documentação completa do Menu Collapse Button

<div class="inv-menu">
  <button class="inv-menu-expand-button">
    <i class="material-icons">menu</i>
  </button>
  <div class="inv-menu__container">
    <div class="inv-menu-header">
      <button class="inv-menu-collapse-button">
        <i class="material-icons">keyboard_arrow_left</i>
      </button>
      <picture>
        <source media="(min-width: 500px)" srcset="/assets/images/logo.png">
        <img src="/assets/images/logo-full.png" alt="Menu Logo" />
      </picture>
    </div>
  </div>
<div>

O Menu Search é adicionado dentro do Menu Container, logo após Menu Header. Confira a documentação completa do Menu Search

<div class="inv-menu">
  <button class="inv-menu-expand-button">
    <i class="material-icons">menu</i>
  </button>
  <div class="inv-menu__container">
    <div class="inv-menu-header">
      <button class="inv-menu-collapse-button">
        <i class="material-icons">keyboard_arrow_left</i>
      </button>
      <picture>
        <source media="(min-width: 500px)" srcset="/assets/images/logo.png">
        <img src="/assets/images/logo-full.png" alt="Menu Logo" />
      </picture>
    </div>

    <div class="inv-menu__search">
      <div class="inv-menu-search ">
        <input id="" name="" type="text" class="inv-input " placeholder="Ctrl+k para buscar" />
        <label class="inv-menu-search__label" for="">
          <i class="material-icons">search</i>
        </label>
      </div>
      <div class="inv-menu__search-tip">Ctrl+k</div>
    </div>
  </div>
<div>

O Menu List é adicionando também dentro do menu container, abaixo do Menu Search. Nele são exibidos os itens de navegação do menu.

Confira a documentação completa do Menu List

<div class="inv-menu">
  <button class="inv-menu-expand-button">
    <i class="material-icons">menu</i>
  </button>
  <div class="inv-menu__container">
    <div class="inv-menu-header">
      <button class="inv-menu-collapse-button">
        <i class="material-icons">keyboard_arrow_left</i>
      </button>
      <picture>
        <source media="(min-width: 500px)" srcset="/assets/images/logo.png">
        <img src="/assets/images/logo-full.png" alt="Menu Logo" />
      </picture>
    </div>

    <div class="inv-menu__search">
      <div class="inv-menu-search ">
        <input id="" name="" type="text" class="inv-input " placeholder="Ctrl+k para buscar" />
        <label class="inv-menu-search__label" for="">
          <i class="material-icons">search</i>
        </label>
      </div>
      <div class="inv-menu__search-tip">Ctrl+k</div>
    </div>

    <div class="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>
    </div>
  </div>
<div>

O Menu List Categorie representa a versão aberta do menu após o usuário selecionar algum dos itens do Menu List.

Confira a documentação completa do Menu List Categorie

<div class="inv-menu">
  <button class="inv-menu-expand-button">
    <i class="material-icons">menu</i>
  </button>
  <div class="inv-menu__container">
    <div class="inv-menu-header">
      <button class="inv-menu-collapse-button">
        <i class="material-icons">keyboard_arrow_left</i>
      </button>
      <picture>
        <source media="(min-width: 500px)" srcset="/assets/images/logo.png">
        <img src="/assets/images/logo-full.png" alt="Menu Logo" />
      </picture>
    </div>

    <div class="inv-menu__search">
      <div class="inv-menu-search ">
        <input id="" name="" type="text" class="inv-input " placeholder="Ctrl+k para buscar" />
        <label class="inv-menu-search__label" for="">
          <i class="material-icons">search</i>
        </label>
      </div>
      <div class="inv-menu__search-tip">Ctrl+k</div>
    </div>

    <div class="inv-menu__list">
      <div class="inv-menu-list-categorie-container">
        <a href="#" class="inv-menu-list-categorie-container__back-button">
          <i class="material-icons">keyboard_arrow_left</i>
        </a>
      <div class="inv-menu-list-categorie">
        <div class="inv-menu-list-categorie__title">
          <i class="material-icons">people</i><span>Colaboradores</span>
        </div>
          <a href="#" class="inv-menu-list-categorie__item">Colaboradores</a>
          <a href="#" class="inv-menu-list-categorie__item">Afastamento</a>
          <a href="#" class="inv-menu-list-categorie__item">Perfil de Acesso</a>
          <a href="#" class="inv-menu-list-categorie__item">Jornada de Trabalho</a>
          <div class="inv-menu-list-categorie__separator">Relatórios</div>
          <a href="#" class="inv-menu-list-categorie__item">Histórico de Contratação de Colaboradores</a>
        </div>
      </div>
    </div>
  </div>
<div>

O Menu permite a adição de duas imagens: uma imagem de logo no topo e uma no bottom.

Imagem Topo

A imagem de topo do menu fica dentro do container .inv-menu-header.

Imagem Bottom

A imagem de bottom do menu fica dentro da tag <picture>, com a classe .inv-menu__brand. Esta (imagem bottom) fica logo após os componentes de lista.

<picture class="inv-menu__brand">
  <source media="(min-width: 500px)" srcset="/assets/images/brand.png">
  <img src="/assets/images/brand-full.png" alt="Menu Logo" />
</picture>

Screens and Behaviors

Até 499px

  • O Menu Default, até 499px exibe apenas o Menu Expand Button
  • Ao utilizar o touch (no mobile) ou hover no desktop, o meno é aberto ocupando todos os 499px.
  • Se os itens não couberem na tela, um scroll é adicionado para o usuário poder realizar a navegação.
  • Nesta versão, o componente Menu Collapse Button é exibido para o usuário poder fechar o menu.

Mais de 499px

  • O Menu Default, com mais de 499px é exibido em sua forma fechado, mostrando apenas os ícones do menu,
  • Ao passar o mouse por cima (ou touch em telas com mais de 499px) o menu é expandido.
  • Ao remover o mouse ou clicar/tocar em algum item, o menu é fechado.