responsive flyouts

elastic · Dec 21, 2017 · 86c5ee4 · 86c5ee4
1 parent 008a909
commit 86c5ee4
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/src/components/flyout/_flyout.scss b/src/components/flyout/_flyout.scss
@@ -35,3 +35,20 @@ $flyoutSizes: (
     transform: translateX(0%);
   }
 }
+
+// On small screens we force these to takeover the screen.
+@include screenSmall {
+  .euiFlyout {
+    left: 0;
+    width: auto;
+    border-left: none;
+  }
+}
+
+@include screenXSmall {
+  .euiFlyout {
+    left: 0;
+    width: auto;
+    border-left: none;
+  }
+}
diff --git a/src/components/overlay_mask/__snapshots__/overlay_mask.test.js.snap b/src/components/overlay_mask/__snapshots__/overlay_mask.test.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiOverlayMask is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiOverlayMask testClass1 testClass2"
+  data-test-subj="test subject string"
+/>
+`;