@c8y/style 1023.14.76 → 1023.14.94

package/styles/layout/_c8y-help-drawer.less

@@ -1,15 +1,36 @@
-.c8y-help-drawer{
+
+@import "../mixins/_c8y-scrollbar.less";
+@import "../mixins/_shadows-helper.less";
+
+/**
+ * Help Drawer - Fixed help panel overlay
+ *
+ * Note: Uses design tokens for spacing (@size-*; @component-padding) and colors.
+ *
+ * Intentionally hardcoded values:
+ * - Layout calc expressions (28px, 140px, etc.): Height calculations
+ * - Column widths (130ch, 55ch): Character-based column sizing
+ * - 84px padding: Specific footer alignment
+ * - 600px height breakpoint: Media query
+ * - Orphans/widows: Typography print control
+ * - Transition durations (0.5s, 0.35s): Animation timing
+ * - Z-index calculations: Stacking order
+ * - 1px borders: Standard border widths
+ * - 10000px, 2000px: Large clip values
+ */
+
+.c8y-help-drawer {
   position: fixed;
   top: 0;
   right: 0;
   left: 0;
   z-index: (@zindex-action-bar - 1);
   margin: 0;
-  padding-top: 48px;
-  min-height: calc(@margin-base * 4);
+  padding-top: @size-48;
+  min-height: calc(@size-base * 4);
   max-width: 100vw;
   max-height: calc(100vh - 140px);
-  background-color: var(--c8y-helpdrawer-background-default, @component-background-default);
+  background-color: var(--c8y-helpdrawer-background-default; @component-background-default);
   color: @component-color-default;
   overflow: auto;
   .c8y-scrollbar();
@@ -21,10 +42,10 @@
     columns: auto 55ch;
     orphans: 5;
     widows: 2;
-    gap: 32px;
+    gap: @size-32;
     text-wrap: balance;
     p + p {
-      margin-top: @margin-base;
+      margin-top: @size-base;
     }
   }
 
@@ -44,7 +65,7 @@
       transition: top 0.35s ease;
     }
     .has-tabs .head-open & {
-      top: calc(@headerHeight * 2 + 12px);
+      top: calc(@headerHeight * 2 + calc(@size-base * 1.5));
     }
   }
   @media (min-width: @screen-sm-min) {
@@ -56,12 +77,12 @@
     }
   }
   @media (min-width: @grid-float-breakpoint) {
-    .transition(left @open-menu-time-type);
+    transition: left @open-menu-time-type;
     .open & {
       left: @navigatorWidth;
     }
     .horizontal-tabs.has-tabs & {
-      top: calc(@headerHeight * 2 - @margin-16);
+      top: calc(@headerHeight * 2 - @size-16);
     }
   }
   &-block {

package/styles/layout/_c8y-right-drawer.less

@@ -1,4 +1,19 @@
-.checkwhiteicon(@icon) when (@icon='white') {
+
+@import "../mixins/_shadows-helper.less";
+
+/**
+ * Right Drawer - Fixed side panel navigation
+ *
+ * Note: Uses design tokens for spacing (@size-*; @component-padding), colors (@drawer-*).
+ *
+ * Intentionally hardcoded values:
+ * - 6px padding: Off-grid fine-tuning
+ * - 2px/-2px outline: Focus indicator width and offset
+ * - Z-index values: Stacking order
+ * - Percentages: Transform values
+ */
+
+.checkwhiteicon(@icon) when (@icon = 'white') {
   &:before {
     color: @icon-white-color-dark;
   }
@@ -8,7 +23,7 @@
   }
 }
 
-.checkdarkicon(@icon) when (@icon='duo') {
+.checkdarkicon(@icon) when (@icon = 'duo') {
   &:before {
     color: @icon-dark-color-dark;
   }
@@ -31,26 +46,26 @@
   z-index: @zindex-navbar-fixed + 1;
   display: flex;
   flex-direction: column;
-  .translate(100%, 0);
-  .transition(transform @open-menu-time-type);
-  --sticky-top-margin: 80px;
+  transform: translate(100%, 0);
+  transition: transform @open-menu-time-type;
+  --sticky-top-margin: @size-80;
 
   --c8y-text-muted: var(--right-drawer-text-muted, var(--c8y-right-drawer-text-color-muted));
 
-  --c8y-form-label-color: @drawer-color;
-  
+  --c8y-form-label-color: @{drawer-color};
+
   --c8y-component-border-color: var(--right-drawer-separator-color, var(--c8y-right-drawer-separator-color, var(--navigator-separator-color, var(--c8y-root-component-border-color))));
-  
+
   --link-color: var(--right-drawer-link-color, var(--c8y-right-drawer-link-color, var(--c8y-right-drawer-link-color-default, var(--c8y-root-component-color-link))));
-  
+
   --c8y-component-color-link-hover: var(--right-drawer-link-color-hover, var(--c8y-right-drawer-link-color-hover, var(--c8y-root-component-color-link-hover)));
-  
+
   @media (min-width: @screen-sm-min) {
     width: @navigatorWidth;
-    .translate(@navigatorWidth, 0);
+    transform: translate(@navigatorWidth, 0);
   }
   .drawerOpen & {
-    .translate(0, 0);
+    transform: translate(0, 0);
     .boxShadowHelper(md, right);
   }
 
@@ -59,26 +74,26 @@
   }
   .sticky-top {
     top: var(--sticky-top-margin);
-    background-color: @drawer-bg!important;
+    background-color: @drawer-bg !important;
   }
   &__header {
     padding: @component-padding;
-    padding-top: @margin-24;
+    padding-top: @size-24;
     position: sticky;
     top: 0;
     z-index: 11;
     flex-shrink: 0;
     background-color: inherit;
     .user-dot {
-      margin-right: @margin-base;
+      margin-right: @size-base;
     }
 
     .close {
-      margin-top: -16px;
+      margin-top: calc(@size-16 * -1);
       text-shadow: none;
       color: @drawer-color;
       font-weight: lighter;
-      font-size: 20px;
+      font-size: @size-20;
 
       &:hover,
       &:focus {
@@ -104,8 +119,8 @@
     [class^='dlt-c8y-icon-'],
     [class*=' dlt-c8y-icon-'],
     .c8y-icon {
-      font-size: 20px;
-      margin: 4px 8px 4px 0;
+      font-size: @size-20;
+      margin: @size-4 @size-8 @size-4 0;
     }
   }
 

package/styles/layout/_c8y-top-drawer.less

@@ -1,8 +1,26 @@
+
+/**
+ * Top Drawer - Collapsible top navigation panel
+ *
+ * Note: Uses design tokens for spacing (@size-*), colors, and layout vars.
+ *
+ * Intentionally hardcoded values:
+ * - Layout calc expressions (76px, 72px, 56px, etc.): Header height combinations
+ * - Specific widths (170px, 273px, 272px): Drawer panel widths
+ * - Heights (380px, 445px, 220px): Drawer content dimensions
+ * - 6px, 12px: Off-grid positioning adjustments
+ * - 10000px, 2000px: Large clip values for overflow management
+ * - Transition duration (0.35s): Animation timing
+ * - Z-index calculations: Stacking order
+ * - 1px borders: Standard border widths
+ * - 100vw/100vh: Full viewport dimensions
+ */
+
 .c8y-top-drawer, .c8y-global-context {
   position: sticky;
   z-index: (@zindex-action-bar - 2);
-  margin: 0 calc(@margin-base * -1);
-  transform: translateY(-24px);
+  margin: 0 calc(@size-base * -1);
+  transform: translateY(calc(@size-24 * -1));
   max-width: 100vw;
   background-color: @component-background-default;
   color: @component-color-default;
@@ -20,11 +38,11 @@
       transition: top 0.35s ease;
     }
     .has-tabs .head-open & {
-      top: calc(@headerHeight * 2 + 12px);
+      top: calc(@headerHeight * 2 + calc(@size-base * 1.5));
     }
   }
   @media (min-width: @screen-sm-min) {
-    margin: 0 calc(@margin-base * -1);
+    margin: 0 calc(@size-base * -1);
     top: calc(@headerHeight + 72px);
     clip: rect(0, 10000px, 2000px, 0);
     .horizontal-tabs.has-tabs & {
@@ -32,33 +50,33 @@
     }
   }
   @media (min-width: @grid-float-breakpoint) {
-    .transition(left @open-menu-time-type);
+    transition: left @open-menu-time-type;
     .horizontal-tabs.has-tabs & {
       top: calc(@headerHeight * 2 + 56px);
     }
   }
-  :fullscreen:not(:root) &{
+  :fullscreen:not(:root) & {
     top: 0;
-    margin:0;
-    transform: translateY(-32px);
+    margin: 0;
+    transform: translateY(calc(@size-32 * -1));
   }
-  .component-tabs.nav-tabs{
+  .component-tabs.nav-tabs {
     padding-top: 0;
   }
-  &--tabs{
+  &--tabs {
     position: relative;
     padding-right: 0;
     background-color: var(--c8y-level-1);
-    &::before{
+    &::before {
       display: none;
     }
   }
-  &--footer{
-    padding:@margin-24;
+  &--footer {
+    padding: @size-24;
     padding-left: var(--c8y-nav-tabs-vertical-width);
     background-color: var(--c8y-level-1);
   }
-  &__tabs-container{
+  &__tabs-container {
     border-bottom: 1px solid @component-border-color;
     max-height: calc(100vh - 380px);
     height: 445px;
@@ -66,36 +84,33 @@
   }
 }
 
-
-
 .c8y-global-context {
   position: fixed;
   z-index: (@zindex-action-bar - 2);
-  width: calc(100% - 32px);
-  clip: rect(0, 10000px, 2000px, -16px);
+  width: calc(100% - @size-32);
+  clip: rect(0, 10000px, 2000px, calc(@size-16 * -1));
   --c8y-nav-tabs-vertical-width: 170px;
   transition: width @open-menu-time-type;
   .page-tabs-vertical .nav-tabs > div > a {
     align-items: flex-start;
   }
-  .c8y-top-drawer--footer{
-    --c8y-nav-tabs-vertical-width: 24px;
+  .c8y-top-drawer--footer {
+    --c8y-nav-tabs-vertical-width: @{size-24};
   }
 }
 
-@media(min-width: @grid-float-breakpoint){ 
-  .c8y-global-context{
+@media (min-width: @grid-float-breakpoint) {
+  .c8y-global-context {
     --c8y-nav-tabs-vertical-width: 273px;
-      .c8y-top-drawer--footer{
-        --c8y-nav-tabs-vertical-width: 273px;
-      }
+    .c8y-top-drawer--footer {
+      --c8y-nav-tabs-vertical-width: 273px;
+    }
   }
 }
-body:has(.mcontainer.open){
-  @media(min-width: @grid-float-breakpoint){ 
+body:has(.mcontainer.open) {
+  @media (min-width: @grid-float-breakpoint) {
     .c8y-global-context {
       width: calc(100% - 272px);
     }
-    
   }
 }

package/styles/layout/_grid.less

@@ -1,3 +1,17 @@
+
+@import "../mixins/_grid.less";
+@import "../mixins/_grid-framework.less";
+
+/**
+ * Grid System - Bootstrap-based responsive grid
+ *
+ * Note: Uses design tokens for responsive breakpoints (@screen-*), container widths
+ * (@container-*), and spacing (@size-4).
+ *
+ * Intentionally hardcoded values:
+ * - 0 padding: Gutter removal utilities, not spacing
+ */
+
 // Container widths
 // Set the container width, and override it for fixed navbars in media queries.
 .container {
@@ -85,15 +99,15 @@
 }
 
 .tight-grid {
-  margin-right: calc(@margin-4 * -1) !important;
-  margin-left: calc(@margin-4 * -1) !important;
+  margin-right: calc(@size-4 * -1) !important;
+  margin-left: calc(@size-4 * -1) !important;
 
   .make-row();
   [class*='col-xs-'],
   [class*='col-sm-'],
   [class*='col-md-'],
   [class*='col-lg-'] {
-    padding-right: @margin-4!important;
-    padding-left: @margin-4!important;
+    padding-right: @size-4 !important;
+    padding-left: @size-4 !important;
   }
 }

package/styles/layout/_group-info.less

@@ -1,8 +1,20 @@
+
+/**
+ * Group Info - Information display component
+ *
+ * Note: Uses @size-20 for padding.
+ *
+ * Intentionally hardcoded values:
+ * - 30px/-30px: Specific horizontal spacing for layout
+ * - Transition duration (0.25s): Animation timing
+ * - Z-index: Stacking order
+ */
+
 .group-info {
   margin: 0 -30px 0;
-  padding: 0 30px 20px;
+  padding: 0 30px @size-20;
 
-  .transition(all 0.25s ease);
+  transition: all 0.25s ease;
   .form-editable {
     z-index: 999;
     align-self: flex-start;

package/styles/layout/_layouts.less

@@ -1,3 +1,23 @@
+
+@import "../mixins/_c8y-scrollbar.less";
+@import "../mixins/_create-grid.less";
+
+/**
+ * Layout Utilities - Grid, scrolling containers, and sticky positioning
+ *
+ * Note: Uses @size-* tokens for spacing and design tokens for colors/fonts.
+ *
+ * Intentionally hardcoded values:
+ * - Layout heights (64px, 112px, 160px, 208px, 365px, etc.): Header/tab/actionbar heights
+ * - Grid fractions (4fr, 8fr, etc.): CSS grid fractional units
+ * - Specific widths (300px, 360px, 500px, 560px): Breakpoint-specific column widths
+ * - Transition duration (0.35s): Animation timing
+ * - Z-index values: Stacking order
+ * - Percentages: Relative sizing
+ * - 12px margin: Off-grid legacy value for card-group spacing
+ * - -2px box-shadow: Border effect
+ */
+
 body {
   .c8y-scrollbar();
 }
@@ -17,7 +37,7 @@ body {
     margin-bottom: 0;
   }
 }
-pre.inner-scroll{
+pre.inner-scroll {
   background-color: var(--c8y-pre-background);
 }
 
@@ -39,22 +59,22 @@ pre.inner-scroll{
     grid-template-columns: minmax(0, 9fr) 360px;
   }
   .grid__col--360-auto {
-    grid-template-columns: 360px minmax(0, 1fr) ;
+    grid-template-columns: 360px minmax(0, 1fr);
   }
 }
 
 @media screen and (min-width: @screen-md-min) {
   .grid__col--500-auto {
-    grid-template-columns: 500px minmax(0, 1fr) ;
+    grid-template-columns: 500px minmax(0, 1fr);
   }
 }
 @media screen and (min-width: @screen-md-min) {
   .grid__col--560-auto {
-    grid-template-columns: minmax(560px, 4fr) minmax(0, 8fr) ;
+    grid-template-columns: minmax(560px, 4fr) minmax(0, 8fr);
   }
 }
 
-.grid__col--auto-300{
+.grid__col--auto-300 {
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 }
 
@@ -65,51 +85,49 @@ pre.inner-scroll{
  */
 .createGridCols3(5);
 
-
 // grid with 3 columns collapsed with the last column collapsed
 .grid__col--8-4-0 {
-  @media(min-width: @screen-md-min) {
-    transition: .35s;
+  @media (min-width: @screen-md-min) {
+    transition: 0.35s;
     grid-template-columns: 8fr 4fr 0fr;
   }
 }
 
 .grid__col--5-7-0 {
-  @media(min-width: @screen-md-min) {
-    transition: .35s;
+  @media (min-width: @screen-md-min) {
+    transition: 0.35s;
     grid-template-columns: 5fr 7fr 0fr;
   }
 }
 
 .grid__col--6-6-0 {
-  @media(min-width: @screen-md-min) {
-    transition: .35s;
+  @media (min-width: @screen-md-min) {
+    transition: 0.35s;
     grid-template-columns: 6fr 6fr 0fr;
   }
 }
 // grid with 3 columns collapsed with the first column collapsed
 .grid__col--0-4-8 {
-  @media(min-width: @screen-md-min) {
-    transition: .35s;
+  @media (min-width: @screen-md-min) {
+    transition: 0.35s;
     grid-template-columns: 0fr 4fr 8fr;
   }
 }
 
 .grid__col--0-7-5 {
-  @media(min-width: @screen-md-min) {
-  transition: .35s;
-  grid-template-columns: 0fr 7fr 5fr;
+  @media (min-width: @screen-md-min) {
+    transition: 0.35s;
+    grid-template-columns: 0fr 7fr 5fr;
   }
 }
 
 .grid__col--0-6-6 {
-  @media(min-width: @screen-md-min) {
-  transition: .35s;
-  grid-template-columns: 0fr 6fr 6fr;
+  @media (min-width: @screen-md-min) {
+    transition: 0.35s;
+    grid-template-columns: 0fr 6fr 6fr;
   }
 }
 
-
 /* Mixin that generate classes for setting two rows on a 12 rows grid
  * example:
  * `grid__row-4-6`
@@ -119,7 +137,7 @@ pre.inner-scroll{
 
 // create Gaps for grid and flex containers
 .gap-4 {
-  gap: 4px;
+  gap: @size-4;
 }
 .createGapClasses(5);
 
@@ -193,17 +211,17 @@ pre.inner-scroll{
     position: sticky !important;
     top: 64px;
     z-index: 20;
-    min-height: @page-sticky-header-height!important;
+    min-height: @page-sticky-header-height !important;
     width: 100%;
-    background: @page-sticky-header-background-default!important;
-    box-shadow: inset 0 -2px 0 @component-border-color!important;
+    background: @page-sticky-header-background-default !important;
+    box-shadow: inset 0 -2px 0 @component-border-color !important;
     color: @page-sticky-header-color-default;
     text-transform: @form-label-text-transform;
     font-weight: @form-label-font-weight;
     font-size: @form-label-font-size;
 
     &.c8y-list--timeline {
-      margin-bottom: @margin-base!important;
+      margin-bottom: @size-base !important;
     }
     .c8y-list--timeline__item__date {
       display: flex;
@@ -220,7 +238,7 @@ pre.inner-scroll{
     }
 
     &.c8y-list--timeline {
-      margin-bottom: @margin-8;
+      margin-bottom: @size-8;
     }
     label,
     p {
@@ -230,7 +248,7 @@ pre.inner-scroll{
       display: none !important;
     }
     .card-group.interact-list & {
-      margin: 0 12px;
+      margin: 0 calc(@size-base * 1.5);
       background-color: @component-background-default;
     }
 
@@ -269,8 +287,8 @@ pre.inner-scroll{
     > .card-block,
     > .inner-scroll > .card-block,
     > .card-footer {
-      padding-right: 24px;
-      padding-left: 24px;
+      padding-right: @size-24;
+      padding-left: @size-24;
     }
     .c8y-scrollbar();
 

package/styles/layout/_mcontainer.less

@@ -1,9 +1,24 @@
+
+
+/**
+ * Main Container (mcontainer) - Primary application content container
+ *
+ * Note: Uses design tokens for spacing (@size-*; @grid-gutter-width, etc.) and layout vars.
+ *
+ * Intentionally hardcoded values:
+ * - Layout padding-tops (70px, 88px, 136px, 152px, 200px, etc.): Header/tab/actionbar heights
+ * - Min-height calc expressions (58px, 112px, 176px, 160px): Layout-specific heights
+ * - 16.6666666667%: 1/6 of grid (CSS grid calculation)
+ * - 12px: Off-grid padding for specific dashboard layout
+ * - 100vw/100vh: Full viewport dimensions
+ */
+
 .mcontainer {
   margin: 0;
   padding-top: 70px;
-  min-height: calc(100vh - @margin-16);
+  min-height: calc(100vh - @size-16);
 
-  .transition(margin-left @open-menu-time-type);
+  transition: margin-left @open-menu-time-type;
   @media (min-width: @screen-sm-min) {
     padding-top: 88px;
     padding-right: @grid-gutter-width;
@@ -54,23 +69,23 @@
       }
     }
     .dashboard {
-      margin: -24px calc(@margin-16 * -1) 0;
-      padding: 24px calc(@margin-base * 2) 12px;
+      margin: calc(@size-24 * -1) calc(@size-16 * -1) 0;
+      padding: @size-24 calc(@size-base * 2) calc(@size-base * 1.5);
       min-height: calc(~'100vh - 58px');
       max-width: 100vw;
     }
     @media (min-width: @screen-sm-min) {
       .dashboard {
-        margin: -24px calc(@margin-base * -3);
-        padding: 24px calc(@margin-base * 3);
+        margin: calc(@size-24 * -1) calc(@size-base * -3);
+        padding: @size-24 calc(@size-base * 3);
         min-height: calc(~'100vh - 112px');
       }
     }
     @media (min-width: @screen-lg) {
       .dashboard {
-        margin-top: -24px;
-        margin-bottom: -24px;
-        padding-top: 24px;
+        margin-top: calc(@size-24 * -1);
+        margin-bottom: calc(@size-24 * -1);
+        padding-top: @size-24;
         min-height: calc(~'100vh - 112px');
       }
     }
@@ -92,7 +107,7 @@
 
 body:not(:has(.app-main-header)) {
   .mcontainer {
-    padding-top: 16px;
+    padding-top: @size-16;
     @media (max-width: @screen-xs-max) {
       &.has-tabs {
         padding-top: 56px;
@@ -109,12 +124,11 @@ body:not(:has(.app-main-header)) {
         }
       }
       &.has-tabs.vertical-tabs {
-        padding-top: 16px;
+        padding-top: @size-16;
         &.has-action-bar {
           padding-top: 66px;
         }
       }
-      
     }
   }
 }