wrapper.pcss.css

/**
 * @file
 * CSS for off-canvas dialog wrapper.
 *
 * @internal
 */
#drupal-off-canvas-wrapper {
  --off-canvas-wrapper-box-shadow: 0 0 4px 2px rgb(0, 0, 0, 0.3);
  --off-canvas-wrapper-border-color: #2d2d2d;
  --off-canvas-wrapper-border-width: 1px;

  z-index: 501; /* Layer the dialog just under the toolbar. */
  overflow: auto;
  box-sizing: border-box;
  height: 100%;
  border-inline-start: solid var(--off-canvas-wrapper-border-width) var(--off-canvas-wrapper-border-color);
  box-shadow: var(--off-canvas-wrapper-box-shadow);

  /*
   * When the off-canvas appears at the top or bottom of the page (Workspaces
   * does this), it should not obscure the Navigation module's toolbar.
   *
   * Note that the Layout Builder off-canvas dialog includes
   * `data-offset-top="0"`, so we need to be sure to not select that.
   *
   * Note that we have to use `!important` below to override the dialog JS's
   * inline CSS.
   *
   * @todo
   * We *may* able to remove this code once the https://www.drupal.org/i/3096017
   * is fixed.
   */
  [data-admin-toolbar] &:is([data-offset-top]:not([data-offset-top="0"]), [data-offset-bottom]:not([data-offset-bottom="0"])) {
    left: var(--drupal-displace-offset-left, 0) !important;
    width: calc(100% - var(--drupal-displace-offset-left, 0px)) !important;

    &:dir(rtl) {
      right: var(--drupal-displace-offset-right, 0) !important;
      width: calc(100% - var(--drupal-displace-offset-right, 0px)) !important;
    }
  }

  /*
   * Force the off-canvas dialog to be 100% width at the same breakpoint the
   * dialog system uses to expand dialog widths.
   */
  @media (max-width: 768px) {
    width: 100% !important;
  }
}

/* When off-canvas dialog is at 100% width stop the body from scrolling */
body.js-off-canvas-dialog-open {
  @media (max-width: 768px) {
    position: fixed;
  }
}

/* This is a page level content wrapper that shrinks when off-canvas is open. */
.dialog-off-canvas-main-canvas {
  transition:
    padding-right 0.7s ease,
    padding-left 0.7s ease,
    padding-top 0.3s ease;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}