988
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 1: | Linha 1: | ||
/**/ | /**/ | ||
. | |||
.selectwithSearch__container { | |||
width: 100%; | |||
padding: 0 2rem; | |||
} | |||
.selectwithSearch__selectBtn { | |||
display: flex; | display: flex; | ||
align-items: center; | |||
cursor: pointer; | |||
} | } | ||
. | .selectwithSearch__selectBtn { | ||
height: 4rem; | |||
padding: 0 1.2rem; | |||
font-size: 1.3rem; | |||
background: #fff; | |||
border-radius: 8px; | border-radius: 8px; | ||
justify-content: space-between; | |||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |||
} | |||
.selectwithSearch__selectBtn svg { | |||
font-size: 2rem; | |||
transition: transform .3s linear; | |||
} | } | ||
. | .selectwithSearch__container.active .selectwithSearch__selectBtn svg { | ||
background: # | transform: rotate(-180deg); | ||
} | |||
.selectwithSearch__content { | |||
display: none; | |||
padding: 1.2rem; | |||
margin-top: .45rem; | |||
background: #fff; | |||
border-radius: 8px; | border-radius: 8px; | ||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |||
} | |||
.selectwithSearch__container.active .selectwithSearch__content { | |||
display: block; | |||
} | } | ||
. | .selectwithSearch__content .selectwithSearch__search { | ||
position: relative; | |||
} | |||
.selectwithSearch__search svg { | |||
top: 50%; | |||
left: 1rem; | |||
color: #999; | |||
font-size: 1.2rem; | |||
pointer-events: none; | |||
transform: translateY(-50%); | |||
position: absolute; | position: absolute; | ||
} | } | ||
. | .selectwithSearch__search input { | ||
height: 3.25rem; | |||
width: 100%; | |||
outline: none; | |||
font-size: 1rem; | |||
border-radius: 8px; | |||
padding: 0 1.2rem 0 4rem; | |||
border: 1px solid #B3B3B3; | |||
} | } | ||
. | .selectwithSearch__search input:focus { | ||
padding-left: 4rem; | |||
border: 2px solid #4285f4; | |||
} | } | ||
. | .selectwithSearch__search input::placeholder { | ||
color: #bfbfbf; | |||
} | } | ||
. | .selectwithSearch__content .selectwithSearch__options { | ||
margin-top: .5rem; | |||
padding-right: .5rem; | |||
max-height: 250px; | |||
overflow-y: auto; | |||
} | } | ||
. | .selectwithSearch__options::-webkit-scrollbar { | ||
width: 8px; | |||
} | } | ||
. | .selectwithSearch__options::-webkit-scrollbar-track { | ||
background: # | background: #f1f1f1; | ||
border-radius: 25px; | |||
} | } | ||
. | .selectwithSearch__options::-webkit-scrollbar-thumb { | ||
background: #ccc; | |||
border-radius: 25px; | |||
} | } | ||
. | .selectwithSearch__options::-webkit-scrollbar-thumb:hover { | ||
background: #b3b3b3; | |||
} | } | ||
.selectwithSearch__options li { | |||
height: 3rem; | |||
display: flex; | |||
align-items: center; | |||
padding: 0 .75rem; | |||
font-size: 1.2rem; | |||
cursor: pointer; | |||
} | |||
li.groupTitle { | |||
background-color: rgba(0, 0, 0, .075); | |||
margin-bottom: .25rem; | |||
margin-top: .35rem; | |||
border-bottom: 1px solid #d1d1d1; | |||
border-radius: 12px 12px 0 0 !important; | |||
} | } | ||
. | li.groupTitle:hover { | ||
border-radius: 12px 12px 0 0 !important; | |||
background: rgba(0, 0, 0, .075) !important; | |||
} | } | ||
. | .selectwithSearch__options li:hover, | ||
li.selected { | |||
border-radius: 8px; | |||
background: #f2f2f2; | |||
} | } | ||
/**/ | /**/ |