add border block option in items and content row

wordpress/wp-content/themes/makeitopen/acf-json/group_603c986dd28a4.json

@@ -168,7 +168,8 @@
                             "choices": {
                                 "white": "White",
                                 "blocks": "Blocked yellow",
-                                "yellow": "Yellow"
+                                "yellow": "Yellow",
+                                "border": "Border"
                             },
                             "allow_null": 0,
                             "other_choice": 0,
@@ -621,5 +622,5 @@
     "hide_on_screen": "",
     "active": true,
     "description": "",
-    "modified": 1616769697
+    "modified": 1616771781
 }
\ No newline at end of file

wordpress/wp-content/themes/makeitopen/assets/scss/partials/_content-row.scss

@@ -92,6 +92,63 @@
 	&--yellow {
 		background: $bg-yellow;
 	}
+
+	&--border {
+		padding: 30px 0;
+
+		@media only screen and (min-width: $large) {
+			padding: 90px 0;
+		}
+
+		.container {
+			padding: 30px;
+			position: relative;
+			max-width: 1060px;
+
+			@media only screen and (min-width: $large) {
+				padding: 50px;
+				max-width: 1020px;
+			}
+
+			&:before,
+			&:after,
+			.border {
+				position: absolute;
+				content: " ";
+				mix-blend-mode: multiply;
+				background: $yellow;
+			}
+
+			.border {
+				top: 0;
+				bottom: 0;
+				width: 8px;
+
+				&--left {
+					left: 0;
+				}
+
+				&--right {
+					right: 0;
+				}
+			}
+
+			&:before,
+			&:after {
+				height: 8px;
+				left: 0;
+				right: 0;
+			}
+
+			&:before {
+				top: 0;
+			}
+
+			&:after {
+				bottom: 0;
+			}
+		}
+	}
 }
 
 // If this is the first row, make it full height

wordpress/wp-content/themes/makeitopen/assets/scss/templates/_page.scss

@@ -3,7 +3,10 @@
 		.page-header h1:before,
 		.text-wrapper a.btn,
 		ol li:before,
-		ul li:before {
+		ul li:before,
+		.content-row--border .container:before,
+		.content-row--border .container:after,
+		.border {
 			background: $purple;
 		}
 
@@ -18,7 +21,10 @@
 		.page-header h1:before,
 		.text-wrapper a.btn,
 		ol li:before,
-		ul li:before {
+		ul li:before,
+		.content-row--border .container:before,
+		.content-row--border .container:after,
+		.border {
 			background: $yellow;
 		}
 

wordpress/wp-content/themes/makeitopen/template-parts/page-builder-rows/content.php

@@ -5,7 +5,12 @@ $image = get_sub_field('image');
 ?>
 <div class="content-row content-row--<?php echo $order; ?> content-row--<?php echo $background; ?>" data-index="<?php echo $row_index; ?>">
 	<div class="container container--flex">
-		<?php if ($image) { ?>
+		<?php
+		if ($background === 'border') {
+			echo '<div class="border border--left"></div>';
+			echo '<div class="border border--right"></div>';
+		}
+		if ($image) { ?>
 			<div class="image-wrapper">
 				<img src="<?php echo $image; ?>">
 			</div>

wordpress/wp-content/themes/makeitopen/template-parts/page-builder-rows/items.php

@@ -8,6 +8,10 @@ $amount = ($total_items > 3) ? 'max' : 'min';
 	<div class="container">
 		<h3><?php the_sub_field('title'); ?></h3>
 		<?php
+		if ($background === 'border') {
+			echo '<div class="border border--left"></div>';
+			echo '<div class="border border--right"></div>';
+		}
 		if (have_rows('items')) : ?>
 			<div class="grid grid--medium">
 				<?php while (have_rows('items')) : the_row(); ?>