@c8y/style 1023.7.3 → 1023.10.1

package/package.json

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

package/styles/_buttons.less

@@ -163,37 +163,29 @@
   }
 }
 
-.btn-icon-dot{
+.btn-icon-dot__item{
   display: flex; 
-  background: @component-background-default;
-  color: @text-color;
   justify-content: center;
   align-items: center;
   aspect-ratio: 1;
   height: 100%;
-  border-radius: 50%;
+  border-radius: @margin-16!important;
   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;
-  }
+  font-size: @font-size-small;
+  background: var(--c8y-level-4);
+  color: @text-muted;
+ 
   &:not(button){
     height: 20px;
   }
-  &.active,&:not(button){
-    &.default{
+  &.standalone{
+     &.default{
       background: @component-background-default;
       color: @component-color-default;
     }
     &.auto-refresh{
-      background: var(--c8y-brand-primary);
+      background: @component-pulse-color;
       color: var(--c8y-palette-high);
     }
     &.time-context{
@@ -207,6 +199,52 @@
   }
 }
 
+.btn-icon-dot-set{
+  display: flex;
+  gap: 8px;
+  background-color: transparent;
+  background-image: none;
+  box-shadow: none;
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+  touch-action: manipulation;
+  color: inherit;
+  max-width: 100%;
+  appearance: none;
+  -webkit-user-select: none;
+  user-select: none;
+  border: 1px solid @form-control-border-color-default;
+  border-radius: @margin-16!important;
+  font-size: @font-size-small;
+  padding: 5px @margin-8;
+  transition: all 0.25s ease;
+  &:hover,
+  &:focus,
+  &:active {
+    outline-offset: -2px;
+    outline: 2px solid @form-control-border-color-focus!important;
+  }
+  &.active{
+    .default{
+      background: @component-background-default;
+      color: @component-color-default;
+    }
+    .auto-refresh{
+      background: @component-pulse-color;
+      color: var(--c8y-palette-high);
+    }
+    .time-context{
+      background: @status-info;
+      color: var(--c8y-palette-high);
+    }
+    .aggregation{
+      background: var(--c8y-palette-status-warning-high);
+      color: var(--c8y-palette-gray-10);
+    }
+  }
+}
+
 // spacing buttons outside btn-group
 .btn+.btn:not(.btn-block) {
   margin-left: @margin-base;

package/styles/_c8y-pulse.less

@@ -17,6 +17,7 @@
     background-color: @component-pulse-color;
     content: '';
     transform: rotateZ(360deg);
+    animation: c8ypulse 2s infinite;
   }
   &--md{
     width: @margin-16;

package/styles/_page-tabs.less

@@ -33,20 +33,7 @@
     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);
@@ -83,6 +70,18 @@
   position: relative;
 }
 
+c8y-widget-config-section{
+  .component-tabs{
+    min-width: unset!important;
+    > div, > li{
+      flex-shrink: 1;
+      .tab-description{
+        display: none;
+      }
+    }
+  }
+}
+
 .tabs-slider {
   position: absolute;
   top: 0;

package/styles/_tooltip.less

@@ -35,11 +35,13 @@
 // Wrapper for the tooltip content
 .tooltip-inner {
   padding: 3px 8px;
-  max-width: @tooltip-max-width;
+  // max-width: @tooltip-max-width;
+  width: fit-content;
   border-radius: @tooltip-radius;
   background-color: @tooltip-background-default;
   color: @tooltip-color-default;
   text-align: center;
+  text-wrap: balance;
   white-space: pre-wrap;
 }