@c8y/style/styles/_c8y-list-group.less

Styles for Cumulocity IoT applications

.c8y-list {
  &__group {
    margin: 0;
    padding: 0;
    list-style: none;

    &:not(.dropdown-menu) {
      display: block;
    }

    &.separator-top {
      // spacing for proper displaying of the border
      padding-top: 1px;
    }

    &.dropdown-menu {
      width: 100%;
      max-height: 240px;
      overflow-y: auto;
    }
  }

  &__item {
    display: block;
    background-color: @component-background-default;
    color: @component-color-default;
    box-shadow: inset 0 -1px 0 @component-border-color;

    [class*='bg-level-'] & {
      background-color: inherit;
    }

    .c8y-list__item__title {
      white-space: normal;
      word-break: break-word;
    }

    .card &,
    .dropdown & {
      box-shadow: inset 0 -1px 0 0 @component-border-color;
      margin-bottom: 0;
    }

    &.highlighted {
      background-color: @brand-80;
    }
    &.selected{
      border-left: 4px solid @component-color-active;
      background-color: @component-background-default;
    }
    /* typeahead dropdown list items styling */
    &:has(.c8y-list__item__btn:focus) {
      outline: 2px solid @component-color-focus;
      outline-offset: -2px;
      border-radius: @component-border-radius-focus !important;
    }
    bs-dropdown-container &, c8y-typeahead .dropdown &, .c8y-select-v2 .dropdown & {
      &.active,
      &.selectable:active {
        .c8y-list__item__body {

          &:after{
            .glyphicon();
            float: right;
            content:  @dlt-c8y-icon-check;
            font-size: 18px;
          }
        }
        color: @component-color-active;
      }

      /**
       * @Carlos: There are items that are not selectable that
       * don't get that class. E.g. the "No results found" item.
       **/
      &.selectable:hover:not(.active), &.highlighted {
        background-color: @component-background-hover;
      }

      &:focus {
        outline: 2px solid @component-color-focus;
        outline-offset: -2px;
        border-radius: @component-border-radius-focus !important;
      }
    }

    &.selectable.active{
      .c8y-list__item__body {
        &:after{
          .glyphicon();
          float: right;
          content:  @dlt-c8y-icon-check;
        }
      }
      color: @component-color-active;
    }

    &.disabled {
      opacity: @component-disabled-opacity;
      pointer-events: none;
    }

    > .expanded,
    &.expanded {
      background-color: @component-background-expanded;
      .separator-bottom();
      --c8y-nav-tabs-background-active: @component-background-expanded;

      .c8y-list__item__title {
        font-weight: 500;
      }

      .sticky-top {
        background-color: inherit;
      }
    }

    &--empty-actions {
      padding-right: 40px;

      .c8y-list__item__body {
        padding-right: 0 !important;
      }
    }
    &--overflow-visible {
      .c8y-list__item__body {
        overflow: visible!important;
      }
    }

    &.has-error {
      box-shadow: inset 0 -2px 0 @alert-danger-border;
    }

    .c8y-list__group--strip & {
      &:nth-child(odd) {
        background-image: @component-background-odd;
      }
    }

    // don't display the bottom border in the last item when inside a card
    .no-border-last & {
      &:last-child {
        box-shadow: none;
      }
    }

    .no-border-2nd-last & {
      &:nth-last-child(2) {
        box-shadow: none;
      }
    }

    &--double-actions {
      .c8y-list__item__actions {
        min-width: 80px;
      }
    }

    // hide collapse-btn when displaying in a modal for instance
    &--no-expand {
      > div > .c8y-list__item__block > .c8y-list__item__actions >
      .collapse-btn {
        display: none;
        pointer-events: none;
      }
    }
    &__btn{
      .btn-clean();
      white-space: normal;
      &:focus{
        outline: none;
      }
    }
    &--link {
      cursor: pointer;

      &:hover {
        color: @component-color-link-hover;
      }

      &:focus {
        outline: 2px solid @component-color-focus;
        outline-offset: -2px;
        border-radius: @component-border-radius-focus !important;
      }
    }
  }


  &--pulse {
    .component-pulse();
  }
}

a.c8y-list__item {
  &:hover {
    text-decoration: none;
  }

  &:focus {
    outline: 2px solid @component-color-focus;
    outline-offset: -2px;
    border-radius: @component-border-radius-focus !important;
  }
}

c8y-load-more.c8y-list__item {
  .btn {
    margin-top: @margin-8;
    margin-bottom: @margin-8;
  }
}

.c8y-list__item__block {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;

  &.sticky-top {
    background-color: unset;
  }

  // remove marging bottom from progress bar
  .progress {
    margin-top: 3px;
    margin-bottom: 0;
  }
}

c8y-li-drag-handle, c8y-list-item-drag-handle {
  display: flex;
  align-items: center;
  align-self: stretch;
  flex-shrink: 0;
  max-width: 0;
  overflow: hidden;
  transition: all 0.25s ease;

  c8y-li-drag-handle, c8y-list-item-drag-handle {
    padding: 0 !important;
    cursor: move;
    max-width: fit-content !important;
  }

  &[cdkdraghandle] {
    cursor: move;

    &:hover {
      color: @component-brand-primary;
    }
  }

  + c8y-li-checkbox{
    padding-left: 0;
  }
  .cdk-drag-disabled & {
    display: none;

    + * {
      padding-left: 0 !important;
    }
    + c8y-li-checkbox {
      padding-left: 16px!important;
    }
  }
}

.no-card-context {
  .c8y-list__item:not(:hover) {
    c8y-li-drag-handle:not(.cdk-drag-disabled) + * {
      padding-left: 0;
    }

    c8y-list-item-drag-handle:not(.cdk-drag-disabled) + * {
      padding-left: 0;
    }
  }
}

.c8y-list__item:hover {
  c8y-li-drag-handle:not(:empty) {
    max-width: 100px;
    padding-left: @margin-8;
  }

  c8y-list-item-drag-handle:not(:empty) {
    max-width: 100px;
    padding-left: @margin-8;
  }
}

.c8y-list__item__actions {
  display: flex;
  padding: @margin-base 0;

  .c8y-dropdown,
  .collapse-btn {
    opacity: @component-actions-opacity;
    min-width: 40px;

    &:hover {
      opacity: 1;
      color: @component-color-link-hover;
      outline: 2px solid @component-color-focus;
      outline-offset: -2px;
    }

    &:focus {
      .c8y-focus-inset();
      opacity: 1;
    }

    &.disabled,
    &[disabled] {
      color: @component-color-disabled;

      &:hover {
        opacity: 0.5;
        pointer-events: auto !important;
        cursor: not-allowed !important;
      }
    }
  }
}

.c8y-list__item__icon,
.c8y-list__item__check,
.c8y-list__item__appicon,
.c8y-list__item__radio,
.c8y-list__item__colorpicker {
  padding: @component-padding;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .c8y-list__item__body & {
    min-height: auto;
  }
}

// sizing constraints
.c8y-list__item__icon,
.c8y-list__item__check,
.c8y-list__item__appicon,
.c8y-list__item__radio,
.c8y-list__item__colorpicker,
.c8y-list__item__actions {
  min-height: 56px;
  bs-dropdown-container &, c8y-typeahead .dropdown &, .c8y-list__item--dense & {
    min-height: 36px;
    padding-top: @margin-base;
    padding-bottom: @margin-base;
  }
}

.c8y-list__item__body {
  padding-top: calc(@margin-base + 10px);
  padding-bottom: calc(@margin-base + 10px);
  /**
   * @Carlos: Would be nice to not only have the dense class
   * pm the list but also on the list items if [dense] is set.
   **/
  .dropdown-menu &, .c8y-list__item--dense & {
    padding-top: @margin-base;
    padding-bottom: @margin-base;
  }

}

.card,
.modal,
.cdk-drag {
  .c8y-list__item__icon,
  .c8y-list__item__check,
  .c8y-list__item__appicon,
  .c8y-list__item__radio,
  .c8y-list__item__colorpicker,
  .c8y-list__item__actions {
    min-height: 40px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .c8y-list__item__actions {
    padding-top: 0;
    padding-bottom: 0;
  }

  .c8y-list__item__body {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

//----

.c8y-list__item__check,
.c8y-list__item__radio {
  justify-content: center;

  .c8y-checkbox,
  .c8y-radio {
    line-height: 1.3;
  }
}

.c8y-list__item__appicon {
  font-size: 36px;
}

.c8y-list__item__icon {
  font-size: 20px;
  color: @component-icon-color;
  min-height: 40px;
  line-height: @line-height-computed;

  > device-status {
    line-height: 1;
  }

  &.changeIcon {
    position: relative;

    > button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
    }

    &:hover {
      > button {
        opacity: 1;
      }
    }
  }
}

.c8y-list__item__body {
  flex-grow: 1;
  display: block;
  text-overflow: ellipsis;
  min-width: 0;

  &:last-child {
    padding-right: @component-padding;
  }

  &:first-child {
    padding-left: @component-padding;
  }
}

.c8y-list__item__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: @font-size-small;
  line-height: 1.2;

  > * {
    padding: 0.5rem 0 0 0;
  }
  > c8y-li-footer{
    width: 100%;
  }
}

.c8y-list__item__collapse {
  width: 100%;
}

.c8y-list__item__collapse--container {
  padding: @component-padding;
  @media (min-width: @screen-md-min) {
    padding: @component-padding calc(@margin-48 + 6px) 2rem;
  }
  .full-w-collapse &{
    padding: @component-padding;
  }
}

// handling sticky elements

.card-header.sticky-top {
  z-index: 100;

  + .c8y-list__group .c8y-list__item__block.sticky-top {
    top: 48px;
  }
}

.c8y-list__item--sticky-top{
  .c8y-list__item__block{
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: inherit;
  }
  .c8y-list__item__collapse--container{
    position: relative;
    z-index: 8;
  }
}

// TIMELINE LIST
.c8y-list--timeline {
  box-shadow: none;
  // --c8y-component-background-default: @palette-high;
  >.c8y-list--timeline__item {
    &:first-child::before {
      top: 50%;
    }

    &:last-of-type::before {
      bottom: 50%;
    }
  }
  .c8y-list--timeline__item {
    position: relative;
    align-items: center;
    box-shadow: none;
    &:focus-within, &:has(.dropdown.open) {
      z-index: 10;
    }
    &::after {
      transition: all 1s linear 0.25s;
    }

    .c8y-list__item {
      background: @component-background-default;
      max-width: calc(100% - 106px);

      &::after {
        transition: inherit;
      }
    }

    .c8y-list__item__body {
      padding-right: @component-padding;
    }

    &.ng-enter {
      &:after {
        transition: none;
        background: @component-realtime-added !important;
      }

      .c8y-list__item {
        transition: none;
        background: @component-realtime-added !important;

        &::after {
          border-color: transparent @component-realtime-added transparent transparent;
        }
      }
    }

    &::before,
    &::after {
      position: absolute;
      top: 0;
      bottom: 1px;
      left: 80px;
      border: 1px dotted @component-border-color;
      content: '';
      transition: top 0.35s linear;
    }
    //TODO: need to fix this when using the virtual scroll, for now let's leave it as is
    // &:first-child::before {
    //   top: 50%;
    // }

    // &:last-of-type::before {
    //   bottom: 50%;
    // }
    &::after {
      position: absolute;
      top: 50%;
      left: 80px;
      z-index: 3;
      margin: -10px 0 0 -6px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: transparent;
      content: '';
      transition: all 0.25s linear;
      border: 6px double @gray-50;
    }

    &,
    &.expanded {
      background-color: transparent;
      display: flex;
      flex-flow: row nowrap;
    }

    &.expanded {
      .c8y-list__item__title {
        font-weight: 500;
      }

      &::after {
        background-color: @component-color-active;
        border-color: @component-color-active;
      }

      .c8y-list__item {
        background: @component-background-expanded;

        &::after {
          border-color: transparent @component-background-expanded transparent transparent;
        }
      }
    }
  }

  .c8y-list--timeline__item__date {
    margin-left: 1px;
    margin-right: 40px;
    width: 64px;
    font-size: @font-size-xs;
    line-height: 1.2;
    text-align: right;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    color: @component-icon-color;

    &::first-line {
      font-weight: bold;
      font-size: @font-size-xs;
    }
  }

  .c8y-list__item__block {
    padding: 0 0 0 @component-padding;
  }

  .c8y-list__item {
    position: relative;
    overflow: visible;
    flex-grow: 1;
    margin-top: 0;
    margin-bottom: 8px;
    border-radius: 0.25rem;
    box-shadow: inset 0 0 0 1px @component-border-color;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    transition: all 0.15s linear !important;
    &:focus-within {
      z-index: 10;
    }

    &:not(:has(>button))::before {
      position: absolute;
      top: 50%;
      left: -10px;
      margin-top: -10px;
      width: 0;
      height: 0;
      border-width: 10px 10px 10px 0;
      border-style: solid;
      border-color: transparent @component-border-color transparent transparent;
      content: '';
      transition: border-color 0.15s linear !important;
    }

    &:not(:has(>button))::after {
      position: absolute;
      top: 50%;
      left: -8px;
      margin-top: -10px;
      width: 0;
      height: 0;
      border-width: 10px 10px 10px 0;
      border-style: solid;
      border-color: transparent var(--c8y-root-component-background-default) transparent transparent;
      content: '';
      transition: border 0.15s linear !important;
    }
  }

  .c8y-list__item__actions {
    margin-right: 0; //calc(@component-padding * -1);
  }

  .c8y-list__item__icon,
  .c8y-list__item__check,
  .c8y-list__item__radio {
    padding-left: 0;
  }
  .c8y-list--timeline__item.active {
    &::after {
      background-color: @component-color-accent;
      border-color: @component-color-active;
    }

    .c8y-list__item {
      outline: 2px solid @component-color-accent;
      outline-offset: -2px;

      &::before {
        left: -11px;
        margin-top: -11px;
        border-width: 11px 11px 11px 0;
        border-color: transparent @component-color-accent transparent transparent;
      }
    }
  }
  &.interactive .c8y-list--timeline__item:hover:not(.active) {
    .c8y-list__item {
      box-shadow: inset 0 0 0 1px @component-color-accent;
      &::before {
        left: -10px;
        margin-top: -10px;
        border-width: 10px 10px 10px 0;
        border-color: transparent @component-color-accent transparent transparent;
      }
      &::after {
        left: -9px;
      }
    }
  }
}