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

Styles for Cumulocity IoT applications

@import "../mixins/_c8y-scrollbar.less";
@import "../mixins/_shadows-helper.less";

/**
 * Help Drawer - Fixed help panel overlay
 *
 * Note: Uses design tokens for spacing (@size-*; @component-padding) and colors.
 *
 * Intentionally hardcoded values:
 * - Layout calc expressions (28px, 140px, etc.): Height calculations
 * - Column widths (130ch, 55ch): Character-based column sizing
 * - 84px padding: Specific footer alignment
 * - 600px height breakpoint: Media query
 * - Orphans/widows: Typography print control
 * - Transition durations (0.5s, 0.35s): Animation timing
 * - Z-index calculations: Stacking order
 * - 1px borders: Standard border widths
 * - 10000px, 2000px: Large clip values
 */

.c8y-help-drawer {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: (@zindex-action-bar - 1);
  margin: 0;
  padding-top: @size-48;
  min-height: calc(@size-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: @size-32;
    text-wrap: balance;
    p + p {
      margin-top: @size-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 + calc(@size-base * 1.5));
    }
  }
  @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 - @size-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);
    }
  }
}