@c8y/style 1023.17.20 → 1023.22.2

package/styles/components/specialized/_c8y-utils.scss

@@ -0,0 +1,109 @@
+@use "../../../variables/index" as *;
+
+
+/**
+ * c8y utils - Component styles
+ *
+ * Note: Uses $size-* tokens for spacing where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions: Fixed sizes for component layout
+ * - Off-grid spacing: Component-specific positioning
+ * - Border widths (1px, 2px, 3px): Standard borders
+ * - Font-sizes: Typography
+ * - Percentages: Layout
+ */
+svg:not(.leaflet-zoom-animated) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+nvd3-multi-bar-chart svg{
+  fill: var(--c8y-text-color);
+}
+
+[ng\:cloak],
+[ng-cloak],
+[data-ng-cloak],
+[x-ng-cloak],
+.ng-cloak,
+.x-ng-cloak {
+  display: none !important;
+}
+
+@media (min-width: $screen-lg) {
+  .showOnHover {
+    &:not(.open) {
+      opacity: 0;
+      &:focus,
+      &:focus-within {
+        opacity: 1;
+      }
+    }
+  }
+  div:hover > .showOnHover,
+  div:hover > p > .showOnHover,
+  li:hover > .showOnHover,
+  tr:hover .showOnHover,
+  a:hover > .showOnHover,
+  .c8y-list__item__body:hover .showOnHover {
+    opacity: 1;
+  }
+}
+
+.listLink {
+  display: inline-block;
+  width: 100%;
+  color: inherit !important;
+  text-decoration: none !important;
+}
+
+.interact {
+  cursor: pointer;
+}
+
+// FIXME: after nvd3 upgrades this correction in css we can remove this
+.leaflet-container svg:not(.leaflet-zoom-animated) {
+  width: auto;
+  height: auto;
+}
+
+.draggableCursor {
+  cursor: move;
+}
+
+.tooltip-no-max-width + .tooltip .tooltip-inner {
+  max-width: none;
+  white-space: pre;
+}
+
+// label inside checkbox
+.checkbox label {
+  user-select: none;
+}
+
+// MS EDGE Icon fix (effective IE10+)
+_:-ms-lang(x),
+.ie10up,
+img[src*='.svg'] {
+  width: 100%;
+}
+
+input[type='number'].no-spinners::-webkit-inner-spin-button,
+input[type='number'].no-spinners::-webkit-outer-spin-button {
+  margin: 0;
+
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+// disable blue outline in chrome on disabled elements
+.disabled {
+  outline: 0 !important;
+}
+
+.wide-linebreak-tooltip .tooltip-inner {
+  min-width: 360px;
+  white-space: pre-wrap;
+}

package/styles/components/specialized/_code.scss

@@ -0,0 +1,94 @@
+@use "../../../variables/index" as *;
+
+@use "../../mixins/c8y-scrollbar";
+
+
+/**
+ * code - Component styles
+ *
+ * Note: Uses $size-* tokens for spacing where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions: Fixed sizes for component layout
+ * - Off-grid spacing: Component-specific positioning
+ * - Border widths (1px, 2px, 3px): Standard borders
+ * - Font-sizes: Typography
+ * - Percentages: Layout
+ */
+code,
+kbd,
+pre,
+samp,
+.text-code {
+  font-family: $code-font-family;
+}
+
+code {
+  padding: 2px $size-4;
+  border-radius: $code-border-radius;
+  background-color: $code-background;
+  color: $code-color;
+  font-size: $code-font-size;
+}
+
+kbd {
+  padding: 2px $size-4;
+  border-radius: $kbd-border-radius;
+  background-color: $kbd-background;
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
+  color: $kbd-color;
+  font-size: $code-font-size;
+  kbd {
+    padding: 0;
+    box-shadow: none;
+    font-weight: bold;
+    font-size: 100%;
+  }
+}
+
+pre {
+  display: block;
+  margin: 0 0 1rem;
+  padding: 1rem;
+  border: 1px solid $pre-border-color;
+  border-radius: $pre-border-radius;
+  background-color: $pre-background;
+  color: $pre-color;
+  word-break: break-all;
+  font-size: $code-font-size;
+  line-height: $line-height-base;
+  overflow-wrap: break-word;
+
+  code {
+    padding: 0;
+    border-radius: 0;
+    background-color: transparent;
+    color: inherit;
+    word-break: break-word;
+    font-size: inherit;
+    overflow-wrap: break-word;
+  }
+}
+
+// pre:has(code) {
+//   background-color: var(--c8y-code-background);
+//   color: var(--c8y-code-color);
+//   border-color: color-mix(in srgb, var(--c8y-code-background), black 5%);
+// }
+
+.pre-scrollable {
+  overflow-y: scroll;
+  max-height: $pre-scrollable-max-height;
+}
+
+.pre-scrollable, pre{
+  @include c8y-scrollbar.c8y-scrollbar();
+}
+
+.pre-wrapped,
+.text-code {
+  white-space: pre-wrap;
+  white-space: -moz-pre-wrap;
+  white-space: -pre-wrap;
+  white-space: -o-pre-wrap;
+}

package/styles/components/specialized/_device-software-tab.scss

@@ -0,0 +1,52 @@
+@use "../../../variables/index" as *;
+
+
+/**
+ * device software tab - Component styles
+ *
+ * Note: Uses $size-* tokens for spacing where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions: Fixed sizes for component layout
+ * - Off-grid spacing: Component-specific positioning
+ * - Border widths (1px, 2px, 3px): Standard borders
+ * - Font-sizes: Typography
+ * - Percentages: Layout
+ */
+c8y-software-device-tab {
+  .split-view {
+    @media (min-width: $screen-md-min) {
+      &--7-5 {
+        grid-template-columns: minmax(0, 7fr) minmax(284px, 5fr);
+      }
+    }
+  }
+
+  c8y-installed-software {
+    #software-list {
+      max-height: calc(100vh - 344px);
+
+      @media (max-width: $screen-xs-max) {
+        max-height: calc(100vh - 260px);
+      }
+    }
+
+    #operation-block ~ #software-list {
+      max-height: calc(100vh - 416px);
+
+      @media (max-width: $screen-xs-max) {
+        max-height: calc(100vh - 332px);
+      }
+    }
+  }
+
+  c8y-device-software-changes {
+    height: 100%;
+
+    #software-changes-list {
+      @media (min-width: $screen-md-min) {
+        max-height: calc(100vh - 280px);
+      }
+    }
+  }
+}

package/styles/components/specialized/_dtm-icon-selector.scss

@@ -0,0 +1,84 @@
+@use "../../../variables/index" as *;
+@use "../../core/buttons/buttons" as *;
+
+
+/**
+ * dtm icon selector - Component styles
+ *
+ * Note: Uses $size-* tokens for spacing where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions: Fixed sizes for component layout
+ * - Off-grid spacing: Component-specific positioning
+ * - Border widths (1px, 2px, 3px): Standard borders
+ * - Font-sizes: Typography
+ * - Percentages: Layout
+ */
+.dtm-icon-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+
+  @media(min-width: $screen-sm-min) {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
+  @media(min-width: $screen-md-min) {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+
+
+  &__item {
+    display: flex;
+    align-items: stretch;
+    justify-content: stretch;
+
+    &--selected {
+      >button {
+        box-shadow: inset 0 0 0 2px $component-color-focus  !important;
+      }
+    }
+  }
+
+  &__btn {
+    // Note: btn() mixin doesn't exist, removed during LESS to SCSS migration
+    @include btn_clean();
+    height: auto;
+    white-space: normal;
+    text-align: center;
+    padding: $size-8;
+    background: $component-background-default;
+    width: 100%;
+
+    >i {
+      color: $gray-30;
+      margin-bottom: 4px;
+    }
+
+    &:hover,
+    &:focus {
+      box-shadow: inset 0 0 0 1px $component-color-focus;
+      color: inherit;
+    }
+
+    &:active {
+      box-shadow: inset 0 0 0 2px $component-color-focus;
+    }
+  }
+}
+
+.dtm-icon-display {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: $component-padding;
+
+  &--undefined {
+    border: 2px dashed $component-border-color;
+  }
+
+  .asset-type-icon {
+    font-size: 64px;
+  }
+
+}

package/styles/{_measurements-time-control.less → components/specialized/_measurements-time-control.less}

@@ -4,8 +4,8 @@ c8y-measurements-icon-bar {
   min-height: 28px;
 }
 
-.measurements-time-control,
-.c8y-datetime-picker {
+// Removed unused deprecated component class from selector - verified 0 usages: .c8y-datetime-picker
+.measurements-time-control {
   .clearfix();
   .form-group {
     margin: 0;
@@ -91,11 +91,7 @@ c8y-measurements-icon-bar {
         width: 100%;
       }
     }
-    .top-chart-bar {
-      &.showtime + hr + .chart-container {
-        top: 100px !important;
-      }
-    }
+    // Removed unused logic: .top-chart-bar
   }
 }
 
@@ -108,11 +104,7 @@ c8y-measurements-icon-bar {
           width: auto;
         }
       }
-      .top-chart-bar {
-        &.showtime + hr + .chart-container {
-          top: 65px !important;
-        }
-      }
+      // Removed unused logic: .top-chart-bar
     }
   }
 }
@@ -126,11 +118,7 @@ c8y-measurements-icon-bar {
           width: 100%;
         }
       }
-      .top-chart-bar {
-        &.showtime + hr + .chart-container {
-          top: 100px !important;
-        }
-      }
+      // Removed unused logic: .top-chart-bar
     }
   }
   [data-gs-width='12'],
@@ -146,11 +134,7 @@ c8y-measurements-icon-bar {
           width: auto;
         }
       }
-      .top-chart-bar {
-        &.showtime + hr + .chart-container {
-          top: 65px !important;
-        }
-      }
+      // Removed unused logic: .top-chart-bar
     }
   }
 }
@@ -164,11 +148,7 @@ c8y-measurements-icon-bar {
           width: auto;
         }
       }
-      .top-chart-bar {
-        &.showtime + hr + .chart-container {
-          top: 65px !important;
-        }
-      }
+      // Removed unused logic: .top-chart-bar
     }
   }
 }
@@ -182,11 +162,7 @@ c8y-measurements-icon-bar {
           width: auto;
         }
       }
-      .top-chart-bar {
-        &.showtime + hr + .chart-container {
-          top: 65px !important;
-        }
-      }
+      // Removed unused logic: .top-chart-bar
     }
   }
   .open [data-gs-width='5'] {
@@ -197,11 +173,7 @@ c8y-measurements-icon-bar {
           width: 100%;
         }
       }
-      .top-chart-bar {
-        &.showtime + hr + .chart-container {
-          top: 100px !important;
-        }
-      }
+      // Removed unused logic: .top-chart-bar
     }
   }
 }
@@ -216,11 +188,7 @@ c8y-measurements-icon-bar {
           width: auto;
         }
       }
-      .top-chart-bar {
-        &.showtime + hr + .chart-container {
-          top: 65px !important;
-        }
-      }
+      // Removed unused logic: .top-chart-bar
     }
   }
   .open [data-gs-width='4'] {
@@ -231,11 +199,7 @@ c8y-measurements-icon-bar {
           width: 100%;
         }
       }
-      .top-chart-bar {
-        &.showtime + hr + .chart-container {
-          top: 100px !important;
-        }
-      }
+      // Removed unused logic: .top-chart-bar
     }
   }
 }
@@ -250,11 +214,7 @@ c8y-measurements-icon-bar {
           width: auto;
         }
       }
-      .top-chart-bar {
-        &.showtime + hr + .chart-container {
-          top: 65px !important;
-        }
-      }
+      // Removed unused logic: .top-chart-bar
     }
   }
 }

package/styles/components/specialized/_measurements-time-control.scss

@@ -0,0 +1,237 @@
+@use "../../../variables/index" as *;
+
+@use "../../mixins/clearfix";
+
+
+/**
+ * measurements time control - Component styles
+ *
+ * Note: Uses $size-* tokens for spacing where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions: Fixed sizes for component layout
+ * - Off-grid spacing: Component-specific positioning
+ * - Border widths (1px, 2px, 3px): Standard borders
+ * - Font-sizes: Typography
+ * - Percentages: Layout
+ */
+c8y-measurements-icon-bar {
+  display: flex;
+  align-items: center;
+  min-height: 28px;
+}
+
+// Removed unused deprecated component class from selector - verified 0 usages: .c8y-datetime-picker
+.measurements-time-control {
+   @include clearfix.clearfix();
+  .form-group {
+    margin: 0;
+    padding: 0;
+    height: auto;
+    &.input-sm {
+      padding: 0;
+      input {
+        // @extend .input-sm; // Removed for performance
+      }
+    }
+  }
+  .uib-time {
+    .form-control {
+      width: 50px;
+    }
+  }
+ .input-sm {
+    .uib-time .form-control {
+      padding: 5px !important;
+      width: 30px;
+
+      // @extend .input-sm; // Removed for performance
+    }
+  }
+  .measurements-date-to {
+    margin-left: $size-10;
+  }
+  @media (max-width: 550px) {
+    width: 100%;
+    .measurements-date-from,
+    .measurements-date-to {
+      display: flex;
+      align-items: center;
+      flex-flow: row wrap;
+      width: 100%;
+      .date-time-picker {
+        margin-left: auto;
+      }
+    }
+    .measurements-date-to {
+      margin-top: 5px;
+    }
+  }
+}
+
+.measurements-time-control {
+  display: flex;
+  align-items: center;
+  flex-flow: row wrap;
+  .measurements-date-from,
+  .measurements-date-to {
+    display: flex;
+    align-items: center;
+    flex-flow: row wrap;
+    .date-time-picker {
+      margin-left: auto;
+    }
+    .uib-datepicker-popup {
+      z-index: 1036;
+    }
+  }
+}
+
+.card-dashboard {
+  .measurements-time-control {
+    width: 100%;
+    .measurements-date-from,
+    .measurements-date-to {
+      padding-top: $size-4;
+    }
+    .measurements-date-to {
+      margin-left: auto;
+    }
+  }
+}
+
+[data-gs-width] {
+  .card-dashboard {
+    .measurements-time-control {
+      .measurements-date-from,
+      .measurements-date-to {
+        width: 100%;
+      }
+    }
+    // Removed unused logic: .top-chart-bar
+  }
+}
+
+@media (min-width: 460px) and (max-width: $screen-sm-min) {
+  [data-gs-width] {
+    .card-dashboard {
+      .measurements-time-control {
+        .measurements-date-from,
+        .measurements-date-to {
+          width: auto;
+        }
+      }
+      // Removed unused logic: .top-chart-bar
+    }
+  }
+}
+
+@media (min-width: $screen-sm) {
+  [data-gs-width] {
+    .card-dashboard {
+      .measurements-time-control {
+        .measurements-date-from,
+        .measurements-date-to {
+          width: 100%;
+        }
+      }
+      // Removed unused logic: .top-chart-bar
+    }
+  }
+  [data-gs-width='12'],
+  [data-gs-width='11'],
+  [data-gs-width='10'],
+  [data-gs-width='9'],
+  [data-gs-width='8'],
+  [data-gs-width='7'] {
+    .card-dashboard {
+      .measurements-time-control {
+        .measurements-date-from,
+        .measurements-date-to {
+          width: auto;
+        }
+      }
+      // Removed unused logic: .top-chart-bar
+    }
+  }
+}
+
+@media (min-width: $screen-md-min) {
+  [data-gs-width='6'] {
+    .card-dashboard {
+      .measurements-time-control {
+        .measurements-date-from,
+        .measurements-date-to {
+          width: auto;
+        }
+      }
+      // Removed unused logic: .top-chart-bar
+    }
+  }
+}
+
+@media (min-width: $grid-float-breakpoint) and (max-width: 1350px) {
+  [data-gs-width='5'] {
+    .card-dashboard {
+      .measurements-time-control {
+        .measurements-date-from,
+        .measurements-date-to {
+          width: auto;
+        }
+      }
+      // Removed unused logic: .top-chart-bar
+    }
+  }
+  .open [data-gs-width='5'] {
+    .card-dashboard {
+      .measurements-time-control {
+        .measurements-date-from,
+        .measurements-date-to {
+          width: 100%;
+        }
+      }
+      // Removed unused logic: .top-chart-bar
+    }
+  }
+}
+
+@media (min-width: 1351px) {
+  [data-gs-width='4'],
+  [data-gs-width='5'] {
+    .card-dashboard {
+      .measurements-time-control {
+        .measurements-date-from,
+        .measurements-date-to {
+          width: auto;
+        }
+      }
+      // Removed unused logic: .top-chart-bar
+    }
+  }
+  .open [data-gs-width='4'] {
+    .card-dashboard {
+      .measurements-time-control {
+        .measurements-date-from,
+        .measurements-date-to {
+          width: 100%;
+        }
+      }
+      // Removed unused logic: .top-chart-bar
+    }
+  }
+}
+
+@media (min-width: 1620px) {
+  [data-gs-width='4'],
+  .open [data-gs-width='4'] {
+    .card-dashboard {
+      .measurements-time-control {
+        .measurements-date-from,
+        .measurements-date-to {
+          width: auto;
+        }
+      }
+      // Removed unused logic: .top-chart-bar
+    }
+  }
+}