Plugin Tabs noticias
This commit is contained in:
root
@@ -0,0 +1 @@
|
||||
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-i18n', 'wp-keycodes', 'wp-polyfill', 'wp-primitives', 'wp-rich-text', 'wp-server-side-render'), 'version' => 'd61dca07b0dff9938fac6c13e42a7c97');
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,90 @@
|
||||
jQuery(document).ready(function($){
|
||||
function change_background_size()
|
||||
{
|
||||
$( '.areoi-lightspeed-block > .areoi-background' ).each( function() {
|
||||
var parent = $( this ).parents( '.areoi-lightspeed-block' ),
|
||||
new_height = parent.outerHeight();
|
||||
|
||||
$( this ).css( 'height', new_height + 'px' );
|
||||
});
|
||||
}
|
||||
|
||||
addEventListener('resize, load', (event) => {
|
||||
change_background_size();
|
||||
});
|
||||
|
||||
function resize_drag_containers()
|
||||
{
|
||||
$( '.areoi-drag-container' ).each( function( i ) {
|
||||
var item_count = $( this ).find( 'ul:first-of-type > li' ).length;
|
||||
var item_width = $( this ).find( 'ul:first-of-type > li' ).css( 'flex-basis' );
|
||||
if ( item_width ) {
|
||||
item_width = item_width.replace( 'px', '' );
|
||||
var new_width = item_width * item_count;
|
||||
$( this ).find( 'ul:first-of-type' ).css( 'width', new_width + 'px' );
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if ( $( '.areoi-drag-container' ).length ) {
|
||||
|
||||
resize_drag_containers();
|
||||
|
||||
let sliders = [];
|
||||
let next_url;
|
||||
|
||||
$( document ).on( 'mousedown', '.areoi-drag-container a', function(e) {
|
||||
e.preventDefault();
|
||||
next_url = $( this ).attr( 'href' );
|
||||
} );
|
||||
$( document ).on( 'click', '.areoi-drag-container a', function(e) {
|
||||
e.preventDefault();
|
||||
} );
|
||||
|
||||
$( '.areoi-drag-container' ).each( function( i ) {
|
||||
sliders[i] = $( this );
|
||||
let is_down = false;
|
||||
let start_x;
|
||||
let end_x;
|
||||
let scroll_left;
|
||||
|
||||
sliders[i].on('mousedown', (e) => {
|
||||
is_down = true;
|
||||
sliders[i].addClass('active');
|
||||
start_x = e.pageX - sliders[i].offset().left;
|
||||
scroll_left = sliders[i].scrollLeft();
|
||||
sliders[i].css( 'cursor', 'grabbing' );
|
||||
});
|
||||
sliders[i].on('mouseleave', () => {
|
||||
is_down = false;
|
||||
sliders[i].removeClass('active');
|
||||
});
|
||||
sliders[i].on('mouseup', (e) => {
|
||||
is_down = false;
|
||||
sliders[i].removeClass('active');
|
||||
sliders[i].css( 'cursor', 'grab' );
|
||||
end_x = e.pageX - sliders[i].offset().left;
|
||||
if ( start_x == end_x && next_url ) {
|
||||
window.location = next_url
|
||||
}
|
||||
});
|
||||
sliders[i].on('mousemove', (e) => {
|
||||
if(!is_down) return;
|
||||
e.preventDefault();
|
||||
const x = e.pageX - sliders[i].offset().left;
|
||||
const walk = (x - start_x) * 1;
|
||||
sliders[i].scrollLeft( scroll_left - walk );
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if ( $( 'body' ).hasClass( 'wp-admin' ) ) {
|
||||
if ( typeof wp.data != 'undefined' ) {
|
||||
wp.data.subscribe( () => {
|
||||
setTimeout( () => {
|
||||
resize_drag_containers();
|
||||
}, 2000 );
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,50 @@
|
||||
$( document ).on( 'click', '.areoi-lightspeed-block img:not(.areoi-footer img, .areoi-header-container img, a img), .areoi-lightspeed-block video:not(.areoi-footer video, .areoi-header-container video, a video), .areoi-open-gallery', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var drag = $( this ).parents( '.areoi-drag-container' );
|
||||
|
||||
if ( drag.length && drag.hasClass( 'moving' ) ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var gallery = $( '#areoi-gallery' ),
|
||||
carousel = $( '#areoi-gallery-carousel' ),
|
||||
container = $( this ).parents( '.areoi-lightspeed-block' ),
|
||||
medias = container.find( 'img, video' ),
|
||||
src = $( this ).attr( 'src' ),
|
||||
inner = '',
|
||||
media_count = medias.length;
|
||||
|
||||
if ( !src ) {
|
||||
src = $( this ).find( 'source' ).attr( 'src' );
|
||||
}
|
||||
|
||||
medias.each( function() {
|
||||
|
||||
var item_src = $( this ).attr( 'src' );
|
||||
if ( !item_src ) {
|
||||
item_src = $( this ).find( 'source' ).attr( 'src' );
|
||||
}
|
||||
var item_index = $( this ).index( medias );
|
||||
|
||||
inner += '<div class="carousel-item h-100 ' + ( src == item_src ? 'active' : '' ) + '">';
|
||||
inner += '<div class="h-100 d-flex align-items-center justify-content-center">';
|
||||
if ( $( this ).prop( 'nodeName' ) == 'VIDEO' ) {
|
||||
inner += '<video src="' + item_src + '" controls></video>';
|
||||
} else {
|
||||
inner += '<img src="' + item_src + '" />';
|
||||
}
|
||||
inner += '</div>';
|
||||
inner += '</div>';
|
||||
});
|
||||
|
||||
carousel.find( '.carousel-inner' ).html( inner );
|
||||
|
||||
if ( media_count > 1 ) {
|
||||
carousel.find( '.carousel-control-next, .carousel-control-prev' ).show();
|
||||
} else {
|
||||
carousel.find( '.carousel-control-next, .carousel-control-prev' ).hide();
|
||||
}
|
||||
|
||||
gallery.modal( 'show' );
|
||||
} );
|
||||
@@ -0,0 +1,3 @@
|
||||
import * as custom from './custom';
|
||||
|
||||
custom.register_custom_blocks();
|
||||
@@ -0,0 +1,36 @@
|
||||
function is_scrolled_into_view( elem )
|
||||
{
|
||||
var docViewTop = $( window ).scrollTop();
|
||||
var docViewBottom = docViewTop + $( window ).height();
|
||||
var elemTop = $( elem ).offset().top;
|
||||
var elemBottom = elemTop + $( elem ).height();
|
||||
var elemHeight = $( elem ).height();
|
||||
|
||||
var sensitivity = 1;
|
||||
|
||||
var sensitivity_factor = $( window ).height() * sensitivity;
|
||||
|
||||
var bounding = elem[0].getBoundingClientRect();
|
||||
|
||||
return bounding.top <= $( window ).height() + ( $( window ).height() * 0.2 );
|
||||
}
|
||||
|
||||
function check_resources()
|
||||
{
|
||||
let items = [];
|
||||
|
||||
$( '.areoi-lazy:not(.areoi-lazy-loaded)' ).each( function( key, item ) {
|
||||
var item = $( this );
|
||||
if ( is_scrolled_into_view( item ) ) {
|
||||
var src = item.data( 'src' );
|
||||
item.addClass( 'areoi-lazy-loaded' );
|
||||
item.attr( 'src', src );
|
||||
item.css( 'opacity', 1 );
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$( window ).on( 'scroll', function() {
|
||||
check_resources();
|
||||
});
|
||||
check_resources();
|
||||
@@ -0,0 +1,139 @@
|
||||
let parallax_components = [
|
||||
'.accordion',
|
||||
'.alert',
|
||||
'.card',
|
||||
'.list-group',
|
||||
'.areoi-content-grid-item',
|
||||
'.nf-form-cont',
|
||||
'.carousel:not(.areoi-lightspeed-header .carousel)',
|
||||
'.areoi-content-item'
|
||||
];
|
||||
|
||||
let parallax_exclude_elements_in_components = [
|
||||
'.accordion',
|
||||
'.alert',
|
||||
'.card',
|
||||
'.list-group'
|
||||
];
|
||||
|
||||
let parallax_parents = [
|
||||
'.areoi-lightspeed-block'
|
||||
];
|
||||
|
||||
let p_block_container = $( '.wp-site-blocks' );
|
||||
|
||||
let device_width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
|
||||
|
||||
function add_parallax_classes( items, slug )
|
||||
{
|
||||
items.forEach( (row) => {
|
||||
p_block_container.find( row ).each( function() {
|
||||
if ( !$( this ).parents( '.areoi-parallax-none' ).length ) {
|
||||
var position = $( this ).css( 'position' );
|
||||
$( this ).addClass( 'areoi-parallax-' + slug );
|
||||
|
||||
if ( ![ 'fixed', 'relative', 'absolute', 'sticky' ].includes( position ) ) {
|
||||
$( this ).css( 'position', 'relative' );
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
add_parallax_classes( parallax_components, 'component' );
|
||||
|
||||
function change_parallax_components( elem )
|
||||
{
|
||||
if ( !$(elem).parents( parallax_parents.join( ', ' ) ).length ) {
|
||||
return;
|
||||
}
|
||||
var scale = -0.35;
|
||||
var parent = $(elem).parents( parallax_parents.join( ', ' ) );
|
||||
var window_top = $(window).scrollTop(),
|
||||
parent_top = parent.offset().top,
|
||||
parent_height = parent.outerHeight(),
|
||||
elem_height = elem.height(),
|
||||
view_height = window.innerHeight * 0.5 - parent_height * 0.5,
|
||||
scrolled = window_top - parent_top + view_height + (elem_height/2),
|
||||
scaled = device_width >= 992 ? scrolled * scale : 0;
|
||||
|
||||
elem.css({
|
||||
'transform': 'translate3d( 0, ' + scaled + 'px, 0 )'
|
||||
});
|
||||
}
|
||||
|
||||
function change_parallax_background( elem )
|
||||
{
|
||||
var scale = -0.15;
|
||||
var parent = $(elem).parent();
|
||||
var window_top = $(window).scrollTop(),
|
||||
parent_top = parent.offset().top,
|
||||
parent_height = parent.outerHeight(),
|
||||
elem_height = elem.height(),
|
||||
view_height = window.innerHeight * 0.5 - parent_height * 0.5,
|
||||
scrolled = window_top - parent_top + view_height,
|
||||
scaled = scrolled * scale;
|
||||
|
||||
elem.css({
|
||||
'transform': 'translate3d( 0, ' + scaled + 'px, 0 )'
|
||||
});
|
||||
}
|
||||
|
||||
function change_parallax_pattern( elem )
|
||||
{
|
||||
if ( !$(elem).parents( parallax_parents.join( ', ' ) ).length ) {
|
||||
return;
|
||||
}
|
||||
var scale = 0.25;
|
||||
var parent = $(elem).parents( parallax_parents.join( ', ' ) );
|
||||
var window_top = $(window).scrollTop(),
|
||||
parent_top = parent.offset().top,
|
||||
parent_height = parent.outerHeight(),
|
||||
elem_height = elem.height(),
|
||||
view_height = window.innerHeight * 0.5 - parent_height * 0.5,
|
||||
scrolled = window_top - parent_top + view_height + (elem_height/2),
|
||||
scaled = scrolled * scale;
|
||||
|
||||
elem.css({
|
||||
'transform': 'translate3d( 0, ' + scaled + 'px, 0 )'
|
||||
});
|
||||
}
|
||||
|
||||
function check_parallax()
|
||||
{
|
||||
device_width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
|
||||
|
||||
if ( $( 'body' ).hasClass( 'has-areoi-parallax-components' ) ) {
|
||||
$( '.areoi-parallax-component' ).each( function( key, item ) {
|
||||
var item = $( this );
|
||||
change_parallax_components( item );
|
||||
});
|
||||
}
|
||||
|
||||
if ( $( 'body' ).hasClass( 'has-areoi-parallax-elements' ) ) {
|
||||
$( '.areoi-parallax-element' ).each( function( key, item ) {
|
||||
var item = $( this );
|
||||
change_parallax_elements( item );
|
||||
});
|
||||
}
|
||||
|
||||
if ( $( 'body' ).hasClass( 'has-areoi-parallax-background' ) ) {
|
||||
p_block_container.find('.areoi-background:not(.areoi-parallax-none .areoi-background)' ).each(function(index, element) {
|
||||
var item = $( this );
|
||||
change_parallax_background( item );
|
||||
});
|
||||
}
|
||||
|
||||
if ( $( 'body' ).hasClass( 'has-areoi-parallax-patterns' ) ) {
|
||||
p_block_container.find('.areoi-background-pattern:not(.areoi-background-pattern-media)' ).each(function(index, element) {
|
||||
var item = $( this );
|
||||
change_parallax_pattern( item );
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
check_parallax();
|
||||
|
||||
|
||||
$( window ).on( 'scroll', function() {
|
||||
check_parallax();
|
||||
});
|
||||
@@ -0,0 +1,126 @@
|
||||
function change_content_height()
|
||||
{
|
||||
if ( $( '.areoi-resize-container' ).length ) {
|
||||
$( '.areoi-resize-container' ).each( function() {
|
||||
var container = $( this ).parents( '.areoi-lightspeed-block' ),
|
||||
media = container.find( '.areoi-resize-media' ),
|
||||
content = container.find( '.areoi-resize-content' ),
|
||||
padding_top = parseInt( container.css( 'padding-top' ).replace( 'px', '' ) ),
|
||||
padding_bottom = parseInt( container.css( 'padding-bottom' ).replace( 'px', '' ) ),
|
||||
body_width = $( 'body' ).width(),
|
||||
percentage_width = ( media.width() / body_width ) * 100;
|
||||
|
||||
media.css( 'height', '' );
|
||||
|
||||
if ( media.height() < content.height() && percentage_width < 70 ) {
|
||||
media.css( 'height', ( content.height() + padding_top + padding_bottom ) + 'px' );
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
$( window ).on( 'load', function() {
|
||||
change_content_height();
|
||||
});
|
||||
$( window ).on( 'resize', function(){
|
||||
change_content_height();
|
||||
});
|
||||
|
||||
function header_scroll()
|
||||
{
|
||||
if ( $( '.areoi-lightspeed-header' ).length ) {
|
||||
|
||||
var scroll = $(window).scrollTop();
|
||||
|
||||
if ( scroll > 50 ) {
|
||||
$( '.areoi-lightspeed-header' ).addClass( 'scrolled' );
|
||||
} else {
|
||||
$( '.areoi-lightspeed-header' ).removeClass( 'scrolled' );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$( window ).on( 'scroll', function(){
|
||||
|
||||
header_scroll();
|
||||
});
|
||||
|
||||
header_scroll();
|
||||
|
||||
function delay( callback, ms )
|
||||
{
|
||||
var timer = 0;
|
||||
return function() {
|
||||
var context = this, args = arguments;
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(function () {
|
||||
callback.apply(context, args);
|
||||
}, ms || 0);
|
||||
};
|
||||
}
|
||||
|
||||
function resize_drag_containers()
|
||||
{
|
||||
$( '.areoi-drag-container' ).each( function( i ) {
|
||||
var item_count = $( this ).find( 'ul:first-of-type > li' ).length;
|
||||
var item_width = $( this ).find( 'ul:first-of-type > li' ).css( 'flex-basis' );
|
||||
if ( item_width ) {
|
||||
item_width = item_width.replace( 'px', '' );
|
||||
var new_width = item_width * item_count;
|
||||
$( this ).find( 'ul:first-of-type' ).css( 'width', new_width + 'px' );
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if ( $( '.areoi-drag-container' ).length ) {
|
||||
|
||||
resize_drag_containers();
|
||||
|
||||
let sliders = [];
|
||||
let next_url;
|
||||
|
||||
$( document ).on( 'mousedown', '.areoi-drag-container a', function(e) {
|
||||
e.preventDefault();
|
||||
next_url = $( this ).attr( 'href' );
|
||||
} );
|
||||
$( document ).on( 'click', '.areoi-drag-container a', function(e) {
|
||||
e.preventDefault();
|
||||
} );
|
||||
|
||||
$( '.areoi-drag-container' ).each( function( i ) {
|
||||
sliders[i] = $( this );
|
||||
let is_down = false;
|
||||
let start_x;
|
||||
let end_x;
|
||||
let scroll_left;
|
||||
|
||||
sliders[i].on('mousedown', (e) => {
|
||||
is_down = true;
|
||||
sliders[i].addClass('active');
|
||||
sliders[i].removeClass('moving');
|
||||
start_x = e.pageX - sliders[i].offset().left;
|
||||
scroll_left = sliders[i].scrollLeft();
|
||||
sliders[i].css( 'cursor', 'grabbing' );
|
||||
});
|
||||
sliders[i].on('mouseleave', () => {
|
||||
is_down = false;
|
||||
sliders[i].removeClass('active');
|
||||
});
|
||||
sliders[i].on('mouseup', (e) => {
|
||||
is_down = false;
|
||||
sliders[i].removeClass('active');
|
||||
sliders[i].css( 'cursor', 'grab' );
|
||||
end_x = e.pageX - sliders[i].offset().left;
|
||||
if ( start_x == end_x && next_url ) {
|
||||
window.location = next_url
|
||||
}
|
||||
});
|
||||
sliders[i].on('mousemove', (e) => {
|
||||
if(!is_down) return;
|
||||
e.preventDefault();
|
||||
const x = e.pageX - sliders[i].offset().left;
|
||||
const walk = (x - start_x) * 1;
|
||||
sliders[i].scrollLeft( scroll_left - walk );
|
||||
sliders[i].addClass('moving');
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
let text_elems = [];
|
||||
|
||||
function is_background_in_view( elem )
|
||||
{
|
||||
var docViewTop = $( window ).scrollTop();
|
||||
var docViewBottom = docViewTop + $( window ).height();
|
||||
var elemTop = $( elem ).offset().top;
|
||||
var elemBottom = elemTop + $( elem ).height();
|
||||
var elemHeight = $( elem ).height();
|
||||
var elemType = $( elem ).prop( 'nodeName' );
|
||||
|
||||
var bounding = elem[0].getBoundingClientRect();
|
||||
|
||||
return bounding.top <= $( window ).height() - ($( window ).height() * 0.5);
|
||||
}
|
||||
|
||||
let bg_checked = false;
|
||||
|
||||
function add_data_attribute()
|
||||
{
|
||||
let items = [];
|
||||
|
||||
$( '.areoi-background' ).each( function( key, item ) {
|
||||
var container = $( this ).parents( '.areoi-lightspeed-block' );
|
||||
var texts = container.find( '[class^="text-"],[class*=" text-"],[class^="btn-"],[class*=" btn-"]' );
|
||||
|
||||
var text_color = null;
|
||||
var allowed_classes = [
|
||||
'text-primary',
|
||||
'text-secondary',
|
||||
'text-success',
|
||||
'text-warning',
|
||||
'text-danger',
|
||||
'text-info',
|
||||
'text-light',
|
||||
'text-dark',
|
||||
'text-body',
|
||||
'btn-primary',
|
||||
'btn-secondary',
|
||||
'btn-success',
|
||||
'btn-warning',
|
||||
'btn-danger',
|
||||
'btn-info',
|
||||
'btn-light',
|
||||
'btn-dark',
|
||||
'btn-body',
|
||||
];
|
||||
texts.each( function() {
|
||||
var is_item_with_background = $( this ).parents( '.areoi-item-has-background' ).length;
|
||||
|
||||
if ( !is_item_with_background ) {
|
||||
var elem = $( this );
|
||||
var class_list = $( this ).attr( 'class' );
|
||||
var class_arr = class_list.split(/\s+/);
|
||||
$.each( class_arr, function( index, value ) {
|
||||
if ( allowed_classes.includes( value ) ) {
|
||||
|
||||
var color = value.replace( 'text-', '' );
|
||||
color = color.replace( 'btn-', '' );
|
||||
|
||||
text_elems.push( { class: value, elem: elem } );
|
||||
if ( !text_color ) {
|
||||
text_color = color;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
var item = $( this );
|
||||
|
||||
var background_color = item.css('background-color');
|
||||
if ( item.find( '.areoi-background__color' ).length ) {
|
||||
background_color = item.find( '.areoi-background__color' ).css('background-color');
|
||||
}
|
||||
|
||||
item.data( 'background', background_color );
|
||||
item.data( 'text', text_color );
|
||||
});
|
||||
|
||||
bg_checked = true;
|
||||
}
|
||||
add_data_attribute();
|
||||
|
||||
function check_backgrounds()
|
||||
{
|
||||
let items = [];
|
||||
|
||||
$( '.areoi-lightspeed-block .areoi-background' ).each( function( key, item ) {
|
||||
|
||||
var item = $( this );
|
||||
if ( is_background_in_view( item ) ) {
|
||||
|
||||
var background_color = item.data( 'background' );
|
||||
var text_color = item.data( 'text' );
|
||||
|
||||
if ( !text_color ) {
|
||||
if ( $( this ).hasClass( 'bg-body' ) || $( this ).hasClass( 'bg-light' ) ) {
|
||||
text_color = 'dark';
|
||||
} else {
|
||||
text_color = 'light';
|
||||
}
|
||||
}
|
||||
|
||||
if ( text_elems.length ) {
|
||||
$.each( text_elems, function( index, elem ) {
|
||||
|
||||
var new_class = '';
|
||||
if ( elem.class.includes( 'btn-' ) ) {
|
||||
new_class = 'btn-' + text_color;
|
||||
} else {
|
||||
new_class = 'text-' + text_color;
|
||||
}
|
||||
|
||||
elem.elem.removeClass( elem.class ).addClass( new_class );
|
||||
|
||||
text_elems[index].class = new_class;
|
||||
});
|
||||
}
|
||||
|
||||
$( '.areoi-lightspeed-block .areoi-background, .areoi-background__color' ).attr('style', 'background-color: ' + background_color + ' !important;' );
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$( window ).on( 'scroll', function() {
|
||||
if ( bg_checked ) {
|
||||
check_backgrounds();
|
||||
}
|
||||
});
|
||||
check_backgrounds();
|
||||
@@ -0,0 +1,67 @@
|
||||
const is_external_link = (url) => {
|
||||
const tmp = document.createElement('a');
|
||||
tmp.href = url;
|
||||
return tmp.host !== window.location.host;
|
||||
};
|
||||
|
||||
const is_new_page = (url) => {
|
||||
var next_url = new URL( url, document.baseURI );
|
||||
var next_url_no_hash = next_url.href.replace( next_url.hash, '' );
|
||||
|
||||
var current_url = new URL( window.location, document.baseURI );
|
||||
var current_url_no_hash = current_url.href.replace( current_url.hash, '' );
|
||||
|
||||
if ( next_url_no_hash != current_url_no_hash ) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const open_url = (url) => {
|
||||
|
||||
$( 'body' ).addClass( 'areoi-page-transition-unloaded' );
|
||||
$( '.areoi-transition' ).addClass( 'areoi-transition-invisible' );
|
||||
|
||||
setTimeout( function() {
|
||||
window.location = url;
|
||||
}, 500);
|
||||
};
|
||||
|
||||
$( document ).on( 'click', 'a:not(.areoi-feature-menu a)', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
if ( e.ctrlKey ) {
|
||||
return;
|
||||
}
|
||||
switch ( e.which ) {
|
||||
case 1:
|
||||
break;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
var url = $( this ).attr( 'href' );
|
||||
var drag = $( this ).parents( '.areoi-drag-container' );
|
||||
|
||||
if ( url.indexOf('#') < 0 && ( !drag.length || !drag.hasClass( 'moving' ) ) ) {
|
||||
|
||||
if ( typeof url !== 'undefined' && !is_external_link( url ) && $( this ).attr( 'target' ) !== '_blank' && is_new_page( url ) ) {
|
||||
open_url( url );
|
||||
} else if ( $( this ).attr( 'target' ) === '_blank' ) {
|
||||
window.open( url, '_blank' ).focus();
|
||||
} else if ( is_external_link( url ) ) {
|
||||
window.location = url;
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
function add_loaded_classes()
|
||||
{
|
||||
$( 'body' ).addClass( 'areoi-page-transition-loaded' ).removeClass( 'areoi-page-transition-unloaded' );
|
||||
$( '.areoi-transition' ).removeClass( 'areoi-transition-invisible' );
|
||||
}
|
||||
|
||||
$( window ).on( 'pageshow', function() {
|
||||
add_loaded_classes();
|
||||
});
|
||||
|
||||
add_loaded_classes();
|
||||
@@ -0,0 +1,84 @@
|
||||
let elements = [
|
||||
'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'li', 'img:not(.areoi-background img, .carousel img)', 'video:not(.areoi-background video, .carousel video)',
|
||||
'.btn', '.btn-simple', '.alert', '.accordion-item', '.card', '.list-group-item', '.nav-link',
|
||||
'.areoi-content-item',
|
||||
'.nf-form-cont', '.carousel',
|
||||
'.areoi-heading-divider', '.areoi-heading-icon', '.areoi-lightspeed-item-icon'
|
||||
];
|
||||
|
||||
let block_container = $( 'main' );
|
||||
|
||||
function add_transition_classes()
|
||||
{
|
||||
elements.forEach( (row) => {
|
||||
block_container.find( row ).each( function() {
|
||||
if ( !$( this ).parents( '.areoi-transition-none' ).length ) {
|
||||
var position = $( this ).css( 'position' );
|
||||
var parent_parralax = $( this ).parents( '.areoi-parallax-component' );
|
||||
if ( !$( this ).hasClass( 'areoi-parallax-component' ) && !parent_parralax.length ) {
|
||||
$( this ).addClass( 'areoi-transition' );
|
||||
}
|
||||
|
||||
if ( ![ 'fixed', 'relative', 'absolute', 'sticky' ].includes( position ) ) {
|
||||
$( this ).css( 'position', 'relative' );
|
||||
$( this ).addClass( 'areoi-transition-move' );
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
check_transitions();
|
||||
}
|
||||
add_transition_classes();
|
||||
|
||||
function is_scrolled_into_view( elem )
|
||||
{
|
||||
var docViewTop = $( window ).scrollTop();
|
||||
var docViewBottom = docViewTop + $( window ).height();
|
||||
var elemTop = $( elem ).offset().top;
|
||||
var elemBottom = elemTop + $( elem ).height();
|
||||
var elemHeight = $( elem ).height();
|
||||
var elemType = $( elem ).prop( 'nodeName' );
|
||||
|
||||
var sensitivity = 1;
|
||||
|
||||
var sensitivity_factor = $( window ).height() * sensitivity;
|
||||
|
||||
var bounding = elem[0].getBoundingClientRect();
|
||||
|
||||
return bounding.top <= $( window ).height() - (elemHeight * 0.2);
|
||||
}
|
||||
|
||||
function check_transitions()
|
||||
{
|
||||
let items = [];
|
||||
|
||||
$( '.areoi-transition' ).each( function( key, item ) {
|
||||
var item = $( this );
|
||||
if ( is_scrolled_into_view( item ) ) {
|
||||
if ( !item.hasClass( 'areoi-transition-loading' ) ) {
|
||||
items.push( item );
|
||||
item.addClass( 'areoi-transition-loading' );
|
||||
}
|
||||
}
|
||||
});
|
||||
animate_in( 0, items )
|
||||
}
|
||||
|
||||
function animate_in( index, items )
|
||||
{
|
||||
if ( items.length && items[index] ) {
|
||||
let item = items[index];
|
||||
|
||||
item.addClass( 'areoi-transition-visible' ).removeClass( 'areoi-transition-loading' );
|
||||
|
||||
setTimeout( function() {
|
||||
animate_in( ( index + 1 ), items )
|
||||
}, 50);
|
||||
}
|
||||
}
|
||||
|
||||
$( window ).on( 'scroll', function() {
|
||||
check_transitions();
|
||||
});
|
||||
check_transitions();
|
||||
@@ -0,0 +1,65 @@
|
||||
jQuery( document ).ready( function( $ ) {
|
||||
|
||||
var add_validation_classes = Marionette.Object.extend( {
|
||||
initialize: function() {
|
||||
var channel = Backbone.Radio.channel( 'form' );
|
||||
this.listenTo( channel, 'render:view', this.add_listener );
|
||||
|
||||
var channel = Backbone.Radio.channel( 'submit' );
|
||||
this.listenTo( channel, 'validate:field', this.add_field_classes );
|
||||
|
||||
var channel = Backbone.Radio.channel( 'fields' );
|
||||
this.listenTo( channel, 'change:modelValue', this.add_field_classes );
|
||||
},
|
||||
|
||||
add_listener: function( model )
|
||||
{
|
||||
var model = model;
|
||||
|
||||
var interval = setInterval( function() {
|
||||
var form = $( model.el );
|
||||
|
||||
if ( form.length ) {
|
||||
clearInterval( interval );
|
||||
|
||||
var errors = form.find( 'nf-errors' );
|
||||
|
||||
var target = errors[0];
|
||||
|
||||
var observer = new MutationObserver(function(mutations) {
|
||||
var error = target.innerText.replace( ' ', '' );
|
||||
|
||||
if ( error ) {
|
||||
form.addClass( 'areoi-nf-has-errors' );
|
||||
} else {
|
||||
form.removeClass( 'areoi-nf-has-errors' );
|
||||
}
|
||||
});
|
||||
|
||||
observer.observe(target, {
|
||||
attributes: true,
|
||||
childList: true,
|
||||
characterData: true
|
||||
});
|
||||
}
|
||||
}, 500);
|
||||
},
|
||||
|
||||
add_field_classes: function( model )
|
||||
{
|
||||
var form = $( '#nf-form-' + model.get( 'formID' ) + '-cont' ),
|
||||
field = form.find( '#nf-field-' + model.get( 'id' ) + '-container' );
|
||||
|
||||
setTimeout( function() {
|
||||
if ( model.get('errors') && model.get('errors').length ) {
|
||||
field.find( '.nf-element:not([type="checkbox"], [type="radio"])' ).addClass( 'is-invalid' ).removeClass( 'is-valid' );
|
||||
} else {
|
||||
field.find( '.nf-element:not([type="checkbox"], [type="radio"])' ).addClass( 'is-valid' ).removeClass( 'is-invalid' );
|
||||
}
|
||||
}, 250);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
new add_validation_classes();
|
||||
});
|
||||
@@ -0,0 +1,5 @@
|
||||
<script id="tmpl-nf-after-fields" type="text/template">
|
||||
{{{ data.afterFields }}}
|
||||
<div id="nf-form-errors-{{{ data.id }}}" class="nf-form-errors alert alert-danger" role="alert"></div>
|
||||
<div class="nf-form-hp"></div>
|
||||
</script>
|
||||
@@ -0,0 +1,12 @@
|
||||
<script id="tmpl-nf-field-checkbox" type="text/template">
|
||||
<input id="nf-field-{{{ data.id }}}"
|
||||
name="nf-field-{{{ data.id }}}"
|
||||
aria-describedby="nf-error-{{{ data.id }}}"
|
||||
class="{{{ data.renderClasses() }}} nf-element"
|
||||
type="checkbox"
|
||||
value="1" {{{ data.maybeDisabled() }}}{{{ data.maybeChecked() }}}
|
||||
aria-labelledby="nf-label-field-{{{ data.id }}}"
|
||||
|
||||
{{{ data.maybeRequired() }}}
|
||||
>
|
||||
</script>
|
||||
@@ -0,0 +1,3 @@
|
||||
<script id="tmpl-nf-field-error" type="text/template">
|
||||
<div class="nf-error-msg nf-error-{{{ data.id }}} invalid-feedback">{{{ data.msg }}}</div>
|
||||
</script>
|
||||
@@ -0,0 +1,5 @@
|
||||
<script id="tmpl-nf-field-label" type="text/template">
|
||||
<div class="nf-field-label form-label"><label for="nf-field-{{{ data.id }}}"
|
||||
id="nf-label-field-{{{ data.id }}}"
|
||||
class="{{{ data.renderLabelClasses() }}}">{{{ _.escape( data.label ) }}} {{{ ( 'undefined' != typeof data.required && 1 == data.required ) ? '<span class="ninja-forms-req-symbol">*</span>' : '' }}} {{{ data.maybeRenderHelp() }}}</label></div>
|
||||
</script>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script id="tmpl-nf-field-listcheckbox" type="text/template">
|
||||
<ul aria-describedby="nf-error-{{{ data.id }}}">
|
||||
{{{ data.renderOptions() }}}
|
||||
</ul>
|
||||
</script>
|
||||
|
||||
<script id='tmpl-nf-field-listcheckbox-option' type='text/template'>
|
||||
<# if ( ! data.visible ) { return '' } #>
|
||||
<li>
|
||||
<input type="checkbox" id="nf-field-{{{ data.fieldID }}}-{{{ data.index }}}" name="nf-field-{{{ data.fieldID }}}" class="{{{ data.classes }}} nf-element form-check-input {{{ ( data.isSelected ) ? ' nf-checked' : '' }}}" value="{{{ data.value }}}" {{{ ( data.isSelected ) ? 'checked="checked"' : '' }}}
|
||||
aria-labelledby="nf-label-field-{{{ data.fieldID }}}-{{{ data.index }}}"
|
||||
<# if( data.required ) { #>
|
||||
required
|
||||
<# } #>
|
||||
>
|
||||
<label for="nf-field-{{{ data.fieldID }}}-{{{ data.index }}}"
|
||||
id="nf-label-field-{{{ data.fieldID }}}-{{{ data.index }}}"
|
||||
class="{{{ ( data.isSelected ) ? 'nf-checked-label' : '' }}} form-check-label">{{{ data.label }}}</label>
|
||||
</li>
|
||||
</script>
|
||||
|
||||
<script id='tmpl-nf-field-listcheckbox-other' type='text/template'>
|
||||
<li {{{ ( ! data.visible ) ? 'style="display:none"' : '' }}}>
|
||||
<input type="checkbox"
|
||||
id="nf-field-{{{ data.fieldID }}}-other"
|
||||
name="nf-field-{{{ data.fieldID }}}" class="{{{ data.classes }}} nf-element form-check-input" value="nf-other" {{{ ( ! data.valueFound ) ? 'checked="checked"' : '' }}}
|
||||
aria-labelledby="nf-label-field-{{{ data.fieldID }}}-other"
|
||||
<# if( data.required ) { #>
|
||||
required
|
||||
<# } #>
|
||||
>
|
||||
<label id="nf-label-field-{{{ data.fieldID }}}-other" class="form-check-label">Other
|
||||
{{{ data.renderOtherText() }}}
|
||||
</label>
|
||||
</li>
|
||||
</script>
|
||||
|
||||
<script id='tmpl-nf-field-listcheckbox-other-text' type='text/template'>
|
||||
<input type="text" name="nf-field-{{{ data.fieldID }}}" class="nf-element" value="{{{ data.currentValue }}}">
|
||||
</script>
|
||||
@@ -0,0 +1,34 @@
|
||||
<script id="tmpl-nf-field-listradio" type="text/template">
|
||||
<ul aria-describedby="nf-error-{{{ data.id }}}">
|
||||
{{{ data.renderOptions() }}}
|
||||
</ul>
|
||||
</script>
|
||||
|
||||
<script id='tmpl-nf-field-listradio-option' type='text/template'>
|
||||
<# if ( ! data.visible ) { return '' } #>
|
||||
<li>
|
||||
<input type="radio"
|
||||
id="nf-field-{{{ data.fieldID }}}-{{{ data.index }}}"
|
||||
name="nf-field-{{{ data.fieldID }}}"
|
||||
class="{{{ data.classes }}} nf-element {{{ ( data.value == data.currentValue || 1 == data.selected ) ? 'nf-checked' : '' }}} form-check-input" value="{{{ data.value }}}" {{{ ( data.value == data.currentValue || 1 == data.selected ) ? 'checked="checked"' : '' }}}
|
||||
aria-labelledby="nf-label-class-field-{{{ data.fieldID }}}-{{{ data.index }}}"
|
||||
<# if( data.required ) { #>
|
||||
required
|
||||
<# } #>
|
||||
>
|
||||
<label for="nf-field-{{{ data.fieldID }}}-{{{ data.index }}}"
|
||||
id="nf-label-class-field-{{{ data.fieldID }}}-{{{ data.index }}}" class="{{{ ( data.value == data.currentValue || 1
|
||||
==
|
||||
data.selected ) ? 'nf-checked-label' : '' }}} form-check-label">{{{ data.label }}}</label>
|
||||
</li>
|
||||
</script>
|
||||
|
||||
<script id='tmpl-nf-field-listradio-other' type='text/template'>
|
||||
<li>
|
||||
<input type="radio" name="nf-field-{{{ data.fieldID }}}" class="{{{ data.classes }}} nf-element" value="nf-other" {{{ ( ! data.valueFound ) ? 'checked="checked"' : '' }}}> <label>Other {{{ data.renderOtherText() }}}</label>
|
||||
</li>
|
||||
</script>
|
||||
|
||||
<script id='tmpl-nf-field-listradio-other-text' type='text/template'>
|
||||
<input type="text" name="nf-field-{{{ data.fieldID }}}" class="nf-element" value="{{{ data.currentValue }}}">
|
||||
</script>
|
||||
@@ -0,0 +1,907 @@
|
||||
body,
|
||||
.editor-styles-wrapper {
|
||||
|
||||
.areoi-header-container {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.areoi-lightspeed-item-icon {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translate( 0, -50% );
|
||||
|
||||
&:before {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
.text-center {
|
||||
.areoi-lightspeed-item-icon {
|
||||
justify-content: center;
|
||||
|
||||
i {
|
||||
left: 50%;
|
||||
transform: translate( -50%, -50% );
|
||||
}
|
||||
}
|
||||
}
|
||||
.text-end {
|
||||
.areoi-lightspeed-item-icon {
|
||||
justify-content: flex-end;
|
||||
|
||||
i {
|
||||
left: auto;
|
||||
right: 0;
|
||||
transform: translate( 0%, -50% );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.areoi-form-placeholder {
|
||||
position: relative;
|
||||
|
||||
p {
|
||||
width: 80%;
|
||||
max-width: 400px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate( -50%, -50% );
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.areoi-lightspeed-block {
|
||||
.carousel-control-prev-icon,
|
||||
.carousel-control-next-icon {
|
||||
background-color: rgba( 0, 0, 0, 0.6 );
|
||||
background-size: 1.5rem 1.5rem;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.carousel-indicators {
|
||||
button {
|
||||
background-color: none;
|
||||
height: 5px;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgba( 0, 0, 0, 0.6 );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.areoi-has-mask {
|
||||
mask-position: top left;
|
||||
mask-size: cover;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-position: top left;
|
||||
-webkit-mask-size: cover;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.justify-content-lg-end {
|
||||
.areoi-has-mask {
|
||||
mask-position: top right;
|
||||
-webkit-mask-position: top right;
|
||||
}
|
||||
}
|
||||
|
||||
.areoi-divider {
|
||||
mask-position: top;
|
||||
mask-size: cover;
|
||||
-webkit-mask-position: top;
|
||||
-webkit-mask-size: cover;
|
||||
}
|
||||
|
||||
.areoi-divider-styled:not(.areoi-is-first-strip) {
|
||||
margin-top: -42.5px;
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
margin-top: -85px;
|
||||
}
|
||||
}
|
||||
|
||||
.areoi-background-pattern {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
&.has-areoi-parallax {
|
||||
.areoi-background:not(.areoi-parallax-none .areoi-background) {
|
||||
height: 150%;
|
||||
top: -25%;
|
||||
}
|
||||
.areoi-background-pattern:not(.areoi-parallax-none .areoi-background-pattern) {
|
||||
height: 120%;
|
||||
top: -15%;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-areoi-page-transition {
|
||||
opacity: 0;
|
||||
transition: all 0.5s ease-in-out;
|
||||
|
||||
&.areoi-page-transition-loaded {
|
||||
opacity: 1;
|
||||
}
|
||||
&.areoi-page-transition-unloaded {
|
||||
opacity: 0;
|
||||
transition: all 0.5s ease-in-out 0.5s;
|
||||
}
|
||||
}
|
||||
&.has-areoi-transition {
|
||||
overflow-x: hidden;
|
||||
|
||||
main {
|
||||
h1, h2, h3, h4, h5, h6, p, li, img:not(.areoi-background img, .carousel img), video:not(.areoi-background video, .carousel video),
|
||||
.btn, .btn-simple, .alert, .accordion-item, .card, .list-group-item, .nav-link,
|
||||
.areoi-content-item, .areoi-heading-icon, .areoi-heading-divider,
|
||||
.nf-form-cont {
|
||||
&:not(.areoi-parallax-component) {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.areoi-parallax-component {
|
||||
h1, h2, h3, h4, h5, h6, p, li, img:not(.areoi-background img, .carousel img), video:not(.areoi-background video, .carousel video),
|
||||
.btn, .btn-simple, .alert, .accordion-item, .card, .list-group-item, .nav-link,
|
||||
.areoi-content-item, .areoi-heading-icon, .areoi-heading-divider,
|
||||
.nf-form-cont {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.areoi-transition {
|
||||
opacity: 0;
|
||||
}
|
||||
.areoi-transition-visible,
|
||||
.areoi-transition-invisible {
|
||||
opacity: 1 !important;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
.areoi-transition-invisible {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.areoi-transition-none,
|
||||
.nf-form-cont {
|
||||
h1, h2, h3, h4, h5, h6, p, li, img:not(.areoi-background img, .carousel img), video:not(.areoi-background video, .carousel video),
|
||||
.btn, .alert, .accordion-item, .card, .list-group-item, .nav-link,
|
||||
.areoi-content-item, .areoi-heading-icon, .areoi-heading-divider,
|
||||
.nf-form-cont {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.areoi-transition {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.areoi-more-menu .areoi-more-menu-main li a,
|
||||
.areoi-more-menu .areoi-more-menu-main li button,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body > ul > li > a,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body > ul > li > button,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body .areoi-offcanvas-back {
|
||||
opacity: 0;
|
||||
}
|
||||
.areoi-more-menu.show .areoi-more-menu-main li a,
|
||||
.areoi-more-menu.show .areoi-more-menu-main li button,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body.active > ul > li > a,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body.active > ul > li > button,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body.active .areoi-offcanvas-back {
|
||||
opacity: 1;
|
||||
}
|
||||
&.areoi-transition-up {
|
||||
.areoi-transition-move {
|
||||
top: 20px;
|
||||
|
||||
&.areoi-transition-visible {
|
||||
top: 0;
|
||||
}
|
||||
&.areoi-transition-invisible {
|
||||
top: 20px;
|
||||
}
|
||||
}
|
||||
.areoi-more-menu .areoi-more-menu-main li a,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body > ul > li > a,
|
||||
.areoi-more-menu .areoi-more-menu-main li button,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body > ul > li > button {
|
||||
top: 20px;
|
||||
}
|
||||
.areoi-more-menu.show .areoi-more-menu-main li a,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body.active > ul > li > a,
|
||||
.areoi-more-menu.show .areoi-more-menu-main li button,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body.active > ul > li > button,
|
||||
.areoi-more-menu.show .areoi-more-menu-main li button,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body.active > ul > li > button {
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
&.areoi-transition-down {
|
||||
.areoi-transition-move {
|
||||
top: -20px;
|
||||
|
||||
&.areoi-transition-visible {
|
||||
top: 0;
|
||||
}
|
||||
&.areoi-transition-invisible {
|
||||
top: -20px;
|
||||
}
|
||||
}
|
||||
.areoi-more-menu .areoi-more-menu-main li a,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body > ul > li > a,
|
||||
.areoi-more-menu .areoi-more-menu-main li button,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body > ul > li > button {
|
||||
top: -20px;
|
||||
}
|
||||
.areoi-more-menu.show .areoi-more-menu-main li a,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body.active > ul > li > a,
|
||||
.areoi-more-menu.show .areoi-more-menu-main li button,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body.active > ul > li > button {
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
&.areoi-transition-left {
|
||||
.areoi-transition-move {
|
||||
left: -20px;
|
||||
|
||||
&.areoi-transition-visible {
|
||||
left: 0;
|
||||
}
|
||||
&.areoi-transition-invisible {
|
||||
left: -20px;
|
||||
}
|
||||
}
|
||||
.areoi-more-menu .areoi-more-menu-main li a,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body > ul > li > a,
|
||||
.areoi-more-menu .areoi-more-menu-main li button,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body > ul > li > button {
|
||||
left: -20px;
|
||||
}
|
||||
.areoi-more-menu.show .areoi-more-menu-main li a,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body.active > ul > li > a,
|
||||
.areoi-more-menu.show .areoi-more-menu-main li button,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body.active > ul > li > button {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
&.areoi-transition-right {
|
||||
.areoi-transition-move {
|
||||
left: 20px;
|
||||
|
||||
&.areoi-transition-visible {
|
||||
left: 0;
|
||||
}
|
||||
&.areoi-transition-invisible {
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
.areoi-more-menu .areoi-more-menu-main li a,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body > ul > li > a,
|
||||
.areoi-more-menu .areoi-more-menu-main li button,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body > ul > li > button {
|
||||
left: 20px;
|
||||
}
|
||||
.areoi-more-menu.show .areoi-more-menu-main li a,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body.active > ul > li > a,
|
||||
.areoi-more-menu.show .areoi-more-menu-main li button,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body.active > ul > li > button {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
&.areoi-transition-shrink {
|
||||
.areoi-transition-move {
|
||||
transform: scale(2);
|
||||
|
||||
&.areoi-transition-visible {
|
||||
transform: scale(1);
|
||||
}
|
||||
&.areoi-transition-invisible {
|
||||
transform: scale(2);
|
||||
}
|
||||
}
|
||||
.areoi-more-menu .areoi-more-menu-main li a,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body > ul > li > a,
|
||||
.areoi-more-menu .areoi-more-menu-main li button,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body > ul > li > button {
|
||||
transform: scale(2);
|
||||
}
|
||||
.areoi-more-menu.show .areoi-more-menu-main li a,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body.active > ul > li > a,
|
||||
.areoi-more-menu.show .areoi-more-menu-main li button,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body.active > ul > li > button {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
&.areoi-transition-grow {
|
||||
.areoi-transition-move {
|
||||
transform: scale(0);
|
||||
|
||||
&.areoi-transition-visible {
|
||||
transform: scale(1);
|
||||
}
|
||||
&.areoi-transition-invisible {
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
.areoi-more-menu .areoi-more-menu-main li a,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body > ul > li > a,
|
||||
.areoi-more-menu .areoi-more-menu-main li button,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body > ul > li > button {
|
||||
transform: scale(0);
|
||||
}
|
||||
.areoi-more-menu.show .areoi-more-menu-main li a,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body.active > ul > li > a,
|
||||
.areoi-more-menu.show .areoi-more-menu-main li button,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body.active > ul > li > button {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
&.areoi-transition-blur {
|
||||
.areoi-transition {
|
||||
filter: blur(10px);
|
||||
|
||||
&.areoi-transition-visible {
|
||||
filter: blur(0px);
|
||||
}
|
||||
&.areoi-transition-invisible {
|
||||
filter: blur(10px);
|
||||
}
|
||||
}
|
||||
.areoi-more-menu .areoi-more-menu-main li a,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body > ul > li > a,
|
||||
.areoi-more-menu .areoi-more-menu-main li button,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body > ul > li > button {
|
||||
filter: blur(10px);
|
||||
}
|
||||
.areoi-more-menu.show .areoi-more-menu-main li a,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body.active > ul > li > a,
|
||||
.areoi-more-menu.show .areoi-more-menu-main li button,
|
||||
.areoi-more-menu .areoi-more-menu-main ul .offcanvas-body.active > ul > li > button {
|
||||
filter: blur(0px);
|
||||
}
|
||||
}
|
||||
main {
|
||||
.areoi-transition.areoi-background {
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
&.areoi-transition-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
&.areoi-transition-invisible {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.areoi-more-menu.show .areoi-more-menu-main li a,
|
||||
.areoi-more-menu.show .areoi-more-menu-main li button {
|
||||
transition: all 0.5s ease-in-out 0.3s;
|
||||
}
|
||||
@for $i from 2 through 30 {
|
||||
.areoi-more-menu.show .areoi-more-menu-main ul > li:nth-of-type(#{$i}) > button,
|
||||
.areoi-more-menu.show .areoi-more-menu-main ul > li:nth-of-type(#{$i}) > a {
|
||||
transition-delay: (0.3s + ( $i * 0.15s ) );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.has-areoi-hover-transition {
|
||||
main,
|
||||
.areoi-feature-menu {
|
||||
.areoi-has-url {
|
||||
transition: all 0.5s ease-in-out;
|
||||
position: relative;
|
||||
|
||||
&.btn {
|
||||
i {
|
||||
position: relative;
|
||||
left: 0;
|
||||
transition: all 0.25s ease-in-out;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
transition: all 0.25s ease-in-out;
|
||||
|
||||
&.btn {
|
||||
i {
|
||||
left: 2.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
&.areoi-hover-transition-up {
|
||||
main,
|
||||
.areoi-feature-menu {
|
||||
.areoi-has-url {
|
||||
top: 0;
|
||||
|
||||
&:hover {
|
||||
top: -10px;
|
||||
|
||||
&.areoi-has-url-small {
|
||||
top: -2.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.areoi-hover-transition-down {
|
||||
main,
|
||||
.areoi-feature-menu {
|
||||
.areoi-has-url {
|
||||
top: 0;
|
||||
|
||||
&:hover {
|
||||
top: 10px;
|
||||
|
||||
&.areoi-has-url-small {
|
||||
top: 2.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.areoi-hover-transition-left {
|
||||
main,
|
||||
.areoi-feature-menu {
|
||||
.areoi-has-url {
|
||||
left: 0;
|
||||
|
||||
&:hover {
|
||||
left: 10px;
|
||||
|
||||
&.areoi-has-url-small {
|
||||
left: 2.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.areoi-hover-transition-right {
|
||||
main,
|
||||
.areoi-feature-menu {
|
||||
.areoi-has-url {
|
||||
right: 0;
|
||||
|
||||
&:hover {
|
||||
right: 10px;
|
||||
|
||||
&.areoi-has-url-small {
|
||||
right: -2.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.areoi-hover-transition-grow {
|
||||
main,
|
||||
.areoi-feature-menu {
|
||||
.areoi-has-url {
|
||||
transform: scale( 1 );
|
||||
|
||||
&:hover {
|
||||
transform: scale( 1.05 );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.areoi-hover-transition-shrink {
|
||||
main,
|
||||
.areoi-feature-menu {
|
||||
.areoi-has-url {
|
||||
transform: scale( 1 );
|
||||
|
||||
&:hover {
|
||||
transform: scale( 0.95 );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.areoi-parallax-component.areoi-transition-visible {
|
||||
transition: all 0.5s ease-in-out, transform 0s !important;
|
||||
}
|
||||
|
||||
&.has-areoi-frame {
|
||||
.areoi-frame {
|
||||
width: 20px;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
display: none;
|
||||
|
||||
&.areoi-frame-corner-right {
|
||||
left: auto;
|
||||
right: 20px;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.areoi-frame-right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.areoi-frame-top,
|
||||
.areoi-frame-bottom {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
|
||||
&.areoi-frame-bottom {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
|
||||
svg {
|
||||
top: auto;
|
||||
bottom: 20px;
|
||||
transform: rotate(-90deg);
|
||||
|
||||
&.areoi-frame-corner-right {
|
||||
left: auto;
|
||||
top: auto;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.offcanvas {
|
||||
height: calc(100vh - 40px);
|
||||
top: 20px;
|
||||
|
||||
.areoi-feature-menu {
|
||||
width: calc(100vw - 540px);
|
||||
}
|
||||
}
|
||||
.offcanvas.show {
|
||||
transform: translate( -20px, 0 );
|
||||
}
|
||||
|
||||
&.areoi-frame-square,
|
||||
&.areoi-frame-rounded,
|
||||
&.areoi-frame-square-lg,
|
||||
&.areoi-frame-rounded-lg,
|
||||
&.areoi-frame-sides-lg {
|
||||
padding: 20px;
|
||||
|
||||
.areoi-header-positioned {
|
||||
width: calc( 100% - 40px ) !important;
|
||||
top: 20px !important;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 992px) {
|
||||
&.areoi-frame-square-lg,
|
||||
&.areoi-frame-rounded-lg,
|
||||
&.areoi-frame-sides-lg {
|
||||
padding: 40px;
|
||||
|
||||
.areoi-frame {
|
||||
width: 40px;
|
||||
|
||||
svg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
|
||||
&.areoi-frame-corner-right {
|
||||
left: auto;
|
||||
right: 40px;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
.areoi-frame-top,
|
||||
.areoi-frame-bottom {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
|
||||
&.areoi-frame-bottom {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
|
||||
svg {
|
||||
top: auto;
|
||||
bottom: 40px;
|
||||
transform: rotate(-90deg);
|
||||
|
||||
&.areoi-frame-corner-right {
|
||||
left: auto;
|
||||
top: auto;
|
||||
right: 40px;
|
||||
bottom: 40px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.areoi-header-positioned {
|
||||
width: calc( 100% - 80px ) !important;
|
||||
top: 40px !important;
|
||||
}
|
||||
.offcanvas {
|
||||
height: calc(100vh - 80px);
|
||||
top: 40px;
|
||||
|
||||
.areoi-feature-menu {
|
||||
width: calc(100vw - 580px);
|
||||
}
|
||||
}
|
||||
.offcanvas.show {
|
||||
transform: translate( -40px, 0 );
|
||||
}
|
||||
}
|
||||
}
|
||||
&.areoi-frame-rounded,
|
||||
&.areoi-frame-rounded-lg,
|
||||
&.areoi-frame-sides-lg {
|
||||
.areoi-frame {
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.areoi-frame-sides,
|
||||
&.areoi-frame-sides-lg {
|
||||
.areoi-frame-top,
|
||||
.areoi-frame-bottom {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.areoi-frame-sides {
|
||||
padding: 0 20px;
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.areoi-header-positioned {
|
||||
width: calc( 100% - 40px ) !important;
|
||||
top: 0px !important;
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
width: calc( 100% - 40px ) !important;
|
||||
top: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.areoi-frame-sides-lg {
|
||||
padding: 0 20px;
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
padding: 0 40px;
|
||||
}
|
||||
.areoi-header-positioned {
|
||||
width: calc( 100% - 40px ) !important;
|
||||
top: 0px !important;
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
width: calc( 100% - 80px ) !important;
|
||||
top: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.areoi-drag-container {
|
||||
overflow: auto;
|
||||
cursor: grab;
|
||||
padding: 1rem 0 1rem 1rem;
|
||||
}
|
||||
.areoi-drag-container ul {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
cursor: grab;
|
||||
list-style: none;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
align-items: center;
|
||||
}
|
||||
.areoi-drag-container ul li {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
flex-basis: 400px;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.areoi-lightspeed-block {
|
||||
* {
|
||||
scrollbar-width: auto;
|
||||
scrollbar-color: rgba( #000, 0.2 ) rgba( #fff, 0.1 );
|
||||
}
|
||||
*::-webkit-scrollbar {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
*::-webkit-scrollbar-track {
|
||||
background: rgba( #fff, 0.1 );
|
||||
}
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: rgba( #000, 0.2 );
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba( #fff, 0.1 );
|
||||
}
|
||||
}
|
||||
|
||||
.areoi-square-spacer {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
.areoi-media-col {
|
||||
|
||||
.areoi-media-col-content {
|
||||
position: relative;
|
||||
}
|
||||
img,
|
||||
video {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
&.areoi-media-col-contain {
|
||||
img,
|
||||
video {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
object-fit: contain;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.areoi-lightspeed-content-with-items {
|
||||
.areoi-media-col {
|
||||
&.areoi-media-col-contain {
|
||||
|
||||
svg {
|
||||
display: none;
|
||||
}
|
||||
img,
|
||||
video {
|
||||
object-fit: unset;
|
||||
max-width: 100%;
|
||||
width: auto !important;
|
||||
height: 60px !important;
|
||||
max-height: 70px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.text-center {
|
||||
.areoi-media-col-contain {
|
||||
img,
|
||||
video {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate( -50%, 0 );
|
||||
}
|
||||
}
|
||||
}
|
||||
.text-end {
|
||||
.areoi-media-col-contain {
|
||||
img,
|
||||
video {
|
||||
top: 0;
|
||||
left: auto;
|
||||
right: 0;
|
||||
transform: translate( 0, 0 );
|
||||
}
|
||||
}
|
||||
}
|
||||
.areoi-content-item-with-background {
|
||||
min-height: 400px;
|
||||
padding: var(--bs-gutter-x, 1.5rem);
|
||||
padding-top: 8rem;
|
||||
|
||||
.areoi-media-col {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
.areoi-heading-icon {
|
||||
img, svg {
|
||||
max-height: 35px;
|
||||
width: auto;
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
.areoi-heading-divider-basic,
|
||||
.areoi-heading-divider-basic-top {
|
||||
width: 75px;
|
||||
height: 1px;
|
||||
display: inline-block;
|
||||
border-top: 2px solid #fff;
|
||||
}
|
||||
.areoi-heading-divider-wide,
|
||||
.areoi-heading-divider-wide-top {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
display: inline-block;
|
||||
border-top: 1px solid #fff;
|
||||
}
|
||||
.areoi-heading-divider-dotted,
|
||||
.areoi-heading-divider-dotted-top {
|
||||
width: 50px;
|
||||
height: 1px;
|
||||
display: inline-block;
|
||||
border-top: 5px dotted #fff;
|
||||
}
|
||||
|
||||
&.has-areoi-background-transition {
|
||||
.areoi-background,
|
||||
.areoi-background__color {
|
||||
transition: background-color 0.25s ease-in-out;
|
||||
}
|
||||
}
|
||||
&.has-areoi-gallery {
|
||||
.areoi-lightspeed-block {
|
||||
img,
|
||||
video {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
#areoi-gallery {
|
||||
img,
|
||||
video {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
display: block;;
|
||||
}
|
||||
.carousel {
|
||||
padding: 0 calc( 1rem + 52px );
|
||||
}
|
||||
.carousel-control-prev,
|
||||
.carousel-control-next {
|
||||
background-color: rgba( 255, 255, 255, 0.1 );
|
||||
width: 52px;
|
||||
transition: all 0.25s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba( 255, 255, 255, 1 );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user