// // Plugin: Select2 // //Signle select .select2-container--default, .select2-selection { &.select2-container--focus, &:focus, &:active { outline: none; } .select2-selection--single { border: 1px solid $gray-x-light; //border-radius: $input-radius; height: 34px; padding: 6px 12px; } } .select2-container--default.select2-container--open { border-color: theme-color('primary'); } .select2-dropdown { border: 1px solid $gray-x-light; //border-radius: $input-radius; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: theme-color('primary'); color: $white; } .select2-results__option { padding: 6px 12px; user-select: none; } .select2-container .select2-selection--single .select2-selection__rendered { height: auto; margin-top: -4px; padding-left: 0; padding-right: 0; } .select2-container[dir='rtl'] .select2-selection--single .select2-selection__rendered { padding-left: 20px; padding-right: 6px; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 28px; right: 3px; } .select2-container--default .select2-selection--single .select2-selection__arrow b { margin-top: 0; } .select2-dropdown, .select2-search--inline { .select2-search__field { border: 1px solid $gray-x-light; &:focus { border: 1px solid theme-color('primary'); outline: none; } } } .select2-container--default .select2-results__option[aria-disabled=true] { color: #999; } .select2-container--default .select2-results__option[aria-selected=true] { background-color: #ddd; &, &:hover { color: $gray-700; } } //Multiple select .select2-container--default { .select2-selection--multiple { border: 1px solid $gray-x-light; &:focus { border-color: theme-color('primary'); } .select2-selection__rendered li:first-child.select2-search.select2-search--inline { width: 100%; .select2-search__field { width: 100% !important; } } } &.select2-container--focus .select2-selection--multiple { border-color: $gray-x-light; } } .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: theme-color('primary'); border-color: darken(theme-color('primary'), 5%); color: $white; padding: 1px 10px; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: rgba(255, 255, 255, 0.7); margin-right: 5px; &:hover { color: $white; } } .select2-container .select2-selection--single .select2-selection__rendered li { padding-right: 10px; }