pip-webui/pip-webui-help/src/help_page/help_page.less

HTML5 UI for LOB applications

// CSS styles for help module
// Digital Living Software Corp. 2014-2016

@pip-help-list-width: 300px;
@pip-help-document-width: 1100px;

.pip-help {
  font-size: @font-size-body2;

  @media (min-width: 1200px) {
    md-list.pip-menu {
      width: @pip-help-list-width;
      min-width: @pip-help-list-width;
    }

    .pip-content-container {
      width: @pip-help-document-width - @pip-help-list-width;
    }
  }

  @media (min-width: 768px) and (max-width: 1200px) {
    md-list.pip-menu {
      width: @pip-help-list-width;
      min-width: 0;
    }

    .pip-content-container {
      width: ~"calc(100% - @{pip-help-list-width})";
    }
  }

  &.pip-card .pip-header ~ .pip-body,
  &.pip-document .pip-header ~ .pip-body {
    .tp(24px);
  }

  .pip-body {
    max-width: none !important;
  }

  @media (min-width: 1200px) {
    md-list:first-of-type {
      width: @pip-help-list-width;
    }

    .pip-content-container {
      width: @pip-help-document-width - @pip-help-list-width;
      position: absolute;
      left: @pip-help-list-width;
      max-height: 100%;
      -ms-overflow-y: auto;
    }
  }

  @media (min-width: 1000px) and (max-width: 1200px) {
    .pip-content-container {
      width: ~"calc(100% - @{pip-help-list-width})";
      -ms-overflow-y: auto;
    }
  }

  @media (min-width: 768px) and (max-width: 1200px) {
    md-list:first-of-type {
      width: 30%;
    }

    .pip-content-container {
      width: 70%;
      position: absolute;
      left: 30%;
      max-height: 100%;
      -ms-overflow-y: auto;
    }
  }

  &.pip-card .pip-header ~ .pip-body,
  &.pip-document .pip-header ~ .pip-body {
    .tp(24px);
  }
}