101 lines
1.6 KiB
SCSS
101 lines
1.6 KiB
SCSS
.custom-select select {
|
|
display: none;
|
|
}
|
|
|
|
.custom-select {
|
|
position: relative;
|
|
}
|
|
|
|
.select-selected {
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
line-height: 1.4;
|
|
|
|
padding: 12px 40px 12px 20px;
|
|
cursor: pointer;
|
|
|
|
background-color: #fff;
|
|
border-radius: 4px;
|
|
border: 1px solid #ced4da;
|
|
|
|
&.select-arrow-active {
|
|
border-bottom: none;
|
|
border: 4px 4px 0 0;
|
|
|
|
&:after {
|
|
transform: translateY(-50%) rotate(225deg);
|
|
}
|
|
}
|
|
|
|
&::after {
|
|
position: absolute;
|
|
content: "";
|
|
top: 50%;
|
|
transform: translateY(-50%) rotate(45deg);
|
|
right: 20px;
|
|
width: 8px;
|
|
height: 8px;
|
|
z-index: 4;
|
|
border-bottom: 1.5px solid #868686;
|
|
border-right: 1.5px solid #868686;
|
|
@include transition;
|
|
}
|
|
}
|
|
|
|
.select-items {
|
|
position: absolute;
|
|
top: calc(100% + 10px);
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 99;
|
|
cursor: pointer;
|
|
animation-name: select;
|
|
animation-duration: 0.3s;
|
|
background: #fff;
|
|
|
|
div {
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
line-height: 1.4;
|
|
|
|
color: black;
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
@include transition;
|
|
background-color: rgba(200,200,200,.5);;
|
|
border: 1px solid #EDEDED;
|
|
border-radius: 4px;
|
|
margin-bottom: 2px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&:hover {
|
|
border: 1px solid #EDEDED;
|
|
}
|
|
}
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 10px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background: #ededed;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background: #aeaeae;
|
|
box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
|
|
}
|
|
}
|
|
|
|
.select-hide {
|
|
display: none;
|
|
}
|
|
|
|
.select-items div:hover,
|
|
.same-as-selected {
|
|
background-color: rgba(250,250,250,.5);
|
|
} |