wrapper.pcss.css

CSS for off-canvas dialog wrapper.

@internal

File

core/misc/dialog/off-canvas/css/wrapper.pcss.css

View source 
  1. /**

  2.  * @file

  3.  * CSS for off-canvas dialog wrapper.

  4.  *

  5.  * @internal

  6.  */

  7. #drupal-off-canvas-wrapper {

  8.   --off-canvas-wrapper-box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3);

  9.   --off-canvas-wrapper-border-color: #2d2d2d;

  10.   --off-canvas-wrapper-border-width: 1px;

  11. 

  12.   z-index: 501; /* Layer the dialog just under the toolbar. */

  13.   overflow: auto;

  14.   box-sizing: border-box;

  15.   height: 100%;

  16.   border-inline-start: solid var(--off-canvas-wrapper-border-width) var(--off-canvas-wrapper-border-color);

  17.   box-shadow: var(--off-canvas-wrapper-box-shadow);

  18. 

  19.   /*

  20.    * Force the off-canvas dialog to be 100% width at the same breakpoint the

  21.    * dialog system uses to expand dialog widths.

  22.    */

  23.   @media (max-width: 768px) {

  24.     width: 100% !important;

  25.   }

  26. }

  27. 

  28. /* When off-canvas dialog is at 100% width stop the body from scrolling */

  29. body.js-off-canvas-dialog-open {

  30.   @media (max-width: 768px) {

  31.     position: fixed;

  32.   }

  33. }

  34. 

  35. /* This is a page level content wrapper that shrinks when off-canvas is open. */

  36. .dialog-off-canvas-main-canvas {

  37.   transition:

  38.     padding-right 0.7s ease,

  39.     padding-left 0.7s ease,

  40.     padding-top 0.3s ease;

  41. 

  42.   @media (prefers-reduced-motion: reduce) {

  43.     transition: none;

  44.   }

  45. }