@c8y/style 1023.37.0 → 1023.43.2

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;

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

@@ -31,7 +31,13 @@ c8y-measurements-icon-bar {
     &.input-sm {
       padding: 0;
       input {
-        // @extend .input-sm; // Removed for performance
+        // 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;
+        }
       }
     }
   }
@@ -45,7 +51,13 @@ c8y-measurements-icon-bar {
       padding: 5px !important;
       width: 30px;
 
-      // @extend .input-sm; // Removed for performance
+      // 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 {

package/styles/components/{specialized → data-input}/_search-header.less

@@ -1,3 +1,19 @@
+
+@import "../../mixins/_shadows-helper.less";
+
+
+/**
+ * search header - 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
+ */
 // main header search component
 .search-header-menu {
   top: 92px;
@@ -8,15 +24,15 @@
 
   .c8y-search-form .c8y-search-dropdown {
     .input-group {
-      padding: @margin-16;
+      padding: @size-16;
       background-color: @component-background-default;
 
       .input-group-btn {
-        top: @margin-16;
-        right: @margin-16;
+        top: @size-16;
+        right: @size-16;
         max-height: none;
         height: auto;
-        bottom: @margin-16;
+        bottom: @size-16;
       }
     }
   }
@@ -41,7 +57,7 @@
         border-radius: var(--c8y-form-control-height-base)!important;
         border: 0;
         height: auto;
-        padding: 16px 54px 16px 24px !important;
+        padding: @size-16 54px @size-16 @size-24 !important;
         background-color: @headerColor;
         color: @header-text-color;
         font-size: @font-size-large;
@@ -51,7 +67,7 @@
 
     .input-group-btn {
       .btn {
-        font-size: 20px;
+        font-size: @size-20;
         height: auto !important;
         padding: 14px 16px;
         color: @header-text-color;

package/styles/components/data-input/_static-assets-file-picker.less

@@ -0,0 +1,22 @@
+
+
+/**
+ * static assets file picker - 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-static-assets-file-picker{
+  display: block;
+  padding: var(--c8y-root-component-padding-default);
+  border: 1px solid var(--c8y-form-control-border-color-default);
+  img{
+    border: 1px dashed var(--c8y-root-component-border-color);
+  }
+}

package/styles/components/data-input/assets/_asset-property-list.less

@@ -1,3 +1,18 @@
+
+/**
+ * Asset Property List - Tree view component for asset properties
+ *
+ * Note: Uses @size-* tokens for spacing and @size-base for calculations.
+ *
+ * Intentionally hardcoded values:
+ * - Off-token spacing (6px, 7px, 14px, 18px, 42px, 44px, 96px): Tree indentation and positioning not in token system
+ * - Border widths (1px): Standard borders
+ * - Percentages (50%, 100%): Layout and positioning
+ * - Font size (0.7em): Relative size for drag handle
+ * - Transition duration (0.15s): Animation timing
+ * - Calc expressions: Complex computed values for tree structure
+ */
+
 c8y-asset-property-list {
   .cdk-tree {
     background: inherit;
@@ -6,7 +21,7 @@ c8y-asset-property-list {
     overflow: hidden;
 
     &:has(.drag-handle-wrapper) {
-      padding-left: 8px;
+      padding-left: @size-8;
     }
   }
 
@@ -14,13 +29,13 @@ c8y-asset-property-list {
     .select-all-container {
       > .separator-bottom,
       > .overflow-hidden {
-        padding-left: 8px;
+        padding-left: @size-8;
       }
     }
   }
 
   .cdk-tree-node {
-    height: 40px;
+    height: @size-40;
     background: inherit;
 
     .drag-handle-wrapper {
@@ -46,14 +61,14 @@ c8y-asset-property-list {
     content: '';
     top: 0;
     left: -6px;
-    width: 20px;
+    width: @size-20;
     bottom: 0;
     display: block;
     border-left: 1px solid
       var(
         --c8y-component-icon-dark-color-light,
         var(--c8y-root-component-icon-dark-color-light, var(--brand-light, var(--c8y-brand-light)))
-      );
+);
     z-index: 1;
   }
 
@@ -66,8 +81,8 @@ c8y-asset-property-list {
       content: '';
       top: 50%;
       left: -6px;
-      width: 20px;
-      /* bottom: 0; */
+      width: @size-20;
+      /* bottom: 0,*/
       display: block;
       border-bottom: 1px solid
         var(
@@ -75,8 +90,8 @@ c8y-asset-property-list {
           var(
             --c8y-root-component-icon-dark-color-light,
             var(--brand-light, var(--c8y-brand-light))
-          )
-        );
+)
+);
       z-index: 1;
       position: absolute;
       pointer-events: none;
@@ -84,12 +99,12 @@ c8y-asset-property-list {
 
     &.nonSelectable {
       > .d-flex::after {
-        width: 40px;
+        width: @size-40;
       }
     }
 
     .drag-handle-wrapper {
-      left: -24px;
+      left: calc(-1 * @size-24);
     }
   }
 
@@ -101,7 +116,7 @@ c8y-asset-property-list {
       content: '';
       top: 0;
       left: 18px;
-      width: 20px;
+      width: @size-20;
       bottom: 0;
       display: block;
       border-left: 1px solid
@@ -110,8 +125,8 @@ c8y-asset-property-list {
           var(
             --c8y-root-component-icon-dark-color-light,
             var(--brand-light, var(--c8y-brand-light))
-          )
-        );
+)
+);
       z-index: 1;
     }
 
@@ -121,7 +136,7 @@ c8y-asset-property-list {
         content: '';
         top: 0;
         left: 42px;
-        width: 20px;
+        width: @size-20;
         bottom: 0;
         display: block;
         border-left: 1px solid
@@ -130,8 +145,8 @@ c8y-asset-property-list {
             var(
               --c8y-root-component-icon-dark-color-light,
               var(--brand-light, var(--c8y-brand-light))
-            )
-          );
+)
+);
         z-index: 1;
       }
     }
@@ -139,12 +154,12 @@ c8y-asset-property-list {
 
   .cdk-tree-node.nonCollapsible:not([aria-level='1']) {
     > .d-flex::before {
-      left: -5px;
+      left: calc(-1 * @size-5);
     }
 
     > .d-flex::after {
       width: 14px;
-      left: -5px;
+      left: calc(-1 * @size-5);
     }
 
     &.nonSelectable {
@@ -153,7 +168,7 @@ c8y-asset-property-list {
       }
 
       > .d-flex::after {
-        width: 10px;
+        width: @size-10;
         left: 0;
       }
     }
@@ -205,7 +220,7 @@ c8y-asset-property-list {
 
     &[aria-level='2'] {
       &::before {
-        left: 24px;
+        left: @size-24;
         z-index: 1;
       }
 
@@ -220,7 +235,7 @@ c8y-asset-property-list {
 
     &[aria-level='3'] {
       &::before {
-        left: 48px;
+        left: @size-48;
         z-index: 1;
       }
 
@@ -243,7 +258,7 @@ c8y-asset-property-list {
   .cdk-tree-node .c8y-list__item__radio {
     padding-top: 7px !important;
     padding-bottom: 7px !important;
-    max-height: 40px !important;
+    max-height: @size-40 !important;
     min-height: unset !important;
   }
 

package/styles/components/data-input/assets/_asset-table.less

@@ -1,3 +1,21 @@
+
+@import "../../../mixins/_color-mixins.less";
+@import "../../../mixins/_forms.less";
+
+/**
+ * Asset Table - Table component for asset properties
+ *
+ * Note: Uses @size-* tokens for spacing where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Off-token spacing (3px, 6px, 9px, 9.5px, 12px): Form control padding and positioning not in token system
+ * - Typography sizes (10px): Font size
+ * - Line-heights (1.1em, 23px, 34px): Text line heights
+ * - Percentages (50%): Positioning
+ * - Transition duration (0.2s): Animation timing
+ * - Darken percentages (0.03, 0.05): Color adjustments
+ */
+
 .property-label {
   padding: 0;
   border-color: transparent;
@@ -40,7 +58,7 @@ div .property.bg-info:nth-child(odd) {
 .spin-up,
 .spin-down {
   display: block;
-  height: 5px;
+  height: @size-5;
   color: @gray-80;
 }
 
@@ -51,7 +69,7 @@ div .property.bg-info:nth-child(odd) {
 // Removed unused icon class - verified 0 usages: .icon-sort-down
 
 .asset-table .btn-xs {
-  font-size: 10px;
+  font-size: @font-size-xs;
   line-height: 1.1em;
 }
 
@@ -68,7 +86,7 @@ div .property.bg-info:nth-child(odd) {
 }
 
 .asset-table .headers .column-name {
-  margin-right: 8px;
+  margin-right: @size-8;
   line-height: 1.1em;
   &:hover {
     color: var(--brand-primary, var(--c8y-brand-primary));

package/styles/components/data-input/assets/_c8y-asset-notes.less

@@ -1,3 +1,15 @@
+
+/**
+ * C8Y Asset Notes - Asset notes component
+ *
+ * Note: Uses @component-padding and @size-* tokens for spacing.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (200px): Flex basis
+ * - Typography size (62px): Icon font size
+ * - Percentages (100%): Layout
+ */
+
 c8y-asset-notes {
   position: relative;
   display: block;
@@ -5,7 +17,7 @@ c8y-asset-notes {
   height: 100%;
   .asset-notes-icon {
     align-self: flex-start;
-    margin-right: 10px;
+    margin-right: @size-10;
     font-size: 62px;
   }
   .asset-notes-content {

package/styles/components/data-input/assets/_c8y-asset-selector-miller.less

@@ -1,3 +1,22 @@
+
+@import "../../../mixins/_c8y-scrollbar.less";
+
+/**
+ * C8Y Asset Selector Miller - Miller column view for asset selection
+ *
+ * Note: Uses @size-* tokens and @size-base for spacing and dimensions.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (200px, 312px): Column widths and heights
+ * - Off-token spacing (30px): Width calculation
+ * - CSS custom property (--c8y-root-component-padding: 8): Unitless value for calculations
+ * - Percentages (33.333%, 100%): Layout and flex values
+ * - Border widths (1px, 2px): Standard borders and outlines
+ * - Negative offsets (-2px): Fine-tuning
+ * - Z-index values (10, 20): Stacking order
+ * - Box-shadow values: Border effects
+ */
+
 c8y-asset-selector-miller {
   display: block;
   position: relative;
@@ -40,7 +59,7 @@ c8y-asset-selector-miller {
 
   &__header {
     background-color: @component-background-default;
-    padding: @margin-base;
+    padding: @size-base;
     box-shadow: inset 0 -1px 0 @component-border-color;
     &.sticky-top {
       z-index: 20;
@@ -55,15 +74,15 @@ c8y-asset-selector-miller {
   &__selection{
     width: 100%;
     top:0;
-    min-height: 40px!important;
-   
+    min-height: @size-40!important;
+
   }
   &__search{
     align-items: flex-start;
     flex-wrap: wrap;
-    min-height: 48px!important;
+    min-height: @size-48!important;
     &.miller-column__show-selected{
-      min-height: 72px!important;
+      min-height: @size-72!important;
     }
   }
 
@@ -72,7 +91,7 @@ c8y-asset-selector-miller {
     background-color: @component-background-default;
     display: flex;
     align-items: center;
-    min-height: calc(@margin-base * 4);
+    min-height: calc(@size-base * 4);
 
     &:hover:not(.miller-column__item--more) {
       box-shadow: inset 2px 0 0 0 @component-color-focus;
@@ -103,11 +122,11 @@ c8y-asset-selector-miller {
     }
 
     &__checkbox {
-      padding-left: 4px;
+      padding-left: @size-4;
 
       + .miller-column__item__btn {
         width: calc(100% - 30px);
-        padding-left: 4px;
+        padding-left: @size-4;
       }
     }
   }