/** Select2 selectbox style override **/ .select2-container { width: 100% !important; &.input-md, &.input-lg { display: block; } } .select2-container, .select2-container.select2-drop-above { .select2-choice { background: $white-light; border-color: $input-border; height: 34px; padding: $gl-vert-padding $gl-input-padding; font-size: $gl-font-size; line-height: 1.42857143; border-radius: $border-radius-base; .select2-arrow { background-image: none; background-color: transparent; border: 0; padding-top: 12px; padding-right: 20px; font-size: 10px; b { display: none; } &::after { content: "\f078"; position: absolute; z-index: 1; text-align: center; pointer-events: none; box-sizing: border-box; color: $gray-darkest; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } .select2-chosen { margin-right: 15px; } &:hover { border-color: $gray-darkest; color: $gl-text-color; } } &.is-invalid { ~ .invalid-feedback { display: block; } .select2-choices { border-color: $red-500; } } } .select2-drop, .select2-drop.select2-drop-above { box-shadow: 0 2px 4px $dropdown-shadow-color; border-radius: $border-radius-base; border: 1px solid $border-color; min-width: 175px; color: $gl-text-color; z-index: 999; .modal-open & { z-index: $zindex-modal + 200; } } .select2-drop-mask { z-index: 998; .modal-open & { z-index: $zindex-modal + 100; } } .select2-drop.select2-drop-above.select2-drop-active { border-top: 1px solid $border-color; margin-top: -6px; } .select2-container-active { .select2-choice, .select2-choices { box-shadow: none; } } .select2-dropdown-open, .select2-dropdown-open.select2-drop-above { .select2-choice { border-color: $gray-darkest; outline: 0; } } .select2-container-multi { .select2-choices { border-radius: $border-radius-default; border-color: $input-border; background: none; .select2-search-field input { padding: 5px $gl-padding / 2; height: auto; font-family: inherit; font-size: inherit; } .select2-search-choice { margin: 5px 0 0 8px; box-shadow: none; border-color: $input-border; color: $gl-text-color; line-height: 15px; background-color: $gray-light; background-image: none; padding: 3px 18px 3px 5px; .select2-search-choice-close { top: 5px; left: initial; right: 3px; } &.select2-search-choice-focus { border-color: $gl-text-color; } } } } .select2-drop-active { margin-top: $dropdown-vertical-offset; font-size: 14px; .select2-results { max-height: 350px; } } .select2-search { padding: $grid-size; .select2-drop-auto-width & { padding: $grid-size; } input { padding: $grid-size; background: $white-light image-url('select2.png'); background-clip: content-box; background-origin: content-box; background-repeat: no-repeat; background-position: right 0 bottom 0 !important; border: 1px solid $input-border; border-radius: $border-radius-default; line-height: 16px; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; &:focus { border-color: $blue-300; } &.select2-active { background-color: $white-light; background-image: image-url('select2-spinner.gif') !important; background-origin: content-box; background-repeat: no-repeat; background-position: right 6px center !important; background-size: 16px 16px !important; } } + .select2-results { padding-top: 0; } } .select2-results { margin: 0; padding: #{$gl-padding / 2} 0; .select2-no-results, .select2-searching, .select2-ajax-error, .select2-selection-limit { background: transparent; padding: #{$gl-padding / 2} $gl-padding; } .select2-result-label, .select2-more-results { padding: #{$gl-padding / 2} $gl-padding; } .select2-highlighted { background: transparent; color: $gl-text-color; .select2-result-label { background: $gray-darker; } } .select2-result { padding: 0 1px; } li.select2-result-with-children > .select2-result-label { font-weight: $gl-font-weight-bold; color: $gl-text-color; } } .ajax-users-select { width: 400px; &.input-large { width: 210px; } &.input-clamp { max-width: 100%; } } .select2-highlighted { .group-result { .group-path { color: $white-light; } } } .group-result { .group-image { float: left; } .group-name { font-weight: $gl-font-weight-bold; } .group-path { color: $gl-gray-400; } } .user-result { min-height: 24px; display: flex; align-items: center; .user-image { float: left; } &.no-username { .user-name { line-height: 24px; } } } .namespace-result { .namespace-kind { color: $gl-gray-350; font-weight: $gl-font-weight-normal; } .namespace-path { margin-left: 10px; font-weight: $gl-font-weight-bold; } } .ajax-users-dropdown { min-width: 250px !important; } .select2-result-selectable, .select2-result-unselectable { .select2-match { font-weight: $gl-font-weight-bold; text-decoration: none; } }