💄 Adjust CSS to make the overlay look nice

woocommerce · Feb 6, 2025 · 5851724 · 5851724
1 parent e79a6be
commit 5851724
Showing 1 changed file with 15 additions and 7 deletions.
diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_spinner-overlay.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_spinner-overlay.scss
@@ -1,12 +1,10 @@
 .ppcp-r-spinner-overlay {
-	width: var(--spinner-overlay-width);
-	height: var(--spinner-overlay-height);
-	box-shadow: var(--spinner-overlay-box-shadow);
 	background: var(--spinner-overlay-color);
-	position: fixed;
-	left: 50%;
-	top: 50%;
-	transform: translate(-50%, -50%);
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	left: 0;
+	top: 0;
 	z-index: 10;
 
 	.components-spinner {
@@ -26,4 +24,14 @@
 		text-align: center;
 		top: calc(50% + 20px + var(--spinner-size));
 	}
+
+	&.ppcp--is-modal {
+		position: fixed;
+		width: var(--spinner-overlay-width);
+		height: var(--spinner-overlay-height);
+		box-shadow: var(--spinner-overlay-box-shadow);
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+	}
 }