@c8y/style 1023.88.4 → 1023.92.0

package/package.json

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

package/styles/components/data-display-and-visualization/_c8y-data-explorer.less

@@ -58,9 +58,9 @@ c8y-chart {
   c8y-datapoints-graph-widget-view{
     flex-grow: 1;
   }
-  &:has(c8y-aggregation-picker),
-  &:has(c8y-auto-refresh-control),
-  &:has(c8y-date-time-context-picker) {
+  &:has(.card-inner-scroll c8y-aggregation-picker),
+  &:has(.card-inner-scroll c8y-auto-refresh-control),
+  &:has(.card-inner-scroll c8y-date-time-context-picker) {
     .chart-container {
       max-height: calc(100% - 80px);
     }

package/styles/components/data-display-and-visualization/_c8y-data-explorer.scss

@@ -59,9 +59,9 @@ c8y-chart {
   c8y-datapoints-graph-widget-view{
     flex-grow: 1;
   }
-  &:has(c8y-aggregation-picker),
-  &:has(c8y-auto-refresh-control),
-  &:has(c8y-date-time-context-picker) {
+  &:has(.card-inner-scroll c8y-aggregation-picker),
+  &:has(.card-inner-scroll c8y-auto-refresh-control),
+  &:has(.card-inner-scroll c8y-date-time-context-picker) {
     .chart-container {
       max-height: calc(100% - 80px);
     }

package/styles/components/navigation-and-layout/cards/_card.less

@@ -627,6 +627,7 @@
 
     .optionsBtn {
       margin-right: @size-4;
+      flex-shrink: 0;
     }
     .btn-icon {
       min-width: calc(@size-base * 5);

package/styles/components/navigation-and-layout/cards/_card.scss

@@ -628,6 +628,7 @@
 
     .optionsBtn {
       margin-right: $size-4;
+      flex-shrink: 0;
     }
     .btn-icon {
       min-width: calc($size-base * 5);

package/styles/core/buttons/_buttons.less

@@ -271,6 +271,7 @@
 
 .btn-icon-dot-set {
   display: flex;
+  align-items: center;
   gap: @size-8;
   background-color: transparent;
   background-image: none;
@@ -289,6 +290,17 @@
   font-size: @font-size-small;
   padding: @size-5 @size-8;
   transition: all 0.25s ease;
+
+  .dlt-c8y-icon-angle-down{
+    transition: transform 0.15s ease;
+  }
+
+  &[aria-expanded='true'] {
+    .dlt-c8y-icon-angle-down{
+        transform: rotate(180deg);
+    }
+  }
+  
   &:hover,
   &:focus,
   &:active {

package/styles/core/buttons/_buttons.scss

@@ -274,6 +274,7 @@
 
 .btn-icon-dot-set {
   display: flex;
+  align-items: center;
   gap: $size-8;
   background-color: transparent;
   background-image: none;
@@ -292,6 +293,17 @@
   font-size: $font-size-small;
   padding: $size-5 $size-8;
   transition: all 0.25s ease;
+
+  .dlt-c8y-icon-angle-down{
+    transition: transform 0.15s ease;
+  }
+
+  &[aria-expanded='true'] {
+    .dlt-c8y-icon-angle-down{
+        transform: rotate(180deg);
+    }
+  }
+  
   &:hover,
   &:focus,
   &:active {

package/styles/dashboard/_c8y-dashboard-style.less

@@ -4,7 +4,7 @@
 /**
  * Dashboard Styles - Grid-based dashboard layout with drag-and-drop
  *
- * Note: Uses design tokens for spacing (@size-*; @component-padding) and colors.
+ * Note: Uses design tokens for spacing (@size-*, @component-padding) and colors.
  *
  * Intentionally hardcoded values:
  * - Media query breakpoint (768px): Responsive breakpoint
@@ -79,6 +79,7 @@ body.c8y-grid-dashboard > .card.card-dashboard.cdk-drag-preview {
     top: 0;
     right: 0;
     z-index: 10;
+    min-width: 0;
   }
 
   .resize-handle {
@@ -93,7 +94,7 @@ body.c8y-grid-dashboard > .card.card-dashboard.cdk-drag-preview {
 
   .resize-icon {
     position: absolute;
-    .dlt-c8y-icon();
+    .dlt-c8y-icon;
     right: @size-4;
     bottom: @size-4;
     z-index: 11;
@@ -187,7 +188,7 @@ body.c8y-grid-dashboard > .card.card-dashboard.cdk-drag-preview {
 }
 
 .fullscreen-dashboard {
-  .fullscreen-dashboard-styles();
+  .fullscreen-dashboard-styles;
 }
 
 // hide action bar when a single widget is in fullscreen
@@ -210,19 +211,19 @@ body.c8y-grid-dashboard > .card.card-dashboard.cdk-drag-preview {
 }
 
 :-webkit-full-screen:not(:root) {
-  .fullscreen-dashboard-styles();
+  .fullscreen-dashboard-styles;
 }
 
 :-moz-full-screen:not(:root) {
-  .fullscreen-dashboard-styles();
+  .fullscreen-dashboard-styles;
 }
 
 :-ms-fullscreen:not(:root) {
-  .fullscreen-dashboard-styles();
+  .fullscreen-dashboard-styles;
 }
 
 :fullscreen:not(:root) {
-  .fullscreen-dashboard-styles();
+  .fullscreen-dashboard-styles;
 }
 
 body .dashboard-preview-slot {
@@ -419,6 +420,7 @@ body fieldset > .dashboard-preview-slot {
     color: inherit;
   }
 }
+
 // Prevent interactions in dashboard preview slots except for maps
 .dashboard-preview-slot:not(:has(c8y-map)) {
   pointer-events: none;
@@ -440,3 +442,130 @@ body fieldset > .dashboard-preview-slot {
     }
   }
 }
+
+
+.c8y-header-controls-group {
+  display: inline-flex;
+  align-items: stretch;
+  border: 1px solid @component-border-color;
+  border-radius: 16px;
+  transition: all 0.25s ease;
+  overflow: hidden;
+  min-width: 32px;
+  &:has(c8y-auto-refresh-control + c8y-date-time-context-picker + .input-group-btn) {
+    min-width: 132px;
+  }
+  &:has([data-cy="global-context-link--all"]:not(.active)) {
+    min-width: 74px;
+
+    &:has(c8y-date-time-context-picker) {
+      min-width:128px;
+    }
+    &:has(c8y-aggregation-picker + c8y-date-time-context-picker + .input-group-btn) {
+      min-width: 186px;
+    }
+    &:has(c8y-auto-refresh-control + c8y-date-time-context-picker + .input-group-btn) {
+      min-width: 180px;
+    }
+  }
+  &:has(c8y-date-time-context-picker:last-child) {
+    min-width:91px;
+  }
+ .btn-icon-dot-set {
+    border: none !important;
+    border-radius: 16px !important;
+  }
+  c8y-context-controls{
+    min-width: 0;
+  }
+  c8y-date-time-context-picker{
+    min-width: 55px;
+  }
+  .btn-icon-dot-set {
+    &:first-child:not(:last-child) {
+    border-radius: 16px 0 0 16px !important;
+    }
+  }
+
+  .form-control{
+    background: transparent;
+    height: 30px;
+    &:not(:focus){
+      box-shadow: none;
+    }
+  }
+
+  .input-group {
+    c8y-aggregation-picker {
+      .form-control{
+        border-left:1px solid @component-border-color;
+      }
+    }
+  }
+  &:not(.c8y-header-controls-group--has-summary){
+    .input-group:first-child {
+      c8y-aggregation-picker .form-control{
+        border-left:0;
+        border-top-left-radius: 16px!important;
+        border-bottom-left-radius: 16px!important;
+      }
+    }
+  }
+  c8y-date-time-context-picker {
+    .form-control{
+      border-left:1px solid @component-border-color;
+    }
+    &:last-child {
+      .form-control{
+        border-top-right-radius: 16px!important;
+        border-bottom-right-radius: 16px!important;
+      }
+    }
+  }
+  .toggle-countdown{
+    border-top: 0;
+    border-bottom: 0;
+    min-height: 30px;
+    min-width: 36px;
+  }
+  &:not(.c8y-header-controls-group--has-summary){
+    c8y-auto-refresh-control{
+      &:first-child{
+        .toggle-countdown{
+          border-top-left-radius: 16px!important;
+          border-bottom-left-radius: 16px!important;
+        }
+      }
+    }
+  }
+  c8y-auto-refresh-control:last-child{
+    .toggle-countdown{
+      border-top-left-radius: 0!important;
+      border-bottom-left-radius: 0!important;
+      border-top-right-radius: 16px!important;
+      border-bottom-right-radius: 16px!important;
+      border-right: 0;
+    }
+  }
+  .input-group-btn{
+    max-height: 30px;
+    .btn:not(:focus){
+      border-color: transparent!important;
+      border-left-color: @component-border-color!important;
+    }
+    &:last-child{
+      .btn{
+        border-top-right-radius: 16px!important;
+        border-bottom-right-radius: 16px!important;
+      }
+    }
+  }
+
+}
+
+.c8y-expandable-controls__panel {
+  position: relative;
+  z-index: 5;
+  background: @component-background-default;
+  box-shadow: inset 0 -1px 0 0 @component-border-color;
+}

package/styles/dashboard/_c8y-dashboard-style.scss

@@ -83,6 +83,7 @@ body.c8y-grid-dashboard > .card.card-dashboard.cdk-drag-preview {
     top: 0;
     right: 0;
     z-index: 10;
+    min-width: 0;
   }
 
   .resize-handle {
@@ -440,3 +441,130 @@ body fieldset > .dashboard-preview-slot {
     }
   }
 }
+
+
+.c8y-header-controls-group {
+  display: inline-flex;
+  align-items: stretch;
+  border: 1px solid $component-border-color;
+  border-radius: 16px;
+  transition: all 0.25s ease;
+  overflow: hidden;
+  min-width: 32px;
+  &:has(c8y-auto-refresh-control + c8y-date-time-context-picker + .input-group-btn) {
+    min-width: 132px;
+  }
+  &:has([data-cy="global-context-link--all"]:not(.active)) {
+    min-width: 74px;
+
+    &:has(c8y-date-time-context-picker) {
+      min-width:128px;
+    }
+    &:has(c8y-aggregation-picker + c8y-date-time-context-picker + .input-group-btn) {
+      min-width: 186px;
+    }
+    &:has(c8y-auto-refresh-control + c8y-date-time-context-picker + .input-group-btn) {
+      min-width: 180px;
+    }
+  }
+  &:has(c8y-date-time-context-picker:last-child) {
+    min-width:91px;
+  }
+ .btn-icon-dot-set {
+    border: none !important;
+    border-radius: 16px !important;
+  }
+  c8y-context-controls{
+    min-width: 0;
+  }
+  c8y-date-time-context-picker{
+    min-width: 55px;
+  }
+  .btn-icon-dot-set {
+    &:first-child:not(:last-child) {
+    border-radius: 16px 0 0 16px !important;
+    }
+  }
+
+  .form-control{
+    background: transparent;
+    height: 30px;
+    &:not(:focus){
+      box-shadow: none;
+    }
+  }
+
+  .input-group {
+    c8y-aggregation-picker {
+      .form-control{
+        border-left:1px solid $component-border-color;
+      }
+    }
+  }
+  &:not(.c8y-header-controls-group--has-summary){
+    .input-group:first-child {
+      c8y-aggregation-picker .form-control{
+        border-left:0;
+        border-top-left-radius: 16px!important;
+        border-bottom-left-radius: 16px!important;
+      }
+    }
+  }
+  c8y-date-time-context-picker {
+    .form-control{
+      border-left:1px solid $component-border-color;
+    }
+    &:last-child {
+      .form-control{
+        border-top-right-radius: 16px!important;
+        border-bottom-right-radius: 16px!important;
+      }
+    }
+  }
+  .toggle-countdown{
+    border-top: 0;
+    border-bottom: 0;
+    min-height: 30px;
+    min-width: 36px;
+  }
+  &:not(.c8y-header-controls-group--has-summary){
+    c8y-auto-refresh-control{
+      &:first-child{
+        .toggle-countdown{
+          border-top-left-radius: 16px!important;
+          border-bottom-left-radius: 16px!important;
+        }
+      }
+    }
+  }
+  c8y-auto-refresh-control:last-child{
+    .toggle-countdown{
+      border-top-left-radius: 0!important;
+      border-bottom-left-radius: 0!important;
+      border-top-right-radius: 16px!important;
+      border-bottom-right-radius: 16px!important;
+      border-right: 0;
+    }
+  }
+  .input-group-btn{
+    max-height: 30px;
+    .btn:not(:focus){
+      border-color: transparent!important;
+      border-left-color: $component-border-color!important;
+    }
+    &:last-child{
+      .btn{
+        border-top-right-radius: 16px!important;
+        border-bottom-right-radius: 16px!important;
+      }
+    }
+  }
+
+}
+
+.c8y-expandable-controls__panel {
+  position: relative;
+  z-index: 5;
+  background: $component-background-default;
+  box-shadow: inset 0 -1px 0 0 $component-border-color;
+}