debian-mirror-gitlab/app/assets/stylesheets/lazy_bundles/select2_overrides.scss

@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: var(--white, $white);
    color: var(--gl-text-color, $gl-text-color);
    border-color: var(--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 {
      padding-top: 12px;
      padding-right: 20px;
      /* stylelint-disable-next-line function-url-quotes */
      background: url(asset_path('chevron-down.png')) no-repeat 2px 8px;

      .gl-dark & {
        filter: invert(0.9);
      }

      b {
        display: none;
      }
    }

    .select2-chosen {
      margin-right: 15px;
    }

    &:hover {
      border-color: var(--gray-200, $gray-200);
      color: var(--gl-text-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: var(--gray-700, $gray-700);
      background-color: var(--white, $white);
      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: var(--red-500, $red-500);
    }
  }
}

.select2-drop,
.select2-drop.select2-drop-above {
  background: var(--white, $white);
  box-shadow: 0 2px 4px $dropdown-shadow-color;
  border-radius: $gl-border-radius-base;
  border: 1px solid var(--border-color, $border-color);
  min-width: 175px;
  color: var(--gl-text-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 var(--border-color, $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: var(--border-color, $border-color);
    outline: 0;
  }
}

.select2-container-multi {
  .select2-choices {
    border-radius: $border-radius-default;
    border-color: var(--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: var(--border-color, $border-color);
      color: var(--gl-text-color, $gl-text-color);
      line-height: 15px;
      background-color: var(--gray-50, $gray-50);
      background-image: none;
      padding: 3px 18px 3px 5px;

      .select2-search-choice-close {
        top: 5px;
        left: initial;
        right: 3px;
      }

      &.select2-search-choice-focus {
        border-color: var(--gl-text-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: var(--gl-text-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 var(--border-color, $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: var(--blue-300, $blue-300);
    }

    &.select2-active {
      background-color: var(--white, $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: var(--gl-text-color, $gl-text-color);

    .select2-result-label {
      background: var(--gray-50, $gray-50);
    }
  }

  .select2-result {
    padding: 0 1px;
  }

  li.select2-result-with-children > .select2-result-label {
    font-weight: $gl-font-weight-bold;
    color: var(--gl-text-color, $gl-text-color);
  }
}

.select2-highlighted {
  .group-result {
    .group-path {
      color: var(--gray-700, $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;
  }
}

.gl-select2-html5-required-fix {
  .select2-container {
    + .select2 {
      @include gl-opacity-0;
      @include gl-border-0;
      @include gl-bg-none;
      @include gl-bg-transparent;
      display: block !important;
      width: 1px;
      height: 1px;
      z-index: -1;
      margin: -3px auto 0;
    }
  }
}