iTop/css/backoffice/vendors/_selectize.scss

/*
 * @copyright   Copyright (C) 2010-2024 Combodo SAS
 * @license     http://opensource.org/licenses/AGPL-3.0
 */

$ibo-vendors-selectize-input--color: $ibo-color-grey-900 !default;
$ibo-vendors-selectize-input--background-color: $ibo-color-white-100 !default;
$ibo-vendors-selectize-control--plugin-add-button--add-option--right: $ibo-spacing-0 !default;
$ibo-vendors-selectize-control--plugin-add-button--add-option--padding-bottom: 10px !default;
$ibo-vendors-selectize-control--plugin-add-button--add-option--height: 100% !default;
$ibo-vendors-selectize-control--plugin-add-button--add-option--width: $ibo-size-300 !default;
$ibo-vendors-selectize-control--plugin-add-button--add-option--color: $ibo-color-grey-900 !default;

$ibo-vendors-selectize--item--icon--margin-right: $ibo-spacing-200 !default;

$ibo-vendors-selectize--item--add--background-color: $ibo-color-green-100 !default;
$ibo-vendors-selectize--item--add--icon--color: $ibo-color-green-900 !default;

$ibo-vendors-selectize--item--remove--background-color: $ibo-color-red-100 !default;
$ibo-vendors-selectize--item--remove--icon--color: $ibo-color-red-800 !default;

$ibo-vendors-selectize--item--ignore-partial--background-color: $ibo-color-grey-200 !default;

$ibo-vendors-selectize--input-error--border: 1px solid $ibo-color-red-600 !default;

$ibo-vendors-selectize--input--border-color: $ibo-color-grey-500 !default;

$ibo-vendors-selectize--element--active--background: $ibo-color-blue-100 !default;
$ibo-vendors-selectize--element--active--color: $ibo-color-grey-900 !default;

$ibo-vendors-selectize--dropdown--background-color: $ibo-vendors-selectize-input--background-color !default;
$ibo-vendors-selectize--dropdown--color:  $ibo-vendors-selectize-input--color!default;

$ibo-vendors-selectize--header--padding-x: 8px !default;
$ibo-vendors-selectize--header--padding-y: 5px !default;

.selectize-dropdown, .selectize-input, .selectize-input input {
  color: $ibo-vendors-selectize-input--color;
}

.selectize-control.single .selectize-input {
  box-shadow: unset;
  background-color: $ibo-vendors-selectize-input--background-color;
  background-image: unset;
  background-repeat: unset;
}

.selectize-input,
.selectize-control.single .selectize-input.input-active {
  background: unset;
  background-color: $ibo-vendors-selectize-input--background-color;
  cursor: text;
  display: inline-flex;
}

.selectize-control.single .selectize-input.dropdown-active:after {
  margin-top: unset;
  border-width: unset;
  border-color: unset;
}
.selectize-control.single .selectize-input:after,
.selectize-control.single .selectize-input:not(.no-arrow):after {
  content: unset;
}
.selectize-input::after {
  content: unset;
}

.selectize-input>* {
  display: inline-flex;
}


.selectize-control.single .selectize-input, .selectize-dropdown.single {
  border-color: $ibo-vendors-selectize--input--border-color;
}

.selectize-dropdown {
  background-color: $ibo-vendors-selectize--dropdown--background-color;
  color: $ibo-vendors-selectize--dropdown--color;
  .selected,
  .active,
  .active:not(.selected){
    background: $ibo-vendors-selectize--element--active--background;
    color: $ibo-vendors-selectize--element--active--color;
  }

  [data-selectable],
  .optgroup-header {
    padding: $ibo-vendors-selectize--header--padding-y $ibo-vendors-selectize--header--padding-x;
  }

  .option {
    opacity: 1;
  }
}

.selectize-add-option {
  display: inline-flex;
  justify-content: center;
  align-items: flex-end;

  position: absolute;
  right: $ibo-vendors-selectize-control--plugin-add-button--add-option--right;
  padding-bottom: $ibo-vendors-selectize-control--plugin-add-button--add-option--padding-bottom;

  height: $ibo-vendors-selectize-control--plugin-add-button--add-option--height;
  width: $ibo-vendors-selectize-control--plugin-add-button--add-option--width;
  z-index: 1;

  color: $ibo-vendors-selectize-control--plugin-add-button--add-option--color;
  @extend %ibo-font-size-100;
}

// Bulk modification: add / remove / partial items states
.selectize-input {
  .attribute-set-item {
    > * {
      display: inline;
    }
    &.item-add::before,&.item-remove::before {
      @extend %fa-solid-base;
      margin-right: $ibo-vendors-selectize--item--icon--margin-right;
    }
    &.item-add {
      background-color: $ibo-vendors-selectize--item--add--background-color !important;
      &::before {
        color: $ibo-vendors-selectize--item--add--icon--color;
        content: '\f067';
      }
    }
    &.item-remove {
      background-color: $ibo-vendors-selectize--item--remove--background-color !important;
      &::before {
        color: $ibo-vendors-selectize--item--remove--icon--color;
        content: '\f1f8';
      }
    }
    &.item-ignore-partial {
      background-color: $ibo-vendors-selectize--item--ignore-partial--background-color !important;
    }
  }
  &.selectize-input-error {
    border: $ibo-vendors-selectize--input-error--border;
  }
}