@c8y/style/styles/_c8y-child-assets-selector.less

Styles for Cumulocity IoT applications

c8y-item-selector {
  display: block;
  @media (min-width: @screen-xs-max) {
    .c8y-list__item & {
      &.form-group-sm {
        margin-top: -4px;
        margin-bottom: -4px;
      }
    }
  }
}

.c8y-child-assets-selector {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0;
  > .btn {
    position: relative;
    display: block;
    padding-right: 24px !important;
    background-image: none;
    text-align: left;

    .form-control();
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    .form-control-focus();
    &[aria-expanded='true'] {
      border-color: @component-color-focus;
    }

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

      .c8y-glyph();
    }
  }

  &.dropdown.open {
    z-index: @zindex-dropdown;
  }
  .form-group-sm & {
    > .btn {
      padding: @form-control-padding-small-vertical 24px @form-control-padding-small-vertical
        @form-control-padding-small-horizontal;
      height: @form-control-height-sm;
      font-size: @font-size-small;
    }
  }
}

.dropdown-menu.multiselect-container {
  .dropdown.open & {
    overflow: auto !important;
    max-height: 278px;
    min-width: 240px;
    height: unset !important;
    .c8y-scrollbar();
  }

  .divider {
    margin: 0;
  }
  .input-group {
    width: 100%;
  }
  label {
    display: flex;
    color: @component-color-default!important;
  }
  .multiselect-item {
    display: flex;
    padding: 8px 12px;
    border-bottom: 1px solid @component-border-color;
    background-color: var(--c8y-dropdown-background-default, @component-background-default);
    label.c8y-checkbox.input-sm {
      flex-grow: 1;
      margin-right: 30px;
      height: auto;
      font-size: 12px;
      line-height: 20px;
      padding: 0;
      align-items: center;
    }
    .radio,
    .checkbox {
      overflow: hidden;
      margin: 0;
      padding-left: 20px;
      color: @component-color-default;
      text-transform: none;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: normal;
      .label-text {
        display: inline-block;
        vertical-align: text-top;
      }
    }
  }
  .multiselect-item-container {
    + .divider {
      display: none;
    }
  }
}

c8y-typeahead {
  .input-group {
    z-index: @zindex-modal + 2;
  }
  .c8y-child-assets-selector.dropdown {
    .dropdown-menu {
      top: -4px;
      right: -4px;
      left: -4px;
      padding-top: 40px;
      width: unset;
    }
    &.dropup {
      .dropdown-menu {
        top: auto;
        bottom: -4px;
        padding-top: 0;
        padding-bottom: 40px;
      }
    }
    &.open .input-group.input-group-dropdown:before {
      position: absolute;
      top: -4px;
      right: -4px;
      bottom: -4px;
      left: -4px;
      display: block;
      background-color: @component-background-default;
      content: '';
    }
  }
}