@c8y/style 1023.14.33 → 1023.14.36

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

@@ -0,0 +1,173 @@
+@use "../../../variables/index" as *;
+
+@use "../../icons/c8y-glyphs";
+@use "../../mixins/icon-base";
+@use "../../mixins/vendor-prefixes";
+
+[datepicker],
+[uib-datepicker],
+[uib-daypicker] {
+  .btn,
+  .btn-default {
+    border: 0;
+
+    @include vendor-prefixes.box-shadow(none);
+  }
+  table {
+    outline: none;
+    font-size: $font-size-small;
+  }
+  tbody {
+    .btn,
+    .btn-default {
+      position: relative;
+      border: 1px solid $component-background-default;
+      font-size: inherit;
+      .text-info {
+        color: $component-brand-primary;
+        font-weight: bolder;
+      }
+      &.active {
+        background-color: $component-brand-primary;
+        color: $palette-high;
+        .text-info {
+          color: $palette-high;
+        }
+      }
+    }
+ .btn-sm {
+      padding: 5px 8px;
+    }
+    .uib-years .btn-default {
+      padding: 5px 13px;
+    }
+  }
+}
+
+// Removed unused deprecated component class - verified 0 usages: .c8y-datetime-picker
+
+.form-group.datepicker {
+  position: relative;
+
+  .form-control {
+    padding-right: 28px !important;
+  }
+  &::after {
+    @include icon-base.c8y-glyph;
+    position: absolute;
+    top: 50%;
+    right: 5px;
+    z-index: 2;
+    color: $component-brand-primary;
+    content: c8y-glyphs.$c8y-glyph-calendar;
+    font-size: 24px;
+    transform: translate(0, -50%);
+    pointer-events: none;
+  }
+  + .timepicker {
+    margin-left: 2px !important;
+  }
+}
+
+.meausurements2 .timeField .btn {
+  padding: 4px;
+  height: 24px;
+}
+
+.meausurements2 .timeField input {
+  border-radius: $component-border-radius-base!important;
+}
+
+// remove focus on calendar
+.uib-datepicker-popup.dropdown-menu:focus,
+.uib-datepicker-popup.dropdown-menu > *,
+.uib-daypicker {
+  outline: none;
+}
+
+.datepicker{
+  input.form-control{
+    width: 120px;
+  }
+  .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: $size-8!important;
+    padding-right: $size-8!important;
+  }
+}
+
+.timepicker {
+  input.form-control {
+    width: 44px;
+    .form-group-sm & {
+      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
+body {
+  > div[uib-datepicker-popup-wrap] {
+    .uib-datepicker-popup.dropdown-menu {
+      z-index: $zindex-navbar-fixed + 21;
+    }
+  }
+  &.modal-open {
+    > div[uib-datepicker-popup-wrap] {
+      .uib-datepicker-popup.dropdown-menu {
+        z-index: $zindex-modal + 1;
+      }
+    }
+  }
+}

package/styles/{_c8y-map-internal.less → vendor/leaflet/_c8y-map-internal.less}

@@ -282,7 +282,7 @@
       margin-top: -8px;
 
       &:checked ~ span {
-        color: @brand-primary;
+        color: var(--brand-primary, var(--c8y-brand-primary));
 
         &:before {
           position: absolute;
@@ -291,9 +291,9 @@
           margin-top: -11px;
           width: 22px;
           height: 22px;
-          border: 3px solid @brand-primary;
+          border: 3px solid var(--brand-primary, var(--c8y-brand-primary));
           border-radius: 50%;
-          background: @brand-primary;
+          background: var(--brand-primary, var(--c8y-brand-primary));
           content: '';
         }
 
@@ -303,7 +303,7 @@
           left: 0;
           width: 100%;
           height: 100%;
-          border: 2px solid @brand-primary;
+          border: 2px solid var(--brand-primary, var(--c8y-brand-primary));
           content: '';
         }
       }

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

@@ -0,0 +1,316 @@
+@use "../../../variables/index" as *;
+
+@use "sass:string";
+@use "../../mixins/vendor-prefixes";
+
+// 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
+@mixin 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;
+  height: 100%;
+
+  > div {
+    height: 100%;
+
+    &:after {
+      @include leaflet-touch-warning-overlay();
+    }
+
+    .touch-warning:after {
+      animation: leaflet-touch-warning-fadein 0.8s forwards;
+    }
+
+    &.touch-warning:after {
+      content: attr(data-touch-warning-content);
+    }
+
+    .leaflet-div-icon {
+      background: none;
+      border: 0;
+    }
+
+    .c8y-map-marker-icon > div {
+      > i {
+        position: absolute;
+        left: 50%;
+        top: 12px;
+        padding: 2px;
+        border-radius: 50%;
+        transform: translate(-50%, 0);
+        font-size: 14px;
+        background-color: $component-background-default;
+      }
+      font-size: 50px;
+      position: absolute;
+      left: 50%;
+      bottom: 0;
+      transform: translate(-50%, 0);
+    }
+
+    .c8y-map-marker-count {
+      border-radius: 50%;
+      width: 50px;
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+      background-color: $component-background-default;
+      border: 2px solid $component-border-color;
+      cursor: pointer;
+      opacity: 0.8;
+      transition: opacity 0.3s;
+
+      &:before {
+        content: attr(data-count);
+      }
+
+      &:hover {
+        opacity: 1;
+        outline: 3px solid var(--navigator-border-active, var(--c8y-navigator-border-selected));
+        outline-offset: -3px;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        display: inline-block;
+        font-family: dlt-c8y-icons !important;
+        font-style: normal;
+        font-variant: normal;
+        font-weight: 400;
+        text-transform: none;
+
+        &:before {
+          content: '\eaef';
+        }
+      }
+    }
+  }
+}
+
+.c8y-map-status {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 210;
+
+  c8y-global-context-widget-wrapper{
+    display: contents!important;
+    form{
+      display:contents!important;
+    }
+    c8y-auto-refresh-control{
+      min-width: 0;
+    }
+    .toggle-countdown{
+      padding:0!important;
+      width: 30px;
+      min-width: 0;
+    }
+
+    .btn{
+      padding: 0;
+    }
+  }
+}
+
+.c8y-map-internal {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  &:after {
+    @include leaflet-touch-warning-overlay();
+  }
+
+  .touch-warning:after {
+    animation: leaflet-touch-warning-fadein 0.8s forwards;
+  }
+
+  &.touch-warning:after {
+    content: attr(data-touch-warning-content);
+  }
+}
+
+.container-fluid .fullpage-map {
+  position: relative;
+  margin: -24px -24px 0;
+  min-height: calc(string.unquote('100vh - #{$headerHeight}'));
+
+  .leaflet-top.leaflet-left {
+    top: 50px;
+  }
+
+  .leaflet-top.leaflet-right {
+    left: auto;
+    padding-right: 0;
+    padding-left: 30px;
+    min-height: 50px;
+    background-color: transparent;
+    box-shadow: none;
+
+    > .leaflet-control {
+      .btn-link {
+        overflow: hidden;
+        padding: 8px 10px;
+        width: 36px;
+        height: 36px;
+        border-radius: 4px;
+        background-color: $component-background-default;
+        box-shadow: 0 1px 2px 1px $component-border-color !important;
+        color: $component-color-default;
+
+        i {
+          margin-right: 20px;
+        }
+      }
+    }
+  }
+
+  .legend {
+    padding: 5px;
+    border-radius: 5px;
+    background-color: rgba(255, 255, 255, 0.8);
+    font-size: 12px;
+  }
+
+  .legend > * {
+    margin-bottom: 1px;
+  }
+
+  .legend i {
+    float: left;
+    width: 18px;
+    height: 18px;
+    background-size: contain;
+    background-repeat: no-repeat;
+
+    &.critical {
+      background-image: url($critical-marker);
+    }
+
+    &.major {
+      background-image: url($major-marker);
+    }
+
+    &.minor {
+      background-image: url($minor-marker);
+    }
+
+    &.warning {
+      background-image: url($warning-marker);
+    }
+
+    &.normal {
+      background-image: url($normal-marker);
+    }
+  }
+
+  .leaflet-marker-icon {
+    &.blink {
+      @include vendor-prefixes.animation(blink 0.5s ease-in-out infinite alternate);
+    }
+  }
+
+  .leaflet-top.leaflet-left {
+    top: 0;
+  }
+}
+
+// Tracker selection added here just for reference
+.tracker-selection {
+  .radio + .radio {
+    margin-top: 0;
+  }
+
+  .radio label {
+    display: block;
+    margin-bottom: 10px;
+    padding: 30px 22px;
+    background-color: white;
+    color: $gray-40;
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
+
+    input[type='radio'] {
+      position: absolute;
+      top: 50%;
+      left: 21px;
+      margin: 0;
+      margin-top: -8px;
+
+      &:checked ~ span {
+        color: var(--brand-primary, var(--c8y-brand-primary));
+
+        &:before {
+          position: absolute;
+          top: 50%;
+          left: 17px;
+          margin-top: -11px;
+          width: 22px;
+          height: 22px;
+          border: 3px solid var(--brand-primary, var(--c8y-brand-primary));
+          border-radius: 50%;
+          background: var(--brand-primary, var(--c8y-brand-primary));
+          content: '';
+        }
+
+        &:after {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          border: 2px solid var(--brand-primary, var(--c8y-brand-primary));
+          content: '';
+        }
+      }
+
+      + span {
+        display: inline-block;
+        margin-left: 110px;
+      }
+    }
+
+    &[data-tracker-model] {
+      position: relative;
+      background-position: 35px;
+      background-size: contain;
+      background-repeat: no-repeat;
+    }
+  }
+}

package/styles/{_leaflet.less → vendor/leaflet/_leaflet.less}

@@ -1,3 +1,6 @@
+// Override map-icons-path for correct relative path from styles/vendor/leaflet/
+@map-icons-path: if(@use-relative-paths, '../../../img/', 'img/');
+
 /* required styles */
 
 .leaflet-pane,
@@ -112,7 +115,6 @@
 
 /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
 .leaflet-overlay-pane svg {
-  -moz-user-select: none;
 }
 
 .leaflet-pane {
@@ -313,7 +315,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 }
 
 .leaflet-container a.leaflet-active {
-  outline: 2px solid @status-warning;
+  outline: 2px solid var(--palette-status-warning, var(--c8y-palette-status-warning));
 }
 
 .leaflet-zoom-box {
@@ -689,7 +691,6 @@ svg.leaflet-image-layer.leaflet-interactive path {
   width: 24px;
   margin: 0 auto;
 
-  -ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)';
   filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
 }