@c8y/style 1023.17.19 → 1023.22.2

package/styles/components/data-input/assets/_c8y-asset-selector-miller.scss

@@ -0,0 +1,134 @@
+@use "../../../../variables/index" as *;
+
+@use "../../../mixins/c8y-scrollbar";
+
+/**
+ * C8Y Asset Selector Miller - Miller column view for asset selection
+ *
+ * Note: Uses $size-* tokens and $size-base for spacing and dimensions.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (200px, 312px): Column widths and heights
+ * - Off-token spacing (30px): Width calculation
+ * - CSS custom property (--c8y-root-component-padding: 8): Unitless value for calculations
+ * - Percentages (33.333%, 100%): Layout and flex values
+ * - Border widths (1px, 2px): Standard borders and outlines
+ * - Negative offsets (-2px): Fine-tuning
+ * - Z-index values (10, 20): Stacking order
+ * - Box-shadow values: Border effects
+ */
+
+c8y-asset-selector-miller {
+  display: block;
+  position: relative;
+  height: 100%;
+  background: $component-background-default;
+  .dropdown-menu &{
+    height: 312px;
+  }
+}
+
+.miller-view-wrapper {
+  display: flex;
+  overflow: auto;
+  height: 100%;
+  scroll-behavior: smooth;
+  background: inherit;
+  @include c8y-scrollbar.c8y-scrollbar();
+
+  &.single-column {
+    overflow: hidden;
+
+    .miller-column {
+      min-width: 100%;
+      max-width: none;
+      border-right: 0;
+    }
+  }
+}
+
+.miller-column {
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  @include c8y-scrollbar.c8y-scrollbar();
+  border-right: 1px solid $component-border-color;
+  max-width: 33.333%;
+  min-width: 200px;
+
+  &__header {
+    background-color: $component-background-default;
+    padding: $size-base;
+    box-shadow: inset 0 -1px 0 $component-border-color;
+    &.sticky-top {
+      z-index: 20;
+    }
+    + c8y-asset-selector-node {
+      position: relative;
+      z-index: 10;
+      background: inherit;
+      display: block;
+    }
+  }
+  &__selection{
+    width: 100%;
+    top:0;
+    min-height: $size-40!important;
+
+  }
+  &__search{
+    align-items: flex-start;
+    flex-wrap: wrap;
+    min-height: $size-48!important;
+    &.miller-column__show-selected{
+      min-height: $size-72!important;
+    }
+  }
+
+  &__item {
+    --c8y-root-component-padding: 8;
+    background-color: $component-background-default;
+    display: flex;
+    align-items: center;
+    min-height: calc($size-base * 4);
+
+    &:hover:not(.miller-column__item--more) {
+      box-shadow: inset 2px 0 0 0 $component-color-focus;
+    }
+
+    &.active {
+      background-color: $component-realtime-added!important;
+      box-shadow: inset 2px 0 0 0 $component-color-focus;
+    }
+
+    &__btn {
+      background: transparent;
+      color: $component-color-default;
+      border: 0;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: 0 $component-padding;
+      align-self: stretch;
+      text-align: left;
+      .active & {
+        pointer-events: none;
+      }
+      &:focus {
+        outline: 2px solid $component-brand-primary;
+        outline-offset: -2px;
+      }
+    }
+
+    &__checkbox {
+      padding-left: $size-4;
+
+      + .miller-column__item__btn {
+        width: calc(100% - 30px);
+        padding-left: $size-4;
+      }
+    }
+  }
+}

package/styles/{_c8y-asset-selector.less → components/data-input/assets/_c8y-asset-selector.less}

@@ -100,7 +100,7 @@ c8y-asset-selector{
     border: 0;
     background-color: transparent;
     background-image: none;
-    box-shadow: none !important;
+    box-shadow: none;
     color: inherit;
     text-align: left;
     white-space: nowrap;

package/styles/components/data-input/assets/_c8y-asset-selector.scss

@@ -0,0 +1,178 @@
+@use "../../../../variables/index" as *;
+
+@use "../../../mixins/c8y-scrollbar";
+
+/**
+ * C8Y Asset Selector - Tree-based asset selector component
+ *
+ * Note: Uses $size-* tokens, $size-base for calculations, and $form-control-* variables.
+ *
+ * Intentionally hardcoded values:
+ * - Off-token spacing (6px, 22px): Tree indentation and positioning not in token system
+ * - Border widths (1px, 2px): Standard borders and outlines
+ * - Negative offsets (-2px): Fine-tuning
+ * - Percentages (100%): Layout
+ * - Transform rotation (90deg): Icon rotation
+ * - Z-index values (1, 10): Stacking order
+ */
+
+c8y-asset-selector{
+  @include c8y-scrollbar.c8y-scrollbar();
+  overflow-y: auto;
+  display: block;
+  max-height: 100%;
+}
+
+.collapse .c8y-asset-selector__item {
+  position: relative;
+  padding-left: $size-8;
+  &::after {
+    position: absolute;
+    top: $size-32;
+    left: 22px;
+    bottom: $size-32;
+    display: block;
+    border-left: 1px solid $component-icon-dark-color-light;
+    content: '';
+  }
+
+  .c8y-asset-selector__item {
+    &::before {
+      border-left: 1px solid $component-icon-dark-color-light;
+      border-bottom: 1px solid $component-icon-dark-color-light;
+      border-top: 0;
+      content: "";
+      height: $size-16;
+      position: absolute;
+      transform: translate(calc(-1 * $size-10), 0);
+      width: $size-24;
+      z-index: 1;
+    }
+  }
+}
+
+.c8y-asset-selector__item--more{
+  &::before,
+  &::after {
+    display: none;
+  }
+  .c8y-asset-selector__node__btn-spacer{
+    display: none;
+  }
+  .btn.btn-default::before {
+    position: absolute;
+    top: calc(-1 * $size-16);
+    left: calc(-1 * $size-4);
+    z-index: 10;
+    display: block;
+    width: $size-5;
+    height: $size-32;
+    background: $component-background-default;
+    content: '';
+  }
+}
+
+.c8y-asset-selector {
+  &__node {
+    display: flex;
+    max-height: $size-32;
+    min-width:fit-content;
+    .collapse-btn {
+      height: $size-32;
+      width: $size-32;
+      opacity: 1;
+      
+      &:focus {
+        outline: 2px solid $component-brand-primary;
+        outline-offset: -2px;
+      }
+    }
+    &__btn-spacer{
+      width: $size-32;
+      z-index: 1;
+    }
+
+    &--open {
+      .collapse-btn > i {
+        color: $component-brand-primary;
+        transform: rotate(90deg);
+      }
+    }
+
+    .dropdown-menu &{
+      .collapse-btn{
+        background-color: var(--c8y-dropdown-background-default);
+      }
+    }
+  }
+ 
+ 
+
+  &__btn {
+    display: inline-block !important;
+    align-items: center;
+    flex-grow: 1;
+    margin-bottom: 0;
+    padding: 6px $size-8;
+    max-width: 100%;
+    border: 0;
+    background-color: transparent;
+    background-image: none;
+    box-shadow: none;
+    color: inherit;
+    text-align: left;
+    white-space: nowrap;
+    cursor: pointer;
+
+    touch-action: manipulation;
+    appearance: none;
+    user-select: none;
+    &:focus {
+      outline: 2px solid $component-brand-primary;
+      outline-offset: -2px;
+    }
+  }
+}
+
+.c8y-asset-selector__item--start > .collapse > c8y-asset-selector-node > .c8y-asset-selector__item{
+
+  > .c8y-asset-selector__node > .btn.btn-default::before{
+    display: none;
+  }
+}
+.c8y-asset-selector__item--start:after {
+ left: 22px;
+}
+
+c8y-asset-selector c8y-search-input .input-group {
+  .form-control {
+    &,
+    &:first-child,
+    &:last-child {
+      padding-right: calc($form-control-height-base + $form-control-padding-base-horizontal)!important;
+      padding-left: calc($form-control-padding-base-horizontal * 2);
+      border-radius: calc($form-control-height-base * 0.5);
+      height: $form-control-height-sm !important;
+    }
+  }
+  .input-group-btn > .btn{
+    border-top-right-radius: $form-control-height-sm !important;
+    border-bottom-right-radius: $form-control-height-sm !important;
+  }
+}
+
+.c8y-asset-selector__item--start {
+  .c8y-asset-selector__node + .collapse {
+    .c8y-asset-selector__item {
+      margin-left: 16px !important;
+    }
+    >.c8y-asset-selector__item {
+      margin-left: 24px !important;
+    }
+  }
+}
+
+c8y-widget-asset-selector .card{
+  background: inherit;
+  margin-bottom: 0;
+}

package/styles/components/data-input/assets/_c8y-child-assets-selector.scss

@@ -0,0 +1,231 @@
+@use "../../../../variables/index" as *;
+
+@use "../../../icons/c8y-glyphs";
+@use "../../../mixins/c8y-scrollbar";
+@use "../../../mixins/forms";
+@use "../../../mixins/icon-base";
+
+/**
+ * C8Y Child Assets Selector - Multi-select dropdown for child assets
+ *
+ * Note: Uses $size-* tokens, $form-control-* variables for styling.
+ *
+ * Intentionally hardcoded values:
+ * - Off-token spacing (5px, 12px, 30px): Padding and margins not in token system
+ * - Component-specific dimensions (240px, 278px): Dropdown dimensions
+ * - Typography sizes (12px, 18px): Font sizes
+ * - Percentages (50%, 100%): Layout and positioning
+ * - Transition duration (0.15s): Animation timing
+ * - Opacity values: Visual states
+ */
+
+c8y-item-selector {
+  display: block;
+  @media (min-width: $screen-xs-max) {
+    .c8y-list__item & {
+      &.form-group-sm {
+        margin-top: calc(-1 * $size-4);
+        margin-bottom: calc(-1 * $size-4);
+      }
+    }
+  }
+}
+
+.c8y-child-assets-selector {
+  position: relative;
+  z-index: 1;
+  display: block;
+  margin: 0;
+  > .btn {
+    position: relative;
+    display: block;
+    padding-right: 24px !important;
+    background-image: none;
+    text-align: left;
+
+    // Form control base styles (from .form-control in forms.less)
+    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;
+
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    @include forms.form-control-focus();
+
+    // Placeholder styles
+    &::-moz-placeholder {
+      color: $form-control-placeholder-color;
+      opacity: 1;
+      font-style: $form-control-placeholder-font-style;
+    }
+    &:-ms-input-placeholder {
+      color: $form-control-placeholder-color;
+      font-style: $form-control-placeholder-font-style;
+    }
+    &::-webkit-input-placeholder {
+      color: $form-control-placeholder-color;
+      font-style: $form-control-placeholder-font-style;
+    }
+
+    // States
+    &:has(.c8y-colorpicker) {
+      width: auto;
+    }
+    &[disabled],
+    fieldset[disabled] & {
+      opacity: $form-control-disabled-opacity;
+    }
+    &[readonly],
+    &[readonly]:focus {
+      background-color: $form-control-background-default;
+      color: $text-muted;
+      opacity: 1;
+    }
+    &[disabled],
+    fieldset[disabled] & {
+      cursor: $cursor-disabled;
+    }
+    textarea & {
+      height: auto;
+    }
+
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+    }
+    .btn {
+      border-radius: $form-control-border-radius;
+    }
+
+    &[aria-expanded='true'] {
+      border-color: $component-color-focus;
+    }
+
+    &:after {
+      position: absolute;
+      top: 50%;
+      right: 5px;
+      color: $component-brand-primary;
+      content: c8y-glyphs.$c8y-glyph-caret;
+      font-size: $font-size-h4;
+      transform: translate(0, -50%);
+      pointer-events: none;
+
+      @include icon-base.c8y-glyph;
+    }
+  }
+
+  &.dropdown.open {
+    z-index: $zindex-dropdown;
+  }
+  .form-group-sm & {
+    > .btn {
+      padding: $form-control-padding-small-vertical 24px $form-control-padding-small-vertical
+        $form-control-padding-small-horizontal;
+      height: $form-control-height-sm;
+      font-size: $font-size-small;
+    }
+  }
+}
+
+.dropdown-menu.multiselect-container {
+  .dropdown.open & {
+    overflow: auto !important;
+    max-height: 278px;
+    min-width: 240px;
+    height: unset !important;
+    @include c8y-scrollbar.c8y-scrollbar();
+  }
+
+  .divider {
+    margin: 0;
+  }
+  .input-group {
+    width: 100%;
+  }
+  label {
+    display: flex;
+    color: $component-color-default!important;
+  }
+  .multiselect-item {
+    display: flex;
+    padding: $size-8 12px;
+    border-bottom: 1px solid var(--c8y-dropdown-border-color, $component-border-color);
+    background-color: var(--c8y-dropdown-background-default, $component-background-default);
+    label.c8y-checkbox.input-sm {
+      flex-grow: 1;
+      margin-right: 30px;
+      height: auto;
+      font-size: $font-size-small;
+      line-height: $size-20;
+      padding: 0;
+      align-items: center;
+      display: flex;
+    }
+    .radio,
+    .checkbox {
+      overflow: hidden;
+      margin: 0;
+      padding-left: 20px;
+      color: $component-color-default;
+      text-transform: none;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-weight: normal;
+      .label-text {
+        display: inline-block;
+        vertical-align: text-top;
+      }
+    }
+  }
+  .multiselect-item-container {
+    + .divider {
+      display: none;
+    }
+  }
+}
+
+c8y-typeahead {
+  .input-group {
+    z-index: $zindex-modal + 2;
+  }
+  .c8y-child-assets-selector.dropdown {
+    .dropdown-menu {
+      top: -4px;
+      right: -4px;
+      left: -4px;
+      padding-top: 40px;
+      width: unset;
+    }
+    &.dropup {
+      .dropdown-menu {
+        top: auto;
+        bottom: -4px;
+        padding-top: 0;
+        padding-bottom: 40px;
+      }
+    }
+    &.open .input-group.input-group-dropdown:before {
+      position: absolute;
+      top: -4px;
+      right: -4px;
+      bottom: -4px;
+      left: -4px;
+      display: block;
+      background-color: $component-background-default;
+      content: '';
+    }
+  }
+}

package/styles/{_app-switcher.less → components/navigation-and-layout/action-bars/_app-switcher.less}

@@ -7,7 +7,7 @@
   @media(max-width: @screen-sm-min){
     &.open {
       .main-header-button.c8y-dropdown.dropdown-toggle{
-        box-shadow: none!important;
+        box-shadow: none;
       }
     }
   }

package/styles/components/navigation-and-layout/action-bars/_app-switcher.scss

@@ -0,0 +1,111 @@
+@use "sass:math";
+@use "sass:string";
+@use "../../../../variables/index" as *;
+
+/**
+ * App Switcher - Application switcher dropdown component
+ *
+ * Note: Uses $size-* tokens for spacing throughout.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (320px, 340px): Dropdown menu widths
+ * - Off-token spacing (6px): Icon margin-bottom not in token system
+ * - Negative positioning (-72px, -160px, -255px): Dropdown centering offsets
+ * - Typography sizes (12px, 36px): Font sizes for labels and icons
+ * - Percentages (30%, 33.3333%, 50%, 95vh): Layout and flex values
+ * - Border widths (1px, 2px): Standard borders and outlines
+ * - Border radius (2px): Standard border radius
+ * - Negative offsets (-2px): Fine-tuning
+ * - Line-height (1.2): Unitless ratio
+ * - Transition duration (0.25s): Animation timing
+ * - Box-shadow values: Inset border effects
+ * - RGBA values: Transparency
+ * - Calc expressions: Complex computed values
+ */
+
+.app-switcher-dropdown {
+  position: static;
+  
+  @media (min-width: $screen-sm-min) {
+    position: relative;
+  }
+  @media(max-width: $screen-sm-min){
+    &.open {
+      .main-header-button.c8y-dropdown.dropdown-toggle{
+        box-shadow: none;
+      }
+    }
+  }
+}
+
+.app-switcher,
+.app-switcher-sagcloud {
+  display: flex;
+  flex-flow: row wrap;
+  margin: 0;
+  padding: $size-8;
+  background-color: $component-background-default;
+  cursor: pointer;
+  .appLink {
+    flex: 0 1 33.3333%;
+    margin: $size-4 0;
+    padding: calc($size-8 + $size-4) $size-8 $size-8;
+    min-width: 30%;
+    border: 1px solid transparent;
+    border-radius: 2px;
+    color: $navlink-color-default;
+    text-align: center;
+    font-size: 12px;
+    transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
+    &:hover {
+      box-shadow: inset 0 0 0 1px $brand-primary, inset 0 0 0 2px $component-background-default;
+      text-decoration: none;
+    }
+    &.active {
+      box-shadow: inset 0 0 0 2px $brand-primary;
+      text-decoration: none;
+    }
+    &:focus {
+      outline: 2px solid $component-color-focus;
+      outline-offset: -2px;
+      border-radius: $component-border-radius-focus!important;
+      box-shadow: none;
+      text-decoration: none;
+    }
+    > span {
+      display: block;
+      font-size: 12px;
+      line-height: 1.2;
+    }
+    .c8y-app-icon {
+      display: block;
+      width: auto;
+    }
+    .c8y-icon {
+      margin-bottom: 6px;
+      font-size: 36px;
+    }
+  }
+}
+
+.app-switcher-sagcloud {
+  box-shadow: inset 0 -1px 0 rgba($black, math.div(5, 100));
+}
+
+.dropdown-menu.app-switcher-dropdown-menu {
+  transform-origin: center top;
+  left: 50%!important;
+  overflow-y: auto;
+  margin-left: -160px !important;
+  max-height: calc(string.unquote('95vh - #{$header-bar-height}'));
+  width: 320px;
+
+  @media (min-width: 560px) and (max-width: $screen-sm-min) {
+    margin-left: -72px !important;
+    width: 340px;
+  }
+  @media (min-width: $screen-sm-min) {
+    margin-left: -255px !important;
+    width: 340px;
+  }
+}