@c8y/style 1023.17.20 → 1023.22.2

package/styles/components/navigation-and-layout/navigation/_c8y-nav-stacked.scss

@@ -0,0 +1,85 @@
+@use "../../../../variables/index" as *;
+
+@use "../../../mixins/tab-focus";
+@use "../../../mixins/vendor-prefixes";
+
+/**
+ * C8Y Nav Stacked - Stacked navigation list component
+ *
+ * Note: Uses $size-* tokens for spacing, $size-base for calculations, and component color variables.
+ *
+ * Intentionally hardcoded values:
+ * - Border widths (1px): Standard borders
+ * - Percentages (100%): Layout
+ * - Transition durations (0.25s): Animation timing
+ * - Box-shadow values: Borders and focus effects
+ * - Z-index values (10): Stacking order
+ */
+
+.c8y-nav-stacked {
+  position: relative;
+  z-index: 10;
+  display: block;
+  margin-bottom: 0;
+  padding-left: 0;
+  width: 100%;
+  list-style: none;
+
+  .c8y-stacked-item {
+    position: relative;
+    display: flex;
+    float: none;
+    align-items: center;
+    flex-flow: row nowrap;
+    padding: $size-8 0 $size-8 $size-16;
+    width: 100%;
+    border: 0;
+    background-color: $component-background-expanded;
+    background-image: none;
+    box-shadow: inset 0 -1px 0 $component-border-color;
+    cursor: pointer;
+    appearance: none;
+    transition: all 0.25s ease;
+
+    &:hover:not(.active) {
+      background-color: $component-background-active;
+      box-shadow: inset 0 0 0 1px $component-color-actions-hover;
+      .ui-sortable-handle {
+        margin-left: calc(-1 * $size-8);
+        margin-right: $size-8;
+        outline: none;
+      }
+    }
+    &:focus-within,
+    &:focus {
+      @include tab-focus.c8y-focus-inset();
+    }
+
+    .btn-clean:focus {
+      outline: none;
+    }
+
+    &.active {
+      border-left: $size-4 solid $component-brand-primary;
+      background-color: $component-background-default;
+    }
+    > .c8y-switch {
+      margin: calc($size-base * -1 - 1px) 0 calc($size-base * -1);
+    }
+    .msgid {
+      display: inline-block;
+      min-width: $size-40;
+    }
+  }
+
+  &.ui-sortable .c8y-stacked-item {
+    .ui-sortable-handle {
+      overflow: hidden;
+      margin-left: 0;
+      margin-right: 0;
+      width: 0;
+      text-align: center;
+      transition: all 0.25s ease;
+    }
+  }
+}

package/styles/components/navigation-and-layout/navigation/_main-header.scss

@@ -0,0 +1,510 @@
+@use "../../../../variables/index" as *;
+
+@use "sass:string";
+@use "../../../mixins/gradients";
+@use "../../../mixins/shadows-helper";
+@use "../../../mixins/tab-focus";
+@use "../../../mixins/vendor-prefixes";
+
+/**
+ * Main Header - Application main header component
+ *
+ * Note: Uses $size-* tokens for spacing and $headerHeight for calculations.
+ *
+ * Intentionally hardcoded values:
+ * - Off-token spacing (9px, 11px, 15px): Legacy spacing not in token system
+ * - Border widths (1px, 2px): Standard borders
+ * - Percentages (50%, 100%): Layout
+ * - Calc expressions: Complex computed values
+ * - Transition durations: Animation timing
+ * - Box-shadow values: Elevation
+ * - Z-index values: Stacking order
+ */
+
+
+// mixin to apply horizontal gradient in header
+@mixin checkHorizontalGradient($color1, $color2) {
+  @if $color1 != '' {
+    @include gradients.gradient-horizontal($start-color: $color1, $end-color: $color2);
+  }
+}
+
+// APP MAIN HEADER
+.app-main-header {
+  position: fixed;
+  z-index: $zindex-navbar-fixed + 1;
+  top: 0;
+  right: 0;
+  left: 0;
+  max-width: 100vw;
+  transition: all $open-menu-time-type;
+
+  // navigator open
+  &.open {
+    left: $navigatorWidth--sm;
+    @media (max-width: $screen-xs-max) {
+      .header-bar {
+        padding-right: 0;
+      }
+    }
+    @media (min-width: $screen-sm-min) {
+      left: $navigatorWidth;
+    }
+
+    .app-view {
+      .c8y-app-icon,
+      .app-noicon,
+      .txt {
+        width: 0 !important;
+        margin-left: 0;
+        margin-right: 0;
+        @include vendor-prefixes.scale(0);
+      }
+    }
+
+    .navigator-toggle > [class^='dlt-c8y-icon-'],
+    .navigator-toggle > [class*=' dlt-c8y-icon-'],
+    .navigator-toggle > .c8y-icon {
+      width: 1em;
+      text-align: center;
+    }
+  }
+
+  // right drawer open
+  &.drawerOpen {
+    right: $navigatorWidth--sm;
+    @media (max-width: $screen-xs-max) {
+      .navigator-toggle {
+        display: none;
+      }
+      .app-view {
+        display: none;
+      }
+      .drawer-toggle {
+        display: none;
+      }
+    }
+    @media (min-width: $screen-sm-min) {
+      right: $navigatorWidth;
+    }
+  }
+
+  .user-dot,
+  .close-dot {
+    flex: 0 0 36px;
+    margin: 0;
+    width: 36px;
+    height: 36px;
+    line-height: 35px;
+  }
+
+  .close-dot {
+    border-radius: 50%;
+    align-items: center;
+    justify-content: center;
+    color: $header-text-color;
+    border: 1px solid $header-text-color;
+    font-size: $size-24;
+  }
+
+
+
+  .dropdown-menu:not(.app-switcher-dropdown-menu):not(.search-mobile-menu) {
+    a,
+    .btn {
+      display: block;
+      overflow: hidden !important;
+      max-width: 100% !important;
+      text-overflow: ellipsis !important;
+      white-space: nowrap !important;
+    }
+  }
+
+  // shadows on dropdowns inside app-main-header
+  .dropdown.open .c8y-dropdown + .dropdown-menu,
+  [dropdown].open .c8y-dropdown + .dropdown-menu,
+  .btn-group.open .c8y-dropdown + .dropdown-menu {
+    display: block;
+    @include shadows-helper.boxShadowHelper(6, right);
+  }
+
+  .app-switcher {
+    .appLink {
+      color: $component-color-default;
+    }
+  }
+}
+
+body:not(:has(.has-tabs)):not(:has(.has-action-bar)) {
+  .app-main-header {
+    box-shadow: inset 0 -1px 0 0 var(--c8y-component-border-color, var(--c8y-root-component-border-color)), var(--c8y-elevation-md-bottom);
+  }
+}
+
+
+.head-toggler {
+  height: 0;
+  overflow: visible;
+  .open &,
+  .drawerOpen & {
+    display: none;
+  }
+  button {
+    margin: 0 auto;
+    width: 48px;
+    height: $size-24;
+    color: $header-text-color;
+    background-color: $headerColor;
+    display: block;
+    transition: margin 0.5s ease 0.35s;
+    border: 0;
+    border-radius: 0 0 $size-24 $size-24;
+    @include shadows-helper.boxShadowHelper(1);
+
+    &:focus {
+      outline: none;
+    }
+
+    &:hover {
+      color: $header-text-color-hover;
+    }
+
+    [class^='dlt-c8y-icon-'],
+    [class*=' dlt-c8y-icon-'] {
+      transition: transform 0.5s ease 0.35s;
+      transform: rotate(90deg);
+    }
+
+    .head-open & {
+      [class^='dlt-c8y-icon-'],
+      [class*=' dlt-c8y-icon-'] {
+        transform: rotate(-90deg);
+      }
+    }
+
+    @media (min-width: $screen-sm-min) {
+      display: none;
+    }
+  }
+}
+
+//header bar
+.header-bar {
+  top: 0;
+  right: 0;
+  color: $header-text-color;
+  background-color: $headerColor;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  box-shadow: var(--c8y-main-header-shadow);
+  padding-right: $size-24;
+
+  @media (min-width: $screen-sm-min) {
+    min-height: $header-bar-height;
+  }
+
+  .c8y-app-icon {
+    font-size: 30px;
+    display: inline-block;
+  }
+
+  .app-noicon {
+    display: inline-block;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  .c8y-app-icon,
+  .app-noicon,
+  .txt {
+    transition: all $open-menu-time-type;
+    width: $size-32;
+    margin-left: $size-base;
+    margin-right: $size-base;
+    @include vendor-prefixes.scale(1);
+  }
+
+  .main-header-button {
+    &,
+    & > button {
+      text-decoration: none;
+      background-color: transparent;
+      border: 0;
+      margin: 0;
+      padding: 5px 15px;
+      min-height: 46px;
+      color: $header-text-color;
+      box-shadow: inset 1px 0 0 $header-border-color;
+      transition: $btn-transition;
+
+      &:hover {
+        color: $header-text-color-hover;
+        background-color: $header-background-hover;
+        outline: 2px solid $header-text-color-hover;
+        outline-offset: -2px;
+      }
+
+      &:focus {
+        outline: 2px solid $header-text-color-hover;
+        outline-offset: -2px;
+        border-radius: $component-border-radius-focus !important;
+      }
+
+      &:active {
+        background-color: $header-background-active;
+      }
+
+      > button {
+        padding: 0;
+        min-height: auto;
+        box-shadow: none;
+      }
+    }
+  }
+
+  .navigator-toggle,
+  .drawer-toggle {
+    font-size: $size-16;
+    padding-left: 8px;
+    padding-right: 8px;
+
+    > [class^='dlt-c8y-icon-'],
+    > [class*=' dlt-c8y-icon-'],
+    > .c8y-icon {
+      transition: transform $open-menu-time-type;
+    }
+  }
+
+  .drawer-toggle {
+    &:focus {
+      outline: none;
+      > .user-dot,
+      > .close-dot {
+        border-radius: 50% !important;
+        @include tab-focus.c8y-focus();
+      }
+    }
+    .user-dot {
+      display: flex;
+    }
+
+    .close-dot {
+      display: none;
+    }
+
+    &[aria-expanded='true'] {
+      .user-dot {
+        display: none;
+      }
+
+      .close-dot {
+        display: flex;
+      }
+    }
+     + .p-relative{
+      --c8y-component-pulse-color: var(--header-hover-color, var(--c8y-header-hover-color));
+      >.c8y-pulse{
+        position: absolute;
+        top: 13px;
+        right: -5px;
+      }
+    }
+  }
+
+  
+
+  @media (max-width: $screen-xs-max) {
+    max-height: 46px;
+    overflow: hidden;
+    transition: max-height 0.35s ease;
+
+    .head-open & {
+      max-height: 92px;
+      overflow: visible;
+    }
+  }
+}
+
+.app-view {
+  display: flex;
+  flex-flow: row nowrap;
+  margin-right: auto;
+  flex: 3 1 auto;
+  border-left: 1px solid $header-border-color;
+  align-items: center;
+  align-self: stretch;
+  width: calc(string.unquote('100% - 94px'));
+  max-height: 46px;
+
+  .c8y-icon:before,
+  .c8y-icon.c8y-icon-duocolor:before {
+    color: currentColor;
+  }
+
+  .spinner {
+    position: relative;
+    margin: 0 0 0 $size-base;
+  }
+}
+
+// page header - contains the title and the breadcrumbs
+.page-header {
+  padding: 0 5px 0 0;
+  max-height: 46px;
+  width: 100%;
+  max-width: calc(string.unquote('100% - 50px'));
+
+  .c8y-ui-title {
+    height: 25px;
+    position: relative;
+    z-index: 11;
+
+    h1 {
+      display: inline-block;
+      margin: 0;
+      width: 100%;
+      letter-spacing: -0.03em;
+      font-weight: 400;
+      font-size: 18px;
+    }
+
+    .c8y-ui-title-extra-info {
+      position: absolute;
+      top: calc(string.unquote('100% - 6px'));
+      right: 0;
+      z-index: 12;
+    }
+
+    .edit-in-place {
+      c8y-error-feedback,
+      c8y-messages {
+        display: none;
+      }
+    }
+  }
+}
+
+// main-header breadcrumbs
+.app-breadcrumbs {
+  display: block;
+  margin-top: -3px;
+  max-height: 14px;
+  position: relative;
+  z-index: 10;
+}
+
+@media (min-width: $screen-sm-min) {
+  .header-bar {
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+
+    .main-header-button {
+      min-height: $header-bar-height;
+    }
+  }
+
+  .app-view {
+    max-height: $header-bar-height;
+    width: calc(string.unquote('100% - 180px - 172px - 32px'));
+  }
+
+  .page-header {
+    padding: 5px;
+    max-height: $header-bar-height;
+
+    .c8y-ui-title {
+      height: 34px;
+
+      h1 {
+        font-size: 26px;
+
+        small:not(.form-control-feedback-message) {
+          color: $header-text-color;
+          opacity: 0.8;
+        }
+      }
+    }
+
+    .text-muted {
+      color: $header-text-color;
+      opacity: 0.8;
+    }
+  }
+}
+
+// Smartphone only
+@media (max-width: $screen-xs-max) {
+  .header-bar {
+    .navigator-toggle {
+      order: 1;
+    }
+
+    .app-view {
+      order: 2;
+    }
+
+    .drawer-toggle {
+      order: 3;
+      padding-right: 8px;
+      margin-left: 8px;
+    }
+
+    .main-header-item {
+      order: 5;
+      box-shadow: inset 0 1px 0 0 $component-border-color;
+    }
+  }
+
+  .main-header-item {
+    flex: 1 1 auto;
+    @include shadows-helper.shadow-border(1px, $header-border-color);
+
+    .main-header-button,
+    .dropdown {
+      width: 100%;
+    }
+
+    .open .dropdown-toggle{
+      box-shadow: none!important;
+    }
+
+    .dropdown-menu:not(.app-switcher-dropdown-menu) {
+      min-width: 100vw;
+      inset: auto !important;
+    }
+  }
+
+  .app-main-header {
+    &.open,
+    &.drawerOpen {
+      .header-bar {
+        overflow: hidden;
+      }
+
+      .app-view {
+        .c8y-app-icon,
+        .app-noicon,
+        .txt {
+          width: 0 !important;
+          margin-left: 0;
+          margin-right: 0;
+          @include vendor-prefixes.scale(0);
+        }
+      }
+
+      .page-header {
+        display: none;
+      }
+    }
+
+    // navigator and right drawer open
+    &.drawerOpen.open {
+      .main-header-item {
+        display: none;
+      }
+    }
+  }
+}

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

@@ -302,12 +302,13 @@
       position: relative;
       margin-left: 0;
     } // Re-override the feedback icon.
-    .has-feedback .form-control-feedback {
-      top: 0;
-    }
-    .has-feedback .form-control-feedback-message {
-      top: @form-control-height-base;
-    }
+    // Removed unused logic: .has-feedback
+    //.has-feedback .form-control-feedback {
+    //  top: 0;
+    //}
+    //.has-feedback .form-control-feedback-message {
+    //  top: @form-control-height-base;
+    //}
   }
   >.form-group {
     @media (max-width: @screen-sm-min) {