blob: 0cb738d8327786b9a942aa73e0c833941d0ed02b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
|
$valo-anim-keyframes-included: false !default;
@if $v-animations-enabled and $valo-anim-keyframes-included == false{
@include keyframes(valo-animate-in-fade) {
0% {
opacity: 0;
}
}
@include keyframes(valo-animate-out-fade) {
100% {
opacity: 0;
}
}
@include keyframes(valo-animate-in-slide-down) {
0% {
@include transform( translateY(-100%) );
}
}
@include keyframes(valo-animate-in-slide-up) {
0% {
@include transform( translateY(100%) );
}
}
@include keyframes(valo-animate-in-slide-left) {
0% {
@include transform( translateX(100%) );
}
}
@include keyframes(valo-animate-in-slide-right) {
0% {
@include transform( translateX(-100%) );
}
}
@include keyframes(valo-animate-out-slide-down) {
100% {
@include transform( translateY(100%) );
}
}
@include keyframes(valo-animate-out-slide-up) {
100% {
@include transform( translateY(-100%) );
}
}
@include keyframes(valo-animate-out-slide-left) {
100% {
@include transform( translateX(-100%) );
}
}
@include keyframes(valo-animate-out-slide-right) {
100% {
@include transform( translateX(100%) );
}
}
@include keyframes(valo-overlay-animate-in) {
0% {
@include transform(translatey(-4px));
opacity: 0;
}
}
@include keyframes(valo-animate-out-slide-down-fade) {
100% {
opacity: 0;
@include transform(translatey(30%));
}
}
$valo-anim-keyframes-included: true;
}
/**
* Add animate-in-fade animation to the targeted elements.
*
* @group animation
*
* @param {time} $duration (180ms) - the duration of the fade
* @param {time} $delay (null) - the delay of the fade
*/
@mixin valo-animate-in-fade ($duration: 180ms, $delay: null){
@include animation(valo-animate-in-fade $duration $delay);
}
/**
* Add animate-out-fade animation to the targeted elements.
*
* @group animation
*
* @param {time} $duration (180ms) - the duration of the fade
* @param {time} $delay (null) - the delay of the fade
*/
@mixin valo-animate-out-fade ($duration: 180ms, $delay: null){
@include animation(valo-animate-out-fade $duration $delay);
}
/**
* Add animate-in-slide-down animation to the targeted elements.
*
* @group animation
*
* @param {time} $duration (400ms) - the duration of the slide
* @param {time} $delay (null) - the delay of the slide
*/
@mixin valo-animate-in-slide-down ($duration: 400ms, $delay: null){
@include animation(valo-animate-in-slide-down $duration $delay);
}
/**
* Add animate-in-slide-up animation to the targeted elements.
*
* @group animation
*
* @param {time} $duration (400ms) - the duration of the slide
* @param {time} $delay (null) - the delay of the slide
*/
@mixin valo-animate-in-slide-up ($duration: 400ms, $delay: null){
@include animation(valo-animate-in-slide-up $duration $delay);
}
/**
* Add animate-in-slide-left animation to the targeted elements.
*
* @group animation
*
* @param {time} $duration (400ms) - the duration of the slide
* @param {time} $delay (null) - the delay of the slide
*/
@mixin valo-animate-in-slide-left ($duration: 400ms, $delay: null){
@include animation(valo-animate-in-slide-left $duration $delay);
}
/**
* Add animate-in-slide-right animation to the targeted elements.
*
* @group animation
*
* @param {time} $duration (400ms) - the duration of the slide
* @param {time} $delay (null) - the delay of the slide
*/
@mixin valo-animate-in-slide-right ($duration: 400ms, $delay: null){
@include animation(valo-animate-in-slide-right $duration $delay);
}
|
