@c8y/style/styles/components/data-display-and-visualization/lists/_list-group.less

Styles for Cumulocity IoT applications

@import "../../../../variables/_dlt-c8y-icons-vars.less";
@import "../../../mixins/_icon-base.less";
@import "../../../mixins/_list-group.less";
@import "../../../mixins/_tab-focus.less";
@import "../../../mixins/_vendor-prefixes.less";

/**
 * List Group - Bootstrap list group component (legacy)
 *
 * Note: Uses @size-* tokens for spacing, @size-base for calculations, and @component-padding.
 *
 * Intentionally hardcoded values:
 * - Off-token spacing (6px): Badge offsets not in token system
 * - Border widths (1px): Standard borders
 * - Negative offsets (-1px, -2px): Fine-tuning
 * - Percentages (100%): Layout
 * - Line-height values: Text alignment
 * - Box-shadow values: Borders and inset shadows
 * - Transform values: Translate positioning
 */

.list-group {
  position: relative;
  margin-bottom: @size-16;
  padding-left: 0; // reset padding because ul and ol
  box-shadow: inset 0 1px 0 @component-border-color;

  &.borderless,
  &.borderless-top {
    box-shadow: none !important;
  }
}

// Individual list items
// Use on `li`s or `div`s within the `.list-group` parent.
.list-group-item {
  position: relative;
  display: block;
  padding: @size-base @component-padding;
  min-height: calc(@size-base * 5);
  width: 100%;
  border: 0;
  box-shadow: inset 0 -1px 0 @component-border-color;

  &.draggable-after {
    position: relative;
    display: flex;
    align-items: center;
    > button:last-child {
      margin-right: calc(@size-base * -0.5);
    }
    > * {
      flex-grow: 1;
    }
    &:hover,
    .cdk-drag-preview & {
      &:after {
        .dlt-c8y-icon();
        position: absolute;
        left: 0;
        flex-grow: 0;
        margin-left: 0;
        content: @dlt-c8y-icon-drag-reorder;
        pointer-events: none;
      }
    }
  }
  &.ng-enter {
    background-color: @component-realtime-added;
  }
  &:last-child {
    margin-bottom: 0;
  }
  .borderless & {
    box-shadow: none !important;
  }
  > .c8y-checkbox,
  > .c8y-radio {
    line-height: inherit;
  }
}

// remove list group margin and list-group-item left and right borders inside panels and cards
.card,
.panel,
.modal-content {
  .list-group {
    margin-bottom: 0;
    box-shadow: none;
    .list-group-item {
      margin: 0;
      padding: @size-base @component-padding;
      border: 0;
      box-shadow: inset 0 -1px 0 @component-border-color;
      &:not(.active):not(.expanded) {
        background: transparent;
      }
      &:last-child {
        box-shadow: none;
      }
    }
    a.list-group-item:not(.active),
    button.list-group-item:not(.active) {
      &:hover {
        background-color: @component-background-active;
      }
      &:focus {
        .c8y-focus-inset();
      }
    }
  }
}

.list-group-links {
  button.list-group-item,
  a.list-group-item {
    position: relative;
    padding-right: calc(@size-base * 4) !important;
    //color: inherit;
    &:hover,
    &:focus {
      background-color: @component-background-active;
      color: @component-color-active;
    }
    &::after {
      position: absolute;
      top: 50%;
      right: calc(@size-base + @size-4);
      display: inline-block;
      color: inherit;
      content: @dlt-c8y-icon-chevron-right;
      font: normal normal normal 14px/1 @icon-font-family;
      font-size: inherit;
      transform: translate(0, -50%);

      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }
}

// Interactive list items
//
// Use anchor or button elements instead of `li`s or `div`s to create interactive items.
// Includes an extra `.active` modifier class for showing selected items.
a.list-group-item,
button.list-group-item {
  width: 100%;
  color: @component-color-actions;
  text-align: left;
  .list-group-item-heading {
    color: @component-brand-primary;
  }
  &:hover,
  &:focus {
    outline: none;
    color: @component-color-actions-hover;
    text-decoration: none;
  }
}

.list-group-item {
  &.disabled,
  &.disabled:hover,
  &.disabled:focus {
    background-color: @component-background-disabled;
    color: @component-color-disabled;
    cursor: @cursor-disabled;
    .list-group-item-heading {
      color: inherit;
    }
    .list-group-item-text {
      color: @component-color-disabled;
    }
  } // Active class on item itself, not parent
  &.active,
  &.active:hover,
  &.active:focus {
    z-index: 2; // Place active items above their siblings for proper border styling
    border-color: transparent;
    border-right: 0; // Force color to inherit for custom content
    border-left: 0;
    background-color: @component-background-active;
    color: @component-color-active;
    .list-group-item-heading,
    .list-group-item-heading > small,
    .list-group-item-heading > .small {
      color: inherit;
    }
    .list-group-item-text {
      color: @component-color-active;
    }
  }
}

// Contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
.list-group-item-variant(success; @state-success-bg; @component-background-default);
.list-group-item-variant(info; @state-info-bg; @state-info-text);
.list-group-item-variant(warning; @state-warning-bg; @component-background-default);
.list-group-item-variant(danger; @state-danger-bg; @component-background-default);
.list-group-item-variant(active; @brand-primary; @component-background-default);

// Custom content options
// Extra classes for creating well-formatted content within `.list-group-item`s.
.list-group-item-heading {
  margin-top: 0;
  margin-bottom: @size-base;
}

.list-group-item-text {
  margin-bottom: 0;
  line-height: 1.3;
}

.list-item-body {
  flex: 1;

  overflow-wrap: anywhere;
}

.list-item-icon {
  display: inline-block;
  flex: 0 0 auto;
  margin-right: @size-8;
  max-height: @size-20;
  font-size: @size-20;
  line-height: 1;
  > i {
    transform: translateY(-3px);
  }
}

.list-item-checkbox {
  align-self: flex-start;
  flex: 0 0 auto;
  margin-right: @size-8;
  .c8y-checkbox {
    height: @size-20;
    line-height: @size-20;
  }

  + label {
    overflow: hidden;
    flex: 1;
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: inherit;
    line-height: 1.1;
    cursor: pointer;

    overflow-wrap: break-word;
  }
}

.list-item-actions {
  position: relative;
  display: flex;
  align-self: flex-start;
  flex: 0 0 auto;
  flex-flow: row nowrap;
  order: 10000; //ensure it is the last item on the right
  margin: calc(@size-base * -1 + 2px) calc(@component-padding * -1) calc(@size-base * -1 + 2px)
  0;
  text-align: right;
  .btn + .btn {
    margin: 0;
  }
  > .has-error {
    position: absolute;
    left: calc(-1 * @size-10);
    height: @size-40;
    color: var(--palette-status-danger, var(--c8y-palette-status-danger));
    font-size: 14px;
    line-height: @size-40;
  }
  > .btn-link,
  .settings > .dropdown-toggle {
    order: 100;
    padding: 6px;
    width: @size-40;
    height: @size-40;
    color: @component-color-actions;
    font-size: 14px;
    opacity: @component-actions-opacity;

    .transition(all 0.25s ease);
    &:hover,
    &:focus {
      outline: none;
      text-decoration: none;
      opacity: 1;
    }
  }
  label.c8y-checkbox,
  label.c8y-radio {
    line-height: @size-40 !important;
  }
}

.list-group-item {
  &.flex-row,
  > .flex-row {
    display: flex;
    align-items: flex-start;
    flex-flow: row wrap;
  }
  &.collapsible,
  .collapsible {
    .transition(all 0.25s ease);
    &.expanded {
      z-index: 10;
      //background-color: @expanded-bg-color;
    }
    .collapse,
    .collapsing {
      flex: 1 1 100%;
      order: 11000;
      margin: @size-10 calc(@component-padding * -1) 0;
      padding: 0 @component-padding @component-padding;
      min-width: 100%;
      width: auto;
      // box-shadow: @inner-shadow1;
    }
  }
}

.list-item-switch {
  flex: 0 0 48px;
  width: 48px;
  .c8y-switch {
    margin: 1px 0 calc(-1 * @size-10) 0;
    min-height: 23px;
    input[type='checkbox'] + span {
      top: 0;
    }
  }
}

.list-item-colopicker {
  flex: 0 0 30px;
  width: 30px;
}

.list-item-colorpicker {
  position: relative;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 30px;
  -ms-flex: 0 0 30px;
  flex: 0 0 30px;
  text-align: center;
  .minicolors {
    margin: 0 auto;
    min-height: @size-20;
    width: @size-20;
    .minicolors-swatch {
      width: @size-20;
      border: 0;
    }
    .minicolors-swatch-color {
      top: 0;
      bottom: 0;
      border-radius: 14px;
    }
  }
  + .list-item-body {
    padding-top: 3px;
  }
}

// modifier class to remove borders when using sticky-header
.list-group-item-sticky-header {
  box-shadow: inset 0 -1px 0 @component-border-color!important;
}