@c8y/style 1023.37.0 → 1023.42.1

package/styles/components/data-display-and-visualization/lists/_c8y-list-group.less

@@ -1,3 +1,26 @@
+
+@import "../../../../variables/_dlt-c8y-icons-vars.less";
+@import "../../../animations/_component-animations.less";
+@import "../../../core/buttons/_buttons.less";
+@import "../../../mixins/_tab-focus.less";
+
+/**
+ * C8Y List Group - Modern list component with flexible layouts
+ *
+ * Note: Uses @size-* tokens for spacing; @size-base for calculations, and @component-padding.
+ *
+ * Intentionally hardcoded values:
+ * - Off-token spacing (6px): Triangle and badge offsets not in token system
+ * - Border widths (1px): Standard borders
+ * - Negative offsets (-1px, -2px): Fine-tuning
+ * - Percentages (100%): Layout
+ * - Line-height values: Text alignment
+ * - Transition durations: Animation timing
+ * - Box-shadow values: Borders and elevation
+ * - RGBA values: Transparency
+ * - Z-index values: Stacking order
+ */
+
 .c8y-list {
   &__group {
     margin: 0;
@@ -45,7 +68,7 @@
       background-color: var(--brand-80, var(--c8y-brand-80));
     }
     &.selected{
-      border-left: 4px solid @component-color-active;
+      border-left: @size-4 solid @component-color-active;
       background-color: @component-background-default;
     }
     /* typeahead dropdown list items styling */
@@ -57,16 +80,26 @@
     bs-dropdown-container &, c8y-typeahead .dropdown &, .c8y-select-v2 .dropdown & {
       &.active,
       &.selectable:not(:has(c8y-li-checkbox)):active {
+        color: @component-color-active;
+
         .c8y-list__item__body {
 
           &:after{
-            .glyphicon();
+            display: inline-block;
+            text-transform: none;
+            font-weight: normal;
+            font-style: normal;
+            font-variant: normal;
+            font-family: '@{icon-font-family}' !important;
+            line-height: 1;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+
             float: right;
             content:  @dlt-c8y-icon-check;
             font-size: 18px;
           }
         }
-        color: @component-color-active;
       }
 
       /**
@@ -87,7 +120,16 @@
     &.selectable.active{
       .c8y-list__item__body {
         &:after{
-          .glyphicon();
+          display: inline-block;
+          text-transform: none;
+          font-weight: normal;
+          font-style: normal;
+          font-variant: normal;
+          font-family: "dlt-c8y-icons" !important;
+          line-height: 1;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+
           float: right;
           content:  @dlt-c8y-icon-check;
         }
@@ -98,7 +140,7 @@
       transition: border-left 0.15s linear;
     }
     &.active:not(.selectable){
-      border-left: 4px solid @component-color-active;
+      border-left: @size-4 solid @component-color-active;
     }
 
     &.disabled {
@@ -109,8 +151,8 @@
     > .expanded,
     &.expanded {
       background-color: @component-background-expanded;
-      .separator-bottom();
-      --c8y-nav-tabs-background-active: @component-background-expanded;
+      &:extend(.separator-bottom);
+      --c8y-nav-tabs-background-active: @{component-background-expanded};
 
       .c8y-list__item__title {
         font-weight: 500;
@@ -122,7 +164,7 @@
     }
 
     &--empty-actions {
-      padding-right: 40px;
+      padding-right: @size-40;
 
       .c8y-list__item__body {
         padding-right: 0 !important;
@@ -213,8 +255,8 @@ a.c8y-list__item {
 
 c8y-load-more.c8y-list__item {
   .btn {
-    margin-top: @margin-8;
-    margin-bottom: @margin-8;
+    margin-top: @size-8;
+    margin-bottom: @size-8;
   }
 }
 
@@ -274,7 +316,7 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
       padding-left: 0 !important;
     }
     + c8y-li-checkbox {
-      padding-left: 16px!important;
+      padding-left: @size-16!important;
     }
   }
 }
@@ -294,23 +336,23 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
 .c8y-list__item:hover {
   c8y-li-drag-handle:not(:empty) {
     max-width: 100px;
-    padding-left: @margin-8;
+    padding-left: @size-8;
   }
 
   c8y-list-item-drag-handle:not(:empty) {
     max-width: 100px;
-    padding-left: @margin-8;
+    padding-left: @size-8;
   }
 }
 
 .c8y-list__item__actions {
   display: flex;
-  padding: @margin-base 0;
+  padding: @size-base 0;
 
   .c8y-dropdown,
   .collapse-btn {
     opacity: @component-actions-opacity;
-    min-width: 40px;
+    min-width: @size-40;
 
     &:hover {
       opacity: 1;
@@ -362,21 +404,21 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
   min-height: 56px;
   bs-dropdown-container &, c8y-typeahead .dropdown &, .c8y-list__item--dense & {
     min-height: 36px;
-    padding-top: @margin-base;
-    padding-bottom: @margin-base;
+    padding-top: @size-base;
+    padding-bottom: @size-base;
   }
 }
 
 .c8y-list__item__body {
-  padding-top: calc(@margin-base + 10px);
-  padding-bottom: calc(@margin-base + 10px);
+  padding-top: calc(@size-base + @size-10);
+  padding-bottom: calc(@size-base + @size-10);
   /**
    * @Carlos: Would be nice to not only have the dense class
    * pm the list but also on the list items if [dense] is set.
    **/
   .dropdown-menu &, .c8y-list__item--dense & {
-    padding-top: @margin-base;
-    padding-bottom: @margin-base;
+    padding-top: @size-base;
+    padding-bottom: @size-base;
   }
 
 }
@@ -390,7 +432,7 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
   .c8y-list__item__radio,
   .c8y-list__item__colorpicker,
   .c8y-list__item__actions {
-    min-height: 40px;
+    min-height: @size-40;
     padding-top: 7px;
     padding-bottom: 7px;
   }
@@ -401,8 +443,8 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
   }
 
   .c8y-list__item__body {
-    padding-top: 10px;
-    padding-bottom: 10px;
+    padding-top: @size-10;
+    padding-bottom: @size-10;
   }
 }
 
@@ -423,9 +465,9 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
 }
 
 .c8y-list__item__icon {
-  font-size: 20px;
+  font-size: @size-20;
   color: @component-icon-color;
-  min-height: 40px;
+  min-height: @size-40;
   line-height: @line-height-computed;
 
   > device-status {
@@ -488,7 +530,7 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
 .c8y-list__item__collapse--container {
   padding: @component-padding;
   @media (min-width: @screen-md-min) {
-    padding: @component-padding calc(@margin-48 + 6px) 2rem;
+    padding: @component-padding calc(@size-48 + 6px) 2rem;
   }
   .full-w-collapse &{
     padding: @component-padding;
@@ -597,9 +639,9 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
       top: 50%;
       left: 80px;
       z-index: 3;
-      margin: -10px 0 0 -6px;
-      width: 12px;
-      height: 12px;
+      margin: calc(-1 * @size-10) 0 0 -6px;
+      width: calc(@size-base * 1.5);
+      height: calc(@size-base * 1.5);
       border-radius: 50%;
       background-color: transparent;
       content: '';
@@ -636,7 +678,7 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
 
   .c8y-list--timeline__item__date {
     margin-left: 1px;
-    margin-right: 40px;
+    margin-right: @size-40;
     width: 64px;
     font-size: @font-size-xs;
     line-height: 1.2;
@@ -662,7 +704,7 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
     overflow: visible;
     flex-grow: 1;
     margin-top: 0;
-    margin-bottom: 8px;
+    margin-bottom: @size-8;
     border-radius: 0.25rem;
     box-shadow: inset 0 0 0 1px @component-border-color;
     filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
@@ -674,11 +716,11 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
     &:not(:has(>button))::before {
       position: absolute;
       top: 50%;
-      left: -10px;
-      margin-top: -10px;
+      left: calc(-1 * @size-10);
+      margin-top: calc(-1 * @size-10);
       width: 0;
       height: 0;
-      border-width: 10px 10px 10px 0;
+      border-width: @size-10 @size-10 @size-10 0;
       border-style: solid;
       border-color: transparent @component-border-color transparent transparent;
       content: '';
@@ -688,11 +730,11 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
     &:not(:has(>button))::after {
       position: absolute;
       top: 50%;
-      left: -8px;
-      margin-top: -10px;
+      left: calc(-1 * @size-8);
+      margin-top: calc(-1 * @size-10);
       width: 0;
       height: 0;
-      border-width: 10px 10px 10px 0;
+      border-width: @size-10 @size-10 @size-10 0;
       border-style: solid;
       border-color: transparent var(--c8y-root-component-background-default) transparent transparent;
       content: '';
@@ -731,9 +773,9 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
     .c8y-list__item {
       box-shadow: inset 0 0 0 1px @component-color-accent;
       &::before {
-        left: -10px;
-        margin-top: -10px;
-        border-width: 10px 10px 10px 0;
+        left: calc(-1 * @size-10);
+        margin-top: calc(-1 * @size-10);
+        border-width: @size-10 @size-10 @size-10 0;
         border-color: transparent @component-color-accent transparent transparent;
       }
       &::after {
@@ -742,5 +784,3 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
     }
   }
 }
-
-

package/styles/components/data-display-and-visualization/lists/_cards-layout.less

@@ -1,3 +1,25 @@
+
+@import "../../../mixins/_shadows-helper.less";
+@import "../../../mixins/_vendor-prefixes.less";
+
+/**
+ * Cards Layout - Flex grid layout for card groups
+ *
+ * Note: Uses @size-* tokens for spacing; @grid-gutter-width for grid spacing, and component variables.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (54px, 75px, 116px, 136px, 230px): Card heights and widths
+ * - Negative grid gutter: -0.5 multiplier for negative margins
+ * - Percentages (50%, 100%): Layout and flex values
+ * - Border widths (1px, 2px): Standard borders and outlines
+ * - Negative offsets (-2px): Fine-tuning
+ * - Transition durations (0.1s, 0.2s): Animation timing
+ * - Transform values: translate and scale
+ * - Box-shadow values: Elevation and shadow effects
+ * - RGBA values: Transparency
+ * - Z-index values (1, 2): Stacking order
+ */
+
 /* flex grid for card groups*/
 
 .card-group,
@@ -5,7 +27,7 @@
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
-  margin-bottom: @margin-16;
+  margin-bottom: @size-16;
 }
 
 .card-group {
@@ -75,7 +97,7 @@
         > .d-contents > .card {
           display: flex;
           margin-bottom: 0;
-          padding: @margin-base 0;
+          padding: @size-base 0;
           box-shadow: inset 0 -1px 0 @component-border-color;
 
           > hr {
@@ -86,7 +108,7 @@
 
       .card-header {
         flex: 0 0 auto;
-        padding: calc(@margin-base + 2px) @component-padding;
+        padding: calc(@size-base + 2px) @component-padding;
         width: 20%;
         border-bottom: 0;
         .card-title {
@@ -99,12 +121,12 @@
         }
         .statusContainer {
           margin-left: -2px;
-          font-size: 20px;
+          font-size: @size-20;
         }
       }
 
       .card-appicon {
-        margin-right: @margin-base;
+        margin-right: @size-base;
         padding-top: 0;
         height: 22px;
         font-size: 22px;
@@ -116,8 +138,8 @@
         align-items: center;
         flex-flow: row nowrap;
         flex-grow: 1;
-        padding: 10px;
-        min-height: calc(@margin-base * 6px);
+        padding: @size-10;
+        min-height: calc(@size-base * 6px);
         p {
           margin: 0;
           padding: 0 5px;
@@ -139,8 +161,8 @@
         .card-header,
         .card-footer,
         .card-actions-group {
-          padding-top: 4px;
-          padding-bottom: 4px;
+          padding-top: @size-4;
+          padding-bottom: @size-4;
           min-height: @page-sticky-header-height;
           text-align: left;
         }
@@ -190,7 +212,7 @@
       }
 
       .card-actions {
-        top: @margin-8;
+        top: @size-8;
 
         ~ .card-block {
           margin-right: 44px;
@@ -201,9 +223,9 @@
           }
 
           + .card-footer {
-            margin-right: 40px;
+            margin-right: @size-40;
             margin-left: auto;
-            padding: 10px;
+            padding: @size-10;
 
             &.separator {
               border-top: 0;
@@ -224,7 +246,7 @@
 
       .smart-rule-list-card {
         .card-actions {
-          top: 10px;
+          top: @size-10;
         }
       }
     }
@@ -286,7 +308,7 @@
 
         > c8y-device-status-display {
           display: block;
-          max-height: 20px;
+          max-height: @size-20;
         }
       }
     }
@@ -340,7 +362,7 @@
   }
   .card-actions + .card-header {
     .card-title:not(.smart-rule-name) {
-      margin-right: 24px;
+      margin-right: @size-24;
     }
   }
 
@@ -364,7 +386,7 @@
       &:hover,
       &:focus {
         z-index: @zindex-navbar - 1;
-        box-shadow: 0 20px 15px fade(@black, 10%), 0 -2px 10px 1px fade(@black, 3%);
+        box-shadow: 0 20px 15px rgba(@black, (10 / 100)), 0 -2px 10px 1px rgba(@black, (3 / 100));
         text-decoration: none;
 
         .scale(1.05);

package/styles/components/data-display-and-visualization/lists/_list-group.less

@@ -1,9 +1,27 @@
-@import '../../../../variables/index.less';
-@import '../../../../variables/_dlt-c8y-icons-vars.less';
+@import "../../../../variables/_dlt-c8y-icons-vars.less";
+@import "../../../mixins/_icon-base.less";
+@import "../../../mixins/_list-group.less";
+@import "../../../mixins/_tab-focus.less";
+@import "../../../mixins/_vendor-prefixes.less";
+
+/**
+ * List Group - Bootstrap list group component (legacy)
+ *
+ * Note: Uses @size-* tokens for spacing, @size-base for calculations, and @component-padding.
+ *
+ * Intentionally hardcoded values:
+ * - Off-token spacing (6px): Badge offsets not in token system
+ * - Border widths (1px): Standard borders
+ * - Negative offsets (-1px, -2px): Fine-tuning
+ * - Percentages (100%): Layout
+ * - Line-height values: Text alignment
+ * - Box-shadow values: Borders and inset shadows
+ * - Transform values: Translate positioning
+ */
 
 .list-group {
   position: relative;
-  margin-bottom: @margin-16;
+  margin-bottom: @size-16;
   padding-left: 0; // reset padding because ul and ol
   box-shadow: inset 0 1px 0 @component-border-color;
 
@@ -18,8 +36,8 @@
 .list-group-item {
   position: relative;
   display: block;
-  padding: @margin-base @component-padding;
-  min-height: calc(@margin-base * 5);
+  padding: @size-base @component-padding;
+  min-height: calc(@size-base * 5);
   width: 100%;
   border: 0;
   box-shadow: inset 0 -1px 0 @component-border-color;
@@ -30,7 +48,7 @@
     display: flex;
     align-items: center;
     > button:last-child {
-      margin-right: -8px;
+      margin-right: calc(@size-base * -0.5);
     }
     > * {
       flex-grow: 1;
@@ -72,7 +90,7 @@
     box-shadow: none;
     .list-group-item {
       margin: 0;
-      padding: @margin-base @component-padding;
+      padding: @size-base @component-padding;
       border: 0;
       box-shadow: inset 0 -1px 0 @component-border-color;
       &:not(.active):not(.expanded) {
@@ -98,7 +116,7 @@
   button.list-group-item,
   a.list-group-item {
     position: relative;
-    padding-right: calc(@margin-base * 4) !important;
+    padding-right: calc(@size-base * 4) !important;
     //color: inherit;
     &:hover,
     &:focus {
@@ -108,7 +126,7 @@
     &::after {
       position: absolute;
       top: 50%;
-      right: calc(@margin-base + 4px);
+      right: calc(@size-base + @size-4);
       display: inline-block;
       color: inherit;
       content: @dlt-c8y-icon-chevron-right;
@@ -191,7 +209,7 @@ button.list-group-item {
 // Extra classes for creating well-formatted content within `.list-group-item`s.
 .list-group-item-heading {
   margin-top: 0;
-  margin-bottom: @margin-base;
+  margin-bottom: @size-base;
 }
 
 .list-group-item-text {
@@ -208,9 +226,9 @@ button.list-group-item {
 .list-item-icon {
   display: inline-block;
   flex: 0 0 auto;
-  margin-right: @margin-8;
-  max-height: 20px;
-  font-size: 20px;
+  margin-right: @size-8;
+  max-height: @size-20;
+  font-size: @size-20;
   line-height: 1;
   > i {
     transform: translateY(-3px);
@@ -220,10 +238,10 @@ button.list-group-item {
 .list-item-checkbox {
   align-self: flex-start;
   flex: 0 0 auto;
-  margin-right: @margin-8;
+  margin-right: @size-8;
   .c8y-checkbox {
-    height: 20px;
-    line-height: 20px;
+    height: @size-20;
+    line-height: @size-20;
   }
 
   + label {
@@ -248,7 +266,7 @@ button.list-group-item {
   flex: 0 0 auto;
   flex-flow: row nowrap;
   order: 10000; //ensure it is the last item on the right
-  margin: calc(@margin-base * -1 + 2px) calc(@component-padding * -1) calc(@margin-base * -1 + 2px)
+  margin: calc(@size-base * -1 + 2px) calc(@component-padding * -1) calc(@size-base * -1 + 2px)
     0;
   text-align: right;
   .btn + .btn {
@@ -256,18 +274,18 @@ button.list-group-item {
   }
   > .has-error {
     position: absolute;
-    left: -10px;
-    height: 40px;
+    left: calc(-1 * @size-10);
+    height: @size-40;
     color: var(--palette-status-danger, var(--c8y-palette-status-danger));
     font-size: 14px;
-    line-height: 40px;
+    line-height: @size-40;
   }
   > .btn-link,
   .settings > .dropdown-toggle {
     order: 100;
     padding: 6px;
-    width: 40px;
-    height: 40px;
+    width: @size-40;
+    height: @size-40;
     color: @component-color-actions;
     font-size: 14px;
     opacity: @component-actions-opacity;
@@ -282,7 +300,7 @@ button.list-group-item {
   }
   label.c8y-checkbox,
   label.c8y-radio {
-    line-height: 40px !important;
+    line-height: @size-40 !important;
   }
 }
 
@@ -304,7 +322,7 @@ button.list-group-item {
     .collapsing {
       flex: 1 1 100%;
       order: 11000;
-      margin: 10px calc(@component-padding * -1) 0;
+      margin: @size-10 calc(@component-padding * -1) 0;
       padding: 0 @component-padding @component-padding;
       min-width: 100%;
       width: auto;
@@ -317,7 +335,7 @@ button.list-group-item {
   flex: 0 0 48px;
   width: 48px;
   .c8y-switch {
-    margin: 1px 0 -10px 0;
+    margin: 1px 0 calc(-1 * @size-10) 0;
     min-height: 23px;
     input[type='checkbox'] + span {
       top: 0;
@@ -339,10 +357,10 @@ button.list-group-item {
   text-align: center;
   .minicolors {
     margin: 0 auto;
-    min-height: 20px;
-    width: 20px;
+    min-height: @size-20;
+    width: @size-20;
     .minicolors-swatch {
-      width: 20px;
+      width: @size-20;
       border: 0;
     }
     .minicolors-swatch-color {

package/styles/components/data-display-and-visualization/lists/_smart-rules-template-list.less

@@ -1,3 +1,14 @@
+
+/**
+ * Smart Rules Template List - Smart rule template list component
+ *
+ * Note: Uses @size-* tokens for spacing and @component-border-color.
+ *
+ * Intentionally hardcoded values:
+ * - Border widths (1px): Standard borders
+ * - Percentages (53vh): Viewport-relative height
+ */
+
 .smart-rule-templates-list {
   overflow: hidden;
   margin-bottom: 0;
@@ -11,7 +22,7 @@
     box-shadow: inset 0 0 0 1px @component-border-color;
   }
   .smart-rule-control {
-    margin-top: 10px;
+    margin-top: @size-10;
   }
   .card-group {
     margin-bottom: 0;