fix (separator): prevent bottom separator overlapping content (#3081)

* fixed z-index to separators * added position relative * added position relataive to specific blocks * Update src/block-components/separator/style.scss [skip ci] * Update src/block-components/separator/style.scss [skip ci] --------- Co-authored-by: prconcepcion <[email protected]> Co-authored-by: Benjamin Intal <[email protected]>
gambitph · Mar 22, 2024 · 7256de4 · 7256de4
1 parent 9488a58
commit 7256de4
Showing 1 changed file with 14 additions and 2 deletions.
diff --git a/src/block-components/separator/style.scss b/src/block-components/separator/style.scss
@@ -2,16 +2,28 @@
 
 .stk-block {
 	&:is(.stk-has-top-separator, .stk-has-bottom-separator) {
-		> *:not(.stk-video-background) { // Don't change the order of any video backgrounds, they stay at the back.
+		> *:not(.stk-video-background, .stk-separator) { // Don't change the order of any video backgrounds, they stay at the back.
 			z-index: 2;
 		}
 
+		// This is for the CTA and Hero block
+		:is(.stk-block-hero__content, .stk-block-call-to-action__content) {
+			position: relative;
+		}
+
 		.stk-separator ~ *:not(.stk-separator, .stk-video-background) {
 			z-index: 5;
 			position: relative;
 		}
 	}
 
+	// This is for the Feature block
+	&.stk-block-feature:is(.stk-has-bottom-separator) {
+		:is(.stk-container) {
+			position: relative;
+		}
+	}
+
 	.stk-separator__top {
 		transform: scaleY(-1);
 	}
@@ -50,7 +62,7 @@
 		pointer-events: none;
 		inset: -1px 0; // -1px on the sides might make horizontal scrollbars appear.
 		overflow: hidden;
-
+		z-index: 1;
 		svg {
 			filter: drop-shadow(0px 2px 20px rgba(153, 153, 153, 0.2));
 			left: 0;