off-canvas.css 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. /**
  2. * @file
  3. * CSS for off-canvas dialog.
  4. */
  5. /* Position the off-canvas dialog container outside the right of the viewport. */
  6. .ui-dialog-off-canvas {
  7. box-sizing: border-box;
  8. height: 100%;
  9. overflow: visible;
  10. }
  11. /* Wrap the form that's inside the off-canvas dialog. */
  12. .ui-dialog-off-canvas .ui-dialog-content {
  13. padding: 0 20px;
  14. /* Prevent horizontal scrollbar. */
  15. overflow-x: hidden;
  16. overflow-y: auto;
  17. }
  18. [dir="rtl"] .ui-dialog-off-canvas .ui-dialog-content {
  19. text-align: right;
  20. }
  21. /* Position the off-canvas dialog container outside the right of the viewport. */
  22. .ui-dialog-off-canvas {
  23. box-sizing: border-box;
  24. height: 100%;
  25. overflow: visible;
  26. }
  27. /* Wrap the form that's inside the off-canvas dialog. */
  28. .ui-dialog-off-canvas #drupal-off-canvas {
  29. padding: 0 20px 20px;
  30. /* Prevent horizontal scrollbar. */
  31. overflow-x: hidden;
  32. overflow-y: auto;
  33. }
  34. [dir="rtl"] .ui-dialog-off-canvas #drupal-off-canvas {
  35. text-align: right;
  36. }
  37. /*
  38. * Force the off-canvas dialog to be 100% width at the same breakpoint the
  39. * dialog system uses to expand dialog widths.
  40. */
  41. @media all and (max-width: 48em) { /* 768px */
  42. .ui-dialog.ui-dialog-off-canvas {
  43. width: 100% !important;
  44. }
  45. /* When off-canvas dialog is at 100% width stop the body from scrolling */
  46. .js-off-canvas-dialog-open {
  47. height: 100%;
  48. overflow-y: hidden;
  49. }
  50. }