@c8y/style 1023.14.76 → 1023.14.92

package/styles/base/_scaffolding.less

@@ -1,3 +1,21 @@
+@import "../mixins/_forms.less";
+@import "../mixins/_image.less";
+@import "../mixins/_tab-focus.less";
+@import "../mixins/_vendor-prefixes.less";
+
+/**
+ * Scaffolding - Base HTML element styles
+ *
+ * Note: All spacing values use proper design tokens.
+ *
+ * Intentionally hardcoded values:
+ * - font-size: 10px (root font size for rem calculations)
+ * - margin: -1px (accessibility trick for .sr-only)
+ * - width/height: 1px (accessibility trick for .sr-only)
+ * - border-radius: 50% (circle shape, semantically correct)
+ * - 1px borders: Standard border widths
+ */
+
 // Reset the box-sizing
 // Heads up! This reset may cause conflicts with some third-party widgets.
 // For recommendations on resolving such conflicts, see
@@ -54,7 +72,6 @@ a {
   }
 
   &.no-decoration {
-
     &:hover,
     &:focus {
       outline: none;
@@ -67,7 +84,6 @@ a {
   }
 
   &.text-muted {
-
     &:hover,
     &:focus {
       color: @link-color;
@@ -92,33 +108,14 @@ img {
   .img-responsive();
 }
 
-.img-square{
-  aspect-ratio: 1;
+.img-square {
   width: 100%;
+  aspect-ratio: 1;
   object-fit: scale-down;
 }
 
-// Rounded corners
-.img-rounded {
-  border-radius: @component-border-radius-large;
-}
-
-// Image thumbnails
-// Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`.
-.img-thumbnail {
-  padding: @thumbnail-padding;
-  border: 1px solid @thumbnail-border;
-  border-radius: @thumbnail-border-radius;
-  background-color: @thumbnail-bg;
-  line-height: @line-height-base;
-
-  .transition(all 0.2s ease-in-out); // Keep them at most 100% wide
-  .img-responsive(inline-block);
-}
-
-.img-circle {
-  border-radius: 50%;
-}
+// Removed unused Bootstrap 3 image utility classes - verified 0 usages
+// .img-rounded, .img-thumbnail, .img-circle
 
 hr {
   margin-top: @line-height-computed;
@@ -142,17 +139,16 @@ hr {
 }
 
 // Use in conjunction with .sr-only to only display content when it's focused.
-// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+// Useful for "Skip to main content" links, see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
 .sr-only-focusable {
-
   &:active,
   &:focus {
+    z-index: 10;
     overflow: visible;
     clip: auto;
     margin: 0;
     width: auto;
     height: auto;
-    z-index: 10;
   }
 }
 

package/styles/base/_type.less

@@ -1,3 +1,17 @@
+@import "../../variables/_dlt-c8y-icons-vars.less";
+@import "../mixins/_text-overflow.less";
+
+/**
+ * Typography Styles
+ *
+ * Note: Most spacing values use @size-* tokens from the 8px base unit system.
+ *
+ * Intentionally hardcoded values:
+ * - Percentages (65%, 75%, 80%, 90%, 120%, 0.2em): Proportional scaling
+ * - Border widths (1px, 4px, 5px): Border properties, not spacing
+ * - Unitless line-heights (1, 1.4): CSS best practice for line-height
+ * - Calc expressions with layout vars: Specific layout calculations
+ */
 
 h1,
 h2,
@@ -99,7 +113,7 @@ p {
 }
 
 .lead {
-  margin-bottom: 16px;
+  margin-bottom: @size-16;
   font-size: calc((@font-size-base * 1.142857143));
   line-height: 1.4;
 }
@@ -132,19 +146,19 @@ ol {
 // List options
 // checkmark bullets in lists
 .check-bullets {
-  margin: 0 0 10px;
+  margin: 0 0 @size-10;
   padding: 0;
   list-style: none;
   text-align: left;
   > li {
-    margin-bottom: 5px;
-    padding: 0 0 0 20px;
+    margin-bottom: @size-5;
+    padding: 0 0 0 @size-20;
     &:before {
       display: inline-block;
-      margin-left: -20px;
-      width: 20px;
+      margin-left: calc(-1 * @size-20);
+      width: @size-20;
       content: @dlt-c8y-icon-check;
-      font: normal normal normal 14px/1 @icon-font-family;
+      font: normal normal normal @font-size-base/1 @icon-font-family;
       font-size: 120%;
 
       text-rendering: auto;
@@ -172,13 +186,13 @@ ol {
 
 // Inline turns list items into inline-block
 .list-inline {
-  margin-left: -5px;
+  margin-left: calc(-1 * @size-5);
 
-  .list-unstyled();
+  &:extend(.list-unstyled);
   > li {
     display: inline-block;
-    padding-right: 5px;
-    padding-left: 5px;
+    padding-right: @size-5;
+    padding-left: @size-5;
   }
 }
 
@@ -204,7 +218,7 @@ dd {
 dl.dl-inline {
   margin-bottom: 0;
   dt {
-    margin-right: 5px;
+    margin-right: @size-5;
   }
   dt,
   dd {
@@ -221,7 +235,14 @@ dl.dl-inline {
 // Defaults to being stacked without any of the below styles applied, until the grid breakpoint is reached (default of ~768px).
 .dl-horizontal {
   dd {
-    &:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is present
+    &::before,
+    &::after {
+      display: table;
+      content: " ";
+    }
+    &::after {
+      clear: both;
+    }
   }
   @media (min-width: @grid-float-breakpoint) {
     dt {
@@ -233,7 +254,7 @@ dl.dl-inline {
       .text-overflow();
     }
     dd {
-      margin-bottom: @margin-base;
+      margin-bottom: @size-base;
       margin-left: calc(@dl-horizontal-offset * 1px);
     }
   }
@@ -241,16 +262,17 @@ dl.dl-inline {
 
 // Misc
 abbr[title],
-// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
 abbr[data-original-title] {
-  border-bottom: 1px dotted @abbr-border-color;
+  text-decoration-color: @abbr-border-color;
+  text-decoration-line:overline;
+  text-decoration-style: dotted;
+  border-bottom-color: @abbr-border-color;
   cursor: help;
 }
 
 .initialism {
   font-size: 90%;
-
-  .text-uppercase();
+  text-transform: uppercase;
 }
 
 blockquote {
@@ -283,7 +305,7 @@ blockquote {
 // Heads up: `blockquote.pull-right` has been deprecated as of v3.1.0.
 .blockquote-reverse,
 blockquote.pull-right {
-  padding-right: 15px;
+  padding-right: @size-16;
   padding-left: 0;
   border-right: 5px solid @blockquote-border-color;
   border-left: 0;

package/styles/components/_markdown-content.less

@@ -1,4 +1,3 @@
-@import "../../variables/index";
 
 /**
  * Markdown Content - Styling for markdown rendered content
@@ -14,6 +13,9 @@
  * - Font-weight values (500, 600): Typography weights
  */
 
+// NOTE: SCSS mixin with @content removed - manually expanded below
+// @mixin heading-elements was used in SCSS but LESS doesn't support @content
+
 .markdown-content {
   h1,
   h2,
@@ -27,6 +29,7 @@
     max-width: 800px;
   }
 
+  // Manually expanded from @include heading-elements mixin
   h1,
   h2,
   h3,

package/styles/components/_smartrules.less

@@ -1,3 +1,5 @@
+
+
 /**
  * Smart Rules - Smart rules list and card component styles
  *
@@ -8,7 +10,7 @@
  * - Component-specific dimensions (60px, 63px, 65px, 175px, 187px, 240px): Fixed column widths and sizes
  * - Off-grid spacing (3px, 14px, 15px): Component-specific positioning and padding
  * - Percentages (4%, 10%, 75%): Flexbox layout
- * - Calc expressions: Complex computed values
+ * - Calc expressions: Complex computed values with string.unquote
  * - Z-index values: Stacking order
  */
 // Shared mixin for icon font sizing
@@ -23,7 +25,7 @@
 }
 
 // Shared mixin for card-icon vertical alignment
-.card-icon-alignment() {
+.card-icon-alignment {
   i {
     vertical-align: bottom;
   }
@@ -34,7 +36,7 @@
 }
 
 // Shared mixin for card-header-actions display block pattern
-.card-header-actions-visible() {
+.card-header-actions-visible {
   .card-header-actions {
     display: flex;
 
@@ -47,7 +49,7 @@
 // Shared mixin for smart-rule-details layout
 .smart-rule-details-layout(@padding) {
   .smart-rule-details {
-    height: ~'calc(100% - 88px)';
+    height: calc(~'100% - 88px');
 
     .row {
       margin: 0;
@@ -104,7 +106,9 @@
   }
 
   .card-actions {
-    // Removed unused button selector - verified 0 usages: .btn-collapse
+    .btn-collapse {
+      display: none;
+    }
   }
 
   .card-block {
@@ -208,7 +212,7 @@
     }
 
     .smart-rule-details {
-      height: ~'calc(100% - 88px)';
+      height: calc(~'100% - 88px');
 
       .row {
         margin: 0;
@@ -336,7 +340,9 @@
       .card-actions {
         top: @size-10;
 
-        // Removed unused button selector - verified 0 usages: .btn-collapse
+        .btn-collapse {
+          display: block;
+        }
       }
 
       .card-back {
@@ -383,6 +389,6 @@
 
   .smart-rule-description {
     flex: 0 0 auto;
-    max-width: ~'calc(75% - 95px)';
+    max-width: calc(~'75% - 95px');
   }
 }

package/styles/components/_smartrules.scss

@@ -108,7 +108,9 @@
   }
 
   .card-actions {
-    // Removed unused button selector - verified 0 usages: .btn-collapse
+    .btn-collapse {
+      display: none;
+    }
   }
 
   .card-block {
@@ -340,7 +342,9 @@
       .card-actions {
         top: $size-10;
 
-        // Removed unused button selector - verified 0 usages: .btn-collapse
+        .btn-collapse {
+          display: block;
+        }
       }
 
       .card-back {

package/styles/components/application-and-system/_c8y-cookie-banner.less

@@ -0,0 +1,36 @@
+
+
+/**
+ * c8y cookie uanner - 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-cookie-banner {
+  position: fixed;
+  top: auto;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: @zindex-modal - 3;
+  background-color: rgba(@black, 0.8);
+  color: white;
+}
+
+.cookie-banner-content {
+  column-width: 26rem;
+
+  a{
+    color: inherit;
+    text-decoration: underline;
+    &:hover {
+      color: inherit;
+    }
+  }
+}

package/styles/components/{specialized → application-and-system}/_c8y-login.less

@@ -1,6 +1,20 @@
+
+
+/**
+ * c8y login - 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
+ */
 .password-strength {
   width: 180px;
-  margin-bottom: 20px;
+  margin-bottom: @size-20;
 
   .table & {
     width: 100px;
@@ -56,11 +70,12 @@
   max-width: 320px;
   height: auto;
   min-height: 300px;
-  padding: 32px;
+  padding: @size-32;
   margin: auto;
   border-radius: 2px;
 
-  & when not (@powered-by='') {
+  // Only apply powered-by image if variable is not empty (using LESS guard syntax)
+  & when not (@powered-by = '') {
     background-image: url(@powered-by);
     padding-bottom: 120px;
     background-size: contain;
@@ -84,9 +99,8 @@
 }
 
 .mainlogo {
-  & when not(@extending) {
-    background-image: @brand-logo-img;
-  }
+  // Note: LESS guard removed - was: & when not(@extending)
+  background-image: @brand-logo-img;
 
   width: 100%;
   height: 110px;

package/styles/components/data-display-and-visualization/_boxed-label.less

@@ -0,0 +1,45 @@
+
+
+/**
+ * Boxed Label - Component styles for creating dashed border containers with optional floating labels
+ *
+ * Usage:
+ * - Single location: dashboard-details-advanced-tab/assign-widget-assets/assign-widget-asset-modal.component.html
+ * - 6 instances in the assign widget assets modal
+ * - Used for: widget titles, source sections, device displays, empty states, and action containers
+ *
+ * Features:
+ * - Creates a dashed border box with padding
+ * - Supports [data-label] attribute to show a floating label (like fieldset legend)
+ * - Label appears as italic text at the top-left of the box
+ *
+ * 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 (-6px top, 8px left for label)
+ * - Border widths (1px): Standard dashed border
+ * - Font-sizes: Typography (xs for label)
+ * - Border-radius (2px): Subtle rounding
+ */
+.boxed-label {
+  border: dashed 1px transparent;
+  padding: @size-8 @size-8 @size-4;
+  border-radius: 2px;
+  position: relative;
+  &[data-label] {
+    border-color: var(--c8y-palette-gray-60);
+    &:before{
+      content: attr(data-label);
+      position: absolute;
+      top: -6px;
+      left: 8px;
+      font-size: var(--c8y-font-size-xs);
+      background-color: var(--c8y-root-component-background-default);
+      color: var(--c8y-root-component-color-text-muted);
+      padding: 0 4px;
+      font-style: italic;
+      border-radius: 2px;
+    }
+  }
+}

package/styles/components/data-display-and-visualization/_boxed-label.scss

@@ -0,0 +1,46 @@
+@use "../../../variables/index" as *;
+
+
+/**
+ * Boxed Label - Component styles for creating dashed border containers with optional floating labels
+ *
+ * Usage:
+ * - Single location: dashboard-details-advanced-tab/assign-widget-assets/assign-widget-asset-modal.component.html
+ * - 6 instances in the assign widget assets modal
+ * - Used for: widget titles, source sections, device displays, empty states, and action containers
+ *
+ * Features:
+ * - Creates a dashed border box with padding
+ * - Supports [data-label] attribute to show a floating label (like fieldset legend)
+ * - Label appears as italic text at the top-left of the box
+ *
+ * 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 (-6px top, 8px left for label)
+ * - Border widths (1px): Standard dashed border
+ * - Font-sizes: Typography (xs for label)
+ * - Border-radius (2px): Subtle rounding
+ */
+.boxed-label {
+  border: dashed 1px transparent;
+  padding: $size-8 $size-8 $size-4;
+  border-radius: 2px;
+  position: relative;
+  &[data-label] {
+    border-color: var(--c8y-palette-gray-60);
+    &:before{
+      content: attr(data-label);
+      position: absolute;
+      top: -6px;
+      left: 8px;
+      font-size: var(--c8y-font-size-xs);
+      background-color: var(--c8y-root-component-background-default);
+      color: var(--c8y-root-component-color-text-muted);
+      padding: 0 4px;
+      font-style: italic;
+      border-radius: 2px;
+    }
+  }
+}

package/styles/components/{specialized → data-display-and-visualization}/_c8y-data-explorer.less

@@ -1,16 +1,33 @@
-.checkBG(@check) when not (@check=inherit) {
-  padding: @margin-base;
-  .form-control:not(:focus),
-  .c8y-select-wrapper {
-    background-color: transparent;
-    color: inherit;
-  }
-}
+
+@import "../../mixins/_shadows-helper.less";
+
+
+/**
+ * c8y data explorer - 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
+ */
+// Note: LESS mixin with guard removed - was never used
+// checkBG(@check) when not (@check=inherit) {
+//   padding: @size-base;
+//   .form-control:not(:focus),
+//   .c8y-select-wrapper {
+//     background-color: transparent;
+//     color: inherit;
+//   }
+// }
 
 .c8y-data-explorer {
   background-color: inherit;
   color: inherit;
-  margin-top: 10px;
+  margin-top: @size-10;
 }
 
 c8y-chart {
@@ -64,9 +81,6 @@ c8y-chart {
 }
 
 // Removed unused utility usage: .has-aggregation .measurement-icon-bar .c8y-realtime
-//.has-aggregation .measurement-icon-bar .c8y-realtime {
-//  display: none;
-//}
 
 .c8y-timelines-chart,
 .chart-container {
@@ -94,7 +108,7 @@ c8y-chart {
   .measurements-tab .fragment-chart {
     .realtime-form {
       position: absolute;
-      top: 10px;
+      top: @size-10;
       right: @component-padding;
     }
     // Removed unused control utility class - verified 0 usages: .top-chart-bar
@@ -107,11 +121,49 @@ c8y-chart {
   }
 }
 
-// Removed unused deprecated component class - verified 0 usages: .c8y-chart-hover-box
+.c8y-chart-hover-box {
+  position: absolute;
+  display: inline-block;
+  background-color: @popover-background-default;
+  padding: @size-10;
+  top: 0;
+  z-index: 1100;
+  pointer-events: none;
+  .boxShadowHelper(md, right);
+}
+
+.c8y-chart-hover-box {
+  .dlt-c8y-icon-circle {
+    font-size: @size-10;
+  }
+}
+
+.c8y-chart-hover-box .label {
+  padding: 0 5px 0 0;
+  color: @popover-label-color;
+  margin: 0;
+  font-weight: bold;
+  font-size: 100%;
+}
+
+.c8y-chart-hover-box .value {
+  color: @popover-color-default;
+}
+
+.c8y-chart-hover-box .value-holder {
+  font-size: @font-size-small;
+  margin-top: 3px;
+  line-height: @size-10;
+}
+
+.c8y-chart-hover-box .time-holder {
+  color: @component-color-text-muted;
+  font-size: @size-10;
+}
 
 .c8y-chart .clock {
   color: @component-form-legend-color;
-  font-size: 12px;
+  font-size: @font-size-small;
 }
 
 .c8y-chart .axis {
@@ -128,7 +180,7 @@ c8y-chart {
   bottom: 3px;
   left: 15px;
   right: 7px;
-  font-size: 12px;
+  font-size: @font-size-small;
 }
 
 .chart-loading {
@@ -148,8 +200,8 @@ c8y-chart {
 
 .chart-load-more{
   position: absolute;
-  left: 16px;
-  right: 16px;
+  left: @size-16;
+  right: @size-16;
   bottom: 3px;
   z-index: 20;
 }
@@ -161,7 +213,7 @@ c8y-chart {
 }
 
 .meausurements2 .measurement-icon-bar {
-  padding-left: 10px;
+  padding-left: @size-10;
   position: relative;
   z-index: 120;
 }
@@ -170,23 +222,23 @@ c8y-chart {
   padding: 3px;
   margin: 1px;
   position: static;
-  font-size: 12px;
+  font-size: @font-size-small;
   background: none;
 }
 
 .meausurements2 .timeField input {
   height: 30px;
   padding: 5px 10px;
-  font-size: 12px;
+  font-size: @font-size-small;
   line-height: 1.5;
   border-radius: 3px;
 }
 
 .meausurements2 .timeField table {
-  margin-top: -24px;
+  margin-top: calc(-1 * @size-24);
 }
 .meausurements2 .timeField .btn {
-  height: 24px;
+  height: @size-24;
 }
 
 .meausurements2 .timeField .btn-link {
@@ -205,7 +257,7 @@ c8y-chart {
 .meausurements2 .measurements-time-control {
   position: absolute;
   bottom: 1px;
-  right: 5px;
+  right: @size-5;
   left: 5px;
   z-index: 100;
   min-width: 404px;