@c8y/style/styles/_c8y-selectize.less

Styles for Cumulocity IoT applications

.ui-select-offscreen {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 1px !important;
  height: 1px !important;
  outline: 0 !important;
  border: 0 !important;
}

.selectize-border-radius (@radii) {
  border-radius: @radii;
}

.selectize-unselectable () {
  user-select: none;
}

.selectize-box-shadow (@shadow) {
  box-shadow: none;
}

.selectize-box-sizing (@type: border-box) {
  box-sizing: @type;
}

// body used to override default styles
body {
  .selectize-input {
    min-height: 0;

    .form-control();
    &.focus {
      outline: 0;
      border: 0;
      box-shadow: inset 0 0 0 2px @form-control-border-color-focus;
    }
  }

  .selectize-control.single .selectize-input {
    position: relative;
    padding-right: 24px;

    appearance: none;
    &:after {
      .c8y-glyph();
      position: absolute;
      top: 50%;
      right: 5px;
      margin: 0;
      width: auto;
      height: auto;
      border: 0;
      color: @component-brand-primary;
      content: @c8y-glyph-caret;
      font-size: 18px;
      transform: translate(0, -50%);
      pointer-events: none;
    }
  }

  .form-control.selectize-control.single.ng-invalid-required.ng-touched {
    .selectize-input {
      box-shadow: inset 1px 0 0 0 @form-control-border-color-default,
        inset -1px 0 0 0 @form-control-border-color-default,
        inset 0 1px 0 0 @form-control-border-color-default,
        inset 0 -4px 0 @form-control-validation-error;
      &.focus,
      &.selectize-focus {
        box-shadow: inset 2px 0 0 0 @form-control-border-color-focus,
          inset -2px 0 0 0 @form-control-border-color-focus,
          inset 0 2px 0 0 @form-control-border-color-focus,
          inset 0 -4px 0 @form-control-validation-error;
      }
    }
  }
}

body > .ui-select-container {
  z-index: @zindex-dropdown + 49;
}

body .selectize-container {
  .form-control.selectize-control.open {
    position: relative;
    &:before {
      position: absolute;
      top: -15px;
      right: -15px;
      left: -15px;
      z-index: 0;
      height: 15px;
      border: @selectize-border;
      border-bottom: 0;
      background-color: @component-background-default;

      .box-shadow(0 20px 15px fade(@black, 10%));
    }
    .selectize-input {
      position: relative;
      z-index: 10;
    }
  }
  label {
    position: relative;
    z-index: 5;
    + .form-control.selectize-control.open:before {
      top: -30px;
      height: 30px;
    }
  }
}

body .ui-select-match {
  position: absolute;
  top: 5px;
  overflow: hidden;
  padding-right: 40px;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .ui-select-choices {
  opacity: 1 !important;
}

body .ui-select-choices.ng-hide {
  opacity: 0 !important;
}

body input.ui-select-search[placeholder] {
  overflow: hidden;
  width: 100%;
  text-overflow: ellipsis;
}

body .ui-select-choices-row-inner,
body .ui-select-choices-row-inner > * {
  overflow: hidden;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .selectize-dropdown,
body .selectize-input,
body .selectize-input input {
  color: @selectize-color-text;
  font-size: @selectize-font-size;
  font-family: @selectize-font-family;
  line-height: @selectize-line-height;

  -webkit-font-smoothing: @selectize-font-smoothing;
}

body .selectize-control.single .selectize-input.input-active,
body .selectize-input {
  display: inline-block;
  background: var(--c8y-form-control-background-default, @component-background-default);
  color: @component-color-default;
  cursor: text;
}

body .selectize-input {
  position: relative;
  z-index: 1;
  display: flex;
  overflow: hidden;
  border: 0;

  .selectize-control.multi &.has-items {
    padding: @padding-top @padding-x @padding-bottom;

    @padding-x: @selectize-padding-x;
    @padding-top: @selectize-padding-y - @selectize-padding-item-y - @selectize-width-item-border;
    @padding-bottom: @selectize-padding-y - @selectize-padding-item-y - @selectize-margin-item-y -
      @selectize-width-item-border;
  }
  &.full {
    background-color: @selectize-color-input-full;
  }
  &.disabled,
  &.disabled * {
    cursor: default !important;
  }
  &.focus,
  &.selectize-focus {
    position: relative;
    z-index: 13;
    outline: 0;
    background-color: @form-control-background-focus;
    color: @form-control-border-color-focus;

    .box-shadow(inset 0 0 0 2px @form-control-border-color-focus);
    ~ input {
      color: @form-control-border-color-focus;
    }
  }

  > * {
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: baseline;
    zoom: 1;
  }
  .selectize-control.multi & > div {
    margin: 0 @selectize-margin-item-x @selectize-margin-item-y 0;
    padding: @selectize-padding-item-y @selectize-padding-item-x;
    border: @selectize-width-item-border solid @selectize-color-item-border;
    background: @selectize-color-item;
    color: @selectize-color-item-text;
    cursor: pointer;
    &.active {
      border: @selectize-width-item-border solid @selectize-color-item-active-border;
      background: @selectize-color-item-active;
      color: @selectize-color-item-active-text;
    }
  }
  .selectize-control.multi &.disabled > div {
    &,
    &.active {
      border: @selectize-width-item-border solid @selectize-color-item-border;

      .brightness(1.2);
    }
  }
  > input {
    margin: @selectize-caret-margin !important;
    padding: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    border: 0 none !important;
    background: none !important;
    text-indent: 0 !important;
    line-height: inherit !important;

    user-select: auto !important;
    -webkit-user-select: auto !important;
    .selectize-box-shadow(none) !important;
    &:focus {
      outline: none !important;
    }
  }
}

body .selectize-input::after {
  display: block;
  clear: left;
  content: ' ';
}

body .selectize-input.dropdown-active::before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  height: 1px;
  background: @selectize-color-dropdown-border-top;
  content: ' ';
}

body .selectize-dropdown {
  position: absolute;
  z-index: 9;
  margin: -1px 0 0;
  border: @selectize-border;
  background-color: var(--c8y-dropdown-background-default, @component-background-default);

  .selectize-box-sizing(border-box);
  .boxShadowHelper(md);
  [data-selectable] {
    overflow: hidden;
    cursor: pointer;
    .highlight {
      background: @selectize-color-highlight;
    }
  }
  .optgroup-header,
  [data-selectable] {
    padding: @selectize-padding-dropdown-item-y (@selectize-padding-dropdown-item-x);
    box-shadow: inset 0 -1px 0 var(--c8y-dropdown-border-color);
  }
  .optgroup:first-child .optgroup-header {
    border-top: 0 none;
  }
  .optgroup-header {
    background: @selectize-color-optgroup;
    color: @selectize-color-optgroup-text;
    cursor: default;
  }
  .active,
  .active:not(.selected),
  .ui-select-choices-row:hover {
    background-color: @selectize-color-dropdown-item-active;
    color: @selectize-color-dropdown-item-active-text;
    &.create {
      color: @selectize-color-dropdown-item-create-active-text;
    }
  }
  .create {
    color: @selectize-color-dropdown-item-create-text;
  }
}

.selectize-dropdown-content {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 !important;
  max-height: @selectize-max-height-dropdown;
}

.selectize-control.single {
  .selectize-input {
    + .selectize-dropdown {
      top: -7px;
      right: -7px;
      left: -7px;
      z-index: 9;
      padding-top: 42px;
      width: auto;
      border: 1px solid var(--c8y-root-component-border-color);
      border-radius: @component-border-radius-base;
    }
  }
  &.direction-up {
    .selectize-input.focus {
      + .selectize-dropdown {
        z-index: 9;
        margin-top: -2px;
        padding-top: 0;
        padding-bottom: 40px;
      }
    }
  }
}

.selectize-control.single .selectize-input {
  &,
  input {
    cursor: pointer;
  }
  &.input-active,
  &.input-active input {
    cursor: text;
  }

  &.dropdown-active:after {
    margin-top: @selectize-arrow-size * -0.8;
    border-width: 0 @selectize-arrow-size @selectize-arrow-size @selectize-arrow-size;
    border-color: transparent;
    border-bottom-color: @selectize-arrow-color;
  }
}

.selectize-control.rtl {
  &.single .selectize-input:after {
    right: auto;
    left: @selectize-arrow-offset;
  }
  .selectize-input > input {
    margin: @selectize-caret-margin-rtl !important;
  }
}

.selectize-control .selectize-input.disabled {
  background-color: @selectize-color-disabled;
  opacity: @selectize-opacity-disabled;
}

.form-control.selectize-control {
  position: relative;
  padding: 0;
  height: auto;
  border: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  background: 0 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}