@c8y/style 1021.80.1 → 1022.3.2

package/styles/_input-groups.less

@@ -39,6 +39,11 @@
     padding-top: 0;
     padding-bottom: 0;
     align-items: center;
+    background-color: @form-control-background-default;
+    > .tag{
+      align-self: unset;
+      flex-shrink: 0;
+    }
   }
 
   c8y-software-type {
@@ -104,12 +109,15 @@
   &:not(:first-child) {
     margin-left: -1px;
   }
-  &--last {
+  &--last, + .input-group-btn {
     margin-left: -1px;
   }
   .input-group-sm &{
     max-height: @form-control-height-sm;
   }
+  > .btn-default{
+    --c8y-btn-default-background-default: @form-control-background-default;
+  }
 }
 
 .input-group-addon,
@@ -118,6 +126,9 @@
   &:not(:first-child):not(:last-child) {
     border-radius: 0;
   }
+  .btn{
+    border-radius: @form-control-border-radius;
+  }
 }
 
 // search with round corners
@@ -155,6 +166,7 @@
         box-shadow: inset 0 0 0 2px @component-brand-primary;
       }
     }
+    
   }
 
   &.input-group-sm {
@@ -189,7 +201,8 @@
     display: flex;
     align-items: center;
     min-width: @form-control-height-base;
-    height: @form-control-height-base;
+    height: 100%;
+    max-height: unset;
     border: 0;
     background-color: transparent;
 
@@ -229,6 +242,7 @@
       width: 100%;
       height: 100%;
       border: 0;
+      border-radius: @form-control-border-radius;
     }
   }
   &.input-group-sm{
@@ -335,7 +349,8 @@
       padding-left: 0;
       min-width: 3ch;
       max-width: 100%;
-      width: fit-content;
+      field-sizing: content;
+      width: auto;
       background-color: transparent;
       box-shadow: none;
       text-overflow: ellipsis;
@@ -377,7 +392,6 @@
     .form-control:not(:focus):not(.ng-dirty) {
       flex: 0 1 auto;
       max-width: 100%;
-      width: fit-content;
     }
   }
 }
@@ -485,7 +499,7 @@
     > .btn:not(:focus),
     > .btn-group {
       z-index: 2;
-      border-left-color: fade(@black, 15%);
+      // border-left-color: fade(@black, 15%);
     }
     > .btn:focus {
       margin-left: -1px;

package/styles/_layouts.less

@@ -2,7 +2,6 @@ body {
   .c8y-scrollbar();
 }
 
-
 // unset overflow to ensure position sticky works
 .mcontainer {
   overflow: unset;
@@ -18,6 +17,9 @@ body {
     margin-bottom: 0;
   }
 }
+pre.inner-scroll{
+  background-color: var(--c8y-pre-background);
+}
 
 /* Mixin that generate classes for setting two columns on a 12 column grid
  * example:
@@ -33,12 +35,28 @@ body {
 }
 
 @media screen and (min-width: @screen-sm-min) {
-  .grid_col--auto-360{
-    grid-template-columns: minmax(0,9fr) 360px;
+  .grid__col--auto-360 {
+    grid-template-columns: minmax(0, 9fr) 360px;
+  }
+  .grid__col--360-auto {
+    grid-template-columns: 360px minmax(0, 1fr) ;
   }
 }
 
+@media screen and (min-width: @screen-md-min) {
+  .grid__col--500-auto {
+    grid-template-columns: 500px minmax(0, 1fr) ;
+  }
+}
+@media screen and (min-width: @screen-md-min) {
+  .grid__col--560-auto {
+    grid-template-columns: minmax(560px, 4fr) minmax(0, 8fr) ;
+  }
+}
 
+.grid__col--auto-300{
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+}
 
 /* Mixin that generate classes for setting three columns on a 12 column grid
  * example:
@@ -286,8 +304,9 @@ body {
     }
   }
   .inner-scroll--md {
-    &, &.overflow-visible-sm{
-      overflow: auto!important;
+    &,
+    &.overflow-visible-sm {
+      overflow: auto !important;
       overscroll-behavior: contain;
       height: 100%;
       background-color: inherit;

package/styles/_list-group.less

@@ -21,9 +21,6 @@
   border: 0;
   box-shadow: inset 0 -1px 0 @component-border-color;
 
-  .dropdown-menu & {
-    box-shadow: inset 0 -1px 0 @component-border-color;
-  }
 
   &.draggable-after {
     position: relative;

package/styles/_main-header.less

@@ -167,7 +167,7 @@ body:not(:has(.has-tabs)):not(:has(.has-action-bar)) {
   display: flex;
   flex-flow: row wrap;
   align-items: center;
-  box-shadow: inset 0 -1px 0 0 @gray-90;
+  box-shadow: var(--c8y-main-header-shadow);
   padding-right: @margin-24;
 
   @media (min-width: @screen-sm-min) {
@@ -213,6 +213,8 @@ body:not(:has(.has-tabs)):not(:has(.has-action-bar)) {
       &:hover {
         color: @header-text-color-hover;
         background-color: @header-background-hover;
+        outline: 2px solid @header-text-color-hover;
+        outline-offset: -2px;
       }
 
       &:focus {

package/styles/_markdown-content.less

@@ -46,4 +46,9 @@
     max-width: 100%;
     height: auto;
   }
+  .c8y-dark-theme &{
+    img{
+      opacity: .65;
+    }
+  }
 }

package/styles/_modals.less

@@ -81,6 +81,10 @@ bs-modal-backdrop {
     display: flex;
     flex-direction: column;
     max-height: calc(100vh - 100px);
+    // when we need to display the asset selector in a dropdown menu 
+    &.has-asset-selector {
+      max-height: calc(100vh - 290px);
+    }
   }
 }
 
@@ -154,7 +158,7 @@ bs-modal-backdrop {
       }
     }
     ~ .modal-inner-scroll .table-data-grid-scroll {
-        height: calc(100vh - 319px);
+        max-height: calc(100vh - 319px);
       tr {
         > td:first-child, th:first-child{
           padding-left: @margin-24;
@@ -272,6 +276,12 @@ bs-modal-backdrop {
 }
 
 @media (min-width: @screen-md-min) {
+  .modal-lg {
+    width: calc(@modal-lg - 200px);
+  }
+}
+
+@media (min-width: @screen-lg-min) {
   .modal-lg {
     width: @modal-lg;
   }

package/styles/_navbar.less

@@ -336,7 +336,6 @@
 .navbar-nav > li > .dropdown-menu {
   margin-top: 0;
 
-  .border-top-radius(0);
 }
 
 // Menu position and menu caret support for dropups via extra dropup class

package/styles/_navigator.less

@@ -120,10 +120,9 @@
     width: calc(@margin-base * 6);
     height: calc(@margin-base * 6);
     line-height: calc(@margin-base * 6);
-    background-color: white;
-    color: @gray-40;
+    border: 1px solid @palette-high;
     display: block;
-    margin: 8px auto 6px auto;
+    margin: 0;
   }
 
   & when not(@appBranding='') {

package/styles/_page-tabs.less

@@ -169,6 +169,7 @@
       width: @nav-tabs-vertical-width;
       box-shadow: 1px 0 0 @nav-tabs-border-color-default;
       content: '';
+      background-color: @component-background-default;
     }
 
     .tabContainer {

package/styles/_popovers.less

@@ -12,9 +12,8 @@
   background-clip: padding-box;
   color: @popover-color-default;
   font-size: @font-size-base; // To reset our font and text properties and avoid inheriting weird values.
-
   .reset-text();
-
+  
   &.high-popover {
     z-index: @zindex-popover + 2;
   }

package/styles/_quick-links-widget.less

@@ -0,0 +1,38 @@
+.c8y-quick-links__link {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  color: inherit;
+  text-align: left;
+  padding: 6px @component-padding;
+  background-image: none;
+  background-color: transparent;
+  border: 0;
+  &.sticky-top {
+    background-color: inherit;
+  }
+  [class^='dlt-c8y-icon-'],
+  [class*=' dlt-c8y-icon-'],
+  .c8y-icon {
+    font-size: 20px;
+  }
+}
+
+.c8y-quick-links__link {
+  &:active {
+    background-color: @drawer-background-active;
+  }
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    outline: 2px solid @drawer-border-selected;
+    outline-offset: -2px;
+    color: @drawer-color;
+    [class^='dlt-c8y-icon-'],
+    [class*=' dlt-c8y-icon-'],
+    .c8y-icon {
+      color: @drawer-border-selected;
+    }
+  }
+}

package/styles/_smartrules.less

@@ -24,12 +24,7 @@
 
   .card-back .card-header-actions {
     display: none;
-    background-color: @brand-primary-dark;
-    color: @component-background-default;
-
-    .smart-list-icon-label > i {
-      color: @component-background-default;
-    }
+    background-color: var(--c8y-level-2);
   }
 
   .smart-rule-description {
@@ -56,6 +51,12 @@
       font-size: 20px;
     }
 
+    .c8y-icon, 
+    [class^='c8y-icon-'], 
+    [class*=' c8y-icon-'] {
+      font-size: 20px;
+    } 
+
     .card-icon {
       i {
         vertical-align: bottom;

package/styles/_spinner-snake.less

@@ -28,7 +28,8 @@
   content: '';
 
   .card &,
-  .modal & {
+  .modal &,
+  .table-data-grid__loading--loader &{
     background: @component-background-default;
   }
 }

package/styles/_split-view.less

@@ -12,6 +12,7 @@
   @media (max-width: @screen-sm-max) {
     &--5-7,
     &--7-5,
+    &--4-8,
     &--8-4 {
       position: relative;
       display: flex !important;
@@ -28,7 +29,7 @@
       height: calc(100vh - 108px);
     }
 
-    &--8-4 {
+    &--8-4,  &--4-8 {
       height: calc(100vh - 166px);
     }
 
@@ -59,6 +60,7 @@
   @media (max-width: @screen-xs-max) {
     &--5-7,
     &--7-5,
+    &--4-8,
     &--8-4 {
       height: calc(100vh - 82px) !important;
     }
@@ -67,6 +69,7 @@
   @media (min-width: @screen-md-min) {
     &--5-7,
     &--7-5,
+    &--4-8,
     &--8-4 {
       display: grid !important;
       grid-template-rows: min-content auto;
@@ -80,6 +83,9 @@
       grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
     }
 
+    &--4-8 {
+      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
+    }
     &--8-4 {
       grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
     }

package/styles/_static-assets-file-picker.less

@@ -1,6 +1,6 @@
 c8y-static-assets-file-picker{
   display: block;
-  padding: var(--c8y-root-component-padding);
+  padding: var(--c8y-root-component-padding-default);
   border: 1px solid var(--c8y-form-control-border-color-default);
   img{
     border: 1px dashed var(--c8y-root-component-border-color);

package/styles/_tabs.less

@@ -1,6 +1,6 @@
 .nav-tabs {
   display: flex;
-  background-color: @nav-tabs-background-active;
+  background-color: @nav-tabs-background-default;
   box-shadow: inset 0 -1px 0 0 @nav-tabs-border-color-default;
   color: @nav-tabs-color-default;
 
@@ -12,7 +12,7 @@
       padding: @nav-tabs-padding;
       height: @margin-64;
       border: none;
-      background-color: @nav-tabs-background-default;
+      background-color: transparent;
       color: @nav-tabs-color-default;
       line-height: @line-height-base;
       display: flex;
@@ -69,6 +69,10 @@
       }
     }
     // Active state, and its :hover to override normal :hover
+
+    &.active{
+      background-color: @nav-tabs-background-active;
+    }
     &.active > a,
     &.active > button:not([disabled]) {
       &,
@@ -92,7 +96,7 @@
         opacity: 1;
       }
     }
-  } // pulling this in mainly for less shorthand
+  } 
   &.nav-justified {
     .nav-justified();
     .nav-tabs-justified();
@@ -169,7 +173,9 @@
 
 .nav-tabs-vertical {
   display: block;
-  padding-top: @margin-48;
+  &:not(.component-tabs) {
+    padding-top: @margin-48;
+  }
   width: @nav-tabs-vertical-width;
   border: 0;
   box-shadow: none;

package/styles/_tag.less

@@ -12,6 +12,10 @@
   font-size: var(--c8y-font-size-xs);
   line-height: 1;
   flex-shrink: 0;
+  align-self: flex-start;
+  .form-control &{
+    align-self: center;
+  }
   a & {
     &:hover,
     &:focus {
@@ -32,6 +36,7 @@
     align-items: center;
     gap: 6px;
     height: 20px;
+    flex: 0 1 fit-content;
     .btn-clean{
       padding: 0!important;
     }

package/styles/index.less

@@ -63,6 +63,7 @@
 @import '_asset-table.less';
 @import '_c8y-gauges.less';
 @import '_dashboard-widgets.less';
+@import '_quick-links-widget.less';
 @import 'timeline-list.less'; // deprecated - remove when all instances are upgraded to Angular
 @import '_c8y-user-roles.less';
 @import '_c8y-role-card.less';
@@ -110,6 +111,8 @@
 @import '_c8y-asset-notes.less';
 @import '_c8y-countdown-interval.less';
 
+@import '_boxed-label.less';
+
 // UI TEMPLATES
 @import '_c8y-login.less';
 @import '_datepicker.less';

package/styles/login-app.less

@@ -0,0 +1,34 @@
+@import 'mixins.less';
+@import '_normalize.less';
+@import '_print.less';
+
+// TRANSITIONS & ANIMATION
+@import '_component-animations.less';
+@import '_animate.less';
+
+// CORE CSS
+@import '_scaffolding.less';
+@import '_alerts.less';
+@import '_badges.less';
+@import '_buttons.less';
+@import '_close.less';
+@import '_button-groups.less';
+@import '_code.less';
+@import '_tag.less';
+@import '_forms.less';
+@import '_c8y-switch.less';
+@import '_type.less';
+@import '_grid.less';
+
+// @import '_grid.less';
+
+@import '_input-groups.less';
+@import '_c8y-cookie-banner.less';
+
+@import '_c8y-glyphs.less';
+@import '_c8y-icons.less';
+@import '_dlt-c8y-icons.less';
+// @import '_dlt-c8y-icons-stroke.less';
+@import 'utilities.less';
+
+@import '_app-switcher.less';

package/styles/mixins/c8y-scrollbar.less

@@ -5,10 +5,7 @@
   }
 
   &::-webkit-scrollbar-track {
-    background: transparent;
-    &:not(textarea) {
-      background: @component-scrollbar-track;
-    }
+    background: @component-scrollbar-track;
   }
   &::-webkit-scrollbar-thumb {
     width: 4px;

package/styles/utilities/_icon-utils.less

@@ -12,7 +12,7 @@
 
   .badge {
     align-self: flex-start;
-    transform: translateX(-8px);
+    transform: translateX(-6px);
   }
   .c8y-list__item & {
     margin: -6px 0;

package/styles/utilities/_position.less

@@ -11,6 +11,19 @@
   position: sticky !important;
 }
 
+.top-0 {
+  top: 0 !important;
+}
+.left-0 {
+  left: 0 !important;
+}
+.right-0 {
+  right: 0 !important;
+}
+.bottom-0 {
+  bottom: 0 !important;
+}
+
 // media queries
 @media (max-width: @screen-xs-max) {
   .p-relative-xs {
@@ -25,6 +38,18 @@
   .p-sticky-xs {
     position: sticky !important;
   }
+  .top-0-xs {
+    top: 0 !important;
+  }
+  .left-0-xs {
+    left: 0 !important;
+  }
+  .right-0-xs {
+    right: 0 !important;
+  }
+  .bottom-0-xs {
+    bottom: 0 !important;
+  }
 }
 
 @media (min-width: @screen-sm-min) {
@@ -40,6 +65,18 @@
   .p-sticky-sm {
     position: sticky !important;
   }
+  .top-0-sm {
+    top: 0 !important;
+  }
+  .left-0-sm {
+    left: 0 !important;
+  }
+  .right-0-sm {
+    right: 0 !important;
+  }
+  .bottom-0-sm {
+    bottom: 0 !important;
+  }
 }
 
 @media (min-width: @screen-md-min) {
@@ -55,6 +92,18 @@
   .p-sticky-md {
     position: sticky !important;
   }
+  .top-0-md {
+    top: 0 !important;
+  }
+  .left-0-md {
+    left: 0 !important;
+  }
+  .right-0-md {
+    right: 0 !important;
+  }
+  .bottom-0-md {
+    bottom: 0 !important;
+  }
 }
 
 @media (min-width: @screen-lg-min) {
@@ -70,4 +119,16 @@
   .p-sticky-lg {
     position: sticky !important;
   }
+  .top-0-lg {
+    top: 0 !important;
+  }
+  .left-0-lg {
+    left: 0 !important;
+  }
+  .right-0-lg {
+    right: 0 !important;
+  }
+  .bottom-0-lg {
+    bottom: 0 !important;
+  }
 }

package/styles/utilities.less

@@ -94,11 +94,14 @@
 .sticky-header-top-0 {
   position: sticky !important;
   top: 0 !important;
+  background: inherit;
 }
 
 .sticky-right{
   position: sticky!important;
   right:0;
+  background: inherit;
+  margin-bottom: 1px;
 }
 
 // Transitions

package/styles/welcome-widget.less

@@ -22,12 +22,12 @@
       margin-top: 1px;
       cursor: pointer;
       transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
-      outline: 1px solid @drawer-separator-color;
+      outline: 1px solid @component-border-color;
       
       &:hover,
       &:focus {
         z-index: @zindex-navbar - 1;
-        outline: 2px solid @drawer-border-selected;
+        outline: 2px solid @component-brand-primary;
         outline-offset: -2px;
       }
       &:focus {

package/variables/_alert-vars.less

@@ -20,7 +20,7 @@
 @alert-system-icon:                     var(--c8y-alert-system-icon, @dlt-c8y-icon-wrench);
 @alert-system-bg:                       @alert-background;
 @alert-system-text:                     @alert-color;
-@alert-system-border:                   var(--brand-primary, var(--c8y-alert-status-system));
+@alert-system-border:                   var(--c8y-alert-status-system);
 
 @alert-warning-icon:                    var(--c8y-alert-warning-icon, @dlt-c8y-icon-warning);
 @alert-warning-bg:                      @alert-background;

package/variables/_badge-vars.less

@@ -3,7 +3,7 @@
 @badge-background-warning:                          @status-warning-lightest;
 @badge-background-danger:                           @status-danger-light;
 @badge-background-info:                             @status-info-light;
-@badge-background-system:                           @brand-primary;
+@badge-background-system:                           @status-system;
 
 @badge-color-default:                               @text-color;
 @badge-color-success:                               @status-success-dark;

package/variables/_brand-vars.less

@@ -84,6 +84,8 @@
   --c8y-navigator-border-active: var(--c8y-navigator-border-selected);
 
   --c8y-right-drawer-link-color: var(--c8y-right-drawer-link-color-default);
+
+  --body-background-color: var(--c8y-body-background-color);
 }
 
 .c8y-system-theme {