@c8y/style 1023.37.0 → 1023.43.2

package/styles/components/data-display-and-visualization/lists/_c8y-empty-state.less

@@ -1,3 +1,17 @@
+
+/**
+ * C8Y Empty State - Empty state component for lists and containers
+ *
+ * Note: Uses @size-* tokens for spacing; @size-base for calculations, and @component-padding.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (600px, 280px, 45px): Max widths and flex basis
+ * - Typography sizes (30px, 90px): Large icon font sizes
+ * - Opacity values (0.6): Visual effects
+ * - Percentages (100%): Layout
+ * - Rem values (8rem, 4rem): Responsive padding using rem units
+ */
+
 .c8y-empty-state {
   margin: 0 auto;
   max-width: 600px;
@@ -7,7 +21,7 @@
   > .c8y-icon,
   > [class^='dlt-c8y-icon-'],
   > [class*=' dlt-c8y-icon-'] {
-    margin-bottom: @margin-base;
+    margin-bottom: @size-base;
     color: @component-color-text-muted;
     font-size: 90px;
     opacity: 0.6;
@@ -19,16 +33,16 @@
     }
   }
   .btn-link {
-    .btn-primary();
+    &:extend(.btn-primary);
   }
 
   p, .btn{
-    margin-bottom: @margin-base;
+    margin-bottom: @size-base;
   }
 
   .dashboard.dashboard-theme-branded & {
     .btn-primary {
-      .btn-default();
+      &:extend(.btn-default);
     }
     a {
       color: @component-color-default;
@@ -44,7 +58,7 @@
     > [class^='dlt-c8y-icon-'],
     > [class*=' dlt-c8y-icon-'] {
       flex: 0 0 auto;
-      margin-right: 5px;
+      margin-right: @size-5;
       color: @component-color-text-muted;
       font-size: 30px;
     }
@@ -59,14 +73,14 @@
     display: flex;
     flex-flow: row nowrap;
     margin: 0;
-    padding: @margin-base;
+    padding: @size-base;
     max-width: 100%;
     text-align: left !important;
     > .c8y-icon,
     > [class^='dlt-c8y-icon-'],
     > [class*=' dlt-c8y-icon-'] {
       flex: 0 0 auto;
-      margin-right: 4px;
+      margin-right: @size-4;
       margin-bottom: 0;
       font-size: 30px;
     }
@@ -82,7 +96,7 @@
     }
   }
   .card-block .c8y-empty-state {
-    padding: @margin-base 0;
+    padding: @size-base 0;
   }
 }
 
@@ -97,19 +111,19 @@ td,
     display: flex;
     flex-flow: row nowrap;
     margin-left: 0;
-    padding: @margin-base;
+    padding: @size-base;
     text-align: left !important;
     > .c8y-icon,
     > [class^='dlt-c8y-icon-'],
     > [class*=' dlt-c8y-icon-'] {
       flex: 0 0 45px;
-      margin-right: 5px;
+      margin-right: @size-5;
       margin-bottom: 0;
       font-size: 30px;
     }
     h3 {
       align-self: center;
-      margin-right: 5px;
+      margin-right: @size-5;
       font-weight: bold;
       font-size: inherit;
     }
@@ -121,7 +135,7 @@ td,
     }
   }
   .card-block .c8y-empty-state {
-    padding: @margin-base 0;
+    padding: @size-base 0;
   }
 }
 

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);