@c8y/style 1023.14.76 → 1023.14.94

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;
       }
     }
   }

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

@@ -1,3 +1,20 @@
+
+@import "../../../mixins/_c8y-scrollbar.less";
+
+/**
+ * C8Y Asset Selector - Tree-based asset selector component
+ *
+ * Note: Uses @size-* tokens; @size-base for calculations, and @form-control-* variables.
+ *
+ * Intentionally hardcoded values:
+ * - Off-token spacing (6px, 22px): Tree indentation and positioning not in token system
+ * - Border widths (1px, 2px): Standard borders and outlines
+ * - Negative offsets (-2px): Fine-tuning
+ * - Percentages (100%): Layout
+ * - Transform rotation (90deg): Icon rotation
+ * - Z-index values (1, 10): Stacking order
+ */
+
 c8y-asset-selector{
   .c8y-scrollbar();
   overflow-y: auto;
@@ -7,12 +24,12 @@ c8y-asset-selector{
 
 .collapse .c8y-asset-selector__item {
   position: relative;
-  padding-left: 8px;
+  padding-left: @size-8;
   &::after {
     position: absolute;
-    top: 32px;
+    top: @size-32;
     left: 22px;
-    bottom: 32px;
+    bottom: @size-32;
     display: block;
     border-left: 1px solid @component-icon-dark-color-light;
     content: '';
@@ -24,10 +41,10 @@ c8y-asset-selector{
       border-bottom: 1px solid @component-icon-dark-color-light;
       border-top: 0;
       content: "";
-      height: 16px;
+      height: @size-16;
       position: absolute;
-      transform: translate(-10px,0);
-      width: 24px;
+      transform: translate(calc(-1 * @size-10), 0);
+      width: @size-24;
       z-index: 1;
     }
   }
@@ -43,12 +60,12 @@ c8y-asset-selector{
   }
   .btn.btn-default::before {
     position: absolute;
-    top: -16px;
-    left: -4px;
+    top: calc(-1 * @size-16);
+    left: calc(-1 * @size-4);
     z-index: 10;
     display: block;
-    width: 5px;
-    height: 32px;
+    width: @size-5;
+    height: @size-32;
     background: @component-background-default;
     content: '';
   }
@@ -57,11 +74,11 @@ c8y-asset-selector{
 .c8y-asset-selector {
   &__node {
     display: flex;
-    max-height: 32px;
+    max-height: @size-32;
     min-width:fit-content;
     .collapse-btn {
-      height: 32px;
-      width: 32px;
+      height: @size-32;
+      width: @size-32;
       opacity: 1;
       
       &:focus {
@@ -70,7 +87,7 @@ c8y-asset-selector{
       }
     }
     &__btn-spacer{
-      width: 32px;
+      width: @size-32;
       z-index: 1;
     }
 
@@ -95,7 +112,7 @@ c8y-asset-selector{
     align-items: center;
     flex-grow: 1;
     margin-bottom: 0;
-    padding: 6px 8px;
+    padding: 6px @size-8;
     max-width: 100%;
     border: 0;
     background-color: transparent;

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

@@ -1,10 +1,30 @@
+
+@import "../../../icons/_c8y-glyphs.less";
+@import "../../../mixins/_c8y-scrollbar.less";
+@import "../../../mixins/_forms.less";
+@import "../../../mixins/_icon-base.less";
+
+/**
+ * C8Y Child Assets Selector - Multi-select dropdown for child assets
+ *
+ * Note: Uses @size-* tokens; @form-control-* variables for styling.
+ *
+ * Intentionally hardcoded values:
+ * - Off-token spacing (5px, 12px, 30px): Padding and margins not in token system
+ * - Component-specific dimensions (240px, 278px): Dropdown dimensions
+ * - Typography sizes (12px, 18px): Font sizes
+ * - Percentages (50%, 100%): Layout and positioning
+ * - Transition duration (0.15s): Animation timing
+ * - Opacity values: Visual states
+ */
+
 c8y-item-selector {
   display: block;
   @media (min-width: @screen-xs-max) {
     .c8y-list__item & {
       &.form-group-sm {
-        margin-top: -4px;
-        margin-bottom: -4px;
+        margin-top: calc(-1 * @size-4);
+        margin-bottom: calc(-1 * @size-4);
       }
     }
   }
@@ -22,11 +42,72 @@ c8y-item-selector {
     background-image: none;
     text-align: left;
 
-    .form-control();
+    // Form control base styles (from .form-control in forms.less)
+    padding: @form-control-padding-base-vertical @form-control-padding-base-horizontal;
+    width: 100%;
+    height: @form-control-height-base;
+    border: 0;
+    border-radius: @form-control-border-radius;
+    background-color: @form-control-background-default;
+    box-shadow: inset 0 0 0 @form-control-border-width @form-control-border-color-default;
+    color: @form-control-color-default;
+    font-weight: @form-control-font-weight;
+    font-size: @font-size-base;
+    font-family: @form-control-font-family;
+    line-height: @form-control-line-height;
+    transition:
+      border-color 0.15s ease-in-out,
+      box-shadow 0.15s ease-in-out;
+
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     .form-control-focus();
+
+    // Placeholder styles
+    &::-moz-placeholder {
+      color: @form-control-placeholder-color;
+      opacity: 1;
+      font-style: @form-control-placeholder-font-style;
+    }
+    &:-ms-input-placeholder {
+      color: @form-control-placeholder-color;
+      font-style: @form-control-placeholder-font-style;
+    }
+    &::-webkit-input-placeholder {
+      color: @form-control-placeholder-color;
+      font-style: @form-control-placeholder-font-style;
+    }
+
+    // States
+    &:has(.c8y-colorpicker) {
+      width: auto;
+    }
+    &[disabled],
+    fieldset[disabled] & {
+      opacity: @form-control-disabled-opacity;
+    }
+    &[readonly],
+    &[readonly]:focus {
+      background-color: @form-control-background-default;
+      color: @text-muted;
+      opacity: 1;
+    }
+    &[disabled],
+    fieldset[disabled] & {
+      cursor: @cursor-disabled;
+    }
+    textarea & {
+      height: auto;
+    }
+
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+    }
+    .btn {
+      border-radius: @form-control-border-radius;
+    }
+
     &[aria-expanded='true'] {
       border-color: @component-color-focus;
     }
@@ -37,7 +118,7 @@ c8y-item-selector {
       right: 5px;
       color: @component-brand-primary;
       content: @c8y-glyph-caret;
-      font-size: 18px;
+      font-size: @font-size-h4;
       transform: translate(0, -50%);
       pointer-events: none;
 
@@ -79,15 +160,15 @@ c8y-item-selector {
   }
   .multiselect-item {
     display: flex;
-    padding: 8px 12px;
-    border-bottom: 1px solid var(--c8y-dropdown-border-color, @component-border-color);
-    background-color: var(--c8y-dropdown-background-default, @component-background-default);
+    padding: @size-8 12px;
+    border-bottom: 1px solid var(--c8y-dropdown-border-color; @component-border-color);
+    background-color: var(--c8y-dropdown-background-default; @component-background-default);
     label.c8y-checkbox.input-sm {
       flex-grow: 1;
       margin-right: 30px;
       height: auto;
-      font-size: 12px;
-      line-height: 20px;
+      font-size: @font-size-small;
+      line-height: @size-20;
       padding: 0;
       align-items: center;
       display: flex;