fix: drawer scrim positioning

hperrin · Apr 3, 2021 · 444ebf9 · 444ebf9
1 parent 125edbb
commit 444ebf9
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/packages/drawer/Scrim.svelte b/packages/drawer/Scrim.svelte
@@ -2,7 +2,9 @@
   this={component}
   bind:this={element}
   use={[forwardEvents, ...use]}
-  class="mdc-drawer-scrim {className}"
+  class="mdc-drawer-scrim {className} {fixed
+    ? ''
+    : 'smui-drawer-scrim__absolute'}"
   on:click={(event) => dispatch(element, 'SMUI:drawer:scrim:click', event)}
   {...exclude($$props, ['use', 'class', 'component'])}
 >
@@ -25,6 +27,7 @@
   export let use = [];
   let className = '';
   export { className as class };
+  export let fixed = true;
 
   let element;
 

diff --git a/packages/drawer/_style.scss b/packages/drawer/_style.scss
@@ -1 +1,5 @@
-@import "@material/drawer/mdc-drawer";
+@import '@material/drawer/mdc-drawer';
+
+.mdc-drawer-scrim.smui-drawer-scrim__absolute {
+  position: absolute;
+}
diff --git a/site/src/routes/demo/drawer.svelte b/site/src/routes/demo/drawer.svelte
@@ -203,7 +203,9 @@
         </Content>
       </Drawer>
 
-      <Scrim />
+      <!-- Don't include fixed={false} if this is a page wide drawer.
+        It adds a style for absolute positioning. -->
+      <Scrim fixed={false} />
       <AppContent class="app-content">
         <main class="main-content">
           <Button on:click={() => (myDrawer2Open = !myDrawer2Open)}