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 @@
"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
......@@ -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
......
......@@ -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;
}
......
......@@ -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>
......
......@@ -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(); ?>
......
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