@c8y/style 1023.30.0 → 1023.42.1

package/styles/components/navigation-and-layout/cards/_card.less

@@ -1,14 +1,45 @@
+
+@import "../../../mixins/_c8y-scrollbar.less";
+@import "../../../mixins/_tab-focus.less";
+@import "../../../mixins/_vendor-prefixes.less";
+
+/**
+ * Card - Base card component with all variants
+ *
+ * Note: Uses @size-* tokens extensively; @font-size-* tokens, and component variables.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (56px, 60px, 66px, 80px, 90px, 100px, 140px): Card sizes and minimums
+ * - Typography sizes (18px, 20px, 22px, 36px): Icon and heading font sizes
+ * - Border widths (1px, 2px): Standard borders and outlines
+ * - Negative offsets (-1px, -2px): Fine-tuning
+ * - Percentages (100%): Layout
+ * - Z-index values: Stacking order
+ * - Opacity values: Visual states
+ * - Transition durations: Animation timing
+ * - Box-shadow values: Elevation effects
+ * - RGBA values: Transparency
+ */
+
+// Shared mixin for card status color variants
+.card-status-variant(@bg-color; @text-color; @muted-color) {
+  background-color: @bg-color;
+  color: @text-color;
+  --c8y-component-color-text-muted: @{muted-color};
+  --c8y-component-border-color: rgba(black, 0.1);
+}
+
 .card {
   position: relative;
   display: block;
-  margin-bottom: @margin-16;
+  margin-bottom: @size-16;
   padding: 0;
   border-radius: @component-border-radius-base;
   background: @component-background-default;
   box-shadow: var(--c8y-elevation-sm);
 
   @media (min-width: @screen-sm-min) {
-    margin-bottom: @margin-24;
+    margin-bottom: @size-24;
   }
 
   &.pointer {
@@ -67,40 +98,33 @@
 
   // state colors
   &.danger {
-    background-color: var(--palette-status-danger-light, var(--c8y-palette-status-danger-light));
-    color: var(--palette-status-danger-dark, var(--c8y-palette-status-danger-dark));
-    --c8y-component-color-text-muted: var(--palette-status-danger, var(--c8y-palette-status-danger));
-    --c8y-component-border-color: rgba(black, 0.1);
+    .card-status-variant(var(--palette-status-danger-light, var(--c8y-palette-status-danger-light)),
+      var(--palette-status-danger-dark, var(--c8y-palette-status-danger-dark)),
+      var(--palette-status-danger, var(--c8y-palette-status-danger)));
   }
 
   &.warning {
-    background-color: var(--palette-status-warning-light, var(--c8y-palette-status-warning-light));
-    color: var(--palette-status-warning-dark, var(--c8y-palette-status-warning-dark));
-    --c8y-component-color-text-muted: var(--palette-status-warning, var(--c8y-palette-status-warning));
-    --c8y-component-border-color: rgba(black, 0.1);
+    .card-status-variant(var(--palette-status-warning-light, var(--c8y-palette-status-warning-light)),
+      var(--palette-status-warning-dark, var(--c8y-palette-status-warning-dark)),
+      var(--palette-status-warning, var(--c8y-palette-status-warning)));
   }
 
   &.success {
-    background-color: var(--palette-status-success-light, var(--c8y-palette-status-success-light));
-    color: var(--palette-status-success-dark, var(--c8y-palette-status-success-dark));
-    --c8y-component-color-text-muted: var(--palette-status-success, var(--c8y-palette-status-success));
-    --c8y-component-border-color: rgba(black, 0.1);
+    .card-status-variant(var(--palette-status-success-light, var(--c8y-palette-status-success-light)),
+      var(--palette-status-success-dark, var(--c8y-palette-status-success-dark)),
+      var(--palette-status-success, var(--c8y-palette-status-success)));
   }
 
   &.info {
-    background-color: var(--palette-status-info-light, var(--c8y-palette-status-info-light));
-    color: var(--palette-status-info-dark, var(--c8y-palette-status-info-dark));
-
-    --c8y-component-color-text-muted: var(--palette-status-info, var(--c8y-palette-status-info));
-    --c8y-component-border-color: rgba(black, 0.1);
+    .card-status-variant(var(--palette-status-info-light, var(--c8y-palette-status-info-light)),
+      var(--palette-status-info-dark, var(--c8y-palette-status-info-dark)),
+      var(--palette-status-info, var(--c8y-palette-status-info)));
   }
 
   &.brand {
-    background-color: var(--brand-primary, var(--c8y-brand-primary));
-    color: @palette-high;
-
-    --c8y-component-color-text-muted: @palette-high;
-    --c8y-component-border-color: rgba(black, 0.1);
+    .card-status-variant(var(--brand-primary, var(--c8y-brand-primary));
+      @palette-high;
+      @palette-high);
   }
 
   &.not-active {
@@ -114,7 +138,7 @@
 // tabs inside card
 .card-has-tabs {
   .nav.nav-tabs {
-    padding: 0 @margin-16 0;
+    padding: 0 @size-16 0;
 
     .nav-item {
       padding-top: 7px;
@@ -199,13 +223,13 @@
   .card-icon,
   .card-title {
     order: 0;
-    padding-right: @margin-base;
+    padding-right: @size-base;
   }
 
   .card-icon {
     margin-top: -6px;
     min-width: 30px;
-    max-height: 20px;
+    max-height: @size-20;
     font-size: 22px;
     line-height: @line-height-computed;
   }
@@ -214,7 +238,7 @@
   .card-title .statusContainer {
     .interact-list & {
       margin-top: 0;
-      max-height: 20px;
+      max-height: @size-20;
       font-size: 20px;
     }
   }
@@ -230,11 +254,11 @@
     overflow: hidden;
     margin: 0;
     padding: 0;
-    min-height: 20px;
+    min-height: @size-20;
     height: auto;
     text-overflow: ellipsis;
     font-weight: 500;
-    font-size: 18px;
+    font-size: @font-size-h4;
     line-height: @headings-line-height;
   }
 
@@ -244,14 +268,14 @@
 }
 
 .card-appicon {
-  padding: 24px 8px 0;
+  padding: @size-24 @size-8 0;
   height: 66px;
-  font-size: 36px;
+  font-size: @font-size-h1;
   line-height: 1;
 }
 
 .card-subtitle {
-  margin: 4px 0 0;
+  margin: @size-4 0 0;
   width: 100%;
   color: @component-color-text-muted;
   font-size: 110%;
@@ -272,14 +296,14 @@
     padding: 0 @component-padding;
 
     &:first-child {
-      padding-top: @margin-16;
+      padding-top: @size-16;
     }
   }
 
   // fix cropping svgs
   svg {
-    padding-top: 4px;
-    padding-bottom: 4px;
+    padding-top: @size-4;
+    padding-bottom: @size-4;
   }
 }
 
@@ -289,9 +313,9 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  padding: 0 4px 0 @margin-8;
+  padding: 0 @size-4 0 @size-8;
   width: 100%;
-  height: 4px;
+  height: @size-4;
 
   .card-header-title {
     display: none;
@@ -299,7 +323,7 @@
 
   .header-actions {
     margin-top: -6px;
-    margin-right: -20px;
+    margin-right: calc(-1 * @size-20);
 
     .optionsBtn:not(.open) {
       border-radius: 50%;
@@ -326,7 +350,7 @@
   }
 
   hr {
-    margin: @margin-base calc(@component-padding * -1);
+    margin: @size-base calc(@component-padding * -1);
   }
 
   .flex-row.row {
@@ -358,12 +382,12 @@
 
 .card-actions {
   position: absolute;
-  top: calc(@margin-base * 0.5);
+  top: calc(@size-base * 0.5);
   right: 0;
 
   &.collapsible {
     display: flex;
-    width: calc(@margin-base * 10);
+    width: calc(@size-base * 10);
   }
 
   > .dropdown {
@@ -378,9 +402,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: @margin-8 11.25px;
-    min-width: calc(@margin-base * 5);
-    min-height: calc(@margin-base * 5);
+    padding: @size-8 11.25px;
+    min-width: calc(@size-base * 5);
+    min-height: calc(@size-base * 5);
 
     > [class^='dlt-c8y-icon-'],
     > [class*=' dlt-c8y-icon-'] {
@@ -401,15 +425,7 @@
     }
   }
 
-  .btn-collapse.active {
-    background-color: transparent;
-    opacity: 1;
-
-    [class^='dlt-c8y-icon-'],
-    [class*=' dlt-c8y-icon-'] {
-      .rotate(180deg);
-    }
-  }
+  // Removed unused button selector - verified 0 usages: .btn-collapse
 
   .dropdown-toggle,
   .btn-link {
@@ -435,7 +451,7 @@
 }
 
 .card-actions-group {
-  padding: calc(@margin-base + 2px) @component-padding;
+  padding: calc(@size-base + 2px) @component-padding;
   text-align: center;
 
   &.separator {
@@ -452,7 +468,7 @@
     color: @component-color-actions;
     text-transform: uppercase;
     font-weight: bold;
-    font-size: 10px;
+    font-size: @font-size-xs;
     line-height: 1.5;
 
     .box-shadow(none);
@@ -465,7 +481,7 @@
     }
   }
 
-  .btn-xs {
+ .btn-xs {
     margin-top: 3px;
     margin-bottom: 3px;
   }
@@ -477,19 +493,18 @@
   align-items: center;
   justify-content: flex-start;
   padding: 0 0 0 @component-padding;
-  height: @margin-48;
+  height: @size-48;
 
   &:after {
     position: absolute;
-    top: calc(@margin-48 - 4px);
+    top: calc(@size-48 - @size-4);
     left: 0;
     z-index: 10;
     display: block;
     width: 100%;
-    height: 4px;
+    height: @size-4;
     content: '';
-
-    .shadow-scroll();
+    &:extend(.shadow-scroll);
   }
 
   // Removed unused scroll utility - verified 0 usages: .no-scroll
@@ -553,7 +568,7 @@
     align-items: center;
     align-self: stretch;
     padding: 0;
-    min-height: calc(@margin-base * 6);
+    min-height: calc(@size-base * 6);
     font-size: @font-size-small;
 
     > span {
@@ -567,11 +582,11 @@
     align-self: stretch;
     justify-content: center;
     margin-left: calc(@component-padding * -1);
-    width: calc(@margin-base * 6);
+    width: calc(@size-base * 6);
     text-align: center;
 
     + .card-title {
-      padding: 0 calc(@margin-base * 2) 0 0;
+      padding: 0 calc(@size-base * 2) 0 0;
     }
   }
 
@@ -580,7 +595,7 @@
     margin-left: auto;
 
     .btn-link {
-      min-width: calc(@margin-base * 5);
+      min-width: calc(@size-base * 5);
       color: @component-color-actions;
 
       &:hover {
@@ -601,10 +616,10 @@
     }
 
     .optionsBtn {
-      margin-right: @margin-4;
+      margin-right: @size-4;
     }
     .btn-icon {
-      min-width: calc(@margin-base * 5);
+      min-width: calc(@size-base * 5);
       color: @component-color-actions;
       text-align: center;
       .optionsBtn &{
@@ -634,7 +649,7 @@
       right: 0;
       left: 0;
       z-index: 10;
-      height: 4px;
+      height: @size-4;
       background-color: @component-background-default;
       content: '';
     }
@@ -642,7 +657,7 @@
 }
 
 .card-navbar {
-  padding: 4px @component-padding;
+  padding: @size-4 @component-padding;
 }
 
 .card-select {
@@ -697,8 +712,8 @@ c8y-device-request-card {
   height: 60px;
   overflow: hidden;
   position: absolute;
-  top: -4px;
-  left: -4px;
+  top: calc(-1 * @size-4);
+  left: calc(-1 * @size-4);
 
   &::before,
   &::after {
@@ -726,16 +741,16 @@ c8y-device-request-card {
     position: absolute;
     display: block;
     width: 90px;
-    padding: 2px 16px;
+    padding: 2px @size-16;
     background: @gray-40;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
     color: @palette-high;
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
     text-align: center;
-    right: -10px;
+    right: calc(-1 * @size-10);
     top: 17px;
     transform: rotate(-45deg);
-    font-size: @margin-base;
+    font-size: @size-base;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;

package/styles/components/navigation-and-layout/cards/_panels.less

@@ -1,5 +1,28 @@
+
+@import "../../../mixins/_border-radius.less";
+@import "../../../mixins/_clearfix.less";
+@import "../../../mixins/_panels.less";
+@import "../../../mixins/_vendor-prefixes.less";
+
+/**
+ * Panels - Panel component (Bootstrap 3 legacy component)
+ *
+ * Note: Uses @size-* tokens for spacing; @font-size-* tokens for typography, and panel component variables.
+ *
+ * Intentionally hardcoded values:
+ * - Off-token spacing (15px): Legacy padding not in token system
+ * - Border widths (1px, 2px): Standard borders and outlines
+ * - Negative offsets (-1px, -2px): Fine-tuning
+ * - Percentages (100%): Layout
+ * - Line-height values (1, 1.1): Unitless ratios
+ * - Opacity values: Visual states
+ * - Transition durations (0.2s, 0.35s): Animation timing
+ * - Box-shadow values: Elevation effects
+ * - RGBA values: Transparency
+ */
+
 .panel {
-  margin-bottom: calc(@margin-base * 2);
+  margin-bottom: @size-16;
   border: @panel-border-width solid transparent;
   border-radius: @panel-border-radius;
 
@@ -8,7 +31,7 @@
 
 // Panel contents
 .panel-body {
-  &:extend(.clearfix all);
+   .clearfix();
 }
 
 // Optional heading
@@ -17,9 +40,8 @@
   padding: 0;
   width: 100%;
   border-bottom: 1px solid @panel-border-color;
-  font-size: 12px;
+  font-size: @font-size-small;
   font-family: @font-family-headings-css-var;
-
   .border-top-radius((@panel-border-radius - 1px));
   .btn[btn-checkbox] {
     margin: 0;
@@ -49,7 +71,6 @@
   padding: @panel-footer-padding;
   border-top: 1px solid @panel-inner-border;
   background-color: @panel-footer-bg;
-
   .border-bottom-radius((@panel-border-radius - 1px));
 }
 
@@ -67,14 +88,12 @@
     &:first-child {
       .list-group-item:first-child {
         border-top: 0;
-
         .border-top-radius((@panel-border-radius - 1px));
       }
     } // Add border bottom radius for last one
     &:last-child {
       .list-group-item:last-child {
         border-bottom: 0;
-
         .border-bottom-radius((@panel-border-radius - 1px));
       }
     }
@@ -233,10 +252,10 @@
   .panel-heading,
   .panel-body,
   .panel-filters {
-    padding: 10px 15px;
+    padding: @size-10 15px;
   }
   .panel-heading > .btn-link {
-    margin-top: -10px !important;
+    margin-top: calc(-1 * @size-10) !important;
   }
 }
 
@@ -248,12 +267,12 @@
     box-shadow: none;
   }
   .panel-heading {
-    margin-bottom: 24px;
-    padding-bottom: 8px;
+    margin-bottom: @size-24;
+    padding-bottom: @size-8;
     [class^='dlt-c8y-icon-'],
     [class*=' dlt-c8y-icon-'] {
       color: var(--brand-primary, var(--c8y-brand-primary));
-      font-size: 16px;
+      font-size: @size-16;
     }
   }
 }
@@ -302,8 +321,8 @@
       left: calc(@panel-heading-height / 2);
       margin-top: -5px;
       margin-left: -2px;
-      width: 4px;
-      height: 10px;
+      width: @size-4;
+      height: @size-10;
       content: '';
     }
     > span,
@@ -311,7 +330,7 @@
       display: inline-block;
       overflow: hidden;
       margin-right: auto;
-      padding-top: 4px;
+      padding-top: @size-4;
       padding-right: 45px;
       padding-left: 0;
       vertical-align: middle;
@@ -404,7 +423,6 @@
 
 .panel.panel-icon {
   background-color: @component-background-default;
-
   .box-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
   > .panel-heading {
     display: flex;
@@ -419,11 +437,11 @@
       align-self: stretch;
       order: 1;
       margin-right: auto;
-      padding-top: 4px;
+      padding-top: @size-4;
       text-transform: uppercase;
       [class^='dlt-c8y-icon-'],
       [class*=' dlt-c8y-icon-'] {
-        margin-right: 10px !important;
+        margin-right: @size-10 !important;
       }
     }
     &.critical {
@@ -469,7 +487,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-top: -4px;
+      margin-top: calc(-1 * @size-4);
       margin-right: auto;
       width: @panel-heading-height;
       height: @panel-heading-height;
@@ -489,7 +507,7 @@
   .panel-body.text-muted {
     padding: 0 @panel-body-padding;
     > .text-muted {
-      padding: 10px 0;
+      padding: @size-10 0;
     }
   }
 }

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

@@ -1,46 +1,30 @@
+
+@import "../../../mixins/_shadows-helper.less";
+
+/**
+ * Breadcrumbs - Navigation breadcrumb trail component
+ *
+ * Note: Uses @size-* tokens where applicable and @breadcrumb-* variables for colors.
+ *
+ * Intentionally hardcoded values:
+ * - Percentages (100%): Layout
+ * - Opacity values: Visual effects
+ */
+
 .breadcrumbs-container {
   display: block;
   overflow: visible;
   color: @breadcrumb-text-color;
   font-size: @breadcrumbs-font-size;
+  
   .breadcrumbs.text-muted {
     color: inherit;
   }
   .text-muted {
     opacity: 1 !important;
   }
-  &.multiple {
-    position: relative;
-    padding-left: 14px;
-    .breadcrumbs {
-      width: 100%;
-    }
-
-    &.open {
-      margin-left: -5px;
-      padding-left: 19px;
-      background-color: @breadcrumb-background-default;
-
-      .boxShadowHelper(md, left);
-    }
-  }
-
-  li {
-    display: inline-block;
-    > a {
-      color: @breadcrumb-text-color-hover;
-    }
-
-    > span {
-      display: inline-block;
-      min-width: 14px;
-      text-align: center;
-    }
-  }
-  ul {
-    margin: 0;
-  }
 }
+
 .breadcrumbs {
   overflow: hidden;
   margin: 0 !important;
@@ -50,20 +34,18 @@
   display: flex;
   align-items: center;
   > li {
-    .text-truncate();
-    display: inline-flex!important;
+    overflow: hidden;
+    max-width: 100%;
+    text-overflow: ellipsis ;
+    white-space: nowrap;
+    display: inline-flex;
     align-items: center;
 
-    &:last-child {
-      > a {
-        color: @breadcrumb-text-color-hover;
-      }
-    }
     > a, > span {
       text-overflow: ellipsis;
       overflow: hidden;
       display: inline-block;
-      min-width: 14px;
+      min-width: @font-size-base;
       vertical-align: top;
       text-align: center;
     }