[ADD] theme saas-6
This commit is contained in:
Design
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,168 @@
|
||||
(function(){
|
||||
'use strict';
|
||||
var website = openerp.website;
|
||||
|
||||
// Animations
|
||||
website.snippet.options.o_animate = website.snippet.Option.extend({
|
||||
|
||||
start: function(){
|
||||
this._super();
|
||||
var self = this;
|
||||
|
||||
setTimeout(function(){
|
||||
|
||||
if(self.$overlay.find("li.snippet-option-o_animate > ul > li li.active").length > 0) {
|
||||
self.update_options_visibility("show");
|
||||
} else {
|
||||
self.update_options_visibility("hide");
|
||||
}
|
||||
|
||||
// remove theme_enark animation options from the context menu
|
||||
// WARNING: theme_enark do not prefix js methods,
|
||||
// Remove in Odoo9
|
||||
|
||||
if(self.$overlay.find('li.snippet-option-animation').length > 0) {
|
||||
$(this).addClass("hidden");
|
||||
}
|
||||
|
||||
},500)
|
||||
},
|
||||
|
||||
select_class: function(type, value, $li){
|
||||
this._super(type, value, $li);
|
||||
var self = this;
|
||||
|
||||
setTimeout(function(){
|
||||
self.$target.addClass("o_animate_preview o_animate").css('animation-name', 'dummy-none');
|
||||
self.$target.css('animation-name', '');
|
||||
});
|
||||
|
||||
if(type != "click") {return}
|
||||
if(value.length > 0 ){
|
||||
self.update_options_visibility("show");
|
||||
self.$target.removeClass("o_animate_preview");
|
||||
} else {
|
||||
setTimeout(function(){
|
||||
self.update_options_visibility("hide");
|
||||
self.$target.removeClass("o_animate_preview o_animate");
|
||||
},500)
|
||||
}
|
||||
},
|
||||
|
||||
update_options_visibility: function(value){
|
||||
var self = this;
|
||||
var opts = ".snippet-option-o_animate_duration, .snippet-option-o_animate_delay, .snippet-option-o_animate_options";
|
||||
setTimeout(function(){
|
||||
if(value == "show"){
|
||||
self.$overlay.find(opts).removeClass("hidden");
|
||||
} else if (value == "hide"){
|
||||
self.$overlay.find(opts).addClass("hidden");
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
clean_for_save: function(){
|
||||
var self = this;
|
||||
|
||||
// Clean elements
|
||||
self.$target
|
||||
.removeClass("o_animating o_animated o_animate_preview")
|
||||
.css({
|
||||
'animation': '',
|
||||
'animation-name': '',
|
||||
'animation-play-state': '',
|
||||
'visibility': ''
|
||||
});
|
||||
if(self.$target.hasClass("o_animate")){
|
||||
self.$target.css('animation-play-state', 'paused');
|
||||
}
|
||||
|
||||
// Clean all inView elements
|
||||
$("#wrapwrap").find(".o_animate").removeClass("o_visible");
|
||||
}
|
||||
|
||||
}),
|
||||
|
||||
// Duration
|
||||
website.snippet.options.o_animate_duration = website.snippet.Option.extend({
|
||||
select_class: function(type, value, $li){
|
||||
this._super(type, value, $li);
|
||||
|
||||
var self = this;
|
||||
var $timeline_duration = self.$overlay.find(".timeline.duration span[simulate='duration']");
|
||||
var $timeline_delay = self.$overlay.find(".timeline.duration span[simulate='delay']");
|
||||
|
||||
self.$target
|
||||
.css({
|
||||
'animation-duration': '',
|
||||
'animation-delay': ''
|
||||
});
|
||||
|
||||
var el_delay = self.$target.css("animation-delay");
|
||||
var el_duration = self.$target.css("animation-duration");
|
||||
var el_period;
|
||||
|
||||
el_delay = parseFloat(el_delay.slice(0,-1));
|
||||
el_duration = parseFloat(el_duration.slice(0,-1));
|
||||
el_period = el_delay + el_duration;
|
||||
|
||||
$timeline_duration.parent().width((el_duration*100)/el_period +"%");
|
||||
$timeline_delay.parent().width((el_delay*100)/el_period +"%");
|
||||
|
||||
|
||||
self.$target.addClass("o_animate_preview").css('animation-name', 'dummy-none').css('animation-duration', '0s');
|
||||
|
||||
$timeline_duration.css('animation-name', 'dummy-none').css('animation-duration', el_duration + "s").css('animation-delay', el_delay + "s");
|
||||
$timeline_delay.css('animation-name', 'dummy-none').css('animation-duration', el_delay + "s");
|
||||
|
||||
setTimeout(function(){
|
||||
self.$target.css('animation-name', '').css('animation-duration', '');
|
||||
|
||||
$timeline_duration.css('animation-name', '');
|
||||
$timeline_delay.css('animation-name', '');
|
||||
|
||||
});
|
||||
}
|
||||
}),
|
||||
|
||||
// Delay
|
||||
website.snippet.options.o_animate_delay = website.snippet.Option.extend({
|
||||
select_class: function(type, value, $li){
|
||||
this._super(type, value, $li);
|
||||
var self = this;
|
||||
var $timeline_delay = self.$overlay.find(".timeline.delay span[simulate='delay']");
|
||||
var $timeline_duration = self.$overlay.find(".timeline.delay span[simulate='duration']");
|
||||
|
||||
self.$target
|
||||
.css({
|
||||
'animation-duration': '',
|
||||
'animation-delay': ''
|
||||
});
|
||||
|
||||
var el_delay = self.$target.css("animation-delay");
|
||||
var el_duration = self.$target.css("animation-duration");
|
||||
var el_period;
|
||||
|
||||
el_delay = parseFloat(el_delay.slice(0,-1));
|
||||
el_duration = parseFloat(el_duration.slice(0,-1));
|
||||
el_period = el_delay + el_duration;
|
||||
|
||||
$timeline_duration.parent().width((el_duration*100)/el_period +"%");
|
||||
$timeline_delay.parent().width((el_delay*100)/el_period +"%");
|
||||
|
||||
self.$target.addClass("o_animate_preview").css('animation-name', 'dummy-none').css('animation-duration', '0s');
|
||||
|
||||
$timeline_duration.css('animation-name', 'dummy-none').css('animation-duration', el_duration + "s").css('animation-delay', el_delay + "s");
|
||||
$timeline_delay.css('animation-name', 'dummy-none').css('animation-duration', el_delay + "s");
|
||||
|
||||
setTimeout(function(){
|
||||
self.$target.css('animation-name', '').css('animation-duration', '');
|
||||
|
||||
$timeline_duration.css('animation-name', '');
|
||||
$timeline_delay.css('animation-name', '');
|
||||
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
})();
|
||||
@@ -0,0 +1,134 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
openerp.website_animate = {
|
||||
win : {},
|
||||
items : {},
|
||||
|
||||
offsetRatio : 0.3, // Dynamic offset ratio: 0.3 = (element's height/3)
|
||||
offsetMin : 10, // Minimum offset for small elements (in pixels)
|
||||
|
||||
// Retrieve animable elements and attach handlers.
|
||||
start : function(){
|
||||
var self = this;
|
||||
self.items = $(".o_animate");
|
||||
self.items.each(function(){
|
||||
var $el = $(this);
|
||||
// Set all monitored elements to initial state
|
||||
self.reset_animation($el);
|
||||
});
|
||||
setTimeout(function(){
|
||||
self.attach_handlers();
|
||||
});
|
||||
},
|
||||
|
||||
// Bind events and define the scrolling function
|
||||
attach_handlers : function(){
|
||||
var self = this;
|
||||
var lastScroll = 0;
|
||||
|
||||
$(window)
|
||||
.on("resize.o_animate", function(){
|
||||
self.win.h = $(window).height();
|
||||
$(window).trigger("scroll");
|
||||
})
|
||||
.trigger("resize")
|
||||
.on("scroll.o_animate", (_.throttle(function(){
|
||||
// _.throttle -> Limit the number of times the scroll function
|
||||
// can be called in a given period. (http://underscorejs.org/#throttle)
|
||||
var windowTop = $(window).scrollTop();
|
||||
var windowBottom = windowTop + self.win.h;
|
||||
|
||||
// Handle reverse scrolling
|
||||
var direction = (windowTop < lastScroll) ? -1 : 1;
|
||||
lastScroll = windowTop;
|
||||
|
||||
self.items.each(function(){
|
||||
var $el = $(this);
|
||||
var elHeight = $el.height();
|
||||
var elOffset = direction * Math.max((elHeight * self.offsetRatio), self.offsetMin)
|
||||
var state = $el.css("animation-play-state");
|
||||
|
||||
// We need to offset for the change in position from some animation
|
||||
// So we get the top value of the transform matrix
|
||||
var transformMatrix = $el.css('transform').replace(/[^0-9\-.,]/g, '').split(',')
|
||||
var transformOffset = transformMatrix[13] || transformMatrix[5];
|
||||
var elTop = $el.offset().top - transformOffset;
|
||||
|
||||
var visible = windowBottom > (elTop + elOffset) && windowTop < (elTop + elHeight - elOffset);
|
||||
|
||||
if ( visible && (state == "paused") ){
|
||||
$el.addClass("o_visible");
|
||||
self.start_animation($el);
|
||||
} else if ( !(visible) && $el.hasClass("o_animate_both_scroll") && (state == "running") ){
|
||||
$el.removeClass("o_visible");
|
||||
self.reset_animation($el)
|
||||
}
|
||||
});
|
||||
},100)))
|
||||
.trigger("scroll");
|
||||
},
|
||||
|
||||
// Set elements to initial state
|
||||
reset_animation:function($el){
|
||||
var self = this;
|
||||
var anim_name = $el.css("animation-name");
|
||||
|
||||
$el
|
||||
.css({"animation-name" : "dummy-none", "animation-play-state" : ""})
|
||||
.removeClass("o_animated o_animating")
|
||||
|
||||
// force the browser to redraw using setTimeout
|
||||
setTimeout(function(){
|
||||
$el.css({"animation-name" : anim_name, "animation-play-state" : "paused"})
|
||||
},0);
|
||||
},
|
||||
|
||||
// Start animation and/or update element's state
|
||||
start_animation: function($el){
|
||||
var self = this;
|
||||
|
||||
// force the browser to redraw using setTimeout
|
||||
setTimeout(function(){
|
||||
$el
|
||||
.css({"animation-play-state": "running"})
|
||||
.addClass("o_animating")
|
||||
.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
|
||||
$el.addClass("o_animated").removeClass("o_animating");
|
||||
$(window).trigger("resize");
|
||||
});
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
$(document).ready(function(){
|
||||
// By default, elements are hidden by the css of o_animate.
|
||||
// render alements + // We will trigger the animation then pause it in state 0.
|
||||
openerp.website_animate.start()
|
||||
// Then we render all the elements, the ones which are invisible
|
||||
// in state 0 (like fade_in for example) will stay invisible.
|
||||
$(".o_animate").css("visibility", "visible");
|
||||
}),
|
||||
|
||||
|
||||
// Backward compatibility for enark animation system
|
||||
openerp.website.snippet.animationRegistry.o_animate = openerp.website.snippet.Animation.extend({
|
||||
selector: '.o_animation',
|
||||
|
||||
stop: function () {
|
||||
this._super();
|
||||
|
||||
// Convert old classes to the new animation system
|
||||
var old_animation_classes = "o_animation o_displayed o_displayed_top o_displayed_middle o_displayed_bottom o_visible o_visible_top o_visible_middle o_visible_bottom";
|
||||
$(".o_fade_in").addClass("o_animate o_anim_fade_in").removeClass("o_fade_in");
|
||||
$(".o_fade_in_down").addClass("o_animate o_anim_fade_in_down").removeClass("o_fade_in_down");
|
||||
$(".o_fade_in_left").addClass("o_animate o_anim_fade_in_left").removeClass("o_fade_in_left");
|
||||
$(".o_fade_in_right").addClass("o_animate o_anim_fade_in_right").removeClass("o_fade_in_right");
|
||||
$(".o_fade_in_up").addClass("o_animate o_anim_fade_in_up").removeClass("o_fade_in_up");
|
||||
this.$target.removeClass(old_animation_classes);
|
||||
|
||||
},
|
||||
});
|
||||
|
||||
})();
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,487 @@
|
||||
|
||||
// ========== o_animate Mixins ==========
|
||||
.o_animate_keyframes(@name; @arguments) {
|
||||
@-moz-keyframes @name { @arguments(); }
|
||||
@-webkit-keyframes @name { @arguments(); }
|
||||
@keyframes @name { @arguments(); }
|
||||
}
|
||||
|
||||
.o_animate_transform(@string){
|
||||
-webkit-transform : @string;
|
||||
-moz-transform : @string;
|
||||
-ms-transform : @string;
|
||||
-o-transform : @string;
|
||||
}
|
||||
|
||||
// Website Builder preview
|
||||
|
||||
.o_animate_keyframes(o_animate_timeline_duration; {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
100% {
|
||||
width: 100%;
|
||||
}
|
||||
});
|
||||
|
||||
.o_animate_keyframes(o_animate_timeline_delay; {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
100% {
|
||||
width: 100%;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// ========== Library ==========
|
||||
// based on animate.css
|
||||
// https://github.com/daneden/animate.css
|
||||
|
||||
.o_animate_keyframes(o_anim_bounce_in; {
|
||||
0%, 20%, 40%, 60%, 80%, 100% {
|
||||
.transition-timing-function(cubic-bezier(0.215, 0.610, 0.355, 1.000));
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
.o_animate_transform(scale3d(.3, .3, .3));
|
||||
}
|
||||
20% {
|
||||
.o_animate_transform(scale3d(1.1, 1.1, 1.1));
|
||||
}
|
||||
40% {
|
||||
.o_animate_transform(scale3d(.9, .9, .9));
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
.o_animate_transform(scale3d(1.03, 1.03, 1.03));
|
||||
}
|
||||
80% {
|
||||
.o_animate_transform(scale3d(.97, .97, .97));
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
.o_animate_transform(scale3d(1, 1, 1));
|
||||
}
|
||||
});
|
||||
|
||||
.o_anim_bounce_in {
|
||||
.animation-name(o_anim_bounce_in);
|
||||
.animation-duration(.75s);
|
||||
}
|
||||
|
||||
.o_animate_keyframes(o_anim_bounce_in_down; {
|
||||
0%, 60%, 75%, 90%, 100% {
|
||||
.transition-timing-function(cubic-bezier(0.215, 0.610, 0.355, 1.000));
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
.translate3d(0, -3000px, 0);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
.translate3d(0, 25px, 0);
|
||||
}
|
||||
75% {
|
||||
.translate3d(0, -10px, 0);
|
||||
}
|
||||
90% {
|
||||
.translate3d(0, 5px, 0);
|
||||
}
|
||||
100% {
|
||||
.translate3d(0,0,0);
|
||||
}
|
||||
});
|
||||
|
||||
.o_anim_bounce_in_down {
|
||||
.animation-name(o_anim_bounce_in_down);
|
||||
}
|
||||
|
||||
.o_animate_keyframes(o_anim_bounce_in_left; {
|
||||
0%, 60%, 75%, 90%, 100% {
|
||||
.transition-timing-function(cubic-bezier(0.215, 0.610, 0.355, 1.000));
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
.translate3d(-3000px, 0, 0);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
.translate3d(25px, 0, 0);
|
||||
}
|
||||
75% {
|
||||
.translate3d(-10px, 0, 0);
|
||||
}
|
||||
90% {
|
||||
.translate3d(5px, 0, 0);
|
||||
}
|
||||
100% {
|
||||
.translate3d(0,0,0);
|
||||
}
|
||||
});
|
||||
|
||||
.o_anim_bounce_in_left {
|
||||
.animation-name(o_anim_bounce_in_left);
|
||||
}
|
||||
|
||||
.o_animate_keyframes(o_anim_bounce_in_right; {
|
||||
0%, 60%, 75%, 90%, 100% {
|
||||
.transition-timing-function(cubic-bezier(0.215, 0.610, 0.355, 1.000));
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
.translate3d(3000px, 0, 0);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
.translate3d(-25px, 0, 0);
|
||||
}
|
||||
75% {
|
||||
.translate3d(10px, 0, 0);
|
||||
}
|
||||
90% {
|
||||
.translate3d(-5px, 0, 0);
|
||||
}
|
||||
100% {
|
||||
.translate3d(0,0,0);
|
||||
}
|
||||
});
|
||||
|
||||
.o_anim_bounce_in_right {
|
||||
.animation-name(o_anim_bounce_in_right);
|
||||
}
|
||||
|
||||
.o_animate_keyframes(o_anim_fade_in; {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
});
|
||||
|
||||
.o_anim_fade_in {
|
||||
.animation-name(o_anim_fade_in);
|
||||
}
|
||||
|
||||
.o_animate_keyframes(o_anim_fade_in_down; {
|
||||
0% {
|
||||
opacity: 0;
|
||||
.translate3d(0, -100%, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
.translate3d(0,0,0);
|
||||
}
|
||||
});
|
||||
|
||||
.o_anim_fade_in_down {
|
||||
.animation-name(o_anim_fade_in_down);
|
||||
}
|
||||
|
||||
.o_animate_keyframes(o_anim_fade_in_left; {
|
||||
0% {
|
||||
opacity: 0;
|
||||
.translate3d(-100%, 0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
.translate3d(0,0,0);
|
||||
}
|
||||
});
|
||||
|
||||
.o_anim_fade_in_left {
|
||||
.animation-name(o_anim_fade_in_left);
|
||||
}
|
||||
|
||||
.o_animate_keyframes(o_anim_fade_in_right; {
|
||||
0% {
|
||||
opacity: 0;
|
||||
.translate3d(100%, 0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
.translate3d(0,0,0);
|
||||
}
|
||||
});
|
||||
|
||||
.o_anim_fade_in_right {
|
||||
.animation-name(o_anim_fade_in_right);
|
||||
}
|
||||
|
||||
.o_animate_keyframes(o_anim_fade_in_up; {
|
||||
0% {
|
||||
opacity: 0;
|
||||
.translate3d(0, 100%, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
.translate3d(0,0,0);
|
||||
}
|
||||
});
|
||||
|
||||
.o_anim_fade_in_up {
|
||||
.animation-name(o_anim_fade_in_up);
|
||||
}
|
||||
|
||||
.o_animate_keyframes(o_anim_fade_out; {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
});
|
||||
|
||||
.o_anim_fade_out {
|
||||
.animation-name(o_anim_fade_out);
|
||||
}
|
||||
|
||||
.o_animate_keyframes(o_anim_rotate_in; {
|
||||
0% {
|
||||
.transform-origin(center);
|
||||
.o_animate_transform(rotate3d(0, 0, 1, -200deg));
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
.transform-origin(center);
|
||||
.o_animate_transform(rotate3d(0,0,0,0));
|
||||
opacity: 1;
|
||||
}
|
||||
});
|
||||
|
||||
.o_anim_rotate_in {
|
||||
.animation-name(o_anim_rotate_in);
|
||||
}
|
||||
|
||||
.o_animate_keyframes(o_anim_rotate_in_down_left; {
|
||||
0% {
|
||||
.transform-origin(left bottom);
|
||||
.o_animate_transform(rotate3d(0, 0, 1, -45deg));
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
.transform-origin(left bottom);
|
||||
.o_animate_transform(rotate3d(0,0,0,0));
|
||||
opacity: 1;
|
||||
}
|
||||
});
|
||||
|
||||
.o_anim_rotate_in_down_left {
|
||||
.animation-name(o_anim_rotate_in_down_left);
|
||||
}
|
||||
|
||||
.o_animate_keyframes(o_anim_rotate_in_down_right; {
|
||||
0% {
|
||||
.transform-origin(right bottom);
|
||||
.o_animate_transform(rotate3d(0, 0, 1, 45deg));
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
.transform-origin(right bottom);
|
||||
.o_animate_transform(rotate3d(0,0,0,0));
|
||||
opacity: 1;
|
||||
}
|
||||
});
|
||||
|
||||
.o_anim_rotate_in_down_right {
|
||||
.animation-name(o_anim_rotate_in_down_right);
|
||||
}
|
||||
|
||||
.o_animate_keyframes(o_anim_zoom_in; {
|
||||
0% {
|
||||
opacity: 0;
|
||||
.o_animate_transform(scale3d(.3, .3, .3));
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
});
|
||||
|
||||
.o_anim_zoom_in {
|
||||
.animation-name(o_anim_zoom_in);
|
||||
}
|
||||
|
||||
.o_animate_keyframes(o_anim_zoom_in_down; {
|
||||
0% {
|
||||
opacity: 0;
|
||||
.o_animate_transform(scale3d(.1, .1, .1) translate3d(0, -1000px, 0));
|
||||
.animation-timing-function(cubic-bezier(0.550, 0.055, 0.675, 0.190));
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
.o_animate_transform(scale3d(.475, .475, .475) translate3d(0, 60px, 0));
|
||||
.animation-timing-function(cubic-bezier(0.175, 0.885, 0.320, 1));
|
||||
}
|
||||
});
|
||||
|
||||
.o_anim_zoom_in_down {
|
||||
.animation-name(o_anim_zoom_in_down);
|
||||
}
|
||||
|
||||
.o_animate_keyframes(o_anim_zoom_in_left; {
|
||||
0% {
|
||||
opacity: 0;
|
||||
.o_animate_transform(scale3d(.1, .1, .1) translate3d(-1000px, 0, 0));
|
||||
.animation-timing-function(cubic-bezier(0.550, 0.055, 0.675, 0.190));
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
.o_animate_transform(scale3d(.475, .475, .475) translate3d(10px, 0, 0));
|
||||
.animation-timing-function(cubic-bezier(0.175, 0.885, 0.320, 1));
|
||||
}
|
||||
});
|
||||
|
||||
.o_anim_zoom_in_left {
|
||||
.animation-name(o_anim_zoom_in_left);
|
||||
}
|
||||
|
||||
.o_animate_keyframes(o_anim_zoom_in_right; {
|
||||
0% {
|
||||
opacity: 0;
|
||||
.o_animate_transform(scale3d(.1, .1, .1) translate3d(1000px, 0, 0));
|
||||
.animation-timing-function(cubic-bezier(0.550, 0.055, 0.675, 0.190));
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
.o_animate_transform(scale3d(.475, .475, .475) translate3d(-10px, 0, 0));
|
||||
.animation-timing-function(cubic-bezier(0.175, 0.885, 0.320, 1));
|
||||
}
|
||||
});
|
||||
|
||||
.o_anim_zoom_in_right {
|
||||
.animation-name(o_anim_zoom_in_right);
|
||||
}
|
||||
|
||||
.o_animate_keyframes(o_anim_flash; {
|
||||
0%, 50%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
25%, 75% {
|
||||
opacity: 0;
|
||||
}
|
||||
});
|
||||
|
||||
.o_anim_flash {
|
||||
.animation-name(o_anim_flash);
|
||||
}
|
||||
|
||||
.o_animate_keyframes(o_anim_pulse; {
|
||||
0% {
|
||||
.o_animate_transform(scale3d(1, 1, 1));
|
||||
}
|
||||
50% {
|
||||
.o_animate_transform(scale3d(1.05, 1.05, 1.05));
|
||||
}
|
||||
100% {
|
||||
.o_animate_transform(scale3d(1, 1, 1));
|
||||
}
|
||||
});
|
||||
|
||||
.o_anim_pulse {
|
||||
.animation-name(o_anim_pulse);
|
||||
}
|
||||
|
||||
.o_animate_keyframes(o_anim_shake; {
|
||||
0%, 100% {
|
||||
.translate3d(0, 0, 0);
|
||||
}
|
||||
10%, 30%, 50%, 70%, 90% {
|
||||
.translate3d(-10px, 0, 0);
|
||||
}
|
||||
20%, 40%, 60%, 80% {
|
||||
.translate3d(10px, 0, 0);
|
||||
}
|
||||
});
|
||||
|
||||
.o_anim_shake {
|
||||
.animation-name(o_anim_shake);
|
||||
}
|
||||
|
||||
.o_animate_keyframes(o_anim_tada; {
|
||||
0% {
|
||||
.o_animate_transform(scale3d(1, 1, 1));
|
||||
}
|
||||
10%, 20% {
|
||||
.o_animate_transform(scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg));
|
||||
}
|
||||
30%, 50%, 70%, 90% {
|
||||
.o_animate_transform(scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg));
|
||||
|
||||
}
|
||||
40%, 60%, 80% {
|
||||
.o_animate_transform(scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg));
|
||||
|
||||
}
|
||||
100% {
|
||||
.o_animate_transform(scale3d(1, 1, 1));
|
||||
}
|
||||
});
|
||||
|
||||
.o_anim_tada {
|
||||
.animation-name(o_anim_tada);
|
||||
}
|
||||
|
||||
.o_animate_keyframes(o_anim_flip_in_x; {
|
||||
0% {
|
||||
.perspective(400px);
|
||||
.o_animate_transform(rotate3d(1, 0, 0, 90deg));
|
||||
.transition-timing-function(ease-in);
|
||||
opacity: 0;
|
||||
}
|
||||
40% {
|
||||
.perspective(400px);
|
||||
.o_animate_transform(rotate3d(1, 0, 0, -20deg));
|
||||
.transition-timing-function(ease-in);
|
||||
}
|
||||
60% {
|
||||
.perspective(400px);
|
||||
.o_animate_transform(rotate3d(1, 0, 0, 10deg));
|
||||
opacity: 1;
|
||||
}
|
||||
80% {
|
||||
.perspective(400px);
|
||||
.o_animate_transform(rotate3d(1, 0, 0, -5deg));
|
||||
}
|
||||
100% {
|
||||
.perspective(400px);
|
||||
}
|
||||
});
|
||||
|
||||
.o_anim_flip_in_x {
|
||||
.backface-visibility(visible);
|
||||
.animation-name(o_anim_flip_in_x);
|
||||
}
|
||||
|
||||
.o_animate_keyframes(o_anim_flip_in_y; {
|
||||
0% {
|
||||
.perspective(400px);
|
||||
.o_animate_transform(rotate3d(0, 1, 0, 90deg));
|
||||
.transition-timing-function(ease-in);
|
||||
opacity: 0;
|
||||
}
|
||||
40% {
|
||||
.perspective(400px);
|
||||
.o_animate_transform(rotate3d(0, 1, 0, -20deg));
|
||||
.transition-timing-function(ease-in);
|
||||
}
|
||||
60% {
|
||||
.perspective(400px);
|
||||
.o_animate_transform(rotate3d(0, 1, 0, 10deg));
|
||||
opacity: 1;
|
||||
}
|
||||
80% {
|
||||
.perspective(400px);
|
||||
.o_animate_transform(rotate3d(0, 1, 0, -5deg));
|
||||
}
|
||||
100% {
|
||||
.perspective(400px);
|
||||
}
|
||||
});
|
||||
|
||||
.o_anim_flip_in_y {
|
||||
.backface-visibility(visible);
|
||||
.animation-name(o_anim_flip_in_y);
|
||||
}
|
||||
@@ -0,0 +1,176 @@
|
||||
/*
|
||||
========================================
|
||||
==== website builder menu integration
|
||||
========================================
|
||||
*/
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate > a,
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate_duration > a,
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate_delay > a,
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate_options > a {
|
||||
padding-left: 30px;
|
||||
}
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate > a:before,
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate_duration > a:before,
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate_delay > a:before,
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate_options > a:before {
|
||||
content: " ";
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 17px;
|
||||
top: 5px;
|
||||
background-image: url("../images/icon.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
}
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate li.active > a,
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate_duration li.active > a,
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate_delay li.active > a,
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate_options li.active > a {
|
||||
color: #555;
|
||||
background-color: #EFEFEF;
|
||||
}
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate li.active > a:after,
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate_duration li.active > a:after,
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate_delay li.active > a:after,
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate_options li.active > a:after {
|
||||
font-family: FontAwesome;
|
||||
content: "\f00c";
|
||||
color: #16A085;
|
||||
float: right;
|
||||
text-shadow: -1px 0px 0px #ffffff;
|
||||
}
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate_duration > ul,
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate_delay > ul {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate_duration span.timeline,
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate_delay span.timeline {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
background-color: #f7f7f7;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
}
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate_duration span.timeline > span,
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate_delay span.timeline > span {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
height: 5px;
|
||||
}
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate_duration span.timeline span[simulate="duration"],
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate_delay span.timeline span[simulate="duration"] {
|
||||
position: absolute;
|
||||
float: left;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: #21b799;
|
||||
width: 0%;
|
||||
-webkit-animation-name: o_animate_timeline_duration;
|
||||
animation-name: o_animate_timeline_duration;
|
||||
-webkit-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate_duration span.timeline span[simulate="delay"],
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate_delay span.timeline span[simulate="delay"] {
|
||||
position: absolute;
|
||||
float: left;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: #a4498c;
|
||||
width: 0%;
|
||||
-webkit-animation-name: o_animate_timeline_delay;
|
||||
animation-name: o_animate_timeline_delay;
|
||||
-webkit-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate_duration > a:before {
|
||||
background-image: url("../images/time.png");
|
||||
}
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate_delay > a:before {
|
||||
background-image: url("../images/delay.png");
|
||||
}
|
||||
#oe_manipulators .dropdown-menu li.snippet-option-o_animate_options > a:before {
|
||||
background-image: url("../images/opt.png");
|
||||
}
|
||||
/*
|
||||
=====================================
|
||||
======== Utility classes
|
||||
=====================================
|
||||
*/
|
||||
.o_animate {
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
text-rendering: geometricPrecision;
|
||||
visibility: hidden;
|
||||
}
|
||||
.o_animate_preview {
|
||||
visibility: visible;
|
||||
}
|
||||
/*
|
||||
=====================================
|
||||
======== Durations
|
||||
=====================================
|
||||
*/
|
||||
.o_anim_dur500 {
|
||||
-webkit-animation-duration: 500ms;
|
||||
animation-duration: 500ms;
|
||||
}
|
||||
.o_anim_dur1500 {
|
||||
-webkit-animation-duration: 1500ms;
|
||||
animation-duration: 1500ms;
|
||||
}
|
||||
.o_anim_dur2000 {
|
||||
-webkit-animation-duration: 2000ms;
|
||||
animation-duration: 2000ms;
|
||||
}
|
||||
.o_anim_dur2500 {
|
||||
-webkit-animation-duration: 2500ms;
|
||||
animation-duration: 2500ms;
|
||||
}
|
||||
.o_anim_dur3000 {
|
||||
-webkit-animation-duration: 3000ms;
|
||||
animation-duration: 3000ms;
|
||||
}
|
||||
/*
|
||||
=====================================
|
||||
======== Delays
|
||||
=====================================
|
||||
*/
|
||||
.o_anim_del500 {
|
||||
-webkit-animation-delay: 500ms;
|
||||
animation-delay: 500ms;
|
||||
}
|
||||
.o_anim_del1000 {
|
||||
-webkit-animation-delay: 1000ms;
|
||||
animation-delay: 1000ms;
|
||||
}
|
||||
.o_anim_del1500 {
|
||||
-webkit-animation-delay: 1500ms;
|
||||
animation-delay: 1500ms;
|
||||
}
|
||||
.o_anim_del2000 {
|
||||
-webkit-animation-delay: 2000ms;
|
||||
animation-delay: 2000ms;
|
||||
}
|
||||
.o_anim_del2500 {
|
||||
-webkit-animation-delay: 2500ms;
|
||||
animation-delay: 2500ms;
|
||||
}
|
||||
@@ -0,0 +1,206 @@
|
||||
/*
|
||||
========================================
|
||||
==== website builder menu integration
|
||||
========================================
|
||||
*/
|
||||
|
||||
// variables
|
||||
@o_animate-timeline-bg-color : #F7F7F7;
|
||||
@o_animate-timeline-border-bottom : 1px solid #EAEAEA;
|
||||
@o_animate-timeline-height : 5px;
|
||||
|
||||
@o_animate-timeline-duration-color : #21b799;
|
||||
@o_animate-timeline-delay-color : #A4498C;
|
||||
|
||||
|
||||
// default style
|
||||
#oe_manipulators .dropdown-menu {
|
||||
li.snippet-option-o_animate,
|
||||
li.snippet-option-o_animate_duration,
|
||||
li.snippet-option-o_animate_delay,
|
||||
li.snippet-option-o_animate_options{
|
||||
> a {
|
||||
padding-left: 30px;
|
||||
&:before {
|
||||
content:" ";
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 17px;
|
||||
top: 5px;
|
||||
background-image: url("../images/icon.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
li.active {
|
||||
> a{
|
||||
color: #555;
|
||||
background-color: #EFEFEF;
|
||||
}
|
||||
> a:after {
|
||||
font-family: FontAwesome;
|
||||
content: "\f00c";
|
||||
color: #16A085;
|
||||
float: right;
|
||||
text-shadow: -1px 0px 0px #FFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
li.snippet-option-o_animate_duration,
|
||||
li.snippet-option-o_animate_delay, {
|
||||
> ul {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
span.timeline{
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: @o_animate-timeline-height;
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
background-color: @o_animate-timeline-bg-color;
|
||||
border-bottom: @o_animate-timeline-border-bottom;
|
||||
> span {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
height: @o_animate-timeline-height;
|
||||
}
|
||||
span[simulate="duration"]{
|
||||
position: absolute;
|
||||
float: left;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: @o_animate-timeline-duration-color;
|
||||
width: 0%;
|
||||
.animation-name(o_animate_timeline_duration);
|
||||
.animation-timing-function(linear);
|
||||
.animation-fill-mode(forwards);
|
||||
}
|
||||
span[simulate="delay"]{
|
||||
position: absolute;
|
||||
float: left;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: @o_animate-timeline-delay-color;
|
||||
width: 0%;
|
||||
.animation-name(o_animate_timeline_delay);
|
||||
.animation-timing-function(linear);
|
||||
.animation-fill-mode(forwards);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// li.snippet-option-o_animate_delay, {
|
||||
// span.timeline{
|
||||
// height: @o_animate-timeline-delay-height;
|
||||
// background-color: @o_animate-timeline-delay-bg-color;
|
||||
// border-bottom: @o_animate-timeline-delay-border-bottom;
|
||||
// span{
|
||||
// background: @o_animate-timeline-delay-span-color;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
li.snippet-option-o_animate_duration > a:before{
|
||||
background-image: url("../images/time.png");
|
||||
}
|
||||
li.snippet-option-o_animate_delay > a:before{
|
||||
background-image: url("../images/delay.png");
|
||||
}
|
||||
li.snippet-option-o_animate_options > a:before{
|
||||
background-image: url("../images/opt.png");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
=====================================
|
||||
======== Utility classes
|
||||
=====================================
|
||||
*/
|
||||
|
||||
.o_animate {
|
||||
.animation-duration(1s);
|
||||
.animation-fill-mode(both);
|
||||
|
||||
// force GPU acceleration
|
||||
.translate3d(0,0,0);
|
||||
|
||||
// avoid flickering
|
||||
.backface-visibility(hidden);
|
||||
|
||||
// take care of animated titles
|
||||
text-rendering: geometricPrecision;
|
||||
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.o_animate_preview {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
=====================================
|
||||
======== Durations
|
||||
=====================================
|
||||
*/
|
||||
|
||||
.o_anim_dur500{
|
||||
.animation-duration(500ms);
|
||||
}
|
||||
|
||||
// DEFAULT 1000ms;
|
||||
|
||||
|
||||
.o_anim_dur1500{
|
||||
.animation-duration(1500ms);
|
||||
}
|
||||
|
||||
.o_anim_dur2000{
|
||||
.animation-duration(2000ms);
|
||||
}
|
||||
|
||||
.o_anim_dur2500{
|
||||
.animation-duration(2500ms);
|
||||
}
|
||||
|
||||
.o_anim_dur3000{
|
||||
.animation-duration(3000ms);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
=====================================
|
||||
======== Delays
|
||||
=====================================
|
||||
*/
|
||||
|
||||
.o_anim_del500{
|
||||
.animation-delay(500ms);
|
||||
}
|
||||
|
||||
.o_anim_del1000{
|
||||
.animation-delay(1000ms);
|
||||
}
|
||||
|
||||
.o_anim_del1500{
|
||||
.animation-delay(1500ms);
|
||||
}
|
||||
|
||||
.o_anim_del2000{
|
||||
.animation-delay(2000ms);
|
||||
}
|
||||
|
||||
.o_anim_del2500{
|
||||
.animation-delay(2500ms);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user