@c8y/style/styles/_c8y-asset-selector.less

Styles for Cumulocity IoT applications

c8y-asset-selector{
  .c8y-scrollbar();
  overflow-y: auto;
  display: block;
  max-height: 100%;
}

.collapse .c8y-asset-selector__item {
  position: relative;
  padding-left: 8px;
  &::after {
    position: absolute;
    top: 32px;
    left: 22px;
    bottom: 32px;
    display: block;
    border-left: 1px solid @component-icon-dark-color-light;
    content: '';
  }

  .c8y-asset-selector__item {
    &::before {
      border-left: 1px solid @component-icon-dark-color-light;
      border-bottom: 1px solid @component-icon-dark-color-light;
      border-top: 0;
      content: "";
      height: 16px;
      position: absolute;
      transform: translate(-10px,0);
      width: 24px;
      z-index: 1;
    }
  }
}

.c8y-asset-selector__item--more{
  &::before,
  &::after {
    display: none;
  }
  .c8y-asset-selector__node__btn-spacer{
    display: none;
  }
  .btn.btn-default::before {
    position: absolute;
    top: -16px;
    left: -4px;
    z-index: 10;
    display: block;
    width: 5px;
    height: 32px;
    background: @component-background-default;
    content: '';
  }
}

.c8y-asset-selector {
  &__node {
    display: flex;
    max-height: 32px;
    min-width:fit-content;
    .collapse-btn {
      height: 32px;
      width: 32px;
      opacity: 1;
      
      &:focus {
        outline: 2px solid @component-brand-primary;
        outline-offset: -2px;
      }
    }
    &__btn-spacer{
      width: 32px;
      z-index: 1;
    }

    &--open {
      .collapse-btn > i {
        color: @component-brand-primary;
        transform: rotate(90deg);
      }
    }

    .dropdown-menu &{
      .collapse-btn{
        background-color: var(--c8y-dropdown-background-default);
      }
    }
  }
 
 

  &__btn {
    display: inline-block !important;
    align-items: center;
    flex-grow: 1;
    margin-bottom: 0;
    padding: 6px 8px;
    max-width: 100%;
    border: 0;
    background-color: transparent;
    background-image: none;
    box-shadow: none !important;
    color: inherit;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;

    touch-action: manipulation;
    appearance: none;
    user-select: none;
    &:focus {
      outline: 2px solid @component-brand-primary;
      outline-offset: -2px;
    }
  }
}

.c8y-asset-selector__item--start > .collapse > c8y-asset-selector-node > .c8y-asset-selector__item{
  // padding-left: 0;
  &:after{
    // left: 14px;
  }
  > .c8y-asset-selector__node > .btn.btn-default::before{
    display: none;
  }
}
.c8y-asset-selector__item--start:after {
 left: 22px;
}

c8y-asset-selector c8y-search-input .input-group {
  .form-control {
    &,
    &:first-child,
    &:last-child {
      padding-right: calc(@form-control-height-base + @form-control-padding-base-horizontal);
      padding-left: calc(@form-control-padding-base-horizontal * 2);
      border-radius: calc(@form-control-height-base * 0.5);
    }
  }
}

.c8y-asset-selector__item--start {
  .c8y-asset-selector__node + .collapse {
    .c8y-asset-selector__item {
      margin-left: 16px !important;
    }
    >.c8y-asset-selector__item {
      margin-left: 24px !important;
    }
  }
}

c8y-widget-asset-selector .card{
  background: inherit;
  margin-bottom: 0;
}