|
|
|
|
|
|
|
|
@include transform(translatey(30%)); |
|
|
@include transform(translatey(30%)); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$valo-anim-keyframes-included: true; |
|
|
$valo-anim-keyframes-included: true; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
* @param {time} $delay (null) - the delay of the fade |
|
|
* @param {time} $delay (null) - the delay of the fade |
|
|
*/ |
|
|
*/ |
|
|
@mixin valo-animate-in-fade ($duration: 180ms, $delay: null){ |
|
|
@mixin valo-animate-in-fade ($duration: 180ms, $delay: null){ |
|
|
@include animation(valo-animate-in-fade $duration $delay); |
|
|
|
|
|
|
|
|
@include animation(valo-animate-in-fade $duration $delay backwards); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
|
|
|
|
|
|
* @param {time} $delay (null) - the delay of the fade |
|
|
* @param {time} $delay (null) - the delay of the fade |
|
|
*/ |
|
|
*/ |
|
|
@mixin valo-animate-out-fade ($duration: 180ms, $delay: null){ |
|
|
@mixin valo-animate-out-fade ($duration: 180ms, $delay: null){ |
|
|
@include animation(valo-animate-out-fade $duration $delay); |
|
|
|
|
|
|
|
|
@include animation(valo-animate-out-fade $duration $delay backwards); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
|
|
|
|
|
|
* @param {time} $delay (null) - the delay of the slide |
|
|
* @param {time} $delay (null) - the delay of the slide |
|
|
*/ |
|
|
*/ |
|
|
@mixin valo-animate-in-slide-down ($duration: 400ms, $delay: null){ |
|
|
@mixin valo-animate-in-slide-down ($duration: 400ms, $delay: null){ |
|
|
@include animation(valo-animate-in-slide-down $duration $delay); |
|
|
|
|
|
|
|
|
@include animation(valo-animate-in-slide-down $duration $delay backwards); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
|
|
|
|
|
|
* @param {time} $delay (null) - the delay of the slide |
|
|
* @param {time} $delay (null) - the delay of the slide |
|
|
*/ |
|
|
*/ |
|
|
@mixin valo-animate-in-slide-up ($duration: 400ms, $delay: null){ |
|
|
@mixin valo-animate-in-slide-up ($duration: 400ms, $delay: null){ |
|
|
@include animation(valo-animate-in-slide-up $duration $delay); |
|
|
|
|
|
|
|
|
@include animation(valo-animate-in-slide-up $duration $delay backwards); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
|
|
|
|
|
|
* @param {time} $delay (null) - the delay of the slide |
|
|
* @param {time} $delay (null) - the delay of the slide |
|
|
*/ |
|
|
*/ |
|
|
@mixin valo-animate-in-slide-left ($duration: 400ms, $delay: null){ |
|
|
@mixin valo-animate-in-slide-left ($duration: 400ms, $delay: null){ |
|
|
@include animation(valo-animate-in-slide-left $duration $delay); |
|
|
|
|
|
|
|
|
@include animation(valo-animate-in-slide-left $duration $delay backwards); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
|
|
|
|
|
|
* @param {time} $delay (null) - the delay of the slide |
|
|
* @param {time} $delay (null) - the delay of the slide |
|
|
*/ |
|
|
*/ |
|
|
@mixin valo-animate-in-slide-right ($duration: 400ms, $delay: null){ |
|
|
@mixin valo-animate-in-slide-right ($duration: 400ms, $delay: null){ |
|
|
@include animation(valo-animate-in-slide-right $duration $delay); |
|
|
|
|
|
|
|
|
@include animation(valo-animate-in-slide-right $duration $delay backwards); |
|
|
} |
|
|
} |