Violin.css

List: Multiselect 

<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>
    <label class="inv-list__item inv-list__item--addon">
        <input type="checkbox" class="inv-checkbox" />
        <span>#3 Opção</span>
    </label>
    <label class="inv-list__item inv-list__item--addon">
        <input type="checkbox" class="inv-checkbox" />
        <span>#4 Opção</span>
    </label>
    <label class="inv-list__item inv-list__item--addon">
        <input type="checkbox" class="inv-checkbox" />
        <span>#5 Opção</span>
    </label>
    <label class="inv-list__item inv-list__item--addon">
        <input type="checkbox" class="inv-checkbox" />
        <span>#6 Opção</span>
    </label>
    <label class="inv-list__item inv-list__item--addon">
        <input type="checkbox" class="inv-checkbox" />
        <span>#7 Opção</span>
    </label>
    <label class="inv-list__item inv-list__item--addon">
        <input type="checkbox" class="inv-checkbox" />
        <span>#8 Opção</span>
    </label>
</div>
 
<div class="inv-list">
  {{#if multiselect}}
    <label class="inv-list__item inv-list__item--addon inv-list__item--check-all">
      {{> @checkbox}}
      <span>Selecionar todos </span>
    </label>
  {{/if}}

  {{#each list as |title|}}
    {{#if ../multiselect}}
      <label class="inv-list__item inv-list__item--addon">
        {{> @checkbox}}
        <span>{{ title }}</span>
      </label>
    {{else}}
      <a href="#" class="inv-list__item">
        <span>{{ title }}</span>
      </a>
    {{/if}}
  {{/each}}
</div>
 
{
  "list": [
    "#1 Opção",
    "#2 Opção",
    "#3 Opção",
    "#4 Opção",
    "#5 Opção",
    "#6 Opção",
    "#7 Opção",
    "#8 Opção"
  ],
  "multiselect": true
}
  • Content: 
    .inv-list {
  background-color: var(--color-system--white);
  max-height: 280px;
  overflow-y: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.inv-list__item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 40px;
  color: var(--color-system--dark);
  font-size: 14px;
  padding-left: var(--space-16);
  font-weight: 300;
  text-decoration: none;
  transition: 0.2s background-color;
  cursor: pointer;
}

.inv-list__item:hover {
  background-color: var(--color-default--white);
}

.inv-list__item:active {
  background-color: var(--color-system--light);
}

.inv-list__item--selected {
  background-color: var(--color-default--white);
}

.inv-list__item--addon {
  padding-left: 0;
}

.inv-list__item--check-all {
  border-bottom: solid 1px var(--color-default--white);
  min-height: 32px;
  color: var(--color-default--dark);
  font-weight: 600;
}

.inv-list__item--addon > .inv-checkbox {
  margin-left: var(--space-8);
  margin-right: var(--space-8);
}

.inv-list__item > span {
  max-height: 30px;
  overflow: hidden;
  margin-right: var(--space-8);
}
  • URL: /components/raw/list/list.css
  • Filesystem Path: src/components/list/list.css
  • Size: 1.1 KB

List

Utilizadas nos campos de select

Contendo a classe base .inv-list, e elementos com a classe .inv-list__item

Default List

Lista de itens padrão para seleção

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

<div class="inv-list">
  <label for="1" class="inv-list__item inv-list__item--addon">
    <input id="1" type="checkbox" class="inv-checkbox" />
    <span>
      #Meu item da lista
    </span>
  </label>
</div>
Modificadores Uso
.inv-list__item--selected Modifica o item da lista para o mesmo estar selecionado
.inv-list__item--addon Modifica o item da lista para inserir um novo componente na lateral esquerda
.inv-list__item--check-all Modifica o item da lista, seleção de itens internos

Selected item

Modifica o item da lista para o mesmo estar selecionado

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

Addon item

Modifica o item da lista para inserir um novo componente na lateral esquerda

<div class="inv-list">
  <label for="1" class="inv-list__item inv-list__item--addon">
    <input id="1" type="checkbox" class="inv-checkbox" />
    <span>
      #Meu item da lista 1
    </span>
  </label>
  <label for="2" class="inv-list__item inv-list__item--addon">
    <input id="2" type="checkbox" class="inv-checkbox" />
    <span>
      #Meu item da lista 2
    </span>
  </label>
</div>

Check all

Modifica o item da lista, seleção de itens internos

<div class="inv-list">
  <label for="selecionarTodos" class="inv-list__item inv-list__item--addon inv-list__item--check-all">
    <input id="selecionarTodos" type="checkbox" class="inv-checkbox" />
    <span>Selecionar todos </span>
  </label>
  <label for="1" class="inv-list__item inv-list__item--addon">
    <input id="1" type="checkbox" class="inv-checkbox" />
    <span>
      #Meu item da lista 1
    </span>
  </label>
  <label for="2" class="inv-list__item inv-list__item--addon">
    <input id="2" type="checkbox" class="inv-checkbox" />
    <span>
      #Meu item da lista 2
    </span>
  </label>
</div>