Violin.css

Dropdown: Select 

<div class="inv-dropdown">
    <div class="inv-dropdown__content inv-dropdown__content--open">
        <input id="" name="" type="text" class="inv-input inv-input--focused" value="" placeholder="Ex: 000-00-000" />
        <i class="material-icons inv-input-icon ">

        </i>

        <div class="inv-dropdown__box">

            <div class="inv-list">

                <a href="#" class="inv-list__item">
                    <span>#1 Opção</span>
                </a>
                <a href="#" class="inv-list__item">
                    <span>#2 Opção</span>
                </a>
                <a href="#" class="inv-list__item">
                    <span>#3 Opção</span>
                </a>
                <a href="#" class="inv-list__item">
                    <span>#4 Opção</span>
                </a>
                <a href="#" class="inv-list__item">
                    <span>#5 Opção</span>
                </a>
                <a href="#" class="inv-list__item">
                    <span>#6 Opção</span>
                </a>
                <a href="#" class="inv-list__item">
                    <span>#7 Opção</span>
                </a>
                <a href="#" class="inv-list__item">
                    <span>#8 Opção</span>
                </a>
            </div>

        </div>
    </div>
    <button class="inv-clear-input">
        <i class="material-icons">clear</i>
    </button>
</div>
 
<div class="inv-dropdown">
  <div class="inv-dropdown__content {{ternary dropdown.open "inv-dropdown__content--open" "" }}">
    {{> @input}}
    {{> @input-icon}}

    {{#if dropdown.counter}}
      <div class="inv-dropdown-counter">
        3/10
      </div>
    {{/if}}

    <div class="inv-dropdown__box">

      {{#if dropdown.action}}
        <div class="inv-dropdown-action">
          <div class="inv-dropdown-action__result">
            Nenhum resultado cadastrado.
          </div>
          <div class="inv-dropdown-action__action">
            Aperte Enter para adicionar um novo.
          </div>
        </div>
      {{/if}}

      {{#if dropdown.select}}
        {{ render '@list' }}
      {{/if}}

      {{#if dropdown.multiselect}}
        {{ render '@list--multiselect' }}
      {{/if}}

    </div>
  </div>
  {{> @clear-input}}
</div>
 
{
  "icon": "arrow_drop_down",
  "dropdown": {
    "open": true,
    "select": true
  },
  "input": {
    "modifier": "inv-input--focused"
  }
}
  • Content: 
    .inv-dropdown-action {
  max-width: 120px;
  padding-top: 12px;
  padding-bottom: 12px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.inv-dropdown-action__result {
  color: var(--color-system--dark);
  font-weight: normal;
}

.inv-dropdown-action__action {
  color: var(--color-primary--regular);
  font-weight: bold;
}
  • URL: /components/raw/dropdown/dropdown-action.css
  • Filesystem Path: src/components/dropdown/dropdown-action.css
  • Size: 432 Bytes
  • Content: 
    .inv-dropdown-counter {
  position: absolute;
  top: calc(50% - 12px);
  right: 32px;
  background-color: var(--color-default--white);
  color: var(--color-system--regular);
  height: 24px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  font-size: 14px;
}
  • URL: /components/raw/dropdown/dropdown-counter.css
  • Filesystem Path: src/components/dropdown/dropdown-counter.css
  • Size: 317 Bytes
  • Content: 
    .inv-dropdown {
  min-width: 224px;
}

.inv-dropdown,
.inv-dropdown__content {
  position: relative;
  display: flex;
  flex: 1;
}

.inv-dropdown__content--open > .inv-input {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.inv-dropdown__content > .inv-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.inv-dropdown__content > i {
  position: absolute;
  top: calc(50% - 12px);
  right: 8px;
}

.inv-dropdown__box {
  position: absolute;
  top: 38px;
  left: 0;
  width: calc(100% - 4px);
  min-height: 40px;
  background-color: var(--color-system--white);
  border: solid 2px var(--color-primary--regular);
  border-top-width: 1px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  z-index: -1;
  transition: all 0.2s ease-in-out 0s, visibility 0s linear 0.2s, z-index 0s linear 0.01s;
}

.inv-dropdown__content--open > .inv-dropdown__box {
  z-index: var(--z-index-3);
  visibility: visible;
  opacity: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.2s;
}
  • URL: /components/raw/dropdown/dropdown.css
  • Filesystem Path: src/components/dropdown/dropdown.css
  • Size: 1.1 KB

Campos de seleção de itens

Tendo a classe base .inv-dropdown, o dropdown é formado por:

  • Conteúdo - inv-dropdown__content
    • Input - inv-input
    • Input icon - inv-input-icon
    • Contador de valores selecionados - inv-dropdown-counter (Opcional)
    • Box de listagem - inv-dropdown__box
      • Caixa de texto de ação - inv-dropdown-action (Opcional)
      • Componente de listagem - inv-list
  • Campo para limpar valores - clear-input

Default Dropdown

<div class="inv-dropdown">
  <div class="inv-dropdown__content">
    <input id="" name="" type="text" class="inv-input " placeholder="Selecione uma cidade" />
    <i class="material-icons inv-input-icon">arrow_drop_down</i>

    <div class="inv-dropdown__box">
      <!-- Caixa de texto de ação / Listagem -->
    </div>
  </div>
  <button class="inv-clear-input">
    <i class="material-icons">clear</i>
  </button>
</div>

Utilizado para exibir textos indicativos ao invés da listagem (ex: texto de nenhum resultado encontrado)

<!-- Caixa de ação -->
<div class="inv-dropdown-action">
  <div class="inv-dropdown-action__result">
    Nenhum resultado cadastrado.
  </div>
  <div class="inv-dropdown-action__action">
    Aperte Enter para adicionar um novo.
  </div>
</div>
<!-- Utilização no dropdown -->
<div class="inv-dropdown">
  <div class="inv-dropdown__content inv-dropdown__content--open">
    <input id="" name="" type="text" class="inv-input inv-input--focused" placeholder="Selecione uma cidade" />
    <i class="material-icons inv-input-icon">arrow_drop_down</i>

    <div class="inv-dropdown__box">
      <!-- Caixa de ação -->
      <div class="inv-dropdown-action">
        <div class="inv-dropdown-action__result">
          Nenhum resultado cadastrado.
        </div>
        <div class="inv-dropdown-action__action">
          Aperte Enter para adicionar um novo.
        </div>
      </div>
    </div>
  </div>

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

Utilizado para exibir a contagem de itens selecionados

<div class="inv-dropdown-counter">3/10</div>
<!-- Utilização no dropdown -->
<div class="inv-dropdown">
  <div class="inv-dropdown__content inv-dropdown__content--open">
    <input id="" name="" type="text" class="inv-input inv-input--focused" placeholder="Ex: 000-00-000" />
    <i class="material-icons inv-input-icon">arrow_drop_down</i>

    <!-- Contador -->
    <div class="inv-dropdown-counter">3/10</div>

    <div class="inv-dropdown__box">
      <!-- Caixa de texto de ação / Listagem -->
    </div>
  </div>
  <button class="inv-clear-input">
    <i class="material-icons">clear</i>
  </button>
</div>

Basta utilizar o componente de listagem

<!-- Listagem simples -->
<div class="inv-list">
  <a href="#" class="inv-list__item">
    <span>#1 Opção</span>
  </a>
  <a href="#" class="inv-list__item">
    <span>#2 Opção</span>
  </a>  
</div>

<!-- Listagem com checkboxes -->
 <div class="inv-list">
  <label class="inv-list__item inv-list__item--addon inv-list__item--check-all">
    <input type="checkbox" class="inv-checkbox"  />
    <span>Selecionar todos </span>
  </label>

  <label class="inv-list__item inv-list__item--addon">
    <input type="checkbox" class="inv-checkbox"  />
    <span>#1 Opção</span>
  </label>

  <label class="inv-list__item inv-list__item--addon">
    <input type="checkbox" class="inv-checkbox"  />
    <span>#2 Opção</span>
  </label>
</div>
<!-- Utilização no dropdown -->
<div class="inv-dropdown">
  <div class="inv-dropdown__content inv-dropdown__content--open">
    <input id="" name="" type="text" class="inv-input inv-input--focused" placeholder="Ex: 000-00-000" />
    <i class="material-icons inv-input-icon">arrow_drop_down</i>

    <div class="inv-dropdown__box">
      <!-- Listagem -->
      <div class="inv-list">
        <a href="#" class="inv-list__item">
          <span>#1 Opção</span>
        </a>
        <a href="#" class="inv-list__item">
          <span>#2 Opção</span>
        </a>  
      </div>
    </div>
  </div>
  <button class="inv-clear-input">
    <i class="material-icons">clear</i>
  </button>
</div>
Modificadores Uso
.inv-dropdown__content--open Modifica o dropdown para abrir a listagem

Dropdown Content Open

Torna a listagem visível.

Para isso ser possível, deve ser adicionado o modificador inv-dropdown__content--open no elemento inv-dropdown__content.

Também será necessário ativar o estado do input adicionando o modificador inv-input--focused

<div class="inv-dropdown">
  <div class="inv-dropdown__content inv-dropdown__content--open">
    <input id="" name="" type="text" class="inv-input inv-input--focused" placeholder="Selecione uma cidade" />
    <i class="material-icons inv-input-icon">arrow_drop_down</i>

    <div class="inv-dropdown__box">
      <!-- Caixa de texto de ação / Listagem -->
    </div>
  </div>
  <button class="inv-clear-input">
    <i class="material-icons">clear</i>
  </button>
</div>