@c8y/style 1023.37.0 → 1023.43.2

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;

package/styles/components/{specialized → forms}/_c8y-schema-form.less

@@ -1,7 +1,26 @@
+
+
+/**
+ * c8y schema form - 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-schema-form.widget {
-  padding-top: @margin-16;
+  padding-top: @size-16;
+
+  // Inline list-group base styles (mixin doesn't exist)
+  position: relative;
+  margin-bottom: @size-16;
+  padding-left: 0;
+  box-shadow: inset 0 1px 0 @component-border-color;
 
-  .list-group();
   bootstrap-decorator,
   sf-decorator {
     display: block;
@@ -9,12 +28,12 @@ c8y-schema-form.widget {
     .form-group,
     .legend,
     .help-block {
-      padding-right: @margin-16;
-      padding-left: @margin-16;
+      padding-right: @size-16;
+      padding-left: @size-16;
     }
     .form-group {
       margin-bottom: -1px;
-      padding: 3px @margin-16 20px;
+      padding: 3px @size-16 @size-20;
 
       .form-control[disabled],
       .form-control[readonly],
@@ -24,11 +43,19 @@ c8y-schema-form.widget {
     }
   }
   bootstrap-decorator + ng-form {
+    // Inline list-group-item base styles (mixin doesn't exist)
+    position: relative;
     display: block;
-    margin-bottom: 0; //.list-group-item();
+    margin-bottom: 0;
+    padding: @size-base @component-padding;
+    min-height: calc(@size-base * 5);
+    width: 100%;
+    border: 0;
+    box-shadow: inset 0 -1px 0 @component-border-color;
+
     > .form-group {
       margin-bottom: 0;
-      padding: 3px @margin-16 20px;
+      padding: 3px @size-16 @size-20;
       .form-control[disabled],
       .form-control[readonly],
       fieldset[disabled] .form-control {
@@ -38,8 +65,8 @@ c8y-schema-form.widget {
   }
   bootstrap-decorator {
     .legend {
-      margin-top: 20px;
-      margin-bottom: 8px;
+      margin-top: @size-20;
+      margin-bottom: @size-8;
     }
   }
   sf-decorator {
@@ -67,10 +94,10 @@ c8y-schema-form.widget {
       display: flex;
       align-items: center;
       flex-flow: row wrap;
-      padding: 3px @margin-16;
+      padding: 3px @size-16;
       label {
         flex: 1 0 30%;
-        margin: 0 @margin-8 0 0;
+        margin: 0 @size-8 0 0;
         line-height: 1.3;
         align-self: flex-start;
       }
@@ -106,7 +133,7 @@ c8y-schema-form.widget {
         .form-group.uib-time {
           padding: 0;
           .form-control {
-            width: 20px;
+            width: @size-20;
             cursor: not-allowed;
             pointer-events: none;
           }
@@ -114,10 +141,10 @@ c8y-schema-form.widget {
       }
     }
     .schema-form-checkbox {
-      padding: 0 0 16px 16px !important;
+      padding: 0 0 @size-16 16px !important;
     }
     .schema-form-textarea {
-      padding: 16px;
+      padding: @size-16;
     }
     .c8y-schema-form-empty {
       display: none;
@@ -127,7 +154,7 @@ c8y-schema-form.widget {
     padding-bottom: 0;
     border-bottom: 0;
     & .schema-form-checkbox {
-      padding: 0 0 16px 16px !important;
+      padding: 0 0 @size-16 16px !important;
     }
   }
 }
@@ -142,7 +169,7 @@ c8y-schema-form.generic-ui {
   .c8y-checkbox {
     display: flex;
     input + span {
-      margin-right: @margin-base;
+      margin-right: @size-base;
     }
   }
 
@@ -173,5 +200,5 @@ c8y-schema-form.generic-ui {
 }
 
 .schema-form-checkbox {
-  padding-bottom: @margin-base;
+  padding-bottom: @size-base;
 }

package/styles/components/{specialized → forms}/_c8y-schema-form.scss

@@ -16,8 +16,12 @@
 c8y-schema-form.widget {
   padding-top: $size-16;
 
-  // Note: list-group() mixin doesn't exist, removed during LESS to SCSS migration
-  // @include list-group();
+  // Inline list-group base styles (mixin doesn't exist)
+  position: relative;
+  margin-bottom: $size-16;
+  padding-left: 0;
+  box-shadow: inset 0 1px 0 $component-border-color;
+
   bootstrap-decorator,
   sf-decorator {
     display: block;
@@ -40,8 +44,16 @@ c8y-schema-form.widget {
     }
   }
   bootstrap-decorator + ng-form {
+    // Inline list-group-item base styles (mixin doesn't exist)
+    position: relative;
     display: block;
-    margin-bottom: 0; //.list-group-item();
+    margin-bottom: 0;
+    padding: $size-base $component-padding;
+    min-height: calc($size-base * 5);
+    width: 100%;
+    border: 0;
+    box-shadow: inset 0 -1px 0 $component-border-color;
+
     > .form-group {
       margin-bottom: 0;
       padding: 3px $size-16 $size-20;

package/styles/components/{specialized → navigation-and-layout}/_c8y-role-card.less

@@ -1,11 +1,27 @@
+
+@import "../../mixins/_vendor-prefixes.less";
+
+
+/**
+ * c8y role card - 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
+ */
 .role-card {
   position: relative;
-  padding-bottom: 40px;
+  padding-bottom: @size-40;
 
   .transition(all 0.25s ease-in-out);
   &:hover {
     z-index: 1;
-    box-shadow: 0 20px 15px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 @size-20 15px rgba(0, 0, 0, 0.1);
     transform: scale(1.05);
   }
   h4 {
@@ -25,7 +41,7 @@
   position: relative;
   margin-right: 80px;
   margin-bottom: 1px;
-  padding: 10px @component-padding;
+  padding: @size-10 @component-padding;
   min-height: 54px;
   background-color: @component-background-default;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
@@ -41,10 +57,10 @@
   // Removed unused button selectors - verified 0 usages: .btn-add, .btn-remove
   @media (min-width: @grid-float-breakpoint) {
     .form-group + .form-group {
-      margin-left: 10px;
+      margin-left: @size-10;
     }
     .add-remove-btns {
-      top: 10px;
+      top: @size-10;
       display: flex;
     }
   }

package/styles/components/{specialized → navigation-and-layout}/_c8y-scrollbar.less

@@ -1,3 +1,19 @@
+
+@import "../../mixins/_c8y-scrollbar.less";
+
+
+/**
+ * c8y scrolluar - 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
+ */
 .navigatorContent,
 .c8y-right-drawer {
   &::-webkit-scrollbar {
@@ -54,11 +70,12 @@
 
 /* fix for firefox position sticky bottom 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() {
-    .ff-scroll-fix {
-      padding-bottom: 64px !important;
-    }
-  }
-}
+// @media (min-width: @screen-md-min) {
+//   @-moz-document url-prefix() {
+//     .ff-scroll-fix {
+//       padding-bottom: 64px !important;
+//     }
+//   }
+// }

package/styles/components/{specialized → navigation-and-layout}/_c8y-smart-rest-tab.less

@@ -1,16 +1,31 @@
+
+@import "../../mixins/_vendor-prefixes.less";
+
+
+/**
+ * c8y smart rest tab - 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-smart-rest-tab {
   -webkit-box-flex: 1;
   -ms-flex: 1 1 100%;
   flex: 1 1 100%;
-  padding: 20px;
+  padding: @size-20;
   background-color: @component-background-default;
-
-  .box-shadow(0 1px 1px fade(@black, 10%));
+  box-shadow: 0 1px 1px rgba(@black, 0.1);
   .transition(all 0.25s ease-in-out);
   .row {
     display: block;
-    margin-right: -5px;
-    margin-left: -5px;
+    margin-right: calc(-1 * @size-5);
+    margin-left: calc(-1 * @size-5);
     > [class^='col-xs-'],
     > [class*=' col-xs'],
     > [class^='col-sm-'],
@@ -19,7 +34,7 @@
     > [class*=' col-md'],
     > [class^='col-lg-'],
     > [class*=' col-lg'] {
-      padding-right: 5px;
+      padding-right: @size-5;
       padding-left: 5px;
     }
   }

package/styles/components/{specialized → navigation-and-layout}/_c8y-stepper.less

@@ -1,9 +1,23 @@
+
+
+/**
+ * c8y stepper - 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-stepper {
   position: relative;
   display: flex;
   margin-top: 0;
   margin-bottom: 0;
-  padding: @margin-base;
+  padding: @size-base;
   list-style: none;
 
   &:before {