feat: add backdrop-filter to drawer and modal backdrop

dekk-app · Aug 22, 2021 · cbb5d04 · cbb5d04
1 parent 1f4c1a4
commit cbb5d04
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/src/molecules/drawer/styled.ts b/src/molecules/drawer/styled.ts
@@ -27,7 +27,8 @@ export const StyledDrawerBackdrop = styled.div`
 	right: 0;
 	bottom: 0;
 	left: 0;
-	background: rgba(0, 0, 0, 0.3);
+	background: rgba(0, 0, 0, 0.5);
+	backdrop-filter: blur(${pxToRem(4)}) saturate(50%);
 `;
 
 export const StyledDrawerHeader = styled.header`

diff --git a/src/molecules/modal/styled.ts b/src/molecules/modal/styled.ts
@@ -132,10 +132,11 @@ export const StyledModalBackdrop = styled.div`
 	right: 0;
 	bottom: 0;
 	left: 0;
-	background: rgba(0, 0, 0, 0.3);
+	background: rgba(0, 0, 0, 0.5);
 	${({ theme }) => css`
 		${theme.mq.m} {
 			display: block;
+			backdrop-filter: blur(${pxToRem(4)}) saturate(50%);
 		}
 	`};
 `;