@c8y/style 1023.17.20 → 1023.22.2

package/styles/core/feedback/_tooltip.scss

@@ -0,0 +1,147 @@
+@use "../../../variables/index" as *;
+
+@use "../../mixins/reset-text";
+
+/**
+ * Tooltip - Tooltip overlay component
+ *
+ * Note: Uses $tooltip-* variables and $size-8 for padding.
+ *
+ * Intentionally hardcoded values:
+ * - Margin offsets (±3px): Off-grid positioning fine-tuning for arrow alignment
+ * - Padding (3px): Off-grid vertical padding for compact tooltip
+ */
+
+// Shared mixins for tooltip arrow borders
+@mixin tooltip-arrow-top-border() {
+  border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
+  border-top-color: $tooltip-arrow-color;
+}
+
+@mixin tooltip-arrow-bottom-border() {
+  border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
+  border-bottom-color: $tooltip-arrow-color;
+}
+
+@mixin tooltip-arrow-right-border() {
+  border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
+  border-right-color: $tooltip-arrow-color;
+}
+
+@mixin tooltip-arrow-left-border() {
+  border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
+  border-left-color: $tooltip-arrow-color;
+}
+
+.tooltip {
+  position: absolute;
+  z-index: $zindex-tooltip;
+  display: block;
+  font-size: $font-size-small;
+  opacity: 0;
+
+  @include reset-text.reset-text();
+  &.in {
+    opacity: $tooltip-opacity;
+  }
+  &.top,
+  &.bs-tooltip-top {
+    margin-top: -3px;
+    padding: $tooltip-arrow-width 0;
+  }
+
+  &.right,
+  &.bs-tooltip-right {
+    margin-left: 3px;
+    padding: 0 $tooltip-arrow-width;
+  }
+  &.bottom,
+  &.bs-tooltip-bottom {
+    margin-top: 3px;
+    padding: $tooltip-arrow-width 0;
+  }
+  &.left,
+  &.bs-tooltip-left {
+    margin-left: -3px;
+    padding: 0 $tooltip-arrow-width;
+  }
+}
+
+// Wrapper for the tooltip content
+.tooltip-inner {
+  padding: $size-4 $size-8;
+  max-width: $tooltip-max-width;
+  border-radius: $tooltip-radius;
+  background-color: $tooltip-background-default;
+  color: $tooltip-color-default;
+  text-align: center;
+  white-space: pre-wrap;
+}
+
+.tooltip-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-color: transparent;
+}
+
+.tooltip {
+  &.top .tooltip-arrow,
+  &.bs-tooltip-top .tooltip-arrow {
+    bottom: 0;
+    left: 50%;
+    margin-left: calc($tooltip-arrow-width * -1);
+    @include tooltip-arrow-top-border();
+  }
+  &.top-left .tooltip-arrow,
+  &.bs-tooltip-top-left .tooltip-arrow {
+    right: $tooltip-arrow-width;
+    bottom: 0;
+    margin-bottom: calc($tooltip-arrow-width * -1);
+    @include tooltip-arrow-top-border();
+  }
+  &.top-right .tooltip-arrow,
+  &.bs-tooltip-top-right .tooltip-arrow {
+    bottom: 0;
+    left: $tooltip-arrow-width;
+    @include tooltip-arrow-top-border();
+  }
+  &.right .tooltip-arrow,
+  &.bs-tooltip-right .tooltip-arrow {
+    top: 50%;
+    left: 0;
+    @include tooltip-arrow-right-border();
+  }
+  &.left .tooltip-arrow,
+  &.bs-tooltip-left .tooltip-arrow {
+    top: 50%;
+    right: 0;
+    @include tooltip-arrow-left-border();
+  }
+  &.bottom .tooltip-arrow,
+  &.bs-tooltip-bottom .tooltip-arrow {
+    top: 0;
+    left: 50%;
+    @include tooltip-arrow-bottom-border();
+  }
+  &.bottom-left .tooltip-arrow,
+  &.bs-tooltip-bottom-left .tooltip-arrow {
+    top: 0;
+    right: $tooltip-arrow-width;
+    @include tooltip-arrow-bottom-border();
+  }
+  &.bottom-right .tooltip-arrow,
+  &.bs-tooltip-bottom-right .tooltip-arrow {
+    top: 0;
+    left: $tooltip-arrow-width;
+    @include tooltip-arrow-bottom-border();
+  }
+}
+
+// fix for ngx-bootstrap scroll issue on hover
+bs-tooltip-container {
+  position: fixed;
+  top: -9999px;
+  left: -9999px;
+}

package/styles/{_c8y-switch.less → core/forms/_c8y-switch.less}

@@ -161,11 +161,11 @@
     z-index: 40;
     transform: translate(-50%, 0);
     .c8y-dark-theme &{
-      --c8y-switch-handle-background: @brand-primary;
+      --c8y-switch-handle-background: var(--brand-primary, var(--c8y-brand-primary));
     }
     .c8y-system-theme &{
       @media (prefers-color-scheme: dark){
-        --c8y-switch-handle-background: @brand-primary;
+        --c8y-switch-handle-background: var(--brand-primary, var(--c8y-brand-primary));
       }
     }
   }

package/styles/core/forms/_c8y-switch.scss

@@ -0,0 +1,226 @@
+@use "../../../variables/index" as *;
+
+/**
+ * C8Y Switch - Toggle switch form control
+ *
+ * Note: Uses $switch-sm variable and $form-control-* variables. Uses $size-* tokens where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Fine-tuning offsets (2px, 3px, 6px): Switch handle positioning and spacing
+ * - Hardcoded height (32px): Form control height reference in calc
+ * - Box-shadow values (2px, 3px): Shadow depth
+ * - Outline width (2px): Focus indicator
+ * - Transition durations (0.25s): Animation timing
+ * - Percentages (33.333%, 100%): Fractional layout
+ * - Opacity values: Visual effects
+ * - RGBA values: Shadow colors
+ */
+
+// Shared mixin for multistate handle positioning
+@mixin multistate-handle-position($nth, $multiplier) {
+  &:nth-child(#{$nth}) {
+    ~ .c8y-switch-multistate__handle {
+      left: calc((100% / 6) * #{$multiplier});
+    }
+  }
+}
+
+// Shared mixin for dark theme styles
+@mixin dark-theme-styles {
+  .c8y-dark-theme & {
+    @content;
+  }
+  .c8y-system-theme & {
+    @media (prefers-color-scheme: dark) {
+      @content;
+    }
+  }
+}
+
+.c8y-switch {
+  display: flex;
+  position: relative;
+  overflow: hidden;
+  margin: 0;
+  padding: 0 3px 0 calc($switch-sm * 2 + 5px);
+  min-height: $form-control-height-base;
+  color: $form-control-color-default;
+  text-transform: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  letter-spacing: 0;
+  font-weight: normal;
+  font-size: inherit;
+  line-height: $form-control-height-base;
+
+  + .c8y-switch {
+    margin-left: 6px;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  input[type='checkbox'] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+
+    & + span {
+      position: absolute;
+      top: calc((32px - $switch-sm) / 2);
+      left: 2px;
+      z-index: 1;
+      height: $switch-sm;
+      border: 0;
+      background-color: transparent;
+
+      &:before,
+      &:after {
+        position: absolute;
+        content: '';
+      }
+
+      &::before {
+        top: 0;
+        bottom: 0;
+        left: 0;
+        z-index: -1;
+        width: calc($switch-sm * 2 - 2px);
+        border-radius: calc($switch-sm / 2);
+        background-color: $switch-background-default;
+        box-shadow: none;
+
+        transition: background 0.25s ease;
+      }
+
+      &::after {
+        position: absolute;
+        top: 3px;
+        bottom: 3px;
+        left: 3px;
+        z-index: -1;
+        width: calc($switch-sm - 6px);
+        border-radius: calc($switch-sm / 2) !important;
+        background-color: var(--c8y-switch-handle-background, $form-control-background-default);
+        content: '';
+
+        box-shadow: 0 2px 3px rgba($black, 0.2);
+        transition: all 0.25s ease;
+      }
+    }
+
+    &:focus {
+      + span {
+        &::before {
+          outline: 2px solid $component-color-focus;
+        }
+      }
+    }
+  }
+
+  input[disabled] + span {
+    opacity: 0.5;
+
+    &:before,
+    &:after {
+      cursor: not-allowed;
+    }
+  }
+
+  input:checked + span {
+    &:before {
+      background-color: $switch-background-active;
+    }
+
+    &:after {
+      left: $switch-sm;
+    }
+  }
+
+  &--inline {
+    overflow: visible;
+    min-height: $switch-sm;
+    height: $switch-sm;
+    line-height: $line-height-base;
+    display: inline-flex;
+
+    & input[type='checkbox'] + span {
+      position: absolute;
+      top: 0;
+    }
+  }
+}
+
+.c8y-switch-multistate {
+  display: flex;
+  justify-content: stretch;
+  align-items: center;
+  height: $form-control-height-base;
+  border-radius: $size-16;
+  width: 100%;
+  background: $gray-60;
+  position: relative;
+  line-height: 1;
+  [class^='dlt-c8y-icon-'],
+  [class*=' dlt-c8y-icon-'],
+  .c8y-icon {
+    font-size: $size-16;
+  }
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    margin: 0;
+  }
+
+  label {
+    flex: 1 1 100%;
+    margin: 0;
+    opacity: 1;
+    display: block;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    z-index: 100;
+  }
+
+  &__handle {
+    display: block;
+    height: $size-24;
+    width: calc(33.333% - $size-8);
+    background-color: var(--c8y-switch-handle-background, $form-control-background-default);
+    box-shadow: 0 2px 3px rgba($black, 0.2);
+    border-radius: $size-16;
+    position: absolute;
+    transition: left 0.25s ease;
+    top: $size-4;
+    z-index: 40;
+    transform: translate(-50%, 0);
+    @include dark-theme-styles {
+      --c8y-switch-handle-background: var(--brand-primary, var(--c8y-brand-primary));
+    }
+  }
+
+  input {
+    &:focus {
+      ~ .c8y-switch-multistate__handle {
+        outline: 2px solid $component-color-focus;
+      }
+    }
+
+    &:checked,
+    &:focus {
+      @include multistate-handle-position(1, 1);
+      @include multistate-handle-position(3, 3);
+      @include multistate-handle-position(5, 5);
+    }
+  }
+  @include dark-theme-styles {
+    input:checked + label {
+      color: $gray-100;
+    }
+  }
+}

package/styles/{_file-picker.less → core/forms/_file-picker.less}

@@ -168,7 +168,7 @@ c8y-file-picker-form-control {
         [class^='dlt-c8y-icon-'],
         [class*=' dlt-c8y-icon-'] {
           &.warning {
-            color: @status-warning;
+            color: var(--palette-status-warning, var(--c8y-palette-status-warning));
           }
           color: @component-brand-primary;
           font-size: 36px;

package/styles/core/forms/_file-picker.scss

@@ -0,0 +1,219 @@
+@use "../../../variables/index" as *;
+@use "../../mixins/gradients";
+@use "../../mixins/opacity";
+
+/**
+ * File Picker - File upload component with drag-and-drop
+ *
+ * Note: Uses $size-* tokens for spacing where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific sizes (36px, 28px, 100px, 150px, 300px): Icon and container dimensions
+ * - Fine-tuning offsets (3px, 6px): Positioning adjustments
+ * - Border widths (2px): Standard dashed borders
+ * - Transition duration (0.35s): Animation timing
+ * - Transform scale (1.1): Hover effect
+ */
+
+// Shared mixin for upload status/placeholder styling
+@mixin upload-elements-styling() {
+  .upload-status,
+  .upload-placeholder {
+    padding: 0 $size-16;
+    width: 100%;
+  }
+}
+
+// Shared mixin for alert positioning
+@mixin alert-positioning() {
+  .alert {
+    position: absolute;
+    bottom: 0;
+    margin: 0;
+    width: 100%;
+  }
+}
+
+// Shared mixin for file placeholder icon styling
+@mixin file-placeholder-icon() {
+  [class^='dlt-c8y-icon-'],
+  [class*=' dlt-c8y-icon-'] {
+    color: $component-brand-primary;
+    font-size: 36px;
+    transition: all 0.35s ease;
+  }
+}
+
+// Shared mixin for icon hover/drag-over effect
+@mixin icon-hover-effect() {
+  .hint-placeholder {
+    [class^='dlt-c8y-icon-'],
+    [class*=' dlt-c8y-icon-'] {
+      transform: scale(1.1);
+    }
+  }
+}
+
+// Shared mixin for error state styling
+@mixin file-placeholder-error() {
+  &.has-errors .file-placeholder {
+    border-bottom-style: solid;
+    border-bottom-color: $form-control-validation-error;
+  }
+}
+
+c8y-drop-area {
+  display: block;
+}
+
+.drop-zone {
+  position: relative;
+  display: block;
+  padding-bottom: 100%;
+  height: 0;
+  @include alert-positioning();
+  @include upload-elements-styling();
+  .file-placeholder {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    flex-flow: column nowrap;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    border: 2px dashed $component-border-color;
+    color: $component-color-default;
+    text-align: center;
+    transition: border 0.25s ease;
+    .hint-placeholder {
+      @include file-placeholder-icon();
+    }
+
+    &.drag-over,
+    &:hover {
+      border-color: $component-brand-primary;
+      @include icon-hover-effect();
+    }
+  }
+  @include file-placeholder-error();
+  &.drop-zone-sm,
+  .drop-area-sm & {
+    padding: 0;
+    min-height: unset !important;
+    height: auto;
+    .alert {
+      position: relative;
+    }
+    .file-placeholder {
+      position: static;
+      display: block;
+      .hint-placeholder {
+        position: relative;
+        padding: $size-10 $size-10 $size-10 50px;
+        text-align: left;
+        [class^='dlt-c8y-icon-'],
+        [class*=' dlt-c8y-icon-'] {
+          position: absolute;
+          top: 50%;
+          left: 3px;
+
+          transform: translate(0, -50%);
+        }
+        p {
+          margin-bottom: 0;
+        }
+      }
+      &:hover,
+      &.drag-over {
+        .hint-placeholder [class^='dlt-c8y-icon-'],
+        .hint-placeholder [class*=' dlt-c8y-icon-'] {
+          transform: translate(0, -50%) scale(1.1);
+        }
+      }
+    }
+  }
+  .drop-area-sm & {
+    .file-placeholder {
+      .hint-placeholder {
+        [class^='dlt-c8y-icon-'],
+        [class*=' dlt-c8y-icon-'] {
+          left: $size-8;
+          font-size: 28px;
+        }
+        p {
+          br {
+            display: contents;
+            + span {
+              margin-left: 6px;
+            }
+          }
+        }
+      }
+    }
+  }
+  &.disabled {
+    &,
+    &:hover,
+    &:focus {
+      pointer-events: none !important;
+      cursor: $cursor-disabled !important;
+      color: $component-color-default;
+      @include opacity.opacity(0.65);
+      box-shadow: none;
+    }
+  }
+}
+
+c8y-file-picker-form-control {
+  .file-picker-drop-zone {
+    display: flex;
+    flex-direction: column;
+    min-height: 150px;
+    height: fit-content;
+    transition: min-height 0.25s ease;
+    padding: $size-10;
+
+    &.unsupported-format {
+      background-size: 100px 100px;
+      @include gradients.gradient-striped(rgba(0, 0, 0, 0.10));
+    }
+
+    &.dragging {
+      min-height: 300px;
+    }
+    @include alert-positioning();
+    @include upload-elements-styling();
+    .file-placeholder {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      flex-flow: column nowrap;
+      justify-content: center;
+      height: 100%;
+      border: 2px dashed $component-border-color;
+      color: $component-color-default;
+      text-align: center;
+      transition: border 0.25s ease;
+
+      .hint-placeholder {
+        @include file-placeholder-icon();
+        [class^='dlt-c8y-icon-'],
+        [class*=' dlt-c8y-icon-'] {
+          &.warning {
+            color: var(--palette-status-warning, var(--c8y-palette-status-warning));
+          }
+        }
+      }
+
+      > * {
+        pointer-events: none;
+      }
+      &.drag-over,
+      &:hover {
+        border-color: $component-brand-primary;
+        @include icon-hover-effect();
+      }
+    }
+    @include file-placeholder-error();
+  }
+}

package/styles/{_forms.less → core/forms/_forms.less}

@@ -324,7 +324,7 @@ select.form-control {
 .c8y-select-wrapper {
   position: relative;
   select {
-    padding-right: 24px !important;
+    padding-right: 24px;
     background-image: none;
 
     -webkit-appearance: none;
@@ -598,7 +598,7 @@ c8y-messages,
 }
 
 .form-control-feedback-message:has(.help-block) {
-  padding-left: 0 !important;
+  padding-left: 0;
 }
 
 // icon in feedback message
@@ -808,11 +808,7 @@ c8y-field-input ~ .help-block:not(:empty),
     pointer-events: none;
   }
 
-  &.hidden-labels {
-    .form-group > label {
-      display: none;
-    }
-  }
+  // Removed unused modifier: &.hidden-labels
   .form-group {
     margin: 0;
     label {
@@ -1063,12 +1059,13 @@ label.editable {
       position: relative;
       margin-left: 0;
     } // Re-override the feedback icon.
-    .has-feedback .form-control-feedback {
-      top: 0;
-    }
-    .has-feedback .form-control-feedback-message {
-      top: @form-control-height-base;
-    }
+    // Removed unused logic: .has-feedback
+    //.has-feedback .form-control-feedback {
+    //  top: 0;
+    //}
+    //.has-feedback .form-control-feedback-message {
+    //  top: @form-control-height-base;
+    //}
   }
 }
 
@@ -1129,9 +1126,10 @@ label.editable {
   //
   // Reposition the icon because it's now within a grid column and columns have
   // `position: relative;` on them. Also accounts for the grid gutter padding.
-  .has-feedback .form-control-feedback {
-    right: calc(@grid-gutter-width * 0.5 + 5);
-  }
+  // Removed unused logic: .has-feedback
+  //.has-feedback .form-control-feedback {
+  //  right: calc(@grid-gutter-width * 0.5 + 5);
+  //}
 
   .form-group-lg {
     @media (min-width: @screen-sm-min) {