@c8y/style 1023.17.19 → 1023.22.2

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

@@ -0,0 +1,381 @@
+@use "../../../../variables/index" as *;
+@use "../../../../variables/dlt-c8y-icons-vars";
+@use "../../../mixins/icon-base";
+@use "../../../mixins/list-group";
+@use "../../../mixins/tab-focus";
+@use "../../../mixins/vendor-prefixes";
+
+/**
+ * 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 {
+      padding-right: $size-32;
+    }
+    > * {
+      flex-grow: 1;
+    }
+    &:hover,
+    .cdk-drag-preview & {
+      &:after {
+        @include icon-base.dlt-c8y-icon;
+        position: absolute;
+        right: calc($size-base * 1.5);
+        flex-grow: 0;
+        margin-left: $size-4;
+        content: dlt-c8y-icons-vars.$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 {
+        @include tab-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-icons-vars.$dlt-c8y-icon-chevron-right;
+      font: normal normal normal 14px/1 dlt-c8y-icons-vars.$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.
+@include list-group.list-group-item-variant(success, $state-success-bg, $component-background-default);
+@include list-group.list-group-item-variant(info, $state-info-bg, $state-info-text);
+@include list-group.list-group-item-variant(warning, $state-warning-bg, $component-background-default);
+@include list-group.list-group-item-variant(danger, $state-danger-bg, $component-background-default);
+@include list-group.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;
+
+    @include vendor-prefixes.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 {
+    @include vendor-prefixes.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;
+}

package/styles/components/data-display-and-visualization/lists/_smart-rules-template-list.scss

@@ -0,0 +1,36 @@
+@use "../../../../variables/index" as *;
+
+/**
+ * Smart Rules Template List - Smart rule template list component
+ *
+ * Note: Uses $size-* tokens for spacing and $component-border-color.
+ *
+ * Intentionally hardcoded values:
+ * - Border widths (1px): Standard borders
+ * - Percentages (53vh): Viewport-relative height
+ */
+
+.smart-rule-templates-list {
+  overflow: hidden;
+  margin-bottom: 0;
+}
+
+.edit-smart-rule-details {
+  margin: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  .card {
+    box-shadow: inset 0 0 0 1px $component-border-color;
+  }
+  .smart-rule-control {
+    margin-top: $size-10;
+  }
+  .card-group {
+    margin-bottom: 0;
+  }
+}
+
+.modal-inner-scroll.smart-rule-control {
+  margin: 0;
+  max-height: 53vh;
+}

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

@@ -0,0 +1,240 @@
+@use "sass:math";
+@use "../../../../variables/index" as *;
+
+@use "../../../mixins/vendor-prefixes";
+
+/**
+ * Timeline List - DEPRECATED timeline list component
+ *
+ * DEPRECATED: Migrate to c8y-list-group component.
+ * Still used in: modules/connectivityV2/auditLogs.html, modules/administration-archivesEditor/views/index.html
+ *
+ * Note: Uses $size-* tokens for spacing, $size-base for calculations, $font-size-* tokens, and $component-padding.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (35px, 48px, 53px): Timeline positioning and spacing
+ * - Off-token spacing (6px, 11px, 13px): Triangle and positioning offsets not in token system
+ * - Border widths (1px, 2px): Standard borders and shadow effects
+ * - Negative positioning: Fine-tuning for arrows and connectors
+ * - Percentages (50%, 100%): Layout and positioning
+ * - Transition durations (0.35s, 0.5s): Animation timing
+ * - Box-shadow values: Elevation and inset effects
+ * - RGBA values: Transparency
+ * - Em values (0.2em, 0.6em): Relative padding for badges
+ * - Z-index values (10): Stacking order
+ */
+
+// Removed unused deprecated timeline component classes - verified 0 usages
+// .timeline-list, .timeline-item-date, .timeline-item-content, .timeline-list-item
+
+/*
+.timeline-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  .timeline-item-date {
+    margin-right: 35px;
+    width: $size-40;
+    color: $component-color-default;
+    font-size: $font-size-xs;
+    line-height: 1;
+  }
+  > div,
+  > li {
+    position: relative;
+    &::before {
+      position: absolute;
+      top: 0;
+      bottom: 1px;
+      left: 53px;
+      border: 1px dotted $component-border-color;
+      content: '';
+      transition: top 0.35s linear;
+    }
+    &.expanded::before {
+      transition: none,
+    }
+    &:first-child {
+      &::before {
+        top: 50%;
+      }
+    }
+    &:last-child {
+      &::before {
+        bottom: 50%;
+      }
+    }
+    &:after {
+      position: absolute;
+      top: 50%;
+      left: 48px;
+      z-index: 10;
+      margin: -6px 0 0;
+      width: calc($size-base * 1.5);
+      height: calc($size-base * 1.5);
+      border-radius: 50%;
+      background-color: $component-color-disabled;
+      content: '';
+      transition: background 0.5s linear;
+
+        @include vendor-prefixes.box-shadow(inset 0 1px 2px rgba(black, math.div(30, 100)));
+    }
+    &.active {
+      &:after {
+        background-color: $component-color-accent;
+      }
+      .timeline-item-content {
+        border-color: $component-color-accent;
+        .list-item-actions {
+          &:before {
+            display: inline-block;
+            margin-top: calc($size-base + 2);
+            margin-right: $size-base;
+            padding: 0.2em 0.6em 0;
+            border-radius: $size-10;
+            background-color: $component-color-accent;
+            color: $palette-high;
+            content: attr(data-active);
+            font-weight: bold;
+            font-size: $font-size-small;
+          }
+          .dropdown {
+            display: none;
+          }
+        }
+        &:before {
+          left: -13px;
+          margin-top: -13px;
+          border-width: 13px 13px 13px 0;
+          border-color: transparent $component-color-accent transparent transparent;
+        }
+        &:after {
+          left: calc(-1 * $size-10);
+        }
+      }
+    }
+  }
+  .timeline-item-content {
+    position: relative;
+    flex: 1 1 0%;
+    margin-top: 0;
+    margin-bottom: $size-base;
+    padding: $size-base $component-padding;
+    min-height: $size-40;
+    border: 2px solid $component-background-default;
+    background: $component-background-default;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+    color: $component-color-default;
+    transition: background 0.5s linear, border 0.5s linear;
+
+    overflow-wrap: break-word;
+    &:before {
+      position: absolute;
+      top: 50%;
+      left: calc(-1 * $size-base * 1.5);
+      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 rgba($black, math.div(5, 100)) transparent transparent;
+      content: '';
+    }
+    &:after {
+      position: absolute;
+      top: 50%;
+      left: -11px;
+      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-background-default transparent transparent;
+      content: '';
+      transition: border 0.5s linear;
+    }
+    .list-item-icon {
+      align-self: flex-start;
+    }
+    .list-item-icon,
+    .list-item-icon [class^='dlt-c8y-icon-'],
+    .list-item-icon [class*=' dlt-c8y-icon-'] {
+      font-size: $size-20;
+    }
+    .list-item-body {
+      flex: 1;
+      word-break: break-all; //this is added because of IE11
+    }
+
+    .collapse,
+    .collapsing {
+      flex: 1 1 100%;
+      order: 11000;
+      min-width: 100%;
+      width: auto;
+    }
+  }
+  .expanded {
+    background: transparent;
+    .timeline-item-date {
+      font-weight: bold;
+    }
+    &:after {
+      background-color: $component-color-accent;
+    }
+    .timeline-item-content {
+      border-color: $component-background-expanded;
+      background-color: $component-background-expanded;
+      color: $component-color-expanded;
+
+      &:after {
+        border-color: transparent $component-background-expanded transparent transparent;
+        background-color: transparent;
+      }
+    }
+  }
+  &.list-condensed {
+    .timeline-item-content {
+      margin: 0 0 $size-4;
+      border-width: 0 0 0 2px;
+    }
+  }
+}
+
+@media (min-width: $screen-sm-min) {
+  .timeline-list {
+    .timeline-item-date {
+      width: 60px;
+    }
+    > li,
+    > div {
+      &::before {
+        left: 73px;
+      }
+      &::after {
+        left: 68px;
+      }
+    }
+  }
+}
+
+.timeline-list-item {
+  &.ng-enter {
+    opacity: 0;
+    transition: background 1s linear 0.5s, opacity 0.5s linear;
+    &.ng-enter-active {
+      opacity: 1;
+    }
+    &:after {
+      background-color: $component-realtime-added;
+    }
+    .timeline-item-content {
+      border-color: $component-realtime-added;
+      background-color: $component-realtime-added;
+      &:after {
+        border-color: transparent $component-realtime-added transparent transparent;
+      }
+    }
+  }
+}
+*/