Your IP : 216.73.216.138
<?php
function pp_column_render_css( $extensions ) {
// if ( array_key_exists( 'gradient', $extensions['col'] ) || in_array( 'gradient', $extensions['col'] ) ) {
// add_filter( 'fl_builder_render_css', 'pp_column_gradient_css', 10, 3 );
// }
// if ( array_key_exists( 'corners', $extensions['col'] ) || in_array( 'corners', $extensions['col'] ) ) {
// add_filter( 'fl_builder_render_css', 'pp_column_round_corners_css', 10, 3 );
// }
if ( array_key_exists( 'separators', $extensions['col'] ) || in_array( 'separators', $extensions['col'] ) ) {
add_filter( 'fl_builder_render_css', 'pp_column_separators_css', 10, 3 );
}
// if ( array_key_exists( 'shadow', $extensions['col'] ) || in_array( 'shadow', $extensions['col'] ) ) {
// add_filter( 'fl_builder_render_css', 'pp_column_shadow_css', 10, 3 );
// }
}
function pp_column_gradient_css( $css, $nodes, $global_settings ) {
foreach ( $nodes['columns'] as $column ) {
ob_start();
if ( isset( $column->settings->bg_type ) && 'pp_gradient' == $column->settings->bg_type ) {
$primary_color = pp_get_color_value( $column->settings->gradient_color['primary'] );
$secondary_color = pp_get_color_value( $column->settings->gradient_color['secondary'] );
?>
<?php if ( $column->settings->gradient_type == 'linear' ) { ?>
<?php if ( $column->settings->linear_direction == 'bottom' ) { ?>
.fl-node-<?php echo $column->node; ?> > .fl-col-content {
background-color: <?php echo $primary_color; ?>;
background-image: -webkit-linear-gradient(top, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
background-image: -moz-linear-gradient(bottom, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
background-image: -o-linear-gradient(bottom, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
background-image: -ms-linear-gradient(bottom, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
background-image: linear-gradient(to bottom, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
}
<?php } ?>
<?php if ( $column->settings->linear_direction == 'right' ) { ?>
.fl-node-<?php echo $column->node; ?> > .fl-col-content {
background-color: <?php echo $primary_color; ?>;
background-image: -webkit-linear-gradient(left, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
background-image: -moz-linear-gradient(right, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
background-image: -o-linear-gradient(right, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
background-image: -ms-linear-gradient(right, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
background-image: linear-gradient(to right, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
}
<?php } ?>
<?php if ( $column->settings->linear_direction == 'top_right_diagonal' ) { ?>
.fl-node-<?php echo $column->node; ?> > .fl-col-content {
background-color: <?php echo $primary_color; ?>;
background-image: -webkit-linear-gradient(45deg, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
background-image: -moz-linear-gradient(45deg, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
background-image: -o-linear-gradient(45deg, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
background-image: -ms-linear-gradient(45deg, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
background-image: linear-gradient(45deg, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
}
<?php } ?>
<?php if ( $column->settings->linear_direction == 'top_left_diagonal' ) { ?>
.fl-node-<?php echo $column->node; ?> > .fl-col-content {
background-color: <?php echo $primary_color; ?>;
background-image: -webkit-linear-gradient(135deg, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
background-image: -moz-linear-gradient(315deg, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
background-image: -o-linear-gradient(315deg, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
background-image: -ms-linear-gradient(315deg, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
background-image: linear-gradient(315deg, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
}
<?php } ?>
<?php if ( $column->settings->linear_direction == 'bottom_right_diagonal' ) { ?>
.fl-node-<?php echo $column->node; ?> > .fl-col-content {
background-color: <?php echo $primary_color; ?>;
background-image: -webkit-linear-gradient(315deg, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
background-image: -moz-linear-gradient(135deg, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
background-image: -o-linear-gradient(135deg, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
background-image: -ms-linear-gradient(135deg, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
background-image: linear-gradient(135deg, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
}
<?php } ?>
<?php if ( $column->settings->linear_direction == 'bottom_left_diagonal' ) { ?>
.fl-node-<?php echo $column->node; ?> > .fl-col-content {
background-color: <?php echo $primary_color; ?>;
background-image: -webkit-linear-gradient(255deg, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
background-image: -moz-linear-gradient(210deg, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
background-image: -o-linear-gradient(210deg, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
background-image: -ms-linear-gradient(210deg, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
background-image: linear-gradient(210deg, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
}
<?php } ?>
<?php } ?>
<?php if ( $column->settings->gradient_type == 'radial' ) { ?>
.fl-node-<?php echo $column->node; ?> > .fl-col-content {
background-color: <?php echo $primary_color; ?>;
background-image: -webkit-radial-gradient(circle, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
background-image: -moz-radial-gradient(circle, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
background-image: -o-radial-gradient(circle, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
background-image: -ms-radial-gradient(circle, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
background-image: radial-gradient(circle, <?php echo $primary_color; ?> 0%, <?php echo $secondary_color; ?> 100%);
}
<?php } ?>
<?php } ?>
<?php
$css .= ob_get_clean();
}
return $css;
}
function pp_column_separators_css( $css, $nodes, $global_settings ) {
foreach ( $nodes['columns'] as $column ) {
ob_start();
if ( isset( $column->settings->enable_separator ) && $column->settings->enable_separator == 'yes' ) { ?>
.fl-node-<?php echo $column->node; ?> {
position: relative;
<?php if ( $column->settings->separator_type != 'tilt' && $column->settings->separator_type != 'triangle_small_out' ) { ?>
overflow: hidden;
<?php } ?>
}
.fl-node-<?php echo $column->node; ?> .pp-col-separator {
position: absolute;
<?php echo $column->settings->separator_position; ?>: 0;
left: 0;
width: 100%;
z-index: 1;
}
.pp-previewing .fl-node-<?php echo $column->node; ?> .pp-col-separator {
z-index: 2;
}
.fl-node-<?php echo $column->node; ?> .pp-col-separator svg {
position: absolute;
left: 0;
width: 100%;
opacity: calc(<?php echo $column->settings->separator_opacity; ?>/100);
}
.fl-node-<?php echo $column->node; ?> .pp-col-separator-left,
.fl-node-<?php echo $column->node; ?> .pp-col-separator-right,
.fl-node-<?php echo $column->node; ?> .pp-col-separator-top,
.fl-node-<?php echo $column->node; ?> .pp-col-separator-top svg,
.fl-node-<?php echo $column->node; ?> .pp-col-separator-left svg,
.fl-node-<?php echo $column->node; ?> .pp-col-separator-right svg {
top: 0;
bottom: auto;
}
.fl-node-<?php echo $column->node; ?> .pp-col-separator-bottom,
.fl-node-<?php echo $column->node; ?> .pp-col-separator-bottom svg {
top: auto;
bottom: 0;
}
.fl-node-<?php echo $column->node; ?> .pp-col-separator.pp-col-separator-left {
left: 0;
right: auto;
z-index: 0;
}
.fl-node-<?php echo $column->node; ?> .pp-col-separator.pp-col-separator-right {
left: auto;
right: 0;
z-index: 0;
}
.fl-node-<?php echo $column->node; ?> .pp-col-separator-left svg {
left: 0;
right: auto;
<?php $scal_y_left = ($column->settings->separator_type == 'triangle_small_out') ? '1' : '-1'; ?>
transform: rotate(90deg) scaleY(<?php echo $scal_y_left; ?>) translateX(calc(-<?php echo $column->settings->separator_height; ?>px/2));
transform-origin: left;
}
.fl-node-<?php echo $column->node; ?> .pp-col-separator-right svg {
left: auto;
right: 0;
<?php $scal_y_right = ($column->settings->separator_type == 'triangle_small_out') ? '-1' : '1'; ?>
transform: rotate(90deg) scale(-1, <?php echo $scal_y_right; ?>) translateX(calc(<?php echo $column->settings->separator_height; ?>px/2));
transform-origin: right;
}
<?php if ( $column->settings->separator_type == 'tilt' ) { ?>
<?php $sep_height = $column->settings->separator_height; ?>
.fl-node-<?php echo $column->node; ?> .pp-col-separator-right svg.pp-tilt-right {
transform: rotate(90deg) scale(-1, 1) translate3d(calc(<?php echo $sep_height; ?>px/2), calc(-<?php echo $sep_height; ?>px/2), 0);
}
.fl-node-<?php echo $column->node; ?> .pp-col-separator-left svg.pp-tilt-left {
transform: rotate(90deg) scaleY(-1) translate3d(calc(-<?php echo $sep_height; ?>px/2), calc(-<?php echo $sep_height; ?>px/2), 0);
}
<?php } ?>
.fl-node-<?php echo $column->node; ?> .pp-col-separator-bottom svg.pp-big-triangle,
.fl-node-<?php echo $column->node; ?> .pp-col-separator-top svg.pp-big-triangle-left,
.fl-node-<?php echo $column->node; ?> .pp-col-separator-top svg.pp-big-triangle-right,
.fl-node-<?php echo $column->node; ?> .pp-col-separator-bottom svg.pp-small-triangle,
.fl-node-<?php echo $column->node; ?> .pp-col-separator-top svg.pp-tilt-right,
.fl-node-<?php echo $column->node; ?> .pp-col-separator-bottom svg.pp-tilt-right,
.fl-node-<?php echo $column->node; ?> .pp-col-separator-bottom svg.pp-curve,
.fl-node-<?php echo $column->node; ?> .pp-col-separator-bottom svg.pp-wave,
.fl-node-<?php echo $column->node; ?> .pp-col-separator-top svg.pp-cloud,
.fl-node-<?php echo $column->node; ?> .pp-col-separator-bottom svg.pp-slit,
.fl-node-<?php echo $column->node; ?> .pp-col-separator-bottom svg.pp-slit {
transform: scaleY(-1);
}
<?php if ( $column->settings->separator_type == 'triangle_small_out' ) { ?>
.fl-node-<?php echo $column->node; ?> .pp-col-separator-top svg.pp-small-triangle {
top: -<?php echo $column->settings->separator_height; ?>px;
transform: scaleY(-1);
}
.fl-node-<?php echo $column->node; ?> .pp-col-separator-bottom svg.pp-small-triangle {
bottom: -<?php echo $column->settings->separator_height; ?>px;
transform: scaleY(1);
}
.fl-node-<?php echo $column->node; ?> .pp-col-separator-left svg.pp-small-triangle {
left: calc(-<?php echo $column->settings->separator_height; ?>px/2);
}
.fl-node-<?php echo $column->node; ?> .pp-col-separator-right svg.pp-small-triangle {
right: calc(-<?php echo $column->settings->separator_height; ?>px/2);
}
<?php } ?>
<?php if ( $column->settings->separator_type == 'wave_out' ) { ?>
.fl-node-<?php echo $column->node; ?> .pp-col-separator-bottom svg.pp-wave {
transform: scaleY(1) translateY(<?php echo $column->settings->separator_height; ?>px);
}
<?php } ?>
.fl-node-<?php echo $column->node; ?> .pp-col-separator svg.pp-big-triangle-right,
.fl-node-<?php echo $column->node; ?> .pp-col-separator-bottom svg.pp-tilt-right {
transform: scaleX(-1);
}
.fl-node-<?php echo $column->node; ?> .pp-col-separator-top svg.pp-tilt-left {
transform: scale(-1);
}
.fl-node-<?php echo $column->node; ?> .pp-col-separator .pp-zigzag:before,
.fl-node-<?php echo $column->node; ?> .pp-col-separator .pp-zigzag:after {
content: '';
pointer-events: none;
position: absolute;
right: 0;
left: 0;
z-index: 1;
display: block;
height: <?php echo $column->settings->separator_height; ?>px;
background-size: <?php echo $column->settings->separator_height; ?>px 100%;
}
.fl-node-<?php echo $column->node; ?> .pp-col-separator .pp-zigzag:after {
top: 100%;
background-image: -webkit-gradient(linear, 0 0, 300% 100%, color-stop(0.25, <?php echo pp_get_color_value( $column->settings->separator_color ); ?>), color-stop(0.25, <?php echo pp_get_color_value( $column->settings->separator_color ); ?>));
background-image: linear-gradient(135deg, <?php pp_get_color_value( $column->settings->separator_color ); ?> 25%, transparent 25%), linear-gradient(225deg, <?php echo pp_get_color_value( $column->settings->separator_color ); ?> 25%, transparent 25%);
background-position: 50%;
}
@media only screen and (max-width: <?php echo $global_settings->medium_breakpoint; ?>px) {
.fl-node-<?php echo $column->node; ?> .pp-col-separator {
<?php if ( 'no' == $column->settings->separator_tablet ) { ?>
display: none;
<?php } ?>
<?php if ( isset( $settings->separator_position_medium ) && ! empty( $settings->separator_position_medium ) ) { ?>
<?php echo $settings->separator_position; ?>: auto;
<?php echo $settings->separator_position_medium; ?>: 0;
<?php } ?>
}
<?php if ( 'yes' == $column->settings->separator_tablet && $column->settings->separator_height_tablet > 0 ) { ?>
.fl-node-<?php echo $column->node; ?> .pp-col-separator svg {
height: <?php echo $column->settings->separator_height_tablet; ?>px;
}
<?php } ?>
}
@media only screen and (max-width: <?php echo $global_settings->responsive_breakpoint; ?>px) {
.fl-node-<?php echo $column->node; ?> .pp-col-separator {
<?php if ( 'no' == $column->settings->separator_mobile ) { ?>
display: none;
<?php } else { ?>
display: block;
<?php } ?>
<?php if ( isset( $settings->separator_position_responsive ) && ! empty( $settings->separator_position_responsive ) ) { ?>
<?php echo $settings->separator_position; ?>: auto;
<?php if ( isset( $settings->separator_position_medium ) && ! empty( $settings->separator_position_medium ) ) { ?>
<?php echo $settings->separator_position_medium; ?>: auto;
<?php } ?>
<?php echo $settings->separator_position_responsive; ?>: 0;
<?php } ?>
}
<?php if ( 'yes' == $column->settings->separator_mobile && $column->settings->separator_height_mobile > 0 ) { ?>
.fl-node-<?php echo $column->node; ?> .pp-col-separator svg {
height: <?php echo $column->settings->separator_height_mobile; ?>px;
}
<?php } ?>
} <?php
}
$css .= ob_get_clean();
}
return $css;
}
/** Corners */
function pp_column_round_corners_css( $css, $nodes, $global_settings ) {
foreach ( $nodes['columns'] as $column ) {
ob_start();
?>
.fl-node-<?php echo $column->node; ?> > .fl-col-content {
<?php if ( isset( $column->settings->pp_round_corners ) ) { ?>
<?php if ( $column->settings->pp_round_corners['top_left'] > 0 ) { ?>
border-top-left-radius: <?php echo $column->settings->pp_round_corners['top_left']; ?>px;
<?php } ?>
<?php if ( $column->settings->pp_round_corners['top_right'] > 0 ) { ?>
border-top-right-radius: <?php echo $column->settings->pp_round_corners['top_right']; ?>px;
<?php } ?>
<?php if ( $column->settings->pp_round_corners['bottom_left'] > 0 ) { ?>
border-bottom-left-radius: <?php echo $column->settings->pp_round_corners['bottom_left']; ?>px;
<?php } ?>
<?php if ( $column->settings->pp_round_corners['bottom_right'] > 0 ) { ?>
border-bottom-right-radius: <?php echo $column->settings->pp_round_corners['bottom_right']; ?>px;
<?php } ?>
<?php } ?>
}
<?php $css .= ob_get_clean();
}
return $css;
}
/** Shadow */
function pp_column_shadow_css( $css, $nodes, $global_settings ) {
foreach ( $nodes['columns'] as $column ) {
ob_start();
?>
<?php if ( isset( $column->settings->pp_box_shadow ) ) { ?>
.fl-node-<?php echo $column->node; ?> > .fl-col-content {
box-shadow: <?php echo $column->settings->pp_box_shadow['vertical']; ?>px <?php echo $column->settings->pp_box_shadow['horizontal']; ?>px <?php echo $column->settings->pp_box_shadow['blur']; ?>px <?php echo $column->settings->pp_box_shadow['spread']; ?>px <?php echo pp_hex2rgba('#'.$column->settings->pp_box_shadow_color, $column->settings->pp_box_shadow_opacity / 100); ?>;
transition: box-shadow <?php echo $column->settings->pp_box_shadow_transition; ?>ms ease-in-out, transform <?php echo $column->settings->pp_box_shadow_transition; ?>ms ease-in-out;
will-change: box-shadow;
}
<?php if ( 'yes' == $column->settings->pp_box_shadow_hover_switch ) { ?>
.fl-node-<?php echo $column->node; ?> > .fl-col-content:hover {
box-shadow: <?php echo $column->settings->pp_box_shadow_hover['vertical']; ?>px <?php echo $column->settings->pp_box_shadow_hover['horizontal']; ?>px <?php echo $column->settings->pp_box_shadow_hover['blur']; ?>px <?php echo $column->settings->pp_box_shadow_hover['spread']; ?>px <?php echo pp_hex2rgba('#'.$column->settings->pp_box_shadow_color_hover, $column->settings->pp_box_shadow_opacity_hover / 100); ?>;
transition: box-shadow <?php echo $column->settings->pp_box_shadow_transition; ?>ms ease-in-out, transform <?php echo $column->settings->pp_box_shadow_transition; ?>ms ease-in-out;
}
<?php } ?>
<?php }
$css .= ob_get_clean();
}
return $css;
}