@c8y/style 1023.37.0 → 1023.43.2

package/styles/components/navigation-and-layout/navigation/_pagination.less

@@ -1,3 +1,22 @@
+
+@import "../../../../variables/_dlt-c8y-icons-vars.less";
+@import "../../../mixins/_icon-base.less";
+@import "../../../mixins/_pagination.less";
+
+/**
+ * Pagination - Page navigation component
+ *
+ * Note: Uses @size-* tokens where applicable; @pagination-* variables for colors, and component tokens.
+ *
+ * Intentionally hardcoded values:
+ * - Border widths (1px): Standard borders
+ * - Negative offsets (-1px): Fine-tuning
+ * - Percentages (50%, 100%): Layout and positioning
+ * - Calc expressions: Complex computed border-radius
+ * - Z-index values (2, 3): Stacking order
+ * - Opacity values: Visual states
+ */
+
 .pagination {
   display: flex;
   margin: 0;
@@ -36,16 +55,16 @@
       > span {
         margin-left: 0;
         text-indent: 9000px;
-
-        .border-left-radius(calc(@form-control-height-base * 0.5));
+        border-top-left-radius: calc(@form-control-height-base * 0.5);
+        border-bottom-left-radius: calc(@form-control-height-base * 0.5);
       }
     }
     &:last-child {
       > a,
       > span {
         text-indent: 9000px;
-
-        .border-right-radius(calc(@form-control-height-base * 0.5));
+        border-top-right-radius: calc(@form-control-height-base * 0.5);
+        border-bottom-right-radius: calc(@form-control-height-base * 0.5);
       }
     }
   }
@@ -86,7 +105,7 @@
     overflow: hidden;
     .dlt-c8y-icon();
     position: relative;
-    width: 32px;
+    width: @size-32;
   }
 }
 .pagination-first a::before {

package/styles/components/navigation-and-layout/navigation/{steps-navbar.less → _steps-navbar.less}

@@ -1,3 +1,4 @@
+
 // DEPRECATED: Remove when wizard.html is migrated from AngularJS to Angular.
 // Used in: 8 wizard-related files (modules/core/ui/containers/wizard.html, app wizard steps, etc.)
 .steps-navbar {
@@ -15,7 +16,7 @@
     display: flex;
     overflow: hidden;
     flex-flow: row nowrap;
-    border-bottom: 1px solid fade(@black, 10%);
+    border-bottom: 1px solid rgba(@black, (10 / 100));
     > li {
       position: relative;
       display: block;
@@ -24,11 +25,11 @@
 
       a {
         margin: 0;
-        padding: @margin-8 calc(@margin-8 + @margin-4);
+        padding: @size-8 calc(@size-8 + @size-4);
         border: 0;
         background-color: @component-background-default;
         color: @gray-30;
-        font-size: 12px;
+        font-size: calc(@size-base * 1.5);
         @media (min-width: @screen-sm-min) {
           font-size: inherit;
         }
@@ -49,9 +50,9 @@
           margin-left: 1px;
           width: 0;
           height: 0;
-          border-width: 18px 0 18px 10px;
+          border-width: 18px 0 18px @size-10;
           border-style: solid;
-          border-color: transparent transparent transparent fade(@black, 10%);
+          border-color: transparent transparent transparent rgba(@black, (10 / 100));
           content: '';
         }
         &:after {
@@ -61,7 +62,7 @@
           z-index: 10;
           width: 0;
           height: 0;
-          border-width: 18px 0 18px 10px;
+          border-width: 18px 0 18px @size-10;
           border-style: solid;
           border-color: transparent transparent transparent @component-background-default;
           content: '';

package/styles/components/navigation-and-layout/navigation/_tabs.less

@@ -1,3 +1,7 @@
+
+@import "../../../mixins/_border-radius.less";
+@import "../../../mixins/_tab-focus.less";
+
 .nav-tabs {
   display: flex;
   background-color: @nav-tabs-background-default;
@@ -10,7 +14,7 @@
     > a,
     > button:not(.btn-clean) {
       padding: @nav-tabs-padding;
-      height: @margin-64;
+      height: @size-64;
       border: none;
       background-color: transparent;
       color: @nav-tabs-color-default;
@@ -28,7 +32,7 @@
       }
       @media (min-width: @grid-float-breakpoint) {
         flex-direction: row;
-        height: @margin-48;
+        height: @size-48;
       }
 
       > [class^='dlt-c8y-icon-'],
@@ -44,7 +48,8 @@
         @media (min-width: @grid-float-breakpoint) {
           display: inline-block;
           margin-top: 0;
-          margin-right: @margin-8;
+          margin-left: 0;
+          margin-right: @size-8;
           vertical-align: text-top;
         }
       }
@@ -98,8 +103,8 @@
     }
   } 
   &.nav-justified {
-    .nav-justified();
-    .nav-tabs-justified();
+    // Note: Intentionally empty - justified layout handled by .nav-justified base class (see _navs.less)
+    // Tab-specific justified styles are in .nav-tabs-justified class below
   }
   .dashboard-template-marker {
     position: absolute;
@@ -144,8 +149,8 @@
 
 .mobile-tabs {
   margin: 0;
-  padding: @margin-4 @margin-base;
-  min-height: calc(@margin-base * 6);
+  padding: @size-4 @size-base;
+  min-height: calc(@size-base * 6);
   background-color: var(--brand-primary, var(--c8y-brand-primary));
   color: @palette-high;
   .c8y-select-wrapper {
@@ -157,12 +162,12 @@
       color: inherit;
     }
     select {
-      height: calc(@margin-base * 5);
+      height: calc(@size-base * 5);
       background-color: transparent;
       box-shadow: none;
       color: inherit;
       option {
-        color: var(--gray-text, @text-color);
+        color: var(--gray-text; @text-color);
       }
     }
   }
@@ -174,7 +179,7 @@
 .nav-tabs-vertical {
   display: block;
   &:not(.component-tabs) {
-    padding-top: @margin-48;
+    padding-top: @size-48;
   }
   width: @nav-tabs-vertical-width;
   border: 0;
@@ -200,7 +205,7 @@
       [class^='dlt-c8y-icon-'],
       [class*=' dlt-c8y-icon-'],
       .c8y-icon {
-        margin: 0 @margin-8 0 0;
+        margin: 0 @size-8 0 0;
         width: 1.25em;
         ~ span {
           display: inline-block;
@@ -215,7 +220,7 @@
     &.active {
       > a, > button{
         &, &:hover{
-          border-left: 4px solid @nav-tabs-color-active;
+          border-left: @size-4 solid @nav-tabs-color-active;
           background-color: @nav-tabs-background-active;
           box-shadow: inset 0 -1px 0 @nav-tabs-border-color-default !important;
           border-radius: 0 !important;
@@ -226,7 +231,7 @@
           &::after {
             left: 100%;
             height: 100%;
-            border-width: calc(@margin-16 + @margin-4) 0 calc(@margin-16 + @margin-4) @margin-base;
+            border-width: calc(@size-16 + @size-4) 0 calc(@size-16 + @size-4) @size-base;
           }
         }
       }
@@ -236,7 +241,7 @@
 
 .tabs_ctrl + .container-fluid .tab-content-spacer {
   margin: 0 -30px 0;
-  padding-bottom: 20px;
+  padding-bottom: @size-20;
   border: 0;
 }
 

package/styles/components/navigation-and-layout/navigation/_tabs.scss

@@ -49,6 +49,7 @@
         @media (min-width: $grid-float-breakpoint) {
           display: inline-block;
           margin-top: 0;
+          margin-left: 0;
           margin-right: $size-8;
           vertical-align: text-top;
         }
@@ -103,8 +104,8 @@
     }
   } 
   &.nav-justified {
-    // Note: nav-justified() and nav-tabs-justified() mixins don't exist, styles removed during LESS to SCSS migration
-    // TODO: May need to restore justified nav styles if needed
+    // Note: Intentionally empty - justified layout handled by .nav-justified base class (see _navs.scss)
+    // Tab-specific justified styles are in .nav-tabs-justified class below
   }
   .dashboard-template-marker {
     position: absolute;

package/styles/components/{specialized → status-feedback-and-notifications}/_c8y-message-banner.less

@@ -1,3 +1,17 @@
+
+
+/**
+ * c8y message uanner - Component styles
+ *
+ * Note: Uses @size-* tokens for spacing where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions: Fixed sizes for component layout
+ * - Off-grid spacing: Component-specific positioning
+ * - Border widths (1px, 2px, 3px): Standard borders
+ * - Font-sizes: Typography
+ * - Percentages: Layout
+ */
 .c8y-message-banner{
   position: fixed;
   z-index: 10000;

package/styles/components/{specialized → status-feedback-and-notifications}/_code.less

@@ -1,3 +1,19 @@
+
+@import "../../mixins/_c8y-scrollbar.less";
+
+
+/**
+ * code - Component styles
+ *
+ * Note: Uses @size-* tokens for spacing where applicable.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions: Fixed sizes for component layout
+ * - Off-grid spacing: Component-specific positioning
+ * - Border widths (1px, 2px, 3px): Standard borders
+ * - Font-sizes: Typography
+ * - Percentages: Layout
+ */
 code,
 kbd,
 pre,
@@ -7,7 +23,7 @@ samp,
 }
 
 code {
-  padding: 2px 4px;
+  padding: 2px @size-4;
   border-radius: @code-border-radius;
   background-color: @code-background;
   color: @code-color;
@@ -15,7 +31,7 @@ code {
 }
 
 kbd {
-  padding: 2px 4px;
+  padding: 2px @size-4;
   border-radius: @kbd-border-radius;
   background-color: @kbd-background;
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);

package/styles/core/buttons/_button-groups.less

@@ -1,6 +1,22 @@
+@import "../../mixins/_border-radius.less";
+@import "../../mixins/_clearfix.less";
+
+/**
+ * Button Groups - Grouped button layouts (horizontal, vertical, justified)
+ *
+ * Note: Uses @size-* tokens for spacing and @btn-group-border-radius. Uses CSS custom properties for colors.
+ *
+ * Intentionally hardcoded values:
+ * - Border/outline widths (2px): Standard borders
+ * - Outline-offset (-3px, -2px): Focus indicator positioning
+ * - Negative margins (-1px, -2px): Border overlap technique
+ * - Padding 12px (off-grid): Large button split dropdown specific
+ * - Z-index (2): Button stacking order
+ */
+
 // Make the div behave like a button
-.btn-group,
-.btn-group-vertical {
+// Removed unused button group variant from selector - verified 0 usages: .btn-group-vertical
+.btn-group {
   position: relative;
   display: flex;
   align-items: center;
@@ -17,14 +33,10 @@
   }
 }
 
-.btn-group-vertical {
-  flex-direction: column;
-}
-
 .btn-group {
   padding: 0;
   .c8y-toolbar & {
-    padding: 4px 15px;
+    padding: @size-4 @size-16;
   }
   .btn {
     display: inline-block;
@@ -60,16 +72,16 @@
   }
 
   // also when we're using the realtime button
-  c8y-realtime-control .btn{
+  c8y-realtime-control .btn {
     border-left: 0;
   }
 }
 
 // Optional: Group multiple button groups together for a toolbar
 .btn-toolbar {
-  margin-left: -5px; // Offset the first child's margin
+  margin-left: calc(-1 * @size-5); // Offset the first child's margin
 
-  &:extend(.clearfix all);
+  .clearfix();
   .btn,
   .btn-group,
   .input-group {
@@ -78,7 +90,7 @@
   > .btn,
   > .btn-group,
   > .input-group {
-    margin-left: 5px;
+    margin-left: @size-5;
   }
 }
 
@@ -143,13 +155,13 @@
 // Split button dropdowns
 // Give the line between buttons some depth
 .btn-group > .btn + .dropdown-toggle {
-  padding-right: 10px;
-  padding-left: 8px;
+  padding-right: @size-10;
+  padding-left: @size-8;
 }
 
 .btn-group.dropdown > .btn + .dropdown-toggle {
-  padding-right: 8px;
-  padding-left: 8px;
+  padding-right: @size-8;
+  padding-left: @size-8;
 }
 
 .btn-group:not(.dropdown) > .btn-lg + .dropdown-toggle {
@@ -162,70 +174,8 @@
   transform: rotate(180deg);
 }
 
-// Vertical button groups
-.btn-group-vertical {
-  > .btn,
-  > .btn-group,
-  > .btn-group > .btn {
-    display: block;
-    float: none;
-    max-width: 100%;
-    width: 100%;
-  } // Clear floats so dropdown menus can be properly placed
-  > .btn-group {
-    &:extend(.clearfix all);
-    > .btn {
-      float: none;
-    }
-  }
-  > .btn + .btn,
-  > .btn + .btn-group,
-  > .btn-group + .btn,
-  > .btn-group + .btn-group {
-    margin-top: -1px;
-    margin-left: 0;
-  }
-}
-
-.btn-group-vertical > .btn {
-  border-radius: 0;
-}
-
-.btn-group-vertical > .btn-group > .btn {
-  border-radius: 0;
-}
-
-.btn-group-vertical > .btn-group:first-child:not(:last-child) {
-  > .btn:last-child,
-  > .dropdown-toggle {
-    .border-bottom-radius(0);
-  }
-}
-
-.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
-  .border-top-radius(0);
-}
-
-// Justified button groups
-.btn-group-justified {
-  display: flex;
-  width: 100%;
-  > .btn,
-  > .btn-group {
-    float: none;
-    flex: 1 1 auto;
-    overflow: hidden !important;
-    max-width: 100% !important;
-    text-overflow: ellipsis !important;
-    white-space: nowrap !important;
-  }
-  > .btn-group .btn {
-    width: 100%;
-  }
-  > .btn-group .dropdown-menu {
-    left: auto;
-  }
-}
+// Removed unused button group variants - verified 0 usages:
+// .btn-group-vertical, .btn-group-justified
 
 // Checkbox and radio options
 //