@c8y/style 1023.17.20 → 1023.22.2

package/styles/components/data-display-and-visualization/lists/_c8y-list-group.scss

@@ -0,0 +1,789 @@
+@use "../../../../variables/index" as *;
+
+@use "../../../../variables/dlt-c8y-icons-vars";
+@use "../../../animations/component-animations";
+@use "../../../core/buttons/buttons";
+@use "../../../mixins/tab-focus";
+
+/**
+ * C8Y List Group - Modern list component with flexible layouts
+ *
+ * Note: Uses $size-* tokens for spacing, $size-base for calculations, and $component-padding.
+ *
+ * Intentionally hardcoded values:
+ * - Off-token spacing (6px): Triangle and 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
+ * - Transition durations: Animation timing
+ * - Box-shadow values: Borders and elevation
+ * - RGBA values: Transparency
+ * - Z-index values: Stacking order
+ */
+
+.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: var(--brand-80, var(--c8y-brand-80));
+    }
+    &.selected{
+      border-left: $size-4 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:not(:has(c8y-li-checkbox)):active {
+        color: $component-color-active;
+
+        .c8y-list__item__body {
+
+          &:after{
+            display: inline-block;
+            text-transform: none;
+            font-weight: normal;
+            font-style: normal;
+            font-variant: normal;
+            font-family: '@{icon-font-family}' !important;
+            line-height: 1;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+
+            float: right;
+            content:  dlt-c8y-icons-vars.$dlt-c8y-icon-check;
+            font-size: 18px;
+          }
+        }
+      }
+
+      /**
+       * $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{
+          display: inline-block;
+          text-transform: none;
+          font-weight: normal;
+          font-style: normal;
+          font-variant: normal;
+          font-family: "dlt-c8y-icons" !important;
+          line-height: 1;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+
+          float: right;
+          content:  dlt-c8y-icons-vars.$dlt-c8y-icon-check;
+        }
+      }
+      color: $component-color-active;
+    }
+    &:not(.selectable){
+      transition: border-left 0.15s linear;
+    }
+    &.active:not(.selectable){
+      border-left: $size-4 solid $component-color-active;
+    }
+
+    &.disabled {
+      opacity: $component-disabled-opacity;
+      pointer-events: none;
+    }
+
+    > .expanded,
+    &.expanded {
+      background-color: $component-background-expanded;
+      @extend .separator-bottom !optional;
+      --c8y-nav-tabs-background-active: #{$component-background-expanded};
+
+      .c8y-list__item__title {
+        font-weight: 500;
+      }
+
+      .sticky-top {
+        background-color: inherit;
+      }
+    }
+
+    &--empty-actions {
+      padding-right: $size-40;
+
+      .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{
+      @include buttons.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 {
+    @include component-animations.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: $size-8;
+    margin-bottom: $size-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;
+  }
+}
+
+.block-sticky-top > div > .c8y-list__item__block {
+  position: sticky;
+  top: 0;
+  z-index: 120;
+  background-color: inherit;
+}
+
+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: $size-16!important;
+    }
+  }
+}
+
+.no-card-context {
+  .c8y-list__item{
+    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: $size-8;
+  }
+
+  c8y-list-item-drag-handle:not(:empty) {
+    max-width: 100px;
+    padding-left: $size-8;
+  }
+}
+
+.c8y-list__item__actions {
+  display: flex;
+  padding: $size-base 0;
+
+  .c8y-dropdown,
+  .collapse-btn {
+    opacity: $component-actions-opacity;
+    min-width: $size-40;
+
+    &:hover {
+      opacity: 1;
+      color: $component-color-link-hover;
+      outline: 2px solid $component-color-focus;
+      outline-offset: -2px;
+    }
+
+    &:focus {
+      @include tab-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: $size-base;
+    padding-bottom: $size-base;
+  }
+}
+
+.c8y-list__item__body {
+  padding-top: calc($size-base + $size-10);
+  padding-bottom: calc($size-base + $size-10);
+  /**
+   * $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: $size-base;
+    padding-bottom: $size-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: $size-40;
+    padding-top: 7px;
+    padding-bottom: 7px;
+  }
+
+  .c8y-list__item__actions {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .c8y-list__item__body {
+    padding-top: $size-10;
+    padding-bottom: $size-10;
+  }
+}
+
+//----
+
+.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: $size-20;
+  color: $component-icon-color;
+  min-height: $size-40;
+  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($size-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;
+    &:has(.dropdown.open){
+      z-index: 11;
+    }
+  }
+  .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: calc(-1 * $size-10) 0 0 -6px;
+      width: calc($size-base * 1.5);
+      height: calc($size-base * 1.5);
+      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: $size-40;
+    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: $size-8;
+    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: calc(-1 * $size-10);
+      margin-top: calc(-1 * $size-10);
+      width: 0;
+      height: 0;
+      border-width: $size-10 $size-10 $size-10 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: calc(-1 * $size-8);
+      margin-top: calc(-1 * $size-10);
+      width: 0;
+      height: 0;
+      border-width: $size-10 $size-10 $size-10 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: calc(-1 * $size-10);
+        margin-top: calc(-1 * $size-10);
+        border-width: $size-10 $size-10 $size-10 0;
+        border-color: transparent $component-color-accent transparent transparent;
+      }
+      &::after {
+        left: -9px;
+      }
+    }
+  }
+}
+
+