@c8y/style 1023.37.0 → 1023.42.1

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 {