@c8y/style 1023.14.33 → 1023.14.36

package/styles/{_c8y-dashboard-modal.less → core/overlays/_c8y-dashboard-modal.less}

@@ -60,20 +60,20 @@
   font-size: 100%;
   cursor: pointer;
   &:hover {
-    color: @brand-primary;
+    color: var(--brand-primary, var(--c8y-brand-primary));
   }
   input[type='radio'] {
     position: absolute;
     opacity: 0;
     &:checked ~ .preview-label {
-      color: @brand-primary;
+      color: var(--brand-primary, var(--c8y-brand-primary));
       &::after {
         position: absolute;
         top: 1px;
         right: 0;
         width: 28px;
         height: 28px;
-        color: @brand-primary;
+        color: var(--brand-primary, var(--c8y-brand-primary));
         content: @dlt-c8y-icon-check;
         text-align: center;
         font: normal normal normal 20px/1 @icon-font-family;

package/styles/core/overlays/_c8y-dashboard-modal.scss

@@ -0,0 +1,86 @@
+@use "../../../variables/index" as *;
+
+@use "../../../variables/dlt-c8y-icons-vars";
+
+/**
+ * C8Y Dashboard Modal - Dashboard selection modal styles
+ *
+ * Note: Uses $size-* tokens for spacing where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Off-token spacing (15px): Grid gutter width, not in token system
+ * - Component-specific sizes (28px, 125px): Icon area and preview list height
+ * - Border widths (1px): Standard borders
+ * - Positioning offset (1px): Fine-tuning
+ * - Percentages (100%): Layout values
+ * - Transition duration (0.35s): Animation timing
+ * - Transform rotation (180deg): Icon rotation
+ * - Line-height (28px): Icon alignment
+ * - Typography font shorthand: Icon font specification
+ */
+
+.modal-body {
+  .row {
+    margin: 0 -15px;
+    [class*='col-'] {
+      padding-right: 15px;
+      padding-left: 15px;
+    }
+  }
+}
+
+// Removed unused panel toggle button class - verified 0 usages: .btn-toggle-panel
+
+.dashboard-preview-list {
+  overflow-y: auto;
+  margin-bottom: $size-10;
+  max-height: 125px;
+  border-top: 1px solid $component-border-color;
+  border-bottom: 1px solid $component-border-color;
+  > .dashboard-preview-item:first-child {
+    border-top: 0;
+  }
+  > .dashboard-preview-item:last-child {
+    border-bottom: 0;
+  }
+}
+
+.dashboard-preview-item {
+  position: relative;
+  display: block;
+  margin: 0;
+  padding: $size-5 $size-10;
+  min-height: $size-10;
+  color: inherit;
+  text-transform: none;
+  font-weight: normal;
+  font-size: 100%;
+  cursor: pointer;
+  &:hover {
+    color: var(--brand-primary, var(--c8y-brand-primary));
+  }
+  input[type='radio'] {
+    position: absolute;
+    opacity: 0;
+    &:checked ~ .preview-label {
+      color: var(--brand-primary, var(--c8y-brand-primary));
+      &::after {
+        position: absolute;
+        top: 1px;
+        right: 0;
+        width: 28px;
+        height: 28px;
+        color: var(--brand-primary, var(--c8y-brand-primary));
+        content: dlt-c8y-icons-vars.$dlt-c8y-icon-check;
+        text-align: center;
+        font: normal normal normal $size-20/1 dlt-c8y-icons-vars.$icon-font-family;
+        font-size: inherit;
+        line-height: 28px;
+
+        text-rendering: auto;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+    }
+  }
+}

package/styles/{_c8y-wizard.less → core/overlays/_c8y-wizard.less}

@@ -42,7 +42,7 @@
   font-size: 18px;
   > [class^='dlt-c8y-icon-'],
   > [class*=' dlt-c8y-icon-'] {
-    color: @brand-primary;
+    color: var(--brand-primary, var(--c8y-brand-primary));
   }
 }
 

package/styles/core/overlays/_c8y-wizard.scss

@@ -0,0 +1,226 @@
+@use "sass:math";
+@use "sass:string";
+@use "../../../variables/index" as *;
+@use "../../../variables/dlt-c8y-icons-vars";
+@use "../../mixins/shadows-helper";
+
+/**
+ * C8Y Wizard - Modal wizard component for multi-step flows
+ *
+ * Note: Uses $size-* tokens for spacing and $size-base throughout.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (200px, 254px, 280px, 300px, 420px, 600px): Modal and content area sizes
+ * - Typography sizes (18px, 24px, 30px): Font sizes for title, icons
+ * - Icon dimensions (26px, 30px, 32px, 34px): Icon and app icon sizes
+ * - Button widths (80px, 100px): Minimum button widths
+ * - Spinner positioning (-20px, -25px): Centering offset
+ * - Border widths (1px): Standard borders
+ * - Negative margins (-1px, -2px): Fine-tuning
+ * - Transition durations (0.25s, 0.3s): Animation timing
+ * - Percentages (50%, 100%): Layout and positioning
+ * - RGBA values: Transparency
+ * - Calculation expressions: Complex computed values
+ * - Transform values: Positioning
+ */
+
+.c8y-wizard {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+
+  .modal-header {
+    color: $palette-high;
+  }
+  .modal-content {
+    min-width: 300px;
+    border: 0;
+    @media (min-width: $screen-sm-min) {
+      min-width: 300px;
+      max-width: 420px;
+      width: auto;
+    }
+  }
+}
+
+// Top navigation on wizard
+.c8y-wizard-nav {
+  padding: $size-8;
+  color: $gray-50;
+  text-align: center;
+  text-transform: uppercase;
+  font-weight: 400;
+  a:hover {
+    text-decoration: none;
+  }
+}
+
+// Title
+.c8y-wizard-title {
+  padding: $size-8 $size-base $size-4;
+  background-color: $gray-90;
+  text-align: center;
+  text-transform: uppercase;
+  font-weight: 100;
+  font-size: 18px;
+  > [class^='dlt-c8y-icon-'],
+  > [class*=' dlt-c8y-icon-'] {
+    color: var(--brand-primary, var(--c8y-brand-primary));
+  }
+}
+
+//content
+.c8y-wizard-content {
+  position: relative;
+  overflow: hidden;
+  min-height: 200px;
+
+  transition: height 0.3s ease;
+  .edition-modal {
+    height: calc(string.unquote('100vh - 300px'));
+  }
+  .c8y-wizard-panel {
+    position: absolute;
+    display: none;
+    width: 100%;
+    height: auto;
+    -webkit-animation-duration: 0.25s;
+    animation-duration: 0.25s;
+    &.active,
+    &.animated {
+      display: block;
+    }
+  }
+  .drop-zone {
+    margin: $size-base auto;
+    padding-bottom: 0;
+    min-height: 254px;
+    max-width: 280px;
+  }
+}
+
+.c8y-wizard-body {
+  padding: $size-4 $size-16;
+}
+
+.c8y-wizard-list-nav {
+  .list-group-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-flow: row nowrap;
+    margin: 0;
+    padding: $size-4 $size-24 $size-4 $size-16;
+
+    @include shadows-helper.shadow-border(-1px, $component-border-color);
+    .list-group-icon {
+      margin-right: $size-base;
+      max-height: 32px;
+      .app-noicon {
+        margin: 0;
+        width: 30px;
+        height: 30px;
+        font-size: 18px;
+        line-height: 34px;
+      }
+    }
+    [class^='dlt-c8y-icon-'],
+    [class*=' dlt-c8y-icon-'],
+    .c8y-icon {
+      margin-right: $size-8;
+      width: 26px;
+      vertical-align: middle;
+      font-size: 24px;
+    }
+    c8y-app-icon .c8y-icon {
+      width: 30px;
+      font-size: 30px;
+    }
+    .app-icon {
+      display: inline-block;
+      margin-top: -2px;
+      margin-right: $size-base;
+      height: 26px;
+      font-size: 24px;
+    }
+    &:after {
+      position: absolute;
+      top: 50%;
+      right: $size-16;
+      display: inline-block;
+      color: $gray-50;
+      content: dlt-c8y-icons-vars.$dlt-c8y-icon-angle-right;
+      font: normal normal normal 14px/1 dlt-c8y-icons-vars.$icon-font-family;
+      font-size: inherit;
+      transform: translate(0, -50%);
+
+      text-rendering: auto;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+  }
+}
+
+.c8y-wizard-footer {
+  padding: $size-24;
+  box-shadow: inset 0 -1px 0 $component-border-color;
+  text-align: center;
+  .btn:not(.btn-clean) {
+    min-width: 100px;
+    @media (max-width: $screen-xs-max) {
+      min-width: 80px;
+    }
+  }
+}
+
+.c8y-wizard-form {
+  position: relative;
+  padding: $size-base 0;
+  border-top: 1px solid rgba($black, math.div(3, 100));
+  background-color: $gray-100;
+  hr {
+    border-top-color: $gray-80;
+  }
+  .form-group {
+    padding: 0 $size-16;
+  }
+}
+
+.c8y-wizard-processing {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+  background-color: rgba($component-background-default, 0.7);
+  .spinner {
+    top: 50%;
+    left: 50%;
+    margin: -20px 0 0 -25px;
+  }
+}
+
+@media screen and (min-width: $screen-sm-min) {
+  .c8y-wizard {
+    .modal-dialog {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0;
+      width: 100%;
+      height: 100%;
+    }
+    .modal-content {
+      min-width: 420px;
+      max-width: 600px;
+      .register-devices {
+        display: block;
+        max-width: 420px;
+      }
+    }
+  }
+}

package/styles/{_dropdowns.less → core/overlays/_dropdowns.less}

@@ -89,7 +89,7 @@
 
   .divider {
     overflow: hidden;
-    margin: 0 !important;
+    margin: 0;
     height: 2px;
     background: var(--c8y-dropdown-border-color, @component-border-color);
   }
@@ -151,7 +151,7 @@
   > li:first-child a,
   > li:first-child > button,
   .divider + li > a {
-    border-top-color: transparent !important;
+    border-top-color: transparent;
   }
 
   // forms in dropdown-menu
@@ -412,7 +412,7 @@ bs-dropdown-container >.dropdown >.dropdown-menu {
   padding: @margin-base @component-padding;
   border-top: 1px solid fade(@black, 5%);
   background-color: @component-background-default;
-  color: @component-color-default!important;
+  color: @component-color-default;
   white-space: nowrap;
   font-size: @font-size-small;
   line-height: @line-height-base;
@@ -751,7 +751,7 @@ body {
       > button {
         height: calc(@form-control-height-base - 2px)!important;
         &:focus {
-          margin-left: 0!important;
+          margin-left: 0;
         }
       }
     }