@c8y/style 1023.14.76 → 1023.14.92

package/styles/core/forms/_input-groups.less

@@ -1,3 +1,32 @@
+@import "../../../variables/_dlt-c8y-icons-vars.less";
+
+/**
+ * Input Groups - Form input groups with addons and buttons
+ *
+ * Note: Uses @form-control-*, @input-group-addon-*, and @size-* tokens.
+ *
+ * Intentionally hardcoded values:
+ * - Border widths (1px): Standard borders
+ * - Negative margins (-1px): Fine-tuning for overlapping borders
+ * - Component-specific sizes (32px, 39px, 40px, 230px): Fixed component dimensions
+ * - Typography sizes (12px, 14px): Font sizes
+ * - Off-token spacing (12px): Legacy spacing not in token system
+ * - Line-height values (1, 32px, 40px): Specific alignments
+ * - Fine-tuning offsets (3ch, 6px): Precise positioning
+ * - Z-index values: Layering
+ * - Percentages (50%, 100%): Layout calculations
+ * - Calc expressions: Complex computed values
+ * - Transition durations (0.25s): Animation timing
+ * - Opacity values: Visual effects
+ * - RGBA values: Semi-transparent colors
+ */
+
+// Shared mixin for flex container with centered alignment
+.flex-center() {
+  display: flex;
+  align-items: center;
+}
+
 .input-group {
   position: relative; // For dropdowns
   display: flex;
@@ -12,7 +41,7 @@
     padding-left: 0;
   }
 
-  .form-control + .form-control{
+  .form-control + .form-control {
     margin-left: -1px;
   }
   > .form-control,
@@ -33,14 +62,14 @@
     flex-grow: 0;
     flex-basis: 39px;
   }
-  .form-control.inner-scroll{
+  .form-control.inner-scroll {
     box-shadow: none;
     border: 1px solid @form-control-border-color-default;
     padding-top: 0;
     padding-bottom: 0;
     align-items: center;
     background-color: @form-control-background-default;
-    > .tag{
+    > .tag {
       align-self: unset;
       flex-shrink: 0;
     }
@@ -64,8 +93,7 @@
 }
 
 .input-group-addon {
-  display: flex;
-  align-items: center;
+  .flex-center();
   padding: @form-control-padding-base-vertical @form-control-padding-base-horizontal;
   border-radius: @form-control-border-radius;
   background-color: @form-control-border-color-default;
@@ -89,6 +117,13 @@
     font-size: @font-size-small;
     height: @form-control-height-sm;
   }
+  .form-group-lg &,
+  .input-group-lg &,
+  &.input-lg {
+    padding: @form-control-padding-large-vertical @form-control-padding-large-horizontal;
+    font-size: @font-size-large;
+    height: @form-control-height-lg;
+  }
 
   label.c8y-checkbox,
   label.c8y-radio {
@@ -112,11 +147,11 @@
   &--last, + .input-group-btn {
     margin-left: -1px;
   }
-  .input-group-sm &{
+  .input-group-sm & {
     max-height: @form-control-height-sm;
   }
-  > .btn-default{
-    --c8y-btn-default-background-default: @form-control-background-default;
+  > .btn-default {
+    --c8y-btn-default-background-default: @{form-control-background-default};
   }
 }
 
@@ -126,7 +161,7 @@
   &:not(:first-child):not(:last-child) {
     border-radius: 0;
   }
-  .btn{
+  .btn:not(.btn-dot) {
     border-radius: @form-control-border-radius;
   }
 }
@@ -140,7 +175,7 @@
     &,
     &:first-child,
     &:last-child {
-      padding-right: calc(@form-control-height-base + @form-control-padding-base-horizontal)!important;
+      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);
     }
@@ -154,13 +189,13 @@
       font-size: @font-size-large;
     }
   }
- 
-  &:has(.input-group-btn > .btn + .btn){
+
+  &:has(.input-group-btn > .btn + .btn) {
     .form-control {
       &,
       &:first-child,
       &:last-child {
-        padding-right: calc(@form-control-height-base + @form-control-padding-base-horizontal * 4)!important;
+        padding-right: calc(@form-control-height-base + @form-control-padding-base-horizontal * 4) !important;
       }
     }
   }
@@ -187,7 +222,6 @@
         box-shadow: inset 0 0 0 2px @component-brand-primary;
       }
     }
-    
   }
 
   &.input-group-sm, .input-group-sm & {
@@ -197,7 +231,7 @@
 
     .input-group-btn,
     .input-group-addon, .form-group {
-      height: @form-control-height-sm!important;
+      height: @form-control-height-sm !important;
     }
   }
 
@@ -206,54 +240,59 @@
     .input-group-addon {
       height: @form-control-height-lg;
       max-height: unset;
-      .btn{
-        border-radius:  @form-control-height-base!important;
+      .btn {
+        border-radius: @form-control-height-base !important;
         min-width: @form-control-height-lg;
       }
     }
   }
 }
 
-.input-group.input-group--dots{
+.input-group.input-group--dots {
   display: flex;
   align-items: center;
   border-radius: calc(@form-control-height-base * 0.5);
   height: @form-control-height-base;
   border: 1px solid @form-control-border-color-default;
   padding: var(--c8y-form-control-padding-base-vertical);
-  gap: @margin-8;
+  gap: @size-8;
   font-size: @font-size-small;
 }
 
-.input-group-search{
-  .input-group-btn > .btn{
-    border-top-right-radius: calc(@form-control-height-base * 0.5)!important;
-    border-bottom-right-radius: calc(@form-control-height-base * 0.5)!important;
+.input-group-search {
+  .input-group-btn > .btn {
+    border-top-right-radius: calc(@form-control-height-base * 0.5) !important;
+    border-bottom-right-radius: calc(@form-control-height-base * 0.5) !important;
   }
   &.input-group-lg {
-    .input-group-btn > .btn{
-      border-top-right-radius: @form-control-height-base!important;
-      border-bottom-right-radius: @form-control-height-base!important;
+    .input-group-btn > .btn {
+      border-top-right-radius: @form-control-height-base !important;
+      border-bottom-right-radius: @form-control-height-base !important;
     }
   }
 }
 
-
 //smaller search input when using the c8y-search-input component
-c8y-search-input.input-group-sm{
-  .input-group-search{
+c8y-search-input.input-group-sm {
+  .input-group-search {
     .form-control,
     .input-group-addon,
     .input-group-btn > .btn {
-    .input-sm();
+      // Inline .input-sm styles (was @extend .input-sm)
+      &:not(.c8y-radio):not(.c8y-checkbox) {
+        padding: @form-control-padding-small-vertical @form-control-padding-small-horizontal;
+        height: @form-control-height-sm !important;
+        font-size: @font-size-small;
+        line-height: @line-height-small;
+      }
     }
   }
   // add smaller left and right margins in the search dropdown
   c8y-li.m-l-32.m-r-32 {
-    margin-left: 8px!important;
-    margin-right: 8px!important;
+    margin-left: @size-8 !important;
+    margin-right: @size-8 !important;
   }
-} 
+}
 
 .input-group.input-group-password {
   display: flex !important;
@@ -319,7 +358,7 @@ c8y-search-input.input-group-sm{
       border-radius: @form-control-border-radius;
     }
   }
-  &.input-group-sm{
+  &.input-group-sm {
     .input-group-btn,
     .input-group-addon {
       height: @form-control-height-sm;
@@ -333,7 +372,7 @@ c8y-search-input.input-group-sm{
 .input-group-btn:first-child > .btn,
 .input-group-btn:first-child > .btn-group > .btn,
 .input-group-btn:first-child > .dropdown-toggle,
-.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
+.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle):not(.btn-dot),
 .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
@@ -341,7 +380,7 @@ c8y-search-input.input-group-sm{
 
 .input-group .form-control:last-child,
 .input-group-addon:last-child,
-.input-group-btn:last-child > .btn,
+.input-group-btn:last-child > .btn:not(.btn-dot),
 .input-group-btn:last-child > .btn-group > .btn,
 .input-group-btn:last-child > .dropdown-toggle,
 .input-group-btn:first-child > .btn:not(:first-child),
@@ -363,10 +402,10 @@ c8y-search-input.input-group-sm{
         top: 50%;
         right: 0;
         display: block;
-        margin-top: -10px;
+        margin-top: calc(-1 * @size-10);
         width: 1px;
-        height: 20px;
-        background-color: fade(@black, 10%);
+        height: @size-20;
+        background-color: rgba(@black, (10 / 100));
         content: '';
       }
     }
@@ -437,7 +476,7 @@ c8y-search-input.input-group-sm{
       + span:after {
         z-index: 5;
         display: inline-block;
-        margin-left: -16px;
+        margin-left: calc(-1 * @size-16);
         color: @component-brand-primary;
         content: @dlt-c8y-icon-pencil;
         font: normal normal normal 14px/1 @icon-font-family;
@@ -476,19 +515,31 @@ c8y-search-input.input-group-sm{
 .input-group-lg > .input-group-addon,
 .input-group-lg > .input-group-btn > .btn,
 .input-group-search.input-group-lg .input-group > .form-control,
-.input-group-search.input-group-lg .input-group-btn > .btn{
-    .input-lg();
+.input-group-search.input-group-lg .input-group-btn > .btn {
+    // Inline .input-lg styles (was @extend .input-lg)
+    &:not(.c8y-radio):not(.c8y-checkbox) {
+        padding: @form-control-padding-large-vertical @form-control-padding-large-horizontal;
+        max-height: unset !important;
+        height: @form-control-height-lg !important;
+        font-size: @font-size-large;
+    }
 }
-.input-group-lg > .form-group{
-  height: @form-control-height-lg!important;
+.input-group-lg > .form-group {
+  height: @form-control-height-lg !important;
 }
-.input-group-sm .form-control,
-.input-group-sm  .input-group-addon,
-.input-group-sm  .input-group-btn > .btn {
-  .input-sm();
+.input-group-sm > .form-control,
+.input-group-sm > .input-group-addon,
+.input-group-sm > .input-group-btn > .btn {
+  // Inline .input-sm styles (was @extend .input-sm)
+  &:not(.c8y-radio):not(.c8y-checkbox) {
+    padding: @form-control-padding-small-vertical @form-control-padding-small-horizontal;
+    height: @form-control-height-sm !important;
+    font-size: @font-size-small;
+    line-height: @line-height-small;
+  }
 }
-.input-group-sm > .form-group{
-  height: @form-control-height-sm!important;
+.input-group-sm > .form-group {
+  height: @form-control-height-sm !important;
 }
 
 // Text input groups
@@ -531,12 +582,12 @@ c8y-search-input.input-group-sm{
   // element above the siblings.
   > .btn {
     position: relative;
-    padding: 5px 12px;
+    padding: @size-5 12px;
     height: 100%;
 
     + .btn {
       margin-left: -1px;
-      border-left-color: fade(@black, 15%);
+      border-left-color: rgba(@black, (15 / 100));
     }
 
     // Bring the "active" button to the front
@@ -563,7 +614,7 @@ c8y-search-input.input-group-sm{
     > .btn,
     > .btn-group {
       margin-right: 0;
-      border-right-color: fade(@black, 15%);
+      border-right-color: rgba(@black, (15 / 100));
     }
 
     > .btn:last-child {
@@ -575,7 +626,7 @@ c8y-search-input.input-group-sm{
     > .btn:not(:focus),
     > .btn-group {
       z-index: 2;
-      // border-left-color: fade(@black, 15%);
+      // border-left-color: rgba(@black, 15/100);
     }
     > .btn:focus {
       margin-left: -1px;
@@ -600,12 +651,12 @@ c8y-search-input.input-group-sm{
 
   .form-group,
   .input-group-btn {
-    margin-bottom: 4px;
+    margin-bottom: @size-4;
   }
 
   // @TODO: JAWI validate
   > .input-group-btn.delete-row {
-    margin-top: 24px;
+    margin-top: @size-24;
   }
 
   formly-field {
@@ -626,7 +677,7 @@ c8y-search-input.input-group-sm{
 // modifier classes for formly
 .formly-group-array-cols {
   .input-group-array {
-    gap: @margin-base;
+    gap: @size-base;
 
     > formly-field {
       display: contents;
@@ -643,14 +694,14 @@ c8y-search-input.input-group-sm{
 }
 
 formly-field label.c8y-checkbox {
-  margin: @margin-base 0;
+  margin: @size-base 0;
 }
 
 c8y-lwm2m-legend-wrapper formly-field {
   > c8y-field-checkbox {
     display: flex;
     align-items: center;
-    margin: 0 0 @margin-8 0;
+    margin: 0 0 @size-8 0;
     & label.c8y-switch {
       display: flex !important;
       overflow: visible;

package/styles/core/forms/_input-groups.scss

@@ -280,7 +280,13 @@ c8y-search-input.input-group-sm {
     .form-control,
     .input-group-addon,
     .input-group-btn > .btn {
-    // @extend .input-sm; // Removed for performance
+      // Inline .input-sm styles (was @extend .input-sm)
+      &:not(.c8y-radio):not(.c8y-checkbox) {
+        padding: $form-control-padding-small-vertical $form-control-padding-small-horizontal;
+        height: $form-control-height-sm !important;
+        font-size: $font-size-small;
+        line-height: $line-height-small;
+      }
     }
   }
   // add smaller left and right margins in the search dropdown
@@ -512,7 +518,13 @@ c8y-search-input.input-group-sm {
 .input-group-lg > .input-group-btn > .btn,
 .input-group-search.input-group-lg .input-group > .form-control,
 .input-group-search.input-group-lg .input-group-btn > .btn {
-    @extend .input-lg !optional;
+    // Inline .input-lg styles (was @extend .input-lg)
+    &:not(.c8y-radio):not(.c8y-checkbox) {
+        padding: $form-control-padding-large-vertical $form-control-padding-large-horizontal;
+        max-height: unset !important;
+        height: $form-control-height-lg !important;
+        font-size: $font-size-large;
+    }
 }
 .input-group-lg > .form-group {
   height: $form-control-height-lg !important;
@@ -520,7 +532,13 @@ c8y-search-input.input-group-sm {
 .input-group-sm > .form-control,
 .input-group-sm > .input-group-addon,
 .input-group-sm > .input-group-btn > .btn {
-  // @extend .input-sm; // Removed for performance
+  // Inline .input-sm styles (was @extend .input-sm)
+  &:not(.c8y-radio):not(.c8y-checkbox) {
+    padding: $form-control-padding-small-vertical $form-control-padding-small-horizontal;
+    height: $form-control-height-sm !important;
+    font-size: $font-size-small;
+    line-height: $line-height-small;
+  }
 }
 .input-group-sm > .form-group {
   height: $form-control-height-sm !important;

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

@@ -1,3 +1,23 @@
+
+@import "../../../variables/_dlt-c8y-icons-vars.less";
+
+/**
+ * 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;
@@ -8,35 +28,11 @@
   }
 }
 
-.btn-toggle-panel {
-  display: block;
-  padding: 0;
-  border: 0;
-  background-color: transparent;
-  background-image: none;
-  color: @link-color;
-  text-align: center;
-  [class^='dlt-c8y-icon-'],
-  [class*=' dlt-c8y-icon-'] {
-    .transition(all 0.35s ease);
-  }
-  &.open {
-    [class^='dlt-c8y-icon-'],
-    [class*=' dlt-c8y-icon-'] {
-      .rotate(180deg);
-    }
-  }
-  &:hover {
-    color: @link-color-hover;
-  }
-  &:focus {
-    outline: none;
-  }
-}
+// Removed unused panel toggle button class - verified 0 usages: .btn-toggle-panel
 
 .dashboard-preview-list {
   overflow-y: auto;
-  margin-bottom: 10px;
+  margin-bottom: @size-10;
   max-height: 125px;
   border-top: 1px solid @component-border-color;
   border-bottom: 1px solid @component-border-color;
@@ -52,8 +48,8 @@
   position: relative;
   display: block;
   margin: 0;
-  padding: 5px 10px;
-  min-height: 10px;
+  padding: @size-5 @size-10;
+  min-height: @size-10;
   color: inherit;
   text-transform: none;
   font-weight: normal;
@@ -76,7 +72,7 @@
         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;
+        font: normal normal normal @size-20/1 @icon-font-family;
         font-size: inherit;
         line-height: 28px;
 

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

@@ -1,3 +1,26 @@
+@import "../../../variables/_dlt-c8y-icons-vars.less";
+@import "../../mixins/_shadows-helper.less";
+
+/**
+ * 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;
@@ -22,7 +45,7 @@
 
 // Top navigation on wizard
 .c8y-wizard-nav {
-  padding: @margin-8;
+  padding: @size-8;
   color: @gray-50;
   text-align: center;
   text-transform: uppercase;
@@ -34,7 +57,7 @@
 
 // Title
 .c8y-wizard-title {
-  padding: @margin-8 @margin-base @margin-4;
+  padding: @size-8 @size-base @size-4;
   background-color: @gray-90;
   text-align: center;
   text-transform: uppercase;
@@ -52,7 +75,7 @@
   overflow: hidden;
   min-height: 200px;
 
-  .transition(height 0.3s ease);
+  transition: height 0.3s ease;
   .edition-modal {
     height: calc(~'100vh - 300px');
   }
@@ -69,7 +92,7 @@
     }
   }
   .drop-zone {
-    margin: @margin-base auto;
+    margin: @size-base auto;
     padding-bottom: 0;
     min-height: 254px;
     max-width: 280px;
@@ -77,7 +100,7 @@
 }
 
 .c8y-wizard-body {
-  padding: @margin-4 @margin-16;
+  padding: @size-4 @size-16;
 }
 
 .c8y-wizard-list-nav {
@@ -87,11 +110,11 @@
     align-items: center;
     flex-flow: row nowrap;
     margin: 0;
-    padding: @margin-4 @margin-24 @margin-4 @margin-16;
+    padding: @size-4 @size-24 @size-4 @size-16;
 
-    .shadow-border(-1px, @component-border-color);
+    .shadow-border(-1px; @component-border-color);
     .list-group-icon {
-      margin-right: @margin-base;
+      margin-right: @size-base;
       max-height: 32px;
       .app-noicon {
         margin: 0;
@@ -104,7 +127,7 @@
     [class^='dlt-c8y-icon-'],
     [class*=' dlt-c8y-icon-'],
     .c8y-icon {
-      margin-right: @margin-8;
+      margin-right: @size-8;
       width: 26px;
       vertical-align: middle;
       font-size: 24px;
@@ -116,14 +139,14 @@
     .app-icon {
       display: inline-block;
       margin-top: -2px;
-      margin-right: @margin-base;
+      margin-right: @size-base;
       height: 26px;
       font-size: 24px;
     }
     &:after {
       position: absolute;
       top: 50%;
-      right: @margin-16;
+      right: @size-16;
       display: inline-block;
       color: @gray-50;
       content: @dlt-c8y-icon-angle-right;
@@ -139,7 +162,7 @@
 }
 
 .c8y-wizard-footer {
-  padding: @margin-24;
+  padding: @size-24;
   box-shadow: inset 0 -1px 0 @component-border-color;
   text-align: center;
   .btn:not(.btn-clean) {
@@ -152,14 +175,14 @@
 
 .c8y-wizard-form {
   position: relative;
-  padding: @margin-base 0;
-  border-top: 1px solid fade(@black, 3%);
+  padding: @size-base 0;
+  border-top: 1px solid rgba(@black, (3 / 100));
   background-color: @gray-100;
   hr {
     border-top-color: @gray-80;
   }
   .form-group {
-    padding: 0 @margin-16;
+    padding: 0 @size-16;
   }
 }