mantismamita
8/10/2015 - 9:25 AM
Progress row module
Progress row module
.progress-row{
background-color: $secondary-text-color;
padding: 100px 0 100px 0;
color: #fff;
position: relative;
.wrap{
border-bottom: 2px solid #fff;
}
.progress-title{
font-weight: 600;
margin-bottom: 20px;
font-size: 30px;
text-align: center;
color: #fff;
&:after{
content: "_____";
display: block;
font-weight: 400;
}
}
.progress-subtitle {
font-weight: 400;
margin-bottom: 60px;
font-size: 20px;
text-align: center;
color: #fff;
}
}
.progress-step{
text-align: center;
position: relative;
padding-bottom: 40px;
h5, h6, .fa{
color: $primary-color-text;
}
h6{
font-weight: 400;
}
.panel{
min-height: 216px;
}
.panel .fa{
font-size: 42px;
color: $primary-color-dark;
padding: 20px 0;
}
.fa-circle-o{
position: absolute;
bottom: -10px;
margin-left: -10px;
background-color: $secondary-text-color;
border-radius: 100%;
color: #fff;
font-size: 20px;
height: 20px;
width: 20px;
}
&:hover{
.panel{
background-color: $accent-color;
.fa, h5, h6 {
color: #fff;
}
&:after{
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 12px 12px 0 12px;
border-color: $accent-color transparent transparent transparent;
position: absolute;
bottom: -12px;
margin-left: -12px;
}
}
.fa-circle-o{
background-color: $primary-color-light;
background-position: center center;
color: transparent;
border: 3px solid $primary-color-dark;
font-weight: bold;
}
}
}
.progress-step:first-of-type {
margin-left: 0;
}function kc_do_frontpage_progress_row() { ?>
<?php
if (have_rows('progress_repeater')):
$rows= get_field('progress_repeater');
$count= count($rows);
if ($count == 1 ){
$class = "full-width progress-step";
} elseif ( $count == 2 ) {
$class = "one-half progress-step";
} elseif ( $count == 3) {
$class = "one-third progress-step";
} elseif ( $count == 4) {
$class = "one-fourth progress-step";
} else {
$class = "one-fifth progress-step";
}
?>
<div class="progress-row">
<div class="wrap">
<h4 class="progress-title"><?php ( get_field('progress_title') ? the_field('progress_title') : '' );?></h4>
<h5 class="progress-subtitle"><?php ( get_field('progress_subtitle') ? the_field('progress_subtitle') : '' );?></h5>
<?php while (have_rows('progress_repeater')):
the_row();
$step_icon = get_sub_field('step_icon');
?>
<div class="<?php echo $class; ?>">
<div class="panel">
<i class="fa <?php echo $step_icon; ?>"></i>
<h5 class="step-title"><?php the_sub_field('step_title'); ?></h5>
<h6 class="step-description"><?php the_sub_field('step_description'); ?></h6>
<a href="<?php the_sub_field('step_link'); ?>"><span class="div-link"></span></a>
</div>
<i class="fa fa-circle-o"></i>
</div>
<?php
endwhile; ?>
</div>
</div>
<?php endif; ?>
<?php
}#Progress module
##Requirements -WordPress -ACF Pro
[
{
"key": "group_55c65ddbd14ea",
"title": "Progress Module",
"fields": [
{
"key": "field_55c66f980c854",
"label": "Progress Title",
"name": "progress_title",
"type": "text",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"prepend": "",
"append": "",
"maxlength": "",
"readonly": 0,
"disabled": 0
},
{
"key": "field_55c66faf0c855",
"label": "Progress Subtitle",
"name": "progress_subtitle",
"type": "text",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"prepend": "",
"append": "",
"maxlength": "",
"readonly": 0,
"disabled": 0
},
{
"key": "field_55c65e9d99347",
"label": "Progress Repeater",
"name": "progress_repeater",
"type": "repeater",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"min": 3,
"max": 5,
"layout": "block",
"button_label": "Add Row",
"sub_fields": [
{
"key": "field_55c660149934a",
"label": "Step Link",
"name": "step_link",
"type": "page_link",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": 25,
"class": "",
"id": ""
},
"post_type": [
],
"taxonomy": [
],
"allow_null": 0,
"multiple": 0
},
{
"key": "field_55c65f8799348",
"label": "Step Icon",
"name": "step_icon",
"type": "text",
"instructions": "Font Awesome Icon class name",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": 25,
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"prepend": "",
"append": "",
"maxlength": "",
"readonly": 0,
"disabled": 0
},
{
"key": "field_55c65e3599346",
"label": "Step Title",
"name": "step_title",
"type": "text",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": 25,
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"prepend": "",
"append": "",
"maxlength": "",
"readonly": 0,
"disabled": 0
},
{
"key": "field_55c65ffa99349",
"label": "Step Description",
"name": "step_description",
"type": "textarea",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": 25,
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"maxlength": "",
"rows": "",
"new_lines": "wpautop",
"readonly": 0,
"disabled": 0
}
]
}
],
"location": [
[
{
"param": "page_type",
"operator": "==",
"value": "front_page"
}
]
],
"menu_order": 0,
"position": "acf_after_title",
"style": "default",
"label_placement": "top",
"instruction_placement": "field",
"hide_on_screen": ""
}
]