@c8y/style 1023.14.76 → 1023.14.92

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

@@ -1,18 +1,40 @@
+
+@import "../../../mixins/_vendor-prefixes.less";
+
+/**
+ * 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
 
 /*
-// DEPRECATED: Migrate to c8y-list-group component.
-// Still used in: modules/connectivityV2/auditLogs.html, modules/administration-archivesEditor/views/index.html
 .timeline-list {
   margin: 0;
   padding: 0;
   list-style: none;
   .timeline-item-date {
     margin-right: 35px;
-    width: 40px;
+    width: @size-40;
     color: @component-color-default;
-    font-size: 10px;
+    font-size: @font-size-xs;
     line-height: 1;
   }
   > div,
@@ -28,7 +50,7 @@
       transition: top 0.35s linear;
     }
     &.expanded::before {
-      transition: none; 
+      transition: none,
     }
     &:first-child {
       &::before {
@@ -46,14 +68,14 @@
       left: 48px;
       z-index: 10;
       margin: -6px 0 0;
-      width: 12px;
-      height: 12px;
+      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;
 
-      .box-shadow(inset 0 1px 2px fade(black, 30%));
+        .box-shadow(inset 0 1px 2px rgba(black, (30 / 100)));
     }
     &.active {
       &:after {
@@ -64,15 +86,15 @@
         .list-item-actions {
           &:before {
             display: inline-block;
-            margin-top: calc(@margin-base + 2);
-            margin-right: @margin-base;
+            margin-top: calc(@size-base + 2);
+            margin-right: @size-base;
             padding: 0.2em 0.6em 0;
-            border-radius: 10px;
+            border-radius: @size-10;
             background-color: @component-color-accent;
             color: @palette-high;
             content: attr(data-active);
             font-weight: bold;
-            font-size: 12px;
+            font-size: @font-size-small;
           }
           .dropdown {
             display: none;
@@ -85,7 +107,7 @@
           border-color: transparent @component-color-accent transparent transparent;
         }
         &:after {
-          left: -10px;
+          left: calc(-1 * @size-10);
         }
       }
     }
@@ -94,9 +116,9 @@
     position: relative;
     flex: 1 1 0%;
     margin-top: 0;
-    margin-bottom: @margin-base;
-    padding: @margin-base @component-padding;
-    min-height: 40px;
+    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);
@@ -107,23 +129,23 @@
     &:before {
       position: absolute;
       top: 50%;
-      left: -12px;
-      margin-top: -10px;
+      left: calc(-1 * @size-base * 1.5);
+      margin-top: calc(-1 * @size-10);
       width: 0;
       height: 0;
-      border-width: 10px 10px 10px 0;
+      border-width: @size-10 @size-10 @size-10 0;
       border-style: solid;
-      border-color: transparent fade(@black, 5%) transparent transparent;
+      border-color: transparent rgba(@black, (5 / 100)) transparent transparent;
       content: '';
     }
     &:after {
       position: absolute;
       top: 50%;
       left: -11px;
-      margin-top: -10px;
+      margin-top: calc(-1 * @size-10);
       width: 0;
       height: 0;
-      border-width: 10px 10px 10px 0;
+      border-width: @size-10 @size-10 @size-10 0;
       border-style: solid;
       border-color: transparent @component-background-default transparent transparent;
       content: '';
@@ -135,7 +157,7 @@
     .list-item-icon,
     .list-item-icon [class^='dlt-c8y-icon-'],
     .list-item-icon [class*=' dlt-c8y-icon-'] {
-      font-size: 20px;
+      font-size: @size-20;
     }
     .list-item-body {
       flex: 1;
@@ -171,7 +193,7 @@
   }
   &.list-condensed {
     .timeline-item-content {
-      margin: 0 0 @margin-4;
+      margin: 0 0 @size-4;
       border-width: 0 0 0 2px;
     }
   }

package/styles/components/data-display-and-visualization/tables/_data-grid.less

@@ -1,3 +1,19 @@
+
+@import "../../../core/buttons/_buttons.less";
+
+
+/**
+ * data grid - 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): Standard borders
+ * - Font-sizes: Typography
+ * - Percentages: Layout
+ */
 .table.table-data-grid {
   display: grid;
   min-width: 100%;
@@ -86,7 +102,7 @@
     > span,
     > div {
       &:not(.resize-handle):not(.dropdown) {
-        padding: 12.5px 8px !important;
+        padding: 12.5px @size-8 !important;
         max-width: 102%;
         min-width: 100%;
         text-align: left;
@@ -119,7 +135,7 @@
     tbody tr {
       display: grid;
       grid-template-columns: minmax(0, 44px) repeat(auto-fit, minmax(152px, 100%)) minmax(0, 44px);
-      padding: 8px 0;
+      padding: @size-8 0;
       border-top: 1px solid @component-border-color;
     }
 
@@ -156,7 +172,7 @@
       display: flex !important;
       flex-direction: column;
       align-items: center;
-      gap: @margin-base;
+      gap: @size-base;
       grid-column: 3;
       grid-row: 1 / span 15;
 
@@ -189,7 +205,7 @@
         color: @form-legend-color;
         content: attr(data-cell-title);
         text-transform: uppercase;
-        font-size: 10px;
+        font-size: @size-10;
         position: relative;
         z-index: 1;
       }
@@ -286,7 +302,7 @@
       }
 
       .dropdown {
-        margin: -9px -8px -8px 0;
+        margin: -9px calc(-1 * @size-8) calc(-1 * @size-8) 0;
       }
     }
   }
@@ -297,14 +313,15 @@
 /*
  fix for firefox position sticky bug
  https://bugzilla.mozilla.org/show_bug.cgi?id=1488080
+ Note: @-moz-document is not supported in Dart Sass, commented out
 */
-@media (min-width: @screen-md-min) {
-  @-moz-document url-prefix() {
-    .table-data-grid {
-      padding-bottom: 64px;
-    }
-  }
-}
+// @media (min-width: @screen-md-min) {
+//   @-moz-document url-prefix() {
+//     .table-data-grid {
+//       padding-bottom: 64px;
+//     }
+//   }
+// }
 
 .table-data-grid-scroll {
   position: relative;
@@ -326,7 +343,7 @@
   top: 0;
   right: 0;
   bottom: 0;
-  width: 8px;
+  width: @size-8;
   background: transparent;
   box-shadow: inset -1px 0 0 @component-brand-primary;
   opacity: 0;
@@ -355,7 +372,7 @@
   left: 0;
   z-index: 15;
   background-color: @component-background-default;
-  min-height: calc(@margin-base * 7);
+  min-height: calc(@size-base * 7);
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -439,12 +456,12 @@
   }
 
   pagination {
-    height: 32px;
+    height: @size-32;
     display: inline-block;
   }
 
   .form-group {
-    margin: 8px 0;
+    margin: @size-8 0;
     padding: 0 8px;
 
     label {
@@ -482,7 +499,7 @@ c8y-filtering-form {
     cursor: default !important;
 
     > * {
-      pointer-events: all;
+      pointer-events: auto;
     }
 
     &:hover {
@@ -499,7 +516,7 @@ c8y-filtering-form {
   }
 
   .btn-add-block {
-    padding: 8px;
+    padding: @size-8;
     margin-bottom: 0;
 
     > [class^='dlt-c8y-icon-'],
@@ -561,7 +578,7 @@ c8y-filtering-form {
   c8y-object-type div p {
     text-align: left !important;
     font-weight: bold !important;
-    margin: 8px 0 4px 0 !important;
+    margin: @size-8 0 4px 0 !important;
     font-size: inherit;
   }
 
@@ -715,9 +732,11 @@ c8y-filtering-form {
 
 // Tree node cell renderer
 // a workaround for the tree node cell renderer to increment padding accorndig to the level
-@base-padding: 16px;
+@base-padding: @size-16;
+
+.loop(@i) {
 
-.loop(@i) when (@i <= 10) {
+  & when (@i <= 10 ) {
   tr.level-@{i} {
     c8y-tree-node-cell-renderer,
     &.pagination-row {
@@ -743,13 +762,13 @@ c8y-filtering-form {
 
 .data-grid-collapse-btn {
   .btn-clean();
-  padding: 8px !important;
-  min-width: 40px;
-  min-height: 20px;
+  padding: @size-8 !important;
+  min-width: @size-40;
+  min-height: @size-20;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: -8px 0;
+  margin: calc(-1 * @size-8) 0;
   font-size: 18px;
   line-height: 1;
   &:hover:not(:focus) {
@@ -791,3 +810,4 @@ td.cdk-cell.cdk-column-tree-node:has(c8y-tree-node-cell-renderer) {
     transform: scale(1, 1);
   }
 }
+}

package/styles/components/data-display-and-visualization/tables/_resizable-grid.less

@@ -1,3 +1,17 @@
+
+
+/**
+ * resizaule grid - 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): Standard borders
+ * - Font-sizes: Typography
+ * - Percentages: Layout
+ */
 c8y-resizable-grid {
   display: flex;
   height: 100%;
@@ -59,7 +73,7 @@ c8y-resizable-grid {
 }
 
 .resizer {
-  width: 8px;
+  width: @size-8;
   flex: 0 0 8px;
   cursor: col-resize;
   z-index: 1;
@@ -107,6 +121,9 @@ c8y-resizable-grid {
   }
 }
 
+.inner-scroll {
+  overflow-y: auto;
+}
 
 
 

package/styles/components/data-display-and-visualization/tables/_tables.less

@@ -1,3 +1,19 @@
+
+@import "../../../mixins/_table-row.less";
+
+
+/**
+ * taules - 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): Standard borders
+ * - Font-sizes: Typography
+ * - Percentages: Layout
+ */
 table {
   background-color: @component-background-default;
 }
@@ -41,10 +57,10 @@ th {
         }
       }
       > th {
-        padding: 10px @margin-8;
+        padding: @size-10 @size-8;
       }
       > td {
-        padding: @table-cell-padding-default @margin-8;
+        padding: @table-cell-padding-default @size-8;
         min-height: 48px;
       }
     }
@@ -77,8 +93,8 @@ th {
         color: @component-form-label-color;
         vertical-align: bottom;
         text-transform: uppercase;
-        font-size: 12px;
-        line-height: 20px;
+        font-size: @font-size-small;
+        line-height: @size-20;
         [class^='dlt-c8y-icon-'],
         [class*=' dlt-c8y-icon-'] {
           font-size: 14px;
@@ -138,15 +154,15 @@ th {
     > tr {
       > td {
         padding: calc(@table-cell-padding-condensed - 1px) @table-cell-padding-condensed;
-        font-size: 12px;
+        font-size: @font-size-small;
         > c8y-device-status-display {
           display: block;
-          height: 12px;
+          height: calc(@size-base * 1.5);
         }
       }
       > th {
         padding: @table-cell-padding-condensed;
-        font-size: 10px !important;
+        font-size: @size-10 !important;
       }
     }
   }
@@ -365,12 +381,12 @@ table {
       border: 0;
       &:before {
         display: inline-block;
-        padding-right: 10px;
+        padding-right: @size-10;
         min-width: 20%;
         content: attr(data-label);
         text-transform: uppercase;
         font-weight: bold;
-        font-size: 10px;
+        font-size: @size-10;
       }
     }
   }

package/styles/components/data-input/_c8y-ai-chat.less

@@ -1,3 +1,4 @@
+
 /**
  * C8Y AI Chat - AI chat widget component
  *

package/styles/components/{specialized → data-input}/_c8y-countdown-interval.less

@@ -1,3 +1,17 @@
+
+
+/**
+ * c8y countdown interval - 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-countdown-interval {
   display: contents;
 }
@@ -36,14 +50,6 @@ c8y-countdown-interval {
     font-size: @font-size-xs;
     line-height: inherit;
   }
-  .form-group-sm &, .input-group-sm & {
-    min-width: 24px;
-    min-height: 24px;
-    svg {
-      padding-top: 2px;
-      padding-bottom: 2px;
-    }
-  }
 }
 
 .time-on {
@@ -62,7 +68,7 @@ c8y-countdown-interval {
   align-items: center;
   justify-content: center;
   min-height: @form-control-height-base;
-  min-width: calc(@form-control-height-base + @margin-base);
+  min-width: calc(@form-control-height-base + @size-base);
   padding: 0 4px;
   background: @form-control-background-default;
   cursor: pointer;
@@ -70,10 +76,6 @@ c8y-countdown-interval {
   .time-elapsed {
     background-color: transparent;
   }
-  .input-group-sm &, .form-group-sm & {
-    min-height: @form-control-height-sm;
-    min-width: calc(@form-control-height-sm + @margin-base);
-  }
   &.vertical {
     padding: 0;
     min-width: revert;

package/styles/components/{specialized → data-input}/_c8y-range.less

@@ -1,3 +1,20 @@
+
+@import "../../mixins/_shadows-helper.less";
+@import "../../mixins/_tab-focus.less";
+
+
+/**
+ * c8y range - 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
+ */
 .track() {
   width: @track-width;
   height: @track-height;
@@ -49,7 +66,7 @@ input[type='range'] {
       90deg,
       @component-brand-primary var(--track-width, 0),
       @component-background-default var(--track-width, 0)
-    );
+);
     transition: all 0.2s ease;
   }
 
@@ -72,7 +89,7 @@ input[type='range'] {
       90deg,
       @component-brand-primary var(--track-width, 0),
       @component-background-default var(--track-width, 0)
-    );
+);
     transition: all 0.2s ease;
   }
 
@@ -130,7 +147,7 @@ input[type='range'][disabled] {
   &.end {
     display: flex;
     flex-direction: row;
-    gap: @margin-base;
+    gap: @size-base;
   }
   &.inline:has(input[type='range']:focus) {
     .range-value > span {
@@ -145,7 +162,7 @@ input[type='range'][disabled] {
 
 .range-value {
   position: absolute;
-  height: calc(@margin-base * 3);
+  height: calc(@size-base * 3);
   top: 0;
   transform: translateY(-19px);
 
@@ -161,7 +178,7 @@ input[type='range'][disabled] {
       display: block;
       padding: 0 8px;
       width: auto;
-      height: calc(@margin-base * 3);
+      height: calc(@size-base * 3);
       border: 1px solid @popover-border-color;
       border-radius: 4px;
       background: @component-background-default;
@@ -215,4 +232,3 @@ input[type='range'][disabled] {
   margin-top: 0;
   border-top: 6px solid @popover-border-color;
 }
-

package/styles/components/{specialized → data-input}/_dtm-icon-selector.less

@@ -1,3 +1,18 @@
+@import "../../core/buttons/_buttons.less";
+
+
+/**
+ * dtm icon selector - 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
+ */
 .dtm-icon-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -24,11 +39,11 @@
   }
 
   &__btn {
-    .btn();
+    .btn-clean();
     height: auto;
     white-space: normal;
     text-align: center;
-    padding: @margin-8;
+    padding: @size-8;
     background: @component-background-default;
     width: 100%;
 

package/styles/components/{specialized → data-input}/_dtm-icon-selector.scss

@@ -40,8 +40,7 @@
   }
 
   &__btn {
-    // Note: btn() mixin doesn't exist, removed during LESS to SCSS migration
-    @include btn_clean();
+    @include btn-clean();
     height: auto;
     white-space: normal;
     text-align: center;

package/styles/components/{specialized → data-input}/_measurements-time-control.less

@@ -1,3 +1,19 @@
+
+@import "../../mixins/_clearfix.less";
+
+
+/**
+ * measurements time control - 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-measurements-icon-bar {
   display: flex;
   align-items: center;
@@ -6,7 +22,7 @@ c8y-measurements-icon-bar {
 
 // Removed unused deprecated component class from selector - verified 0 usages: .c8y-datetime-picker
 .measurements-time-control {
-  .clearfix();
+   .clearfix();
   .form-group {
     margin: 0;
     padding: 0;
@@ -14,7 +30,13 @@ c8y-measurements-icon-bar {
     &.input-sm {
       padding: 0;
       input {
-        .input-sm();
+        // Inline .input-sm styles (was @extend .input-sm)
+        &:not(.c8y-radio):not(.c8y-checkbox) {
+          padding: @form-control-padding-small-vertical @form-control-padding-small-horizontal;
+          height: @form-control-height-sm !important;
+          font-size: @font-size-small;
+          line-height: @line-height-small;
+        }
       }
     }
   }
@@ -23,16 +45,22 @@ c8y-measurements-icon-bar {
       width: 50px;
     }
   }
-  .input-sm {
+ .input-sm {
     .uib-time .form-control {
       padding: 5px !important;
       width: 30px;
 
-      .input-sm();
+      // Inline .input-sm styles (was @extend .input-sm)
+      &:not(.c8y-radio):not(.c8y-checkbox) {
+        padding: @form-control-padding-small-vertical @form-control-padding-small-horizontal;
+        height: @form-control-height-sm !important;
+        font-size: @font-size-small;
+        line-height: @line-height-small;
+      }
     }
   }
   .measurements-date-to {
-    margin-left: 10px;
+    margin-left: @size-10;
   }
   @media (max-width: 550px) {
     width: 100%;
@@ -75,7 +103,7 @@ c8y-measurements-icon-bar {
     width: 100%;
     .measurements-date-from,
     .measurements-date-to {
-      padding-top: @margin-4;
+      padding-top: @size-4;
     }
     .measurements-date-to {
       margin-left: auto;