@c8y/style 1023.37.0 → 1023.43.2

package/styles/base/_print.less

@@ -1,7 +1,21 @@
+
+/**
+ * Print Styles - Media query for print layouts
+ *
+ * Note: Most spacing values use @size-* tokens from the 8px base unit system.
+ *
+ * Intentionally hardcoded values:
+ * - transform: scale(0.97): Scale factor, not spacing
+ * - 1px borders: Standard border widths for print
+ * - z-index values: Stacking context for print layout
+ * - 100vw/99vh: Full viewport dimensions
+ * - orphans/widows: Typography print control
+ */
+
 @media print {
   body {
     --c8y-elevation-sm: 0 0 0 1px rgba(var(--c8y-elevation-color), 0.1);
-    transform: scale(.97);
+    transform: scale(0.97);
   }
 
   *,
@@ -57,9 +71,9 @@
   }
 
   .btn,
-  .dropup>.btn {
-    >.caret {
-      border-top-color: @black  !important;
+  .dropup > .btn {
+    > .caret {
+      border-top-color: @black !important;
     }
   }
 
@@ -68,15 +82,14 @@
 
     td,
     th {
-      background-color: @component-background-default  !important;
+      background-color: @component-background-default !important;
     }
   }
 
   .table-bordered {
-
     th,
     td {
-      border: 1px solid @gray-90  !important;
+      border: 1px solid @gray-90 !important;
     }
   }
 
@@ -93,13 +106,13 @@
     all: unset;
     margin-top: 0;
     margin-left: 0 !important;
-    padding: 0 24px !important;
+    padding: 0 @size-24 !important;
 
     &:has(.dashboard) {
       padding: 0 !important;
     }
 
-    >.container-fluid {
+    > .container-fluid {
       padding-bottom: 0;
     }
   }
@@ -116,11 +129,11 @@
     z-index: 1085 !important;
     overflow-y: auto;
     margin: 0 !important;
-    padding-top: calc(@margin-base * 4) !important;
-    padding-bottom: 24px !important;
+    padding-top: calc(@size-base * 4) !important;
+    padding-bottom: @size-24 !important;
     width: 100vw;
     height: 99vh;
-    .c8y-scrollbar();
+    &:extend(.c8y-scrollbar);
 
     .dashboard {
       padding-bottom: 0 !important;

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;
+    }
+  }
+}