feat: add elevation mixin

Automattic · Apr 8, 2024 · 168a967 · 168a967
1 parent 381e2f8
commit 168a967
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/assets/newspack-ui/scss/_mixins.scss b/assets/newspack-ui/scss/_mixins.scss
@@ -0,0 +1,9 @@
+@mixin newspack-ui-elevation($size: 1) {
+    @if $size == 1 {
+        box-shadow: 0 1px 10px rgba( 0, 0, 0, 0.07 );
+    } @else if $size == 2 {
+        box-shadow: 0 2px 20px rgba( 0, 0, 0, 0.14 );
+    }  @else if $size == 3 {
+        box-shadow: 0 3px 30px rgba( 0, 0, 0, 0.21 );
+    }
+}
diff --git a/assets/newspack-ui/scss/_modals.scss b/assets/newspack-ui/scss/_modals.scss
@@ -1,3 +1,5 @@
+@use 'mixins';
+
 .newspack-ui {
 	&__modal-container {
 		position: fixed;
@@ -14,16 +16,17 @@
 			z-index: 1;
 			inset: 0;
 			opacity: 0;
-			background: rgba( 0, 0, 0, 0.5 );
-			transition: opacity 0.1s linear;
+			background: rgba( 0, 0, 0, 0.7 );
+			transition: opacity 0.125s linear;
 		}
 		.newspack-ui__modal {
 			position: relative;
 			z-index: 2;
 			width: 100%;
 			transform: translateY( 50px );
 			opacity: 0;
-			transition: transform 0.1s linear, opacity 0.1s linear;
+			transition: transform 0.125s linear, opacity 0.125s linear;
+			@include mixins.newspack-ui-elevation(3);
 		}
 		&[data-state='open'] {
 			z-index: 99999;