@c8y/style 1023.14.33 → 1023.14.36

package/styles/components/data-display-and-visualization/_range-display.scss

@@ -0,0 +1,488 @@
+@use "../../../variables/index" as *;
+
+
+/**
+ * Range Display - Visual range/gauge display component
+ *
+ * Note: Uses $size-* tokens for spacing and positioning, $component-* variables for colors.
+ * File has been optimized with mixins for repeated selector patterns (lines 3-32).
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (240px, 300px, 44px, 80px): Fixed component sizes
+ * - Off-grid spacing (2px, 3px, 6px, 9px, 11px, 14px, 26px, 28px, 30px, 34px, 37px, 38px, 54px, 56px, 105px): Component-specific positioning and sizing
+ * - Border widths (1px, 2px, 3px): Standard and component-specific borders
+ * - Font-sizes (11px): Off-grid typography
+ * - Percentages (50%, 100%): Layout and positioning
+ * - Calc expressions: Complex computed values with CSS custom properties
+ * - Transform values: Positioning adjustments
+ * - Z-index values: Stacking order
+ * - Opacity values: Visual effects
+ * - Transition durations: Animation timing
+ */
+// Shared mixin for compact variant selector
+@mixin range-compact-variant {
+  .range-display--compact:not(.range-display--vertical) & {
+    @content;
+  }
+}
+
+// Shared mixin for inline variant selector
+@mixin range-inline-variant {
+  .range-display--inline:not(.range-display--vertical) & {
+    @content;
+  }
+}
+
+// Shared mixin for both compact and inline variants (used when they have identical styles)
+@mixin range-compact-inline-variants {
+  .range-display--compact:not(.range-display--vertical) &,
+  .range-display--inline:not(.range-display--vertical) & {
+    @content;
+  }
+}
+
+// Shared mixin for range min/max base properties
+@mixin range-min-max-base {
+  position: absolute;
+  top: calc(-1 * $size-4);
+  max-width: 100%;
+  height: $size-8;
+  border-radius: 0;
+}
+
+.range-display {
+  position: relative;
+  display: block;
+  padding: $size-32 38px $size-32 34px;
+  min-width: 240px;
+  border: $size-4 solid $component-border-color;
+  border-radius: 44px;
+  background-color: $component-background-default;
+
+  @include range-compact-variant {
+    padding: $size-8 $size-10;
+    min-width: auto;
+  }
+
+  @include range-inline-variant {
+    padding: 9px calc($size-base * 1.5);
+    min-width: auto;
+    border-width: 3px;
+  }
+
+  &--compact:not(.range-display--vertical) {
+    display: flex;
+    align-items: center;
+
+    &::before {
+      display: inline-block;
+      padding-right: $size-8;
+      content: attr(data-label);
+      font-weight: bold;
+    }
+
+    .range-display {
+      flex: 1 1 auto;
+      min-width: auto;
+    }
+  }
+
+  &__range {
+    position: absolute;
+    right: 37px;
+    left: 34px;
+    display: flex;
+    height: 4px;
+    border: 0;
+    border-radius: 0;
+    background-color: transparent;
+    &::before {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      border-bottom: 1px dotted currentColor;
+      content: '';
+      opacity: 0.5;
+    }
+
+    @include range-compact-variant {
+      right: $size-10;
+      left: $size-10;
+    }
+
+    @include range-inline-variant {
+      right: calc($size-base * 1.5);
+      left: calc($size-base * 1.5);
+    }
+
+    &__unit {
+      position: absolute;
+      top: calc(-1 * $size-24);
+      font-weight: bold;
+
+      @include range-compact-inline-variants {
+        display: none;
+      }
+    }
+
+    &__max,
+    &__min {
+      @include range-min-max-base;
+    }
+
+    &__max {
+      left: var(--range-r-min);
+      width: calc(var(--range-r-max) - var(--range-r-min));
+      background-color: var(--input-validation-error, $status-danger);
+    }
+
+    &__min {
+      left: var(--range-y-min);
+      width: calc(var(--range-y-max) - var(--range-y-min));
+      border-right: 1px solid $component-background-default;
+      background-color: var(--input-validation-warning, $status-warning);
+    }
+
+    &__target {
+      position: relative;
+      top: -2px;
+      z-index: 11;
+      width: var(--measurement-target);
+      pointer-events: none;
+
+      @include range-compact-inline-variants {
+        display: none;
+      }
+
+      &:before {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: block;
+        width: 2px;
+        height: 26px;
+        border-radius: 0;
+        background-color: var(--palette-status-success, var(--c8y-palette-status-success));
+        content: '';
+        opacity: 1;
+        cursor: pointer;
+        transition: all 0.25s ease;
+        transform: translate(50%, -50%);
+        pointer-events: auto;
+      }
+
+      &:after {
+        position: absolute;
+        right: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 6px;
+        width: auto;
+        height: auto;
+        border: 0;
+        border-radius: $size-8;
+        background-color: var(--palette-status-success, var(--c8y-palette-status-success));
+        color: white;
+        content: attr(data-label);
+        white-space: nowrap;
+        font-size: 11px;
+        transform: translate(50%, calc(-1 * $size-24));
+      }
+    }
+
+    &__current {
+      position: absolute;
+      top: $size-4;
+      z-index: 12;
+      width: var(--measurement-current);
+      height: calc($size-base * 1.5);
+      border-top: $size-4 solid var(--brand-light, $brand-primary-light);
+      background-color: transparent;
+      opacity: 1;
+      transition: width 0.15s ease;
+
+      &:before {
+        position: absolute;
+        top: -14px;
+        right: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 2px;
+        height: 54px;
+        border-radius: 0%;
+        border-left: 1px dashed $tooltip-background-default;
+        color: transparent;
+        content: '';
+        text-align: center;
+        transition: all 0.25s ease;
+        transform: translate(calc(50% + .5px), calc(-1 * $size-32));
+      }
+
+      &:after {
+        position: absolute;
+        right: 0;
+        display: flex;
+        overflow: hidden;
+        align-items: center;
+        justify-content: center;
+        padding: 2px calc($size-base * 1.5);
+        width: auto;
+        border: 0;
+        border-radius: $size-32;
+        background-color: var(--range-display-tooltip-bg);
+        box-shadow: var(--c8y-elevation--md);
+        color: $palette-high;
+        content: attr(data-label);
+        white-space: pre;
+        font-size: 11px;
+        transition: background-color .15s ease;
+        transform: var(--range-display-tooltip-translate);
+        top: calc(-1 * $size-8);
+      }
+    }
+  }
+
+  &__ruler {
+    position: relative;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    width: 100%;
+    height: $size-8;
+    border-top: 0;
+    border-left: 0;
+  }
+
+  &__tick {
+    position: relative;
+
+    &:before {
+      position: absolute;
+      top: $size-4;
+      left: 0;
+      display: block;
+      width: $size-4;
+      height: $size-5;
+      border: 0;
+      border-left: 1px solid currentColor;
+      content: '';
+      opacity: 0.5;
+    }
+
+    &:after {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      content: attr(data-label);
+      text-align: center;
+      font-size: calc($size-base * 1.5);
+      transform: translate(-50%, 14px);
+    }
+
+    @include range-compact-variant {
+      &:after {
+        top: $size-4;
+      }
+
+      &:not(:first-child):not(:last-child):not(:nth-child(6)) {
+        &::after {
+          display: none;
+        }
+      }
+    }
+
+    @include range-inline-variant {
+      &:not(:first-child):not(:last-child):not(:nth-child(6)) {
+        &::after,
+        &::before {
+          display: none;
+        }
+      }
+
+      &:first-child,
+      &:last-child,
+      &:nth-child(6) {
+        &::before {
+          height: 3px;
+        }
+
+        &::after {
+          font-size: $size-10;
+        }
+      }
+
+      &:first-child::after {
+        transform: translate(0, $size-5);
+      }
+
+      &:nth-child(6)::after {
+        transform: translate(-50%, $size-5);
+      }
+
+      &:last-child::after {
+        transform: translate(-100%, $size-5);
+      }
+    }
+  }
+
+  &--vertical {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    align-items: center;
+    min-width: 300px;
+
+    .range-display {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      margin: 0 105px;
+      padding: 38px $size-32 34px $size-32;
+      min-width: unset;
+      min-height: 240px;
+      width: $size-80;
+
+      &__range {
+        top: 38px;
+        right: $size-32;
+        bottom: 34px;
+        left: 28px;
+        flex-direction: column;
+        width: 6px;
+        height: unset;
+        border-top: 0;
+        border-right: 1px dotted currentColor;
+        border-bottom: 0;
+        border-radius: 0;
+        margin-left: -2px;
+
+        &__unit {
+          top: unset;
+          bottom: calc(-1 * $size-24);
+        }
+
+        &__max,
+        &__min {
+          position: absolute;
+          top: unset;
+          left: calc(-1 * $size-4);
+          max-width: 100%;
+          width: $size-8;
+          height: unset;
+          border-radius: 0;
+        }
+
+        &__max {
+          top: calc(100% - var(--range-r-max));
+          left: unset;
+          height: calc(var(--range-r-max) - var(--range-r-min));
+          background-color: var(--input-validation-error, $status-danger);
+        }
+
+        &__min {
+          top: calc(100% - var(--range-y-max));
+          left: unset;
+          height: calc(var(--range-y-max) - var(--range-y-min));
+          border-top: 1px solid $component-background-default;
+          border-right: unset;
+        }
+
+        &__target {
+          top: unset;
+          left: -2px;
+          width: unset;
+          height: calc(100% - var(--measurement-target));
+          z-index: 0;
+          &:before {
+            top: unset;
+            right: unset;
+            bottom: 0;
+            left: 0;
+            width: 56px;
+            height: 2px;
+            content: '';
+            transform: translate(0, 50%);
+          }
+
+          &:after {
+            right: unset;
+            bottom: 0;
+            transform: translate(56px, 50%);
+          }
+        }
+
+        &__current {
+          top: unset;
+          bottom: 0;
+          left: 6px;
+          width: calc($size-base * 1.5);
+          height: var(--measurement-current);
+          border-top: unset;
+          border-left: $size-4 solid var(--brand-light, $brand-primary-light);
+          background-color: transparent;
+          opacity: 1;
+
+          &:before {
+            top: 0;
+            right: unset;
+            bottom: unset;
+            left: calc(-1 * $size-8);
+            display: flex;
+            flex-direction: column;
+            width: $size-32;
+            height: 2px;
+            transform: translate(calc(-1 * $size-20), -50%);
+            border-top: 1px dashed $tooltip-background-default;
+            border-left: 0;
+          }
+
+          &:after {
+            right: unset;
+            left: -30px;
+            margin-left: 0;
+            transform: translate(-100%, -50%);
+            top: unset;
+          }
+        }
+      }
+
+      &__ruler {
+        position: relative;
+        flex-flow: column-reverse nowrap;
+        flex-grow: 1;
+        justify-content: space-between;
+        width: $size-8;
+        border-top: 0;
+        border-left: 0;
+      }
+
+      &__tick {
+        position: relative;
+
+        &:before {
+          position: absolute;
+          top: 0;
+          left: 0;
+          display: block;
+          width: $size-4;
+          height: $size-5;
+          border: 0;
+          border-top: 1px solid currentColor;
+          content: '';
+        }
+
+        &:after {
+          position: absolute;
+          top: 0;
+          left: 50%;
+          content: attr(data-label);
+          text-align: center;
+          font-size: calc($size-base * 1.5);
+          transform: translate(4px, -50%);
+        }
+      }
+    }
+  }
+}

package/styles/{_timelines-chart.less → components/data-display-and-visualization/_timelines-chart.less}

@@ -1,33 +1,42 @@
-body>.c8y-timelines-chart-tooltip {
-  position: absolute;
-  z-index: 1060;
-  padding: @margin-base;
-  border: 0;
-  background: @component-background-default;
-  font-size: @font-size-small;
-  pointer-events: none;
-  .boxShadowHelper(md);
-}
-
-.c8y-timelines-chart {
-  position: relative;
-
-  .axis {
-
-    path,
-    line {
-      fill: none;
-      stroke: @gray-60;
-      shape-rendering: crispEdges;
-    }
-
-    text {
-      font-size: @font-size-xs;
-    }
-
-    .tick line,
-    .domain {
-      stroke: @gray-80;
-    }
-  }
-}
+/**
+ * Timelines Chart - Timeline visualization chart component
+ *
+ * Note: Uses @size-* and @font-size-* tokens throughout.
+ *
+ * Intentionally hardcoded values:
+ * - Border widths (0): No borders
+ * - Z-index values (1060): Stacking order for tooltips
+ */
+
+body > .c8y-timelines-chart-tooltip {
+  position: absolute;
+  z-index: 1060;
+  padding: @size-base;
+  border: 0;
+  background: @component-background-default;
+  font-size: @font-size-small;
+  pointer-events: none;
+  .boxShadowHelper(md);
+}
+
+.c8y-timelines-chart {
+  position: relative;
+
+  .axis {
+    path,
+    line {
+      fill: none;
+      stroke: @gray-60;
+      shape-rendering: crispEdges;
+    }
+
+    text {
+      font-size: @font-size-xs;
+    }
+
+    .tick line,
+    .domain {
+      stroke: @gray-80;
+    }
+  }
+}

package/styles/components/data-display-and-visualization/_timelines-chart.scss

@@ -0,0 +1,45 @@
+@use "../../../variables/index" as *;
+@use "../../mixins/shadows-helper";
+
+/**
+ * Timelines Chart - Timeline visualization chart component
+ *
+ * Note: Uses $size-* and $font-size-* tokens throughout.
+ *
+ * Intentionally hardcoded values:
+ * - Border widths (0): No borders
+ * - Z-index values (1060): Stacking order for tooltips
+ */
+
+body > .c8y-timelines-chart-tooltip {
+  position: absolute;
+  z-index: 1060;
+  padding: $size-base;
+  border: 0;
+  background: $component-background-default;
+  font-size: $font-size-small;
+  pointer-events: none;
+  @include shadows-helper.boxShadowHelper(md);
+}
+
+.c8y-timelines-chart {
+  position: relative;
+
+  .axis {
+    path,
+    line {
+      fill: none;
+      stroke: $gray-60;
+      shape-rendering: crispEdges;
+    }
+
+    text {
+      font-size: $font-size-xs;
+    }
+
+    .tick line,
+    .domain {
+      stroke: $gray-80;
+    }
+  }
+}

package/styles/{_c8y-data-point-list.less → components/data-display-and-visualization/lists/_c8y-data-point-list.less}

@@ -1,16 +1,4 @@
-.c8y-data-point-list {
-  .data-point-details {
-    padding-top: 10px;
-  }
-
-  .c8y-list__item__actions {
-    align-self: center;
-  }
-
-  .c8y-list__item__collapse--container {
-    padding: @component-padding;
-  }
-}
+// Removed unused deprecated component class - verified 0 usages: .c8y-data-point-list
 
 c8y-datapoint-selection-list,
 c8y-alarm-event-selection-list {
@@ -24,13 +12,7 @@ c8y-alarm-event-selection-list {
   }
 }
 
-.modal {
-  .c8y-data-point-list {
-    .c8y-list__item__check {
-      padding-left: 0;
-    }
-  }
-}
+// Removed modal selector for .c8y-data-point-list (class is unused)
 
 // c8y-datapoint-selector-list-item {
 //   .c8y-list__item__actions{

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

@@ -0,0 +1,32 @@
+@use "../../../../variables/index" as *;
+
+/**
+ * C8Y Data Point List - Data point selection list component
+ *
+ * Note: Uses $size-* tokens for spacing and $component-padding.
+ *
+ * Intentionally hardcoded values:
+ * - None - all values use design tokens
+ */
+
+// Removed unused deprecated component class - verified 0 usages: .c8y-data-point-list
+
+c8y-datapoint-selection-list,
+c8y-alarm-event-selection-list {
+
+  .c8y-list__item__actions {
+    align-self: center;
+  }
+
+  .c8y-list__item__collapse--container {
+    padding: $component-padding;
+  }
+}
+
+// Removed modal selector for .c8y-data-point-list (class is unused)
+
+// c8y-datapoint-selector-list-item {
+//   .c8y-list__item__actions{
+//     padding-top: 10px!important;
+//   }
+// }