Edit
// /* scss/inputs/_select-input.scss */
.select2-hidden-accessible {
display: none;
}
.select2-container {
display: block;
z-index: 9999;
.selection {
display: block;
.select2-selection--single {
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
height: 44px;
border: 1px solid $gray-300;
background-color: $white;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
border-radius: 8px;
padding: 10px 14px;
@extend .text-md;
color: $gray-900;
transition: .3s;
i {
color: $gray-500;
font-size: 20px;
@include dir-margin-right(8px);
}
.undefined {
display: none;
}
.select2-selection__placeholder {
color: $gray-500;
span {
display: flex;
align-items: center;
}
}
.select2-selection__rendered {
span {
display: flex;
align-items: center;
}
}
.select2-selection__arrow {
&::before {
content: "\e980";
font-family: 'icomoonapp';
color: $gray-500;
font-size: 20px;
transition: .3s;
display: inline-block;
}
}
&[aria-expanded="true"] {
.select2-selection__arrow::before {
transform: rotate(180deg);
}
}
}
.select2-selection--multiple {
padding: 0 14px;
display: block;
cursor: text;
min-height: 44px;
outline: 1px solid $gray-300;
border: none !important;
// border: 1px solid $gray-300;
background-color: $white;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
border-radius: 8px;
@extend .text-md;
color: $gray-900;
transition: .3s;
.select2-selection__rendered {
min-height: 44px;
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 5px 0;
.select2-search--inline {
input {
max-width: 100%;
outline: none;
border: 0;
background-color: transparent;
}
}
.select2-selection__choice {
padding: 2px 10px;
@extend .text-sm;
@extend .weight-m;
background-color: $gray-100;
border-radius: 16px;
color: $gray-700;
display: inline-flex;
align-items: center;
margin: 0;
@include dir-margin-right(.5rem);
margin-top: 2px;
margin-bottom: 2px;
transition: .3s;
cursor: context-menu;
flex-direction: row-reverse;
height: 24px;
line-height: initial;
white-space: nowrap;
&:hover {
background-color: $gray-200;
}
span {
font-size: 0;
margin: 0;
line-height: initial;
&::before {
content: "\e94c";
display: block;
font-size: 12px;
color: $gray-700;
@include dir-margin-left(4px);
font-family: 'icomoonapp';
cursor: pointer;
@extend .weight-r;
}
}
}
}
}
}
&.select2-container--disabled .selection {
.select2-selection {
background-color: $gray-50;
border-color: #d0d5dd;
box-shadow: none;
.select2-selection__rendered {
color: $gray-500;
}
}
}
.select2-dropdown {
display: block;
background-color: $white;
margin-top: 8px;
border: 1px solid $gray-200;
box-sizing: border-box;
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.1), 0px 4px 6px -2px rgba(16, 24, 40, 0.05);
border-radius: 8px;
.select2-search {
display: block;
padding: 15px;
input {
color: $gray-700;
border: solid 1px $gray-300;
border-radius: 8px;
height: 44px;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
padding: 0 14px;
margin: 0;
outline: none;
display: block;
width: 100%;
@extend .text-md;
@extend .weight-r;
&::placeholder {
color: $gray-500;
}
&:focus {
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #DEEFFC;
border-color: $primary-300;
}
}
}
.select2-results__options {
max-height: 250px;
overflow: auto;
}
.select2-results__option {
position: relative;
padding: 10px 14px;
color: $gray-900;
@extend .text-md;
cursor: pointer;
transition: .3s;
&:hover {
background-color: $primary-25;
&::before {
color: $primary-600;
}
}
&::after {
content: "\e97d";
font-family: 'icomoonapp';
color: transparent;
font-size: 20px;
position: absolute;
top: 50%;
@include dir-right(14px);
transform: translateY(-50%);
font-size: 20px;
transition: .3s;
}
&[aria-selected="true"] {
background-color: $primary-25;
&::after {
color: $primary-600;
}
}
}
}
&.select2-container--focus,
&.select2-container--open {
.select2-selection--single {
border-color: $primary-300;
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #DEEFFC;
}
}
}