@c8y/style 1023.37.0 → 1023.43.2

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

package/styles/components/navigation-and-layout/action-bars/_c8y-action-bar.less

@@ -1,9 +1,33 @@
+
+@import "../../../mixins/_shadows-helper.less";
+@import "../../../mixins/_vendor-prefixes.less";
+
+/**
+ * C8Y Action Bar - Fixed action bar/toolbar component
+ *
+ * Note: Uses @size-* tokens for spacing; @size-base for calculations, and @grid-gutter-width.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (140px, 280px, 330px, 400px): Input and dropdown widths
+ * - Off-token spacing (3px, 7px, 15px, 28px): Legacy padding not in token system
+ * - Negative positioning (-2px): Fine-tuning
+ * - Clip rect values (10000px, 2000px): Large clipping dimensions
+ * - Typography size (1.2em): Relative font size
+ * - Percentages (50%, 100%): Layout and positioning
+ * - Border widths (1px, 2px): Standard borders and outlines
+ * - Negative offsets (-2px): Fine-tuning
+ * - Transition durations (0.35s, 0.5s): Animation timing
+ * - Calc expressions: Complex computed values with @headerHeight
+ * - Box-shadow values: Elevation effects
+ * - Opacity values: Visual effects
+ */
+
 .c8y-ui-action-bar {
-  min-height: calc(@margin-base * 6);
+  min-height: @size-48;
   background-color: @action-bar-background-default;
   color: @action-bar-color-default;
   position: fixed;
-  top: -4px;
+  top: calc(-1 * @size-4);
   right: 0;
   left: 0;
   margin: 0;
@@ -23,7 +47,7 @@
       transition: top 0.35s ease;
 
       .head-open & {
-        top: calc(@headerHeight * 2 + 12px);
+        top: calc(@headerHeight * 2 + (@size-base * 1.5));
       }
     }
   }
@@ -45,7 +69,7 @@
     }
 
     &.horizontal-tabs.has-tabs {
-      top: calc(@headerHeight * 2 - @margin-16);
+      top: calc(@headerHeight * 2 - @size-16);
     }
   }
 }
@@ -54,7 +78,7 @@ body:not(:has(.app-main-header)) {
   .c8y-ui-action-bar {
     top: 0;
     &.has-tabs {
-      top: 48px;
+      top: @size-48;
     }
     @media (max-width: @screen-xs-max) {
       &.has-tabs {
@@ -90,7 +114,7 @@ body:not(:has(.app-main-header)) {
     transition: max-height 0.35s ease;
 
     @media (min-width: @screen-sm-min) {
-      min-height: calc(@margin-base * 6);
+      min-height: calc(@size-base * 6);
       overflow: visible !important;
       display: flex;
 
@@ -137,13 +161,17 @@ body:not(:has(.app-main-header)) {
   // menu bar
   .navbar-nav {
     > .dropdown {
-      margin-top: 5px;
+      margin-top: @size-5;
       vertical-align: top;
     }
 
     .dropdown-menu {
       > li > * {
-        .text-truncate();
+        display: block;
+    overflow: hidden !important;
+    max-width: 100% !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
       }
     }
 
@@ -151,12 +179,12 @@ body:not(:has(.app-main-header)) {
     > .btn-group {
       display: block;
       margin: 0;
-      padding: 3px @margin-16;
+      padding: 3px @size-16;
 
       @media (min-width: @screen-sm-min) {
         display: flex;
         margin: 0;
-        padding: 7px @margin-8;
+        padding: 7px @size-8;
 
         &:first-child {
           padding-left: 0;
@@ -187,7 +215,7 @@ body:not(:has(.app-main-header)) {
           top: 50%;
           right: 0;
           width: 1px;
-          height: 20px;
+          height: @size-20;
           content: '';
 
           .translate(0, -50%);
@@ -202,20 +230,20 @@ body:not(:has(.app-main-header)) {
 
       .btn-help {
         font-size: 1.2em;
-        margin: 12px 0;
+        margin: calc(@size-base * 1.5) 0;
       }
 
       > a,
       .btn-link,
       .c8y-dropdown {
-        padding: calc(@margin-16 - 2px) @margin-base;
+        padding: calc(@size-16 - 2px) @size-base;
         color: @action-bar-color-actions;
         opacity: 1;
         transition: @btn-transition;
 
         @media (max-width: @screen-xs-max) {
           display: block;
-          padding: @margin-base @margin-16;
+          padding: @size-base @size-16;
           width: 100%;
           max-width: 100%;
           text-align: left;
@@ -262,7 +290,7 @@ body:not(:has(.app-main-header)) {
       }
 
       > .navbar-info {
-        padding: 15px 10px;
+        padding: 15px @size-10;
       }
 
       @media (max-width: @screen-xs-max) {
@@ -284,7 +312,7 @@ body:not(:has(.app-main-header)) {
 
             li {
               button:not(.btn) {
-                padding: 8px 16px;
+                padding: @size-8 @size-16;
               }
             }
           }
@@ -310,7 +338,7 @@ body:not(:has(.app-main-header)) {
       > li.navbar-form {
         display: block;
         margin-top: 0;
-        padding: 2px @margin-16;
+        padding: 2px @size-16;
 
         > .c8y-select-wrapper {
           width: 100%;
@@ -326,14 +354,14 @@ body:not(:has(.app-main-header)) {
 
   // forms in toolbar
   .navbar-form {
-    margin-top: 8px;
+    margin-top: @size-8;
 
     > .btn + .btn {
       margin-left: 0;
     }
 
     @media (min-width: @screen-sm-min) {
-      min-height: calc(@margin-base * 6);
+      min-height: @size-48;
       // min-width: 300px;
       .datepicker > input {
         width: 140px;
@@ -344,7 +372,7 @@ body:not(:has(.app-main-header)) {
     label:not(.c8y-switch) {
       display: inline-block;
       align-self: center;
-      margin-right: @margin-4;
+      margin-right: @size-4;
       margin-bottom: 0;
       color: @action-bar-color-text-muted;
       vertical-align: middle;
@@ -359,7 +387,7 @@ body:not(:has(.app-main-header)) {
 
       .form-group:not(.datepicker) {
         display: block;
-        padding: 5px 0;
+        padding: @size-5 0;
       }
 
       .datepicker > input {

package/styles/components/navigation-and-layout/cards/_card-dashboard.less

@@ -1,9 +1,30 @@
+
+@import "../../../mixins/_vendor-prefixes.less";
+
+/**
+ * Card Dashboard - Dashboard card component with widget containers
+ *
+ * Note: Uses @size-* tokens; @size-base; @component-padding, and @form-control-height-base.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (125px, 174px): Fixed header heights for specific layouts
+ * - Percentages (100%): Layout and positioning
+ * - Z-index values (9, 11): Stacking order
+ * - Opacity values (0, 1): Visual states
+ * - Calc expressions: Complex computed values with string.unquote for dynamic heights
+ */
+
 .card.card-dashboard {
   fill: @component-color-default;
 
   .card-title,
   .card-title span {
-    .text-truncate();
+    // Inline .text-truncate styles (mixin not available in SCSS)
+    display: block;
+    overflow: hidden !important;
+    max-width: 100% !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
     color: var(--c8y-component-color-default, var(--c8y-root-component-color-default));
     pointer-events: none;
   }
@@ -21,7 +42,7 @@
   >.card-inner-scroll {
     position: relative;
     z-index: 9;
-    height: calc(~'100% - @{margin-48}');
+    height: calc(~'100% - @{size-48}');
     color: @component-color-default;
     container-type: size;
 
@@ -64,7 +85,7 @@
     }
 
     &.datepicker {
-      padding-top: 5px;
+      padding-top: @size-5;
 
       +.card-inner-scroll {
         height: calc(~'100% - 174px');
@@ -139,7 +160,7 @@
 }
 
 .grid-stack-item .card+.ui-resizable-handle {
-  margin-bottom: calc(@margin-base * -1);
+  margin-bottom: calc(@size-base * -1);
 }
 
 .grid-stack>.grid-stack-item>.grid-stack-item-content {

package/styles/components/navigation-and-layout/cards/_card-flip.less

@@ -1,3 +1,18 @@
+
+/**
+ * Card Flip - Flip animation container for cards
+ *
+ * Note: Uses @component-background-default for backgrounds.
+ *
+ * Intentionally hardcoded values:
+ * - Transition durations (0.6s): Animation timing for flip effect
+ * - Transform values (180deg, -180deg, 800px): 3D perspective and rotation angles
+ * - Percentages (100%): Layout
+ * - Z-index values (1, 3): Stacking order
+ * - Box-shadow values: Shadow effects for 3D appearance
+ * - RGBA values: Transparency in shadows
+ */
+
 .card-flip-container {
   display: flex;
   width: 100%;
@@ -35,7 +50,7 @@
       perspective: 800px;
       .card-front,
       .card-back {
-        box-shadow: 0 2px 4px 1px fade(@black, 10%);
+        box-shadow: 0 2px 4px 1px rgba(@black, (10 / 100));
 
         transform-style: preserve-3d;
         .card-inner-scroll {
@@ -53,22 +68,34 @@
 }
 
 .interact-grid .card-flip-container {
-  > .card-flip.flipped {
-    .card-front {
-      position: relative;
-      transform: rotateY(-180deg);
+  > .card-flip {
+    perspective: 800px;
+
+    .card-front,
+    .card-back {
+      transform-style: preserve-3d;
     }
+
     .card-back {
       display: block;
-      transform: rotateY(0);
-      [class^='col-sm-'],
-      [class*=' col-sm'],
-      [class^='col-md-'],
-      [class*=' col-md'],
-      [class^='col-lg-'],
-      [class*=' col-lg'] {
-        float: none;
-        width: 100%;
+    }
+
+    &.flipped {
+      .card-front {
+        position: relative;
+        transform: rotateY(-180deg);
+      }
+      .card-back {
+        transform: rotateY(0);
+        [class^='col-sm-'],
+        [class*=' col-sm'],
+        [class^='col-md-'],
+        [class*=' col-md'],
+        [class^='col-lg-'],
+        [class*=' col-lg'] {
+          float: none;
+          width: 100%;
+        }
       }
     }
   }

package/styles/components/navigation-and-layout/cards/_card-grid.less

@@ -1,3 +1,19 @@
+
+@import "../../../mixins/_shadows-helper.less";
+
+/**
+ * Card Grid - Grid layout card variant
+ *
+ * Note: Uses @size-* tokens; @component-padding, and component color variables.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (118px, 150px, 165px): Layout-specific heights for fullpage mode
+ * - Percentages (100%, 100vh): Layout
+ * - Z-index values (15, 90): Stacking order for sticky elements
+ * - Negative offsets (-1px): Fine-tuning for shadow borders
+ * - Calc expressions: Complex computed values with string.unquote
+ */
+
 .card--grid,
 .card.card--grid {
   display: grid;
@@ -6,7 +22,7 @@
     z-index: 90;
     background-color: inherit;
 
-    .shadow-border(-1px, @component-border-color);
+    .shadow-border(-1px; @component-border-color);
   }
 
   .c8y-list__item__collapse--container {
@@ -17,7 +33,7 @@
     .c8y-list__item__block.sticky-top {
       background-color: @component-background-active !important;
 
-      .shadow-border(-1px, @component-border-color);
+      .shadow-border(-1px; @component-border-color);
     }
 
     .c8y-list__item__collapse--container {
@@ -27,11 +43,11 @@
 }
 
 .card--grid__separator-top--white {
-  border-top: 4px solid @component-background-default;
+  border-top: @size-4 solid @component-background-default;
 }
 
 .card--grid__separator-top {
-  border-top: 4px solid @component-border-color;
+  border-top: @size-4 solid @component-border-color;
 }
 
 .card--grid--fullpage {