@c8y/style 1023.37.0 → 1023.43.2

package/styles/components/{specialized → data-display-and-visualization}/_c8y-data-explorer.less

@@ -1,16 +1,33 @@
-.checkBG(@check) when not (@check=inherit) {
-  padding: @margin-base;
-  .form-control:not(:focus),
-  .c8y-select-wrapper {
-    background-color: transparent;
-    color: inherit;
-  }
-}
+
+@import "../../mixins/_shadows-helper.less";
+
+
+/**
+ * c8y data explorer - Component styles
+ *
+ * Note: Uses @size-* tokens for spacing where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions: Fixed sizes for component layout
+ * - Off-grid spacing: Component-specific positioning
+ * - Border widths (1px, 2px, 3px): Standard borders
+ * - Font-sizes: Typography
+ * - Percentages: Layout
+ */
+// Note: LESS mixin with guard removed - was never used
+// checkBG(@check) when not (@check=inherit) {
+//   padding: @size-base;
+//   .form-control:not(:focus),
+//   .c8y-select-wrapper {
+//     background-color: transparent;
+//     color: inherit;
+//   }
+// }
 
 .c8y-data-explorer {
   background-color: inherit;
   color: inherit;
-  margin-top: 10px;
+  margin-top: @size-10;
 }
 
 c8y-chart {
@@ -64,9 +81,6 @@ c8y-chart {
 }
 
 // Removed unused utility usage: .has-aggregation .measurement-icon-bar .c8y-realtime
-//.has-aggregation .measurement-icon-bar .c8y-realtime {
-//  display: none;
-//}
 
 .c8y-timelines-chart,
 .chart-container {
@@ -94,7 +108,7 @@ c8y-chart {
   .measurements-tab .fragment-chart {
     .realtime-form {
       position: absolute;
-      top: 10px;
+      top: @size-10;
       right: @component-padding;
     }
     // Removed unused control utility class - verified 0 usages: .top-chart-bar
@@ -107,11 +121,49 @@ c8y-chart {
   }
 }
 
-// Removed unused deprecated component class - verified 0 usages: .c8y-chart-hover-box
+.c8y-chart-hover-box {
+  position: absolute;
+  display: inline-block;
+  background-color: @popover-background-default;
+  padding: @size-10;
+  top: 0;
+  z-index: 1100;
+  pointer-events: none;
+  .boxShadowHelper(md, right);
+}
+
+.c8y-chart-hover-box {
+  .dlt-c8y-icon-circle {
+    font-size: @size-10;
+  }
+}
+
+.c8y-chart-hover-box .label {
+  padding: 0 5px 0 0;
+  color: @popover-label-color;
+  margin: 0;
+  font-weight: bold;
+  font-size: 100%;
+}
+
+.c8y-chart-hover-box .value {
+  color: @popover-color-default;
+}
+
+.c8y-chart-hover-box .value-holder {
+  font-size: @font-size-small;
+  margin-top: 3px;
+  line-height: @size-10;
+}
+
+.c8y-chart-hover-box .time-holder {
+  color: @component-color-text-muted;
+  font-size: @size-10;
+}
 
 .c8y-chart .clock {
   color: @component-form-legend-color;
-  font-size: 12px;
+  font-size: @font-size-small;
 }
 
 .c8y-chart .axis {
@@ -128,7 +180,7 @@ c8y-chart {
   bottom: 3px;
   left: 15px;
   right: 7px;
-  font-size: 12px;
+  font-size: @font-size-small;
 }
 
 .chart-loading {
@@ -148,8 +200,8 @@ c8y-chart {
 
 .chart-load-more{
   position: absolute;
-  left: 16px;
-  right: 16px;
+  left: @size-16;
+  right: @size-16;
   bottom: 3px;
   z-index: 20;
 }
@@ -161,7 +213,7 @@ c8y-chart {
 }
 
 .meausurements2 .measurement-icon-bar {
-  padding-left: 10px;
+  padding-left: @size-10;
   position: relative;
   z-index: 120;
 }
@@ -170,23 +222,23 @@ c8y-chart {
   padding: 3px;
   margin: 1px;
   position: static;
-  font-size: 12px;
+  font-size: @font-size-small;
   background: none;
 }
 
 .meausurements2 .timeField input {
   height: 30px;
   padding: 5px 10px;
-  font-size: 12px;
+  font-size: @font-size-small;
   line-height: 1.5;
   border-radius: 3px;
 }
 
 .meausurements2 .timeField table {
-  margin-top: -24px;
+  margin-top: calc(-1 * @size-24);
 }
 .meausurements2 .timeField .btn {
-  height: 24px;
+  height: @size-24;
 }
 
 .meausurements2 .timeField .btn-link {
@@ -205,7 +257,7 @@ c8y-chart {
 .meausurements2 .measurements-time-control {
   position: absolute;
   bottom: 1px;
-  right: 5px;
+  right: @size-5;
   left: 5px;
   z-index: 100;
   min-width: 404px;

package/styles/components/{specialized → data-display-and-visualization}/_c8y-data-explorer.scss

@@ -122,7 +122,45 @@ c8y-chart {
   }
 }
 
-// Removed unused deprecated component class - verified 0 usages: .c8y-chart-hover-box
+.c8y-chart-hover-box {
+  position: absolute;
+  display: inline-block;
+  background-color: $popover-background-default;
+  padding: $size-10;
+  top: 0;
+  z-index: 1100;
+  pointer-events: none;
+  @include shadows-helper.boxShadowHelper(md, right);
+}
+
+.c8y-chart-hover-box {
+  .dlt-c8y-icon-circle {
+    font-size: $size-10;
+  }
+}
+
+.c8y-chart-hover-box .label {
+  padding: 0 5px 0 0;
+  color: $popover-label-color;
+  margin: 0;
+  font-weight: bold;
+  font-size: 100%;
+}
+
+.c8y-chart-hover-box .value {
+  color: $popover-color-default;
+}
+
+.c8y-chart-hover-box .value-holder {
+  font-size: $font-size-small;
+  margin-top: 3px;
+  line-height: $size-10;
+}
+
+.c8y-chart-hover-box .time-holder {
+  color: $component-color-text-muted;
+  font-size: $size-10;
+}
 
 .c8y-chart .clock {
   color: $component-form-legend-color;

package/styles/components/{specialized → data-display-and-visualization}/_c8y-datapoint-pill.less

@@ -1,10 +1,26 @@
+
+@import "../../core/buttons/_buttons.less";
+
+
+/**
+ * c8y datapoint pill - Component styles
+ *
+ * Note: Uses @size-* tokens for spacing where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions: Fixed sizes for component layout
+ * - Off-grid spacing: Component-specific positioning
+ * - Border widths (1px, 2px, 3px): Standard borders
+ * - Font-sizes: Typography
+ * - Percentages: Layout
+ */
 .c8y-datapoint-pill, .c8y-alarm-pill, .c8y-event-pill {
   display: flex;
   overflow: hidden;
   align-items: center;
-  min-height: 24px;
+  min-height: @size-24;
   max-width: 100%;
-  border-radius: @margin-16;
+  border-radius: @size-16;
   background-color: @component-background-default;
   box-shadow: none;
   border: 1px solid @component-color-text-muted;
@@ -13,7 +29,7 @@
   &__btn {
     .btn-clean();
     align-self: stretch;
-    padding: @margin-4 @margin-4 @margin-4 @margin-base;
+    padding: @size-4 @size-4 @size-4 @size-base;
     border-right: 1px solid @component-color-text-muted;
     color: @text-muted;
     line-height: 1;
@@ -22,7 +38,7 @@
     display: flex;
     overflow: hidden;
     align-items: center;
-    padding: @margin-4 calc(@margin-base + @margin-4) @margin-4 @margin-4;
+    padding: @size-4 calc(@size-base + @size-4) @size-4 @size-4;
     line-height: 1;
   }
 }
@@ -30,24 +46,24 @@
 .c8y-datapoint-pill{
   &__btn {
     &, &:not(.btn){
-      padding: @margin-4;
+      padding: @size-4;
       &:first-child{
-        border-bottom-left-radius: @margin-16!important;
-        border-top-left-radius: @margin-16!important;
+        border-bottom-left-radius: @size-16!important;
+        border-top-left-radius: @size-16!important;
       }
       + .c8y-datapoint-pill__btn{
         border-right: 0;
-        padding-right: @margin-base;
+        padding-right: @size-base;
       }
     }
   }
 }
 
 .c8y-alarm-pill {
-  border-radius: @margin-4;
+  border-radius: @size-4;
   &__btn {
     &, &:not(.btn){
-      padding: @margin-4!important;
+      padding: @size-4!important;
       + .c8y-alarm-pill__btn{
         border-right: 0;
       }
@@ -61,7 +77,7 @@
   &__btn {
     &, &:not(.btn){
       border-right: 1px dotted @component-color-text-muted;
-      padding: @margin-4 !important;
+      padding: @size-4 !important;
       + .c8y-event-pill__btn{
         border-right: 0;
       }
@@ -74,12 +90,12 @@
       &__btn {
         &, &:not(.btn){
           font-size: 11px;
-          padding: 1px @margin-8 1px @margin-4!important;
+          padding: 1px @size-8 1px @size-4!important;
           + .c8y-datapoint-pill__btn,
           + .c8y-alarm-pill__btn,
           + .c8y-event-pill__btn {
             border-right: 0;
-            padding-right: @margin-base;
+            padding-right: @size-base;
           }
         }
       }

package/styles/components/{specialized → data-display-and-visualization}/_c8y-pulse.less

@@ -1,11 +1,32 @@
+
+@import "../../mixins/_vendor-prefixes.less";
+
+
+/**
+ * c8y pulse - Component styles
+ *
+ * Note: Uses @size-* tokens for spacing where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions: Fixed sizes for component layout
+ * - Off-grid spacing: Component-specific positioning
+ * - Border widths (1px, 2px, 3px): Standard borders
+ * - Font-sizes: Typography
+ * - Percentages: Layout
+ */
 .c8y-pulse {
   position: relative;
   display: inline-block !important;
   margin: 0 5px 0 0 !important;
-  width: 8px;
+  width: @size-8;
   height: 8px;
   border-radius: 50%;
   background: @component-pulse-color;
+  &.inactive{
+    &::before{
+      background: @component-color-disabled;
+    }
+  }
   &:before {
     position: absolute;
     top: 0;
@@ -17,11 +38,17 @@
     background-color: @component-pulse-color;
     content: '';
     transform: rotateZ(360deg);
-    animation: c8ypulse 2s infinite;
+  }
+  &.active{
+    border: 1px solid @component-background-default;
+    background-color: @component-pulse-color;
+    &:before {
+      animation: c8ypulse 2s infinite;
+    }
   }
   &--md{
-    width: @margin-16;
-    height: @margin-16;
+    width: @size-16;
+    height: @size-16;
     &.active {
       border: 1px solid @component-background-default;
       background-color: @component-pulse-color;
@@ -31,8 +58,8 @@
     }
   }
   &--lg{
-    width: @margin-24;
-    height: @margin-24;
+    width: @size-24;
+    height: @size-24;
     &.active {
       border: 1px solid @component-background-default;
       background-color: @component-pulse-color;

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

@@ -1,7 +1,10 @@
+
+
 /**
  * Range Display - Visual range/gauge display component
  *
- * Note: Uses @size-* tokens for spacing and positioning, @component-* variables for colors.
+ * 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
@@ -15,6 +18,16 @@
  * - Opacity values: Visual effects
  * - Transition durations: Animation timing
  */
+// NOTE: SCSS mixins with @content removed - manually expanded where used
+
+// Shared mixin for range min/max base properties
+.range-min-max-base {
+  position: absolute;
+  top: calc(-1 * @size-4);
+  max-width: 100%;
+  height: @size-8;
+  border-radius: 0;
+}
 
 .range-display {
   position: relative;
@@ -87,31 +100,27 @@
       font-weight: bold;
 
       .range-display--compact:not(.range-display--vertical) &,
-      .range-display--inline:not(.range-display--vertical) & {
+  .range-display--inline:not(.range-display--vertical) & {
         display: none;
       }
     }
 
     &__max,
     &__min {
-      position: absolute;
-      top: calc(-1 * @size-4);
-      max-width: 100%;
-      height: @size-8;
-      border-radius: 0;
+      .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);
+      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);
+      background-color: var(--input-validation-warning; @status-warning);
     }
 
     &__target {
@@ -122,7 +131,7 @@
       pointer-events: none;
 
       .range-display--compact:not(.range-display--vertical) &,
-      .range-display--inline:not(.range-display--vertical) & {
+  .range-display--inline:not(.range-display--vertical) & {
         display: none;
       }
 
@@ -169,7 +178,7 @@
       z-index: 12;
       width: var(--measurement-current);
       height: calc(@size-base * 1.5);
-      border-top: @size-4 solid var(--brand-light, @brand-primary-light);
+      border-top: @size-4 solid var(--brand-light; @brand-primary-light);
       background-color: transparent;
       opacity: 1;
       transition: width 0.15s ease;
@@ -286,15 +295,15 @@
       }
 
       &:first-child::after {
-        transform: translate(0, @size-5);
+        transform: translate(0; @size-5);
       }
 
       &:nth-child(6)::after {
-        transform: translate(-50%, @size-5);
+        transform: translate(-50%; @size-5);
       }
 
       &:last-child::after {
-        transform: translate(-100%, @size-5);
+        transform: translate(-100%; @size-5);
       }
     }
   }
@@ -350,7 +359,7 @@
           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);
+          background-color: var(--input-validation-error; @status-danger);
         }
 
         &__min {
@@ -392,7 +401,7 @@
           width: calc(@size-base * 1.5);
           height: var(--measurement-current);
           border-top: unset;
-          border-left: @size-4 solid var(--brand-light, @brand-primary-light);
+          border-left: @size-4 solid var(--brand-light; @brand-primary-light);
           background-color: transparent;
           opacity: 1;
 

package/styles/components/{specialized → data-display-and-visualization}/_smart-list-icon-label.less

@@ -1,3 +1,17 @@
+
+
+/**
+ * smart list icon lauel - Component styles
+ *
+ * Note: Uses @size-* tokens for spacing where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions: Fixed sizes for component layout
+ * - Off-grid spacing: Component-specific positioning
+ * - Border widths (1px, 2px, 3px): Standard borders
+ * - Font-sizes: Typography
+ * - Percentages: Layout
+ */
 .smart-list-icon-label {
   display: inline-block;
   -webkit-box-flex: 0;
@@ -20,13 +34,13 @@
 .card-header-actions,
 .edit-smart-rule-details {
   .smart-list-icon-label {
-    margin: 0 10px 0 0;
+    margin: 0 @size-10 0 0;
 
     .dot {
       width: 30px;
       height: 30px;
       font-size: 14px;
-      line-height: 32px;
+      line-height: @size-32;
     }
   }
 }
@@ -39,7 +53,7 @@
       .dot {
         width: 34px;
         height: 34px;
-        font-size: 16px;
+        font-size: @size-16;
         line-height: 36px;
       }
     }
@@ -48,12 +62,12 @@
 
 .smart-rule-templates-list {
   .smart-list-icon-label {
-    margin: 10px 2px;
+    margin: @size-10 2px;
 
     .dot {
       width: 34px;
       height: 34px;
-      font-size: 16px;
+      font-size: @size-16;
       line-height: 36px;
     }
   }

package/styles/components/{specialized → data-display-and-visualization}/_status.less

@@ -1,3 +1,17 @@
+
+
+/**
+ * status - Component styles
+ *
+ * Note: Uses @size-* tokens for spacing where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions: Fixed sizes for component layout
+ * - Off-grid spacing: Component-specific positioning
+ * - Border widths (1px, 2px, 3px): Standard borders
+ * - Font-sizes: Typography
+ * - Percentages: Layout
+ */
 .statusOk {
   color: var(--palette-status-success-dark, var(--c8y-palette-status-success-dark));
 }
@@ -76,7 +90,7 @@ path.statusNok {
 
 .alarm-icons {
   position: relative;
-  font-size: 20px;
+  font-size: @size-20;
   width: 28px;
   .btn-clean.severity {
     position: absolute !important;
@@ -86,6 +100,6 @@ path.statusNok {
   }
   .btn-clean.status {
     margin-top: 8px;
-    font-size: 24px;
+    font-size: @size-24;
   }
 }

package/styles/components/{specialized → data-display-and-visualization}/_statusContainer.less

@@ -1,3 +1,17 @@
+
+
+/**
+ * statusContainer - Component styles
+ *
+ * Note: Uses @size-* tokens for spacing where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions: Fixed sizes for component layout
+ * - Off-grid spacing: Component-specific positioning
+ * - Border widths (1px, 2px, 3px): Standard borders
+ * - Font-sizes: Typography
+ * - Percentages: Layout
+ */
 .statusContainer {
   position: relative;
   display: inline-block;
@@ -5,8 +19,8 @@
   text-align: center;
   font-size: 14px;
   overflow: hidden;
-  height: 20px;
-  width: 20px;
+  height: @size-20;
+  width: @size-20;
   border-radius: 50%;
   border: 0;
   background-image: none;

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

@@ -1,3 +1,5 @@
+@import "../../mixins/_shadows-helper.less";
+
 /**
  * Timelines Chart - Timeline visualization chart component
  *

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

@@ -1,3 +1,13 @@
+
+/**
+ * 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,