@c8y/style 1021.63.2 → 1021.66.0

package/package.json

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

package/styles/_badges.less

@@ -41,11 +41,7 @@
   &:empty {
     display: none;
   }
-  .btn & {
-    position: relative;
-    top: 50%;
-    transform: translate(0, -50%);
-  }
+  
   a & {
     &:hover,
     &:focus {

package/styles/_buttons.less

@@ -59,6 +59,12 @@
       pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
     }
   }
+
+  &:has(.badge){
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+  }
 }
 
 .btn-icon {

package/styles/_c8y-list-group.less

@@ -44,9 +44,16 @@
     &.highlighted {
       background-color: @brand-80;
     }
-
+    &.selected{
+      border-left: 4px solid @component-color-active;
+      background-color: @component-background-default;
+    }
     /* typeahead dropdown list items styling */
-
+    &:has(.c8y-list__item__btn:focus) {
+      outline: 2px solid @component-color-focus;
+      outline-offset: -2px;
+      border-radius: @component-border-radius-focus !important;
+    }
     bs-dropdown-container &, c8y-typeahead .dropdown &, .c8y-select-v2 .dropdown & {
       &.active,
       &:active {
@@ -56,6 +63,7 @@
             .glyphicon();
             float: right;
             content:  @dlt-c8y-icon-check;
+            font-size: 18px;
           }
         }
         color: @component-color-active;
@@ -151,7 +159,13 @@
         pointer-events: none;
       }
     }
-
+    &__btn{
+      .btn-clean();
+      white-space: normal;
+      &:focus{
+        outline: none;
+      }
+    }
     &--link {
       cursor: pointer;
 
@@ -582,6 +596,7 @@ c8y-li-drag-handle, c8y-list-item-drag-handle {
   }
 
   .c8y-list--timeline__item__date {
+    margin-left: 1px;
     margin-right: 40px;
     width: 64px;
     font-size: @font-size-xs;

package/styles/_datepicker.less

@@ -91,11 +91,24 @@
       width: 30px;
     }
   }
+  
   .form-inline & {
     .form-group {
       margin-right: 0;
     }
   }
+  
+  .uib-time.am-pm {
+    width: 60px;
+    
+    .btn {
+      height: 28px;
+      margin-left: 2px;
+      padding-top: 2px;
+      padding-bottom: 2px;
+      width: 100%;
+    }
+  }
 }
 
 // fix z-index when attached to body

package/styles/_layouts.less

@@ -47,6 +47,51 @@ body {
  */
 .createGridCols3(5);
 
+
+// grid with 3 columns collapsed with the last column collapsed
+.grid__col--8-4-0 {
+  @media(min-width: @screen-md-min) {
+    transition: .35s;
+    grid-template-columns: 8fr 4fr 0fr;
+  }
+}
+
+.grid__col--5-7-0 {
+  @media(min-width: @screen-md-min) {
+    transition: .35s;
+    grid-template-columns: 5fr 7fr 0fr;
+  }
+}
+
+.grid__col--6-6-0 {
+  @media(min-width: @screen-md-min) {
+    transition: .35s;
+    grid-template-columns: 6fr 6fr 0fr;
+  }
+}
+// grid with 3 columns collapsed with the first column collapsed
+.grid__col--0-4-8 {
+  @media(min-width: @screen-md-min) {
+    transition: .35s;
+    grid-template-columns: 0fr 4fr 8fr;
+  }
+}
+
+.grid__col--0-7-5 {
+  @media(min-width: @screen-md-min) {
+  transition: .35s;
+  grid-template-columns: 0fr 7fr 5fr;
+  }
+}
+
+.grid__col--0-6-6 {
+  @media(min-width: @screen-md-min) {
+  transition: .35s;
+  grid-template-columns: 0fr 6fr 6fr;
+  }
+}
+
+
 /* Mixin that generate classes for setting two rows on a 12 rows grid
  * example:
  * `grid__row-4-6`

package/styles/_markdown-content.less

@@ -26,6 +26,22 @@
     border-bottom: 1px dotted @gray-50;
   }
 
+  &--to-h3{
+    h1, h2{
+      margin: 0 0 1rem;
+      padding: 2rem 0;
+      border-top: 1px dotted @gray-50;
+      font-weight: 600;
+      font-size: var(--c8y-font-size-h3);
+      &:first-child{
+        border-top: 0;
+      }
+      &:not(:first-child){
+        margin-top: 2rem;
+      }
+    }
+  }
+
   img {
     max-width: 100%;
     height: auto;

package/variables/_label-vars.less

@@ -14,7 +14,7 @@
 @label-color-success:                                   @status-success-dark;
 //** Info label background color
 @label-background-info:                                 @status-info-light;
-@label-color-info:                                      @status-info;
+@label-color-info:                                      @status-info-dark;
 //** Warning label background color
 @label-background-warning:                              @status-warning-lightest;
 @label-color-warning:                                   @status-warning-dark;

package/variables/_tag-vars.less

@@ -14,7 +14,7 @@
 
 // Info tag background color
 @tag--background-info:                                 @status-info-light;
-@tag--color-info:                                      @status-info;
+@tag--color-info:                                      @status-info-dark;
 
 // Warning tag background color
 @tag--background-warning:                              @status-warning-lightest;