@c8y/style 1023.37.0 → 1023.42.1

package/styles/core/overlays/_popovers.less

@@ -1,3 +1,21 @@
+
+@import "../../mixins/_reset-text.less";
+@import "../../mixins/_shadows-helper.less";
+
+/**
+ * Popovers - Popover overlay component
+ *
+ * Note: Uses @popover-* variables for most dimensions and @size-* tokens for positioning.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (140px, 341px): Popover specific positioning and widths
+ * - Typography size (16px): Title font size
+ * - Border widths (1px): Standard borders
+ * - Percentages (50%, 100%): Layout and centering
+ * - Z-index values: Stacking order
+ * - Calc expressions: Complex computed values with @popover-* variables
+ */
+
 .popover {
   position: absolute;
   top: 0;
@@ -13,7 +31,7 @@
   color: @popover-color-default;
   font-size: @font-size-base; // To reset our font and text properties and avoid inheriting weird values.
   .reset-text();
-  
+
   &.high-popover {
     z-index: @zindex-popover + 2;
   }
@@ -52,21 +70,19 @@
   padding: @popover-padding;
   word-break: break-word;
   overflow-wrap: break-word;
-  &:has(.popover-footer){
+  &:has(.popover-footer) {
     padding-bottom: 0;
   }
 }
 
-.popover-footer{
+.popover-footer {
   padding: @popover-padding 0;
 }
 
-.popover-title + .popover-content{
+.popover-title + .popover-content {
   padding-top: calc(@popover-padding / 2);
 }
 
-
-
 // Arrows
 // .arrow is outer, .arrow:after is inner
 .popover > .arrow {
@@ -153,14 +169,14 @@
 }
 
 .popover.navigator-popover {
-  max-width: 341px!important;
+  max-width: 341px !important;
 }
 
 c8y-popover-confirm .right {
-  right: 20px !important;
+  right: @size-20 !important;
 }
 
 .popover.lns-connection-popover {
-  top: 10px !important;
+  top: @size-10 !important;
   left: 140px !important;
 }

package/styles/dashboard/_availability-pie.less

@@ -1,3 +1,6 @@
+
+@import "../mixins/_vendor-prefixes.less";
+
 .availabilityPie {
   .welcome & {
     position: relative;

package/styles/dashboard/_c8y-dashboard-style.less

@@ -1,3 +1,27 @@
+
+@import "../../variables/_dlt-c8y-icons-vars.less";
+@import "../mixins/_c8y-scrollbar.less";
+@import "../mixins/_icon-base.less";
+
+/**
+ * Dashboard Styles - Grid-based dashboard layout with drag-and-drop
+ *
+ * Note: Uses design tokens for spacing (@size-*; @component-padding) and colors.
+ *
+ * Intentionally hardcoded values:
+ * - Media query breakpoint (768px): Responsive breakpoint
+ * - Border widths (1px, 2px): Standard border sizes
+ * - Widget dimensions (30px, 40px, 65px, 99vh): Component-specific sizes
+ * - Min-heights (6px): Off-grid positioning
+ * - Transition duration (0.3s): Animation timing
+ * - Opacity values: Visual effects
+ * - Z-index values (1085, 100, 12, 11, 10, 9): Stacking order
+ * - Percentages and viewport units: Layout calculations
+ * - Line-height (0.5): Typography ratio
+ * - Padding 3px (off-grid): Fine-tuning for template marker
+ * - Height 14px (off-grid): Template marker height
+ */
+
 @media (max-width: 768px) {
   .dashboard-grid {
     grid-template-columns: 1fr !important;
@@ -18,7 +42,6 @@ body.c8y-grid-dashboard > .card.card-dashboard.cdk-drag-preview {
 }
 
 .dashboard-grid {
-  display: -ms-grid;
   display: grid;
 
   .dashboard-grid-child {
@@ -73,11 +96,11 @@ body.c8y-grid-dashboard > .card.card-dashboard.cdk-drag-preview {
   .resize-icon {
     position: absolute;
     .dlt-c8y-icon();
-    right: 4px;
-    bottom: 4px;
+    right: @size-4;
+    bottom: @size-4;
     z-index: 11;
-    width: 20px;
-    height: 20px;
+    width: @size-20;
+    height: @size-20;
     opacity: 0;
     cursor: se-resize;
     transition: opacity 0.3s ease-in-out;
@@ -113,7 +136,7 @@ body.c8y-grid-dashboard > .card.card-dashboard.cdk-drag-preview {
   }
 }
 
-.fullscreen-dashboard {
+.fullscreen-dashboard-styles {
   overflow: hidden;
   .navigator,
   .app-main-header {
@@ -144,8 +167,8 @@ body.c8y-grid-dashboard > .card.card-dashboard.cdk-drag-preview {
     z-index: 1085 !important;
     overflow-y: auto;
     margin: 0 !important;
-    padding-top: calc(@margin-base * 10);
-    padding-bottom: 24px !important;
+    padding-top: calc(@size-base * 10);
+    padding-bottom: @size-24 !important;
     width: 100vw;
     height: 99vh;
     .c8y-scrollbar();
@@ -167,39 +190,43 @@ body.c8y-grid-dashboard > .card.card-dashboard.cdk-drag-preview {
   }
 }
 
+.fullscreen-dashboard {
+  .fullscreen-dashboard-styles();
+}
+
 // hide action bar when a single widget is in fullscreen
 .singleWidget {
-  .c8y-ui-action-bar{
-    display: none!important;
+  .c8y-ui-action-bar {
+    display: none !important;
   }
-  .dashboard-grid-child:not(.fullscreen){
-    display: none!important;
+  .dashboard-grid-child:not(.fullscreen) {
+    display: none !important;
   }
   .dashboard-grid-child.fullscreen {
     position: fixed;
-    inset: 24px;
+    inset: @size-24;
     z-index: 100;
-    margin: 0!important;
+    margin: 0 !important;
   }
-  .dashboard{
-    overflow: hidden!important;
+  .dashboard {
+    overflow: hidden !important;
   }
 }
 
 :-webkit-full-screen:not(:root) {
-  .fullscreen-dashboard();
+  .fullscreen-dashboard-styles();
 }
 
 :-moz-full-screen:not(:root) {
-  .fullscreen-dashboard();
+  .fullscreen-dashboard-styles();
 }
 
 :-ms-fullscreen:not(:root) {
-  .fullscreen-dashboard();
+  .fullscreen-dashboard-styles();
 }
 
 :fullscreen:not(:root) {
-  .fullscreen-dashboard();
+  .fullscreen-dashboard-styles();
 }
 
 body .dashboard-preview-slot {
@@ -216,13 +243,13 @@ body .dashboard-preview-slot {
     right: 0;
     bottom: 0;
     left: 0;
-    margin: 0!important;
+    margin: 0 !important;
   }
 }
 body fieldset > .dashboard-preview-slot {
   border: 0;
   padding: 0;
-  margin: 0!important;
+  margin: 0 !important;
 }
 
 // title hidden
@@ -268,13 +295,13 @@ body fieldset > .dashboard-preview-slot {
         }
 
         .leaflet-top .leaflet-control {
-          margin-top: 16px;
+          margin-top: @size-16;
         }
         .c8y-map-status {
           margin-top: 0;
         }
         .sticky-top {
-          padding-top: @margin-base;
+          padding-top: @size-base;
         }
       }
     }
@@ -322,10 +349,10 @@ body fieldset > .dashboard-preview-slot {
           margin-top: 40px;
         }
         .c8y-map-status {
-          margin-top: 24px;
+          margin-top: @size-24;
         }
         .sticky-top {
-          padding-top: @margin-base;
+          padding-top: @size-base;
         }
       }
     }
@@ -357,24 +384,24 @@ body fieldset > .dashboard-preview-slot {
   }
 }
 
-.dashboard-template-marker{
+.dashboard-template-marker {
   color: var(--palette-status-info, var(--c8y-palette-status-info));
-  line-height: .5;
-  font-size: 10px;
+  line-height: 0.5;
+  font-size: @size-10;
   font-weight: bold;
-  padding: 4px 3px;
+  padding: @size-4 3px;
   border: 1px solid;
   height: 14px;
   display: inline-block;
-  &::before{
+  &::before {
     content: 'T';
   }
   .label &,
-  .tag &{
+  .tag & {
     position: static;
-      margin: 0 4px 0 -4px;
+    margin: 0 @size-4 0 calc(-1 * @size-4);
   }
-  .tag--info &{
+  .tag--info & {
     color: inherit;
   }
 }

package/styles/dashboard/_c8y-gauges.less

@@ -1,3 +1,19 @@
+
+@import "../core/buttons/_buttons.less";
+
+/**
+ * Gauges - Radial gauge widget styles
+ *
+ * Note: Uses @size-base for padding and @size-4 for border-radius.
+ *
+ * Intentionally hardcoded values:
+ * - Percentages (99%): Near-full dimensions
+ * - Aspect-ratio (1): Square ratio
+ * - Transition duration (0.25s): Animation timing
+ * - Outline width (1px): Standard border
+ * - Outline-offset (-2px): Inset positioning
+ */
+
 @image-directory: if(@use-relative-paths, '../../img/', 'img/');
 
 .c8y-radial-gauge {
@@ -11,17 +27,17 @@
   }
   &__preset {
     .btn-clean();
-    padding: @margin-base!important;
+    padding: @size-base !important;
     display: flex;
     flex-direction: column;
     align-items: center;
     cursor: pointer;
     transition: all 0.25s linear;
     outline: 0;
-    &:hover, &.selected{
+    &:hover, &.selected {
       outline: 1px solid @component-brand-primary;
       outline-offset: -2px;
-      border-radius: 4px;
+      border-radius: @size-4;
     }
 
     &.preset-custom::before {
@@ -38,7 +54,7 @@
       }
     }
 
-    .c8y-radial-gauge--square{
+    .c8y-radial-gauge--square {
       pointer-events: none;
     }
   }

package/styles/dashboard/_dashboard-widgets.less

@@ -1,3 +1,17 @@
+
+/**
+ * Dashboard Widgets - Widget-specific styles for dashboards
+ *
+ * Note: Uses @component-padding and @size-16 for spacing. Uses @text-muted for colors.
+ *
+ * Intentionally hardcoded values:
+ * - Clamp font-size (14px, 75%, 54px): Responsive font constraints
+ * - Transition duration (0.25s): Animation timing
+ * - Bottom positioning (12px): Off-grid fine-tuning
+ * - Aspect-ratio (281/148): Specific thumbnail ratio
+ * - Min-height (240px): Chart container height
+ */
+
 .kpi-widget__container {
   padding: 0 @component-padding @component-padding;
   .panel-title-hidden & {
@@ -15,7 +29,7 @@
 .pie-chart-warning {
   position: absolute;
   bottom: 12px;
-  margin-left: 16px;
+  margin-left: @size-16;
 }
 
 .widget-thumbnail {
@@ -25,9 +39,8 @@
   object-position: top left;
 }
 
-
-.widget-preview{
-  .chart-container{
+.widget-preview {
+  .chart-container {
     min-height: 240px;
   }
 }

package/styles/dashboard/_info-gauge.less

@@ -1,12 +1,27 @@
+
+/**
+ * Info Gauge - SVG-based label-value-unit gauge widget
+ *
+ * Note: Uses @size-24 for padding and @size-10 for font-size. Uses color tokens.
+ *
+ * Intentionally hardcoded values:
+ * - SVG stroke-widths (24px, 22px, 7): Gauge appearance
+ * - SVG stroke-dasharray/-offset values (503, -503px, -125.75px): Gauge drawing calculations
+ * - Font-sizes (26px, 14px): Component-specific typography
+ * - Letter-spacing (-1px): Typography fine-tuning
+ * - Transition duration (0.25s): Animation timing
+ * - Min-height (280px): Chart container height
+ * - Container query breakpoint (150px): Responsive layout
+ * - Container query units (40cqw, 100cqh): Container-relative sizing
+ * - SVG em-based dasharray (0.03em, 5): Stroke pattern
+ */
+
 .label-value-unit-gauge {
   display: block;
-  padding: 0 @margin-24;
+  padding: 0 @size-24;
   min-height: 100%;
   .gauge-legend {
     width: 100%;
-  }
-
-  .gauge-legend {
     h3 {
       margin: 0;
     }
@@ -35,7 +50,7 @@
 
   .center-unit,
   .center-date-time {
-    font-size: 10px;
+    font-size: @size-10;
     fill: @text-muted;
     color: @text-muted;
   }

package/styles/dashboard/_quick-links-widget.less

@@ -1,3 +1,15 @@
+
+/**
+ * Quick Links Widget - Link list widget for dashboards
+ *
+ * Note: Uses @component-padding and @size-20 for spacing. Uses drawer color tokens.
+ *
+ * Intentionally hardcoded values:
+ * - Vertical padding (6px): Off-grid fine-tuning for link items
+ * - Outline width (2px): Focus indicator
+ * - Outline-offset (-2px): Inset positioning
+ */
+
 .c8y-quick-links__link {
   display: flex;
   align-items: center;
@@ -14,11 +26,9 @@
   [class^='dlt-c8y-icon-'],
   [class*=' dlt-c8y-icon-'],
   .c8y-icon {
-    font-size: 20px;
+    font-size: @size-20;
   }
-}
 
-.c8y-quick-links__link {
   &:active {
     background-color: @drawer-background-active;
   }

package/styles/{welcome-widget.less → dashboard/_welcome-widget.less}

@@ -1,3 +1,17 @@
+
+@import "../mixins/_tab-focus.less";
+
+/**
+ * Welcome Widget - Interactive welcome screen widget
+ *
+ * Note: Uses @size-8 for spacing. Uses color tokens and z-index variables.
+ *
+ * Intentionally hardcoded values:
+ * - Border/outline widths (1px, 2px): Standard border sizes
+ * - Outline-offset (-2px): Inset positioning
+ * - Transition durations (0.25s): Animation timing
+ */
+
 .welcome-widget {
   height: 100%;
   .welcome-illustration {
@@ -17,19 +31,22 @@
   }
   .card-group.interact-grid {
     margin-bottom: 0;
+
     .card {
-      margin-bottom: 8px;
       margin-top: 1px;
+      margin-bottom: @size-8;
       cursor: pointer;
-      transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
       outline: 1px solid @component-border-color;
-      
+      transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
+
+
       &:hover,
       &:focus {
         z-index: @zindex-navbar - 1;
         outline: 2px solid @component-brand-primary;
         outline-offset: -2px;
       }
+
       &:focus {
         .c8y-focus();
       }
@@ -44,7 +61,7 @@
 }
 
 body:not(:has(.c8y-logo)) {
-  #c8y-mark{
+  #c8y-mark {
     display: none;
   }
 }

package/styles/dashboard/{welcome.less → _welcome.less}

@@ -1,37 +1,62 @@
+
+/**
+ * Welcome - Welcome dashboard layout styles
+ *
+ * Note: Uses @size-* tokens for spacing and design tokens for colors.
+ *
+ * Intentionally hardcoded values:
+ * - Flex basis/min-width (120px, 230px): Card size breakpoints
+ * - Percentages (33.33333%, 25%, 14.28571429%): Fractional grid layout
+ * - Min-height (130px): Help card height
+ * - Font-size (85%): Relative typography
+ * - Negative margin -15px (off-grid): Fine-tuning
+ * - Margin-bottom 27px (off-grid): Specific spacing
+ */
+
 c8y-dashboard-gridstack.welcome {
   .grid-stack {
     height: auto !important;
   }
+
   .grid-stack-item.ui-draggable-disabled:not(.grid-floater) {
     position: relative;
-    top: inherit; // padding-left: (@grid-gutter-width / 2);
-    height: auto; // padding-right: (@grid-gutter-width / 2);
+    top: inherit;
+    height: auto;
+
     .grid-stack-item-content {
       position: static;
+
       .card-header-actions:after {
         display: none;
       }
+
       .card-inner-scroll {
         overflow: visible;
         height: auto;
+
         &:before,
         &:after {
           display: none;
         }
+
         > * {
           margin-bottom: 0;
         }
+
         .card-group-block > .card {
           border-radius: 0;
           background-color: @component-background-default;
         }
+
         .quicklinks > .card {
           flex: 1 0 120px;
           min-width: 120px;
+
           @media (min-width: @screen-sm-min) {
             flex: 1 0 230px;
             min-width: 230px;
           }
+
           .card-block {
             width: 100%;
           }
@@ -39,13 +64,16 @@ c8y-dashboard-gridstack.welcome {
       }
     }
   }
-  .grid-floater iframe:not(.twitter-timeline) {
-    width: 100% !important;
-    height: 100% !important;
-  }
-  .grid-floater .grid-stack-item-content {
-    margin: 0 !important;
-    margin-right: 15px !important;
+
+  .grid-floater {
+    iframe:not(.twitter-timeline) {
+      width: 100% !important;
+      height: 100% !important;
+    }
+
+    .grid-stack-item-content {
+      margin: 0 0 0 @size-16 !important;
+    }
   }
 
   @media (max-width: @screen-xs-max) {
@@ -58,11 +86,14 @@ c8y-dashboard-gridstack.welcome {
 [ng-controller='HelpAndSupportCtrl'] {
   display: flex;
   flex-flow: row wrap;
+
   > .card {
     flex: 0 0 33.33333%;
+
     @media (min-width: @screen-sm-min) {
       flex: 0 0 25%;
     }
+
     @media (min-width: @screen-md-min) {
       flex: 1 0 14.28571429%;
     }
@@ -70,18 +101,20 @@ c8y-dashboard-gridstack.welcome {
 }
 
 a.help-and-support-doc {
-  padding-bottom: 100%;
-  min-height: 130px;
   width: 100%;
+  min-height: 130px;
+  padding-bottom: 100%;
+
   > div {
-    -webkit-justify-content: flex-start;
     justify-content: flex-start;
-    padding: 20px 10px 0;
+    padding: @size-20 @size-10 0;
+
     img {
-      margin-bottom: 10px;
-      max-width: 24px;
-      max-height: 24px;
+      margin-bottom: @size-10;
+      max-width: @size-24;
+      max-height: @size-24;
     }
+
     p {
       color: var(--brand-primary, var(--c8y-brand-primary));
       font-size: 85%;
@@ -89,40 +122,16 @@ a.help-and-support-doc {
   }
 }
 
-.quick-link-bgcolor-a,
-.quick-link-bgcolor-b .quick-link-bgcolor-c,
-.quick-link-bgcolor-d,
-.quick-link-bgcolor-e,
-.quick-link-bgcolor-f {
-  position: relative;
-  border: 0 !important;
-  &::before {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: @black;
-    content: '';
-    opacity: 0.05;
-
-    .transition(opacity 0.25s ease);
-  }
-  &:hover {
-    &::before {
-      opacity: 0;
-    }
-  }
-}
-
 .welcome-dont-show {
   margin-top: -15px;
-  padding: 5px 0;
+  padding: @size-5 0;
+
   @media (min-width: @screen-sm-min) {
-    margin-top: -24px;
+    margin-top: calc(-1 * @size-24);
     margin-bottom: 27px;
   }
+
   @media (min-width: @grid-float-breakpoint) {
-    padding: 5px 15px;
+    padding: @size-5 @size-16;
   }
 }

package/styles/icons/_c8y-glyphs.less

@@ -1,3 +1,14 @@
+
+/**
+ * C8Y Glyphs - Custom icon font for glyphs (calendar, caret, check, dot)
+ *
+ * Note: Contains @font-face definition with base64-encoded font data.
+ *
+ * Intentionally hardcoded values:
+ * - Line-height (1): Unitless for proper icon alignment
+ * - Unicode content values: Icon font character codes
+ */
+
 /*!
 Force line break
 */
@@ -42,7 +53,7 @@ Force line break
 }
 .c8y-glyph-caret:before,
 .dlt-c8y-icon-caret-down:before {
-  content: @c8y-glyph-caret;
+  content: @c8y-glyph-caret!important;
 }
 .c8y-glyph-check:before {
   content: @c8y-glyph-check;