@c8y/style 1023.14.76 → 1023.14.94

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 {

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

@@ -1,9 +1,26 @@
+
+@import "../../mixins/_shadows-helper.less";
+@import "../../mixins/_vendor-prefixes.less";
+
+
+/**
+ * c8y user roles - 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
+ */
 .user-dot {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   flex: 0 0 30px;
-  margin-right: 10px;
+  margin-right: @size-10;
   width: 30px;
   height: 30px;
   border-radius: 50%;
@@ -11,15 +28,15 @@
   vertical-align: middle;
   text-align: center;
   text-transform: capitalize;
-  font-size: 16px;
+  font-size: @size-16;
   line-height: 1;
   background-color: var(--brand-60, var(--c8y-brand-60));
   .owned &,
   .list-group-item & {
     width: 30px;
     height: 30px;
-    font-size: 16px;
-    line-height: 32px;
+    font-size: @size-16;
+    line-height: @size-32;
   }
   &.user-disabled {
     background-color: @gray-80;
@@ -29,8 +46,8 @@
 .user-list-row {
   display: flex;
   flex-flow: row wrap;
-  margin-top: calc(@margin-base * 2);
-  padding: @margin-16;
+  margin-top: calc(@size-base * 2);
+  padding: @size-16;
   border-radius: @component-border-radius-base;
   background-color: @component-background-default;
 
@@ -52,7 +69,7 @@
   &.user-list-header {
     display: none;
     padding: 0;
-    min-height: 24px;
+    min-height: @size-24;
     background-color: transparent;
   }
   .col-expand {
@@ -77,12 +94,12 @@
   }
   .col-selector {
     display: none;
-    font-size: 20px;
+    font-size: @size-20;
   }
   .col-globalroles {
     order: 10;
-    margin: @margin-base 0;
-    padding: @margin-4 0;
+    margin: @size-base 0;
+    padding: @size-4 0;
     width: 100%;
     .c8y-child-assets-selector .dropdown-menu.multiselect-container {
       max-width: 100%;
@@ -98,7 +115,7 @@
     align-items: center;
     flex-flow: row nowrap;
     order: 1;
-    margin-bottom: 10px;
+    margin-bottom: @size-10;
     @media (max-width: @screen-md-min) {
       width: calc(~'100% - 24px') !important;
     }
@@ -108,7 +125,7 @@
   }
   .col-actions {
     order: 2;
-    margin: calc(@margin-16 * -1) calc(@margin-16 * -1) 0 0;
+    margin: calc(@size-16 * -1) calc(@size-16 * -1) 0 0;
     margin-left: auto;
   }
   .col-fullname {
@@ -119,7 +136,7 @@
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.1);
   }
   .disabled {
-    padding-right: 5px;
+    padding-right: @size-5;
     color: @state-danger-text;
     font-style: italic;
   }
@@ -128,20 +145,20 @@
 @media (min-width: @screen-md-min) {
   .user-list-row.user-list-header {
     display: flex;
-    padding-right: 40px;
+    padding-right: @size-40;
     box-shadow: none;
   }
   .user-list-row {
     position: relative;
     align-items: center;
     flex-flow: row wrap;
-    margin-top: @margin-base;
-    padding: 6px 40px 10px 0;
-    min-height: calc(@margin-base * 7);
+    margin-top: @size-base;
+    padding: 6px @size-40 @size-10 0;
+    min-height: calc(@size-base * 7);
     &.page-sticky-header {
       padding-top: 0;
       padding-bottom: 0;
-      min-height: calc(@margin-base * 6);
+      min-height: calc(@size-base * 6);
     }
 
     .col-expand {
@@ -162,7 +179,7 @@
     .col-username {
       flex: 0 0 auto;
       margin: 0;
-      padding-right: 10px;
+      padding-right: @size-10;
       width: 250px;
       .h4 {
         font-size: 100%;
@@ -177,7 +194,7 @@
       flex: 0 0 auto;
       order: 5;
       margin: 0;
-      padding-right: 10px;
+      padding-right: @size-10;
       width: 230px;
     }
     .col-globalroles {
@@ -204,15 +221,15 @@
     }
     .col-actions {
       position: absolute;
-      top: @margin-4;
+      top: @size-4;
       right: 0;
       flex: 0 0 40px;
       order: 100;
       margin: 0 0 0 auto;
-      width: 40px;
+      width: @size-40;
     }
     &.owns {
-      margin-bottom: calc(@margin-base * 2);
+      margin-bottom: calc(@size-base * 2);
       .tip {
         position: relative;
         flex: 0 0 100%;
@@ -225,13 +242,13 @@
         right: -35px;
         left: 5px;
         z-index: -1;
-        height: 10px;
+        height: @size-10;
         background-color: @component-background-default;
         box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.1);
         content: '';
       }
       + .owned {
-        margin-top: calc(@margin-base * -2);
+        margin-top: calc(@size-base * -2);
         box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.1);
       }
     }
@@ -244,8 +261,8 @@
 .list-group-item.user {
   .col-expand {
     display: inline-block;
-    padding-right: 5px;
-    width: 20px;
+    padding-right: @size-5;
+    width: @size-20;
     text-align: center;
     [class^='dlt-c8y-icon-'],
     [class*=' dlt-c8y-icon-'] {
@@ -260,7 +277,7 @@
   .selection-icon {
     display: none;
     margin-left: auto;
-    font-size: 20px;
+    font-size: @size-20;
   }
   input[type='checkbox'] {
     width: 0;

package/styles/components/{specialized → navigation-and-layout}/_device-software-tab.less

@@ -1,3 +1,17 @@
+
+
+/**
+ * device software 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-software-device-tab {
   .split-view {
     @media (min-width: @screen-md-min) {

package/styles/components/navigation-and-layout/action-bars/_app-switcher.less

@@ -1,3 +1,25 @@
+
+/**
+ * App Switcher - Application switcher dropdown component
+ *
+ * Note: Uses @size-* tokens for spacing throughout.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (320px, 340px): Dropdown menu widths
+ * - Off-token spacing (6px): Icon margin-bottom not in token system
+ * - Negative positioning (-72px, -160px, -255px): Dropdown centering offsets
+ * - Typography sizes (12px, 36px): Font sizes for labels and icons
+ * - Percentages (30%, 33.3333%, 50%, 95vh): Layout and flex values
+ * - Border widths (1px, 2px): Standard borders and outlines
+ * - Border radius (2px): Standard border radius
+ * - Negative offsets (-2px): Fine-tuning
+ * - Line-height (1.2): Unitless ratio
+ * - Transition duration (0.25s): Animation timing
+ * - Box-shadow values: Inset border effects
+ * - RGBA values: Transparency
+ * - Calc expressions: Complex computed values
+ */
+
 .app-switcher-dropdown {
   position: static;
   
@@ -18,13 +40,13 @@
   display: flex;
   flex-flow: row wrap;
   margin: 0;
-  padding: @margin-8;
+  padding: @size-8;
   background-color: @component-background-default;
   cursor: pointer;
   .appLink {
     flex: 0 1 33.3333%;
-    margin: @margin-4 0;
-    padding: calc(@margin-8 + @margin-4) @margin-8 @margin-8;
+    margin: @size-4 0;
+    padding: calc(@size-8 + @size-4) @size-8 @size-8;
     min-width: 30%;
     border: 1px solid transparent;
     border-radius: 2px;
@@ -64,7 +86,7 @@
 }
 
 .app-switcher-sagcloud {
-  box-shadow: inset 0 -1px 0 fade(@black, 5%);
+  box-shadow: inset 0 -1px 0 rgba(@black, (5 / 100));
 }
 
 .dropdown-menu.app-switcher-dropdown-menu {
@@ -75,7 +97,7 @@
   max-height: calc(~'95vh - @{header-bar-height}');
   width: 320px;
 
-  @media (min-width: 560px) and(max-width:@screen-sm-min) {
+  @media (min-width: 560px) and (max-width: @screen-sm-min) {
     margin-left: -72px !important;
     width: 340px;
   }