@c8y/style/styles/_main-header.less

Styles for Cumulocity IoT applications

// mixin to apply horizontal gradient in header
.checkHorizontalGradient(@color1; @color2) when not (@color1='') {
  #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;
        .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: 24px;
  }



  .dropdown-menu:not(.app-switcher-dropdown-menu):not(.search-mobile-menu) {
    a,
    .btn {
      .text-truncate();
    }
  }

  // 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;
    .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: 24px;
    color: @header-text-color;
    background-color: @headerColor;
    display: block;
    transition: margin 0.5s ease 0.35s;
    border: 0;
    border-radius: 0 0 24px 24px;
    .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: @margin-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: 32px;
    margin-left: @margin-base;
    margin-right: @margin-base;
    .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: 16px;
    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;
        .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(~'100% - 94px');
  max-height: 46px;

  .c8y-icon:before,
  .c8y-icon.c8y-icon-duocolor:before {
    color: currentColor;
  }

  .spinner {
    position: relative;
    margin: 0 0 0 @margin-base;
  }
}

// page header - contains the title and the breadcrumbs
.page-header {
  padding: 0 5px 0 0;
  max-height: 46px;
  width: 100%;
  max-width: calc(~'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(~'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(~'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;
    .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;
          .scale(0);
        }
      }

      .page-header {
        display: none;
      }
    }

    // navigator and right drawer open
    &.drawerOpen.open {
      .main-header-item {
        display: none;
      }
    }
  }
}