@c8y/style 1021.52.0 → 1021.54.2

package/package.json

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

package/styles/_button-groups.less

@@ -54,6 +54,11 @@
   .btn-group + .btn-group {
     margin-left: -2px;
   }
+
+  // also when we're using the realtime button
+  c8y-realtime-control .btn{
+    border-left: 0;
+  }
 }
 
 // Optional: Group multiple button groups together for a toolbar

package/styles/_buttons.less

@@ -375,7 +375,7 @@ label > .btn-clean {
   .legend &,
   &--sm {
     display: inline;
-    vertical-align: super;
+    align-self: center;
     height: 14px;
     width: 14px;
     &::before {

package/styles/_c8y-action-bar.less

@@ -50,22 +50,22 @@
   }
 }
 
-body:not(:has(.app-main-header)){
+body:not(:has(.app-main-header)) {
   .c8y-ui-action-bar {
     top: 0;
     &.has-tabs {
       top: 48px;
     }
-    @media(max-width: @screen-xs-max){
-      &.has-tabs{
-        display: none
+    @media (max-width: @screen-xs-max) {
+      &.has-tabs {
+        display: none;
       }
-      .navbar-header{
+      .navbar-header {
         display: none;
       }
     }
   }
-  &:has(.vertical-tabs){
+  &:has(.vertical-tabs) {
     .c8y-ui-action-bar {
       top: 0;
     }
@@ -127,6 +127,9 @@ body:not(:has(.app-main-header)){
         &.uib-datepicker-popup {
           width: 280px;
         }
+        &.dropdown-menu-wide {
+          max-width: 400px;
+        }
       }
     }
   }
@@ -155,11 +158,10 @@ body:not(:has(.app-main-header)){
         margin: 0;
         padding: 7px @margin-8;
 
-        &:first-child{
+        &:first-child {
           padding-left: 0;
         }
       }
-    
 
       > .btn {
         float: none;
@@ -287,9 +289,9 @@ body:not(:has(.app-main-header)){
             }
           }
         }
-        &.no-remove.more-wrapper{
+        &.no-remove.more-wrapper {
           height: 0;
-          .dropdown{
+          .dropdown {
             border-top: 0;
           }
         }

package/styles/_c8y-data-explorer.less

@@ -22,6 +22,15 @@ c8y-chart {
   fill: currentColor;
 }
 
+.data-point-explorer .chart-container{
+  min-height: 280px;
+}
+
+.card-dashboard .chart-container{
+  max-height: calc(100% - 95px);
+  max-width: 99.5%;
+}
+
 .top-chart-bar {
   justify-content: space-between;
   margin: 2px 0 0;
@@ -218,6 +227,13 @@ c8y-chart {
   left: 56px;
 }
 
+.chart-load-more{
+  position: absolute;
+  left: 48px;
+  right: 11px;
+  bottom: 3px;
+}
+
 .meausurements2 c8y-measurements-icon-bar {
   display: block;
   padding-top: 5px;

package/styles/_c8y-data-point-list.less

@@ -12,7 +12,9 @@
   }
 }
 
-c8y-datapoint-selection-list {
+c8y-datapoint-selection-list,
+c8y-alarm-event-selection-list {
+
   .c8y-list__item__actions {
     align-self: center;
   }
@@ -30,8 +32,8 @@ c8y-datapoint-selection-list {
   }
 }
 
-c8y-datapoint-selector-list-item {
-  .c8y-list__item__actions{
-    padding-top: 10px!important;
-  }
-}
+// c8y-datapoint-selector-list-item {
+//   .c8y-list__item__actions{
+//     padding-top: 10px!important;
+//   }
+// }

package/styles/_c8y-datapoint-pill.less

@@ -27,11 +27,31 @@
   }
 }
 
+.c8y-datapoint-pill{
+  &__btn {
+    &, &:not(.btn){
+      padding: @margin-4 @margin-4 @margin-4 @margin-base;
+      &:first-child{
+        border-bottom-left-radius: @margin-16!important;
+        border-top-left-radius: @margin-16!important;
+      }
+      + .c8y-datapoint-pill__btn{
+        border-right: 0;
+        padding-right: @margin-base;
+      }
+    }
+  }
+}
 
 .c8y-alarm-pill {
   border-radius: @margin-4;
   &__btn {
-    padding: @margin-4;
+    &, &:not(.btn){
+      padding: @margin-4!important;
+      + .c8y-alarm-pill__btn{
+        border-right: 0;
+      }
+    }
   }
 }
 
@@ -39,8 +59,13 @@
   border-radius: 2px;
   border: 1px dotted @component-color-text-muted;
   &__btn {
-    border-right: 1px dotted @component-color-text-muted;
-    padding: @margin-4;
+    &, &:not(.btn){
+      border-right: 1px dotted @component-color-text-muted;
+      padding: @margin-4 !important;
+      + .c8y-event-pill__btn{
+        border-right: 0;
+      }
+    }
   }
 }
 

package/styles/_c8y-icons.less

@@ -124,6 +124,7 @@
   }
 }
 
+
 .c8y-icon-aab-icon-model {
   &:before {
     content: @c8y-icon-dark-aab-icon-model; 
@@ -919,8 +920,6 @@
   }
 }
 
-
-
 .app-noicon {
   display: inline-block;
   width: 36px;
@@ -995,11 +994,18 @@
   > i{
     font-size: 16px;
   }
+  &--medium{
+    width: 20px;
+    height: 20px;
+    > i{
+      font-size: 12px;
+    }
+  }
   &--small{
     width: 16px;
     height: 16px;
     > i{
-      font-size: 12px;
+      font-size: 10px;
     }
   }
 }

package/styles/_c8y-list-group.less

@@ -214,7 +214,7 @@ c8y-li-drag-handle {
   flex-shrink: 0;
   max-width: 0;
   overflow: hidden;
-  transition: all 0.25s ease;
+  // transition: all 0.25s ease;
 
   c8y-li-drag-handle {
     padding: 0 !important;
@@ -230,12 +230,18 @@ c8y-li-drag-handle {
     }
   }
 
+  + c8y-li-checkbox{
+    padding-left: 0;
+  }
   .cdk-drag-disabled & {
     display: none;
 
     + * {
       padding-left: 0 !important;
     }
+    + c8y-li-checkbox {
+      padding-left: 16px!important;
+    }
   }
 }
 
@@ -249,8 +255,9 @@ c8y-li-drag-handle {
 
 .c8y-list__item:hover {
   c8y-li-drag-handle:not(:empty) {
-    max-width: 100px;
-    padding-left: @margin-8;
+    max-width: unset;
+    width: @margin-16;
+    margin-right: calc(@margin-16 * -1);
   }
 }
 

package/styles/_dashboard-widgets.less

@@ -21,3 +21,10 @@
 .widget-thumbnail {
   max-width: 100%;
 }
+
+
+.widget-preview{
+  .chart-container{
+    min-height: 240px;
+  }
+}

package/styles/_forms.less

@@ -137,6 +137,10 @@ label {
       opacity: @form-control-disabled-opacity;
     }
   }
+  &:has(.btn-help){
+    display: flex;
+    align-items: center;
+  }
 }
 
 // Normalize form controls
@@ -285,7 +289,7 @@ textarea.form-control {
   &--alarm{
     input + span{
       > i{
-        transform: translateY(-.5px);
+        transform: translateY(.3px);
       }
     }
   }

package/styles/_input-groups.less

@@ -25,6 +25,9 @@
     margin-bottom: 0;
     height: @form-control-height-base !important;
     min-width: 0;
+    &:not(:first-child) {
+      margin-left: -1px;
+    }
   }
   > .color-input {
     flex-grow: 0;
@@ -75,6 +78,7 @@
   }
 
   .form-group-sm &,
+  .input-group-sm &,
   &.input-sm {
     padding: @form-control-padding-small-vertical @form-control-padding-small-horizontal;
     font-size: @font-size-small;
@@ -97,9 +101,15 @@
   display: flex;
   align-items: stretch;
   max-height: @form-control-height-base;
+  &:not(:first-child) {
+    margin-left: -1px;
+  }
   &--last {
     margin-left: -1px;
   }
+  .input-group-sm &{
+    max-height: @form-control-height-sm;
+  }
 }
 
 .input-group-addon,
@@ -221,6 +231,12 @@
       border: 0;
     }
   }
+  &.input-group-sm{
+    .input-group-btn,
+    .input-group-addon {
+      height: @form-control-height-sm;
+    }
+  }
 }
 
 // Reset rounded corners

package/styles/_layouts.less

@@ -32,6 +32,14 @@ body {
   grid-column-end: -1;
 }
 
+@media screen and (min-width: @screen-sm-min) {
+  .grid_col--auto-360{
+    grid-template-columns: minmax(0,9fr) 360px;
+  }
+}
+
+
+
 /* Mixin that generate classes for setting three columns on a 12 column grid
  * example:
  * `grid__col-3-6-3`

package/styles/utilities.less

@@ -79,6 +79,13 @@
 .fit-h {
   height: 100% !important;
 }
+
+.fit-h--md{
+  @media (min-width: @screen-md-min){
+    height: 100% !important;
+  }
+}
+
 .fit-h-20 {
   height: 20px !important;
 }