@c8y/style 1023.14.76 → 1023.14.92

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,

package/styles/components/data-display-and-visualization/lists/_c8y-empty-state.less

@@ -1,3 +1,17 @@
+
+/**
+ * C8Y Empty State - Empty state component for lists and containers
+ *
+ * Note: Uses @size-* tokens for spacing; @size-base for calculations, and @component-padding.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (600px, 280px, 45px): Max widths and flex basis
+ * - Typography sizes (30px, 90px): Large icon font sizes
+ * - Opacity values (0.6): Visual effects
+ * - Percentages (100%): Layout
+ * - Rem values (8rem, 4rem): Responsive padding using rem units
+ */
+
 .c8y-empty-state {
   margin: 0 auto;
   max-width: 600px;
@@ -7,7 +21,7 @@
   > .c8y-icon,
   > [class^='dlt-c8y-icon-'],
   > [class*=' dlt-c8y-icon-'] {
-    margin-bottom: @margin-base;
+    margin-bottom: @size-base;
     color: @component-color-text-muted;
     font-size: 90px;
     opacity: 0.6;
@@ -19,16 +33,16 @@
     }
   }
   .btn-link {
-    .btn-primary();
+    &:extend(.btn-primary);
   }
 
   p, .btn{
-    margin-bottom: @margin-base;
+    margin-bottom: @size-base;
   }
 
   .dashboard.dashboard-theme-branded & {
     .btn-primary {
-      .btn-default();
+      &:extend(.btn-default);
     }
     a {
       color: @component-color-default;
@@ -44,7 +58,7 @@
     > [class^='dlt-c8y-icon-'],
     > [class*=' dlt-c8y-icon-'] {
       flex: 0 0 auto;
-      margin-right: 5px;
+      margin-right: @size-5;
       color: @component-color-text-muted;
       font-size: 30px;
     }
@@ -59,14 +73,14 @@
     display: flex;
     flex-flow: row nowrap;
     margin: 0;
-    padding: @margin-base;
+    padding: @size-base;
     max-width: 100%;
     text-align: left !important;
     > .c8y-icon,
     > [class^='dlt-c8y-icon-'],
     > [class*=' dlt-c8y-icon-'] {
       flex: 0 0 auto;
-      margin-right: 4px;
+      margin-right: @size-4;
       margin-bottom: 0;
       font-size: 30px;
     }
@@ -82,7 +96,7 @@
     }
   }
   .card-block .c8y-empty-state {
-    padding: @margin-base 0;
+    padding: @size-base 0;
   }
 }
 
@@ -97,19 +111,19 @@ td,
     display: flex;
     flex-flow: row nowrap;
     margin-left: 0;
-    padding: @margin-base;
+    padding: @size-base;
     text-align: left !important;
     > .c8y-icon,
     > [class^='dlt-c8y-icon-'],
     > [class*=' dlt-c8y-icon-'] {
       flex: 0 0 45px;
-      margin-right: 5px;
+      margin-right: @size-5;
       margin-bottom: 0;
       font-size: 30px;
     }
     h3 {
       align-self: center;
-      margin-right: 5px;
+      margin-right: @size-5;
       font-weight: bold;
       font-size: inherit;
     }
@@ -121,7 +135,7 @@ td,
     }
   }
   .card-block .c8y-empty-state {
-    padding: @margin-base 0;
+    padding: @size-base 0;
   }
 }