wrapper.css

CSS for off-canvas dialog wrapper.

@internal

File

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

View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. /**

  8.  * @file

  9.  * CSS for off-canvas dialog wrapper.

  10.  *

  11.  * @internal

  12.  */

  13. #drupal-off-canvas-wrapper {

  14.   --off-canvas-wrapper-box-shadow: 0 0 0.25rem 2px rgba(0, 0, 0, 0.3);

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

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

  17. 

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

  19.   overflow: auto;

  20.   box-sizing: border-box;

  21.   height: 100%;

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

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

  24. 

  25.   /*

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

  27.    * dialog system uses to expand dialog widths.

  28.    */

  29. }

  30. @media (max-width: 48rem) {

  31.   #drupal-off-canvas-wrapper {

  32.     width: 100% !important;

  33.   }

  34. }

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

  36. @media (max-width: 48rem) {

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

  38.     position: fixed;

  39.   }

  40. }

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

  42. .dialog-off-canvas-main-canvas {

  43.   transition:

  44.     padding-right 0.7s ease,

  45.     padding-left 0.7s ease,

  46.     padding-top 0.3s ease;

  47. }

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

  49.   .dialog-off-canvas-main-canvas {

  50.     transition: none;

  51.   }

  52. }