@c8y/style 1021.78.7 → 1021.81.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c8y/style",
-  "version": "1021.78.7",
+  "version": "1021.81.0",
   "license": "Apache-2.0",
   "author": "Cumulocity GmbH",
   "description": "Styles for Cumulocity IoT applications",
@@ -18,6 +18,6 @@
     "less"
   ],
   "dependencies": {
-    "@fontsource/public-sans": "^5.1.1"
+    "@fontsource/public-sans": "^5.2.6"
   }
 }

package/styles/_data-grid.less

@@ -257,7 +257,9 @@
         box-shadow: var(--c8y-elevation-md-bottom);
       }
     }
-
+    [data-type="icon"] {
+      text-align: center !important;
+    }
     .data-record-icon {
       text-align: center !important;
       grid-column-start: 1;
@@ -696,3 +698,89 @@ c8y-filtering-form {
     }
   }
 }
+
+// TREE NODE
+
+.data-grid-child-node{
+  > td{
+    animation: expandChildNode 0.25s ease-out;
+    animation-fill-mode: forwards;
+    transform-origin: left top;
+  }
+}
+
+// Tree node cell renderer
+// a workaround for the tree node cell renderer to increment padding accorndig to the level
+@base-padding: 16px;
+
+c8y-tree-node-cell-renderer,
+.pagination-row {
+
+  .loop(@i) when (@i <= 10) {
+    &:has(.level-@{i}) {
+      &{
+        display: block;
+        padding-left: @base-padding * @i;
+      }
+      .cdk-column-pagination-row{
+        display: block;
+        padding-left: @base-padding * @i + @base-padding;
+        padding-right: @base-padding * @i + @base-padding;
+      }
+    }
+    .loop(@i + 1);
+  }
+
+  .loop(1);
+}
+
+.data-grid-collapse-btn{
+  .btn-clean();
+  padding: 8px!important;
+  min-width: 40px;
+  min-height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: -8px 0;
+  font-size: 18px;
+  line-height: 1;
+  &:hover:not(:focus){
+    outline: 1px solid @component-color-focus;
+    outline-offset: -1px;
+    border-radius: @component-border-radius-focus!important;
+  }
+  > i{
+    transition: all 0.25s ease;
+  }
+  &.active > i.dlt-c8y-icon-chevron-right{
+    transform: rotate(90deg);
+  }
+}
+
+td.cdk-cell.cdk-column-tree-node:has(c8y-tree-node-cell-renderer){
+  padding-left: 0;
+  padding-right: 0;
+  overflow: visible!important;
+  c8y-cell-renderer, c8y-tree-node-cell-renderer{
+    overflow: visible!important;
+  }
+}
+
+.cdk-column-actions{
+  overflow: visible!important;
+}
+
+.cdk-footer-row .cdk-footer-cell:has(c8y-load-more:empty){
+  display: none;
+}
+
+@keyframes expandChildNode {
+  0% {
+    transform: scale(1,0);
+  }
+  100% {
+    transform: scale(1, 1);
+  }
+  
+}