Commit 4e7f1eb5 authored by Benthe Kuijpers's avatar Benthe Kuijpers
Browse files

add border block option in items and content row

parent 6de2386c
...@@ -168,7 +168,8 @@ ...@@ -168,7 +168,8 @@
"choices": { "choices": {
"white": "White", "white": "White",
"blocks": "Blocked yellow", "blocks": "Blocked yellow",
"yellow": "Yellow" "yellow": "Yellow",
"border": "Border"
}, },
"allow_null": 0, "allow_null": 0,
"other_choice": 0, "other_choice": 0,
...@@ -621,5 +622,5 @@ ...@@ -621,5 +622,5 @@
"hide_on_screen": "", "hide_on_screen": "",
"active": true, "active": true,
"description": "", "description": "",
"modified": 1616769697 "modified": 1616771781
} }
\ No newline at end of file
...@@ -92,6 +92,63 @@ ...@@ -92,6 +92,63 @@
&--yellow { &--yellow {
background: $bg-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 // If this is the first row, make it full height
......
...@@ -3,7 +3,10 @@ ...@@ -3,7 +3,10 @@
.page-header h1:before, .page-header h1:before,
.text-wrapper a.btn, .text-wrapper a.btn,
ol li:before, ol li:before,
ul li:before { ul li:before,
.content-row--border .container:before,
.content-row--border .container:after,
.border {
background: $purple; background: $purple;
} }
...@@ -18,7 +21,10 @@ ...@@ -18,7 +21,10 @@
.page-header h1:before, .page-header h1:before,
.text-wrapper a.btn, .text-wrapper a.btn,
ol li:before, ol li:before,
ul li:before { ul li:before,
.content-row--border .container:before,
.content-row--border .container:after,
.border {
background: $yellow; background: $yellow;
} }
......
...@@ -5,7 +5,12 @@ $image = get_sub_field('image'); ...@@ -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="content-row content-row--<?php echo $order; ?> content-row--<?php echo $background; ?>" data-index="<?php echo $row_index; ?>">
<div class="container container--flex"> <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"> <div class="image-wrapper">
<img src="<?php echo $image; ?>"> <img src="<?php echo $image; ?>">
</div> </div>
......
...@@ -8,6 +8,10 @@ $amount = ($total_items > 3) ? 'max' : 'min'; ...@@ -8,6 +8,10 @@ $amount = ($total_items > 3) ? 'max' : 'min';
<div class="container"> <div class="container">
<h3><?php the_sub_field('title'); ?></h3> <h3><?php the_sub_field('title'); ?></h3>
<?php <?php
if ($background === 'border') {
echo '<div class="border border--left"></div>';
echo '<div class="border border--right"></div>';
}
if (have_rows('items')) : ?> if (have_rows('items')) : ?>
<div class="grid grid--medium"> <div class="grid grid--medium">
<?php while (have_rows('items')) : the_row(); ?> <?php while (have_rows('items')) : the_row(); ?>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment