@c8y/style 1023.14.33 → 1023.14.37

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

@@ -229,9 +229,7 @@
 // Contextual variations
 .panel-default,
 .panel-clean {
-  .panel-variant(
-    @panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border
-  );
+  .panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
   .panel-heading,
   .panel-body,
   .panel-filters {
@@ -254,22 +252,18 @@
     padding-bottom: 8px;
     [class^='dlt-c8y-icon-'],
     [class*=' dlt-c8y-icon-'] {
-      color: @brand-primary;
+      color: var(--brand-primary, var(--c8y-brand-primary));
       font-size: 16px;
     }
   }
 }
 
 .panel-primary {
-  .panel-variant(
-    @panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border
-  );
+  .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
 }
 
 .panel-success {
-  .panel-variant(
-    @panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border
-  );
+  .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
 }
 
 .panel-info {
@@ -277,15 +271,11 @@
 }
 
 .panel-warning {
-  .panel-variant(
-    @panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border
-  );
+  .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
 }
 
 .panel-danger {
-  .panel-variant(
-    @panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border
-  );
+  .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
 }
 
 .panel.panel-dashboard {
@@ -344,7 +334,7 @@
         text-align: center;
         line-height: 1;
         &:hover {
-          color: @brand-primary;
+          color: var(--brand-primary, var(--c8y-brand-primary));
         }
       }
     }
@@ -437,28 +427,28 @@
       }
     }
     &.critical {
-      background-color: @status-danger;
+      background-color: var(--palette-status-danger, var(--c8y-palette-status-danger));
       color: @component-background-default;
       .btn-link {
         color: @component-background-default;
       }
     }
     &.major {
-      background-color: @status-warning-dark;
+      background-color: var(--palette-status-warning-dark, var(--c8y-palette-status-warning-dark));
       color: @component-background-default;
       .btn-link {
         color: @component-background-default;
       }
     }
     &.minor {
-      background-color: @status-warning;
+      background-color: var(--palette-status-warning, var(--c8y-palette-status-warning));
       color: @component-background-default;
       .btn-link {
         color: @component-background-default;
       }
     }
     &.warning {
-      background-color: @status-info;
+      background-color: var(--palette-status-info, var(--c8y-palette-status-info));
       color: @component-background-default;
       .btn-link {
         color: @component-background-default;

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

@@ -0,0 +1,514 @@
+@use "../../../../variables/index" as *;
+
+@use "../../../mixins/border-radius";
+@use "../../../mixins/clearfix";
+@use "../../../mixins/panels";
+@use "../../../mixins/vendor-prefixes";
+
+/**
+ * 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: $size-16;
+  border: $panel-border-width solid transparent;
+  border-radius: $panel-border-radius;
+
+  @include vendor-prefixes.box-shadow(0 0 1px rgba(0, 0, 0, 0.2));
+}
+
+// Panel contents
+.panel-body {
+   @include clearfix.clearfix();
+}
+
+// Optional heading
+.panel-heading {
+  position: relative;
+  padding: 0;
+  width: 100%;
+  border-bottom: 1px solid $panel-border-color;
+  font-size: $font-size-small;
+  font-family: $font-family-headings-css-var;
+  @include border-radius.border-top-radius(($panel-border-radius - 1px));
+  .btn[btn-checkbox] {
+    margin: 0;
+  } // reset form controls font size
+  .form-control {
+    font-weight: normal;
+    font-size: inherit;
+  }
+}
+
+// strip sizing and margins from any .panel-title
+.panel-title {
+  margin: 0;
+  font-weight: inherit;
+  font-size: inherit;
+  > a,
+  > small,
+  > .small,
+  > small > a,
+  > .small > a {
+    color: inherit;
+  }
+}
+
+// Optional footer (stays gray in every modifier class)
+.panel-footer {
+  padding: $panel-footer-padding;
+  border-top: 1px solid $panel-inner-border;
+  background-color: $panel-footer-bg;
+  @include border-radius.border-bottom-radius(($panel-border-radius - 1px));
+}
+
+// List groups in panels
+// By default, space out list group content from panel headings to account for
+// any kind of custom content between the two.
+.panel {
+  > .list-group,
+  > .panel-collapse > .list-group {
+    margin-bottom: 0;
+    .list-group-item {
+      border-width: 1px 0;
+      border-radius: 0;
+    } // Add border top radius for first one
+    &:first-child {
+      .list-group-item:first-child {
+        border-top: 0;
+        @include border-radius.border-top-radius(($panel-border-radius - 1px));
+      }
+    } // Add border bottom radius for last one
+    &:last-child {
+      .list-group-item:last-child {
+        border-bottom: 0;
+        @include border-radius.border-bottom-radius(($panel-border-radius - 1px));
+      }
+    }
+  }
+  > .panel-heading + .panel-collapse > .list-group {
+    .list-group-item:first-child {
+      @include border-radius.border-top-radius(0);
+    }
+  }
+}
+
+// Collapse space between when there's no additional content.
+.panel-heading + .list-group {
+  .list-group-item:first-child {
+    border-top-width: 0;
+  }
+}
+
+.list-group + .panel-footer {
+  border-top-width: 0;
+}
+
+// Tables in panels
+// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
+// watch it go full width.
+.panel {
+  > .table,
+  > .table-responsive > .table,
+  > .panel-collapse > .table {
+    margin-bottom: 0;
+    caption {
+      padding-right: $panel-body-padding;
+      padding-left: $panel-body-padding;
+    }
+  } // Add border top radius for first one
+  > .table:first-child,
+  > .table-responsive:first-child > .table:first-child {
+    @include border-radius.border-top-radius(($panel-border-radius - 1px));
+    > thead:first-child,
+    > tbody:first-child {
+      > tr:first-child {
+        border-top-left-radius: ($panel-border-radius - 1px);
+        border-top-right-radius: ($panel-border-radius - 1px);
+        td:first-child,
+        th:first-child {
+          border-top-left-radius: ($panel-border-radius - 1px);
+        }
+        td:last-child,
+        th:last-child {
+          border-top-right-radius: ($panel-border-radius - 1px);
+        }
+      }
+    }
+  } // Add border bottom radius for last one
+  > .table:last-child,
+  > .table-responsive:last-child > .table:last-child {
+    @include border-radius.border-bottom-radius(($panel-border-radius - 1px));
+    > tbody:last-child,
+    > tfoot:last-child {
+      > tr:last-child {
+        border-bottom-right-radius: ($panel-border-radius - 1px);
+        border-bottom-left-radius: ($panel-border-radius - 1px);
+        td:first-child,
+        th:first-child {
+          border-bottom-left-radius: ($panel-border-radius - 1px);
+        }
+        td:last-child,
+        th:last-child {
+          border-bottom-right-radius: ($panel-border-radius - 1px);
+        }
+      }
+    }
+  }
+  > .panel-body + .table,
+  > .panel-body + .table-responsive,
+  > .table + .panel-body,
+  > .table-responsive + .panel-body {
+    border-top: 1px solid $component-border-color;
+  }
+  > .table > tbody:first-child > tr:first-child th,
+  > .table > tbody:first-child > tr:first-child td {
+    border-top: 0;
+  }
+  > .table-bordered,
+  > .table-responsive > .table-bordered {
+    border: 0;
+    > thead,
+    > tbody,
+    > tfoot {
+      > tr {
+        > th:first-child,
+        > td:first-child {
+          border-left: 0;
+        }
+        > th:last-child,
+        > td:last-child {
+          border-right: 0;
+        }
+      }
+    }
+    > thead,
+    > tbody {
+      > tr:first-child {
+        > td,
+        > th {
+          border-bottom: 0;
+        }
+      }
+    }
+    > tbody,
+    > tfoot {
+      > tr:last-child {
+        > td,
+        > th {
+          border-bottom: 0;
+        }
+      }
+    }
+  }
+  > .table-responsive {
+    margin-bottom: 0;
+    border: 0;
+  }
+}
+
+// Collapsable panels (aka, accordion)
+// Wrap a series of panels in `.panel-group` to turn them into an accordion with the help of our collapse JavaScript plugin.
+.panel-group {
+  margin-bottom: $line-height-computed;
+  .panel {
+    margin-bottom: 0;
+    border-radius: $panel-border-radius;
+    + .panel {
+      margin-top: 5px;
+    }
+  }
+  .panel-heading {
+    border-bottom: 0;
+    + .panel-collapse > .panel-body,
+    + .panel-collapse > .list-group {
+      border-top: 1px solid $panel-inner-border;
+    }
+  }
+  .panel-footer {
+    border-top: 0;
+    + .panel-collapse .panel-body {
+      border-bottom: 1px solid $panel-inner-border;
+    }
+  }
+}
+
+// Contextual variations
+.panel-default,
+.panel-clean {
+  @include panels.panel-variant($panel-default-border, $panel-default-text, $panel-default-heading-bg, $panel-default-border);
+  .panel-heading,
+  .panel-body,
+  .panel-filters {
+    padding: $size-10 15px;
+  }
+  .panel-heading > .btn-link {
+    margin-top: calc(-1 * $size-10) !important;
+  }
+}
+
+.panel-clean {
+  &.panel {
+    margin-right: 0;
+    margin-left: 0;
+    background-color: transparent;
+    box-shadow: none;
+  }
+  .panel-heading {
+    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: $size-16;
+    }
+  }
+}
+
+.panel-primary {
+  @include panels.panel-variant($panel-primary-border, $panel-primary-text, $panel-primary-heading-bg, $panel-primary-border);
+}
+
+.panel-success {
+  @include panels.panel-variant($panel-success-border, $panel-success-text, $panel-success-heading-bg, $panel-success-border);
+}
+
+.panel-info {
+  @include panels.panel-variant($panel-info-border, $panel-info-text, $panel-info-heading-bg, $panel-info-border);
+}
+
+.panel-warning {
+  @include panels.panel-variant($panel-warning-border, $panel-warning-text, $panel-warning-heading-bg, $panel-warning-border);
+}
+
+.panel-danger {
+  @include panels.panel-variant($panel-danger-border, $panel-danger-text, $panel-danger-heading-bg, $panel-danger-border);
+}
+
+.panel.panel-dashboard {
+  right: calc($grid-gutter-width / 2);
+  bottom: 0;
+  left: calc($grid-gutter-width / 2);
+  overflow: inherit;
+  margin-bottom: calc($grid-gutter-width / 2);
+  background-color: $panel-bg;
+  + .ui-resizable-handle {
+    right: 22px !important;
+    bottom: 15px !important;
+  }
+  > .panel-heading {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding-left: 15px;
+    height: $panel-heading-height;
+
+    &::after {
+      position: absolute;
+      top: 50%;
+      left: calc($panel-heading-height / 2);
+      margin-top: -5px;
+      margin-left: -2px;
+      width: $size-4;
+      height: $size-10;
+      content: '';
+    }
+    > span,
+    > .panel-title {
+      display: inline-block;
+      overflow: hidden;
+      margin-right: auto;
+      padding-top: $size-4;
+      padding-right: 45px;
+      padding-left: 0;
+      vertical-align: middle;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .optionsBtn {
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: flex;
+      align-items: center;
+      width: $panel-heading-height;
+      height: $panel-heading-height;
+      border-left: 1px solid $panel-border-color;
+      font-size: 14px;
+      .btnIcon {
+        width: 100%;
+        color: $gray-50;
+        text-align: center;
+        line-height: 1;
+        &:hover {
+          color: var(--brand-primary, var(--c8y-brand-primary));
+        }
+      }
+    }
+    .btn-link {
+      order: 30;
+    }
+
+    + .fixed-header {
+      position: relative;
+      z-index: 2;
+      overflow: hidden;
+      background-color: $component-background-default;
+      table {
+        margin-bottom: 0;
+      }
+    }
+    + .panel-body,
+    + .fixed-header + .panel-body {
+      position: absolute;
+      top: $panel-heading-height;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      overflow: auto;
+      padding: 0;
+      > .lead,
+      .panel-filters {
+        padding: $panel-body-padding;
+      }
+    }
+    + .panel-body,
+    + .fixed-header + .panel-body,
+    + .fixed-header {
+      .table {
+        h1,
+        h2,
+        h3,
+        h4 {
+          margin: 15px 0 0;
+        }
+        tr {
+          td:first-child,
+          th:first-child {
+            padding-left: 15px;
+          }
+          td:last-child,
+          th:last-child {
+            padding-right: 15px;
+          }
+        }
+        tbody tr:first-child td {
+          border-top: 0;
+        }
+      }
+    }
+  }
+}
+
+.panel.panel-dashboard > .panel-heading + .fixed-header + .panel-body {
+  // add margin on top of panel-body when fixed heade table exists for proper scroll bar position
+  top: 82px;
+  .table {
+    // hide scrollable table header
+    margin-top: -42px;
+  }
+}
+
+.panel.panel-icon {
+  background-color: $component-background-default;
+  @include vendor-prefixes.box-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
+  > .panel-heading {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding-right: 15px;
+    height: $panel-heading-height;
+    span,
+    [ng-show='title'] {
+      display: flex;
+      align-items: center;
+      align-self: stretch;
+      order: 1;
+      margin-right: auto;
+      padding-top: $size-4;
+      text-transform: uppercase;
+      [class^='dlt-c8y-icon-'],
+      [class*=' dlt-c8y-icon-'] {
+        margin-right: $size-10 !important;
+      }
+    }
+    &.critical {
+      background-color: var(--palette-status-danger, var(--c8y-palette-status-danger));
+      color: $component-background-default;
+      .btn-link {
+        color: $component-background-default;
+      }
+    }
+    &.major {
+      background-color: var(--palette-status-warning-dark, var(--c8y-palette-status-warning-dark));
+      color: $component-background-default;
+      .btn-link {
+        color: $component-background-default;
+      }
+    }
+    &.minor {
+      background-color: var(--palette-status-warning, var(--c8y-palette-status-warning));
+      color: $component-background-default;
+      .btn-link {
+        color: $component-background-default;
+      }
+    }
+    &.warning {
+      background-color: var(--palette-status-info, var(--c8y-palette-status-info));
+      color: $component-background-default;
+      .btn-link {
+        color: $component-background-default;
+      }
+    }
+    .pull-right span {
+      display: inline;
+      .btn-link {
+        color: $component-background-default;
+      }
+    }
+    > [class^='dlt-c8y-icon-'],
+    > [class*=' dlt-c8y-icon-'],
+    span [class^='dlt-c8y-icon-'],
+    span [class*=' dlt-c8y-icon-'],
+    [ng-show='title'] [class^='dlt-c8y-icon-'],
+    [ng-show='title'] [class*=' dlt-c8y-icon-'] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: calc(-1 * $size-4);
+      margin-right: auto;
+      width: $panel-heading-height;
+      height: $panel-heading-height;
+    }
+    .btn-link {
+      color: $navlink-color-default;
+      text-transform: none;
+      font-size: inherit;
+    }
+    .btn {
+      font-size: inherit;
+    }
+    .pull-right {
+      order: 1000;
+    }
+  }
+  .panel-body.text-muted {
+    padding: 0 $panel-body-padding;
+    > .text-muted {
+      padding: $size-10 0;
+    }
+  }
+}

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

@@ -0,0 +1,82 @@
+.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;
+  padding: 0 !important;
+  list-style: none;
+  font-size: @breadcrumbs-font-size;
+  display: flex;
+  align-items: center;
+
+  >li {
+    .text-truncate();
+    display: inline-flex !important;
+    align-items: center;
+
+    &:last-child {
+      >a {
+        color: @breadcrumb-text-color-hover;
+      }
+    }
+
+    >a,
+    >span {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      max-width: 150px;
+      display: inline-block;
+      min-width: 14px;
+      vertical-align: top;
+      text-align: center;
+    }
+  }
+}