Produto
PRODUTO
Dropdown
Dropdowns apresentam uma lista de opções que podem ser utilizadas para filtrar um conteúdo de página.
Estados de interação
Normal
Hover
Pressed 
Filled
Disabled
Multi-select
Normal 
Dois itens Três ou mais itens
Código
Esse componente utiliza o plugin jQuery Select2.
HTML 
Exibir código
Copiar código
Exibir código
<div class="dropdown">
<select name="dropdown">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
</div>
<div class="dropdown multi">
<select name="dropdown-multiple" multiple="multiple">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
</select>
</div>
SASS Exibir código
Copiar código
Exibir código
.dropdown{
transition: .4s;
&.multi span.select2 .select2-selection__rendered {
padding-top: 11px;
box-sizing: border-box;
}
&.multi ul li.select2-selection__choice {
background-color: #3153f5!important;
color: #fff;
border-radius: 4px;
border: none!important;
font-family: Lato;
font-size: 0.75em;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 23px;
letter-spacing: normal;
color: #ffffff;
padding: 1px 10px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
float: right;
color: #fff!important;
border-left: 1px solid rgba(255,255,255,0.2);
margin-left: 6px;
padding-left: 5px;
margin-right: -2px;
}
&.multi span.select2 {
height: inherit!important;
.select2-selection__rendered {
line-height: 40px !important;
}
.dropdown-wrapper{
pointer-events: none;
border: none;
background-image: url(/img/chevron-dark-grey.svg);
background-position: 0;
padding: 0;
width: 24px;
height: 24px;
margin: 0;
display: block;
position: absolute;
right: 20px;
top: 20px;
}
}
&.hovered span.select2{
border: 1px solid #1b68ff;
.select2-selection__arrow b{
background-image: url(/img/chevron-hover.svg)!important;
}
}
&.pressed span.select2{
border: 2px solid #0a51fb!important;
.select2-selection__arrow b{
background-image: url(/img/chevron-pressed.svg)!important;
}
}
&.disabled{
pointer-events: none;
span.select2{
border: solid 1px #ebebeb;
background-color: #ebebeb;
}
.select2-selection--single{
background-color: #ebebeb;
}
}
span.select2 {
-webkit-appearance: none;
width: 300px;
max-width: 100%;
height: 60px;
border-radius: 4px;
background-color: #ffffff;
border: solid 1px #9b9b9b;
padding: 0;
box-sizing: border-box;
font-size: 1em;
font-family: Lato;
font-weight: bold;
letter-spacing: normal;
color: #1e2a54;
box-shadow: none;
outline: none!important;
transition: .4s;
&:hover{
border: 1px solid #1b68ff;
.select2-selection__arrow b{
background-image: url(/img/chevron-hover.svg)!important;
}
}
&.select2-container--open,
&.select2-container--focus{
border: 2px solid #0a51fb;
.select2-selection__arrow b{
background-image: url(/img/chevron-pressed.svg)!important;
}
}
.select2-selection{
border: none;
outline: none!important;
}
.select2-selection__placeholder {
font-family: Lato;
font-size: 1em;
font-weight: normal;
color: #9b9b9b;
outline: none!important;
}
.select2-selection__rendered {
line-height: 60px!important;
padding-left: 20px;
font-family: Lato;
font-size: 1em;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1.5;
letter-spacing: normal;
color: #1e2a54;
outline: none!important;
}
.select2-selection__arrow{
right: 30px;
left: initial;
top: 6px;
b{
border: none;
background-image: url(/img/chevron-dark-grey.svg);
background-position: 0;
padding: 0;
width: 24px;
height: 24px;
margin: 0;
}
}
}
}
span.select2-dropdown {
background-color: #fff;
border: none;
border-radius: 4px;
background-color: #ffffff;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
padding: 17px;
margin-top: 10px;
.select2-results > ul {
&::-webkit-scrollbar {
width: 5px;
border-radius: 1.5px;
margin-right: 10px;
}
&::-webkit-scrollbar-track {
background: #fff;
}
&::-webkit-scrollbar-thumb {
background: #ebebeb;
border-radius: 4px;
}
&::-webkit-scrollbar-thumb:hover {
background: #ebebeb;
}
li{
font-family: Lato;
font-size: 1em;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.5;
letter-spacing: normal;
color: #9b9b9b;
background-color: #fff!important;
transition: .4s;
&[aria-selected="true"]{
color:#0a51fb!important;
}
&[class*="highlight"]{
color:#9b9b9b!important;
}
&:hover{
color:#1b68ff!important;
}
&[id*="multiple"]{
&:before{
content: "";
position: relative;
float: left;
height: 22px;
width: 22px;
border-radius: 4px;
border: 1px solid;
margin-right: 13px;
top: -2px;
}
&[aria-selected="true"]:before{
content: "";
background-image: url(/img/input-checkbox-icon.png);
background-size: 16px;
background-repeat: no-repeat;
background-position: 3px;
}
}
}
}
}
JS Exibir código
Copiar código
Exibir código
$('.dropdown > select').select2({
minimumResultsForSearch: Infinity,
placeholder: 'Selecione',
width: 'responsive'
});