@c8y/style 1023.14.33 → 1023.14.37

package/styles/{_colorpicker.less → vendor/other/_colorpicker.less}

@@ -1,5 +1,5 @@
 // DEPRECATED: This file is deprecated and will be removed in a future release.
-// TODO: remove after checking it's not used anymore
+// DEPRECATED: Check if colorpicker can be removed. Currently used in 22 places.
 
 .minicolors.minicolors-theme-hidden-input {
   height: @form-control-height-base;
@@ -34,5 +34,5 @@
 body .minicolors-sprite {
   background: url('@{path}/jquery.minicolors.png') 0 0 repeat;
 
-  @path: if(@use-relative-paths, '../img', 'img');
+  @path: if(@use-relative-paths, '../../../img', 'img');
 }

package/styles/vendor/other/_colorpicker.scss

@@ -0,0 +1,40 @@
+@use "../../../variables/index" as *;
+
+// 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.
+
+.minicolors.minicolors-theme-hidden-input {
+  height: $form-control-height-base;
+  border: $form-control-border-width solid $form-control-border-color-default;
+  background-color: $component-background-default;
+  .minicolors-swatch {
+    width: 0;
+    height: 0;
+    border: 0;
+  }
+  input[type='hidden'] + .minicolors-swatch {
+    min-width: 32px;
+    width: auto;
+  }
+  .minicolors-swatch-color {
+    top: 50%;
+    right: auto;
+    bottom: auto;
+    left: 50%;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &.minicolors-position-top .minicolors-panel {
+    top: 0;
+    transform: translateY(-50%);
+  }
+}
+
+body .minicolors-sprite {
+  $path: if($use-relative-paths, '../../../img', 'img');
+
+  background: url('#{$path}/jquery.minicolors.png') 0 0 repeat;
+}

package/styles/{_c8y-selectize.less → vendor/selectize/_c8y-selectize.less}

@@ -173,14 +173,7 @@ body .selectize-input {
   overflow: hidden;
   border: 0;
 
-  .selectize-control.multi &.has-items {
-    padding: @padding-top @padding-x @padding-bottom;
-
-    @padding-x: @selectize-padding-x;
-    @padding-top: @selectize-padding-y - @selectize-padding-item-y - @selectize-width-item-border;
-    @padding-bottom: @selectize-padding-y - @selectize-padding-item-y - @selectize-margin-item-y -
-      @selectize-width-item-border;
-  }
+  // Removed unused state modifier class - verified 0 usages: .has-items
   &.full {
     background-color: @selectize-color-input-full;
   }
@@ -241,7 +234,6 @@ body .selectize-input {
     line-height: inherit !important;
 
     user-select: auto !important;
-    -webkit-user-select: auto !important;
     .selectize-box-shadow(none) !important;
     &:focus {
       outline: none !important;
@@ -383,6 +375,5 @@ body .selectize-dropdown {
   -moz-border-radius: 0;
   border-radius: 0;
   background: 0 0;
-  -webkit-box-shadow: none;
   box-shadow: none;
 }

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

@@ -0,0 +1,403 @@
+@use "../../../variables/index" as *;
+
+@use "../../icons/c8y-glyphs";
+@use "../../mixins/color-mixins";
+@use "../../mixins/icon-base";
+@use "../../mixins/shadows-helper";
+@use "../../mixins/vendor-prefixes";
+
+.ui-select-offscreen {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+  outline: 0 !important;
+  border: 0 !important;
+}
+
+@mixin selectize-border-radius($radii) {
+  border-radius: $radii;
+}
+
+@mixin selectize-unselectable() {
+  user-select: none;
+}
+
+@mixin selectize-box-shadow($shadow) {
+  box-shadow: none;
+}
+
+@mixin selectize-box-sizing($type: border-box) {
+  box-sizing: $type;
+}
+
+// body used to override default styles
+body {
+  .selectize-input {
+    min-height: 0;
+
+    // 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;
+      box-shadow: inset 0 0 0 2px $form-control-border-color-focus;
+    }
+  }
+
+  .selectize-control.single .selectize-input {
+    position: relative;
+    padding-right: 24px;
+
+    appearance: none;
+    &:after {
+      @include icon-base.c8y-glyph;
+      position: absolute;
+      top: 50%;
+      right: 5px;
+      margin: 0;
+      width: auto;
+      height: auto;
+      border: 0;
+      color: $component-brand-primary;
+      content: c8y-glyphs.$c8y-glyph-caret;
+      font-size: 18px;
+      transform: translate(0, -50%);
+      pointer-events: none;
+    }
+  }
+
+  .form-control.selectize-control.single.ng-invalid-required.ng-touched {
+    .selectize-input {
+      box-shadow: inset 1px 0 0 0 $form-control-border-color-default,
+        inset -1px 0 0 0 $form-control-border-color-default,
+        inset 0 1px 0 0 $form-control-border-color-default,
+        inset 0 -4px 0 $form-control-validation-error;
+      &.focus,
+      &.selectize-focus {
+        box-shadow: inset 2px 0 0 0 $form-control-border-color-focus,
+          inset -2px 0 0 0 $form-control-border-color-focus,
+          inset 0 2px 0 0 $form-control-border-color-focus,
+          inset 0 -4px 0 $form-control-validation-error;
+      }
+    }
+  }
+}
+
+body > .ui-select-container {
+  z-index: $zindex-dropdown + 49;
+}
+
+body .selectize-container {
+  .form-control.selectize-control.open {
+    position: relative;
+    &:before {
+      position: absolute;
+      top: -15px;
+      right: -15px;
+      left: -15px;
+      z-index: 0;
+      height: 15px;
+      border: $selectize-border;
+      border-bottom: 0;
+      background-color: $component-background-default;
+      box-shadow: 0 20px 15px rgba($black, 0.1);
+    }
+    .selectize-input {
+      position: relative;
+      z-index: 10;
+    }
+  }
+  label {
+    position: relative;
+    z-index: 5;
+    + .form-control.selectize-control.open:before {
+      top: -30px;
+      height: 30px;
+    }
+  }
+}
+
+body .ui-select-match {
+  position: absolute;
+  top: 5px;
+  overflow: hidden;
+  padding-right: 40px;
+  width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+body .ui-select-choices {
+  opacity: 1 !important;
+}
+
+body .ui-select-choices.ng-hide {
+  opacity: 0 !important;
+}
+
+body input.ui-select-search[placeholder] {
+  overflow: hidden;
+  width: 100%;
+  text-overflow: ellipsis;
+}
+
+body .ui-select-choices-row-inner,
+body .ui-select-choices-row-inner > * {
+  overflow: hidden;
+  width: 100%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+body .selectize-dropdown,
+body .selectize-input,
+body .selectize-input input {
+  color: $selectize-color-text;
+  font-size: $selectize-font-size;
+  font-family: $selectize-font-family;
+  line-height: $selectize-line-height;
+
+  -webkit-font-smoothing: $selectize-font-smoothing;
+}
+
+body .selectize-control.single .selectize-input.input-active,
+body .selectize-input {
+  display: inline-block;
+  background: var(--c8y-form-control-background-default, $component-background-default);
+  color: $component-color-default;
+  cursor: text;
+}
+
+body .selectize-input {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  overflow: hidden;
+  border: 0;
+
+  // Removed unused state modifier class - verified 0 usages: .has-items
+  &.full {
+    background-color: $selectize-color-input-full;
+  }
+  &.disabled,
+  &.disabled * {
+    cursor: default !important;
+  }
+  &.focus,
+  &.selectize-focus {
+    position: relative;
+    z-index: 13;
+    outline: 0;
+    background-color: $form-control-background-focus;
+    color: $form-control-border-color-focus;
+
+    @include vendor-prefixes.box-shadow(inset 0 0 0 2px $form-control-border-color-focus);
+    ~ input {
+      color: $form-control-border-color-focus;
+    }
+  }
+
+  > * {
+    display: -moz-inline-stack;
+    display: inline-block;
+    vertical-align: baseline;
+    zoom: 1;
+  }
+  .selectize-control.multi & > div {
+    margin: 0 $selectize-margin-item-x $selectize-margin-item-y 0;
+    padding: $selectize-padding-item-y $selectize-padding-item-x;
+    border: $selectize-width-item-border solid $selectize-color-item-border;
+    background: $selectize-color-item;
+    color: $selectize-color-item-text;
+    cursor: pointer;
+    &.active {
+      border: $selectize-width-item-border solid $selectize-color-item-active-border;
+      background: $selectize-color-item-active;
+      color: $selectize-color-item-active-text;
+    }
+  }
+  .selectize-control.multi &.disabled > div {
+    &,
+    &.active {
+      border: $selectize-width-item-border solid $selectize-color-item-border;
+
+      @include color-mixins.brightness(1.2);
+    }
+  }
+  > input {
+    margin: $selectize-caret-margin !important;
+    padding: 0 !important;
+    min-height: 0 !important;
+    max-width: 100% !important;
+    max-height: none !important;
+    border: 0 none !important;
+    background: none !important;
+    text-indent: 0 !important;
+    line-height: inherit !important;
+
+    user-select: auto !important;
+    box-shadow: none !important;
+    &:focus {
+      outline: none !important;
+    }
+  }
+}
+
+body .selectize-input::after {
+  display: block;
+  clear: left;
+  content: ' ';
+}
+
+body .selectize-input.dropdown-active::before {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  height: 1px;
+  background: $selectize-color-dropdown-border-top;
+  content: ' ';
+}
+
+body .selectize-dropdown {
+  position: absolute;
+  z-index: 9;
+  margin: -1px 0 0;
+  border: $selectize-border;
+  background-color: var(--c8y-dropdown-background-default, $component-background-default);
+
+  @include selectize-box-sizing(border-box);
+  @include shadows-helper.boxShadowHelper(md);
+  [data-selectable] {
+    overflow: hidden;
+    cursor: pointer;
+    .highlight {
+      background: $selectize-color-highlight;
+    }
+  }
+  .optgroup-header,
+  [data-selectable] {
+    padding: $selectize-padding-dropdown-item-y ($selectize-padding-dropdown-item-x);
+    box-shadow: inset 0 -1px 0 var(--c8y-dropdown-border-color);
+  }
+  .optgroup:first-child .optgroup-header {
+    border-top: 0 none;
+  }
+  .optgroup-header {
+    background: $selectize-color-optgroup;
+    color: $selectize-color-optgroup-text;
+    cursor: default;
+  }
+  .active,
+  .active:not(.selected),
+  .ui-select-choices-row:hover {
+    background-color: $selectize-color-dropdown-item-active;
+    color: $selectize-color-dropdown-item-active-text;
+    &.create {
+      color: $selectize-color-dropdown-item-create-active-text;
+    }
+  }
+  .create {
+    color: $selectize-color-dropdown-item-create-text;
+  }
+}
+
+.selectize-dropdown-content {
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 0 !important;
+  max-height: $selectize-max-height-dropdown;
+}
+
+.selectize-control.single {
+  .selectize-input {
+    + .selectize-dropdown {
+      top: -7px;
+      right: -7px;
+      left: -7px;
+      z-index: 9;
+      padding-top: 42px;
+      width: auto;
+      border: 1px solid var(--c8y-root-component-border-color);
+      border-radius: $component-border-radius-base;
+    }
+  }
+  &.direction-up {
+    .selectize-input.focus {
+      + .selectize-dropdown {
+        z-index: 9;
+        margin-top: -2px;
+        padding-top: 0;
+        padding-bottom: 40px;
+      }
+    }
+  }
+}
+
+.selectize-control.single .selectize-input {
+  &,
+  input {
+    cursor: pointer;
+  }
+  &.input-active,
+  &.input-active input {
+    cursor: text;
+  }
+
+  &.dropdown-active:after {
+    margin-top: $selectize-arrow-size * -0.8;
+    border-width: 0 $selectize-arrow-size $selectize-arrow-size $selectize-arrow-size;
+    border-color: transparent;
+    border-bottom-color: $selectize-arrow-color;
+  }
+}
+
+.selectize-control.rtl {
+  &.single .selectize-input:after {
+    right: auto;
+    left: $selectize-arrow-offset;
+  }
+  .selectize-input > input {
+    margin: $selectize-caret-margin-rtl !important;
+  }
+}
+
+.selectize-control .selectize-input.disabled {
+  background-color: $selectize-color-disabled;
+  opacity: $selectize-opacity-disabled;
+}
+
+.form-control.selectize-control {
+  position: relative;
+  padding: 0;
+  height: auto;
+  border: none;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+  background: 0 0;
+  box-shadow: none;
+}

package/sync-scss-to-less.sh

@@ -0,0 +1,75 @@
+#!/bin/bash
+
+# Enhanced SCSS → LESS sync helper
+
+echo "==================================="
+echo "SCSS → LESS Sync Helper"
+echo "==================================="
+echo ""
+
+# Find modified files (both staged and unstaged)
+SCSS_FILES=$(git diff --name-only HEAD | grep '\.scss$' || true)
+SCSS_STAGED=$(git diff --cached --name-only | grep '\.scss$' || true)
+LESS_FILES=$(git diff --name-only HEAD | grep '\.less$' || true)
+LESS_STAGED=$(git diff --cached --name-only | grep '\.less$' || true)
+ALL_SCSS=$(printf "%s\n%s" "$SCSS_FILES" "$SCSS_STAGED" | sort -u | grep -v '^$' || true)
+ALL_LESS=$(printf "%s\n%s" "$LESS_FILES" "$LESS_STAGED" | sort -u | grep -v '^$' || true)
+
+# Count non-empty lines
+if [ -z "$ALL_SCSS" ]; then
+  SCSS_COUNT=0
+else
+  SCSS_COUNT=$(echo "$ALL_SCSS" | wc -l | tr -d ' ')
+fi
+
+if [ "$SCSS_COUNT" -eq 0 ]; then
+  echo "✅ No SCSS files modified - no sync needed!"
+  exit 0
+fi
+
+echo "Found $SCSS_COUNT modified SCSS file(s):"
+echo ""
+
+NEEDS_SYNC=0
+
+while IFS= read -r file; do
+  if [ -z "$file" ]; then
+    continue
+  fi
+
+  # Strip packages/style/ prefix if present
+  RELATIVE_FILE="${file#packages/style/}"
+  LESS_FILE="${RELATIVE_FILE%.scss}.less"
+
+  if [ -f "$LESS_FILE" ]; then
+    # Check if LESS file also modified
+    LESS_FULL_PATH="${file%.scss}.less"
+    if echo "$ALL_LESS" | grep -q "^${LESS_FULL_PATH}$"; then
+      echo "  ✅ $RELATIVE_FILE (LESS already updated)"
+    else
+      echo "  ⚠️  $RELATIVE_FILE → $LESS_FILE (NEEDS SYNC)"
+      NEEDS_SYNC=1
+    fi
+  else
+    echo "  ⚠️  $RELATIVE_FILE (no corresponding LESS file)"
+  fi
+done <<< "$ALL_SCSS"
+
+if [ $NEEDS_SYNC -eq 1 ]; then
+  echo ""
+  echo "==================================="
+  echo "⚠️  LESS files need syncing!"
+  echo "==================================="
+  echo ""
+  echo "Options:"
+  echo "1. Semi-automated: ./convert-scss-to-less.sh --all"
+  echo "2. Single file:    ./convert-scss-to-less.sh path/to/file.scss"
+  echo "3. Manually sync SCSS → LESS"
+  echo "4. Ask Claude to sync for you"
+  echo ""
+  exit 1
+fi
+
+echo ""
+echo "✅ All LESS files are in sync!"
+exit 0