style: make blurred the backdrop on Modal and Drawer components (#1918)

* styles: make blurred the backdrop on Modal and Drawer components * style: make blurred the backdrop on Drawer component Co-authored-by: Tahimi <tahimileon@gmail.com>
nexxtway · Oct 17, 2020 · 1d10ead · 1d10ead
1 parent c1eee4a
commit 1d10ead
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 0 deletions.
diff --git a/src/components/Drawer/styled/backDrop.js b/src/components/Drawer/styled/backDrop.js
@@ -16,6 +16,7 @@ const StyledBackDrop = attachThemeAttrs(styled.div)`
     position: fixed;
     z-index: 1000000;
     opacity: 1;
+    backdrop-filter: blur(5px);
 `;
 
 export default StyledBackDrop;
diff --git a/src/components/Modal/styled/backDrop.js b/src/components/Modal/styled/backDrop.js
@@ -17,12 +17,14 @@ const StyledBackDrop = attachThemeAttrs(styled.div)`
     align-items: center;
     position: fixed;
     transition: opacity 0.3s linear, z-index 0.3s linear;
+
     ${props =>
         props.isOpen &&
         `
             visibility: visible;
             z-index: 1000000;
             opacity: 1;
+            backdrop-filter: blur(5px);
         `};
 `;