@c8y/style/styles/_c8y-help-drawer.less

Styles for Cumulocity IoT applications

.c8y-help-drawer {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: (@zindex-action-bar - 1);
  margin: 0;
  padding-top: 48px;
  min-height: calc(@margin-base * 4);
  max-width: 100vw;
  max-height: calc(100vh - 140px);
  background-color: var(--c8y-helpdrawer-background-default, @component-background-default);
  color: @component-color-default;
  overflow: auto;
  .c8y-scrollbar();
  .boxShadowHelper(md, bottom);

  .help-content {
    padding-bottom: @component-padding;
    max-width: 130ch;
    columns: auto 55ch;
    orphans: 5;
    widows: 2;
    gap: 32px;
    text-wrap: balance;
    p + p {
      margin-top: @margin-base;
    }
  }

  @media (min-height: 600px) {
    &-block {
      height: 100%;
    }
  }

  @media (max-width: @screen-xs-max) {
    transition: top 0.5s ease;
    .head-open & {
      top: calc(@headerHeight + 28);
    }
    .has-tabs & {
      top: 0;
      transition: top 0.35s ease;
    }
    .has-tabs .head-open & {
      top: calc(@headerHeight * 2 + 12px);
    }
  }
  @media (min-width: @screen-sm-min) {
    top: @headerHeight;
    clip: rect(0, 10000px, 2000px, 0);
    .horizontal-tabs.has-tabs & {
      top: calc(@headerHeight * 2);
      border-top: 1px solid @action-bar-border-color;
    }
  }
  @media (min-width: @grid-float-breakpoint) {
    .transition(left @open-menu-time-type);
    .open & {
      left: @navigatorWidth;
    }
    .horizontal-tabs.has-tabs & {
      top: calc(@headerHeight * 2 - @margin-16);
    }
  }
  &-block {
    padding: calc(@component-padding * 1.5) calc(@component-padding * 2) 0
    calc(@component-padding * 1.5);
  }
  &-footer {
    position: sticky;
    bottom: 0;
    background: inherit;
    padding: @component-padding calc(@component-padding * 2) calc(@component-padding * 1.5) 84px;
  }
  &:not(:has(.c8y-help-drawer-footer)) {
    .c8y-help-drawer-block {
      padding-bottom: calc(@component-padding * 1.5);
    }
  }

}

body:not(:has(.app-main-header)) {
  .c8y-help-drawer {
    top: 0;
  }
  &:has(.horizontal-tabs.has-tabs) {
    .c8y-help-drawer {
      top: 48px;
    }
  }
}