@c8y/style 1023.62.2 → 1023.63.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c8y/style",
-  "version": "1023.62.2",
+  "version": "1023.63.0",
   "license": "Apache-2.0",
   "author": "Cumulocity GmbH",
   "description": "Styles for Cumulocity IoT applications",

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

@@ -1,12 +1,13 @@
-@import '../../../../variables/_dlt-c8y-icons-vars.less';
-@import '../../../animations/_component-animations.less';
-@import '../../../core/buttons/_buttons.less';
-@import '../../../mixins/_tab-focus.less';
+
+@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.
+ * 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
@@ -66,7 +67,7 @@
     &.highlighted {
       background-color: var(--brand-80, var(--c8y-brand-80));
     }
-    &.selected {
+    &.selected{
       border-left: @size-4 solid @component-color-active;
       background-color: @component-background-default;
     }
@@ -76,15 +77,14 @@
       outline-offset: -2px;
       border-radius: @component-border-radius-focus !important;
     }
-    bs-dropdown-container &,
-    c8y-typeahead .dropdown &,
-    .c8y-select-v2 .dropdown & {
+    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 {
+
+          &:after{
             display: inline-block;
             text-transform: none;
             font-weight: normal;
@@ -96,7 +96,7 @@
             -moz-osx-font-smoothing: grayscale;
 
             float: right;
-            content: @dlt-c8y-icon-check;
+            content:  @dlt-c8y-icon-check;
             font-size: 18px;
           }
         }
@@ -106,8 +106,7 @@
        * @Carlos: There are items that are not selectable that
        * don't get that class. E.g. the "No results found" item.
        **/
-      &.selectable:hover:not(.active),
-      &.highlighted {
+      &.selectable:hover:not(.active), &.highlighted {
         background-color: @component-background-hover;
       }
 
@@ -117,30 +116,35 @@
         border-radius: @component-border-radius-focus !important;
       }
     }
-
-    &.selectable.active {
+    &.empty-actions{
       .c8y-list__item__body {
-        &:after {
+        padding-right: 0 !important;
+        margin-right: 40px;
+      }
+    }
+    &.selectable.active{
+      .c8y-list__item__body {
+        &:after{
           display: inline-block;
           text-transform: none;
           font-weight: normal;
           font-style: normal;
           font-variant: normal;
-          font-family: 'dlt-c8y-icons' !important;
+          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;
+          content:  @dlt-c8y-icon-check;
         }
       }
       color: @component-color-active;
     }
-    &:not(.selectable) {
+    &:not(.selectable){
       transition: border-left 0.15s linear;
     }
-    &.active:not(.selectable) {
+    &.active:not(.selectable){
       border-left: @size-4 solid @component-color-active;
     }
 
@@ -173,7 +177,7 @@
     }
     &--overflow-visible {
       .c8y-list__item__body {
-        overflow: visible !important;
+        overflow: visible!important;
       }
     }
 
@@ -208,15 +212,16 @@
 
     // hide collapse-btn when displaying in a modal for instance
     &--no-expand {
-      > div > .c8y-list__item__block > .c8y-list__item__actions > .collapse-btn {
+      > div > .c8y-list__item__block > .c8y-list__item__actions >
+      .collapse-btn {
         display: none;
         pointer-events: none;
       }
     }
-    &__btn {
+    &__btn{
       .btn-clean();
       white-space: normal;
-      &:focus {
+      &:focus{
         outline: none;
       }
     }
@@ -235,6 +240,7 @@
     }
   }
 
+
   &--pulse {
     .component-pulse();
   }
@@ -282,19 +288,16 @@ c8y-load-more.c8y-list__item {
   background-color: inherit;
 }
 
-c8y-li-drag-handle,
-c8y-list-item-drag-handle {
+c8y-li-drag-handle, c8y-list-item-drag-handle {
   display: flex;
   align-items: center;
   align-self: stretch;
   flex-shrink: 0;
   max-width: 0;
-  padding-left: @margin-4;
   overflow: hidden;
   transition: all 0.25s ease;
 
-  c8y-li-drag-handle,
-  c8y-list-item-drag-handle {
+  c8y-li-drag-handle, c8y-list-item-drag-handle {
     padding: 0 !important;
     cursor: move;
     max-width: fit-content !important;
@@ -308,7 +311,7 @@ c8y-list-item-drag-handle {
     }
   }
 
-  + c8y-li-checkbox {
+  + c8y-li-checkbox{
     padding-left: 0;
   }
   .cdk-drag-disabled & {
@@ -324,7 +327,7 @@ c8y-list-item-drag-handle {
 }
 
 .no-card-context {
-  .c8y-list__item {
+  .c8y-list__item{
     c8y-li-drag-handle:not(.cdk-drag-disabled) + * {
       padding-left: 0;
     }
@@ -335,14 +338,15 @@ c8y-list-item-drag-handle {
   }
 }
 
-.c8y-list__item:not(:has(.c8y-list__item)):hover {
+.c8y-list__item:hover {
   c8y-li-drag-handle:not(:empty) {
-    // max-width: 16px;
-    overflow: visible;
+    max-width: 100px;
+    padding-left: @size-8;
   }
 
   c8y-list-item-drag-handle:not(:empty) {
-    overflow: visible;
+    max-width: 100px;
+    padding-left: @size-8;
   }
 }
 
@@ -403,9 +407,7 @@ c8y-list-item-drag-handle {
 .c8y-list__item__colorpicker,
 .c8y-list__item__actions {
   min-height: 56px;
-  bs-dropdown-container &,
-  c8y-typeahead .dropdown &,
-  .c8y-list__item--dense & {
+  bs-dropdown-container &, c8y-typeahead .dropdown &, .c8y-list__item--dense & {
     min-height: 36px;
     padding-top: @size-base;
     padding-bottom: @size-base;
@@ -419,11 +421,11 @@ c8y-list-item-drag-handle {
    * @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 & {
+  .dropdown-menu &, .c8y-list__item--dense & {
     padding-top: @size-base;
     padding-bottom: @size-base;
   }
+
 }
 
 .card,
@@ -440,14 +442,14 @@ c8y-list-item-drag-handle {
     padding-bottom: 7px;
   }
 
+  .c8y-list__item__actions {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
   .c8y-list__item__body {
-    padding-top: 10px;
-    padding-bottom: 10px;
-    &:has(.btn, .c8y-dropdown) {
-      padding-top: 6px;
-      padding-bottom: 6px;
-      overflow: visible !important;
-    }
+    padding-top: @size-10;
+    padding-bottom: @size-10;
   }
 }
 
@@ -521,7 +523,7 @@ c8y-list-item-drag-handle {
   > * {
     padding: 0.5rem 0 0 0;
   }
-  > c8y-li-footer {
+  > c8y-li-footer{
     width: 100%;
   }
 }
@@ -535,7 +537,7 @@ c8y-list-item-drag-handle {
   @media (min-width: @screen-md-min) {
     padding: @component-padding calc(@size-48 + 6px) 2rem;
   }
-  .full-w-collapse & {
+  .full-w-collapse &{
     padding: @component-padding;
   }
 }
@@ -550,17 +552,17 @@ c8y-list-item-drag-handle {
   }
 }
 
-.c8y-list__item--sticky-top {
-  .c8y-list__item__block {
+.c8y-list__item--sticky-top{
+  .c8y-list__item__block{
     position: sticky;
     top: 0;
     z-index: 10;
     background-color: inherit;
-    &:has(.dropdown.open) {
+    &:has(.dropdown.open){
       z-index: 11;
     }
   }
-  .c8y-list__item__collapse--container {
+  .c8y-list__item__collapse--container{
     position: relative;
     z-index: 8;
   }
@@ -570,7 +572,7 @@ c8y-list-item-drag-handle {
 .c8y-list--timeline {
   box-shadow: none;
   // --c8y-component-background-default: @palette-high;
-  > .c8y-list--timeline__item {
+  >.c8y-list--timeline__item {
     &:first-child::before {
       top: 50%;
     }
@@ -583,8 +585,7 @@ c8y-list-item-drag-handle {
     position: relative;
     align-items: center;
     box-shadow: none;
-    &:focus-within,
-    &:has(.dropdown.open) {
+    &:focus-within, &:has(.dropdown.open) {
       z-index: 10;
     }
     &::after {
@@ -717,7 +718,7 @@ c8y-list-item-drag-handle {
       z-index: 10;
     }
 
-    &:not(:has(> button))::before {
+    &:not(:has(>button))::before {
       position: absolute;
       top: 50%;
       left: calc(-1 * @size-10);
@@ -731,7 +732,7 @@ c8y-list-item-drag-handle {
       transition: border-color 0.15s linear !important;
     }
 
-    &:not(:has(> button))::after {
+    &:not(:has(>button))::after {
       position: absolute;
       top: 50%;
       left: calc(-1 * @size-8);

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

@@ -117,7 +117,12 @@
         border-radius: $component-border-radius-focus !important;
       }
     }
-
+    &.empty-actions{
+      .c8y-list__item__body {
+        padding-right: 0 !important;
+        margin-right: 40px;
+      }
+    }
     &.selectable.active{
       .c8y-list__item__body {
         &:after{