@c8y/style 1023.14.33 → 1023.14.36

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

@@ -0,0 +1,454 @@
+@use "../../../../variables/index" as *;
+
+@use "../../../mixins/color-mixins";
+@use "../../../mixins/gradients";
+@use "../../../mixins/shadows-helper";
+@use "../../../mixins/vendor-prefixes";
+
+// mixin to apply a vertical gradient in navigator
+@mixin checkVerticalGradient($color1, $color2) {
+  @if $color1 != '' {
+    @include gradients.gradient-vertical($start-color: $color1, $end-color: $color2);
+  }
+}
+
+.navigator {
+  position: fixed;
+  z-index: ($zindex-navbar-fixed + 1);
+  top: 0;
+  bottom: 0;
+  left: calc(($navigatorWidth--sm + 10px) * -1);
+  width: $navigatorWidth--sm;
+  padding-top: 0;
+  color: $navigator-text-color;
+  background: $navColor;
+  font-family: $navigator-font-family;
+  display: flex;
+  flex-flow: column nowrap;
+  @include vendor-prefixes.transition(left $open-menu-time-type);
+  @include checkVerticalGradient($grad-top, $grad-bottom);
+  
+  @media (min-width: $screen-sm-min) {
+    left: calc(($navigatorWidth + 10px) * -1);
+    width: $navigatorWidth;
+  }
+
+  &.open {
+    left: 0;
+    box-shadow: var(--c8y-elevation-md-right);
+
+    @media (min-width: $grid-float-breakpoint) {
+      border-right: 1px solid $navigator-separator-color;
+      box-shadow: none;
+    }
+  }
+
+  &.minheight {
+    height: $headerHeight;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  // Note: LESS guard removed - was: when ($appLogo =deprecated)
+  .tenant-brand {
+    display: block;
+
+    background-size: contain;
+    background-position: center top;
+    background-repeat: no-repeat;
+    margin: 0 auto;
+    width: 208px;
+
+    // Note: LESS guard removed - was: & when not($extending)
+    background-image: $navigator-platform-logo;
+    padding-bottom: $navigator-platform-logo-height;
+  }
+  .c8y-logo {
+    .tenant-brand{
+      width: 136px;
+      padding-bottom: $navigator-platform-logo-height-fallback;
+      margin-bottom: 0;
+    }
+  }
+}
+
+.navigator .title {
+  position: relative;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  gap: $size-8;
+  margin: 0;
+  padding: $navigator-app-name-size $size-16;
+  font-size: $navigator-app-name-size;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  line-height: 1;
+  color: $navigator-header-color;
+  text-wrap: pretty;
+  background-color: $navColorHeader;
+  flex: 0 0 auto;
+  text-transform: uppercase;
+  min-height: 108px;
+  border-bottom: 1px solid $navigator-separator-color;
+
+
+  &:after {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 10;
+    display: block;
+    width: 100%;
+    height: 4px;
+    content: '';
+    background-color: $navColorHeader;
+    @extend .shadow-scroll !optional;
+  }
+  .c8y-app-icon{
+    display: contents;
+  }
+  .c8y-icon + span,
+  .app-noicon + span {
+    display: block;
+  }
+
+  .c8y-icon {
+    font-size: $navigator-app-logo-size;
+
+    &::before {
+      color: var(--navigator-dark-icon, currentColor);
+    }
+
+    &::after {
+      color: var(--navigator-light-icon, $icon-dark-color-light);
+    }
+  }
+
+  .app-noicon {
+    width: calc($size-base * 6);
+    height: calc($size-base * 6);
+    line-height: calc($size-base * 6);
+    border: 1px solid $palette-high;
+    display: block;
+    margin: 0;
+  }
+
+  /* Legacy support for $appLogo */
+  // Note: The following code was conditionally applied in LESS with guards.
+  // In SCSS, we cannot replicate LESS guards, so this legacy code is commented out.
+  // If you need to hide the app logo or use legacy @appLogo variables,
+  // you should override these styles in your custom branding CSS.
+  //
+  // Original LESS conditions were:
+  // - & when not(@appBranding='')
+  // - & when (not(@appLogo-height =deprecated)) and (not(@appLogo-height ='')) and (not(@appLogo =deprecated)) and (not(@appLogo =''))
+  //
+  // To enable legacy app logo behavior, add this to your custom CSS:
+  // .navigator .title {
+  //   text-indent: -1000px;
+  //   overflow: hidden;
+  //   height: 0;
+  //   min-height: 0;
+  //   background-image: var(--navigator-platform-logo, var(--c8y-navigator-platform-logo));
+  //   padding-top: deprecated;
+  //   padding-bottom: 0;
+  //   background-size: contain;
+  //   background-position: center 5px;
+  //   background-repeat: no-repeat;
+  //   line-height: 2.85;
+  // }
+  // .navigator .title .c8y-icon,
+  // .navigator .title .app-noicon {
+  //   display: none !important;
+  // }
+  // .navigator .title span {
+  //   display: block;
+  // }
+  // .navigator .title br {
+  //   display: none;
+  // }
+}
+
+// Navigator content
+.navigatorContent {
+  position: relative;
+  overflow-y: auto;
+  overflow-x: hidden;
+  margin: 4px 0 0 0;
+  padding: 4px 0 0 0;
+  list-style: none;
+  max-height: 100%;
+  background-color: $navigator-background-default;
+
+  &:before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 1001;
+    height: 4px;
+    background-color: $navColor;
+    content: '';
+  }
+
+  .expander {
+    margin-left: auto;
+    transition: transform 0.25s ease;
+    width: 24px;
+    text-align: center;
+    line-height: 30px;
+    flex-shrink: 0;
+    margin-right: 0;
+    font-size: 16px;
+  }
+
+  .dragged {
+    opacity: 1;
+  }
+
+  .link {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    border-left: $navigator-active-border-width solid transparent;
+    font-size: $navigator-font-size;
+    color: $navigator-text-color;
+
+    .btn-clean {
+      cursor: pointer;
+      text-decoration: none;
+      position: relative;
+      transition: background 0.2s ease;
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      flex-grow: 1;
+      min-height: 40px;
+      background-color: transparent;
+      padding: 8px 16px;
+      min-width: 0;
+      color: inherit;
+
+      > div {
+        flex-shrink: 0;
+      }
+
+      > span,
+      > div {
+        display: block;
+        overflow: hidden !important;
+        max-width: 100% !important;
+        text-overflow: ellipsis !important;
+        white-space: nowrap !important;
+        background-color: transparent;
+      }
+
+      &.open {
+        .expander {
+          @include vendor-prefixes.rotate(180deg);
+        }
+      }
+    }
+
+    c8y-navigator-icon,
+    device-status {
+      padding: 0 0 0 16px;
+      margin-right: 16px;
+      flex-grow: 0;
+      + .btn-clean {
+        padding-left: 0;
+      }
+    }
+
+    .btn-clean:active {
+      background-color: $navigator-background-active;
+    }
+
+    &:hover,
+    &:focus-within {
+      outline: 0;
+      background-color: $navigator-background-selected;
+      color: $navigator-text-color-selected;
+      .btn-clean,
+      .btn-link {
+        background-color: transparent;
+        outline: 0 !important;
+      }
+    }
+
+    &.active {
+      color: $navigator-text-color-selected;
+      background: $navigator-background-selected;
+      border-left-color: $navigator-border-selected;
+      font-weight: 500;
+    }
+
+    &.dragged-hover {
+      @include color-mixins.lighten($navigator-background-selected, 0.2);
+      outline: 2px dashed $navigator-border-selected;
+      outline-offset: -2px;
+      * {
+        pointer-events: none;
+      }
+    }
+
+    &.open {
+      box-shadow: inset 0 1px 0 $navigator-separator-color,
+        inset 0 -1px 0 $navigator-separator-color;
+    }
+
+    &.open.active {
+      @include shadows-helper.shadow-border(1px,rgba(0, 0, 0, 0.2));
+      background: $navigator-background-selected;
+    }
+
+    &.parent.open:not(.active) {
+      @include shadows-helper.shadow-border(1px, $navigator-separator-color);
+
+      ~ .children {
+        @include shadows-helper.shadow-border(-1px, $navigator-separator-color);
+      }
+    }
+  }
+
+  .icon {
+    font-size: calc(var(--c8y-navigator-font-size) * 1.428571428571429);
+  }
+
+  .root-link {
+    font-size: calc(var(--c8y-navigator-font-size) * 1.1428571429);
+    padding: 8px 16px;
+    .icon {
+      font-size: calc(var(--c8y-navigator-font-size) * 1.5);
+    }
+  }
+
+  .children {
+    transition: all 0.35s ease;
+
+    .link {
+      padding-left: calc($size-16 * 1);
+    }
+
+    .children {
+      .link {
+        padding-left: calc($size-16 * 1 + $size-base);
+      }
+
+      .children {
+        .link {
+          padding-left: calc($size-16 * 1 + $size-base * 2);
+        }
+
+        .children {
+          .link {
+            padding-left: calc($size-16 * 1 + $size-base * 3);
+          }
+
+          .children {
+            .link {
+              padding-left: calc($size-16 * 1 + $size-base * 4);
+            }
+
+            .children {
+              .link {
+                padding-left: calc($size-16 * 1 + $size-base * 5);
+              }
+
+              .children {
+                .link {
+                  padding-left: calc($size-16 * 1 + $size-base * 6);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .slot {
+    position: relative;
+
+    .loadingIndicator {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      margin-top: -8px;
+      opacity: 0.3;
+    }
+
+    c8y-device-status-display {
+      height: $size-16;
+    }
+
+    .statusContainer {
+      font-size: 14px;
+      overflow: hidden;
+      height: 20px;
+      width: 20px;
+      border-radius: 50%;
+      border: 0;
+      background-image: none;
+      background-color: $palette-high;
+      padding: 1px 2px;
+    }
+
+    .disabled {
+      pointer-events: none;
+    }
+    // remove the background color from the active nodes which have an active child
+    &:has(.children.collapse.in .link.active) > .link.active {
+      background: transparent;
+    }
+  
+  }
+
+  .icon {
+    display: inline-block;
+    margin-right: 0;
+    text-align: center;
+  }
+
+  .empty,
+  .showMore {
+    font-size: 0.93em;
+    opacity: 0.6;
+    font-style: italic;
+  }
+
+  .link.empty:hover {
+    background-color: transparent;
+    opacity: 0.8;
+  }
+}
+
+.navigator-slot-bottom {
+  position: sticky;
+  bottom: 0;
+  width: 100%;
+  font-size: 11px;
+  background: $navColor;
+  margin-top: auto;
+  order: 10;
+  border-top: 1px solid $navigator-separator-color;
+  padding: 0 $size-16;
+  a{
+    color: currentColor;
+  }
+  &:has(.c8y-logo) {
+    padding: $size-8 $size-16;
+  }
+  &:has(.logo-spacer) {
+    display: flex;
+    flex-direction: column;
+    gap: $size-8;
+
+  }
+  p {
+    text-align: center;
+    opacity: 0.8;
+    align-self: flex-end;
+  }
+}

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

@@ -0,0 +1,118 @@
+@use "../../../../variables/index" as *;
+
+/**
+ * Navs - Base navigation component (Bootstrap 3 legacy)
+ *
+ * Note: Uses $navlink-* variables for colors and padding, component tokens for styling.
+ *
+ * Intentionally hardcoded values:
+ * - Border widths (2px): Standard borders and outlines
+ * - Negative offsets (-2px): Fine-tuning
+ * - Percentages (100%): Layout
+ * - Opacity values: Visual states
+ */
+
+.nav {
+  margin-bottom: 0;
+  padding-left: 0; // Override default ul/ol
+  list-style: none;
+
+  > li {
+    position: relative;
+    display: block;
+    > a {
+      position: relative;
+      display: block;
+      padding: $navlink-padding;
+      color: $navlink-color-default;
+      &:hover,
+      &:focus {
+        background-color: $navlink-background-hover;
+        color: $navlink-color-hover;
+        text-decoration: none;
+      }
+      &:focus {
+        outline: 2px solid $component-color-focus;
+        outline-offset: -2px;
+        border-radius: $component-border-radius-focus;
+      }
+    }
+    &.disabled > a {
+      opacity: $component-disabled-opacity;
+      &:hover,
+      &:focus {
+        cursor: $cursor-disabled;
+      }
+    }
+  } // Open dropdowns
+  .open > a {
+    &,
+    &:hover,
+    &:focus {
+      background-color: $navlink-background-hover;
+    }
+  }
+}
+
+// Pills
+.nav-pills {
+  > li {
+    float: left;
+    // Links rendered as pills
+    > a {
+      margin: 0;
+      padding: $nav-pills-padding;
+      border-radius: $nav-pills-border-radius;
+    }
+    + li {
+      margin-left: 2px;
+    }
+    // Active state
+    &.active > a {
+      &,
+      &:hover,
+      &:focus {
+        background-color: $nav-pills-background-active;
+        color: $nav-pills-color-active;
+      }
+    }
+    &:focus {
+      outline: 2px solid $component-color-focus;
+      outline-offset: -2px;
+      border-radius: $component-border-radius-focus;
+    }
+  }
+}
+
+// Stacked pills
+.nav-stacked {
+  > li {
+    float: none;
+    + li {
+      margin-top: 2px;
+      margin-left: 0;
+    }
+  }
+}
+
+.nav-justified {
+  width: 100%;
+  > li {
+    float: none;
+    flex: 1 1 auto;
+    > a {
+      text-align: center;
+    }
+  }
+  > .dropdown .dropdown-menu {
+    top: auto;
+    left: auto;
+  }
+  @media (min-width: $screen-sm-min) {
+    > li {
+      > a {
+        margin-bottom: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,148 @@
+@use "../../../../variables/index" as *;
+
+@use "../../../../variables/dlt-c8y-icons-vars";
+@use "../../../mixins/icon-base";
+@use "../../../mixins/pagination";
+
+/**
+ * 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;
+  padding-left: 0;
+  border-radius: calc($form-control-height-base * 0.5);
+
+  > li {
+    display: inline;
+    > a,
+    > span {
+      position: relative;
+      float: left;
+      margin-left: -1px;
+      padding: $component-padding-base-vertical $component-padding-base-horizontal;
+      border: 1px solid $pagination-border;
+      background-color: $pagination-bg;
+      color: $pagination-color;
+      text-decoration: none;
+      line-height: $line-height-base;
+
+      &:hover,
+      &:focus {
+        z-index: 2;
+        border-color: $pagination-hover-border;
+        background-color: $pagination-hover-bg;
+        color: $pagination-hover-color;
+      }
+      &:focus {
+        outline: 2px solid $component-color-focus;
+        outline-offset: -2px;
+        border-radius: $component-border-radius-focus;
+      }
+    }
+    &:first-child {
+      > a,
+      > span {
+        margin-left: 0;
+        text-indent: 9000px;
+        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-top-right-radius: calc($form-control-height-base * 0.5);
+        border-bottom-right-radius: calc($form-control-height-base * 0.5);
+      }
+    }
+  }
+
+  > .active > a,
+  > .active > span {
+    &,
+    &:hover,
+    &:focus {
+      z-index: 3;
+      border-color: $pagination-active-border;
+      background-color: $pagination-active-bg;
+      color: $pagination-color-active;
+      cursor: default;
+    }
+  }
+
+  > .disabled {
+    > span,
+    > span:hover,
+    > span:focus,
+    > a,
+    > a:hover,
+    > a:focus {
+      border-color: $pagination-disabled-border;
+      background-color: $pagination-disabled-bg;
+      color: $pagination-disabled-color;
+      cursor: $cursor-disabled;
+    }
+  }
+}
+
+.pagination-first,
+.pagination-prev,
+.pagination-next,
+.pagination-last {
+  > a {
+    overflow: hidden;
+    @include icon-base.dlt-c8y-icon;
+    position: relative;
+    width: $size-32;
+  }
+}
+.pagination-first a::before {
+  position: absolute;
+  left: 9px;
+  content: dlt-c8y-icons-vars.$dlt-c8y-icon-skip-previous;
+  text-indent: 0;
+  font-size: 1em;
+}
+.pagination-prev a::before {
+  position: absolute;
+  left: 9px;
+  content: dlt-c8y-icons-vars.$dlt-c8y-icon-chevron-left;
+  text-indent: 0;
+  font-size: 1em;
+}
+.pagination-next a::before {
+  position: absolute;
+  left: 9px;
+  content: dlt-c8y-icons-vars.$dlt-c8y-icon-chevron-right;
+  text-indent: 0;
+  font-size: 1em;
+}
+.pagination-last a::before {
+  position: absolute;
+  left: 9px;
+  content: dlt-c8y-icons-vars.$dlt-c8y-icon-skip-next;
+  text-indent: 0;
+  font-size: 1em;
+}
+
+// Sizing
+.pagination-lg {
+  @include pagination.pagination-size($component-padding-large-vertical, $component-padding-large-horizontal, $font-size-large, $line-height-large, $component-border-radius-large);
+}
+
+.pagination-sm {
+  @include pagination.pagination-size($component-padding-small-vertical, $component-padding-small-horizontal, $font-size-small, $line-height-small, $component-border-radius-small);
+}