Your IP : 10.10.0.253
<?php
/**
* @package SP Page Builder
* @author JoomShaper http://www.joomshaper.com
* @copyright Copyright (c) 2010 - 2025 JoomShaper
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
*/
//no direct access
defined('_JEXEC') or die('Restricted access');
use Joomla\CMS\Uri\Uri;
class SppagebuilderAddonTab extends SppagebuilderAddons
{
/**
* The addon frontend render method.
* The returned HTML string will render to the frontend page.
*
* @return string The HTML string.
* @since 1.0.0
*/
public function render()
{
$settings = $this->addon->settings;
$class = (isset($settings->class) && $settings->class) ? $settings->class : '';
$style = (isset($settings->style) && $settings->style) ? $settings->style : '';
$title = (isset($settings->title) && $settings->title) ? $settings->title : '';
$nav_icon_postion = (isset($settings->nav_icon_postion) && $settings->nav_icon_postion) ? $settings->nav_icon_postion : '';
$nav_image_postion = (isset($settings->nav_image_postion) && $settings->nav_image_postion) ? $settings->nav_image_postion : '';
$heading_selector = (isset($settings->heading_selector) && $settings->heading_selector) ? $settings->heading_selector : 'h3';
$nav_text_align = (isset($settings->nav_text_align) && $settings->nav_text_align) ? $settings->nav_text_align : 'sppb-text-left';
$nav_position = (isset($settings->nav_position) && $settings->nav_position) ? $settings->nav_position : 'nav-left';
// Output
$output = '<div class="sppb-addon sppb-addon-tab ' . $class . '">';
$output .= ($title) ? '<' . $heading_selector . ' class="sppb-addon-title">' . $title . '</' . $heading_selector . '>' : '';
$output .= '<div class="sppb-addon-content sppb-tab sppb-' . $style . '-tab sppb-tab-nav-position">';
// $output .= '<div class="sppb-addon-content sppb-tab sppb-' . $style . '-tab sppb-tab-' . $nav_position . ' sppb-tab-nav-position">';
// Tab Title
$output .= '<ul class="sppb-nav sppb-nav-' . $style . '" role="tablist">';
foreach ($settings->sp_tab_item as $key => $tab)
{
$icon_top = '';
$icon_bottom = '';
$icon_right = '';
$icon_left = '';
$icon_block = '';
// Image
$image_top = '';
$image_bottom = '';
$image_right = '';
$image_left = '';
// Lazy load image
$tab_image = isset($tab->image) && $tab->image ? $tab->image : '';
$tab_image_src = isset($tab_image->src) ? $tab_image->src : $tab_image;
$tab_image_width = (isset($tab_image->width) && $tab_image->width) ? $tab_image->width : '';
$tab_image_height = (isset($tab_image->height) && $tab_image->height) ? $tab_image->height : '';
$placeholder = $tab_image_src == '' ? false : $this->get_image_placeholder($tab_image_src);
if (strpos($tab_image_src, "http://") !== false || strpos($tab_image_src, "https://") !== false)
{
$tab_image_src = $tab_image_src;
}
else
{
if ($tab_image_src)
{
$tab_image_src = Uri::base() . $tab_image_src;
}
}
$title = (isset($tab->title) && $tab->title) ? ' ' . $tab->title . ' ' : '';
$subtitle = (isset($tab->subtitle) && $tab->subtitle) ? '<span class="sppb-tab-subtitle">' . $tab->subtitle . '</span>' : '';
if (isset($tab->image_or_icon) && $tab->image_or_icon == 'image')
{
if ($tab_image_src && $nav_image_postion == 'top')
{
$image_top = '<img class="sppb-tab-image tab-image-block' . ($placeholder ? ' sppb-element-lazy' : '') . '" src="' . ($placeholder ? $placeholder : $tab_image_src) . '" alt="' . trim(strip_tags($title)) . '" ' . ($placeholder ? 'data-large="' . $tab_image_src . '"' : '') . ' ' . ($tab_image_width ? 'width="' . $tab_image_width . '"' : '') . ' ' . ($tab_image_height ? 'height="' . $tab_image_height . '"' : '') . ' loading="lazy"/>';
}
elseif ($tab_image_src && $nav_image_postion == 'bottom')
{
$image_bottom = '<img class="sppb-tab-image tab-image-block' . ($placeholder ? ' sppb-element-lazy' : '') . '" src="' . ($placeholder ? $placeholder : $tab_image_src) . '" alt="' . trim(strip_tags($title)) . '" ' . ($placeholder ? 'data-large="' . $tab_image_src . '"' : '') . ' ' . ($tab_image_width ? 'width="' . $tab_image_width . '"' : '') . ' ' . ($tab_image_height ? 'height="' . $tab_image_height . '"' : '') . ' loading="lazy"/>';
}
elseif ($tab_image_src && $nav_image_postion == 'right')
{
$image_right = '<img class="sppb-tab-image' . ($placeholder ? ' sppb-element-lazy' : '') . '" src="' . ($placeholder ? $placeholder : $tab_image_src) . '" alt="' . trim(strip_tags($title)) . '" ' . ($placeholder ? 'data-large="' . $tab_image_src . '"' : '') . ' ' . ($tab_image_width ? 'width="' . $tab_image_width . '"' : '') . ' ' . ($tab_image_height ? 'height="' . $tab_image_height . '"' : '') . ' loading="lazy"/>';
}
else
{
$image_left = $tab_image_src ? '<img class="sppb-tab-image' . ($placeholder ? ' sppb-element-lazy' : '') . '" src="' . ($placeholder ? $placeholder : $tab_image_src) . '" alt="' . trim(strip_tags($title)) . '" ' . ($placeholder ? 'data-large="' . $tab_image_src . '"' : '') . ' ' . ($tab_image_width ? 'width="' . $tab_image_width . '"' : '') . ' ' . ($tab_image_height ? 'height="' . $tab_image_height . '"' : '') . ' loading="lazy"/>' : '';
}
}
else
{
if (isset($tab->icon) && $tab->icon)
{
$icon_arr = array_filter(explode(' ', $tab->icon));
if (count($icon_arr) === 1)
{
$tab->icon = 'fa ' . $tab->icon;
}
if ($tab->icon && $nav_icon_postion === 'top')
{
$icon_top = '<span class="sppb-tab-icon tab-icon-block" aria-label="' . trim(strip_tags($title)) . '"><i class="' . $tab->icon . '" aria-hidden="true"></i></span>';
}
elseif ($tab->icon && $nav_icon_postion === 'bottom')
{
$icon_bottom = '<span class="sppb-tab-icon tab-icon-block" aria-label="' . trim(strip_tags($title)) . '"><i class="' . $tab->icon . '" aria-hidden="true"></i></span>';
}
elseif ($tab->icon && $nav_icon_postion === 'right')
{
$icon_right = '<span class="sppb-tab-icon" aria-label="' . trim(strip_tags($title)) . '"><i class="' . $tab->icon . '" aria-hidden="true"></i></span>';
}
else
{
$icon_left = '<span class="sppb-tab-icon" aria-label="' . trim(strip_tags($title)) . '"><i class="' . $tab->icon . '" aria-hidden="true"></i></span>';
}
}
}
if ($nav_icon_postion === 'top' || $nav_icon_postion === 'bottom' || $nav_image_postion === 'top' || $nav_image_postion === 'bottom')
{
$icon_block = 'tab-img-or-icon-block-wrap';
}
$output .= '<li role="presentation" class="' . (($key === 0) ? "active" : "") . '">';
$output .= '<a data-toggle="sppb-tab" id="sppb-content-' . ($this->addon->id . $key) . '" class="' . $icon_block . '" href="#sppb-tab-' . ($this->addon->id . $key) . '" role="tab" aria-controls="sppb-tab-' . ($this->addon->id . $key) . '" aria-selected="' . (($key == 0) ? "true" : "false") . '">' . $image_top . $image_left . $icon_top . $icon_left . $title . $image_right . $image_bottom . $icon_right . $icon_bottom . $subtitle . '</a>';
$output .= '</li>';
}
$output .= '</ul>';
// Tab Content
$output .= '<div class="sppb-tab-content sppb-tab-' . $style . '-content">';
foreach ($settings->sp_tab_item as $key => $tab)
{
$output .= '<div id="sppb-tab-' . ($this->addon->id . $key) . '" class="sppb-tab-pane sppb-fade' . (($key == 0) ? " active in" : "") . '" role="tabpanel" aria-labelledby="sppb-content-' . ($this->addon->id . $key) . '">' . $tab->content . '</div>';
}
$output .= '</div>';
$output .= '</div>';
$output .= '</div>';
return $output;
}
/**
* Generate the CSS string for the frontend page.
*
* @return string The CSS string for the page.
* @since 1.0.0
*/
public function css()
{
$addon_id = '#sppb-addon-' . $this->addon->id;
$settings = $this->addon->settings;
$cssHelper = new CSSHelper($addon_id);
$css = '';
$nav_position = (isset($settings->nav_position_original) && $settings->nav_position_original) ? $settings->nav_position_original : 'nav-top';
$settings->nav_padding = $settings->nav_padding_original ?? $settings->nav_padding ?? '';
$settings->nav_margin = $settings->nav_margin_original ?? $settings->nav_margin ?? '';
$tab_style = (isset($settings->style) && $settings->style) ? $settings->style : '';
$settings->nav_gutter = empty($settings->nav_gutter) ? 0 : $settings->nav_gutter;
$selector = '';
$props = ['active_tab_color' => 'color', 'active_tab_border_width' => 'border-width', 'active_tab_border_color' => 'border-color'];
$units = ['active_tab_color' => false, 'active_tab_border_color' => false, 'active_tab_bg' => false, 'active_tab_border_width' => false];
switch ($tab_style)
{
case 'pills':
$selector = '.sppb-nav-pills > li.active > a, .sppb-nav-pills > li.active > a:hover, .sppb-nav-pills > li.active > a:focus';
$props['active_tab_bg'] = 'background';
break;
case 'lines':
$selector = '.sppb-nav-lines > li.active > a, .sppb-nav-lines > li.active > a:hover, .sppb-nav-lines > li.active > a:focus';
$props['active_tab_bg'] = 'border-bottom-color';
break;
case 'custom':
$selector = '.sppb-nav-custom > li.active > a, .sppb-nav-custom > li.active > a:hover, .sppb-nav-custom > li.active > a:focus';
$props['active_tab_bg'] = 'background';
break;
}
$tabStyle = $cssHelper->generateStyle($selector, $settings, $props, $units);
$navFontStyle = $cssHelper->typography(
'.sppb-nav-custom a',
$settings,
'nav_typography',
[
'font' => 'nav_font_family',
'size' => 'nav_fontsize',
'line_height' => 'nav_lineheight',
'uppercase' => 'nav_font_style.uppercase',
'italic' => 'nav_font_style.italic',
'underline' => 'nav_font_style.underline',
'weight' => 'nav_font_style.weight',
]
);
$nav_border = (isset($settings->nav_border) && trim($settings->nav_border)) ? $settings->nav_border : '';
$isUnitPresent = preg_match('/(px|rem|em|%)\b/', $nav_border);
$navStyle = $cssHelper->generateStyle(
'.sppb-nav-custom a',
$settings,
[
'nav_border' => $isUnitPresent
? 'border-style: solid; border-width'
: 'border: %spx solid',
'nav_border_color' => 'border-color',
'nav_color' => 'color',
'nav_bg_color' => 'background',
'nav_border_radius' => 'border-radius',
'nav_padding' => 'padding',
'nav_margin' => 'margin'
],
[
'nav_border' => $isUnitPresent ? false : 'px',
'nav_border_color' => false,
'nav_color' => false,
'nav_bg_color' => false,
'nav_padding' => false,
'nav_margin' => false
],
['nav_padding' => 'spacing', 'nav_margin' => 'spacing']
);
$customNavPadding = $cssHelper->generateStyle('.sppb-nav-custom li', $settings, ['nav_padding' => 'padding', 'nav_margin' => 'margin'], false, ['nav_padding' => 'spacing', 'nav_margin' => 'spacing']);
$contentStyle = $cssHelper->generateStyle(
'.sppb-tab-custom-content > div',
$settings,
[
'content_backround' => 'background',
'content_border' => 'border: %spx solid',
'content_color' => 'color',
'content_border_color' => 'border-color',
'content_border_radius' => 'border-radius',
'content_margin' => 'margin',
'content_padding' => 'padding',
],
[
'content_backround' => false,
'content_border' => false,
'content_color' => false,
'content_border_color' => false,
'content_margin' => false,
'content_padding' => false
],
['content_margin' => 'spacing', 'content_padding' => 'spacing']
);
$contentFontStyle = $cssHelper->typography('.sppb-tab-custom-content > div', $settings, 'content_typography', [
'font' => 'content_font_family',
'size' => 'content_fontsize',
'line_height' => 'content_lineheight',
'uppercase' => 'content_font_style.uppercase',
'italic' => 'content_font_style.italic',
'underline' => 'content_font_style.underline',
'weight' => 'content_font_style.weight',
]);
$show_boxshadow = (isset($settings->show_boxshadow) && $settings->show_boxshadow) ? $settings->show_boxshadow : '';
$box_shadow = '';
if ($show_boxshadow)
{
$box_shadow .= (isset($settings->shadow_horizontal) && $settings->shadow_horizontal) ? $settings->shadow_horizontal . 'px ' : '0 ';
$box_shadow .= (isset($settings->shadow_vertical) && $settings->shadow_vertical) ? $settings->shadow_vertical . 'px ' : '0 ';
$box_shadow .= (isset($settings->shadow_blur) && $settings->shadow_blur) ? $settings->shadow_blur . 'px ' : '0 ';
$box_shadow .= (isset($settings->shadow_spread) && $settings->shadow_spread) ? $settings->shadow_spread . 'px ' : '0 ';
$box_shadow .= (isset($settings->shadow_color) && $settings->shadow_color) ? $settings->shadow_color : 'rgba(0, 0, 0, .5)';
}
$settings->dummy_box_shadow = $box_shadow;
$boxShadowStyle = $cssHelper->generateStyle('.sppb-tab-custom-content > div, .sppb-nav-custom a', $settings, ['dummy_box_shadow' => 'box-shadow'], false);
$iconStyle = $cssHelper->generateStyle('.sppb-tab-icon', $settings, ['icon_fontsize' => 'font-size', 'icon_margin' => 'margin', 'icon_color' => 'color'], ['icon_margin' => false, 'icon_color' => false], ['icon_margin' => 'spacing']);
$imageStyle = $cssHelper->generateStyle('.sppb-tab-image', $settings, ['image_height' => 'height', 'image_width' => 'width', 'image_margin' => 'margin'], ['image_margin' => false], ['image_margin' => 'spacing']);
$customHoverStyle = $cssHelper->generateStyle('.sppb-nav-custom > li > a:hover, .sppb-nav-custom > li > a:focus', $settings, ['hover_tab_color' => 'color', 'hover_tab_border_width' => 'border-width', 'hover_tab_border_color' => 'border-color', 'hover_tab_bg' => 'background-color'], ['hover_tab_color' => false, 'hover_tab_border_color' => false, 'hover_tab_bg' => false, 'hover_tab_border_width' => false]);
$customIconHoverStyle = $cssHelper->generateStyle('.sppb-nav-custom > li > a:hover > .sppb-tab-icon,.sppb-nav-custom > li > a:focus > .sppb-tab-icon', $settings, ['icon_color_hover' => 'color'], false);
$customIconActiveStyle = $cssHelper->generateStyle('.sppb-nav-custom > li.active > a > .sppb-tab-icon, .sppb-nav-custom > li.active > a:hover > .sppb-tab-icon, .sppb-nav-custom > li.active > a:focus > .sppb-tab-icon', $settings, ['icon_color_active' => 'color'], false);
if ($tab_style == "custom")
{
$customContentWidth = $cssHelper->generateStyle('.sppb-tab-content.sppb-tab-custom-content', $settings, ['content_width' => 'max-width'], '%');
}
$mediaQueries = [
"xl" => "@media ( min-width: 1199.99px ) and ( max-width:1399.99px)",
"lg" => "@media ( min-width: 991.99px ) and ( max-width: 1199.98px )",
"md" => "@media ( min-width: 767.99px ) and ( max-width: 991.98px )",
"sm" => "@media ( min-width: 575.99px ) and ( max-width: 767.98px )",
"xs" => "@media ( max-width: 575.98px )",
];
$navGutter = $settings->nav_gutter_original ?? $settings->nav_gutter ?? 0;
$navJustified = $settings->nav_justified_original ?? $settings->nav_justified ?? false;
$navWidth = $settings->nav_width_original ?? $settings->nav_width ?? 30;
$loopOutput = '';
foreach ($mediaQueries as $size => $media)
{
$loopOutput .= "$media {";
if (is_object($nav_position) && isset($nav_position->$size))
{
if ($nav_position->$size == "nav-left" || $nav_position->$size == "nav-right")
{
$loopOutput .= "$addon_id .sppb-custom-tab.sppb-tab-nav-position .sppb-tab-custom-content
{
flex-basis: 0;
flex-grow: 1;
}";
$loopOutput .= "$addon_id .sppb-custom-tab.sppb-tab-nav-position .sppb-nav.sppb-nav-custom
{
flex-direction: column !important;
}";
}
if ($nav_position->$size == "nav-right")
{
$loopOutput .= "$addon_id .sppb-custom-tab.sppb-tab-nav-position
{
flex-direction: row-reverse !important;
}";
}
if ($nav_position->$size == "nav-top")
{
$loopOutput .= "$addon_id .sppb-custom-tab.sppb-tab-nav-position .sppb-nav.sppb-nav-custom
{
flex-direction: row !important;
}";
$loopOutput .= "$addon_id .sppb-custom-tab.sppb-tab-nav-position
{
flex-direction: column !important;
}";
}
if ($nav_position->$size == "nav-bottom")
{
$loopOutput .= "$addon_id .sppb-custom-tab.sppb-tab-nav-position .sppb-nav.sppb-nav-custom
{
flex-direction: row !important;
}";
$loopOutput .= ".sppb-custom-tab.sppb-tab-nav-position
{
flex-direction: column-reverse !important;
}";
}
$loopOutput .= "$addon_id .sppb-tab-content {";
$newGutter = is_object($navGutter) ? (empty($navGutter->$size) ? 0 : $navGutter->$size) : $navGutter;
$newNavWidth = is_object($navWidth) ? (empty($navWidth->$size) ? 30 : $navWidth->$size) : $navWidth;
if ($nav_position->$size == "nav-top")
{
$loopOutput .= 'padding: ' . $newGutter . 'px 0 0 0 !important';
}
else if ($nav_position->$size == "nav-bottom")
{
$loopOutput .= 'padding: 0 0 ' . $newGutter . 'px 0 !important';
}
else if ($nav_position->$size == "nav-right")
{
$loopOutput .= 'padding: 0 ' . $newGutter . 'px 0 0 !important';
}
else
{
$loopOutput .= 'padding: 0 0 0 ' . $newGutter . 'px !important';
}
$loopOutput .= "}";
$isNavJustified = is_object($navJustified) ? (empty($navJustified->$size) ? false : $navJustified->$size) : $navJustified;
if (($nav_position->$size == "nav-top" || $nav_position->$size == "nav-bottom") && $isNavJustified)
{
$loopOutput .= "$addon_id .sppb-nav > li {flex: 1 1 auto !important;} $addon_id .sppb-nav {width: 100% !important;}";
}
if (($nav_position->$size == "nav-top" || $nav_position->$size == "nav-bottom") && !$isNavJustified)
{
$loopOutput .= "$addon_id .sppb-nav {width: fit-content !important;}";
}
if ($tab_style == "custom" && ($nav_position->$size == "nav-left" || $nav_position->$size == "nav-right"))
{
$loopOutput .= $addon_id . '.sppb-nav { width: ' . $newNavWidth . '% !important;}';
}
}
else
{
if ($nav_position == "nav-left" || $nav_position == "nav-right")
{
$loopOutput .= "$addon_id .sppb-custom-tab.sppb-tab-nav-position .sppb-tab-custom-content
{
flex-basis: 0;
flex-grow: 1;
}";
$loopOutput .= "$addon_id .sppb-custom-tab.sppb-tab-nav-position .sppb-nav.sppb-nav-custom
{
flex-direction: column !important;
}";
}
if ($nav_position == "nav-right")
{
$loopOutput .= "$addon_id .sppb-custom-tab.sppb-tab-nav-position
{
flex-direction: row-reverse !important;
}";
}
if ($nav_position == "nav-top")
{
$loopOutput .= "$addon_id .sppb-custom-tab.sppb-tab-nav-position .sppb-nav.sppb-nav-custom
{
flex-direction: row !important;
}";
$loopOutput .= "$addon_id .sppb-custom-tab.sppb-tab-nav-position
{
flex-direction: column !important;
}";
}
if ($nav_position == "nav-bottom")
{
$loopOutput .= "$addon_id .sppb-custom-tab.sppb-tab-nav-position .sppb-nav.sppb-nav-custom
{
flex-direction: row !important;
}";
$loopOutput .= "$addon_id .sppb-custom-tab.sppb-tab-nav-position
{
flex-direction: column-reverse !important;
}";
}
$loopOutput .= "$addon_id .sppb-tab-content {";
$newGutter = is_object($navGutter) ? (empty($navGutter->$size) ? 0 : $navGutter->$size) : $navGutter;
$newNavWidth = is_object($navWidth) ? (empty($navWidth->$size) ? 30 : $navWidth->$size) : $navWidth;
if ($nav_position == "nav-top")
{
$loopOutput .= 'padding: ' . $newGutter . 'px 0 0 0 !important';
}
else if ($nav_position == "nav-bottom")
{
$loopOutput .= 'padding: 0 0 ' . $newGutter . 'px 0 !important';
}
else if ($nav_position == "nav-right")
{
$loopOutput .= 'padding: 0 ' . $newGutter . 'px 0 0 !important';
}
else
{
$loopOutput .= 'padding: 0 0 0 ' . $newGutter . 'px !important';
}
$loopOutput .= "}";
$isNavJustified = is_object($navJustified) ? (empty($navJustified->$size) ? false : $navJustified->$size) : $navJustified;
if (($nav_position == "nav-top" || $nav_position == "nav-bottom") && $isNavJustified)
{
$loopOutput .= "$addon_id .sppb-nav > li {flex: 1 1 auto !important;} $addon_id .sppb-nav {width: 100% !important;}";
}
if (($nav_position == "nav-top" || $nav_position == "nav-bottom") && !$isNavJustified)
{
$loopOutput .= "$addon_id .sppb-nav {width: fit-content !important;}";
}
if ($tab_style == "custom" && ($nav_position == "nav-left" || $nav_position == "nav-right"))
{
$loopOutput .= "$addon_id .sppb-nav { width: $newNavWidth% !important;}";
}
}
$loopOutput .= "}";
}
// default device style
if (is_object($nav_position))
{
if ($nav_position->xl == "nav-left" || $nav_position->xl == "nav-right")
{
$loopOutput .= ".sppb-custom-tab.sppb-tab-nav-position .sppb-tab-custom-content
{
flex-basis: 0;
flex-grow: 1;
}";
$loopOutput .= "$addon_id .sppb-custom-tab.sppb-tab-nav-position .sppb-nav.sppb-nav-custom
{
flex-direction: column;
}";
}
if ($nav_position->xl == "nav-right")
{
$loopOutput .= "$addon_id .sppb-custom-tab.sppb-tab-nav-position
{
flex-direction: row-reverse;
}";
}
if ($nav_position == "nav-top" || $nav_position == "nav-bottom")
{
$loopOutput .= "$addon_id .sppb-custom-tab.sppb-tab-nav-position .sppb-nav.sppb-nav-custom
{
flex-direction: row;
}";
}
if ($nav_position->xl == "nav-top")
{
$loopOutput .= "$addon_id .sppb-custom-tab.sppb-tab-nav-position
{
flex-direction: column;
}";
}
if ($nav_position->xl == "nav-bottom")
{
$loopOutput .= "$addon_id .sppb-custom-tab.sppb-tab-nav-position
{
flex-direction: column-reverse;
}";
}
$loopOutput .= "$addon_id .sppb-tab-content {";
$newGutter = is_object($navGutter) ? (empty($navGutter->xl) ? 0 : $navGutter->xl) : $navGutter;
$newNavWidth = is_object($navWidth) ? (empty($navWidth->xl) ? 30 : $navWidth->xl) : $navWidth;
if ($nav_position->xl == "nav-top")
{
$loopOutput .= 'padding-top: ' . $newGutter . 'px';
}
else if ($nav_position->xl == "nav-bottom")
{
$loopOutput .= 'padding-bottom: ' . $newGutter . 'px';
}
else if ($nav_position->xl == "nav-right")
{
$loopOutput .= 'padding-right: ' . $newGutter . 'px';
}
else
{
$loopOutput .= 'padding-left: ' . $newGutter . 'px';
}
$loopOutput .= "}";
$isNavJustified = is_object($navJustified) ? (empty($navJustified->xl) ? false : $navJustified->xl) : $navJustified;
if (($nav_position->xl == "nav-top" || $nav_position->xl == "nav-bottom") && $isNavJustified)
{
$loopOutput .= "$addon_id .sppb-nav > li {flex: 1 1 auto;} $addon_id .sppb-nav {width: 100%;}";
}
if (($nav_position->xl == "nav-top" || $nav_position->xl == "nav-bottom") && !$isNavJustified)
{
$loopOutput .= "$addon_id .sppb-nav {width: fit-content;}";
}
if ($tab_style == "custom" && ($nav_position->xl == "nav-left" || $nav_position->xl == "nav-right"))
{
$loopOutput .= "$addon_id .sppb-nav { width: $newNavWidth%;}";
}
}
else
{
if ($nav_position == "nav-left" || $nav_position == "nav-right")
{
$loopOutput .= ".sppb-custom-tab.sppb-tab-nav-position .sppb-tab-custom-content
{
flex-basis: 0;
flex-grow: 1;
}";
$loopOutput .= "$addon_id .sppb-custom-tab.sppb-tab-nav-position .sppb-nav.sppb-nav-custom
{
flex-direction: column;
}";
}
if ($nav_position == "nav-right")
{
$loopOutput .= "$addon_id .sppb-custom-tab.sppb-tab-nav-position
{
flex-direction: row-reverse;
}";
}
if ($nav_position == "nav-top" || $nav_position == "nav-bottom")
{
$loopOutput .= "$addon_id .sppb-custom-tab.sppb-tab-nav-position .sppb-nav.sppb-nav-custom
{
flex-direction: row;
}";
}
if ($nav_position == "nav-top")
{
$loopOutput .= "$addon_id .sppb-custom-tab.sppb-tab-nav-position
{
flex-direction: column;
}";
}
if ($nav_position == "nav-bottom")
{
$loopOutput .= "$addon_id .sppb-custom-tab.sppb-tab-nav-position
{
flex-direction: column-reverse;
}";
}
$loopOutput .= "$addon_id .sppb-tab-content {";
$newGutter = is_object($navGutter) ? (empty($navGutter->xl) ? 0 : $navGutter->xl) : $navGutter;
$newNavWidth = is_object($navWidth) ? (empty($navWidth->xl) ? 30 : $navGutter->xl) : $navWidth;
if ($nav_position == "nav-top")
{
$loopOutput .= 'padding-top: ' . $newGutter . 'px';
}
else if ($nav_position == "nav-bottom")
{
$loopOutput .= 'padding-bottom: ' . $newGutter . 'px';
}
else if ($nav_position == "nav-right")
{
$loopOutput .= 'padding-right: ' . $newGutter . 'px';
}
else
{
$loopOutput .= 'padding-left: ' . $newGutter . 'px';
}
$loopOutput .= "}";
$isNavJustified = is_object($navJustified) ? (empty($navJustified->xl) ? false : $navJustified->xl) : $navJustified;
if (($nav_position == "nav-top" || $nav_position == "nav-bottom") && $isNavJustified)
{
$loopOutput .= "$addon_id .sppb-nav > li {flex: 1 1 auto !important;} $addon_id .sppb-nav {width: 100%;}";
}
if (($nav_position == "nav-top" || $nav_position == "nav-bottom") && !$isNavJustified)
{
$loopOutput .= "$addon_id .sppb-nav {width: fit-content;}";
}
if ($tab_style == "custom" && ($nav_position == "nav-left" || $nav_position == "nav-right"))
{
$loopOutput .= "$addon_id .sppb-nav { width: $newNavWidth%;}";
}
}
$imgOrIconStyles = '';
$imgOrIconStyles .= $cssHelper->generateStyle('.sppb-nav > li > a', $settings, ['nav_text_align_original' => 'text-align'], false);
$transformCss = $cssHelper->generateTransformStyle('.sppb-addon-tab', $settings, 'transform');
if ($tab_style === 'custom')
{
$css .= $imgOrIconStyles;
$css .= $navStyle;
$css .= $navFontStyle;
$css .= $contentStyle;
$css .= $boxShadowStyle;
$css .= $customHoverStyle;
$css .= $contentFontStyle;
$css .= $customNavPadding;
$css .= $customIconHoverStyle;
$css .= $customIconActiveStyle;
$css .= $customContentWidth;
$css .= $loopOutput;
}
$css .= $tabStyle;
$css .= $iconStyle;
$css .= $transformCss;
$css .= $imageStyle;
return $css;
}
/**
* Generate the lodash template string for the frontend editor.
*
* @return string The lodash template string.
* @since 1.0.0
*/
public static function getTemplate()
{
$lodash = new Lodash('#sppb-addon-{{ data.id }}');
$output = '
<style type="text/css">
<#
let box_shadow = "";
if (data.show_boxshadow) {
box_shadow += (!_.isEmpty(data.shadow_horizontal) && data.shadow_horizontal) ? data.shadow_horizontal + \'px \' : "0 ";
box_shadow += (!_.isEmpty(data.shadow_vertical) && data.shadow_vertical) ? data.shadow_vertical + \'px \' : "0 ";
box_shadow += (!_.isEmpty(data.shadow_blur) && data.shadow_blur) ? data.shadow_blur + \'px \' : "0 ";
box_shadow += (!_.isEmpty(data.shadow_spread) && data.shadow_spread) ? data.shadow_spread + \'px \' : "0 ";
box_shadow += (!_.isEmpty(data.shadow_color) && data.shadow_color) ? data.shadow_color : "rgba(0, 0, 0, .5)";
}
const mediaQueries = {
lg: "@media ( min-width: 991.99px ) and ( max-width: 1199.98px )",
md: "@media ( min-width: 767.99px ) and ( max-width: 991.98px )",
sm: "@media ( min-width: 575.99px ) and ( max-width: 767.98px )",
xs: "@media ( max-width: 575.98px )",
};
let navPosition = data?.nav_position || "nav-top";
#>';
// title
$titleTypographyFallbacks = [
'font' => 'data.title_font_family',
'size' => 'data.title_fontsize',
'line_height' => 'data.title_lineheight',
'letter_spacing' => 'data.title_letterspace',
'uppercase' => 'data.title_font_style?.uppercase',
'italic' => 'data.title_font_style?.italic',
'underline' => 'data.title_font_style?.underline',
'weight' => 'data.title_font_style?.weight'
];
$output .= $lodash->unit('margin-top', '.sppb-addon-title', 'data.title_margin_top', 'px');
$output .= $lodash->unit('margin-bottom', '.sppb-addon-title', 'data.title_margin_bottom', 'px');
$output .= $lodash->color('color', '.sppb-addon-title', 'data.title_text_color');
$output .= $lodash->typography('.sppb-addon-title', 'data.title_typography', $titleTypographyFallbacks);
// pills
$output .= '<# if (data.style == "pills") { #>';
$output .= $lodash->color('color', '.sppb-nav-pills > li.active > a,.sppb-nav-pills > li.active > a:hover,.sppb-nav-pills > li.active > a:focus', 'data.active_tab_color');
$output .= $lodash->color('background-color', '.sppb-nav-pills > li.active > a,.sppb-nav-pills > li.active > a:hover,.sppb-nav-pills > li.active > a:focus', 'data.active_tab_bg');
$output .= '<# } #>';
// lines
$output .= '<# if (data.style == "lines") { #>';
$output .= $lodash->color('color', '.sppb-nav-lines > li.active > a,.sppb-nav-lines > li.active > a:hover,.sppb-nav-lines > li.active > a:focus', 'data.active_tab_color');
$output .= $lodash->unit('border-bottom-color', '.sppb-nav-lines > li.active > a,.sppb-nav-lines > li.active > a:hover,.sppb-nav-lines > li.active > a:focus', 'data.active_tab_bg');
$output .= '<# } #>';
// custom
$output .= '<# if (data.style == "custom") { #>';
$output .= $lodash->color('color', '.sppb-nav-custom > li.active > a,.sppb-nav-custom > li.active > a:hover,.sppb-nav-custom > li.active > a:focus', 'data.active_tab_color');
$output .= $lodash->color('background-color', '.sppb-nav-custom > li.active > a,.sppb-nav-custom > li.active > a:hover,.sppb-nav-custom > li.active > a:focus', 'data.active_tab_bg');
$output .= $lodash->unit('border-width', '.sppb-nav-custom > li.active > a,.sppb-nav-custom > li.active > a:hover,.sppb-nav-custom > li.active > a:focus', 'data.active_tab_border_width');
$output .= $lodash->unit('border-color', '.sppb-nav-custom > li.active > a,.sppb-nav-custom > li.active > a:hover,.sppb-nav-custom > li.active > a:focus', 'data.active_tab_border_width');
// hover
$output .= $lodash->color('color', '.sppb-nav-custom > li > a:hover,.sppb-nav-custom > li > a:focus', 'data.hover_tab_color');
$output .= $lodash->color('background-color', '.sppb-nav-custom > li > a:hover,.sppb-nav-custom > li > a:focus', 'data.hover_tab_bg');
$output .= $lodash->unit('border-width', '.sppb-nav-custom > li > a:hover,.sppb-nav-custom > li > a:focus', 'data.hover_tab_border_width');
$output .= $lodash->unit('border-color', '.sppb-nav-custom > li > a:hover,.sppb-nav-custom > li > a:focus', 'data.hover_tab_border_color');
// icon
$output .= $lodash->color('color', '.sppb-nav-custom > li > a:hover > .sppb-tab-icon, .sppb-nav-custom > li > a:focus > .sppb-tab-icon', 'data.icon_color_hover');
$output .= $lodash->color('color', '.sppb-nav-custom > li.active > a > .sppb-tab-icon,.sppb-nav-custom > li.active > a:hover > .sppb-tab-icon,.sppb-nav-custom > li.active > a:focus > .sppb-tab-icon', 'data.icon_color_active');
$output .= $lodash->spacing('padding', '.sppb-nav-custom li', 'data.nav_margin');
$output .= $lodash->spacing('padding', '.sppb-nav-custom li a', 'data.nav_padding');
$output .= $lodash->spacing('margin', '.sppb-tab-icon', 'data.icon_margin');
$output .= $lodash->color('color', '.sppb-tab-icon', 'data.icon_color');
$output .= $lodash->unit('font-size', '.sppb-tab-icon', 'data.icon_fontsize', 'px');
$output .= '#sppb-addon-{{ data.id }} .sppb-tab-custom-content > div {border-style: solid;}';
$output .= $lodash->color('background-color', '.sppb-tab-custom-content > div', 'data.content_backround');
$output .= $lodash->color('color', '.sppb-tab-custom-content > div', 'data.content_color');
$output .= $lodash->unit('border-color', '.sppb-tab-custom-content > div', 'data.content_border_color');
$output .= $lodash->unit('border-radius', '.sppb-tab-custom-content > div', 'data.content_border_radius');
$output .= $lodash->unit('border', '.sppb-tab-custom-content > div', 'data.content_border');
$output .= $lodash->spacing('padding', '.sppb-tab-custom-content > div', 'data.content_padding');
$output .= $lodash->spacing('margin', '.sppb-tab-custom-content > div', 'data.content_margin');
$output .= '<# } #>';
// pills, lines & custom
$output .= '<# if (data.style == "pills" || data.style == "lines" || data.style == "custom") { #>';
$output .= $lodash->color('color', '.sppb-nav > li > a', 'data.nav_color');
$output .= $lodash->color('color', '.sppb-nav > li:hover > a', 'data.hover_tab_color');
$output .= $lodash->color('color', '.sppb-nav > li.active > a', 'data.active_tab_color');
$output .= $lodash->color('background-color', '.sppb-tab-pane', 'data.content_backround');
$output .= $lodash->color('color', '.sppb-tab-pane', 'data.content_color');
$output .= $lodash->unit('border-color', '.sppb-tab-pane', 'data.content_border_color', '', false);
$output .= '<# } #>';
// pills & custom
$output .= '<# if (data.style == "pills" || data.style == "custom") { #>';
$output .= $lodash->color('background-color', '.sppb-nav > li > a', 'data.nav_bg_color');
$output .= $lodash->color('background-color', '.sppb-nav > li:hover > a', 'data.hover_tab_bg');
$output .= $lodash->color('background-color', '.sppb-nav > li.active > a', 'data.active_tab_bg');
$output .= $lodash->unit('border-radius', '.sppb-nav > li > a', 'data.nav_border_radius', 'px');
$output .= '<# } #>';
// lines only
$output .= '<# if (data.style == "lines") { #>';
$output .= $lodash->unit('border-bottom-color', '.sppb-nav-lines', 'data.nav_border_color', '', false);
$output .= $lodash->unit('border-bottom-color', '.sppb-nav > li:hover > a', 'data.hover_tab_border_color', '', false);
$output .= $lodash->unit('border-bottom-color', '.sppb-nav > li.active > a', 'data.active_tab_border_color', '', false);
$output .= '<# } #>';
// Custom
$output .= '<# if (data.style == "custom") { #>';
$output .= '<# if (!_.isEmpty(data.nav_border)) { #>';
$output .= '#sppb-addon-{{ data.id }} .sppb-nav > li > a {border-style: solid;}';
$output .= $lodash->unit('border-width', '.sppb-nav > li > a', 'data.nav_border');
$output .= $lodash->unit('border-color', '.sppb-nav > li > a', 'data.nav_border_color', '', false);
$output .= $lodash->unit('border-color', '.sppb-nav > li:hover > a', 'data.hover_tab_border_color', '', false);
$output .= $lodash->unit('border-color', '.sppb-nav > li.active > a', 'data.active_tab_border_color', '', false);
$output .= '<# } #>';
$output .= $lodash->unit("max-width", ".sppb-tab-content.sppb-tab-custom-content", "data.content_width", '%');
$output .= '<# Object.keys(mediaQueries).forEach(size => { #>';
$output .= '<# if(_.isObject(navPosition)) { #>';
$output .= '{{ mediaQueries[size] }} {
#sppb-addon-{{data.id}} .sppb-tab-content {';
$output .= '<# if (navPosition[size] === "nav-top") { #>';
$output .= 'padding: {{ data.nav_gutter?.[size] || 0 }}px 0 0 0 !important;';
$output .= '<# } else if (navPosition[size] === "nav-right") { #>';
$output .= 'padding: 0 {{ data.nav_gutter?.[size] || 0 }}px 0 0 !important;';
$output .= '<# } else if (navPosition[size] === "nav-bottom") { #>';
$output .= 'padding: 0 0 {{ data.nav_gutter?.[size] || 0 }}px 0 !important;';
$output .= '<# } else { #>';
$output .= 'padding: 0 0 0 {{ data.nav_gutter?.[size] || 0 }}px !important; <# } #> }';
$output .= '<# if (navPosition[size] === "nav-top" && (_.isObject(data?.nav_justified) ? data?.nav_justified[size] : data?.nav_justified)) { #>';
$output .= '#sppb-addon-{{ data.id }} .sppb-nav > li {flex: 1 1 auto;} #sppb-addon-{{ data.id }} .sppb-nav {width: 100% !important;}';
$output .= '<# } #>';
$output .= '<# if (navPosition[size] === "nav-bottom" && (_.isObject(data?.nav_justified) ? data?.nav_justified[size] : data?.nav_justified)) { #>';
$output .= '#sppb-addon-{{ data.id }} .sppb-nav > li {flex: 1 1 auto;} #sppb-addon-{{ data.id }} .sppb-nav {width: 100% !important;}';
$output .= '<# } #>';
$output .= '<# if (navPosition[size] === "nav-top" && (_.isObject(data?.nav_justified) ? !data?.nav_justified[size] : !data?.nav_justified)) { #>';
$output .= '#sppb-addon-{{ data.id }} .sppb-nav {width: fit-content !important;}';
$output .= '<# } #>';
$output .= '<# if (navPosition[size] === "nav-bottom" && (_.isObject(data?.nav_justified) ? !data?.nav_justified[size] : !data?.nav_justified)) { #>';
$output .= '#sppb-addon-{{ data.id }} .sppb-nav {width: fit-content !important;}';
$output .= '<# } #>';
$output .= '<# if (navPosition[size] === "nav-left" && data?.style === "custom") { #>';
$output .= '#sppb-addon-{{ data.id }} .sppb-nav { width: {{ _.isObject(data.nav_width) ? data.nav_width[size] : data.nav_width }}% !important;}';
$output .= '<# } #>';
$output .= '<# if (navPosition[size] === "nav-right" && data?.style === "custom") { #>';
$output .= '#sppb-addon-{{ data.id }} .sppb-nav { width: {{ _.isObject(data.nav_width) ? data.nav_width[size] : data.nav_width }}% !important;}';
$output .= '<# } #> }';
$output .= '<# } else { #>';
$output .= '{{ mediaQueries[size] }} {
#sppb-addon-{{data.id}} .sppb-tab-content {';
$output .= '<# if (navPosition === "nav-top") { #>';
$output .= 'padding: {{ data.nav_gutter }}px 0 0 0 !important;';
$output .= '<# } else if (navPosition === "nav-right") { #>';
$output .= 'padding: 0 {{ data.nav_gutter }}px 0 0 !important;';
$output .= '<# } else if (navPosition === "nav-bottom") { #>';
$output .= 'padding: 0 0 {{ data.nav_gutter }}px 0 !important;';
$output .= '<# } else { #>';
$output .= 'padding: 0 0 0 {{ data.nav_gutter }}px !important; } }';
$output .= '<# if (navPosition[size] === "nav-top" && (_.isObject(data?.nav_justified) ? data?.nav_justified[size] : data?.nav_justified)) { #>';
$output .= '#sppb-addon-{{ data.id }} .sppb-nav > li {flex: 1 1 auto;} #sppb-addon-{{ data.id }} .sppb-nav {width: 100% !important;}';
$output .= '<# } #>';
$output .= '<# if (navPosition[size] === "nav-bottom" && (_.isObject(data?.nav_justified) ? data?.nav_justified[size] : data?.nav_justified)) { #>';
$output .= '#sppb-addon-{{ data.id }} .sppb-nav > li {flex: 1 1 auto;} #sppb-addon-{{ data.id }} .sppb-nav {width: 100% !important;}';
$output .= '<# } #>';
$output .= '<# if (navPosition[size] === "nav-top" && (_.isObject(data?.nav_justified) ? !data?.nav_justified[size] : !data?.nav_justified)) { #>';
$output .= '#sppb-addon-{{ data.id }} .sppb-nav {width: fit-content !important;}';
$output .= '<# } #>';
$output .= '<# if (navPosition[size] === "nav-bottom" && (_.isObject(data?.nav_justified) ? !data?.nav_justified[size] : !data?.nav_justified)) { #>';
$output .= ' #sppb-addon-{{ data.id }} .sppb-nav {width: fit-content !important;}';
$output .= '<# } #>';
$output .= '<# if (data?.style === "custom" && (navPosition[size] === "nav-left" || navPosition[size] === "nav-right")) { #>';
$output .= '#sppb-addon-{{ data.id }} .sppb-nav { width: {{ _.isObject(data.nav_width) ? data.nav_width[size] : data.nav_width }}% !important;}';
$output .= '<# } } #>';
$output .= '<# } }) #>';
$output .= '<# } #>';
// for default device
$output .= '<# if(_.isObject(navPosition)) { #>';
$output .= '#sppb-addon-{{data.id}} .sppb-tab-content {';
$output .= '<# if (navPosition?.xl === "nav-top") { #>';
$output .= 'padding: {{ data.nav_gutter?.xl || 0 }}px 0 0 0;';
$output .= '<# } else if (navPosition?.xl === "nav-right") { #>';
$output .= 'padding: 0 {{ data.nav_gutter?.xl || 0 }}px 0 0;';
$output .= '<# } else if (navPosition?.xl === "nav-bottom") { #>';
$output .= 'padding: 0 0 {{ data.nav_gutter?.xl || 0 }}px 0;';
$output .= '<# } else if(navPosition?.xl === "nav-left") { #>';
$output .= 'padding: 0 0 0 {{ data.nav_gutter?.xl || 0 }}px; <# } #> }';
$output .= '<# if (navPosition?.xl === "nav-top" && (_.isObject(data?.nav_justified) ? data?.nav_justified?.xl : data?.nav_justified)) { #>';
$output .= '#sppb-addon-{{ data.id }} .sppb-nav > li {flex: 1 1 auto;} #sppb-addon-{{ data.id }} .sppb-nav {width: 100%;}';
$output .= '<# } #>';
$output .= '<# if (navPosition?.xl === "nav-bottom" && (_.isObject(data?.nav_justified) ? data?.nav_justified?.xl : data?.nav_justified)) { #>';
$output .= '#sppb-addon-{{ data.id }} .sppb-nav > li {flex: 1 1 auto;} #sppb-addon-{{ data.id }} .sppb-nav {width: 100%;}';
$output .= '<# } #>';
$output .= '<# if (navPosition?.xl === "nav-top" && (_.isObject(data?.nav_justified) ? !data?.nav_justified?.xl : !data?.nav_justified)) { #>';
$output .= '#sppb-addon-{{ data.id }} .sppb-nav {width: fit-content;}';
$output .= '<# } #>';
$output .= '<# if (navPosition?.xl === "nav-bottom" && (_.isObject(data?.nav_justified) ? !data?.nav_justified?.xl : !data?.nav_justified)) { #>';
$output .= '#sppb-addon-{{ data.id }} .sppb-nav {width: fit-content;}';
$output .= '<# } #>';
$output .= '<# if (navPosition?.xl === "nav-left" && data?.style === "custom") { #>';
$output .= '#sppb-addon-{{ data.id }} .sppb-nav { width: {{ _.isObject(data.nav_width) ? data.nav_width?.xl : data.nav_width }}%;}';
$output .= '<# } #>';
$output .= '<# if (navPosition?.xl === "nav-right" && data?.style === "custom") { #>';
$output .= '#sppb-addon-{{ data.id }} .sppb-nav { width: {{ _.isObject(data.nav_width) ? data.nav_width?.xl : data.nav_width }}%;}';
$output .= '<# } #> }';
$output .= '<# } else { #>';
$output .= '#sppb-addon-{{data.id}} .sppb-tab-content {';
$output .= '<# if (navPosition === "nav-top") { #>';
$output .= 'padding-top: {{ data.nav_gutter }}px;';
$output .= '<# } else if (navPosition === "nav-right") { #>';
$output .= 'padding-right: {{ data.nav_gutter }}px;';
$output .= '<# } else if (navPosition === "nav-bottom") { #>';
$output .= 'padding-bottom: {{ data.nav_gutter }}px;';
$output .= '<# } else { #>';
$output .= 'padding-left: {{ data.nav_gutter }}px; }';
$output .= '<# if (navPosition?.xl === "nav-top" && (_.isObject(data?.nav_justified) ? data?.nav_justified?.xl : data?.nav_justified)) { #>';
$output .= '#sppb-addon-{{ data.id }} .sppb-nav > li {flex: 1 1 auto;} #sppb-addon-{{ data.id }} .sppb-nav {width: 100%;}';
$output .= '<# } #>';
$output .= '<# if (navPosition?.xl === "nav-bottom" && (_.isObject(data?.nav_justified) ? data?.nav_justified?.xl : data?.nav_justified)) { #>';
$output .= '#sppb-addon-{{ data.id }} .sppb-nav > li {flex: 1 1 auto;} #sppb-addon-{{ data.id }} .sppb-nav {width: 100%;}';
$output .= '<# } #>';
$output .= '<# if (navPosition?.xl === "nav-top" && (_.isObject(data?.nav_justified) ? !data?.nav_justified?.xl : !data?.nav_justified)) { #>';
$output .= '#sppb-addon-{{ data.id }} .sppb-nav {width: fit-content;}';
$output .= '<# } #>';
$output .= '<# if (navPosition?.xl === "nav-bottom" && (_.isObject(data?.nav_justified) ? !data?.nav_justified?.xl : !data?.nav_justified)) { #>';
$output .= '#sppb-addon-{{ data.id }} .sppb-nav {width: fit-content;}';
$output .= '<# } #>';
$output .= '<# if (data?.style === "custom" && (navPosition?.xl === "nav-left" || navPosition?.xl === "nav-right")) { #>';
$output .= '#sppb-addon-{{ data.id }} .sppb-nav { width: {{ _.isObject(data.nav_width) ? data.nav_width?.xl : data.nav_width }}%;}';
$output .= '<# } } #>';
$output .= '<# } #>';
// Nav
$navItemTypographyFallbacks = [
'font' => 'data.nav_font_family',
'size' => 'data.nav_fontsize',
'line_height' => 'data.nav_lineheight',
'uppercase' => 'data.nav_font_style?.uppercase',
'italic' => 'data.nav_font_style?.italic',
'underline' => 'data.nav_font_style?.underline',
'weight' => 'data.nav_font_style?.weight'
];
$output .= $lodash->spacing('padding', '.sppb-nav > li > a', 'data.nav_padding');
$output .= $lodash->spacing('padding', '.sppb-nav > li', 'data.nav_padding');
$output .= $lodash->spacing('margin', '.sppb-nav > li > a', 'data.nav_margin');
$output .= $lodash->spacing('margin', '.sppb-nav > li', 'data.nav_margin');
// $output .= $lodash->flexAlignment('.sppb-nav > li > a', 'data.nav_text_align');
$output .= $lodash->typography('.sppb-nav > li > a', 'data.nav_typography', $navItemTypographyFallbacks);
// Media
$output .= $lodash->color('color', '.sppb-nav > li > a .sppb-tab-icon', 'data.icon_color');
$output .= $lodash->color('color', '.sppb-nav > li:hover > a .sppb-tab-icon', 'data.icon_color_hover');
$output .= $lodash->color('color', '.sppb-nav > li.active > a .sppb-tab-icon', 'data.icon_color_active');
$output .= $lodash->unit('font-size', '.sppb-tab-icon', 'data.icon_fontsize', 'px');
$output .= $lodash->spacing('margin', '.sppb-tab-icon', 'data.icon_margin');
$output .= $lodash->unit('width', '.sppb-tab-image', 'data.image_width', 'px');
$output .= $lodash->unit('height', '.sppb-tab-image', 'data.image_height', 'px');
$output .= $lodash->spacing('margin', '.sppb-tab-image', 'data.image_margin');
$output .= $lodash->spacing('margin', '.sppb-tab-image', 'data.image_margin');
// Content
$contentTypographyFallbacks = [
'font' => 'data.content_font_family',
'size' => 'data.content_fontsize',
'line_height' => 'data.content_lineheight',
'uppercase' => 'data.content_font_style?.uppercase',
'italic' => 'data.content_font_style?.italic',
'underline' => 'data.content_font_style?.underline',
'weight' => 'data.content_font_style?.weight'
];
$output .= $lodash->typography('.sppb-tab-content', 'data.content_typography', $contentTypographyFallbacks);
$output .= $lodash->spacing('padding', '.sppb-tab-pane', 'data.content_padding');
$output .= $lodash->spacing('margin', '.sppb-tab-pane', 'data.content_margin');
$output .= $lodash->unit('border-radius', '.sppb-tab-pane', 'data.content_border_radius', 'px');
// box shadow
$output .= '<# if (data.style == "custom") { #>';
$output .= $lodash->boxShadow('.sppb-nav > li > a', 'box_shadow');
$output .= $lodash->boxShadow('.sppb-tab-pane', 'box_shadow');
$output .= '<# } #>';
$output .= $lodash->generateTransformCss('', 'data.transform');
$output .= '
</style>
';
return $output;
}
}