X-Git-Url: http://www.aleph1.co.uk/gitweb/?a=blobdiff_plain;ds=sidebyside;f=web%2Fcore%2Fmodules%2Fsettings_tray%2Fcss%2Foff-canvas.css;fp=web%2Fcore%2Fmodules%2Fsettings_tray%2Fcss%2Foff-canvas.css;h=d7f3258b2658ddd30570e49e24af969025992f52;hb=9917807b03b64faf00f6a1f29dcb6eafc454efa5;hp=0000000000000000000000000000000000000000;hpb=aea91e65e895364e460983b890e295aa5d5540a5;p=yaffs-website

diff --git a/web/core/modules/settings_tray/css/off-canvas.css b/web/core/modules/settings_tray/css/off-canvas.css
new file mode 100644
index 000000000..d7f3258b2
--- /dev/null
+++ b/web/core/modules/settings_tray/css/off-canvas.css
@@ -0,0 +1,57 @@
+/**
+ * @file
+ * CSS for off-canvas dialog.
+ *
+ * @todo Move CSS into core dialog library https://www.drupal.org/node/2784443.
+ */
+
+/* Position the off-canvas dialog container outside the right of the viewport. */
+.ui-dialog-off-canvas {
+  box-sizing: border-box;
+  height: 100%;
+  overflow: visible;
+}
+
+/* Wrap the form that's inside the off-canvas dialog. */
+.ui-dialog-off-canvas .ui-dialog-content {
+  padding: 0 20px;
+  /* Prevent horizontal scrollbar. */
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+[dir="rtl"] .ui-dialog-off-canvas .ui-dialog-content {
+  text-align: right;
+}
+
+/* Position the dialog-off-canvas tray container outside the right of the viewport. */
+.ui-dialog-off-canvas {
+  box-sizing: border-box;
+  height: 100%;
+  overflow: visible;
+}
+
+/* Wrap the form that's inside the dialog-off-canvas tray. */
+.ui-dialog-off-canvas #drupal-off-canvas {
+  padding: 0 20px;
+  /* Prevent horizontal scrollbar. */
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+[dir="rtl"] .ui-dialog-off-canvas #drupal-off-canvas {
+  text-align: right;
+}
+
+/*
+ * Force the tray to be 100% width at the same breakpoint the dialog system uses
+ * to expand dialog widths.
+ */
+@media all and (max-width: 48em) { /* 768px */
+  .ui-dialog.ui-dialog-off-canvas {
+    width: 100% !important;
+  }
+  /* When tray is at 100% width stop the body from scrolling */
+  .js-tray-open {
+    height: 100%;
+    overflow-y: hidden;
+  }
+}