@c8y/style 1023.14.76 → 1023.14.94

package/styles/vendor/cdk/_cdk-tree.less

@@ -1,3 +1,6 @@
+
+@import "../../mixins/_icon-base.less";
+
 .cdk-tree > .cdk-nested-tree-node {
   padding-left: 0;
   &:before,
@@ -23,7 +26,7 @@
     border-left: 1px solid var(
         --c8y-component-icon-dark-color-light,
         var(--c8y-root-component-icon-dark-color-light, var(--brand-light, var(--c8y-brand-light)))
-      );;
+);;
     content: '';
   }
   &:last-child:before {
@@ -37,7 +40,7 @@
     border-top: 1px solid var(
         --c8y-component-icon-dark-color-light,
         var(--c8y-root-component-icon-dark-color-light, var(--brand-light, var(--c8y-brand-light)))
-      );
+);
     content: '';
   }
   > span {
@@ -56,7 +59,7 @@
   cursor: pointer;
   > [class^='dlt-c8y-icon-'],
   > [class*=' dlt-c8y-icon-'] {
-    margin-right: @margin-4;
+    margin-right: @size-4;
     color: var(--brand-primary, var(--c8y-brand-primary));
   }
 }

package/styles/vendor/cdk/_cdk-virtual-scroll-window.less

@@ -1,3 +1,4 @@
+
 .body {
   display: none;
 }

package/styles/vendor/datepicker/_bs-datepicker.less

@@ -1,3 +1,10 @@
+
+@import "../../../variables/_dlt-c8y-icons-vars.less";
+@import "../../mixins/_color-mixins.less";
+@import "../../mixins/_icon-base.less";
+@import "../../mixins/_shadows-helper.less";
+@import "../../mixins/_buttons.less";
+
 .bs-datepicker {
   position: relative;
   z-index: 1;
@@ -383,7 +390,7 @@
       margin-right: 4px;
       width: 15px;
       height: 16px;
-      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAQCAYAAADJViUEAAABMklEQVQoU9VTwW3CQBCcOUgBtEBKSAukAnBKME+wFCAlYIhk8sQlxFABtJAScAsuAPBEewYcxCP8ouxrPDsza61uiVN1o6RNHD4htSCmq49RfO71BvMJqBBkITRf1kmUW49nQRC9h1I5AZlBClaL8aP1fKgOOxCx8aSLs+Q19eZuNO8QmPqJRtDFguy7OAcDbJPs+/BKVPDIPrvD2ZJgWAmVe7O0rI0Vqs1seyWUXpuJoppYCa5L+U++NpNPkr5OE2oMdARsb3gykJT5ydZcL8Z9Ww60nxg2LhjON9li9OwXZzo+xLbp3nC2s9CL2RrueGyVrgwNm8HpsCzZ9EEW6kqXlo1GQe03FzP/7W8Hl0dBtu7Bf7zt6mIwvX1RvzDCm7+q3mAW0Dl/GPdUCeXrZLT9BrDrGkm4qlPvAAAAAElFTkSuQmCC);
+      background: url(data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAQCAYAAADJViUEAAABMklEQVQoU9VTwW3CQBCcOUgBtEBKSAukAnBKME+wFCAlYIhk8sQlxFABtJAScAsuAPBEewYcxCP8ouxrPDsza61uiVN1o6RNHD4htSCmq49RfO71BvMJqBBkITRf1kmUW49nQRC9h1I5AZlBClaL8aP1fKgOOxCx8aSLs+Q19eZuNO8QmPqJRtDFguy7OAcDbJPs+/BKVPDIPrvD2ZJgWAmVe7O0rI0Vqs1seyWUXpuJoppYCa5L+U++NpNPkr5OE2oMdARsb3gykJT5ydZcL8Z9Ww60nxg2LhjON9li9OwXZzo+xLbp3nC2s9CL2RrueGyVrgwNm8HpsCzZ9EEW6kqXlo1GQe03FzP/7W8Hl0dBtu7Bf7zt6mIwvX1RvzDCm7+q3mAW0Dl/GPdUCeXrZLT9BrDrGkm4qlPvAAAAAElFTkSuQmCC);
       content: '';
       vertical-align: text-bottom;
     }
@@ -412,7 +419,7 @@
         display: block;
         width: 14px;
         height: 10px;
-        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAKCAYAAABrGwT5AAAA1ElEQVQoU42RsQrCUAxF77VuDu7O4oMWW//BURBBpZvgKk4uIrjoqKOTf+DopIO4uYggtFTfw3+pkQqCW1/G5J7kJiFy4m5MxUlxAzgIPHX+lzMPzupRYlYgxiR7vqsOP8YKzsTx0yxFMCUZ+q7aZzlr+OvgoWcAFyAHgat2jLWu48252DdqAihDJGSSJNUUxYmQjs3+hPQBlAh2rG2LCOPnaw3IiGDX99TRCs7ASJsNhUOA7d/LcuHvRG22FIZvsNXw1MX6VZExCilOQKEfeLXr/10+aC9Ho7arh7oAAAAASUVORK5CYII=);
+        background: url(data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAKCAYAAABrGwT5AAAA1ElEQVQoU42RsQrCUAxF77VuDu7O4oMWW//BURBBpZvgKk4uIrjoqKOTf+DopIO4uYggtFTfw3+pkQqCW1/G5J7kJiFy4m5MxUlxAzgIPHX+lzMPzupRYlYgxiR7vqsOP8YKzsTx0yxFMCUZ+q7aZzlr+OvgoWcAFyAHgat2jLWu48252DdqAihDJGSSJNUUxYmQjs3+hPQBlAh2rG2LCOPnaw3IiGDX99TRCs7ASJsNhUOA7d/LcuHvRG22FIZvsNXw1MX6VZExCilOQKEfeLXr/10+aC9Ho7arh7oAAAAASUVORK5CYII=);
         content: '';
       }
 
@@ -574,15 +581,15 @@ c8y-time-picker table {
 timepicker, c8y-time-picker{
   &.form-group-sm{
     .btn-default{
-      .btn-sm();
+      &:extend(.btn-sm);
       padding-right: 8px;
       padding-left: 8px;
     }
-   
+
   }
   &.form-group-lg{
     .btn-default{
-      .btn-lg();
+      &:extend(.btn-lg);
     }
     
   }
@@ -594,7 +601,6 @@ timepicker, c8y-time-picker{
   flex-wrap: nowrap;
   .datepicker {
     flex-basis: 0;
-    flex-grow: 1;
     flex-shrink: 0;
     margin-right: 8px;
     margin-bottom: 0;
@@ -603,5 +609,19 @@ timepicker, c8y-time-picker{
   c8y-time-picker {
     flex-grow: 0;
     margin-bottom: 0;
+    &.form-group-sm{
+      .btn{
+         .button-size(@btn-padding-small-vertical; @btn-padding-small-horizontal; @btn-font-size-small;
+    @btn-line-height-small; @btn-border-radius-small; @form-control-height-sm);
+      }
+  
+    }
+    &.form-group-lg{
+      .btn{
+         .button-size(@btn-padding-large-vertical; @btn-padding-large-horizontal; @btn-font-size-large; @btn-line-height-large;
+    @btn-border-radius-large; @form-control-height-lg);
+      }
+    }
   }
+
 }

package/styles/vendor/datepicker/_uib-datepicker.less

@@ -1,3 +1,8 @@
+
+@import "../../icons/_c8y-glyphs.less";
+@import "../../mixins/_icon-base.less";
+@import "../../mixins/_vendor-prefixes.less";
+
 [datepicker],
 [uib-datepicker],
 [uib-daypicker] {
@@ -29,7 +34,7 @@
         }
       }
     }
-    .btn-sm {
+ .btn-sm {
       padding: 5px 8px;
     }
     .uib-years .btn-default {
@@ -82,16 +87,44 @@
 .datepicker{
   input.form-control{
     width: 120px;
-  .form-group-sm & {
+  }
+  .form-group-sm &,
+  &.form-group-sm {
+    input.form-control{
       width: 102px;
     }
   }
+  .form-group-lg &,
+  &.form-group-lg {
+    input.form-control{
+      width: 134px;
+    }
+  }
+  
+}
+
+[datetype="DateRange"] .datepicker{
+  input.form-control{
+    width: 200px;
+  }
+  .form-group-sm &,
+  &.form-group-sm {
+    input.form-control{
+      width: 170px;
+    }
+  }
+  .form-group-lg &,
+  &.form-group-lg {
+    input.form-control{
+      width: 230px;
+    }
+  }
 }
 
 timepicker{
   .btn{
-    padding-left: @margin-8!important;
-    padding-right: @margin-8!important;
+    padding-left: @size-8!important;
+    padding-right: @size-8!important;
   }
 }
 

package/styles/vendor/leaflet/_c8y-map-internal.less

@@ -1,3 +1,44 @@
+
+@import "../../mixins/_vendor-prefixes.less";
+
+// Override marker paths with correct relative paths for this file location
+@critical-marker: '../../../img/critical-marker-icon.png';
+@major-marker: '../../../img/major-marker-icon.png';
+@minor-marker: '../../../img/minor-marker-icon.png';
+@warning-marker: '../../../img/warning-marker-icon.png';
+@normal-marker: '../../../img/normal-marker-icon.png';
+
+// Keyframe animation for touch warning overlay (defined once globally)
+@keyframes leaflet-touch-warning-fadein {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+// Shared mixin for leaflet touch warning overlay
+.leaflet-touch-warning-overlay() {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 461;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 15px;
+  background: rgba(0, 0, 0, 0.5);
+  color: @component-background-default;
+  animation: leaflet-touch-warning-fadein 0.8s backwards;
+  pointer-events: none;
+}
+
 .c8y-map {
   position: relative;
   z-index: 11;
@@ -7,32 +48,7 @@
     height: 100%;
 
     &:after {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      z-index: 461;
-      display: -webkit-box;
-      display: -ms-flexbox;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 15px;
-      background: rgba(0, 0, 0, 0.5);
-      color: @component-background-default;
-      animation: leaflet-touch-warning-fadein 0.8s backwards;
-      pointer-events: none;
-    }
-
-    @keyframes leaflet-touch-warning-fadein {
-      0% {
-        opacity: 0;
-      }
-
-      100% {
-        opacity: 1;
-      }
+      .leaflet-touch-warning-overlay();
     }
 
     .touch-warning:after {
@@ -137,32 +153,7 @@
   left: 0;
 
   &:after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 461;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 15px;
-    background: rgba(0, 0, 0, 0.5);
-    color: @component-background-default;
-    animation: leaflet-touch-warning-fadein 0.8s backwards;
-    pointer-events: none;
-  }
-
-  @keyframes leaflet-touch-warning-fadein {
-    0% {
-      opacity: 0;
-    }
-
-    100% {
-      opacity: 1;
-    }
+    .leaflet-touch-warning-overlay();
   }
 
   .touch-warning:after {
@@ -271,8 +262,7 @@
     padding: 30px 22px;
     background-color: white;
     color: @gray-40;
-
-    .box-shadow(0 0 1px rgba(0, 0, 0, 0.2));
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
 
     input[type='radio'] {
       position: absolute;

package/styles/vendor/leaflet/_leaflet.less

@@ -1,3 +1,6 @@
+
+@import "../../mixins/_tab-focus.less";
+
 // Override map-icons-path for correct relative path from styles/vendor/leaflet/
 @map-icons-path: if(@use-relative-paths, '../../../img/', 'img/');
 
@@ -203,7 +206,7 @@
 .leaflet-right .leaflet-control {
   float: right;
   display: flex;
-  gap: @margin-8;
+  gap: @size-8;
 }
 
 .leaflet-top .leaflet-control {

package/styles/vendor/other/_colorpicker.less

@@ -1,3 +1,4 @@
+
 // DEPRECATED: This file is deprecated and will be removed in a future release.
 // DEPRECATED: Check if colorpicker can be removed. Currently used in 22 places.
 
@@ -32,7 +33,7 @@
 }
 
 body .minicolors-sprite {
-  background: url('@{path}/jquery.minicolors.png') 0 0 repeat;
-
   @path: if(@use-relative-paths, '../../../img', 'img');
+
+  background: url('@{path}/jquery.minicolors.png') 0 0 repeat;
 }

package/styles/vendor/selectize/_c8y-selectize.less

@@ -1,3 +1,10 @@
+
+@import "../../icons/_c8y-glyphs.less";
+@import "../../mixins/_color-mixins.less";
+@import "../../mixins/_icon-base.less";
+@import "../../mixins/_shadows-helper.less";
+@import "../../mixins/_vendor-prefixes.less";
+
 .ui-select-offscreen {
   position: absolute !important;
   top: 0 !important;
@@ -12,19 +19,19 @@
   border: 0 !important;
 }
 
-.selectize-border-radius (@radii) {
+.selectize-border-radius(@radii) {
   border-radius: @radii;
 }
 
-.selectize-unselectable () {
+.selectize-unselectable() {
   user-select: none;
 }
 
-.selectize-box-shadow (@shadow) {
+.selectize-box-shadow(@shadow) {
   box-shadow: none;
 }
 
-.selectize-box-sizing (@type: border-box) {
+.selectize-box-sizing(@type: border-box) {
   box-sizing: @type;
 }
 
@@ -33,7 +40,24 @@ body {
   .selectize-input {
     min-height: 0;
 
-    .form-control();
+    // Form control base styles (from .form-control in forms.less)
+    display: block;
+    padding: @form-control-padding-base-vertical @form-control-padding-base-horizontal;
+    width: 100%;
+    height: @form-control-height-base;
+    border: 0;
+    border-radius: @form-control-border-radius;
+    background-color: @form-control-background-default;
+    box-shadow: inset 0 0 0 @form-control-border-width @form-control-border-color-default;
+    color: @form-control-color-default;
+    font-weight: @form-control-font-weight;
+    font-size: @font-size-base;
+    font-family: @form-control-font-family;
+    line-height: @form-control-line-height;
+    transition:
+      border-color 0.15s ease-in-out,
+      box-shadow 0.15s ease-in-out;
+
     &.focus {
       outline: 0;
       border: 0;
@@ -97,8 +121,7 @@ body .selectize-container {
       border: @selectize-border;
       border-bottom: 0;
       background-color: @component-background-default;
-
-      .box-shadow(0 20px 15px fade(@black, 10%));
+      box-shadow: 0 20px 15px rgba(@black, 0.1);
     }
     .selectize-input {
       position: relative;
@@ -161,7 +184,7 @@ body .selectize-input input {
 body .selectize-control.single .selectize-input.input-active,
 body .selectize-input {
   display: inline-block;
-  background: var(--c8y-form-control-background-default, @component-background-default);
+  background: var(--c8y-form-control-background-default; @component-background-default);
   color: @component-color-default;
   cursor: text;
 }
@@ -234,7 +257,7 @@ body .selectize-input {
     line-height: inherit !important;
 
     user-select: auto !important;
-    .selectize-box-shadow(none) !important;
+    box-shadow: none !important;
     &:focus {
       outline: none !important;
     }
@@ -263,7 +286,7 @@ body .selectize-dropdown {
   z-index: 9;
   margin: -1px 0 0;
   border: @selectize-border;
-  background-color: var(--c8y-dropdown-background-default, @component-background-default);
+  background-color: var(--c8y-dropdown-background-default; @component-background-default);
 
   .selectize-box-sizing(border-box);
   .boxShadowHelper(md);

package/variables/_color-defaults.less

@@ -1,18 +1,37 @@
 /**
- * LESS Variable Defaults for Branding Customization
+ * ⚠️ DEPRECATED: SCSS/LESS Variable Defaults
  *
- * These variables can be overridden AFTER importing @c8y/style/extend.less
- * to customize the theme using LESS variable overriding.
+ * This file is DEPRECATED and no longer functionally used in the branding system.
+ * It is kept only for backward compatibility and will be removed in a future major release.
  *
- * Example usage:
- * ```less
- * // Your styles.less
- * @import "~@c8y/style/extend.less";
- * @brand-primary: #8e9de1;  // Override with direct hex value
+ * WHY DEPRECATED:
+ * - The LESS/SCSS variable override system has been replaced with CSS custom properties
+ * - Values defined here are immediately overwritten in _color-vars.scss (line 26)
+ * - The conditional guards that used these "-default" values are now disabled
+ *
+ * MIGRATION PATH:
+ * Use CSS custom properties instead:
+ *
+ * ```css
+ * :root {
+ *   --brand-primary: #8e9de1;
+ *   --navigator-bg-color: #2c3e50;
+ * }
  * ```
  *
- * These LESS variables are then used to set CSS custom properties,
- * which are used throughout the application for runtime theming.
+ * Or use application options at runtime:
+ * ```typescript
+ * export const options: ApplicationOptions = {
+ *   brandingCssVars: {
+ *     '--brand-primary': '#8e9de1'
+ *   }
+ * };
+ * ```
+ *
+ * See README.md for more information.
+ *
+ * DO NOT ADD NEW VARIABLES TO THIS FILE.
+ * DO NOT RELY ON THESE VALUES - they are not used in the compiled output.
  */
 
 /* Palette defaults - these match the design tokens */

package/variables/_color-defaults.scss

@@ -1,18 +1,37 @@
 /**
- * LESS Variable Defaults for Branding Customization
+ * ⚠️ DEPRECATED: SCSS/LESS Variable Defaults
  *
- * These variables can be overridden AFTER importing $c8y/style/extend.less
- * to customize the theme using LESS variable overriding.
+ * This file is DEPRECATED and no longer functionally used in the branding system.
+ * It is kept only for backward compatibility and will be removed in a future major release.
  *
- * Example usage:
- * ```less
- * // Your styles.less
- * @import '~$c8y/style/extend';
- * $brand-primary: #8e9de1;  // Override with direct hex value
+ * WHY DEPRECATED:
+ * - The LESS/SCSS variable override system has been replaced with CSS custom properties
+ * - Values defined here are immediately overwritten in _color-vars.scss (line 26)
+ * - The conditional guards that used these "-default" values are now disabled
+ *
+ * MIGRATION PATH:
+ * Use CSS custom properties instead:
+ *
+ * ```css
+ * :root {
+ *   --brand-primary: #8e9de1;
+ *   --navigator-bg-color: #2c3e50;
+ * }
  * ```
  *
- * These LESS variables are then used to set CSS custom properties,
- * which are used throughout the application for runtime theming.
+ * Or use application options at runtime:
+ * ```typescript
+ * export const options: ApplicationOptions = {
+ *   brandingCssVars: {
+ *     '--brand-primary': '#8e9de1'
+ *   }
+ * };
+ * ```
+ *
+ * See README.md for more information.
+ *
+ * DO NOT ADD NEW VARIABLES TO THIS FILE.
+ * DO NOT RELY ON THESE VALUES - they are not used in the compiled output.
  */
 
 /* Palette defaults - these match the design tokens */