@c8y/style 1021.80.1 → 1022.3.2

package/styles/_c8y-selectize.less

@@ -161,7 +161,7 @@ body .selectize-input input {
 body .selectize-control.single .selectize-input.input-active,
 body .selectize-input {
   display: inline-block;
-  background: @component-background-default;
+  background: var(--c8y-form-control-background-default, @component-background-default);
   color: @component-color-default;
   cursor: text;
 }
@@ -271,10 +271,10 @@ body .selectize-dropdown {
   z-index: 9;
   margin: -1px 0 0;
   border: @selectize-border;
-  background-color: @selectize-color-dropdown;
+  background-color: var(--c8y-dropdown-background-default, @component-background-default);
 
   .selectize-box-sizing(border-box);
-  .box-shadow(0 20px 15px fade(@black, 10%));
+  .boxShadowHelper(md);
   [data-selectable] {
     overflow: hidden;
     cursor: pointer;
@@ -285,7 +285,7 @@ body .selectize-dropdown {
   .optgroup-header,
   [data-selectable] {
     padding: @selectize-padding-dropdown-item-y (@selectize-padding-dropdown-item-x);
-    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: inset 0 -1px 0 var(--c8y-dropdown-border-color);
   }
   .optgroup:first-child .optgroup-header {
     border-top: 0 none;
@@ -325,7 +325,7 @@ body .selectize-dropdown {
       z-index: 9;
       padding-top: 42px;
       width: auto;
-      border: 1px solid fade(@black, 5%);
+      border: 1px solid var(--c8y-root-component-border-color);
       border-radius: @component-border-radius-base;
     }
   }

package/styles/_c8y-utils.less

@@ -4,6 +4,10 @@ svg:not(.leaflet-zoom-animated) {
   height: 100%;
 }
 
+nvd3-multi-bar-chart svg{
+  fill: var(--c8y-text-color);
+}
+
 [ng\:cloak],
 [ng-cloak],
 [data-ng-cloak],
@@ -17,9 +21,6 @@ svg:not(.leaflet-zoom-animated) {
   .showOnHover {
     &:not(.open) {
       opacity: 0;
-      .expanded & {
-        opacity: 1;
-      }
       &:focus,
       &:focus-within {
         opacity: 1;
@@ -30,6 +31,7 @@ svg:not(.leaflet-zoom-animated) {
   div:hover > p > .showOnHover,
   li:hover > .showOnHover,
   tr:hover .showOnHover,
+  a:hover > .showOnHover,
   .c8y-list__item__body:hover .showOnHover {
     opacity: 1;
   }

package/styles/_card.less

@@ -710,7 +710,7 @@ c8y-device-request-card {
     z-index: 0;
     content: '';
     display: block;
-    border: 2px solid @gray-40;
+    border: 2px solid @gray-50;
     border-top-color: transparent;
     border-left-color: transparent;
   }
@@ -732,7 +732,6 @@ c8y-device-request-card {
     width: 90px;
     padding: 2px 16px;
     background: @gray-40;
-    background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
     color: @palette-high;
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);

package/styles/_cards-layout.less

@@ -254,21 +254,22 @@
   .card.pointer,
   a.card:not(.add-card) {
     transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
+    &:not(:has(button:hover)){
+      &:hover,
+      &:focus {
+        z-index: @zindex-navbar - 1;
+        text-decoration: none;
 
-    &:hover,
-    &:focus {
-      z-index: @zindex-navbar - 1;
-      text-decoration: none;
-
-      box-shadow: @elevation-hover;
-      color: @text-color;
-      filter: none;
-      .dropdown.open {
-        .dropdown-menu {
-          .boxShadowHelper(md, right);
+        box-shadow: @elevation-hover;
+        color: @text-color;
+        filter: none;
+        .dropdown.open {
+          .dropdown-menu {
+            .boxShadowHelper(md, right);
+          }
         }
       }
-    }
+  }
     .card-header {
       .statusContainer {
         margin-left: -2px;

package/styles/_code.less

@@ -31,17 +31,17 @@ kbd {
 
 pre {
   display: block;
-  margin: 0 0 calc(@line-height-computed / 2);
-  padding: calc((@line-height-computed - 1) / 2);
+  margin: 0 0 1rem;
+  padding: 1rem;
   border: 1px solid @pre-border-color;
   border-radius: @pre-border-radius;
-  background-color: @pre-background!important;
+  background-color: @pre-background;
   color: @pre-color;
   word-break: break-all;
   font-size: @code-font-size;
   line-height: @line-height-base;
-
   overflow-wrap: break-word;
+
   code {
     padding: 0;
     border-radius: 0;
@@ -49,17 +49,25 @@ pre {
     color: inherit;
     word-break: break-word;
     font-size: inherit;
-
     overflow-wrap: break-word;
-    // .pre-wrapped();
   }
 }
 
+// pre:has(code) {
+//   background-color: var(--c8y-code-background);
+//   color: var(--c8y-code-color);
+//   border-color: color-mix(in srgb, var(--c8y-code-background), black 5%);
+// }
+
 .pre-scrollable {
   overflow-y: scroll;
   max-height: @pre-scrollable-max-height;
 }
 
+.pre-scrollable, pre{
+  .c8y-scrollbar();
+}
+
 .pre-wrapped,
 .text-code {
   white-space: pre-wrap;

package/styles/_dashboard-widgets.less

@@ -19,7 +19,10 @@
 }
 
 .widget-thumbnail {
-  max-width: 100%;
+  width: 100%;
+  aspect-ratio: 281/148;
+  object-fit: cover;
+  object-position: top left;
 }
 
 

package/styles/_data-grid.less

@@ -11,7 +11,7 @@
     border: 0;
   }
 
-  &.table-hover {
+  &.table-hover tbody{
     tr:hover,
     tr:focus-within {
       background: @component-background-hover !important;
@@ -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;
@@ -385,8 +387,8 @@
 }
 
 .table-data-grid-header-bulk-actions {
-  background-color: @component-brand-primary;
-  color: @palette-high;
+  background-color: @component-color-active;
+  color:  @component-background-active;
   padding: 0 @component-padding;
   position: absolute;
   top: 0;
@@ -399,7 +401,7 @@
   align-items: center;
 
   a {
-    color: @palette-high !important;
+    color: inherit !important;
     text-decoration: underline;
     opacity: 0.8;
 
@@ -696,3 +698,92 @@ 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;
+
+.loop(@i) when (@i <= 10) {
+  tr.level-@{i} {
+    c8y-tree-node-cell-renderer,
+    &.pagination-row {
+      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;
+      }
+    }
+
+    .tree-node-padding-cell {
+      display: block;
+      padding-left: calc(@base-padding * @i + var(--c8y-table-cell-padding-default));
+    }
+  }
+
+  .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);
+  }
+}

package/styles/_dropdowns.less

@@ -6,27 +6,46 @@
 }
 
 .dropdown-menu {
+  --c8y-root-component-border-color: var(--c8y-dropdown-border-color);
+  --c8y-root-component-background-default: var(--c8y-dropdown-background-default);
   position: absolute;
   top: 100%;
   left: 0;
   z-index: @zindex-dropdown;
-  display: none;
   float: left;
   margin: 0;
   padding: 0;
   min-width: 160px;
   border-color: transparent;
-  border-radius: @component-border-radius-base;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-radius: var(--c8y-dropdown-border-radius, @component-border-radius-base);
+  overflow: auto;
   background-color: var(--c8y-dropdown-background-default, @component-background-default);
   background-clip: padding-box;
   list-style: none;
   text-align: left;
   text-transform: none;
   font-size: @font-size-base;
+  transition: none;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-32px) scale(0.6);
+  transform-origin: left top;
+  
+  .sticky-bottom{
+    background-color: var(--c8y-dropdown-background-default, @component-background-default);
+  }
 
-  .boxShadowHelper(md);
+  .list-group-item, .c8y-list__item {
+    box-shadow: inset 0 -1px 0 var(--c8y-dropdown-border-color)!important;
+  }
+  &.dropdown-menu-right {
+    transform-origin: right top;
+  }
+  
+  &.show, &.open{
+    animation: showDropdown 0.2s ease-out forwards;
+    visibility: visible;
+  }
 
   &--date-range {
     min-width: 240px;
@@ -72,7 +91,7 @@
     overflow: hidden;
     margin: 0 !important;
     height: 2px;
-    background: @component-border-color;
+    background: var(--c8y-dropdown-border-color, @component-border-color);
   }
 
   // Links within the dropdown menu
@@ -87,17 +106,24 @@
         padding: 9px 15px 10px;
         width: 100%;
         border: 0;
-        border-top: 1px solid @component-border-color;
+        border-top: 1px solid var(--c8y-dropdown-border-color, @component-border-color);
         border-radius: 0;
         background-color: var(--c8y-dropdown-background-default, @component-background-default);
         background-image: none;
-        color: @component-color-actions;
+        color: var(--c8y-dropdown-color-default, @component-color-actions);
         text-align: left;
         white-space: nowrap;
-
+        .c8y-icon {
+         color: var(--c8y-dropdown-icon-color-default);
+        }
         &:hover {
-          color: @component-color-actions-hover;
-          text-decoration: none;
+          &:not([disabled]){
+            color: var(--c8y-dropdown-color-hover, @component-color-actions-hover);
+            text-decoration: none;
+            .c8y-icon {
+              color: var(--c8y-dropdown-icon-color-hover);
+            }
+          }
         }
 
         &:focus {
@@ -106,16 +132,17 @@
           box-shadow: inset 0 0 0 2px @component-color-focus;
         }
       }
-    }
-    [disabled],
-    .disabled {
-      &,
-      &:hover,
-      &:focus {
-        cursor: @cursor-disabled !important;
-        opacity: var(--c8y-root-component-disabled-opacity);
-        &:not(.btn) {
-          color: @component-color-actions!important;
+    
+      &[disabled],
+      &.disabled {
+        &,
+        &:hover,
+        &:focus {
+          cursor: @cursor-disabled !important;
+          opacity: var(--c8y-root-component-opacity-disabled);
+          &:not(.btn) {
+            color: @component-color-actions!important;
+          }
         }
       }
     }
@@ -171,11 +198,20 @@
 }
 
 .dropdown.open,
+bs-dropdown-container,
+[uib-datepicker-popup-wrap],
 .uib-dropdown-open {
   > .dropdown-menu {
     display: block;
     height: auto;
+    opacity: 1;
+    visibility: visible;
 
+    animation: showDropdown 0.2s ease-out forwards;
+    
+    &.dropdown-menu-right{
+       transform-origin: right top;
+    }
     &.visible-overflow {
       overflow: visible;
     }
@@ -191,6 +227,34 @@
   }
 }
 
+
+//dropdown menu when added to body
+@keyframes showDropdown {
+  /* Starting state (0%) */
+  0% {
+    opacity: 0;
+    transform: translateY(-16px) scale(0);
+    box-shadow: var(--c8y-dropdown-elevation-default);
+  }
+
+  75%{
+    opacity: 0.5;
+  }
+  /* Ending state (100%) */
+  100% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+    box-shadow: var(--c8y-dropdown-elevation-hover);
+  }
+}
+
+bs-dropdown-container >.dropdown >.dropdown-menu {
+  animation-name: showDropdown;
+  animation-duration: .2s;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards; 
+}
+
 // Hover/Focus state
 .dropdown-menu > li > a:not(.btn) {
   &:hover,
@@ -250,6 +314,7 @@
   &-grid {
     right: 9px !important;
     left: auto !important;
+    transform-origin: right top;
   }
 }
 
@@ -257,6 +322,29 @@
   .dropdown-menu-right--xs {
     right: 0;
     left: auto; // Reset the default from `.dropdown-menu`
+    transform-origin: left top;
+    &-grid {
+      right: 9px !important;
+      left: auto !important;
+      transform-origin: right top;
+    }
+  }
+}
+
+@media (min-width: @screen-md-min) {
+  .dropdown-menu-right--md {
+    right: 0;
+    left: auto; 
+    &-grid {
+      right: 9px !important;
+      left: auto !important;
+    }
+  }
+}
+@media (min-width: @screen-sm-min) {
+  .dropdown-menu-right--sm {
+    right: 0;
+    left: auto; 
     &-grid {
       right: 9px !important;
       left: auto !important;
@@ -428,7 +516,7 @@
         padding: 9px 16px 10px;
         width: 100%;
         border: 0;
-        border-top: 1px solid @component-border-color;
+        border-top: 1px solid var(--c8y-dropdown-border-color, @component-border-color);
         border-radius: 0;
         background-color: @component-background-default;
         background-image: none;
@@ -461,9 +549,12 @@
   .c8y-dropdown[aria-expanded='true'] {
     &:not(.btn) {
       background: @component-background-default;
-      box-shadow: var(--c8y-elevation-md-bottom);
+      // box-shadow: var(--c8y-elevation-md-bottom);
+      outline: 1px solid @component-color-focus;
       color: @component-color-actions-hover;
       opacity: 1;
+      border-radius: @component-border-radius-focus;
+      outline-offset: -1px;
 
       &:focus {
         outline: 2px solid @component-color-focus;
@@ -474,7 +565,7 @@
 
     + .dropdown-menu {
       height: auto;
-      border: 1px solid @component-border-color;
+      border: 1px solid var(--c8y-dropdown-border-color, @component-border-color);
     }
   }
 
@@ -498,6 +589,7 @@
     + .dropdown-menu {
       z-index: @zindex-navbar-fixed + 1;
       height: auto;
+      animation: showDropdown 0.2s ease-out forwards;
     }
   }
 }
@@ -527,7 +619,7 @@ body {
         padding: 10px 15px 9px;
         width: 100%;
         border: 0;
-        border-top: 1px solid @component-border-color;
+        border-top: 1px solid var(--c8y-dropdown-border-color, @component-border-color);
         border-radius: 0;
         background-color: @component-background-default;
         background-image: none;
@@ -556,7 +648,7 @@ body {
 
   // fix z-index for ngx-bootstrap dropdown attached to body
   > bs-dropdown-container {
-    z-index: @zindex-dropdown !important; 
+    z-index: @zindex-modal + 1 !important; 
     height: 0;
     .dropdown {
       position: unset;
@@ -581,12 +673,25 @@ body {
   &:not(.uib-datepicker-popup) li {
     position: static;
   }
+  &:not(.ng-hide){
+    animation: showDropdown 0.2s ease-out forwards;
+    visibility: visible;
+  }
 }
 
 .c8y-search-dropdown {
   .input-group-dropdown {
     z-index: 1;
   }
+  .dropdown-menu.show &{
+    .dropdown-menu{
+      animation: none!important;
+      opacity: 1!important;
+      inset: 100% auto auto 0!important;
+      transform: translateY(0)!important;
+      visibility: visible!important;
+    }
+  }
 }
 
 .c8y-select-v2 {

package/styles/_forms.less

@@ -284,22 +284,11 @@ textarea.form-control {
       justify-content: center;
       font-size: 14px;
       color: var(--component-background-default, var(--c8y-root-component-background-default, #fff));
-    }
-  }
-  &--alarm{
-    input + span{
       > i{
         transform: translateY(.3px);
       }
     }
   }
-  &--event{
-    input + span{
-      > i{
-        transform: translateX(.5px);
-      }
-    }
-  }
 }
 
 // Search inputs in iOS
@@ -788,7 +777,7 @@ c8y-field-input ~ .help-block:not(:empty),
   &:not(.c8y-radio):not(.c8y-checkbox) {
     padding: @form-control-padding-large-vertical @form-control-padding-large-horizontal;
     max-height: unset !important;
-    height: @form-control-height-lg;
+    height: @form-control-height-lg!important;
     font-size: @font-size-large;
   }
 }