www.aleph1.co.uk Git - yaffs-website/blob - web/core/themes/stable/css/core/dialog/off-canvas.css

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