diff options
Diffstat (limited to 'app/assets/stylesheets/lazy_bundles/select2_overrides.scss')
| -rw-r--r-- | app/assets/stylesheets/lazy_bundles/select2_overrides.scss | 359 |
1 files changed, 359 insertions, 0 deletions
diff --git a/app/assets/stylesheets/lazy_bundles/select2_overrides.scss b/app/assets/stylesheets/lazy_bundles/select2_overrides.scss new file mode 100644 index 00000000000..6c51c4b0ec3 --- /dev/null +++ b/app/assets/stylesheets/lazy_bundles/select2_overrides.scss @@ -0,0 +1,359 @@ +@import 'page_bundles/mixins_and_variables_and_functions'; +/** 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; + color: $gl-text-color; + border-color: $border-color; + height: 34px; + padding: $gl-vert-padding $gl-input-padding; + font-size: $gl-font-size; + line-height: 1.42857143; + border-radius: $gl-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; + } + } + + // Essentially we’re doing @include form-control-focus here (from + // bootstrap/scss/mixins/_forms.scss), except that the bootstrap mixin adds a + // `&:focus` selector and we’re never actually focusing the .select2-choice + // link nor the .select2-container, the Select2 library focuses an off-screen + // .select2-focusser element instead. + &.select2-container-active:not(.select2-dropdown-open) { + .select2-choice { + color: $input-focus-color; + background-color: $input-focus-bg; + border-color: $input-focus-border-color; + outline: 0; + } + + // Reusable focus “glow” box-shadow + @mixin form-control-focus-glow { + @if $enable-shadows { + box-shadow: $input-box-shadow, $input-focus-box-shadow; + } @else { + box-shadow: $input-focus-box-shadow; + } + } + + // Apply the focus “glow” shadow to the .select2-container if it also has + // the .block-truncated class as that applies an overflow: hidden, thereby + // hiding the glow of the nested .select2-choice element. + &.block-truncated { + @include form-control-focus-glow; + } + + // Apply the glow directly to the .select2-choice link if we’re not + // block-truncating the container. + &:not(.block-truncated) .select2-choice { + @include form-control-focus-glow; + } + } + + &.is-invalid { + ~ .invalid-feedback { + display: block; + } + + .select2-choices, + .select2-choice { + border-color: $red-500; + } + } +} + +.select2-drop, +.select2-drop.select2-drop-above { + background: $white; + box-shadow: 0 2px 4px $dropdown-shadow-color; + border-radius: $gl-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: $border-color; + background: none; + + .select2-search-field input { + padding: 5px $gl-input-padding; + height: auto; + font-family: inherit; + font-size: inherit; + } + + .select2-search-choice { + margin: 5px 0 0 8px; + box-shadow: none; + border-color: $border-color; + 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: transparent image-url('select2.png'); + color: $gl-text-color; + background-clip: content-box; + background-origin: content-box; + background-repeat: no-repeat; + background-position: right 0 bottom 0 !important; + border: 1px solid $border-color; + 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; + 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; + } +} + +.select2-highlighted { + .group-result { + .group-path { + color: $gray-700; + } + } +} + +.select2-result-selectable, +.select2-result-unselectable { + .select2-match { + font-weight: $gl-font-weight-bold; + text-decoration: none; + } +} + +.input-group { + .select2-container { + display: table-cell; + max-width: 180px; + } +} + +.file-editor { + .select2 { + float: right; + } +} + +.import-namespace-select { + > .select2-choice { + border-radius: $border-radius-default 0 0 $border-radius-default; + position: relative; + left: 1px; + } +} + +.issue-form { + .select2-container { + width: 250px !important; + } +} + +.new_project, +.edit-project, +.import-project { + .input-group { + .select2-container { + display: unset; + max-width: unset; + flex-grow: 1; + } + } + + .input-group-prepend, + .input-group-append { + + .select2 a { + border-radius: 0 $gl-border-radius-base $gl-border-radius-base 0; + } + } +} + +.project-path { + .select2-choice { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +} + +.transfer-project .select2-container { + min-width: 200px; +} + +.right-sidebar { + .block { + .select2-container span { + margin-top: 0; + } + } +} + +.block-truncated { + > div:not(.block):not(.select2-display-none) { + display: inline; + } +} |