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

Styles for Cumulocity IoT applications

@import "../../../icons/_c8y-glyphs.less";
@import "../../../mixins/_c8y-scrollbar.less";
@import "../../../mixins/_forms.less";
@import "../../../mixins/_icon-base.less";

/**
 * C8Y Child Assets Selector - Multi-select dropdown for child assets
 *
 * Note: Uses @size-* tokens; @form-control-* variables for styling.
 *
 * Intentionally hardcoded values:
 * - Off-token spacing (5px, 12px, 30px): Padding and margins not in token system
 * - Component-specific dimensions (240px, 278px): Dropdown dimensions
 * - Typography sizes (12px, 18px): Font sizes
 * - Percentages (50%, 100%): Layout and positioning
 * - Transition duration (0.15s): Animation timing
 * - Opacity values: Visual states
 */

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

.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 base styles (from .form-control in forms.less)
    padding: @form-control-padding-base-vertical @form-control-padding-base-horizontal;
    width: 100%;
    height: @form-control-height-base;
    border: 0;
    border-radius: @form-control-border-radius;
    background-color: @form-control-background-default;
    box-shadow: inset 0 0 0 @form-control-border-width @form-control-border-color-default;
    color: @form-control-color-default;
    font-weight: @form-control-font-weight;
    font-size: @font-size-base;
    font-family: @form-control-font-family;
    line-height: @form-control-line-height;
    transition:
      border-color 0.15s ease-in-out,
      box-shadow 0.15s ease-in-out;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    .form-control-focus();

    // Placeholder styles
    &::-moz-placeholder {
      color: @form-control-placeholder-color;
      opacity: 1;
      font-style: @form-control-placeholder-font-style;
    }
    &:-ms-input-placeholder {
      color: @form-control-placeholder-color;
      font-style: @form-control-placeholder-font-style;
    }
    &::-webkit-input-placeholder {
      color: @form-control-placeholder-color;
      font-style: @form-control-placeholder-font-style;
    }

    // States
    &:has(.c8y-colorpicker) {
      width: auto;
    }
    &[disabled],
    fieldset[disabled] & {
      opacity: @form-control-disabled-opacity;
    }
    &[readonly],
    &[readonly]:focus {
      background-color: @form-control-background-default;
      color: @text-muted;
      opacity: 1;
    }
    &[disabled],
    fieldset[disabled] & {
      cursor: @cursor-disabled;
    }
    textarea & {
      height: auto;
    }

    &:not(:first-child):not(:last-child) {
      border-radius: 0;
    }
    .btn {
      border-radius: @form-control-border-radius;
    }

    &[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: @font-size-h4;
      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: @size-8 12px;
    border-bottom: 1px solid var(--c8y-dropdown-border-color; @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: @font-size-small;
      line-height: @size-20;
      padding: 0;
      align-items: center;
      display: flex;
    }
    .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: '';
    }
  }
}