@c8y/style 1022.45.2 → 1023.0.0

package/package.json

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

package/styles/_asset-property-list.less

@@ -4,10 +4,41 @@ c8y-asset-property-list {
     max-width: 100%;
     display: block;
     overflow: hidden;
+
+    &:has(.drag-handle-wrapper) {
+      padding-left: 8px;
+    }
+  }
+
+  .tree-container:has(.drag-handle-wrapper) {
+    .select-all-container {
+      > .separator-bottom,
+      > .overflow-hidden {
+        padding-left: 8px;
+      }
+    }
   }
+
   .cdk-tree-node {
     height: 40px;
     background: inherit;
+
+    .drag-handle-wrapper {
+      z-index: 5;
+      display: flex;
+      align-items: center;
+      position: absolute;
+      height: 100%;
+      font-size: 0.7em;
+      opacity: 0;
+      transition: opacity 0.15s linear;
+    }
+
+    &:hover {
+      .drag-handle-wrapper {
+        opacity: 1;
+      }
+    }
   }
 
   .cdk-tree-node > .d-flex::before {
@@ -25,9 +56,11 @@ c8y-asset-property-list {
       );
     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: '';
@@ -48,14 +81,21 @@ c8y-asset-property-list {
       position: absolute;
       pointer-events: none;
     }
+
     &.nonSelectable {
       > .d-flex::after {
         width: 40px;
       }
     }
+
+    .drag-handle-wrapper {
+      left: -24px;
+    }
   }
+
   .cdk-tree-node[aria-level]:not([aria-level='1']):not([aria-level='2']) {
     position: relative;
+
     &::after {
       position: absolute;
       content: '';
@@ -74,6 +114,7 @@ c8y-asset-property-list {
         );
       z-index: 1;
     }
+
     &[aria-level='4'] {
       &::before {
         position: absolute;
@@ -95,10 +136,12 @@ c8y-asset-property-list {
       }
     }
   }
+
   .cdk-tree-node.nonCollapsible:not([aria-level='1']) {
     > .d-flex::before {
       left: -5px;
     }
+
     > .d-flex::after {
       width: 14px;
       left: -5px;
@@ -108,12 +151,14 @@ c8y-asset-property-list {
       > .d-flex::before {
         left: 0;
       }
+
       > .d-flex::after {
         width: 10px;
         left: 0;
       }
     }
   }
+
   .cdk-tree-node[aria-level='1'] > .d-flex::before {
     display: none;
   }
@@ -127,13 +172,14 @@ c8y-asset-property-list {
     .c8y-list__item__radio {
       z-index: 4;
     }
+
     &[aria-level='1'],
     &[aria-level='2'],
     &[aria-level='3'] {
       &:before {
         content: '';
         background: inherit;
-        width: 48px;
+        width: 44px;
         height: 100%;
         position: absolute;
         left: 0;
@@ -141,12 +187,14 @@ c8y-asset-property-list {
         z-index: 3;
         pointer-events: none;
       }
+
       &.nonCollapsible {
         &::before {
-          width: 21px;
+          width: 18px;
           bottom: calc(100% - 1px);
           height: 50%;
         }
+
         + .cdk-tree-node[aria-level='1'] {
           &::before {
             background: transparent;
@@ -154,11 +202,13 @@ c8y-asset-property-list {
         }
       }
     }
+
     &[aria-level='2'] {
       &::before {
         left: 24px;
         z-index: 1;
       }
+
       &.nonCollapsible {
         + .cdk-tree-node[aria-level='2'] {
           &::before {
@@ -167,11 +217,13 @@ c8y-asset-property-list {
         }
       }
     }
+
     &[aria-level='3'] {
       &::before {
         left: 48px;
         z-index: 1;
       }
+
       &.nonCollapsible {
         + .cdk-tree-node[aria-level='3'] {
           &::before {
@@ -194,6 +246,7 @@ c8y-asset-property-list {
     max-height: 40px !important;
     min-height: unset !important;
   }
+
   .cdk-tree-node .c8y-list__item__icon {
     padding-top: 7px;
     padding-bottom: 7px;
@@ -206,3 +259,11 @@ c8y-asset-property-list {
     }
   }
 }
+
+.c8y-list__item--dense.cdk-drag-preview {
+  background-color: @component-background-default;
+  &::before,
+  .drag-handle-wrapper {
+    display: none;
+  }
+}

package/styles/_button-groups.less

@@ -36,6 +36,10 @@
       background-color: var(--c8y-btn-default-background-active);
       color: var(--c8y-btn-default-color-active);
     }
+    &.partial-active {
+      background-color: var(--c8y-palette-gray-90);
+      color: var(--c8y-brand-complementary);
+    }
     &:focus {
       outline: 2px solid @component-color-focus;
       outline-offset: -3px;

package/styles/_buttons.less

@@ -157,6 +157,50 @@
   }
 }
 
+.btn-icon-dot{
+  display: flex; 
+  background: @component-background-default;
+  color: @text-color;
+  justify-content: center;
+  align-items: center;
+  aspect-ratio: 1;
+  height: 100%;
+  border-radius: 50%;
+  border: 0;
+  padding: 0;
+  &:not(.active){
+    background: var(--c8y-level-4);
+    color: @text-muted;
+  }
+  &button:hover,
+  &button:focus,
+  &button:active {
+    outline: 2px solid @component-brand-primary!important;
+    outline-offset: -2px;
+  }
+  &:not(button){
+    height: 20px;
+  }
+  &.active,&:not(button){
+    &.default{
+      background: @component-background-default;
+      color: @component-color-default;
+    }
+    &.auto-refresh{
+      background: var(--c8y-brand-primary);
+      color: var(--c8y-palette-high);
+    }
+    &.time-context{
+      background: @status-info;
+      color: var(--c8y-palette-high);
+    }
+    &.aggregation{
+      background: var(--c8y-palette-status-warning-light);
+      color: var(--c8y-palette-gray-10);
+    }
+  }
+}
+
 // spacing buttons outside btn-group
 .btn + .btn:not(.btn-block) {
   margin-left: @margin-base;

package/styles/_c8y-dashboard-style.less

@@ -206,7 +206,6 @@ body .dashboard-preview-slot {
   margin: 0 !important;
   padding: 30px;
   border: 1px solid @component-border-color;
-
   .page-tabs-horizontal {
     margin-top: 2px !important;
   }

package/styles/_c8y-data-explorer.less

@@ -29,6 +29,7 @@ c8y-chart {
 .card-dashboard .chart-container{
   max-height: calc(100% - 95px);
   max-width: 99.5%;
+  min-height: unset;
 }
 
 .top-chart-bar {

package/styles/_c8y-help-drawer.less

@@ -1,4 +1,4 @@
-.c8y-help-drawer {
+.c8y-help-drawer{
   position: fixed;
   top: 0;
   right: 0;
@@ -66,7 +66,7 @@
   }
   &-block {
     padding: calc(@component-padding * 1.5) calc(@component-padding * 2) 0
-    calc(@component-padding * 1.5);
+      calc(@component-padding * 1.5);
   }
   &-footer {
     position: sticky;
@@ -79,16 +79,4 @@
       padding-bottom: calc(@component-padding * 1.5);
     }
   }
-
-}
-
-body:not(:has(.app-main-header)) {
-  .c8y-help-drawer {
-    top: 0;
-  }
-  &:has(.horizontal-tabs.has-tabs) {
-    .c8y-help-drawer {
-      top: 48px;
-    }
-  }
 }

package/styles/_c8y-list-group.less

@@ -228,6 +228,13 @@ c8y-load-more.c8y-list__item {
   }
 }
 
+.block-sticky-top > div > .c8y-list__item__block {
+  position: sticky;
+  top: 0;
+  z-index: 120;
+  background-color: inherit;
+}
+
 c8y-li-drag-handle, c8y-list-item-drag-handle {
   display: flex;
   align-items: center;

package/styles/_c8y-map-internal.less

@@ -108,6 +108,25 @@
   top: 16px;
   right: 16px;
   z-index: 210;
+
+  c8y-global-context-widget-wrapper{
+    display: contents!important;
+    form{
+      display:contents!important;
+    }
+    c8y-auto-refresh-control{
+      min-width: 0;
+    }
+    .toggle-countdown{
+      padding:0!important;
+      width: 30px;
+      min-width: 0;
+    }
+
+    .btn{
+      padding: 0;
+    }
+  }
 }
 
 .c8y-map-internal {

package/styles/_c8y-top-drawer.less

@@ -1,4 +1,4 @@
-.c8y-top-drawer{
+.c8y-top-drawer, .c8y-global-context {
   position: sticky;
   z-index: (@zindex-action-bar - 2);
   margin: 0 calc(@margin-base * -1);
@@ -65,3 +65,37 @@
     min-height: 220px;
   }
 }
+
+
+
+.c8y-global-context {
+  position: fixed;
+  z-index: (@zindex-action-bar - 2);
+  width: calc(100% - 32px);
+  clip: rect(0, 10000px, 2000px, -16px);
+  --c8y-nav-tabs-vertical-width: 170px;
+  transition: width @open-menu-time-type;
+  .page-tabs-vertical .nav-tabs > div > a {
+    align-items: flex-start;
+  }
+  .c8y-top-drawer--footer{
+    --c8y-nav-tabs-vertical-width: 24px;
+  }
+}
+
+@media(min-width: @grid-float-breakpoint){ 
+  .c8y-global-context{
+    --c8y-nav-tabs-vertical-width: 273px;
+      .c8y-top-drawer--footer{
+        --c8y-nav-tabs-vertical-width: 273px;
+      }
+  }
+}
+body:has(.mcontainer.open){
+  @media(min-width: @grid-float-breakpoint){ 
+    .c8y-global-context {
+      width: calc(100% - 272px);
+    }
+    
+  }
+}

package/styles/_card-dashboard.less

@@ -33,12 +33,28 @@
       height: calc(~'100% - @{margin-48} - @{margin-16} - @{form-control-height-base} - @{margin-16}'
       );
     }
+    
+    &:has(.inner-scroll) c8y-dynamic-component {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      c8y-alarm-list-widget,c8y-alarms-list{
+        display: contents;
+      }
+  }
 
     >.component-map {
       position: relative;
       z-index: 11;
       height: 100%;
     }
+
+    c8y-map-widget{
+      flex-grow: 1;
+    }
+    c8y-kpi-widget-view{
+      display: contents;
+    }
   }
 
   >.fixed-header {

package/styles/_data-grid.less

@@ -364,6 +364,10 @@
     font-weight: 500;
   }
 
+  .dropdown{
+    min-width: unset;
+  }
+
   @media (max-width: @screen-xs-max) {
     flex-wrap: wrap;
     padding: @component-padding;

package/styles/_datepicker.less

@@ -84,6 +84,22 @@
   outline: none;
 }
 
+.datepicker{
+  input.form-control{
+    width: 120px;
+  .form-group-sm & {
+      width: 102px;
+    }
+  }
+}
+
+timepicker{
+  .btn{
+    padding-left: @margin-8!important;
+    padding-right: @margin-8!important;
+  }
+}
+
 .timepicker {
   input.form-control {
     width: 44px;

package/styles/_forms.less

@@ -14,9 +14,9 @@ fieldset.c8y-fieldset {
   margin-inline-start: 2px;
   margin-inline-end: 2px;
   padding-block-start: 0.25rem;
-  padding-inline-end: 0.75em;
+  padding-inline-end: 1.1428571429em;
   padding-block-end: 0;
-  padding-inline-start: 0.75em;
+  padding-inline-start: 1.1428571429em;
   min-inline-size: 100%;
   &--lg {
     padding-block-start: 1rem;
@@ -107,6 +107,15 @@ legend,
     height: 30px;
     font-size: 14px;
     line-height: 32px;
+    &--small {
+      width: 20px;
+      height: 20px;
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+    }
   }
 }
 
@@ -750,9 +759,14 @@ c8y-field-input ~ .help-block:not(:empty),
 // Build on `.form-control` with modifier classes to decrease or increase the
 // height and font-size of form controls.
 //
-.form-group-sm > label {
-  margin-bottom: 0;
-  font-size: @font-size-small;
+.form-group-sm {
+  .btn{
+    .btn-sm();
+  }
+  > label {
+    margin-bottom: 0;
+    font-size: @font-size-small;
+  }
 }
 
 .form-group-sm .form-control,

package/styles/_info-gauge.less

@@ -73,9 +73,21 @@
   min-height: 280px;
 }
 
-.card-dashboard .chart-container {
-  max-height: calc(100% - 95px);
-  max-width: 99.5%;
+.card-dashboard {
+  c8y-datapoints-graph-widget-view{
+    flex-grow: 1;
+  }
+  .chart-container {
+    max-height: calc(100% - 95px);
+    max-width: 99.5%;
+  }
+
+  &:has(c8y-aggregation-picker),
+  &:has(c8y-date-time-context-picker) {
+    .chart-container {
+      max-height: calc(100% - 145px);
+    }
+  }
 }
 
 @container (min-width: 150px) {

package/styles/_input-groups.less

@@ -214,6 +214,17 @@
   }
 }
 
+.input-group.input-group--dots{
+  display: flex;
+  align-items: center;
+  border-radius: calc(@form-control-height-base * 0.5);
+  height: @form-control-height-base;
+  border: 1px solid @form-control-border-color-default;
+  padding: var(--c8y-form-control-padding-base-vertical);
+  gap: @margin-8;
+  font-size: @font-size-small;
+}
+
 .input-group-search{
   .input-group-btn > .btn{
     border-top-right-radius: calc(@form-control-height-base * 0.5)!important;

package/styles/_page-tabs.less

@@ -33,6 +33,20 @@
     clip: rect(0, 10000px, 2000px, 0);
     min-height: calc(@margin-base * 6);
     box-shadow: inset 0 -1px 0 0 @component-border-color, @header-shadow;
+    &:has(.component-tabs) {
+      box-shadow: inset 0 -1px 0 0 @component-border-color;
+      .component-tabs {
+          min-width: unset!important;
+          padding: 0;
+          &.nav-tabs > div, &.nav-tabs li{
+            flex: 1;
+            align-self: stretch;
+            > a{
+              height: 100%;
+            }
+          }
+      }
+    }
     &,
     &:after {
       .transition(left @open-menu-time-type);

package/styles/_resizable-grid.less

@@ -42,7 +42,8 @@ c8y-resizable-grid {
   overflow: hidden;
 
   >* {
-    min-width: fit-content;
+    flex: 1;
+    min-height: 0;
   }
 }
 
@@ -52,7 +53,8 @@ c8y-resizable-grid {
   min-width: 0;
 
   >* {
-    min-width: fit-content;
+    flex: 1;
+    min-height: 0;
   }
 }
 

package/styles/utilities.less

@@ -109,32 +109,6 @@
   transition: background 0.25s ease;
 }
 
-/* List density
-* display density utilities
-* display density low = padding 8px
-* display density low = padding 0
-* use one or the other by adding either .dd-low or .dd-high on a parent wrapper
-*/
-.use-display-density {
-  padding: @margin-8 0;
-  transition: padding 0.25s ease;
-  .card &,
-  .modal & {
-    padding: 0;
-  }
-  .dd-high & {
-    padding: 0;
-  }
-  &[ng-reflect-collapsed='false'] {
-    .dd-low & {
-      padding-bottom: 0;
-      .collapse {
-        margin-top: 1rem;
-      }
-    }
-  }
-}
-
 [ng-click],
 .pointer {
   cursor: pointer !important;