120 lines
2.3 KiB
SCSS
120 lines
2.3 KiB
SCSS
.custom-select {
|
|
position: relative;
|
|
z-index: 9;
|
|
color: var(--primary);
|
|
max-height: 3vw;
|
|
input {
|
|
font-weight: normal;
|
|
color: var(--primary) !important;
|
|
&::placeholder {
|
|
color: var(--primary) !important;
|
|
}
|
|
}
|
|
.custom_select_icon {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.custom_select_icon.open {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.options-list {
|
|
max-height: 120px;
|
|
overflow: auto;
|
|
scroll-behavior: smooth;
|
|
scroll-padding: 10rem;
|
|
direction: ltr;
|
|
color: var(--primary);
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 5px;
|
|
}
|
|
|
|
/* Handle */
|
|
&::-webkit-scrollbar-thumb {
|
|
background-color: #999999;
|
|
border-radius: 5px; /* Adjust border-radius as needed */
|
|
}
|
|
|
|
/* Track */
|
|
&::-webkit-scrollbar-track {
|
|
border-radius: 5px; /* Adjust border-radius as needed */
|
|
background-color: transparent; /* Set to desired background color */
|
|
}
|
|
}
|
|
.options {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
width: 100%;
|
|
background: var(--bg2);
|
|
border: 0.2vw solid var(--primary);
|
|
border-top: none;
|
|
padding: 0.1vw 0.3vw;
|
|
direction: rtl;
|
|
|
|
border-bottom-right-radius: 15px !important;
|
|
border-bottom-left-radius: 15px !important;
|
|
|
|
z-index: 9;
|
|
}
|
|
|
|
.option {
|
|
padding: 0.6vw 1vw;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
}
|
|
|
|
.option:hover {
|
|
background-color: #f0f0f0;
|
|
}
|
|
}
|
|
|
|
.select-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.4vw;
|
|
padding: 0.3vw 1vw;
|
|
cursor: pointer;
|
|
background: transparent;
|
|
color: var(--primary);
|
|
border: 0.2vw solid var(--primary);
|
|
font-weight: bold;
|
|
border-radius: 70px;
|
|
text-align: center;
|
|
width: 9vw;
|
|
height: 2.5vw;
|
|
transition: 0.5s ease-in-out;
|
|
|
|
svg {
|
|
font-size: 1.6vw;
|
|
color: var(--primary);
|
|
}
|
|
.search-input {
|
|
font-size: 0.8vw;
|
|
width: 70%;
|
|
height: 100%;
|
|
background-color: transparent !important;
|
|
outline: none;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.custom-select.open .select-header {
|
|
border-bottom-right-radius: 0 !important;
|
|
border-bottom-left-radius: 0 !important;
|
|
border-top-right-radius: 30px !important;
|
|
border-top-left-radius: 30px !important;
|
|
|
|
transition: 0.5s ease-in-out;
|
|
// background-color: red !important;
|
|
}
|
|
|
|
.CustomDatePicker {
|
|
.ant-picker-outlined {
|
|
max-height: 2.5vw !important;
|
|
min-height: 2vw !important;
|
|
}
|
|
}
|