yaffs.net Git - yaffs-website/blob - web/core/modules/settings_tray/css/off-canvas.css

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