init
This commit is contained in:
nguyen dung
@@ -0,0 +1,4 @@
|
||||
<h3 class="accordion_title {{ shortcode.options.class }}">{{ shortcode.options.title }}</h3>
|
||||
<div class="accordion" ng-attr-rel="shortcode.options.open">
|
||||
<content></content>
|
||||
</div>
|
||||
@@ -0,0 +1,9 @@
|
||||
<div class="accordion-item {{ shortcode.options.class }}">
|
||||
<a class="accordion-title plain" href="javascript:void();">
|
||||
<button class="toggle"><i class="icon-angle-down"></i></button>
|
||||
{{ shortcode.options.title }}
|
||||
</a>
|
||||
<div class="accordion-inner">
|
||||
<content></content>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,11 @@
|
||||
<a href="javascript:void();"
|
||||
class="button is-{{ shortcode.options.style }} {{ shortcode.options.class }} {{ shortcode.options.visibility }} {{ shortcode.options.color }} is-{{ shortcode.options.size }} box-shadow-{{ shortcode.options.depth }} box-shadow-{{ shortcode.options.depthHover }}-hover {{shortcode.options.letterCase}}"
|
||||
ng-class="{'reveal-icon' : shortcode.options.iconReveal && shortcode.options.icon, 'expand' : shortcode.options.expand}"
|
||||
ng-style="{'padding' : shortcode.options.padding, 'border-radius' : shortcode.options.radius+'px'}">
|
||||
|
||||
<i ng-if="shortcode.options.icon && shortcode.options.iconPos == 'left'" class="{{ shortcode.options.icon }}"></i>
|
||||
|
||||
<span>{{ shortcode.options.text }}</span>
|
||||
|
||||
<i ng-if="shortcode.options.icon && shortcode.options.iconPos !== 'left'" class="{{ shortcode.options.icon }}"></i>
|
||||
</a>
|
||||
@@ -0,0 +1,44 @@
|
||||
<div id="{{:: shortcode.$id }}" class="col
|
||||
small-{{ shortcode.options.span }}
|
||||
col-hover-{{ shortcode.options.hover }}
|
||||
{{ shortcode.options.visibility }}
|
||||
{{ shortcode.options.class }}
|
||||
{{ shortcode.options.forceFirst }}-col-first
|
||||
"
|
||||
data-fade="true"
|
||||
ng-class="{dark: shortcode.options.color == 'light', 'col-divided': shortcode.options.divider, 'has-hover': shortcode.options.borderHover, 'uxb-sticky-column': shortcode.options.sticky == 'true'}"
|
||||
ng-attr-data-parallax="{{ shortcode.options.parallax }}"
|
||||
ng-style="{
|
||||
'min-height' : shortcode.options.height,
|
||||
}">
|
||||
|
||||
<div class="col-inner
|
||||
text-{{ shortcode.options.align }}
|
||||
box-shadow-{{ shortcode.options.depth }}
|
||||
box-shadow-{{ shortcode.options.depthHover }}-hover
|
||||
text-shadow-{{ shortcode.options.textDepth }}"
|
||||
ng-attr-data-animate="{{ shortcode.options.animate }}" data-animated="true"
|
||||
ng-style="{
|
||||
'max-width' : shortcode.options.maxWidth,
|
||||
'background-color': shortcode.options.bgColor,
|
||||
}">
|
||||
<div ng-if="shortcode.options.border"
|
||||
ng-class="{['hover-'+shortcode.options.borderHover ] : shortcode.options.borderHover}"
|
||||
class="is-border is-{{shortcode.options.borderStyle}}"
|
||||
ng-style="{
|
||||
'borderRadius': shortcode.options.borderRadius+'px',
|
||||
'borderWidth': shortcode.options.border,
|
||||
'margin': shortcode.options.borderMargin,
|
||||
'borderColor': shortcode.options.borderColor
|
||||
}"
|
||||
></div>
|
||||
|
||||
<content></content>
|
||||
|
||||
<style scope="scope">
|
||||
#{{:: shortcode.$id }} > .col-inner {padding: {{ shortcode.options.padding }}; }
|
||||
#{{:: shortcode.$id }} > .col-inner {margin: {{ shortcode.options.margin }}; }
|
||||
#{{:: shortcode.$id }} > .col-inner {border-radius: {{ shortcode.options.bgRadius }}px; }
|
||||
</style>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,5 @@
|
||||
<div class="col small-{{ shortcode.options.span }} {{ shortcode.options.class }} {{ shortcode.options.visibility }} grid-col grid-col-{{shortcode.options.height}}">
|
||||
<div class="col-inner box-shadow-{{ shortcode.options.depth }} box-shadow-{{ shortcode.options.depthHover }}-hover">
|
||||
<content></content>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,10 @@
|
||||
<div class="text-{{shortcode.options.align}}">
|
||||
<div class="is-divider" ng-style="{
|
||||
'max-width' : shortcode.options.width,
|
||||
'height' : shortcode.options.height,
|
||||
'margin-top' : shortcode.options.margin,
|
||||
'margin-bottom' : shortcode.options.margin,
|
||||
'background-color' : shortcode.options.color
|
||||
}
|
||||
"></div>
|
||||
</div>
|
||||
@@ -0,0 +1,12 @@
|
||||
<div class="google-map relative mb {{ shortcode.options.class }} {{ shortcode.options.visibility }}">
|
||||
<div id="map_{{:: shortcode.$id }}" class="map-height" style="height:{{ shortcode.options.height }}"></div>
|
||||
<div class="map_overlay"></div><!-- To prevent map drag event. -->
|
||||
<div id="map_overlay_top"></div>
|
||||
<div id="map_overlay_bottom"></div>
|
||||
<div ng-if="shortcode.options.contentEnable" class="absolute map-inner last-reset map_inner
|
||||
x{{ shortcode.options.positionX }} md-x{{ shortcode.options.positionX }} lg-x{{ shortcode.options.positionX }} y{{ shortcode.options.positionY }} md-y{{ shortcode.options.positionY }} lg-y{{ shortcode.options.positionY }}"
|
||||
style="width: {{ shortcode.options.contentWidth }}%; background-color: {{ shortcode.options.contentBg }}"
|
||||
>
|
||||
<content></content>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,9 @@
|
||||
<div class="message-box {{shortcode.options.textColor}} {{shortcode.options.class}} {{shortcode.options.visibility}} bg-fill relative" style="padding-bottom: {{shortcode.options.padding}}px; padding-top: {{shortcode.options.padding}}px;" wp-attachment="shortcode.options.bg">
|
||||
<div class="message-box-bg-image bg-fill fill" wp-attachment="shortcode.options.bg"></div>
|
||||
<div class="message-box-bg-overlay bg-overlay fill" style="background-color: {{ shortcode.options.bgColor }};"></div>
|
||||
<div class="container">
|
||||
<div class="inner last-reset">
|
||||
<content></content>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,22 @@
|
||||
<div
|
||||
id="{{:: shortcode.$id }}"
|
||||
class="row
|
||||
row-{{ shortcode.options.style }}
|
||||
row-{{ shortcode.options.width }}
|
||||
row-{{ shortcode.options.colStyle }}
|
||||
row-box-shadow-{{ shortcode.options.depth }}
|
||||
row-box-shadow-{{ shortcode.options.depthHover }}-hover
|
||||
{{ shortcode.options.class }}
|
||||
{{ shortcode.options.visibility }}
|
||||
align-{{ shortcode.options.vAlign }}
|
||||
align-{{ shortcode.options.hAlign }}"
|
||||
ng-style="{'max-width' : (shortcode.options.width == 'custom') ? shortcode.options.customWidth : ''}">
|
||||
|
||||
<content></content>
|
||||
|
||||
<style scope="scope">
|
||||
#{{:: shortcode.$id }} > .col > .col-inner{padding: {{ shortcode.options.padding }} }
|
||||
#{{:: shortcode.$id }} > .col > .col-inner{background-color: {{ shortcode.options.colBg }} }
|
||||
#{{:: shortcode.$id }} > .col > .col-inner{border-radius: {{ shortcode.options.colBgRadius != 0 ? shortcode.options.colBgRadius : '' }}px; }
|
||||
</style>
|
||||
</div>
|
||||
@@ -0,0 +1,2 @@
|
||||
<span class="scroll-to" data-bullet="true" data-link="link" data-title="Title">
|
||||
<span>About Us</span> - <span><b>#scrollID</b></span></span>
|
||||
@@ -0,0 +1,57 @@
|
||||
<section id="{{:: shortcode.$id }}" class="section mask-{{ shortcode.options.mask }} {{ shortcode.options.visibility }} {{ shortcode.options.class }}" ng-class="{dark: shortcode.options.dark == 'true', 'has-mask': shortcode.options.mask,'has-parallax' : shortcode.options.parallax, 'uxb-sticky-section': shortcode.options.sticky == 'true', 'has-hover': shortcode.options.borderHover}">
|
||||
<div class="bg section-bg bg-fill fill" data-parallax-container=".section"
|
||||
ng-attr-data-parallax="-{{ shortcode.options.parallax }}" data-parallax-background wp-attachment="shortcode.options.bg" wp-attachment-size="shortcode.options.bgSize">
|
||||
|
||||
<div ng-if="shortcode.options.videoMp4" class="video-overlay fill"></div>
|
||||
|
||||
<video ng-if="shortcode.options.videoMp4"
|
||||
class="video-bg no-click {{shortcode.options.videoVisibility}}"
|
||||
preload="auto" autoplay="true" loop="loop" muted="muted">
|
||||
<source ng-if="shortcode.options.videoMp4" ng-src="{{shortcode.options.videoMp4}}" type="video/mp4">
|
||||
<source ng-if="shortcode.options.videoOgg" ng-src="{{shortcode.options.videoOgg}}" type="video/ogg">
|
||||
<source ng-if="shortcode.options.videoWebm" ng-src="{{shortcode.options.videoWebm}}" type="video/webm">
|
||||
</video>
|
||||
|
||||
<div ng-if="shortcode.options.bgOverlay" class="section-bg-overlay fill"></div>
|
||||
|
||||
<div ng-if="shortcode.options.effect" class="effect-{{shortcode.options.effect}} bg-effect fill no-click"></div>
|
||||
|
||||
<div ng-if="shortcode.options.border" class="is-border is-{{shortcode.options.borderStyle}}"
|
||||
ng-class="{['hover-'+shortcode.options.borderHover ] : shortcode.options.borderHover}"
|
||||
ng-style="{
|
||||
'borderRadius': shortcode.options.borderRadius+'px',
|
||||
'borderWidth': shortcode.options.border,
|
||||
'margin': shortcode.options.borderMargin,
|
||||
'borderColor': shortcode.options.borderColor,
|
||||
}"
|
||||
></div>
|
||||
|
||||
<button ng-if="shortcode.options.scrollForMore" class="scroll-for-more icon absolute bottom h-center z-5">
|
||||
<i class="icon-angle-down" style="font-size:42px;"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div ng-if="shortcode.options.dividerTop" class="ux-shape-divider ux-shape-divider--top ux-shape-divider--style-{{shortcode.options.dividerTop}}" ng-class="{'ux-shape-divider--flip': shortcode.options.dividerTopFlip == 'true','ux-shape-divider--to-front': shortcode.options.dividerTopToFront == 'true'}">
|
||||
<ng-include ng-if="$ctrl.store.flatsomeUrl" src="$ctrl.store.flatsomeUrl + '/assets/img/dividers/' + shortcode.options.dividerTop + '.svg'"></ng-include>
|
||||
</div>
|
||||
<div ng-if="shortcode.options.divider" class="ux-shape-divider ux-shape-divider--bottom ux-shape-divider--style-{{shortcode.options.divider}}" ng-class="{'ux-shape-divider--flip': shortcode.options.dividerFlip == 'true','ux-shape-divider--to-front': shortcode.options.dividerToFront == 'true'}">
|
||||
<ng-include ng-if="$ctrl.store.flatsomeUrl" src="$ctrl.store.flatsomeUrl + '/assets/img/dividers/' + shortcode.options.divider + '.svg'"></ng-include>
|
||||
</div>
|
||||
|
||||
<div class="section-content relative">
|
||||
<content></content>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#{{:: shortcode.$id }} {min-height: {{ shortcode.options.height }};}
|
||||
#{{:: shortcode.$id }} {background-color: {{ shortcode.options.bgColor }}!important;}
|
||||
#{{:: shortcode.$id }} {padding-top: {{ shortcode.options.padding }}; padding-bottom: {{ shortcode.options.padding }};}
|
||||
#{{:: shortcode.$id }} {margin-bottom: {{ shortcode.options.margin }};}
|
||||
#{{:: shortcode.$id }} .section-bg-overlay {background-color: {{ shortcode.options.bgOverlay }} }
|
||||
#{{:: shortcode.$id }} .section-bg{background-position: {{ shortcode.options.bgPos }} }
|
||||
#{{:: shortcode.$id }} .ux-shape-divider--top svg {height: {{ shortcode.options.dividerTopHeight }}; width: calc({{ shortcode.options.dividerTopWidth }}% + 2px); }
|
||||
#{{:: shortcode.$id }} .ux-shape-divider--top .ux-shape-fill {fill: {{ shortcode.options.dividerTopFill }}; }
|
||||
#{{:: shortcode.$id }} .ux-shape-divider--bottom svg {height: {{ shortcode.options.dividerHeight}}; width: calc({{ shortcode.options.dividerWidth }}% + 2px); }
|
||||
#{{:: shortcode.$id }} .ux-shape-divider--bottom .ux-shape-fill {fill: {{ shortcode.options.dividerFill }}; }
|
||||
</style>
|
||||
</section>
|
||||
@@ -0,0 +1,5 @@
|
||||
<div class="panel" ng-class="{
|
||||
'active' : shortcode.parent.states.activeTab === shortcode.index
|
||||
}">
|
||||
<content></content>
|
||||
</div>
|
||||
@@ -0,0 +1,19 @@
|
||||
<div class="tabbed-content {{ shortcode.options.class }} {{ shortcode.options.visibility }}">
|
||||
<h4 ng-if="shortcode.options.title" class="uppercase text-{{ shortcode.options.align }}">
|
||||
{{ shortcode.options.title }}
|
||||
</h4>
|
||||
|
||||
<ul class="nav nav-{{ shortcode.options.style }} nav-{{ shortcode.options.navStyle }} nav-size-{{ shortcode.options.navSize }} nav-spacing-{{ shortcode.options.navSpacing }} nav-{{ shortcode.options.align }}" ng-class="{ 'nav-vertical': shortcode.options.type === 'vertical' }">
|
||||
<li class="tab"
|
||||
ng-repeat="shortcode in $customCtrl.shortcode.children track by shortcode.$id"
|
||||
ng-class="{ 'active': $customCtrl.shortcode.states.activeTab === shortcode.index }">
|
||||
<a href="javascript:void(0);"
|
||||
ng-click="$customCtrl.setTab($index); $event.stopPropagation();">
|
||||
{{ shortcode.options.title }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-panels">
|
||||
<content></content>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,23 @@
|
||||
<div
|
||||
id="{{:: shortcode.$id }}"
|
||||
class="{{ shortcode.options.visibility }} {{ shortcode.options.class }}"
|
||||
ng-class="{
|
||||
text: shortcode.options.fontSize ||
|
||||
shortcode.options.lineHeight ||
|
||||
shortcode.options.textAlign ||
|
||||
shortcode.options.textColor
|
||||
}"
|
||||
ng-bind-html="shortcode.content | autop | html"
|
||||
></div>
|
||||
<style>
|
||||
#{{:: shortcode.$id }} {
|
||||
font-size: {{ shortcode.options.fontSize }}rem;
|
||||
line-height: {{ shortcode.options.lineHeight }};
|
||||
text-align: {{ shortcode.options.textAlign }};
|
||||
color: {{ shortcode.options.textColor }};
|
||||
}
|
||||
|
||||
#{{:: shortcode.$id }} > * {
|
||||
color: {{ shortcode.options.textColor }};
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,48 @@
|
||||
<div id="el_{{::$id}}"
|
||||
class="
|
||||
res-text
|
||||
banner-layer
|
||||
text-box
|
||||
{{ shortcode.options.class }}
|
||||
{{ shortcode.options.visibility }}
|
||||
text-box-{{shortcode.options.style}}
|
||||
x{{ shortcode.options.positionX }}
|
||||
md-x{{ shortcode.options.positionX }}
|
||||
lg-x{{ shortcode.options.positionX }}
|
||||
y{{ shortcode.options.positionY }}
|
||||
md-y{{ shortcode.options.positionY }}
|
||||
lg-y{{ shortcode.options.positionY }}
|
||||
" ng-class="{'has-hover-effect' : shortcode.options.hover}">
|
||||
<div ng-attr-data-animate="{{ shortcode.options.animate }}" data-animated="true">
|
||||
<div ng-class="{['hover-'+shortcode.options.hover ] : shortcode.options.hover}">
|
||||
<div class="text-box-content text
|
||||
text-shadow-{{ shortcode.options.textDepth }}
|
||||
box-shadow-{{ shortcode.options.depth }}
|
||||
box-shadow-{{ shortcode.options.depthHover }}-hover"
|
||||
ng-class="{'dark' : shortcode.options.textColor == 'light'}"
|
||||
data-parallax-fade="true"
|
||||
ng-attr-data-parallax="{{ shortcode.options.parallax }}">
|
||||
<div ng-if="shortcode.options.border" class="is-border is-{{shortcode.options.borderStyle}}"
|
||||
ng-style="{
|
||||
'borderRadius': shortcode.options.borderRadius+'px',
|
||||
'borderWidth': shortcode.options.border,
|
||||
'margin': shortcode.options.borderMargin,
|
||||
'borderColor': shortcode.options.borderColor,
|
||||
}"
|
||||
></div>
|
||||
<div class="text-inner text-{{ shortcode.options.textAlign }}">
|
||||
<content></content>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style scope="scope">
|
||||
#el_{{::$id}}{ width: {{ shortcode.options.width }}%; }
|
||||
#el_{{::$id}} { margin: {{ shortcode.options.margin }}; }
|
||||
#el_{{::$id}} .text-inner { padding:{{ shortcode.options.padding }}; }
|
||||
#el_{{::$id}} .text-box-content { background-color: {{ shortcode.options.bg }}; }
|
||||
#el_{{::$id}} .text-box-content { font-size:{{ shortcode.options.scale }}%; }
|
||||
#el_{{::$id}} .text-box-content { border-radius:{{ shortcode.options.radius }}px; }
|
||||
#el_{{::$id}} .text-box-content { transform: rotate({{ shortcode.options.rotate }}deg)};
|
||||
</style>
|
||||
</div>
|
||||
@@ -0,0 +1,47 @@
|
||||
<div class="container section-title-container {{shortcode.options.class}} {{shortcode.options.visibility}}"
|
||||
ng-style="{
|
||||
'margin-top': shortcode.options.marginTop,
|
||||
'margin-bottom': shortcode.options.marginBottom,
|
||||
'max-width': shortcode.options.width,
|
||||
}" ng-switch="shortcode.options.tagName">
|
||||
|
||||
<h1 ng-switch-when="h1" class="section-title section-title-{{shortcode.options.style}}">
|
||||
<b></b>
|
||||
<span class="section-title-main" ng-style="{'font-size': shortcode.options.size + '%', 'color': shortcode.options.color}">
|
||||
<i ng-if="shortcode.options.icon" class="{{ shortcode.options.icon }}"></i>
|
||||
{{shortcode.options.text}}
|
||||
</span>
|
||||
<b></b>
|
||||
<a ng-if="shortcode.options.linkText" href="">{{shortcode.options.linkText}}</a>
|
||||
</h1>
|
||||
|
||||
<h2 ng-switch-when="h2" class="section-title section-title-{{shortcode.options.style}}">
|
||||
<b></b>
|
||||
<span class="section-title-main" ng-style="{'font-size': shortcode.options.size + '%', 'color': shortcode.options.color}">
|
||||
<i ng-if="shortcode.options.icon" class="{{ shortcode.options.icon }}"></i>
|
||||
{{shortcode.options.text}}
|
||||
</span>
|
||||
<b></b>
|
||||
<a ng-if="shortcode.options.linkText" href="">{{shortcode.options.linkText}}</a>
|
||||
</h2>
|
||||
|
||||
<h3 ng-switch-when="h3" class="section-title section-title-{{shortcode.options.style}}">
|
||||
<b></b>
|
||||
<span class="section-title-main" ng-style="{'font-size': shortcode.options.size + '%', 'color': shortcode.options.color}">
|
||||
<i ng-if="shortcode.options.icon" class="{{ shortcode.options.icon }}"></i>
|
||||
{{shortcode.options.text}}
|
||||
</span>
|
||||
<b></b>
|
||||
<a ng-if="shortcode.options.linkText" href="">{{shortcode.options.linkText}}</a>
|
||||
</h3>
|
||||
|
||||
<h4 ng-switch-when="h4" class="section-title section-title-{{shortcode.options.style}}">
|
||||
<b></b>
|
||||
<span class="section-title-main" ng-style="{'font-size': shortcode.options.size + '%', 'color': shortcode.options.color}">
|
||||
<i ng-if="shortcode.options.icon" class="{{ shortcode.options.icon }}"></i>
|
||||
{{shortcode.options.text}}
|
||||
</span>
|
||||
<b></b>
|
||||
<a ng-if="shortcode.options.linkText" href="">{{shortcode.options.linkText}}</a>
|
||||
</h4>
|
||||
</div>
|
||||
@@ -0,0 +1,59 @@
|
||||
<div id="{{:: shortcode.$id }}" role="banner" class="banner has-hover bg-{{ shortcode.options.hover }} bg-{{ shortcode.options.hoverAlt }} slide-{{ shortcode.options.slideEffect }} {{ shortcode.options.class }} {{ shortcode.options.visibility }}"
|
||||
ng-class="{'has-slide-effect' : shortcode.options.slideEffect,
|
||||
'has-parallax' : shortcode.options.parallax, 'sticky-section' : shortcode.options.sticky}"
|
||||
ng-style="{'padding-top' : (shortcode.options.height | heightCheck), 'background-color' : shortcode.options.bgColor}">
|
||||
<div class="banner-inner fill">
|
||||
<div class="banner-bg fill" data-parallax-container=".banner" data-parallax-background
|
||||
ng-attr-data-parallax="-{{ shortcode.options.parallax }}" >
|
||||
<div class="bg fill bg-fill" ng-style="{ 'backgroundPosition': shortcode.options.bgPos }" wp-attachment="shortcode.options.bg" wp-attachment-size="shortcode.options.bgSize"></div>
|
||||
<video ng-if="shortcode.options.videoMp4"
|
||||
class="video-bg no-click {{shortcode.options.videoVisibility}}"
|
||||
preload="auto" autoplay="true" ng-attr-loop="{{shortcode.options.videoLoop !== 'false'}}" muted="muted">
|
||||
<source ng-if="shortcode.options.videoMp4" ng-src="{{ shortcode.options.videoMp4 | trusted: 'resourceUrl' }}" type="video/mp4">
|
||||
<source ng-if="shortcode.options.videoOgg" ng-src="{{ shortcode.options.videoOgg | trusted: 'resourceUrl' }}" type="video/ogg">
|
||||
<source ng-if="shortcode.options.videoWebm" ng-src="{{ shortcode.options.videoWebm | trusted: 'resourceUrl' }}" type="video/webm">
|
||||
</video>
|
||||
|
||||
<div ng-if="shortcode.options.bgOverlay" class="overlay" style="background-color: {{ shortcode.options.bgOverlay }}"></div>
|
||||
<div ng-if="shortcode.options.effect" class="effect-{{ shortcode.options.effect }} bg-effect fill"></div>
|
||||
<div ng-if="shortcode.options.youtube" class="uxb-youtube-overlay absolute fill" style="background-color: rgba(0, 86, 130, .8); padding:30%;"><span style="color:#FFF">YouTube video only loads on Front-end. Save and visit page to preview.</span></div>
|
||||
<div ng-if="shortcode.options.videoMp4" class="video-overlay absolute fill"></div>
|
||||
<div ng-if="shortcode.options.shade" class="shade"></div>
|
||||
<div ng-if="shortcode.options.videoMp4" class="video-overlay absolute fill"></div>
|
||||
<div ng-if="shortcode.options.border"
|
||||
ng-class="{['hover-'+shortcode.options.borderHover ] : shortcode.options.borderHover}"
|
||||
class="is-border is-{{shortcode.options.borderStyle}}"
|
||||
ng-style="{
|
||||
'borderRadius': shortcode.options.borderRadius+'px',
|
||||
'borderWidth': shortcode.options.border,
|
||||
'margin': shortcode.options.borderMargin,
|
||||
'borderColor': shortcode.options.borderColor,
|
||||
}"
|
||||
></div>
|
||||
</div><!-- .banner-bg -->
|
||||
|
||||
<div ng-if="shortcode.options.dividerTop" class="ux-shape-divider ux-shape-divider--top ux-shape-divider--style-{{shortcode.options.dividerTop}}" ng-class="{'ux-shape-divider--flip': shortcode.options.dividerTopFlip == 'true','ux-shape-divider--to-front': shortcode.options.dividerTopToFront == 'true'}">
|
||||
<ng-include ng-if="$ctrl.store.flatsomeUrl" src="$ctrl.store.flatsomeUrl + '/assets/img/dividers/' + shortcode.options.dividerTop + '.svg'"></ng-include>
|
||||
</div>
|
||||
<div ng-if="shortcode.options.divider" class="ux-shape-divider ux-shape-divider--bottom ux-shape-divider--style-{{shortcode.options.divider}}" ng-class="{'ux-shape-divider--flip': shortcode.options.dividerFlip == 'true','ux-shape-divider--to-front': shortcode.options.dividerToFront == 'true'}">
|
||||
<ng-include ng-if="$ctrl.store.flatsomeUrl" src="$ctrl.store.flatsomeUrl + '/assets/img/dividers/' + shortcode.options.divider + '.svg'"></ng-include>
|
||||
</div>
|
||||
|
||||
<div class="banner-layers container">
|
||||
<content></content>
|
||||
</div><!-- .banner-layers -->
|
||||
|
||||
</div><!-- .banner-inner -->
|
||||
|
||||
<div ng-if="!shortcode.options.height" class="height-fix is-invisible">
|
||||
<img wp-attachment="shortcode.options.bg" />
|
||||
<div ng-if="!shortcode.options.bg" class="uxb-no-content uxb-image"></div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#{{:: shortcode.$id }} .ux-shape-divider--top svg {height: {{ shortcode.options.dividerTopHeight }}; width: calc({{ shortcode.options.dividerTopWidth }}% + 2px); }
|
||||
#{{:: shortcode.$id }} .ux-shape-divider--top .ux-shape-fill {fill: {{ shortcode.options.dividerTopFill }}; }
|
||||
#{{:: shortcode.$id }} .ux-shape-divider--bottom svg {height: {{ shortcode.options.dividerHeight}}; width: calc({{ shortcode.options.dividerWidth }}% + 2px); }
|
||||
#{{:: shortcode.$id }} .ux-shape-divider--bottom .ux-shape-fill {fill: {{ shortcode.options.dividerFill }}; }
|
||||
</style>
|
||||
</div><!-- .banner -->
|
||||
@@ -0,0 +1,20 @@
|
||||
<div class="banner-grid-wrapper">
|
||||
<div id="banner-grid-{{:: shortcode.$id }}" class="banner-grid {{ shortcode.options.class }} {{ shortcode.options.visibility }}">
|
||||
<div class="row row-grid row-{{ shortcode.options.spacing }} row-{{ shortcode.options.width }}
|
||||
row-box-shadow-{{ shortcode.options.depth }}
|
||||
row-box-shadow-{{ shortcode.options.depthHover }}-hover">
|
||||
<div class="grid-size small-1"></div>
|
||||
<content></content>
|
||||
</div>
|
||||
|
||||
<style scope="scope">
|
||||
#banner-grid-{{:: shortcode.$id }} {min-height: {{ shortcode.options.height * 1 }}px }
|
||||
#banner-grid-{{:: shortcode.$id }} .grid-col-1{height: {{ shortcode.options.height * 1 }}px }
|
||||
#banner-grid-{{:: shortcode.$id }} .grid-col-1-2{height: {{ shortcode.options.height / 2 }}px }
|
||||
#banner-grid-{{:: shortcode.$id }} .grid-col-1-3{height: {{ shortcode.options.height / 3 }}px }
|
||||
#banner-grid-{{:: shortcode.$id }} .grid-col-2-3{height: {{ shortcode.options.height / 3*2 }}px }
|
||||
#banner-grid-{{:: shortcode.$id }} .grid-col-1-4{height: {{ shortcode.options.height / 4 }}px }
|
||||
#banner-grid-{{:: shortcode.$id }} .grid-col-3-4{height: {{ shortcode.options.height / 4 * 3 }}px }
|
||||
</style>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,31 @@
|
||||
<div class="hotspot-wrapper dark
|
||||
is-{{ shortcode.options.size }}
|
||||
x{{ shortcode.options.positionX }}
|
||||
md-x{{ shortcode.options.positionX }}
|
||||
lg-x{{ shortcode.options.positionX }}
|
||||
y{{ shortcode.options.positionY }}
|
||||
md-y{{ shortcode.options.positionY }}
|
||||
lg-y{{ shortcode.options.positionY }}
|
||||
{{ shortcode.options.class }}
|
||||
{{ shortcode.options.visibility }}">
|
||||
<div data-animate="{{ shortcode.options.animate }}">
|
||||
|
||||
<a ng-if="shortcode.options.type == 'text'" class="hotspot tooltip
|
||||
box-shadow-{{shortcode.options.depth}}
|
||||
box-shadow-{{shortcode.options.depthHover}}-hover"
|
||||
title="{{ shortcode.options.text }}"
|
||||
ng-style="{'background-color' : shortcode.options.bgColor}"
|
||||
>
|
||||
<i class="icon-{{ shortcode.options.icon }}"></i>
|
||||
</a>
|
||||
|
||||
<a ng-if="shortcode.options.type == 'product'" href="#quick-view" class="quick-view hotspot tooltip
|
||||
box-shadow-{{shortcode.options.depth}}
|
||||
box-shadow-{{shortcode.options.depthHover}}-hover"
|
||||
title="{{ shortcode.options.prod_id }}"
|
||||
ng-style="{'background-color' : shortcode.options.bgColor}"
|
||||
data-prod="{{ shortcode.options.prodId }}">
|
||||
<i class="icon-{{ shortcode.options.icon }}"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1 @@
|
||||
<div class="{{ shortcode.options.visibility }} {{ shortcode.options.class }}" style="min-height: 16px;" ng-bind-html="shortcode.content | html"></div>
|
||||
@@ -0,0 +1,23 @@
|
||||
<div class="img
|
||||
has-hover
|
||||
box-shadow-{{ shortcode.options.depth }}
|
||||
{{ shortcode.options.pos }}
|
||||
box-shadow-{{ shortcode.options.depthHover }}-hover
|
||||
image-{{ shortcode.options.imageHover }}"
|
||||
style="max-width: {{ shortcode.options.width }}%">
|
||||
|
||||
<div class="test" data-animate="{{ shortcode.options.animate }}">
|
||||
<div class="img-inner">
|
||||
<a href="javascript:void();">
|
||||
<img draggable="false"
|
||||
ng-if="shortcode.options.id"
|
||||
wp-attachment="shortcode.options.id"
|
||||
wp-attachment-size="shortcode.options.imageSize">
|
||||
<div class="temp-image" ng-if="!shortcode.options.id">
|
||||
Upload an Image...
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,8 @@
|
||||
<div
|
||||
class="ux-menu stack stack-col justify-start {{ shortcode.options.visibility }} {{ shortcode.options.class }}"
|
||||
ng-class="{
|
||||
['ux-menu--divider-'+shortcode.options.divider]: shortcode.options.divider,
|
||||
}"
|
||||
>
|
||||
<content></content>
|
||||
</div>
|
||||
@@ -0,0 +1,8 @@
|
||||
<div class="ux-menu-link menu-item {{ shortcode.options.visibility }} {{ shortcode.options.class }} {{ shortcode.options.label }}">
|
||||
<a class="ux-menu-link__link flex" href="javascript:void();" target="{{ shortcode.options.target }}" rel="{{ shortcode.options.rel }}">
|
||||
<i ng-if="shortcode.options.icon" class="ux-menu-link__icon text-center {{ shortcode.options.icon }}"></i>
|
||||
<span class="ux-menu-link__text">
|
||||
{{ shortcode.options.text }}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
<div class="ux-menu-title flex {{ shortcode.options.visibility }} {{ shortcode.options.class }}">
|
||||
{{ shortcode.options.text }}
|
||||
</div>
|
||||
@@ -0,0 +1,13 @@
|
||||
<div id="slider-{{::$id}}" class="slider-wrapper relative slider-type-{{ shortcode.options.type }} {{ shortcode.options.visibility }} {{ shortcode.options.class }}">
|
||||
|
||||
<div class="slider slider-auto-height slider-nav-{{ shortcode.options.navPos }} slider-nav-{{ shortcode.options.navSize }} slider-style-{{ shortcode.options.style }} slider-nav-{{ shortcode.options.navColor }} slider-nav-{{ shortcode.options.navStyle }} slider-nav-dots-{{ shortcode.options.bulletStyle }} is-draggable"
|
||||
ng-class="{'slider-show-nav' : shortcode.options.hideNav}">
|
||||
<content></content>
|
||||
</div>
|
||||
|
||||
<style scope="scope">
|
||||
#slider-{{::$id}} {margin-bottom: {{ shortcode.options.margin }}; }
|
||||
#slider-{{::$id}} { background-color: {{ shortcode.options.bgColor }}; }
|
||||
#slider-{{::$id}} .flickity-slider > *{ max-width: {{ shortcode.options.slideWidth }}!important; }
|
||||
</style>
|
||||
</div>
|
||||
@@ -0,0 +1,16 @@
|
||||
<div
|
||||
id="{{:: shortcode.$id }}"
|
||||
class="stack {{ shortcode.options.visibility }} {{ shortcode.options.class }}"
|
||||
ng-class="{
|
||||
['stack-'+shortcode.options.direction]: shortcode.options.direction,
|
||||
['items-'+shortcode.options.align]: shortcode.options.align,
|
||||
['justify-'+shortcode.options.distribute]: shortcode.options.distribute
|
||||
}"
|
||||
>
|
||||
<content></content>
|
||||
<style>
|
||||
#{{:: shortcode.$id }} > * {
|
||||
--stack-gap: {{ shortcode.options.gap }}rem;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
Reference in New Issue
Block a user