.select2-container { &.form-control { background: transparent; border: none; display: block; margin: 0; padding: 0; } .select2-choices .select2-search-field input, .select2-choice, .select2-choices { background: none; border-radius: 4px; color: #555; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #FFF; filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); border-color: #ccc; padding: 0; } } .select2-search input { border-radius: 4px; color: #555; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #FFF; filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); border-color: #ccc; } .select2-container { .select2-choices .select2-search-field input { -webkit-box-shadow: none; box-shadow: none; } .select2-choice { height: 34px; line-height: 1.42857; } &.select2-container-multi.form-control { height: auto; } &.input-sm .select2-choice { height: 30px; line-height: 1.5; border-radius: 3px; } } .input-group-sm .select2-container .select2-choice { height: 30px; line-height: 1.5; border-radius: 3px; } .select2-container.input-lg .select2-choice, .input-group-lg .select2-container .select2-choice { height: 45px; line-height: 1.33; border-radius: 6px; } .select2-container-multi { .select2-choices .select2-search-field input { height: 32px; margin: 0; } &.input-sm .select2-choices .select2-search-field input { height: 28px; } } .input-group-sm .select2-container-multi .select2-choices .select2-search-field input { height: 28px; } .select2-container-multi.input-lg .select2-choices .select2-search-field input, .input-group-lg .select2-container-multi .select2-choices .select2-search-field input { height: 43px; } .select2-chosen, .select2-choice > span:first-child, .select2-container .select2-choices .select2-search-field input { padding: 6px 12px; } .input-sm .select2-chosen, .input-group-sm .select2-chosen, .input-sm .select2-choice > span:first-child, .input-group-sm .select2-choice > span:first-child, .input-sm .select2-choices .select2-search-field input, .input-group-sm .select2-choices .select2-search-field input { padding: 5px 10px; } .input-lg .select2-chosen, .input-group-lg .select2-chosen, .input-lg .select2-choice > span:first-child, .input-group-lg .select2-choice > span:first-child, .input-lg .select2-choices .select2-search-field input, .input-group-lg .select2-choices .select2-search-field input { padding: 10px 16px; } .select2-container-multi { .select2-choices .select2-search-choice { margin-top: 5px; margin-bottom: 3px; color: #fff; background: $color-primary; filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); -webkit-box-shadow: none; box-shadow: none; border: 0 none; font-size: 75%; font-weight: bold; } &.input-sm .select2-choices .select2-search-choice { margin-top: 3px; margin-bottom: 2px; } } .input-group-sm .select2-container-multi .select2-choices .select2-search-choice { margin-top: 3px; margin-bottom: 2px; } .select2-container-multi.input-lg .select2-choices .select2-search-choice, .input-group-lg .select2-container-multi .select2-choices .select2-search-choice { line-height: 24px; } .select2-container .select2-choice { .select2-arrow, div { border-left: 1px solid #ccc; background: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } } .select2-dropdown-open .select2-choice { .select2-arrow, div { border-left-color: transparent; background: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } } .select2-container .select2-choice { .select2-arrow b, div b { background-position: 0 3px; } } .select2-dropdown-open .select2-choice { .select2-arrow b, div b { background-position: -18px 3px; } } .select2-container.input-sm .select2-choice .select2-arrow b, .input-group-sm .select2-container .select2-choice .select2-arrow b, .select2-container.input-sm .select2-choice div b, .input-group-sm .select2-container .select2-choice div b { background-position: 0 1px; } .select2-dropdown-open.input-sm .select2-choice .select2-arrow b, .input-group-sm .select2-dropdown-open .select2-choice .select2-arrow b, .select2-dropdown-open.input-sm .select2-choice div b, .input-group-sm .select2-dropdown-open .select2-choice div b { background-position: -18px 1px; } .select2-container.input-lg .select2-choice .select2-arrow b, .input-group-lg .select2-container .select2-choice .select2-arrow b, .select2-container.input-lg .select2-choice div b, .input-group-lg .select2-container .select2-choice div b { background-position: 0 9px; } .select2-dropdown-open.input-lg .select2-choice .select2-arrow b, .input-group-lg .select2-dropdown-open .select2-choice .select2-arrow b, .select2-dropdown-open.input-lg .select2-choice div b, .input-group-lg .select2-dropdown-open .select2-choice div b { background-position: -18px 9px; } .has-warning { .select2-choice, .select2-choices { border-color: #c09853; } .select2-container-active .select2-choice, .select2-container-multi.select2-container-active .select2-choices { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; border-color: #a47e3c; } &.select2-drop-active { border-color: #a47e3c; &.select2-drop.select2-drop-above { border-top-color: #a47e3c; } } } .has-error { .select2-choice, .select2-choices { border-color: #b94a48; } .select2-container-active .select2-choice, .select2-container-multi.select2-container-active .select2-choices { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; border-color: #953b39; } &.select2-drop-active { border-color: #953b39; &.select2-drop.select2-drop-above { border-top-color: #953b39; } } } .has-success { .select2-choice, .select2-choices { border-color: #468847; } .select2-container-active .select2-choice, .select2-container-multi.select2-container-active .select2-choices { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; border-color: #356635; } &.select2-drop-active { border-color: #356635; &.select2-drop.select2-drop-above { border-top-color: #356635; } } } .select2-container-active .select2-choice, .select2-container-multi.select2-container-active .select2-choices { outline: none; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); -webkit-transition: border-color ease-in-out .15s box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s box-shadow ease-in-out .15s; border-color: #66afe9; } .select2-drop-active { border-color: #66afe9; } .select2-drop-auto-width, .select2-drop.select2-drop-above.select2-drop-active { border-top-color: #66afe9; } .input-group { &.select2-bootstrap-prepend [class^=select2-choice] { border-bottom-left-radius: 0 !important; border-top-left-radius: 0 !important; } &.select2-bootstrap-append [class^=select2-choice] { border-bottom-right-radius: 0 !important; border-top-right-radius: 0 !important; } } .select2-dropdown-open { [class^=select2-choice] { border-bottom-right-radius: 0 !important; border-bottom-left-radius: 0 !important; } &.select2-drop-above [class^=select2-choice] { border-top-right-radius: 0 !important; border-top-left-radius: 0 !important; } } .select2-dropdown-open.select2-drop-above .select2-choice, .select2-dropdown-open.select2-drop-above .select2-choices { background: none; -webkit-box-shadow: none; box-shadow: none; } .select2-results .select2-highlighted { color: #FFF; background-color: #428bca; } .select2-bootstrap-append, .select2-bootstrap-prepend { .select2-container-multiple { vertical-align: top; } .input-group-btn { vertical-align: top; .btn { vertical-align: top; } } } .select2-container-multi .select2-choices .select2-search-choice-focus { background: #ebebeb; color: #333; -webkit-box-shadow: none; box-shadow: none; border-color: #adadad; } .select2-search-choice-close { background: none; margin-top: -8px; top: 50%; &:after { content: 'x'; font-size: 10px; color: #fff; padding: 0 4px; font-weight: bold; } } .select2-container .select2-choice abbr { top: 50%; } .select2-results { .select2-no-results, .select2-searching, .select2-selection-limit { background-color: #fcf8e3; color: #c09853; } } .select2-container.select2-container-disabled { .select2-choice, .select2-choices { cursor: not-allowed; background-color: #eee; border-color: #ccc; } .select2-choice { .select2-arrow, div { background-color: transparent; border-left: 1px solid transparent; } } .select2-choices { .select2-arrow, div { background-color: transparent; border-left: 1px solid transparent; } } } .select2-search input.select2-active, .select2-container-multi .select2-choices .select2-search-field input.select2-active, .select2-more-results.select2-active { background-position: right 4px center; } // DARK SKIN // ----------------------------------------------------------------------------- html.dark { .select2-container { .select2-choices .select2-search-field input, .select2-choice, .select2-choices { color: #EEE; background-color: $dark-color-3; border-color: $dark-color-3; } } .select2-search { position: relative; input { color: #EEE; background: $dark-color-4; border-color: $dark-color-5; &.select2-active { background: $dark-color-4; } } &:before { font-family: 'FontAwesome'; content: "\f002"; position: absolute; right: 15px; top: 50%; color: #EEE; font-size: 12px; margin: -11px 0 0; } } .select2-drop { background-color: $dark-color-3; border-color: $dark-color-2; } .select2-container-multi { .select2-choices .select2-search-choice { color: #EEE; } } .select2-container .select2-choice .select2-arrow, .select2-container .select2-choice div { border-color: $dark-color-3; } .select2-results .select2-result-label { color: #EEE; } }