@c8y/style 1022.21.3 → 1022.26.1

package/package.json

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

package/styles/_ace-editor.less

@@ -11,3 +11,14 @@ body .ace_editor * {
     min-height: 350px;
   }
 }
+
+
+.ace-monokai .ace_marker-layer{
+  .ace_selected-word{
+    border-bottom: 2px solid yellow !important;
+  }
+  .ace_selection{
+    background-color: rgba(255, 255, 0, 0.25) !important;
+    border: 1px solid yellow !important;
+  }
+}

package/styles/_alerts.less

@@ -201,7 +201,8 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  background-color: color-mix(in srgb, var(--c8y-root-component-background-default), var(--c8y-root-component-color-default) 10%);
+  background-color: color-mix(in srgb, var(--c8y-root-component-background-default), transparent 50%);
+  backdrop-filter: blur(3px);
 }
 
 // prevent double scroll bars on widgets when the alerts overlay is displayed

package/styles/_asset-property-list.less

@@ -0,0 +1,116 @@
+.cdk-tree{
+  background: inherit;
+  max-width: 100%;
+  display: block;
+  overflow: hidden;
+}
+.cdk-tree-node{
+  height: 40px;
+  background: inherit;
+}
+
+
+.cdk-tree-node > .d-flex::before {
+  position: absolute;
+  content: '';
+  top: 0;
+  left: -6px;
+  width: 20px;
+  bottom: 0;
+  display: block;
+  border-left: 1px solid var(--c8y-component-icon-dark-color-light, var(--c8y-root-component-icon-dark-color-light, var(--brand-light, var(--c8y-brand-light))));
+  z-index: 1;
+}
+.cdk-tree-node:last-of-type > .d-flex::before {
+  bottom: 50%;
+}
+.cdk-tree-node:not([aria-level="1"]){
+  > .d-flex::after {
+    content: '';
+    top: 50%;
+    left: -6px;
+    width: 20px;
+    /* bottom: 0; */
+    display: block;
+    border-bottom: 1px solid var(--c8y-component-icon-dark-color-light, var(--c8y-root-component-icon-dark-color-light, var(--brand-light, var(--c8y-brand-light))));
+    z-index: 1;
+    position: absolute;
+    pointer-events: none;
+  }
+  &.nonSelectable{
+    > .d-flex::after {
+      width: 40px;
+    }
+  }
+}
+.cdk-tree-node.nonCollapsible:not([aria-level="1"]){
+  > .d-flex::before{
+    left: -5px;
+  }
+  > .d-flex::after{
+    width: 14px;
+    left: -5px;
+  }
+
+  &.nonSelectable{
+    > .d-flex::before{
+      left: 0;
+    }
+    > .d-flex::after{
+      width: 10px;
+      left: 0;
+    }
+  }
+}
+.cdk-tree-node[aria-level="1"] > .d-flex::before {
+  display: none;
+}
+
+.cdk-tree-node[aria-level="1"]{
+  overflow: visible;
+}
+
+.cdk-tree-node[aria-level="1"]{
+  &:before {
+    content: '';
+    background: inherit;
+    width: 40px;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    bottom: calc(50% - 1px);
+    z-index: 3;
+    pointer-events: none;
+  }
+  &.nonCollapsible{
+    &::before{
+      width: 21px;
+      bottom: calc(100% - 1px);
+      height: 50%;
+    }
+    + .cdk-tree-node[aria-level="1"]{
+     &::before{
+      background: transparent;
+     }
+    }
+  }
+}
+
+.cdk-tree-node .collapse-btn{
+  background-color: inherit;
+  position: relative;
+  z-index: 4;
+}
+
+
+
+.cdk-tree-node .c8y-list__item__radio{
+  padding-top: 7px!important;
+  padding-bottom: 7px!important;
+  max-height: 40px!important;
+  min-height: unset!important;
+}
+.cdk-tree-node .c8y-list__item__icon{
+  padding-top: 7px;
+  padding-bottom: 7px;
+}

package/styles/index.less

@@ -58,6 +58,7 @@
 @import '_progress-bars.less';
 @import '_search-header.less';
 @import '_static-assets-file-picker.less';
+@import '_asset-property-list.less';
 
 @import '_panels.less';
 @import '_asset-table.less';

package/styles/utilities/_text-utils.less

@@ -664,3 +664,16 @@
 .font-size-inherit{
   font-size: inherit !important;
 }
+
+
+// Monaco Editor search string highlight
+.monaco-editor{
+  .findMatchInline{
+    background: yellow;
+  }
+  .currentFindMatchInline{
+    background: orange;
+    font-weight: bold;
+  }
+}
+

package/variables/_brand-vars.less

@@ -9,7 +9,6 @@
 
 @brand-logo-height-fallback: 20%;
 
-// @navigator-platform-logo-css-var-fallback:        if(@appLogo=deprecated, @navigator-platform-logo, @appLogo); // legacy support
 @navigator-platform-logo-fallback:if(@appLogo=deprecated, if(@use-relative-paths, '../img/logo-platform.svg', 'img/logo-platform.svg'), @appLogo); // legacy support
 @navigator-platform-logo-dark-fallback:   if(@appLogo=deprecated, if(@use-relative-paths, '../img/logo-platform-white.svg', 'img/logo-platform-white.svg'), @appLogo); // legacy support
 
@@ -91,27 +90,5 @@
 .c8y-system-theme {
   @media (prefers-color-scheme: dark){
     .c8y-dark-theme();
-    --brand-logo-img: url('@{image-path}@{brand-logo-img-fallback-dark}');
-    --navigator-platform-logo: url('@{navigator-platform-logo-dark-fallback}');
-
-    --header-color: var(--c8y-main-header-background-default);
-    --header-text-color: var(--c8y-main-header-text-color-default);
-    --header-hover-color: var(--c8y-main-header-text-color-hover);
-
-    --navigator-bg-color: var(--c8y-navigator-background-default);
-    --navigator-header-bg: var(--c8y-navigator-header-background);
-
-    --navigator-title-color: var(--c8y-navigator-header-color);
-
-    --navigator-active-bg: var(--c8y-navigator-background-active);
-
-    --navigator-text-color: var(--c8y-navigator-text-color-default);
-    --navigator-color-active: var(--c8y-navigator-text-color-selected);
-
-    --navigator-border-active: var(--c8y-navigator-border-selected);
-
-    --right-drawer-link-color: var(--c8y-right-drawer-link-color-default);
-    // --body-background-color: var(--c8y-body-background-color);
-    // --text-color: var(--c8y-text-color);
   }
 }