993
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 2: | Linha 2: | ||
.select-box { | .select-box { | ||
position: relative; | position: relative; | ||
display: flex; | |||
width: 400px; | |||
flex-direction: column; | |||
} | } | ||
. | .select-box .options-container { | ||
background: #2f3640; | |||
color: #f5f6fa; | |||
max-height: 0; | |||
width: 100%; | width: 100%; | ||
opacity: 0; | |||
transition: all 0.4s; | |||
border-radius: 8px; | |||
border-radius: | overflow: hidden; | ||
order: 1; | |||
} | |||
.selected { | |||
background: #2f3640; | |||
border-radius: 8px; | |||
margin-bottom: 8px; | |||
color: #f5f6fa; | |||
position: relative; | |||
order: 0; | |||
} | } | ||
. | .selected::after { | ||
content: ""; | |||
background: url("img/arrow-down.svg"); | |||
background-size: contain; | |||
background-repeat: no-repeat; | |||
position: absolute; | position: absolute; | ||
height: 100%; | |||
width: 32px; | |||
right: 10px; | |||
top: 5px; | |||
transition: all 0.4s; | |||
} | |||
.select-box .options-container.active { | |||
max-height: 240px; | |||
opacity: 1; | |||
overflow-y: scroll; | |||
margin-top: 54px; | |||
} | |||
.select-box .options-container.active + .selected::after { | |||
transform: rotateX(180deg); | |||
top: -6px; | |||
} | |||
.select-box .options-container::-webkit-scrollbar { | |||
width: 8px; | |||
background: #0d141f; | |||
border-radius: 0 8px 8px 0; | |||
} | |||
.select-box .options-container::-webkit-scrollbar-thumb { | |||
background: #525861; | |||
border-radius: 0 8px 8px 0; | |||
} | |||
.select-box .option, | |||
.selected { | |||
padding: 12px 24px; | |||
cursor: pointer; | |||
} | |||
.select-box .option:hover { | |||
background: #414b57; | |||
} | |||
.select-box label { | |||
cursor: pointer; | |||
} | |||
.select-box .option .radio { | |||
display: none; | |||
} | |||
/* Searchbox */ | |||
.search-box input { | |||
width: 100%; | width: 100%; | ||
padding: 12px 16px; | |||
font-family: "Roboto", sans-serif; | |||
font-size: 16px; | |||
position: absolute; | |||
border-radius: 8px 8px 0 0; | |||
z-index: 100; | |||
border: 8px solid #2f3640; | |||
opacity: 0; | opacity: 0; | ||
pointer-events: none; | pointer-events: none; | ||
transition: | transition: all 0.4s; | ||
} | } | ||
. | .search-box input:focus { | ||
outline: none; | |||
} | } | ||
.options- | .select-box .options-container.active ~ .search-box input { | ||
opacity: 1; | opacity: 1; | ||
pointer-events: auto; | pointer-events: auto; | ||
} | } | ||
/**/ | /**/ |