@c8y/style 1023.37.0 → 1023.43.2

package/styles/components/navigation-and-layout/navigation/_c8y-nav-stacked.less

@@ -1,3 +1,20 @@
+
+@import "../../../mixins/_tab-focus.less";
+@import "../../../mixins/_vendor-prefixes.less";
+
+/**
+ * C8Y Nav Stacked - Stacked navigation list component
+ *
+ * Note: Uses @size-* tokens for spacing; @size-base for calculations, and component color variables.
+ *
+ * Intentionally hardcoded values:
+ * - Border widths (1px): Standard borders
+ * - Percentages (100%): Layout
+ * - Transition durations (0.25s): Animation timing
+ * - Box-shadow values: Borders and focus effects
+ * - Z-index values (10): Stacking order
+ */
+
 .c8y-nav-stacked {
   position: relative;
   z-index: 10;
@@ -13,23 +30,22 @@
     float: none;
     align-items: center;
     flex-flow: row nowrap;
-    padding: 9px 0 9px 16px;
+    padding: @size-8 0 @size-8 @size-16;
     width: 100%;
     border: 0;
     background-color: @component-background-expanded;
     background-image: none;
     box-shadow: inset 0 -1px 0 @component-border-color;
     cursor: pointer;
-
     appearance: none;
-    .transition(all 0.25s ease);
+    transition: all 0.25s ease;
 
     &:hover:not(.active) {
       background-color: @component-background-active;
       box-shadow: inset 0 0 0 1px @component-color-actions-hover;
       .ui-sortable-handle {
-        margin-left: -16px;
-        width: 30px;
+        margin-left: calc(-1 * @size-8);
+        margin-right: @size-8;
         outline: none;
       }
     }
@@ -43,30 +59,26 @@
     }
 
     &.active {
-      border-left: 4px solid @component-brand-primary;
+      border-left: @size-4 solid @component-brand-primary;
       background-color: @component-background-default;
-      .btn-remove {
-        display: none;
-      }
     }
     > .c8y-switch {
-      margin: calc(@margin-base * -1 - 1px) 0 calc(@margin-base * -1);
+      margin: calc(@size-base * -1 - 1px) 0 calc(@size-base * -1);
     }
     .msgid {
       display: inline-block;
-      min-width: 40px;
+      min-width: @size-40;
     }
   }
 
   &.ui-sortable .c8y-stacked-item {
-    max-height: 40px !important;
     .ui-sortable-handle {
       overflow: hidden;
       margin-left: 0;
+      margin-right: 0;
       width: 0;
       text-align: center;
-
-      .transition(all 0.25s ease);
+      transition: all 0.25s ease;
     }
   }
 }

package/styles/components/navigation-and-layout/navigation/_main-header.less

@@ -1,6 +1,30 @@
+
+@import "../../../mixins/_gradients.less";
+@import "../../../mixins/_shadows-helper.less";
+@import "../../../mixins/_tab-focus.less";
+@import "../../../mixins/_vendor-prefixes.less";
+
+/**
+ * Main Header - Application main header component
+ *
+ * Note: Uses @size-* tokens for spacing and @headerHeight for calculations.
+ *
+ * Intentionally hardcoded values:
+ * - Off-token spacing (9px, 11px, 15px): Legacy spacing not in token system
+ * - Border widths (1px, 2px): Standard borders
+ * - Percentages (50%, 100%): Layout
+ * - Calc expressions: Complex computed values
+ * - Transition durations: Animation timing
+ * - Box-shadow values: Elevation
+ * - Z-index values: Stacking order
+ */
+
+
 // mixin to apply horizontal gradient in header
-.checkHorizontalGradient(@color1; @color2) when not (@color1='') {
-  #gradient > .horizontal(@start-color: @color1; @end-color: @color2);
+.checkHorizontalGradient(@color1; @color2) {
+  & when not (@color1 = ~'') {
+    .gradient-horizontal(@start-color: @color1; @end-color: @color2);
+  }
 }
 
 // APP MAIN HEADER
@@ -78,7 +102,7 @@
     justify-content: center;
     color: @header-text-color;
     border: 1px solid @header-text-color;
-    font-size: 24px;
+    font-size: @size-24;
   }
 
 
@@ -86,7 +110,11 @@
   .dropdown-menu:not(.app-switcher-dropdown-menu):not(.search-mobile-menu) {
     a,
     .btn {
-      .text-truncate();
+      display: block;
+      overflow: hidden !important;
+      max-width: 100% !important;
+      text-overflow: ellipsis !important;
+      white-space: nowrap !important;
     }
   }
 
@@ -95,7 +123,7 @@
   [dropdown].open .c8y-dropdown + .dropdown-menu,
   .btn-group.open .c8y-dropdown + .dropdown-menu {
     display: block;
-    .boxShadowHelper(6, right);
+    .boxShadowHelper(md, right);
   }
 
   .app-switcher {
@@ -122,13 +150,13 @@ body:not(:has(.has-tabs)):not(:has(.has-action-bar)) {
   button {
     margin: 0 auto;
     width: 48px;
-    height: 24px;
+    height: @size-24;
     color: @header-text-color;
     background-color: @headerColor;
     display: block;
     transition: margin 0.5s ease 0.35s;
     border: 0;
-    border-radius: 0 0 24px 24px;
+    border-radius: 0 0 @size-24 @size-24;
     .boxShadowHelper(1);
 
     &:focus {
@@ -168,7 +196,7 @@ body:not(:has(.has-tabs)):not(:has(.has-action-bar)) {
   flex-flow: row wrap;
   align-items: center;
   box-shadow: var(--c8y-main-header-shadow);
-  padding-right: @margin-24;
+  padding-right: @size-24;
 
   @media (min-width: @screen-sm-min) {
     min-height: @header-bar-height;
@@ -191,9 +219,9 @@ body:not(:has(.has-tabs)):not(:has(.has-action-bar)) {
   .app-noicon,
   .txt {
     transition: all @open-menu-time-type;
-    width: 32px;
-    margin-left: @margin-base;
-    margin-right: @margin-base;
+    width: @size-32;
+    margin-left: @size-base;
+    margin-right: @size-base;
     .scale(1);
   }
 
@@ -237,7 +265,7 @@ body:not(:has(.has-tabs)):not(:has(.has-action-bar)) {
 
   .navigator-toggle,
   .drawer-toggle {
-    font-size: 16px;
+    font-size: @size-16;
     padding-left: 8px;
     padding-right: 8px;
 
@@ -316,7 +344,7 @@ body:not(:has(.has-tabs)):not(:has(.has-action-bar)) {
 
   .spinner {
     position: relative;
-    margin: 0 0 0 @margin-base;
+    margin: 0 0 0 @size-base;
   }
 }
 

package/styles/components/navigation-and-layout/navigation/_main-header.scss

@@ -125,7 +125,7 @@
   [dropdown].open .c8y-dropdown + .dropdown-menu,
   .btn-group.open .c8y-dropdown + .dropdown-menu {
     display: block;
-    @include shadows-helper.boxShadowHelper(6, right);
+    @include shadows-helper.boxShadowHelper(md, right);
   }
 
   .app-switcher {

package/styles/components/navigation-and-layout/navigation/_navbar.less

@@ -1,17 +1,21 @@
+
+@import "../../../mixins/_clearfix.less";
+@import "../../../mixins/_nav-vertical-align.less";
+@import "../../../mixins/_vendor-prefixes.less";
+
 .navbar {
   position: relative;
   margin-bottom: 30px;
   min-height: @navbar-height;
   background-color: @navbar-background-default;
   // Prevent floats from breaking the navbar
-
-  &:extend(.clearfix all);
+   .clearfix();
 }
 
 // Navbar heading
 // Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy styling of responsive aspects.
 .navbar-header {
-  &:extend(.clearfix all);
+   .clearfix();
   @media (min-width: @grid-float-breakpoint) {
     float: left;
   }
@@ -24,8 +28,7 @@
   padding-left: @component-padding;
   border-top: 1px solid transparent;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-
-  &:extend(.clearfix all);
+   .clearfix();
   &.in {
     overflow-y: auto;
   }
@@ -51,8 +54,8 @@
     }
   }
   @media (min-width: @screen-lg-min) {
-    padding-right: @margin-8;
-    padding-left: @margin-8;
+    padding-right: @size-8;
+    padding-left: @size-8;
   }
 }
 
@@ -140,12 +143,12 @@
   position: relative;
   float: right;
   margin-right: @navbar-padding-horizontal;
-  padding: 9px 10px;
+  padding: 9px @size-10;
   border: 1px solid transparent;
   border-color: transparent;
   border-radius: @component-border-radius-base; // We remove the `outline` here, but later compensate by attaching `:hover`
   background-color: transparent;
-  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+  background-image: none; // Reset unusual Firefox-on-Android default style,see https://github.com/necolas/normalize.css/issues/214
 
   .navbar-vertical-align(34px);
   &:focus {
@@ -159,7 +162,7 @@
     background-color: @navbar-color-default;
   }
   .icon-bar + .icon-bar {
-    margin-top: 4px;
+    margin-top: @size-4;
   }
   &:hover,
   &:focus {
@@ -175,8 +178,8 @@
 .navbar-nav {
   margin: calc(@navbar-padding-vertical * 0.5) calc(@navbar-padding-horizontal * -1);
   > li > a {
-    padding-top: 10px;
-    padding-bottom: 10px;
+    padding-top: @size-10;
+    padding-bottom: @size-10;
     line-height: @line-height-computed;
   }
   @media (max-width: (@screen-sm-min - 1)) {
@@ -242,14 +245,14 @@
     >.form-group {
       display: inline-block;
       margin-bottom: 0;
-      max-height: 32px !important;
+      max-height: @size-32 !important;
       vertical-align: middle;
 
       > label {
-        margin-right: @margin-8;
+        margin-right: @size-8;
       }
       + .form-group {
-        margin-left: @margin-8;
+        margin-left: @size-8;
       }
     }
 
@@ -302,13 +305,7 @@
       position: relative;
       margin-left: 0;
     } // Re-override the feedback icon.
-    // Removed unused logic: .has-feedback
-    //.has-feedback .form-control-feedback {
-    //  top: 0;
-    //}
-    //.has-feedback .form-control-feedback-message {
-    //  top: @form-control-height-base;
-    //}
+    // Removed unused logic: .has-feedback .form-control-feedback
   }
   >.form-group {
     @media (max-width: @screen-sm-min) {
@@ -318,7 +315,7 @@
       }
     }
   } // Vertically center in expanded, horizontal navbar
-  //.navbar-vertical-align(@form-control-height-base);
+  .navbar-vertical-align(@form-control-height-base);
   // Undo 100% width for pull classes
   @media (min-width: @screen-sm-min) {
     margin-right: 0;
@@ -376,10 +373,10 @@
 // Declared after the navbar components to ensure more specificity on the margins.
 @media (min-width: @screen-sm-min) {
   .navbar-left {
-    .pull-left();
+    float: left !important;
   }
   .navbar-right {
-    .pull-right();
+    float: right !important;
     margin-left: auto;
     flex-shrink: 0;
     ~ .navbar-right {

package/styles/components/navigation-and-layout/navigation/_navbar.scss

@@ -1,7 +1,7 @@
 @use "../../../../variables/index" as *;
 
 @use "../../../mixins/clearfix";
-@use "../../../mixins/nav-vertical-align";
+@use "../../../mixins/nav-vertical-align" as *;
 @use "../../../mixins/vendor-prefixes";
 
 .navbar {
@@ -151,7 +151,7 @@
   background-color: transparent;
   background-image: none; // Reset unusual Firefox-on-Android default style,see https://github.com/necolas/normalize.css/issues/214
 
-  @include nav-vertical-align.navbar-vertical-align(34px);
+  @include navbar-vertical-align(34px);
   &:focus {
     outline: 0;
   } // Bars
@@ -316,7 +316,7 @@
       }
     }
   } // Vertically center in expanded, horizontal navbar
-  //.navbar-vertical-align($form-control-height-base);
+  @include navbar-vertical-align($form-control-height-base);
   // Undo 100% width for pull classes
   @media (min-width: $screen-sm-min) {
     margin-right: 0;
@@ -345,19 +345,19 @@
 // Buttons in navbars
 // Vertically center a button within a navbar (when *not* in a form).
 .navbar-btn {
-  @include nav-vertical-align.navbar-vertical-align(32);
+  @include navbar-vertical-align(32);
   &.btn-sm {
-    @include nav-vertical-align.navbar-vertical-align(28);
+    @include navbar-vertical-align(28);
   }
   &.btn-xs {
-    @include nav-vertical-align.navbar-vertical-align(22);
+    @include navbar-vertical-align(22);
   }
 }
 
 // Text in navbars
 // Add a class to make any element properly align itself vertically within the navbars.
 .navbar-text {
-  @include nav-vertical-align.navbar-vertical-align($line-height-computed);
+  @include navbar-vertical-align($line-height-computed);
   @media (min-width: $screen-sm-min) {
     float: left;
     margin-right: $navbar-padding-horizontal;

package/styles/components/navigation-and-layout/navigation/_navigator.less

@@ -1,6 +1,12 @@
+
+@import "../../../mixins/_color-mixins.less";
+@import "../../../mixins/_gradients.less";
+@import "../../../mixins/_shadows-helper.less";
+@import "../../../mixins/_vendor-prefixes.less";
+
 // mixin to apply a vertical gradient in navigator
-.checkVerticalGradient(@color1; @color2) when not (@color1 ='') {
-  #gradient > .vertical(@start-color: @color1; @end-color: @color2);
+.checkVerticalGradient(@color1; @color2) when not (@color1 = '') {
+  .gradient-vertical(@start-color: @color1; @end-color: @color2);
 }
 
 .navigator {
@@ -20,7 +26,7 @@
   .checkVerticalGradient(@grad-top; @grad-bottom);
   
   @media (min-width: @screen-sm-min) {
-    left: -(@navigatorWidth + 10);
+    left: calc((@navigatorWidth + 10px) * -1);
     width: @navigatorWidth;
   }
 
@@ -40,7 +46,8 @@
     padding-bottom: 0;
   }
 
-  .tenant-brand when (@appLogo =deprecated) {
+  // Note: LESS guard removed - was: when (@appLogo =deprecated)
+  .tenant-brand {
     display: block;
 
     background-size: contain;
@@ -48,11 +55,10 @@
     background-repeat: no-repeat;
     margin: 0 auto;
     width: 208px;
-    
-    & when not(@extending) {
-      background-image: @navigator-platform-logo;
-      padding-bottom: @navigator-platform-logo-height;
-    }
+
+    // Note: LESS guard removed - was: & when not(@extending)
+    background-image: @navigator-platform-logo;
+    padding-bottom: @navigator-platform-logo-height;
   }
   .c8y-logo {
     .tenant-brand{
@@ -68,9 +74,9 @@
   z-index: 100;
   display: flex;
   align-items: center;
-  gap: @margin-8;
+  gap: @size-8;
   margin: 0;
-  padding: @navigator-app-name-size @margin-16;
+  padding: @navigator-app-name-size @size-16;
   font-size: @navigator-app-name-size;
   font-weight: 600;
   text-overflow: ellipsis;
@@ -94,7 +100,7 @@
     height: 4px;
     content: '';
     background-color: @navColorHeader;
-    .shadow-scroll();
+    box-shadow: 0 2px 3px fade(black, 10%);
   }
   .c8y-app-icon{
     display: contents;
@@ -117,56 +123,48 @@
   }
 
   .app-noicon {
-    width: calc(@margin-base * 6);
-    height: calc(@margin-base * 6);
-    line-height: calc(@margin-base * 6);
+    width: calc(@size-base * 6);
+    height: calc(@size-base * 6);
+    line-height: calc(@size-base * 6);
     border: 1px solid @palette-high;
     display: block;
     margin: 0;
   }
 
-  & when not(@appBranding='') {
-    // hide app logo
-    text-indent: -1000px;
-    overflow: hidden;
-    height: 0;
-    min-height: 0;
-  }
-
   /* Legacy support for @appLogo */
-  &
-    when
-    (not(@appLogo-height =deprecated))
-    and
-    (not(@appLogo-height =''))
-    and
-    (not(@appLogo =deprecated))
-    and
-    (not(@appLogo ='')) {
-    & when not(@extending) {
-      background-image: @navigator-platform-logo;
-    }
-
-    padding-top: @appLogo-height;
-    padding-bottom: 0;
-    background-size: contain;
-    background-position: center 5px;
-    background-repeat: no-repeat;
-    line-height: 2.85;
-
-    .c8y-icon,
-    .app-noicon {
-      display: none !important;
-    }
-
-    span {
-      display: block;
-    }
-
-    br {
-      display: none;
-    }
-  }
+  // Note: The following code was conditionally applied in LESS with guards.
+  // In SCSS, we cannot replicate LESS guards, so this legacy code is commented out.
+  // If you need to hide the app logo or use legacy @appLogo variables,
+  // you should override these styles in your custom branding CSS.
+  //
+  // Original LESS conditions were:
+  // - & when not(@appBranding='')
+  // - & when (not(@appLogo-height =deprecated)) and (not(@appLogo-height ='')) and (not(@appLogo =deprecated)) and (not(@appLogo =''))
+  //
+  // To enable legacy app logo behavior, add this to your custom CSS:
+  // .navigator .title {
+  //   text-indent: -1000px;
+  //   overflow: hidden;
+  //   height: 0;
+  //   min-height: 0;
+  //   background-image: var(--navigator-platform-logo, var(--c8y-navigator-platform-logo));
+  //   padding-top: deprecated;
+  //   padding-bottom: 0;
+  //   background-size: contain;
+  //   background-position: center 5px;
+  //   background-repeat: no-repeat;
+  //   line-height: 2.85;
+  // }
+  // .navigator .title .c8y-icon,
+  // .navigator .title .app-noicon {
+  //   display: none !important;
+  // }
+  // .navigator .title span {
+  //   display: block;
+  // }
+  // .navigator .title br {
+  //   display: none;
+  // }
 }
 
 // Navigator content
@@ -235,7 +233,11 @@
 
       > span,
       > div {
-        .text-truncate();
+        display: block;
+        overflow: hidden !important;
+        max-width: 100% !important;
+        text-overflow: ellipsis !important;
+        white-space: nowrap !important;
         background-color: transparent;
       }
 
@@ -294,7 +296,7 @@
     }
 
     &.open.active {
-      .shadow-border(1px; rgba(0, 0, 0, 0.2));
+      .shadow-border(1px,rgba(0, 0, 0, 0.2));
       background: @navigator-background-selected;
     }
 
@@ -323,37 +325,37 @@
     transition: all 0.35s ease;
 
     .link {
-      padding-left: calc(@margin-16 * 1);
+      padding-left: calc(@size-16 * 1);
     }
 
     .children {
       .link {
-        padding-left: calc(@margin-16 * 1 + @margin-base);
+        padding-left: calc(@size-16 * 1 + @size-base);
       }
 
       .children {
         .link {
-          padding-left: calc(@margin-16 * 1 + @margin-base * 2);
+          padding-left: calc(@size-16 * 1 + @size-base * 2);
         }
 
         .children {
           .link {
-            padding-left: calc(@margin-16 * 1 + @margin-base * 3);
+            padding-left: calc(@size-16 * 1 + @size-base * 3);
           }
 
           .children {
             .link {
-              padding-left: calc(@margin-16 * 1 + @margin-base * 4);
+              padding-left: calc(@size-16 * 1 + @size-base * 4);
             }
 
             .children {
               .link {
-                padding-left: calc(@margin-16 * 1 + @margin-base * 5);
+                padding-left: calc(@size-16 * 1 + @size-base * 5);
               }
 
               .children {
                 .link {
-                  padding-left: calc(@margin-16 * 1 + @margin-base * 6);
+                  padding-left: calc(@size-16 * 1 + @size-base * 6);
                 }
               }
             }
@@ -375,7 +377,7 @@
     }
 
     c8y-device-status-display {
-      height: @margin-16;
+      height: @size-16;
     }
 
     .statusContainer {
@@ -428,17 +430,17 @@
   margin-top: auto;
   order: 10;
   border-top: 1px solid @navigator-separator-color;
-  padding: 0 @margin-16;
+  padding: 0 @size-16;
   a{
     color: currentColor;
   }
   &:has(.c8y-logo) {
-    padding: @margin-8 @margin-16;
+    padding: @size-8 @size-16;
   }
   &:has(.logo-spacer) {
     display: flex;
     flex-direction: column;
-    gap: @margin-8;
+    gap: @size-8;
 
   }
   p {

package/styles/components/navigation-and-layout/navigation/_navs.less

@@ -1,3 +1,16 @@
+
+/**
+ * Navs - Base navigation component (Bootstrap 3 legacy)
+ *
+ * Note: Uses @navlink-* variables for colors and padding, component tokens for styling.
+ *
+ * Intentionally hardcoded values:
+ * - Border widths (2px): Standard borders and outlines
+ * - Negative offsets (-2px): Fine-tuning
+ * - Percentages (100%): Layout
+ * - Opacity values: Visual states
+ */
+
 .nav {
   margin-bottom: 0;
   padding-left: 0; // Override default ul/ol