@c8y/style 1023.17.20 → 1023.22.2

package/styles/layout/_page-tabs.scss

@@ -0,0 +1,314 @@
+@use "../../variables/index" as *;
+
+@use "../mixins/c8y-scrollbar";
+
+/**
+ * Page Tabs - Horizontal and vertical tab navigation
+ *
+ * Note: Uses design tokens for spacing ($size-*), colors, and layout vars.
+ *
+ * Intentionally hardcoded values:
+ * - -6px top: Negative offset for mobile positioning
+ * - 12px: Off-grid legacy value in calc expression
+ * - 30px, 31px: Specific dimensions for tab slider controls
+ * - 3px padding: Fine-tuning for icon alignment
+ * - Transition durations (0.35s, 0.25s): Animation timing
+ * - Z-index values: Stacking order
+ * - 1px borders: Standard border widths
+ * - 2px box-shadow: Focus indicator width
+ * - 10000px, 2000px: Large clip values for overflow management
+ * - Percentages and em units: Relative sizing
+ */
+
+.page-tabs {
+  position: fixed;
+  right: 0;
+  left: 0;
+  z-index: $zindex-navbar-fixed;
+  margin: 0;
+  padding: 0;
+  &:has(.component-tabs) {
+    position: static;
+  }
+
+  @media (max-width: $screen-xs-max) {
+    top: -6px;
+    transition: top 0.35s ease;
+
+    .head-open & {
+      top: calc($size-base * 10 + calc($size-base * 1.5));
+    }
+  }
+}
+
+.page-tabs-horizontal {
+  // hide when there are no tabs available
+  &:not(.page-tabs) {
+    display: none;
+  }
+
+  @media (min-width: $screen-sm-min) {
+    top: $headerHeight;
+    right: 0;
+    left: 0;
+    z-index: $zindex-navbar-fixed;
+    clip: rect(0, 10000px, 2000px, 0);
+    min-height: calc($size-base * 6);
+    box-shadow: inset 0 -1px 0 0 $component-border-color, $header-shadow;
+    &:has(.component-tabs) {
+      box-shadow: inset 0 -1px 0 0 $component-border-color;
+      .component-tabs {
+          min-width: unset !important;
+          padding: 0;
+          &.nav-tabs > div, &.nav-tabs li {
+            flex: 0;
+            align-self: stretch;
+            > a {
+              height: 100%;
+            }
+          }
+      }
+    }
+    &,
+    &:after {
+      transition: left $open-menu-time-type;
+    }
+  }
+
+  @media (min-width: $grid-float-breakpoint) {
+    &.navigator-open {
+      left: $navigatorWidth;
+    }
+  }
+
+  .tabContainer {
+    overflow-x: auto;
+    // box-shadow: inset 0 calc($nav-tabs-border-width-active * -1) 0 0 $nav-tabs-border-color-default;
+    scroll-behavior: smooth;
+    overflow: -moz-scrollbars-none; // Firefox
+    -ms-overflow-style: none; // IE 10+
+    &::-webkit-scrollbar {
+      display: none; // Safari and Chrome
+    }
+
+    .nav-tabs {
+      padding-right: 30px;
+      padding-left: 30px;
+      min-width: max-content;
+    }
+
+    @media (min-width: $grid-float-breakpoint) {
+      .nav-tabs {
+        min-width: max-content;
+      }
+    }
+  }
+}
+
+.component-tabs {
+  position: relative;
+}
+
+.tabs-slider {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  padding: 3px 0 0;
+  width: 31px;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  background-color: $navbar-background-default;
+  color: $link-color;
+  box-shadow: inset 0 -1px 0 0 $nav-tabs-border-color-default;
+
+  [class^='dlt-c8y-icon-'],
+  [class*=' dlt-c8y-icon-'] {
+    position: relative;
+    z-index: 3;
+    font-size: $size-20;
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    &:not([disabled]) {
+      outline: none;
+      box-shadow: inset 0 0 0 2px $component-color-focus;
+      color: $link-color-hover;
+      text-decoration: none;
+    }
+  }
+
+  &:focus {
+    border-radius: $component-border-radius-focus;
+  }
+
+  &[disabled] {
+    cursor: not-allowed;
+    text-decoration: none;
+    [class^='dlt-c8y-icon-'],
+    [class*=' dlt-c8y-icon-'] {
+      opacity: 0.65;
+      color: $text-muted;
+    }
+  }
+}
+
+.tabs-slider-left {
+  left: 0;
+  border-right: 1px solid $component-border-color;
+}
+
+.tabs-slider-right {
+  right: 0;
+  border-left: 1px solid $component-border-color;
+}
+
+.page-tabs-vertical {
+  // hide when there are no tabs available
+  &:not(.page-tabs) {
+    display: none;
+  }
+
+  .tabs-slider {
+    display: none;
+  }
+
+  .nav-tabs {
+    // Styles from .nav-tabs-vertical class (LESS uses mixin)
+    display: block;
+    &:not(.component-tabs) {
+      padding-top: $size-48;
+    }
+    width: $nav-tabs-vertical-width;
+    border: 0;
+    box-shadow: none;
+    &.nav-tabs-vertical--wide {
+      width: unset;
+    }
+    > div,
+    > li {
+      position: relative;
+      > a, > button {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        margin: 0;
+        padding: $nav-tabs-vertical-padding;
+        height: auto;
+        border: 0;
+        box-shadow: inset 0 -1px 0 $nav-tabs-border-color-default;
+        text-transform: none;
+        font-size: inherit;
+        transition: all 0.25s ease;
+
+        [class^='dlt-c8y-icon-'],
+        [class*=' dlt-c8y-icon-'],
+        .c8y-icon {
+          margin: 0 $size-8 0 0;
+          width: 1.25em;
+          ~ span {
+            display: inline-block;
+            overflow: hidden;
+            max-width: 100%;
+            vertical-align: middle;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
+      &.active {
+        > a, > button {
+          &, &:hover {
+            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;
+            pointer-events: none;
+            &::before {
+              width: 100%;
+            }
+            &::after {
+              left: 100%;
+              height: 100%;
+              border-width: calc($size-16 + $size-4) 0 calc($size-16 + $size-4) $size-base;
+            }
+          }
+        }
+      }
+      a {
+        > [class^='dlt-c8y-icon-'],
+        > [class*=' dlt-c8y-icon-'],
+        > .c8y-icon {
+          display: inline-block;
+        }
+      }
+    }
+  }
+
+  @media (min-width: $screen-sm-min) {
+    top: $headerHeight;
+    right: auto;
+    bottom: 0;
+    left: 0;
+    z-index: 101;
+    overflow: visible;
+    padding-right: calc($grid-gutter-width / 2);
+
+    transition: left $open-menu-time-type;
+
+    &:before {
+      position: absolute;
+      top: 0;
+      min-height: 100%;
+      width: $nav-tabs-vertical-width;
+      box-shadow: 1px 0 0 $nav-tabs-border-color-default;
+      content: '';
+      background-color: $component-background-default;
+    }
+
+    .tabContainer {
+      overflow-y: auto;
+      @include c8y-scrollbar.c8y-scrollbar();
+      max-height: 100%;
+    }
+  }
+
+  @media (min-width: $grid-float-breakpoint) {
+    &.navigator-open {
+      left: $navigatorWidth;
+    }
+  }
+}
+
+body:not(:has(.app-main-header)) {
+  @media (min-width: $screen-sm-min) {
+    .page-tabs-horizontal, .page-tabs-vertical {
+      top: 0;
+      .nav-tabs {
+        padding-top: 0;
+      }
+    }
+  }
+  &:has(.has-action-bar) {
+    .page-tabs-vertical {
+      top: $size-48;
+    }
+  }
+  &:not(:has(.has-action-bar)) {
+    .page-tabs-vertical {
+      top: 0;
+    }
+  }
+}
+
+body:not(:has(.has-action-bar)) {
+  .page-tabs-vertical {
+    .nav-tabs {
+      padding-top: 0;
+      border-top: 1px solid $component-border-color;
+    }
+  }
+}

package/styles/{_split-scroll.less → layout/_split-scroll.less}

@@ -1,4 +1,4 @@
-// TODO: Remove this after updating the opcua-address-space.component
+// DEPRECATED: Remove after updating opcua-address-space.component. Still used in 2 places.
 
 .split-scroll {
   position: relative;

package/styles/layout/_split-scroll.scss

@@ -0,0 +1,112 @@
+@use "../../variables/index" as *;
+
+@use "sass:string";
+
+/**
+ * Split Scroll - DEPRECATED split-column scrolling layout
+ *
+ * Note: DEPRECATED - Remove after updating opcua-address-space.component. Still used in 2 places.
+ * Uses $size-16 and $size-8 for spacing.
+ *
+ * Intentionally hardcoded values:
+ * - Layout heights (80px, 118px, 150px, 165px): Viewport calculations
+ * - Percentages (50%, 33.33%, 25%): Fractional row heights
+ * - Z-index values: Stacking order
+ */
+
+.split-scroll {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: calc(string.unquote('100vh - 80px'));
+}
+
+.scroll-column {
+  display: flex;
+  flex-flow: column nowrap;
+  max-height: 100%;
+
+  > .card,
+  .scroll-column-nested-content {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 0;
+    max-height: 100%;
+  }
+  .card-header,
+  .card-footer,
+  .scroll-column-footer {
+    flex: 0;
+  }
+  .inner-scroll {
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    max-height: 100%;
+  }
+
+  .scroll-column-footer {
+    padding: $size-16 0 0 0;
+    .btn-add-block {
+      margin-bottom: 0;
+    }
+  }
+}
+
+@media (max-width: $screen-sm-max) {
+  .split-scroll {
+    .scroll-column + .scroll-column {
+      position: absolute;
+      top: 0;
+      bottom: calc($size-16 * -1);
+      left: 0;
+      z-index: 10;
+      padding: 0;
+      width: 100%;
+      .card:not(.flex-scroll) {
+        min-height: 100%;
+      }
+    }
+    .c8y-nav-stacked .c8y-stacked-item {
+      margin-right: 0;
+      &:after {
+        display: none;
+      }
+    }
+  }
+}
+
+@media (min-width: $screen-sm-min) {
+  .split-scroll {
+    height: calc(string.unquote('100vh - 118px'));
+    .has-tabs.horizontal-tabs & {
+      height: calc(string.unquote('100vh - 165px'));
+    }
+    .has-action-bar & {
+      height: calc(string.unquote('100vh - 150px'));
+    }
+  }
+}
+
+.split-scroll {
+  .input-group-search {
+    margin: calc($size-8 * -1) 0 !important;
+  }
+  .split-row-2 {
+    height: 50%;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .split-row-3 {
+    height: 33.3333333%;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  .split-row-4 {
+    height: 25%;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

package/styles/layout/_split-view.scss

@@ -0,0 +1,126 @@
+@use "../../variables/index" as *;
+
+/**
+ * Split View - Two-column layout component
+ *
+ * Note: Uses design tokens for spacing ($size-*) and colors.
+ *
+ * Intentionally hardcoded values:
+ * - Layout heights (108px, 168px, 166px, 200px, 82px): Viewport calculations
+ * - Grid fractions (4fr, 5fr, 7fr, 8fr): CSS grid fractional units
+ * - Transition duration (0.35s): Animation timing
+ * - Z-index values: Stacking order
+ * - Percentages: Relative sizing
+ */
+
+.split-view {
+  &__list,
+  &__detail {
+    display: flex;
+    flex-direction: column;
+    background-color: $component-background-default;
+  }
+  &__list {
+    @extend .border-right !optional;
+  }
+
+  @media (max-width: $screen-sm-max) {
+    &--5-7,
+    &--7-5,
+    &--4-8,
+    &--8-4 {
+      position: relative;
+      display: flex !important;
+      overflow: hidden;
+      flex-direction: column;
+      margin-bottom: 0 !important;
+      height: calc(100vh - 108px);
+      .has-action-bar & {
+        height: calc(100vh - 168px);
+      }
+    }
+
+    &--5-7 {
+      height: calc(100vh - 108px);
+    }
+
+    &--8-4, &--4-8 {
+      height: calc(100vh - 166px);
+    }
+
+    &--7-5 {
+      height: calc(100vh - 166px);
+    }
+
+    &__list {
+      flex-grow: 1;
+      height: auto;
+    }
+
+    &__detail {
+      position: absolute;
+      top: 0;
+      left: 100%;
+      z-index: 100;
+      min-height: calc(100vh - 200px);
+      width: 100%;
+      transition: left 0.35s ease-in-out;
+
+      &--selected {
+        left: 0;
+      }
+    }
+  }
+
+  @media (max-width: $screen-xs-max) {
+    &--5-7,
+    &--7-5,
+    &--4-8,
+    &--8-4 {
+      height: calc(100vh - 82px) !important;
+    }
+  }
+
+  @media (min-width: $screen-md-min) {
+    &--5-7,
+    &--7-5,
+    &--4-8,
+    &--8-4 {
+      display: grid !important;
+      grid-template-rows: min-content auto;
+    }
+
+    &--5-7 {
+      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
+    }
+
+    &--7-5 {
+      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
+    }
+
+    &--4-8 {
+      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
+    }
+    &--8-4 {
+      grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
+    }
+  }
+}
+
+c8y-sv-details,
+c8y-sv-list {
+  .inner-scroll {
+    >.card-header{
+      min-height: $size-56;;
+    }
+  }
+}
+.card-dashboard c8y-sv-list {
+  .inner-scroll {
+    >.card-header{
+      min-height: 0;
+      padding-top: $size-4;
+      padding-bottom: $size-4;
+    }
+  }
+}

package/styles/login-app-use.scss

@@ -0,0 +1,36 @@
+// Login App Stylesheet (using modern @use syntax)
+// This version is compatible with branding-login.scss using variables/index
+
+@use '../variables/index' as *;
+
+@use 'base/_normalize';
+@use 'base/_print';
+
+// TRANSITIONS & ANIMATION
+@use 'animations/_component-animations';
+@use 'animations/_animate';
+
+// CORE CSS
+@use 'base/_scaffolding';
+@use 'core/feedback/_alerts';
+@use 'core/feedback/_badges';
+@use 'core/buttons/_buttons';
+@use 'core/feedback/_close';
+@use 'core/buttons/_button-groups';
+@use 'components/specialized/_code';
+@use 'core/feedback/_tag';
+@use 'core/forms/_forms';
+@use 'core/forms/_c8y-switch';
+@use 'base/_type';
+@use 'layout/_grid';
+
+@use 'core/forms/_input-groups';
+@use 'components/specialized/_c8y-cookie-banner';
+
+@use 'icons/_c8y-glyphs';
+@use 'icons/_c8y-icons';
+@use 'icons/_dlt-c8y-icons';
+// @use 'icons/_dlt-c8y-icons-stroke';
+@use 'utilities';
+
+@use 'components/navigation-and-layout/action-bars/_app-switcher';

package/styles/login-app.less

@@ -1,34 +1,35 @@
+@import '../variables/index.less';
 @import 'mixins.less';
-@import '_normalize.less';
-@import '_print.less';
+@import 'base/_normalize.less';
+@import 'base/_print.less';
 
 // TRANSITIONS & ANIMATION
-@import '_component-animations.less';
-@import '_animate.less';
+@import 'animations/_component-animations.less';
+@import 'animations/_animate.less';
 
 // CORE CSS
-@import '_scaffolding.less';
-@import '_alerts.less';
-@import '_badges.less';
-@import '_buttons.less';
-@import '_close.less';
-@import '_button-groups.less';
-@import '_code.less';
-@import '_tag.less';
-@import '_forms.less';
-@import '_c8y-switch.less';
-@import '_type.less';
-@import '_grid.less';
+@import 'base/_scaffolding.less';
+@import 'core/feedback/_alerts.less';
+@import 'core/feedback/_badges.less';
+@import 'core/buttons/_buttons.less';
+@import 'core/feedback/_close.less';
+@import 'core/buttons/_button-groups.less';
+@import 'components/specialized/_code.less';
+@import 'core/feedback/_tag.less';
+@import 'core/forms/_forms.less';
+@import 'core/forms/_c8y-switch.less';
+@import 'base/_type.less';
+@import 'layout/_grid.less';
 
-// @import '_grid.less';
+// @import 'layout/_grid.less';
 
-@import '_input-groups.less';
-@import '_c8y-cookie-banner.less';
+@import 'core/forms/_input-groups.less';
+@import 'components/specialized/_c8y-cookie-banner.less';
 
-@import '_c8y-glyphs.less';
-@import '_c8y-icons.less';
-@import '_dlt-c8y-icons.less';
-// @import '_dlt-c8y-icons-stroke.less';
+@import 'icons/_c8y-glyphs.less';
+@import 'icons/_c8y-icons.less';
+@import 'icons/_dlt-c8y-icons.less';
+// @import 'icons/_dlt-c8y-icons-stroke.less';
 @import 'utilities.less';
 
-@import '_app-switcher.less';
+@import 'components/navigation-and-layout/action-bars/_app-switcher.less';

package/styles/mixins/_alert-variant.scss

@@ -0,0 +1,13 @@
+@use "../../variables/index" as *;
+
+@mixin alert-variant($background-color, $border-color, $text-color, $alert-icon) {
+  position: relative;
+  border-color: $border-color;
+  background-color: $background-color;
+  color: $text-color;
+  &:before {
+    border-color: $border-color;
+    color: $border-color;
+    content: $alert-icon;
+  }
+}

package/styles/mixins/_animation.scss

@@ -0,0 +1,25 @@
+@use "../../variables/index" as *;
+
+/**
+* add an increasing transition delay to elements
+* in a list using the element index
+*
+* $range: number of elements
+* $el: html element
+* $delay: time in seconds
+* $lastIndex: max number of elements
+* $pos: either top, right, bottom or left
+* $size: height of the element
+*/
+
+@mixin make-el-increment($range, $el, $delay: 0.05s, $lastIndex: 100, $pos: top, $size: 40px) {
+
+  @if $range > 0 {
+  #{$el}:nth-child(#{$range}) {
+    transition-delay: ($range * $delay);
+    z-index: ($lastIndex - $range);
+    #{$pos}: -340px;
+  }
+  @include make-el-increment(($range - 1), $el, $delay, $lastIndex, $pos, $size);
+}
+}