has_style ) {
if ( ! wp_style_is( 'kadence-blocks-' . $this->block_name, 'enqueued' ) ) {
$this->enqueue_style( 'kadence-blocks-' . $this->block_name );
if ( $inline ) {
$this->should_render_inline_stylesheet( 'kadence-blocks-' . $this->block_name );
}
}
}
if ( ( isset( $attributes['bgImg'] ) && ! empty( $attributes['bgImg'] ) && isset( $attributes['bgImgAttachment'] ) && 'parallax' === $attributes['bgImgAttachment'] ) || ( isset( $attributes['overlayBgImg'] ) && ! empty( $attributes['overlayBgImg'] ) && isset( $attributes['overlayBgImgAttachment'] ) && 'parallax' === $attributes['overlayBgImgAttachment'] ) ) {
$this->enqueue_script( 'kadence-blocks-parallax-js' );
}
if ( isset( $attributes['backgroundSettingTab'] ) && 'slider' === $attributes['backgroundSettingTab'] ) {
$this->enqueue_style( 'kadence-blocks-splide' );
if ( $inline ) {
$this->should_render_inline_stylesheet( 'kadence-blocks-splide' );
}
$this->enqueue_script( 'kadence-blocks-splide-init' );
}
$is_background_video = isset( $attributes['backgroundSettingTab'] ) && 'video' === $attributes['backgroundSettingTab'];
$has_background_video_content = $is_background_video && isset( $attributes['backgroundVideo'] ) && isset( $attributes['backgroundVideo'][0] );
$show_play_pause = $has_background_video_content && isset( $attributes['backgroundVideo'][0]['btns'] ) && true === $attributes['backgroundVideo'][0]['btns'];
$show_audio_is_default = ( $has_background_video_content && ( ! isset( $attributes['backgroundVideo'][0]['btnsMute'] ) ) );
$show_audio = $has_background_video_content && ( ( $show_audio_is_default && $show_play_pause && isset( $attributes['backgroundVideo'][0]['mute'] ) && false === $attributes['backgroundVideo'][0]['mute'] ) || ( isset( $attributes['backgroundVideo'][0]['btnsMute'] ) && $attributes['backgroundVideo'][0]['btnsMute'] ) );
if ( $show_play_pause || $show_audio ) {
$this->enqueue_script( 'kadence-blocks-video-bg' );
}
}
/**
* Return a grid tempate coulmns string for custom column widths.
*
* @param object $css the css object.
* @param int $columns the amount of columns.
* @param string $gap the gap.
* @param int $column1 the first column width.
* @param int $column2 the second column width.
* @param int $column3 the third column width.
* @param int $column4 the fourth column width.
* @param int $column5 the fifth column width.
* @param int $column6 the sixth column width.
*/
public function get_custom_layout( $css, $columns, $gap = '', $column1 = null, $column2 = null, $column3 = null, $column4 = null, $column5 = null, $column6 = null ) {
$grid_layout_string = '';
if ( $columns > 1 ) {
$gap_string = ! empty( $gap ) ? $gap : 'var(--kb-default-row-gutter, var(--global-row-gutter-md, 2rem))';
$column_widths = array( $column1, $column2, $column3, $column4, $column5, $column6 );
$column_width_sum = 0;
foreach ( range( 0, $columns - 1 ) as $column ) {
$column_width = $column_widths[ $column ];
if ( $column == $columns - 1 ) {
//assume the last column width to make 100
$column_width = abs( $column_width_sum - 100 );
}
$grid_layout_string .= 'minmax(0, calc(' . $column_width . '% - ((' . $gap_string . ' * ' . ($columns - 1) . ' )/' . $columns . ')))';
$column_width_sum += $column_width;
}
}
return $grid_layout_string;
}
/**
* Render for block scripts block.
*
* @param object $css the css object.
* @param int $columns the amount of columns.
* @param string $layout the layout of the row.
* @param string $inner_selector the inner selector.
* @param string $gap the gap.
* @param int $column1 the first column width.
* @param int $column2 the second column width.
* @param int $column3 the third column width.
* @param int $column4 the fourth column width.
* @param int $column5 the fifth column width.
* @param int $column6 the sixth column width.
*/
public function get_template_columns( $css, $columns, $layout, $inner_selector, $gap = '', $column1 = null, $column2 = null, $column3 = null, $column4 = null, $column5 = null, $column6 = null ) {
$grid_layout = 'minmax(0, 1fr)';
switch ( $columns ) {
case 1:
switch ( $layout ) {
case 'grid-layout':
$grid_layout = 'repeat(12, minmax(0, 1fr))';
break;
}
break;
case 2:
if ( ! empty( $column1 ) ) {
$grid_layout = $this->get_custom_layout( $css, $columns, $gap, $column1, $column2, $column3, $column4, $column5, $column6 );
} else {
switch ( $layout ) {
case 'left-golden':
$grid_layout = 'minmax(0, 2fr) minmax(0, 1fr)';
break;
case 'right-golden':
$grid_layout = 'minmax(0, 1fr) minmax(0, 2fr)';
break;
case 'row':
$grid_layout = 'minmax(0, 1fr)';
break;
default:
$grid_layout = 'repeat(2, minmax(0, 1fr))';
break;
}
}
break;
case 3:
if ( ! empty( $column1 ) && ! empty( $column2 ) ) {
if ( abs( $column1 ) === 50 && abs( $column2 ) === 25 ) {
$grid_layout = 'minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr)';
} else if ( abs( $column1 ) === 25 && abs( $column2 ) === 50 ) {
$grid_layout = 'minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr)';
} else if ( abs( $column1 ) === 25 && abs( $column2 ) === 25 ) {
$grid_layout = 'minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr)';
} else {
$grid_layout = $this->get_custom_layout( $css, $columns, $gap, $column1, $column2, $column3, $column4, $column5, $column6 );
}
} else {
switch ( $layout ) {
case 'left-half':
$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
$grid_layout = 'minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr)';
break;
case 'right-half':
$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
$grid_layout = 'minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr)';
break;
case 'center-half':
$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
$grid_layout = 'minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr)';
break;
case 'center-wide':
$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
$grid_layout = 'minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr)';
break;
case 'center-exwide':
$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
$grid_layout = 'minmax(0, 1fr) minmax(0, 6fr) minmax(0, 1fr)';
break;
case 'first-row':
$grid_layout = 'repeat(2, minmax(0, 1fr))';
$css->set_selector( $inner_selector . ' > *:nth-child(3n+1 of *:not(style))' );
$css->add_property( 'grid-column', '1 / -1' );
$css->set_selector( $inner_selector );
break;
case 'last-row':
$grid_layout = 'repeat(2, minmax(0, 1fr))';
$css->set_selector( $inner_selector . ' > *:nth-child(3n of *:not(style))' );
$css->add_property( 'grid-column', '1 / -1' );
$css->set_selector( $inner_selector );
break;
case 'two-grid':
$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
$grid_layout = 'repeat(2, minmax(0, 1fr))';
break;
case 'row':
$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
$grid_layout = 'minmax(0, 1fr)';
break;
default:
$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
$grid_layout = 'repeat(3, minmax(0, 1fr))';
break;
}
}
break;
case 4:
if ( ! empty( $column1 ) && ! empty( $column2 ) && ! empty( $column3 ) ) {
$grid_layout = $this->get_custom_layout( $css, $columns, $gap, $column1, $column2, $column3, $column4, $column5, $column6 );
} else {
switch ( $layout ) {
case 'left-forty':
$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
$grid_layout = 'minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)';
break;
case 'right-forty':
$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
$grid_layout = 'minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr)';
break;
case 'two-grid':
$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
$grid_layout = 'repeat(2, minmax(0, 1fr))';
break;
case 'row':
$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
$grid_layout = 'minmax(0, 1fr)';
break;
default:
$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
$grid_layout = 'repeat(4, minmax(0, 1fr))';
break;
}
}
break;
case 5:
if ( ! empty( $column1 ) && ! empty( $column2 ) && ! empty( $column3 ) && ! empty( $column4 ) ) {
$grid_layout = $this->get_custom_layout( $css, $columns, $gap, $column1, $column2, $column3, $column4, $column5, $column6 );
} else {
switch ( $layout ) {
case 'first-row':
$grid_layout = 'repeat(4, minmax(0, 1fr))';
$css->set_selector( $inner_selector . ' > *:nth-child(5n+1 of *:not(style))' );
$css->add_property( 'grid-column', '1 / -1' );
$css->set_selector( $inner_selector );
break;
case 'last-row':
$grid_layout = 'repeat(4, minmax(0, 1fr))';
$css->set_selector( $inner_selector . ' > *:nth-child(5n of *:not(style))' );
$css->add_property( 'grid-column', '1 / -1' );
$css->set_selector( $inner_selector );
break;
case 'two-grid':
$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
$grid_layout = 'repeat(2, minmax(0, 1fr))';
break;
case 'three-grid':
$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
$grid_layout = 'repeat(3, minmax(0, 1fr))';
break;
case 'row':
$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
$grid_layout = 'minmax(0, 1fr)';
break;
default:
$this->reset_grid_colum_for_template_columns( $css, $inner_selector );
$grid_layout = 'repeat(5, minmax(0, 1fr))';
break;
}
}
break;
case 6:
if ( ! empty( $column1 ) && ! empty( $column2 ) && ! empty( $column3 ) && ! empty( $column4 ) && ! empty( $column5 ) ) {
$grid_layout = $this->get_custom_layout( $css, $columns, $gap, $column1, $column2, $column3, $column4, $column5, $column6 );
} else {
switch ( $layout ) {
case 'two-grid':
$grid_layout = 'repeat(2, minmax(0, 1fr))';
break;
case 'three-grid':
$grid_layout = 'repeat(3, minmax(0, 1fr))';
break;
case 'row':
$grid_layout = 'minmax(0, 1fr)';
break;
default:
$grid_layout = 'repeat(6, minmax(0, 1fr))';
break;
}
}
break;
}
return $grid_layout;
}
/**
* A reset helper for the template columns
*/
public function reset_grid_colum_for_template_columns( $css, $inner_selector ) {
$css->set_selector( $inner_selector . ' > div:not(.added-for-specificity)' );
$css->add_property( 'grid-column', 'initial' );
$css->set_selector( $inner_selector );
}
/**
* Builds CSS for block.
*
* @param array $attributes the blocks attributes.
* @param string $css the css class for blocks.
* @param string $unique_id the blocks attr ID.
* @param string $unique_style_id the blocks alternate ID for queries.
*/
public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
$css->set_style_id( 'kb-' . $this->block_name . $unique_style_id );
$updated_version = ! empty( $attributes['kbVersion'] ) && $attributes['kbVersion'] > 1 ? true : false;
if ( ! empty( $attributes['kbVersion'] ) && $attributes['kbVersion'] > 1 ) {
$margin_selector = '.kb-row-layout-wrap.wp-block-kadence-rowlayout.kb-row-layout-id' . $unique_id;
$base_selector = '.kb-row-layout-id' . $unique_id;
$inner_selector = '.kb-row-layout-id' . $unique_id . ' > .kt-row-column-wrap';
} else {
$margin_selector = '#kt-layout-id' . $unique_id;
$base_selector = '#kt-layout-id' . $unique_id;
$inner_selector = '#kt-layout-id' . $unique_id . ' > .kt-row-column-wrap';
}
// Margin, check for old attributes and use if present.
$css->set_selector( $margin_selector );
// Fix to prevent generatepress from breaking things with their css.
if ( class_exists( 'GeneratePress_CSS' ) ) {
$css->add_property( 'margin-bottom', '0px' );
}
if ( $css->is_number( $attributes['topMargin'] ) || $css->is_number( $attributes['bottomMargin'] ) || $css->is_number( $attributes['topMarginT'] ) || $css->is_number( $attributes['bottomMarginT'] ) || $css->is_number( $attributes['topMarginM'] ) || $css->is_number( $attributes['bottomMarginM'] ) ) {
if ( $css->is_number( $attributes['topMargin'] ) ) {
$css->add_property( 'margin-top', $attributes['topMargin'] . ( ! empty( $attributes['marginUnit'] ) ? $attributes['marginUnit'] : 'px' ) );
}
if ( $css->is_number( $attributes['bottomMargin'] ) ) {
$css->add_property( 'margin-bottom', $attributes['bottomMargin'] . ( ! empty( $attributes['marginUnit'] ) ? $attributes['marginUnit'] : 'px' ) );
}
$css->set_media_state( 'tablet' );
if ( $css->is_number( $attributes['topMarginT'] ) ) {
$css->add_property( 'margin-top', $attributes['topMarginT'] . ( ! empty( $attributes['marginUnit'] ) ? $attributes['marginUnit'] : 'px' ) );
}
if ( $css->is_number( $attributes['bottomMarginT'] ) ) {
$css->add_property( 'margin-bottom', $attributes['bottomMarginT'] . ( ! empty( $attributes['marginUnit'] ) ? $attributes['marginUnit'] : 'px' ) );
}
$css->set_media_state( 'mobile' );
if ( $css->is_number( $attributes['topMarginM'] ) ) {
$css->add_property( 'margin-top', $attributes['topMarginM'] . ( ! empty( $attributes['marginUnit'] ) ? $attributes['marginUnit'] : 'px' ) );
}
if ( $css->is_number( $attributes['bottomMarginM'] ) ) {
$css->add_property( 'margin-bottom', $attributes['bottomMarginM'] . ( ! empty( $attributes['marginUnit'] ) ? $attributes['marginUnit'] : 'px' ) );
}
$css->set_media_state( 'desktop' );
} else {
$args = array(
'unit_key' => 'marginUnit',
);
$css->render_measure_output( $attributes, 'margin', 'margin', $args );
}
// Vertical Alignment.
$css->set_selector( $inner_selector );
if ( ! $updated_version && ( ( ! empty( $attributes['topSep'] ) && 'none' !== $attributes['topSep'] ) || ( ! empty( $attributes['bottomSep'] ) && 'none' !== $attributes['bottomSep'] ) ) ) {
$css->add_property( 'z-index', '10' );
$css->add_property( 'position', 'relative' );
}
if ( ! empty( $attributes['verticalAlignment'] ) ) {
switch ( $attributes['verticalAlignment'] ) {
case 'middle':
$css->add_property( 'align-content', 'center' );
$css->set_selector( ':where(' . $inner_selector . ') > .wp-block-kadence-column' );
$css->add_property( 'justify-content', 'center' );
$css->set_selector( $inner_selector );
break;
case 'bottom':
$css->add_property( 'align-content', 'end' );
$css->set_selector( ':where(' . $inner_selector . ') > .wp-block-kadence-column' );
$css->add_property( 'justify-content', 'end' );
$css->set_selector( $inner_selector );
break;
case 'top':
$css->add_property( 'align-content', 'start' );
$css->set_selector( ':where(' . $inner_selector . ') > .wp-block-kadence-column' );
$css->add_property( 'justify-content', 'start' );
$css->set_selector( $inner_selector );
break;
}
}
// Gutter.
$css->render_row_gap( $attributes, array( 'columnGutter', 'tabletGutter', 'mobileGutter' ), 'column-gap', 'customGutter', 'gutterType' );
$css->render_row_gap( $attributes, array( 'collapseGutter', 'tabletRowGutter', 'mobileRowGutter' ), 'row-gap', 'customRowGutter', 'rowGutterType' );
// Max Width.
if ( isset( $attributes['inheritMaxWidth'] ) && true === $attributes['inheritMaxWidth'] ) {
global $content_width;
if ( isset( $content_width ) ) {
if ( class_exists( 'Kadence\Theme' ) ) {
$css->add_property( 'max-width', 'var( --global-content-width, ' . absint( $content_width ) . 'px )' );
$css->add_property( 'padding-left', 'var(--global-content-edge-padding)' );
$css->add_property( 'padding-right', 'var(--global-content-edge-padding)' );
} else {
$css->add_property( 'max-width', absint( $content_width ) . 'px' );
}
} else {
$css->add_property( 'max-width', 'var(--wp--style--global--content-size)' );
}
} else {
if ( $css->is_number( $attributes['maxWidth'] ) ) {
$css->add_property( 'max-width', $attributes['maxWidth'] . ( ! empty( $attributes['maxWidthUnit'] ) ? $attributes['maxWidthUnit'] : 'px' ) );
$css->add_property( 'margin-left', 'auto' );
$css->add_property( 'margin-right', 'auto' );
}
if ( $css->is_number( $attributes['responsiveMaxWidth'][0] ) ) {
$css->set_media_state( 'tablet' );
$css->add_property( 'max-width', $attributes['responsiveMaxWidth'][0] . ( ! empty( $attributes['maxWidthUnit'] ) ? $attributes['maxWidthUnit'] : 'px' ) );
$css->add_property( 'margin-left', 'auto' );
$css->add_property( 'margin-right', 'auto' );
$css->set_media_state( 'desktop' );
}
if ( $css->is_number( $attributes['responsiveMaxWidth'][1] ) ) {
$css->set_media_state( 'mobile' );
$css->add_property( 'max-width', $attributes['responsiveMaxWidth'][1] . ( ! empty( $attributes['maxWidthUnit'] ) ? $attributes['maxWidthUnit'] : 'px' ) );
$css->add_property( 'margin-left', 'auto' );
$css->add_property( 'margin-right', 'auto' );
$css->set_media_state( 'desktop' );
}
}
// Padding, check for old attributes and use if present.
if ( empty( $attributes['kbVersion'] ) ) {
// Add old defaults back in.
$css->add_property( 'padding-top', 'var( --global-kb-row-default-top, 25px )' );
$css->add_property( 'padding-bottom', 'var( --global-kb-row-default-bottom, 25px )' );
}
if ( $css->is_number( $attributes['topPadding'] ) || $css->is_number( $attributes['bottomPadding'] ) || $css->is_number( $attributes['leftPadding'] ) || $css->is_number( $attributes['rightPadding'] ) || $css->is_number( $attributes['topPaddingM'] ) || $css->is_number( $attributes['bottomPaddingM'] ) || $css->is_number( $attributes['leftPaddingM'] ) || $css->is_number( $attributes['rightPaddingM'] ) ) {
if ( $css->is_number( $attributes['topPadding'] ) || ( ! empty( $attributes['paddingUnit'] ) && 'px' !== $attributes['paddingUnit'] ) ) {
$css->add_property( 'padding-top', ( $css->is_number( $attributes['topPadding'] ) ? $attributes['topPadding'] : '25' ) . ( ! empty( $attributes['paddingUnit'] ) ? $attributes['paddingUnit'] : 'px' ) );
}
if ( $css->is_number( $attributes['bottomPadding'] ) || ( ! empty( $attributes['paddingUnit'] ) && 'px' !== $attributes['paddingUnit'] ) ) {
$css->add_property( 'padding-bottom', ( $css->is_number( $attributes['bottomPadding'] ) ? $attributes['bottomPadding'] : '25' ) . ( ! empty( $attributes['paddingUnit'] ) ? $attributes['paddingUnit'] : 'px' ) );
}
if ( $css->is_number( $attributes['leftPadding'] ) ) {
$css->add_property( 'padding-left', $attributes['leftPadding'] . ( ! empty( $attributes['paddingUnit'] ) ? $attributes['paddingUnit'] : 'px' ) );
}
if ( $css->is_number( $attributes['rightPadding'] ) ) {
$css->add_property( 'padding-right', $attributes['rightPadding'] . ( ! empty( $attributes['paddingUnit'] ) ? $attributes['paddingUnit'] : 'px' ) );
}
$css->set_media_state( 'tablet' );
if ( $css->is_number( $attributes['tabletPadding'][0] ) ) {
$css->add_property( 'padding-top', $attributes['tabletPadding'][0] . ( ! empty( $attributes['paddingUnit'] ) ? $attributes['paddingUnit'] : 'px' ) );
}
if ( $css->is_number( $attributes['tabletPadding'][1] ) ) {
$css->add_property( 'padding-right', $attributes['tabletPadding'][1] . ( ! empty( $attributes['paddingUnit'] ) ? $attributes['paddingUnit'] : 'px' ) );
}
if ( $css->is_number( $attributes['tabletPadding'][2] ) ) {
$css->add_property( 'padding-bottom', $attributes['tabletPadding'][2] . ( ! empty( $attributes['paddingUnit'] ) ? $attributes['paddingUnit'] : 'px' ) );
}
if ( $css->is_number( $attributes['tabletPadding'][3] ) ) {
$css->add_property( 'padding-left', $attributes['tabletPadding'][3] . ( ! empty( $attributes['paddingUnit'] ) ? $attributes['paddingUnit'] : 'px' ) );
}
$css->set_media_state( 'mobile' );
if ( $css->is_number( $attributes['topPaddingM'] ) ) {
$css->add_property( 'padding-top', $attributes['topPaddingM'] . ( ! empty( $attributes['paddingUnit'] ) ? $attributes['paddingUnit'] : 'px' ) );
}
if ( $css->is_number( $attributes['bottomPaddingM'] ) ) {
$css->add_property( 'padding-bottom', $attributes['bottomPaddingM'] . ( ! empty( $attributes['paddingUnit'] ) ? $attributes['paddingUnit'] : 'px' ) );
}
if ( $css->is_number( $attributes['leftPaddingM'] ) ) {
$css->add_property( 'padding-left', $attributes['leftPaddingM'] . ( ! empty( $attributes['paddingUnit'] ) ? $attributes['paddingUnit'] : 'px' ) );
}
if ( $css->is_number( $attributes['rightPaddingM'] ) ) {
$css->add_property( 'padding-right', $attributes['rightPaddingM'] . ( ! empty( $attributes['paddingUnit'] ) ? $attributes['paddingUnit'] : 'px' ) );
}
$css->set_media_state( 'desktop' );
} else {
$args = array(
'unit_key' => 'paddingUnit',
);
// If no padding is set, use the default.
if ( ! isset( $attributes['padding'] ) ) {
// $attributes['padding'] = [
// 'sm', '', 'sm', ''
// ];
$css->add_property( 'padding-top', 'var( --global-kb-row-default-top, var(--global-kb-spacing-sm, 1.5rem) )' );
$css->add_property( 'padding-bottom', 'var( --global-kb-row-default-bottom, var(--global-kb-spacing-sm, 1.5rem) )' );
}
$css->render_measure_output( $attributes, 'padding', 'padding', $args );
}
// Min Height.
if ( ! empty( $attributes['minHeight'] ) ) {
$css->add_property( 'min-height', $attributes['minHeight'] . ( ! empty( $attributes['minHeightUnit'] ) ? $attributes['minHeightUnit'] : 'px' ) );
}
if ( $css->is_number( $attributes['minHeightTablet'] ) ) {
$css->set_media_state( 'tablet' );
$css->add_property( 'min-height', $attributes['minHeightTablet'] . ( ! empty( $attributes['minHeightUnit'] ) ? $attributes['minHeightUnit'] : 'px' ) );
$css->set_media_state( 'desktop' );
}
if ( $css->is_number( $attributes['minHeightMobile'] ) ) {
$css->set_media_state( 'mobile' );
$css->add_property( 'min-height', $attributes['minHeightMobile'] . ( ! empty( $attributes['minHeightUnit'] ) ? $attributes['minHeightUnit'] : 'px' ) );
$css->set_media_state( 'desktop' );
}
// Layout.
$columns = ( ! empty( $attributes['columns'] ) ? $attributes['columns'] : 2 );
$layout = ( ! empty( $attributes['colLayout'] ) ? $attributes['colLayout'] : 'equal' );
$column1 = ( ! empty( $attributes['firstColumnWidth'] ) ? $attributes['firstColumnWidth'] : '' );
$column2 = ( ! empty( $attributes['secondColumnWidth'] ) ? $attributes['secondColumnWidth'] : '' );
$column3 = ( ! empty( $attributes['thirdColumnWidth'] ) ? $attributes['thirdColumnWidth'] : '' );
$column4 = ( ! empty( $attributes['fourthColumnWidth'] ) ? $attributes['fourthColumnWidth'] : '' );
$column5 = ( ! empty( $attributes['fifthColumnWidth'] ) ? $attributes['fifthColumnWidth'] : '' );
$column6 = ( ! empty( $attributes['sixthColumnWidth'] ) ? $attributes['sixthColumnWidth'] : '' );
$column1_tablet = ( ! empty( $attributes['firstColumnWidthTablet'] ) ? $attributes['firstColumnWidthTablet'] : '' );
$column2_tablet = ( ! empty( $attributes['secondColumnWidthTablet'] ) ? $attributes['secondColumnWidthTablet'] : '' );
$column3_tablet = ( ! empty( $attributes['thirdColumnWidthTablet'] ) ? $attributes['thirdColumnWidthTablet'] : '' );
$column4_tablet = ( ! empty( $attributes['fourthColumnWidthTablet'] ) ? $attributes['fourthColumnWidthTablet'] : '' );
$column5_tablet = ( ! empty( $attributes['fifthColumnWidthTablet'] ) ? $attributes['fifthColumnWidthTablet'] : '' );
$column6_tablet = ( ! empty( $attributes['sixthColumnWidthTablet'] ) ? $attributes['sixthColumnWidthTablet'] : '' );
$column1_mobile = ( ! empty( $attributes['firstColumnWidthMobile'] ) ? $attributes['firstColumnWidthMobile'] : '' );
$column2_mobile = ( ! empty( $attributes['secondColumnWidthMobile'] ) ? $attributes['secondColumnWidthMobile'] : '' );
$column3_mobile = ( ! empty( $attributes['thirdColumnWidthMobile'] ) ? $attributes['thirdColumnWidthMobile'] : '' );
$column4_mobile = ( ! empty( $attributes['fourthColumnWidthMobile'] ) ? $attributes['fourthColumnWidthMobile'] : '' );
$column5_mobile = ( ! empty( $attributes['fifthColumnWidthMobile'] ) ? $attributes['fifthColumnWidthMobile'] : '' );
$column6_mobile = ( ! empty( $attributes['sixthColumnWidthMobile'] ) ? $attributes['sixthColumnWidthMobile'] : '' );
$collapse_layouts = array( 'row', 'two-grid', 'three-grid', 'last-row', 'first-row' );
$has_custom_widths = $this->has_custom_widths( $columns, $column1, $column2, $column3, $column4, $column5, $column6 );
$has_custom_widths_tablet = $this->has_custom_widths( $columns, $column1_tablet, $column2_tablet, $column3_tablet, $column4_tablet, $column5_tablet, $column6_tablet );
$has_custom_widths_mobile = $this->has_custom_widths( $columns, $column1_mobile, $column2_mobile, $column3_mobile, $column4_mobile, $column5_mobile, $column6_mobile );
//base desktop layout.
$grid_layout = $this->get_template_columns( $css, $columns, $layout, $inner_selector, $css->render_row_gap_property( $attributes, array( 'columnGutter', 'tabletGutter', 'mobileGutter' ), 'desktop', 'customGutter', 'gutterType' ), $column1, $column2, $column3, $column4, $column5, $column6 );
$css->add_property( 'grid-template-columns', $grid_layout );
//Desktop ordering
if ( ! empty( $attributes['collapseOrder'] ) && 'left-to-right' !== $attributes['collapseOrder'] && in_array( $layout, $collapse_layouts ) ) {
$css->set_media_state( 'tablet' );
foreach ( range( 1, $columns ) as $item_count ) {
$css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . $item_count . ')' );
$css->add_property( 'order', ( $columns - $item_count + 1 ) );
}
// Row Two.
foreach ( range( 1, $columns ) as $item_count ) {
$css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . ( $item_count + $columns ) . ')' );
$css->add_property( 'order', ( $columns - $item_count + 11 ) );
}
// Row Three.
foreach ( range( 1, $columns ) as $item_count ) {
$css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . ( $item_count + $columns + $columns ) . ')' );
$css->add_property( 'order', ( $columns - $item_count + 21 ) );
}
// Row Four.
foreach ( range( 1, $columns ) as $item_count ) {
$css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . ( $item_count + $columns + $columns + $columns ) . ')' );
$css->add_property( 'order', ( $columns - $item_count + 31 ) );
}
$css->set_media_state( 'desktop' );
}
//Tablet layout
if ( empty( $attributes['tabletLayout'] ) && ! empty( $css->render_row_gap_property( $attributes, array( 'columnGutter', 'tabletGutter', 'mobileGutter' ), 'tablet', 'customGutter', 'gutterType' ) ) ) {
//no tablet layout, but we have a tablet guttter width, so render the inherited column layout from desktop, potentially with custom widths.
$css->set_media_state( 'tablet' );
$css->set_selector( $inner_selector );
//if no custom widths, need to use desktop widths
if ( $has_custom_widths_tablet ) {
$grid_layout = $this->get_template_columns( $css, $columns, $layout, $inner_selector, $css->render_row_gap_property( $attributes, array( 'columnGutter', 'tabletGutter', 'mobileGutter' ), 'tablet', 'customGutter', 'gutterType' ), $column1_tablet, $column2_tablet, $column3_tablet, $column4_tablet, $column5_tablet, $column6_tablet );
} else {
$grid_layout = $this->get_template_columns( $css, $columns, $layout, $inner_selector, $css->render_row_gap_property( $attributes, array( 'columnGutter', 'tabletGutter', 'mobileGutter' ), 'tablet', 'customGutter', 'gutterType' ), $column1, $column2, $column3, $column4, $column5, $column6 );
}
$css->add_property( 'grid-template-columns', $grid_layout );
}
if ( ! empty( $attributes['tabletLayout'] ) || $column1_tablet ) {
//use tablet layout. Potentially with custom widths
$layout = ( ! empty( $attributes['colLayout'] ) ? $attributes['colLayout'] : 'equal' );
$tabletLayout = ( ! empty( $attributes['tabletLayout'] ) && $attributes['tabletLayout'] !== 'inherit' ? $attributes['tabletLayout'] : $layout );
$css->set_media_state( 'tablet' );
$css->set_selector( $inner_selector );
$grid_layout = $this->get_template_columns( $css, $columns, $tabletLayout, $inner_selector, $css->render_row_gap_property( $attributes, array( 'columnGutter', 'tabletGutter', 'mobileGutter' ), 'tablet', 'customGutter', 'gutterType' ), $column1_tablet, $column2_tablet, $column3_tablet, $column4_tablet, $column5_tablet, $column6_tablet );
$css->add_property( 'grid-template-columns', $grid_layout );
//tablet ordering
if ( ! empty( $attributes['collapseOrder'] ) && 'left-to-right' !== $attributes['collapseOrder'] && in_array( $tabletLayout, $collapse_layouts ) ) {
foreach ( range( 1, $columns ) as $item_count ) {
$css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . $item_count . ')' );
$css->add_property( 'order', ( $columns - $item_count + 1 ) );
}
// Row Two.
foreach ( range( 1, $columns ) as $item_count ) {
$css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . ( $item_count + $columns ) . ')' );
$css->add_property( 'order', ( $columns - $item_count + 11 ) );
}
// Row Three.
foreach ( range( 1, $columns ) as $item_count ) {
$css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . ( $item_count + $columns + $columns ) . ')' );
$css->add_property( 'order', ( $columns - $item_count + 21 ) );
}
// Row Four.
foreach ( range( 1, $columns ) as $item_count ) {
$css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . ( $item_count + $columns + $columns + $columns ) . ')' );
$css->add_property( 'order', ( $columns - $item_count + 31 ) );
}
}
$css->set_media_state( 'desktop' );
} elseif ( $columns > 4 ) {
//If no tablet layout and more than 4 columns use mobile layout. (this does not match editor behavior)
$collapse_tab_layout = ( ! empty( $attributes['mobileLayout'] ) ? $attributes['mobileLayout'] : 'row' );
$css->set_media_state( 'tablet' );
$css->set_selector( $inner_selector );
$grid_layout = $this->get_template_columns( $css, $columns, $collapse_tab_layout, $inner_selector, $css->render_row_gap_property( $attributes, array( 'columnGutter', 'tabletGutter', 'mobileGutter' ), 'tablet', 'customGutter', 'gutterType' ), $column1_mobile, $column2_mobile, $column3_mobile, $column4_mobile, $column5_mobile, $column6_mobile );
$css->add_property( 'grid-template-columns', $grid_layout );
//tablet collapse ordering
if ( ! empty( $attributes['collapseOrder'] ) && 'left-to-right' !== $attributes['collapseOrder'] && in_array( $collapse_tab_layout, $collapse_layouts ) ) {
foreach ( range( 1, $columns ) as $item_count ) {
$css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . $item_count . ')' );
$css->add_property( 'order', ( $columns - $item_count + 1 ) );
}
// Row Two.
foreach ( range( 1, $columns ) as $item_count ) {
$css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . ( $item_count + $columns ) . ')' );
$css->add_property( 'order', ( $columns - $item_count + 11 ) );
}
// Row Three.
foreach ( range( 1, $columns ) as $item_count ) {
$css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . ( $item_count + $columns + $columns ) . ')' );
$css->add_property( 'order', ( $columns - $item_count + 21 ) );
}
// Row Four.
foreach ( range( 1, $columns ) as $item_count ) {
$css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . ( $item_count + $columns + $columns + $columns ) . ')' );
$css->add_property( 'order', ( $columns - $item_count + 31 ) );
}
}
$css->set_media_state( 'desktop' );
}
//mobile layout
$mobile_layout = ( ! empty( $attributes['mobileLayout'] ) ? $attributes['mobileLayout'] : 'row' );
$css->set_media_state( 'mobile' );
$css->set_selector( $inner_selector );
$grid_layout = $this->get_template_columns( $css, $columns, $mobile_layout, $inner_selector, $css->render_row_gap_property( $attributes, array( 'columnGutter', 'tabletGutter', 'mobileGutter' ), 'mobile', 'customGutter', 'gutterType' ), $column1_mobile, $column2_mobile, $column3_mobile, $column4_mobile, $column5_mobile, $column6_mobile );
$css->add_property( 'grid-template-columns', $grid_layout );
//mobile ordering
if ( ! empty( $attributes['collapseOrder'] ) && 'left-to-right' !== $attributes['collapseOrder'] && in_array( $mobile_layout, $collapse_layouts ) ) {
foreach ( range( 1, $columns ) as $item_count ) {
$css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . $item_count . ')' );
$css->add_property( 'order', ( $columns - $item_count + 1 ) );
}
// Row Two.
foreach ( range( 1, $columns ) as $item_count ) {
$css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . ( $item_count + $columns ) . ')' );
$css->add_property( 'order', ( $columns - $item_count + 11 ) );
}
// Row Three.
foreach ( range( 1, $columns ) as $item_count ) {
$css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . ( $item_count + $columns + $columns ) . ')' );
$css->add_property( 'order', ( $columns - $item_count + 21 ) );
}
// Row Four.
foreach ( range( 1, $columns ) as $item_count ) {
$css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . ( $item_count + $columns + $columns + $columns ) . ')' );
$css->add_property( 'order', ( $columns - $item_count + 31 ) );
}
}
$css->set_media_state( 'desktop' );
if ( isset( $attributes['inheritMaxWidth'] ) && true === $attributes['inheritMaxWidth'] && ! empty( $attributes['align'] ) && 'full' === $attributes['align'] && 2 === $columns && 'row' !== $layout && ( ( isset( $attributes['breakoutLeft'] ) && true === $attributes['breakoutLeft'] ) || ( isset( $attributes['breakoutRight'] ) && true === $attributes['breakoutRight'] ) ) ) {
global $content_width;
if ( isset( $content_width ) ) {
if ( class_exists( 'Kadence\Theme' ) ) {
$inherit_content_width = 'var( --global-content-width, ' . absint( $content_width ) . 'px )';
} else {
$inherit_content_width = absint( $content_width ) . 'px';
}
} else {
$inherit_content_width = 'var(--wp--style--global--content-size)';
}
$padding_left = '0px';
$padding_right = '0px';
if ( class_exists( 'Kadence\Theme' ) ) {
$padding_left = 'var(--global-content-edge-padding)';
$padding_right = 'var(--global-content-edge-padding)';
}
if ( isset( $attributes['padding'][1] ) && $css->is_number( $attributes['padding'][1] ) ) {
$padding_right = $attributes['padding'][1] . ( ! empty( $attributes['paddingUnit'] ) ? $attributes['paddingUnit'] : 'px' );
} else if ( isset( $attributes['padding'][1] ) && $css->is_variable_value( $attributes['padding'][1] ) ) {
$padding_right = $css->get_variable_value( $attributes['padding'][1] );
}
if ( isset( $attributes['padding'][3] ) && $css->is_number( $attributes['padding'][3] ) ) {
$padding_left = $attributes['padding'][3] . ( ! empty( $attributes['paddingUnit'] ) ? $attributes['paddingUnit'] : 'px' );
} else if ( isset( $attributes['padding'][3] ) && $css->is_variable_value( $attributes['padding'][3] ) ) {
$padding_left = $css->get_variable_value( $attributes['padding'][3] );
}
$css->set_selector( $base_selector );
$css->add_property( '--breakout-negative-margin-right', 'calc( ( ( ( var(--global-vw, 100vw) - ( ' . $inherit_content_width . ' - ( ' . $padding_right . '*2 ) ) ) / 2 ) *-1) + -1px)' );
$css->add_property( '--breakout-negative-margin-left', 'calc( ( ( ( var(--global-vw, 100vw) - ( ' . $inherit_content_width . ' - ( ' . $padding_left . '*2 ) ) ) / 2 ) *-1) + -1px)' );
if ( apply_filters( 'kadence_blocks_css_output_media_queries', true ) ) {
$css->set_media_state( 'desktopOnly' );
}
if ( ( isset( $attributes['breakoutLeft'] ) && true === $attributes['breakoutLeft'] ) ) {
$css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(1)' );
$css->add_property( 'margin-inline-start', 'calc( ' . $padding_left . ' *-1 )' );
}
if ( ( isset( $attributes['breakoutRight'] ) && true === $attributes['breakoutRight'] ) ) {
$css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(2)' );
$css->add_property( 'margin-inline-end', 'calc( ' . $padding_right . ' *-1 )' );
}
$css->set_media_state( 'desktop' );
if ( apply_filters( 'kadence_blocks_css_output_media_queries', true ) ) {
if ( isset( $content_width ) && ! empty( $content_width ) ) {
$css->start_media_query( '(min-width:' . absint( $content_width ) . 'px)' );
if ( ( isset( $attributes['breakoutLeft'] ) && true === $attributes['breakoutLeft'] ) ) {
$css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(1):not(.specificity)' );
$css->add_property( 'margin-inline-start', 'var(--breakout-negative-margin-left)' );
}
if ( ( isset( $attributes['breakoutRight'] ) && true === $attributes['breakoutRight'] ) ) {
$css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(2):not(.specificity)' );
$css->add_property( 'margin-inline-end', 'var(--breakout-negative-margin-right)' );
}
$css->stop_media_query();
} else {
$css->set_media_state( 'desktopOnly' );
if ( ( isset( $attributes['breakoutLeft'] ) && true === $attributes['breakoutLeft'] ) ) {
$css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(1)' );
$css->add_property( 'margin-inline-start', 'var(--breakout-negative-margin-left)' );
}
if ( ( isset( $attributes['breakoutRight'] ) && true === $attributes['breakoutRight'] ) ) {
$css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(2)' );
$css->add_property( 'margin-inline-end', 'var(--breakout-negative-margin-right)' );
}
$css->set_media_state( 'desktop' );
}
} else {
if ( ( isset( $attributes['breakoutLeft'] ) && true === $attributes['breakoutLeft'] ) ) {
$css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(1):not(.specificity)' );
$css->add_property( 'margin-inline-start', 'var(--breakout-negative-margin-left, calc( ' . $padding_left . ' *-1 ) )' );
}
if ( ( isset( $attributes['breakoutRight'] ) && true === $attributes['breakoutRight'] ) ) {
$css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(2):not(.specificity)' );
$css->add_property( 'margin-inline-end', 'var(--breakout-negative-margin-right, calc( ' . $padding_right . ' *-1 ))' );
}
}
$css->set_media_state( 'tabletOnly' );
if ( ( isset( $attributes['breakoutLeft'] ) && true === $attributes['breakoutLeft'] ) ) {
$css->set_selector( $inner_selector . ':not(.kt-tab-layout-row) > .wp-block-kadence-column:nth-of-type(1)' );
$css->add_property( 'margin-inline-start', 'calc( ' . $padding_left . ' *-1 )' );
}
if ( ( isset( $attributes['breakoutRight'] ) && true === $attributes['breakoutRight'] ) ) {
$css->set_selector( $inner_selector . ':not(.kt-tab-layout-row) > .wp-block-kadence-column:nth-of-type(2)' );
$css->add_property( 'margin-inline-end', 'calc( ' . $padding_right . ' *-1 )' );
}
$css->set_media_state( 'desktop' );
}
// Border radius.
$css->set_selector( $base_selector );
$css->render_measure_output( $attributes, 'borderRadius', 'border-radius', array( 'unit_key' => 'borderRadiusUnit' ) );
$has_radius = false;
if ( isset( $attributes['borderRadius'][0] ) && $css->is_number( $attributes['borderRadius'][0] ) && 0 !== $attributes['borderRadius'][0] ) {
$has_radius = true;
}
if ( isset( $attributes['borderRadius'][1] ) && $css->is_number( $attributes['borderRadius'][1] ) && 0 !== $attributes['borderRadius'][1] ) {
$has_radius = true;
}
if ( isset( $attributes['borderRadius'][2] ) && $css->is_number( $attributes['borderRadius'][2] ) && 0 !== $attributes['borderRadius'][2] ) {
$has_radius = true;
}
if ( isset( $attributes['borderRadius'][3] ) && $css->is_number( $attributes['borderRadius'][3] ) && 0 !== $attributes['borderRadius'][3] ) {
$has_radius = true;
}
if ( $has_radius ) {
if ( ! isset( $attributes['borderRadiusOverflow'] ) || ( isset( $attributes['borderRadiusOverflow'] ) && false !== $attributes['borderRadiusOverflow'] ) ) {
$css->add_property( 'overflow', 'clip' );
}
$css->add_property( 'isolation', 'isolate' );
$css->set_selector( $base_selector . ' > .kt-row-layout-overlay' );
$css->render_measure_output( $attributes, 'borderRadius', 'border-radius', array( 'unit_key' => 'borderRadiusUnit' ) );
}
$css->set_selector( $base_selector );
// Box shadow
if ( isset( $attributes['displayBoxShadow'] ) && true == $attributes['displayBoxShadow'] ) {
if ( isset( $attributes['boxShadow'] ) && is_array( $attributes['boxShadow'] ) && isset( $attributes['boxShadow'][0] ) && is_array( $attributes['boxShadow'][0] ) ) {
$css->add_property( 'box-shadow', ( isset( $attributes['boxShadow'][0]['inset'] ) && true === $attributes['boxShadow'][0]['inset'] ? 'inset ' : '' ) . ( isset( $attributes['boxShadow'][0]['hOffset'] ) && is_numeric( $attributes['boxShadow'][0]['hOffset'] ) ? $attributes['boxShadow'][0]['hOffset'] : '0' ) . 'px ' . ( isset( $attributes['boxShadow'][0]['vOffset'] ) && is_numeric( $attributes['boxShadow'][0]['vOffset'] ) ? $attributes['boxShadow'][0]['vOffset'] : '0' ) . 'px ' . ( isset( $attributes['boxShadow'][0]['blur'] ) && is_numeric( $attributes['boxShadow'][0]['blur'] ) ? $attributes['boxShadow'][0]['blur'] : '14' ) . 'px ' . ( isset( $attributes['boxShadow'][0]['spread'] ) && is_numeric( $attributes['boxShadow'][0]['spread'] ) ? $attributes['boxShadow'][0]['spread'] : '0' ) . 'px ' . $css->render_color( ( isset( $attributes['boxShadow'][0]['color'] ) && ! empty( $attributes['boxShadow'][0]['color'] ) ? $attributes['boxShadow'][0]['color'] : '#000000' ), ( isset( $attributes['boxShadow'][0]['opacity'] ) && is_numeric( $attributes['boxShadow'][0]['opacity'] ) ? $attributes['boxShadow'][0]['opacity'] : 0.2 ) ) );
} else {
$css->add_property( 'box-shadow', 'rgba(0, 0, 0, 0.2) 0px 0px 14px 0px' );
}
}
// Border, have to check for old styles first.
if ( ! empty( $attributes['border'] ) || ! empty( $attributes['tabletBorder'] ) || ! empty( $attributes['mobileBorder'] ) || $css->is_number( $attributes['borderWidth'][0] ) || $css->is_number( $attributes['borderWidth'][1] ) || $css->is_number( $attributes['borderWidth'][2] ) || $css->is_number( $attributes['borderWidth'][3] ) || $css->is_number( $attributes['tabletBorderWidth'][0] ) || $css->is_number( $attributes['tabletBorderWidth'][1] ) || $css->is_number( $attributes['tabletBorderWidth'][2] ) || $css->is_number( $attributes['tabletBorderWidth'][3] ) || $css->is_number( $attributes['mobileBorderWidth'][0] ) || $css->is_number( $attributes['mobileBorderWidth'][1] ) || $css->is_number( $attributes['mobileBorderWidth'][2] ) || $css->is_number( $attributes['mobileBorderWidth'][3] ) ) {
if ( ! empty( $attributes['border'] ) ) {
$css->add_property( 'border-color', $css->render_color( $attributes['border'] ) );
}
$css->render_measure_output( $attributes, 'borderWidth', 'border-width' );
if ( ! empty( $attributes['tabletBorder'] ) ) {
$css->set_media_state( 'tablet' );
$css->add_property( 'border-color', $css->render_color( $attributes['tabletBorder'] ) );
$css->set_media_state( 'desktop' );
}
if ( ! empty( $attributes['mobileBorder'] ) ) {
$css->set_media_state( 'mobile' );
$css->add_property( 'border-color', $css->render_color( $attributes['mobileBorder'] ) );
$css->set_media_state( 'desktop' );
}
} else {
$css->render_border_styles( $attributes, 'borderStyle' );
}
// Background.
$background_type = ! empty( $attributes['backgroundSettingTab'] ) ? $attributes['backgroundSettingTab'] : 'normal';
$css->set_selector( $base_selector );
switch ( $background_type ) {
case 'normal':
if ( ! empty( $attributes['bgColor'] ) ) {
if ( class_exists( 'Kadence\Theme' ) ) {
if ( empty( $attributes['bgColorClass'] ) ) {
$css->render_color_output( $attributes, 'bgColor', 'background-color' );
}
} else if ( strpos( $attributes['bgColor'], 'palette' ) === 0 ) {
$css->render_color_output( $attributes, 'bgColor', 'background-color' );
} else if ( empty( $attributes['bgColorClass'] ) ) {
$css->render_color_output( $attributes, 'bgColor', 'background-color' );
}
}
if ( ! empty( $attributes['bgImg'] ) ) {
if ( isset( $attributes['bgImgAttachment'] ) ) {
if ( 'parallax' === $attributes['bgImgAttachment'] ) {
$bg_attach = 'fixed';
} else {
$bg_attach = $attributes['bgImgAttachment'];
}
} else {
$bg_attach = 'scroll';
}
$css->add_property( 'background-image', sprintf( "url('%s')", $attributes['bgImg'] ) );
$css->add_property( 'background-size', ( isset( $attributes['bgImgSize'] ) ? $attributes['bgImgSize'] : 'cover' ) );
$css->add_property( 'background-position', ( isset( $attributes['bgImgPosition'] ) ? $attributes['bgImgPosition'] : 'center center' ) );
$css->add_property( 'background-attachment', $bg_attach );
$css->add_property( 'background-repeat', ( isset( $attributes['bgImgRepeat'] ) ? $attributes['bgImgRepeat'] : 'no-repeat' ) );
if ( 'fixed' === $bg_attach && ! apply_filters( 'kadence_blocks_attachment_fixed_on_mobile', false ) ) {
$css->set_media_state( 'tabletPro' );
$css->add_property( 'background-attachment', 'scroll' );
$css->set_media_state( 'desktop' );
}
}
break;
case 'gradient':
if ( ! empty( $attributes['gradient'] ) ) {
$css->add_property( 'background-image', $css->render_gradient( $attributes['gradient'] ) );
}
break;
}
// Tablet Background.
$tablet_background = ( isset( $attributes['tabletBackground'][0] ) && is_array( $attributes['tabletBackground'][0] ) ? $attributes['tabletBackground'][0] : array() );
if ( isset( $tablet_background['enable'] ) && $tablet_background['enable'] ) {
$css->set_media_state( 'tabletPro' );
$css->set_selector( $margin_selector );
$tablet_background_type = ! empty( $tablet_background['type'] ) ? $tablet_background['type'] : 'normal';
switch ( $tablet_background_type ) {
case 'normal':
if ( ! empty( $tablet_background['bgImg'] ) ) {
$bg_selector = 'background-color';
} else {
$bg_selector = 'background';
}
if ( ! empty( $tablet_background['bgColor'] ) ) {
$css->render_color_output( $tablet_background, 'bgColor', $bg_selector );
}
if ( ! empty( $tablet_background['bgImg'] ) ) {
if ( ! empty( $tablet_background['bgImgAttachment'] ) ) {
if ( 'parallax' === $tablet_background['bgImgAttachment'] ) {
$bg_attach = 'fixed';
} else {
$bg_attach = $tablet_background['bgImgAttachment'];
}
} else {
$bg_attach = 'scroll';
}
$is_important = ( 'normal' === $background_type && ! empty( $attributes['bgImg'] ) && isset( $attributes['bgImgAttachment'] ) && 'parallax' === $attributes['bgImgAttachment'] && isset( $tablet_background['bgImgAttachment'] ) && 'parallax' !== $tablet_background['bgImgAttachment'] ? '!important' : '' );
if ( isset( $attributes['backgroundInline'] ) && true === $attributes['backgroundInline'] ) {
$is_important = '!important';
}
$css->add_property( 'background-image', sprintf( "url('%s')", $tablet_background['bgImg'] ) . $is_important );
$css->add_property( 'background-size', ( ! empty( $tablet_background['bgImgSize'] ) ? $tablet_background['bgImgSize'] : 'cover' ) );
$css->add_property( 'background-position', ( ! empty( $tablet_background['bgImgPosition'] ) ? $tablet_background['bgImgPosition'] : 'center center' ) );
$css->add_property( 'background-attachment', $bg_attach );
$css->add_property( 'background-repeat', ( ! empty( $tablet_background['bgImgRepeat'] ) ? $tablet_background['bgImgRepeat'] : 'no-repeat' ) );
} else if ( isset( $tablet_background['forceOverDesk'] ) && $tablet_background['forceOverDesk'] ) {
// Force No image for tablet.
//$css->set_media_state( 'tabletOnly' );
$css->set_selector( $base_selector );
$css->add_property( 'background-image', 'none !important' );
$css->set_selector( $base_selector . ' [id*="jarallax-container-"]' );
$css->add_property( 'display', 'none !important' );
//$css->set_media_state( 'tablet' );
}
if ( 'normal' === $background_type && ! empty( $attributes['bgImg'] ) && ! empty( $attributes['bgImgAttachment'] ) && 'parallax' === $attributes['bgImgAttachment'] && ! empty( $tablet_background['bgImg'] ) && ! empty( $tablet_background['bgImgAttachment'] ) && 'parallax' !== $tablet_background['bgImgAttachment'] ) {
$css->set_selector( $base_selector . ' [id*="jarallax-container-"]' );
$css->add_property( 'display', 'none !important' );
}
break;
case 'gradient':
if ( ! empty( $tablet_background['gradient'] ) ) {
$is_important = ( 'normal' === $background_type && ! empty( $attributes['bgImg'] ) && ! empty( $attributes['bgImgAttachment'] ) && 'parallax' === $attributes['bgImgAttachment'] ? '!important' : '' );
if ( isset( $attributes['backgroundInline'] ) && true === $attributes['backgroundInline'] ) {
$is_important = '!important';
}
$css->add_property( 'background-image', $css->render_gradient( $tablet_background['gradient'] ) . $is_important );
if ( 'normal' === $background_type && ! empty( $attributes['bgImg'] ) && ! empty( $attributes['bgImgAttachment'] ) && 'parallax' === $attributes['bgImgAttachment'] ) {
$css->set_selector( $base_selector . ' [id*="jarallax-container-"]' );
$css->add_property( 'display', 'none !important' );
}
}
break;
}
if ( 'normal' !== $background_type ) {
$css->set_selector( $base_selector . ' .kb-blocks-bg-video-container,' . $base_selector . ' .kb-blocks-bg-slider' );
$css->add_property( 'display', 'none' );
}
$css->set_media_state( 'desktop' );
}
// Mobile Background.
$mobile_background = ( isset( $attributes['mobileBackground'][0] ) && is_array( $attributes['mobileBackground'][0] ) ? $attributes['mobileBackground'][0] : array() );
if ( isset( $mobile_background['enable'] ) && $mobile_background['enable'] ) {
$css->set_media_state( 'mobile' );
$css->set_selector( $margin_selector );
$mobile_background_type = ! empty( $mobile_background['type'] ) ? $mobile_background['type'] : 'normal';
switch ( $mobile_background_type ) {
case 'normal':
if ( ! empty( $mobile_background['bgImg'] ) ) {
$bg_selector = 'background-color';
} else {
$bg_selector = 'background';
}
if ( ! empty( $mobile_background['bgColor'] ) ) {
$css->render_color_output( $mobile_background, 'bgColor', $bg_selector );
}
if ( ! empty( $mobile_background['bgImg'] ) ) {
if ( ! empty( $mobile_background['bgImgAttachment'] ) ) {
if ( 'parallax' === $mobile_background['bgImgAttachment'] ) {
$bg_attach = 'fixed';
} else {
$bg_attach = $mobile_background['bgImgAttachment'];
}
} else {
$bg_attach = 'scroll';
}
$is_important = ( isset( $attributes['bgImg'] ) && ! empty( $attributes['bgImg'] ) && isset( $attributes['bgImgAttachment'] ) && 'parallax' === $attributes['bgImgAttachment'] && isset( $mobile_background['bgImgAttachment'] ) && 'parallax' !== $mobile_background['bgImgAttachment'] ? '!important' : '' );
if ( 'normal' === $mobile_background_type && ! empty( $tablet_background['bgImg'] ) && isset( $tablet_background['bgImgAttachment'] ) && 'parallax' === $tablet_background['bgImgAttachment'] && isset( $mobile_background['bgImgAttachment'] ) && 'parallax' !== $mobile_background['bgImgAttachment'] ) {
$is_important = '!important';
}
if ( isset( $attributes['backgroundInline'] ) && true === $attributes['backgroundInline'] ) {
$is_important = '!important';
}
$css->add_property( 'background-image', sprintf( "url('%s')", $mobile_background['bgImg'] ) . $is_important );
$css->add_property( 'background-size', ( ! empty( $mobile_background['bgImgSize'] ) ? $mobile_background['bgImgSize'] : 'cover' ) );
$css->add_property( 'background-position', ( ! empty( $mobile_background['bgImgPosition'] ) ? $mobile_background['bgImgPosition'] : 'center center' ) );
$css->add_property( 'background-attachment', $bg_attach );
$css->add_property( 'background-repeat', ( ! empty( $mobile_background['bgImgRepeat'] ) ? $mobile_background['bgImgRepeat'] : 'no-repeat' ) );
} else if ( isset( $mobile_background['forceOverDesk'] ) && $mobile_background['forceOverDesk'] ) {
$css->add_property( 'background-image', 'none !important' );
$css->set_selector( $base_selector . ' [id*="jarallax-container-"]' );
$css->add_property( 'display', 'none !important' );
}
if ( ( ( 'normal' === $background_type && ! empty( $attributes['bgImg'] ) && ! empty( $attributes['bgImgAttachment'] ) && 'parallax' === $attributes['bgImgAttachment'] ) || ( 'normal' === $mobile_background_type && ! empty( $tablet_background['bgImg'] ) && isset( $tablet_background['bgImgAttachment'] ) && 'parallax' === $tablet_background['bgImgAttachment'] ) ) && isset( $mobile_background['bgImg'] ) && ! empty( $mobile_background['bgImg'] ) && isset( $mobile_background['bgImgAttachment'] ) && 'parallax' !== $mobile_background['bgImgAttachment'] ) {
$css->set_selector( $base_selector . ' [id*="jarallax-container-"]' );
$css->add_property( 'display', 'none !important' );
}
break;
case 'gradient':
if ( ! empty( $mobile_background['gradient'] ) ) {
$is_important = ( ! empty( $attributes['bgImg'] ) && ! empty( $attributes['bgImgAttachment'] ) && 'parallax' === $attributes['bgImgAttachment'] ? '!important' : '' );
if ( 'normal' === $mobile_background_type && ! empty( $tablet_background['bgImg'] ) && isset( $tablet_background['bgImgAttachment'] ) && 'parallax' === $tablet_background['bgImgAttachment'] ) {
$is_important = '!important';
}
if ( isset( $attributes['backgroundInline'] ) && true === $attributes['backgroundInline'] ) {
$is_important = '!important';
}
$css->add_property( 'background-image', $css->render_gradient( $mobile_background['gradient'] ) . $is_important );
if ( ( 'normal' === $background_type && ! empty( $attributes['bgImg'] ) && ! empty( $attributes['bgImgAttachment'] ) && 'parallax' === $attributes['bgImgAttachment'] ) || ( 'normal' === $mobile_background_type && ! empty( $tablet_background['bgImg'] ) && isset( $tablet_background['bgImgAttachment'] ) && 'parallax' === $tablet_background['bgImgAttachment'] ) ) {
$css->set_selector( $base_selector . ' [id*="jarallax-container-"]' );
$css->add_property( 'display', 'none !important' );
}
}
break;
}
if ( 'normal' !== $background_type ) {
$css->set_selector( $base_selector . ' .kb-blocks-bg-video-container,' . $base_selector . ' .kb-blocks-bg-slider' );
$css->add_property( 'display', 'none' );
}
$css->set_media_state( 'desktop' );
}
// Overlay.
if ( ! empty( $attributes['overlay'] ) || ! empty( $attributes['overlayBgImg'] ) || ! empty( $attributes['overlaySecond'] ) || ! empty( $attributes['overlayGradient'] ) ) {
$css->set_selector( $base_selector . ' > .kt-row-layout-overlay' );
$css->render_opacity_from_100( $attributes, 'overlayOpacity' );
$overlay_type = ! empty( $attributes['currentOverlayTab'] ) ? $attributes['currentOverlayTab'] : 'normal';
switch ( $overlay_type ) {
case 'normal':
if ( isset( $attributes['overlay'] ) ) {
$css->add_property( 'background-color', $css->render_color( $attributes['overlay'], ( isset( $attributes['overlayFirstOpacity'] ) && is_numeric( $attributes['overlayFirstOpacity'] ) ? $attributes['overlayFirstOpacity'] : 1 ) ) );
}
if ( ! empty( $attributes['overlayBgImg'] ) ) {
if ( isset( $attributes['overlayBgImgAttachment'] ) ) {
if ( 'parallax' === $attributes['overlayBgImgAttachment'] ) {
$overbg_attach = 'fixed';
} else {
$overbg_attach = $attributes['overlayBgImgAttachment'];
}
} else {
$overbg_attach = 'scroll';
}
$css->add_property( 'background-image', sprintf( "url('%s')", $attributes['overlayBgImg'] ) );
$css->add_property( 'background-size', ( isset( $attributes['overlayBgImgSize'] ) ? $attributes['overlayBgImgSize'] : 'cover' ) );
$css->add_property( 'background-position', ( isset( $attributes['overlayBgImgPosition'] ) ? $attributes['overlayBgImgPosition'] : 'center center' ) );
$css->add_property( 'background-attachment', $overbg_attach );
$css->add_property( 'background-repeat', ( isset( $attributes['overlayBgImgRepeat'] ) ? $attributes['overlayBgImgRepeat'] : 'no-repeat' ) );
if ( 'fixed' === $overbg_attach && ! apply_filters( 'kadence_blocks_attachment_fixed_on_mobile', false ) ) {
$css->set_media_state( 'tabletPro' );
$css->add_property( 'background-attachment', 'scroll' );
$css->set_media_state( 'desktop' );
}
}
break;
case 'gradient':
if ( ! empty( $attributes['overlayGradient'] ) ) {
$css->add_property( 'background', $css->render_gradient( $attributes['overlayGradient'] ) );
}
break;
case 'grad':
// Old Gradient Support.
$type = ( isset( $attributes['overlayGradType'] ) ? $attributes['overlayGradType'] : 'linear' );
if ( 'radial' === $type ) {
$angle = ( isset( $attributes['overlayBgImgPosition'] ) ? 'at ' . $attributes['overlayBgImgPosition'] : 'at center center' );
} else {
$angle = ( isset( $attributes['overlayGradAngle'] ) ? $attributes['overlayGradAngle'] . 'deg' : '180deg' );
}
$loc = ( isset( $attributes['overlayGradLoc'] ) ? $attributes['overlayGradLoc'] : '0' );
$color = ( isset( $attributes['overlay'] ) ? $css->render_color( $attributes['overlay'], ( isset( $attributes['overlayFirstOpacity'] ) && is_numeric( $attributes['overlayFirstOpacity'] ) ? $attributes['overlayFirstOpacity'] : 1 ) ) : 'transparent' );
$locsecond = ( isset( $attributes['overlayGradLocSecond'] ) ? $attributes['overlayGradLocSecond'] : '100' );
$colorsecond = ( isset( $attributes['overlaySecond'] ) ? $css->render_color( $attributes['overlaySecond'], ( isset( $attributes['overlaySecondOpacity'] ) && is_numeric( $attributes['overlaySecondOpacity'] ) ? $attributes['overlaySecondOpacity'] : 1 ) ) : '#00B5E2' );
$css->add_property( 'background-image', $type . '-gradient(' . $angle . ', ' . $color . ' ' . $loc . '%, ' . $colorsecond . ' ' . $locsecond . '%)' );
break;
}
if ( ! empty( $attributes['overlayBlendMode'] ) && 'none' !== $attributes['overlayBlendMode'] ) {
$css->add_property( 'mix-blend-mode', $attributes['overlayBlendMode'] );
}
}
$tablet_overlay = ( isset( $attributes['tabletOverlay'] ) && is_array( $attributes['tabletOverlay'] ) && isset( $attributes['tabletOverlay'][0] ) && is_array( $attributes['tabletOverlay'][0] ) ? $attributes['tabletOverlay'][0] : array() );
if ( isset( $tablet_overlay['enable'] ) && $tablet_overlay['enable'] ) {
$css->set_media_state( 'tablet' );
$css->set_selector( $base_selector . ' > .kt-row-layout-overlay' );
$css->render_opacity_from_100( $tablet_overlay, 'overlayOpacity' );
$overlay_type = ! empty( $tablet_overlay['currentOverlayTab'] ) ? $tablet_overlay['currentOverlayTab'] : 'normal';
switch ( $overlay_type ) {
case 'normal':
if ( ! empty( $tablet_overlay['overlayBgImg'] ) ) {
$bg_selector = 'background-color';
} else {
$bg_selector = 'background';
}
if ( ! empty( $tablet_overlay['overlay'] ) ) {
$css->render_color_output( $tablet_overlay, 'overlay', $bg_selector );
}
if ( ! empty( $tablet_overlay['overlayBgImg'] ) ) {
if ( ! empty( $tablet_overlay['overlayBgImgAttachment'] ) ) {
if ( 'parallax' === $tablet_overlay['overlayBgImgAttachment'] ) {
$overbg_attach = 'fixed';
} else {
$overbg_attach = $tablet_overlay['overlayBgImgAttachment'];
}
} else {
$overbg_attach = 'scroll';
}
$css->add_property( 'background-image', sprintf( "url('%s')", $tablet_overlay['overlayBgImg'] ) );
$css->add_property( 'background-size', ( ! empty( $tablet_overlay['overlayBgImgSize'] ) ? $tablet_overlay['overlayBgImgSize'] : 'cover' ) );
$css->add_property( 'background-position', ( ! empty( $tablet_overlay['overlayBgImgPosition'] ) ? $tablet_overlay['overlayBgImgPosition'] : 'center center' ) );
$css->add_property( 'background-attachment', $overbg_attach );
$css->add_property( 'background-repeat', ( ! empty( $tablet_overlay['overlayBgImgRepeat'] ) ? $tablet_overlay['overlayBgImgRepeat'] : 'no-repeat' ) );
}
break;
case 'gradient':
$css->add_property( 'background', $css->render_gradient( $tablet_overlay['gradient'] ) );
break;
case 'grad':
// Old Gradient Support.
$type = ( ! empty( $tablet_overlay['overlayGradType'] ) ? $tablet_overlay['overlayGradType'] : 'linear' );
if ( 'radial' === $type ) {
$angle = ( ! empty( $tablet_overlay['overlayBgImgPosition'] ) ? 'at ' . $tablet_overlay['overlayBgImgPosition'] : 'at center center' );
} else {
$angle = ( ! empty( $tablet_overlay['overlayGradAngle'] ) ? $tablet_overlay['overlayGradAngle'] . 'deg' : '180deg' );
}
$loc = ( ! empty( $tablet_overlay['overlayGradLoc'] ) ? $tablet_overlay['overlayGradLoc'] : '0' );
$color = ( ! empty( $tablet_overlay['overlay'] ) ? $css->render_color( $tablet_overlay['overlay'] ) : 'transparent' );
$locsecond = ( ! empty( $tablet_overlay['overlayGradLocSecond'] ) ? $tablet_overlay['overlayGradLocSecond'] : '100' );
$colorsecond = ( ! empty( $tablet_overlay['overlaySecond'] ) ? $css->render_color( $tablet_overlay['overlaySecond'] ) : '#00B5E2' );
$css->add_property( 'background-image', $type . '-gradient(' . $angle . ', ' . $color . ' ' . $loc . '%, ' . $colorsecond . ' ' . $locsecond . '%)' );
break;
}
if ( ! empty( $tablet_overlay['overlayBlendMode'] ) ) {
$css->add_property( 'mix-blend-mode', $tablet_overlay['overlayBlendMode'] );
}
$css->set_media_state( 'desktop' );
}
$mobile_overlay = ( isset( $attributes['mobileOverlay'] ) && is_array( $attributes['mobileOverlay'] ) && isset( $attributes['mobileOverlay'][0] ) && is_array( $attributes['mobileOverlay'][0] ) ? $attributes['mobileOverlay'][0] : array() );
if ( isset( $mobile_overlay['enable'] ) && $mobile_overlay['enable'] ) {
$css->set_media_state( 'mobile' );
$css->set_selector( $base_selector . ' > .kt-row-layout-overlay' );
$css->render_opacity_from_100( $mobile_overlay, 'overlayOpacity' );
$overlay_type = ! empty( $mobile_overlay['currentOverlayTab'] ) ? $mobile_overlay['currentOverlayTab'] : 'normal';
switch ( $overlay_type ) {
case 'normal':
if ( ! empty( $mobile_overlay['overlayBgImg'] ) ) {
$bg_selector = 'background-color';
} else {
$bg_selector = 'background';
}
if ( ! empty( $mobile_overlay['overlay'] ) ) {
$css->render_color_output( $mobile_overlay, 'overlay', $bg_selector );
}
if ( ! empty( $mobile_overlay['overlayBgImg'] ) ) {
if ( ! empty( $mobile_overlay['overlayBgImgAttachment'] ) ) {
if ( 'parallax' === $mobile_overlay['overlayBgImgAttachment'] ) {
$overbg_attach = 'fixed';
} else {
$overbg_attach = $mobile_overlay['overlayBgImgAttachment'];
}
} else {
$overbg_attach = 'scroll';
}
$css->add_property( 'background-image', sprintf( "url('%s')", $mobile_overlay['overlayBgImg'] ) );
$css->add_property( 'background-size', ( ! empty( $mobile_overlay['overlayBgImgSize'] ) ? $mobile_overlay['overlayBgImgSize'] : 'cover' ) );
$css->add_property( 'background-position', ( ! empty( $mobile_overlay['overlayBgImgPosition'] ) ? $mobile_overlay['overlayBgImgPosition'] : 'center center' ) );
$css->add_property( 'background-attachment', $overbg_attach );
$css->add_property( 'background-repeat', ( ! empty( $mobile_overlay['overlayBgImgRepeat'] ) ? $mobile_overlay['overlayBgImgRepeat'] : 'no-repeat' ) );
}
break;
case 'gradient':
$css->add_property( 'background', $css->render_gradient( $mobile_overlay['gradient'] ) );
break;
case 'grad':
$type = ( ! empty( $mobile_overlay['overlayGradType'] ) ? $mobile_overlay['overlayGradType'] : 'linear' );
if ( 'radial' === $type ) {
$angle = ( ! empty( $mobile_overlay['overlayBgImgPosition'] ) ? 'at ' . $mobile_overlay['overlayBgImgPosition'] : 'at center center' );
} else {
$angle = ( ! empty( $mobile_overlay['overlayGradAngle'] ) ? $mobile_overlay['overlayGradAngle'] . 'deg' : '180deg' );
}
$loc = ( ! empty( $mobile_overlay['overlayGradLoc'] ) ? $mobile_overlay['overlayGradLoc'] : '0' );
$color = ( ! empty( $mobile_overlay['overlay'] ) ? $css->render_color( $mobile_overlay['overlay'] ) : 'transparent' );
$locsecond = ( ! empty( $mobile_overlay['overlayGradLocSecond'] ) ? $mobile_overlay['overlayGradLocSecond'] : '100' );
$colorsecond = ( ! empty( $mobile_overlay['overlaySecond'] ) ? $css->render_color( $mobile_overlay['overlaySecond'] ) : '#00B5E2' );
$css->add_property( 'background-image', $type . '-gradient(' . $angle . ', ' . $color . ' ' . $loc . '%, ' . $colorsecond . ' ' . $locsecond . '%)' );
break;
}
if ( ! empty( $mobile_overlay['overlayBlendMode'] ) ) {
$css->add_property( 'mix-blend-mode', $mobile_overlay['overlayBlendMode'] );
}
$css->set_media_state( 'desktop' );
}
if ( $css->is_number( $attributes['zIndex'] ) ) {
if ( ! empty( $attributes['kbVersion'] ) && $attributes['kbVersion'] > 1 ) {
$css->set_selector( $base_selector );
} else {
$css->set_selector( $inner_selector );
}
$css->add_property( 'z-index', $attributes['zIndex'] );
$css->add_property( 'position', 'relative' );
}
// Text Color.
if ( ! empty( $attributes['textColor'] ) ) {
$css->set_selector( $base_selector . ' ,' . $base_selector . ' h1,' . $base_selector . ' h2,' . $base_selector . ' h3,' . $base_selector . ' h4,' . $base_selector . ' h5,' . $base_selector . ' h6' );
$css->render_color_output( $attributes, 'textColor', 'color' );
}
if ( ! empty( $attributes['linkColor'] ) ) {
$css->set_selector( $base_selector . ' a' );
$css->render_color_output( $attributes, 'linkColor', 'color' );
}
if ( ! empty( $attributes['linkHoverColor'] ) ) {
$css->set_selector( $base_selector . ' a:hover' );
$css->render_color_output( $attributes, 'linkHoverColor', 'color' );
}
// Bottom Sep.
if ( isset( $attributes['bottomSep'] ) && 'none' != $attributes['bottomSep'] ) {
$bottomSepUnit = ! empty( $attributes['bottomSepHeightUnit'] ) ? $attributes['bottomSepHeightUnit'] : 'px';
$bottomSepHeight = ! empty( $attributes['bottomSepHeight'] ) ? $attributes['bottomSepHeight'] : '100';
$css->set_selector( $base_selector . ' .kt-row-layout-bottom-sep' );
$css->add_property( 'height', $bottomSepHeight . $bottomSepUnit );
if ( isset( $attributes['bottomSepWidth'] ) ) {
$css->set_selector( $base_selector . ' .kt-row-layout-bottom-sep svg' );
$css->add_property( 'width', $attributes['bottomSepWidth'] . '%' );
}
if ( ! empty( $attributes['bottomSepColor'] ) ) {
$css->set_selector( $base_selector . ' .kt-row-layout-bottom-sep svg' );
$css->add_property( 'fill', $css->render_color( $attributes['bottomSepColor'] ) . '!important' );
}
if ( isset( $attributes['bottomSepHeightTab'] ) || isset( $attributes['bottomSepWidthTab'] ) ) {
$css->set_media_state( 'tablet' );
if ( isset( $attributes['bottomSepHeightTab'] ) ) {
$css->set_selector( $base_selector . ' .kt-row-layout-bottom-sep' );
$css->add_property( 'height', $attributes['bottomSepHeightTab'] . $bottomSepUnit );
}
if ( isset( $attributes['bottomSepWidthTab'] ) ) {
$css->set_selector( $base_selector . ' .kt-row-layout-bottom-sep svg' );
$css->add_property( 'width', $attributes['bottomSepWidthTab'] . '%' );
}
$css->set_media_state( 'desktop' );
}
if ( isset( $attributes['bottomSepHeightMobile'] ) || isset( $attributes['bottomSepWidthMobile'] ) ) {
$css->set_media_state( 'mobile' );
if ( isset( $attributes['bottomSepHeightMobile'] ) ) {
$css->set_selector( $base_selector . ' .kt-row-layout-bottom-sep' );
$css->add_property( 'height', $attributes['bottomSepHeightMobile'] . $bottomSepUnit );
}
if ( isset( $attributes['bottomSepWidthMobile'] ) ) {
$css->set_selector( $base_selector . ' .kt-row-layout-bottom-sep svg' );
$css->add_property( 'width', $attributes['bottomSepWidthMobile'] . '%' );
}
$css->set_media_state( 'desktop' );
}
}
// Top Sep.
if ( isset( $attributes['topSep'] ) && 'none' != $attributes['topSep'] ) {
$topSepUnit = !empty( $attributes['topSepHeightUnit']) ? $attributes['topSepHeightUnit'] : 'px';
$topSepHeight = !empty ($attributes['topSepHeight']) ? $attributes['topSepHeight'] : '100';
$css->set_selector( $base_selector . ' .kt-row-layout-top-sep' );
$css->add_property( 'height', $topSepHeight . $topSepUnit );
if ( $css->is_number( $attributes['topSepWidth'] ) ) {
$css->set_selector( $base_selector . ' .kt-row-layout-top-sep svg' );
$css->add_property( 'width', $attributes['topSepWidth'] . '%' );
}
if ( ! empty( $attributes['topSepColor'] ) ) {
$css->set_selector( $base_selector . ' .kt-row-layout-top-sep svg' );
$css->add_property( 'fill', $css->render_color( $attributes['topSepColor'] ) . '!important' );
}
$css->set_media_state( 'tablet' );
if ( $css->is_number( $attributes['topSepHeightTab'] ) ) {
$css->set_selector( $base_selector . ' .kt-row-layout-top-sep' );
$css->add_property( 'height', $attributes['topSepHeightTab'] . $topSepUnit );
}
if ( $css->is_number( $attributes['topSepWidthTab'] ) ) {
$css->set_selector( $base_selector . ' .kt-row-layout-top-sep svg' );
$css->add_property( 'width', $attributes['topSepWidthTab'] . '%' );
}
$css->set_media_state( 'mobile' );
if ( $css->is_number( $attributes['topSepHeightMobile'] ) ) {
$css->set_selector( $base_selector . ' .kt-row-layout-top-sep' );
$css->add_property( 'height', $attributes['topSepHeightMobile'] . $topSepUnit );
}
if ( $css->is_number( $attributes['topSepWidthMobile'] ) ) {
$css->set_selector( $base_selector . ' .kt-row-layout-top-sep svg' );
$css->add_property( 'width', $attributes['topSepWidthMobile'] . '%' );
}
$css->set_media_state( 'desktop' );
}
if ( isset( $attributes['vsdesk'] ) && $attributes['vsdesk'] ) {
$css->set_media_state( 'desktopOnly' );
$css->set_selector( $base_selector );
$css->add_property( 'display', 'none !important' );
}
if ( isset( $attributes['vstablet'] ) && $attributes['vstablet'] ) {
$css->set_media_state( 'tabletOnly' );
$css->set_selector( $base_selector );
$css->add_property( 'display', 'none !important' );
}
if ( isset( $attributes['vsmobile'] ) && $attributes['vsmobile'] ) {
$css->set_media_state( 'mobile' );
$css->set_selector( $base_selector );
$css->add_property( 'display', 'none !important' );
}
$css->set_media_state( 'desktop' );
// Background Slider Pause Button Styles.
if ( isset( $attributes['backgroundSettingTab'] ) && 'slider' === $attributes['backgroundSettingTab'] ) {
$arrow_style = ! empty( $attributes['backgroundSliderSettings'][0]['arrowStyle'] ) ? $attributes['backgroundSliderSettings'][0]['arrowStyle'] : 'none';
$show_pause_button = isset( $attributes['backgroundSliderSettings'][0]['showPauseButton'] ) ? $attributes['backgroundSliderSettings'][0]['showPauseButton'] : false;
if ( $show_pause_button ) {
$css->set_selector( $base_selector . ' .kb-blocks-bg-slider .kb-gallery-pause-button' );
// Set styles based on arrow style.
switch ( $arrow_style ) {
case 'blackonlight':
$css->add_property( 'background-color', 'rgba(255, 255, 255, 0.8)' );
$css->add_property( 'color', '#000' );
$css->add_property( 'border', 'none' );
break;
case 'outlineblack':
$css->add_property( 'background-color', 'transparent' );
$css->add_property( 'color', '#000' );
$css->add_property( 'border', '2px solid #000' );
break;
case 'outlinewhite':
$css->add_property( 'background-color', 'transparent' );
$css->add_property( 'color', '#fff' );
$css->add_property( 'border', '2px solid #fff' );
break;
case 'none':
default:
$css->add_property( 'background-color', 'rgba(0, 0, 0, 0.8)' );
$css->add_property( 'color', '#fff' );
$css->add_property( 'border', 'none' );
break;
}
}
}
if ( isset( $attributes['kadenceBlockCSS'] ) && ! empty( $attributes['kadenceBlockCSS'] ) ) {
$css->add_css_string( str_replace( 'selector', $base_selector, $attributes['kadenceBlockCSS'] ) );
}
return $css->css_output();
}
/**
* Render svg divider.
*
* @param string $divider the divider slug.
* @param string $location - top or bottom.
*/
public function get_divider_render( $divider, $location ) {
$paths = array();
$paths['ct'] = '