rapido-css 0.1.1 → 0.1.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (46) hide show
  1. data/stylesheets/_default-styles.scss +352 -352
  2. data/stylesheets/_functions.scss +77 -50
  3. data/stylesheets/_susy.scss +15 -12
  4. data/stylesheets/components/_alerts.scss +21 -21
  5. data/stylesheets/components/_breadcrumbs.scss +15 -15
  6. data/stylesheets/components/_button-groups.scss +51 -53
  7. data/stylesheets/components/_buttons.scss +94 -97
  8. data/stylesheets/components/_captions.scss +45 -45
  9. data/stylesheets/components/_close.scss +27 -27
  10. data/stylesheets/components/_dropdowns.scss +121 -121
  11. data/stylesheets/components/_forms.scss +246 -248
  12. data/stylesheets/components/_grids.scss +35 -35
  13. data/stylesheets/components/_labels.scss +38 -38
  14. data/stylesheets/components/_modals.scss +242 -248
  15. data/stylesheets/components/_navs.scss +86 -91
  16. data/stylesheets/components/_pager.scss +53 -53
  17. data/stylesheets/components/_pagination.scss +83 -85
  18. data/stylesheets/components/_responsive-navs.scss +84 -84
  19. data/stylesheets/components/_sliders.scss +54 -58
  20. data/stylesheets/components/_tables.scss +69 -74
  21. data/stylesheets/components/_tabs.scss +54 -54
  22. data/stylesheets/components/_type.scss +134 -140
  23. data/stylesheets/{_rapido.scss → rapido.scss} +0 -8
  24. data/stylesheets/settings/_base.scss +23 -23
  25. data/stylesheets/settings/_colors.scss +13 -13
  26. data/stylesheets/settings/_components.scss +43 -42
  27. data/stylesheets/settings/_dimensions.scss +91 -91
  28. data/stylesheets/settings/_effects.scss +28 -14
  29. data/stylesheets/susy/{_susy_background.scss → _background.scss} +0 -0
  30. data/stylesheets/susy/{_susy_functions.scss → _functions.scss} +0 -0
  31. data/stylesheets/susy/{_susy_grid.scss → _grid.scss} +0 -0
  32. data/stylesheets/susy/{_susy_isolation.scss → _isolation.scss} +1 -0
  33. data/stylesheets/susy/{_susy_margin.scss → _margin.scss} +0 -0
  34. data/stylesheets/susy/{_susy_media.scss → _media.scss} +0 -0
  35. data/stylesheets/susy/{_susy_padding.scss → _padding.scss} +0 -0
  36. data/stylesheets/susy/{_susy_settings.scss → _settings.scss} +0 -0
  37. data/stylesheets/susy/{_susy_support.scss → _support.scss} +0 -0
  38. data/stylesheets/susy/{_susy_units.scss → _units.scss} +0 -0
  39. data/stylesheets/utilities/_animations.scss +638 -597
  40. data/stylesheets/utilities/_debug.scss +43 -43
  41. data/stylesheets/utilities/_helper-classes.scss +70 -54
  42. data/stylesheets/utilities/_icon-fonts.scss +90 -90
  43. data/stylesheets/utilities/_mixins.scss +390 -357
  44. metadata +20 -17
  45. checksums.yaml +0 -15
  46. data/stylesheets/config.rb +0 -8
data/stylesheets/utilities/_animations.scss CHANGED
@@ -1,701 +1,742 @@
1
- /* =================================================================================================================
1
+ /*
2
2
 
3
3
  Animations
4
4
 
5
- All the animations in [theCSSguru](https://twitter.com/theCSSguru)'s [Animate mixin](http://thecssguru.freeiz.com/animate/) are available with the same mixin.
5
+ All the animations in [theCSSguru](https://twitter.com/theCSSguru)'s [Animate mixin](http://thecssguru.freeiz.com/animate/) are available with the same mixin:
6
6
 
7
- #### Use
7
+ * **Attention seekers:** flash, bounce, shake, tada
8
+ * **Fading entrances:** , fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight, fadeInUpBig, fadeInDownBig, fadeInLeftBig, fadeInRightBig
9
+ * **Fading exits**: fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, fadeOutUpBig, fadeOutDownBig, fadeOutLeftBig, fadeOutRightBig
10
+ * **Bouncing entrances:** bounceIn, bounceInDown, bounceInUp, bounceInLeft, bounceInRight
11
+ * **Bouncing exits:** bounceOut, bounceOutDown, bounceOutUp, bounceOutLeft, bounceOutRight
12
+ * **Rotating entrances:** rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight
13
+ * **Rotating exits:** rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight
8
14
 
9
- By default are only available `fadeIn` and `fadeOut`. To enable more animations add them to the `$animations` variable in `_effects.scss`.
15
+ Styleguide 20
10
16
 
11
- #### Mixin
17
+ */
12
18
 
13
- @include animate(fadeIn);
19
+ // Disable all animations by default
14
20
 
15
- #### Silent classes
21
+ $fadeIn: false !default;
22
+ $fadeOut: false !default;
23
+ $fadeInUp: false !default;
24
+ $fadeOutUp: false !default;
25
+ $fadeInDown: false !default;
26
+ $fadeOutDown: false !default;
27
+ $fadeInRight: false !default;
28
+ $fadeOutLeft: false !default;
29
+ $fadeInLeft: false !default;
30
+ $fadeOutRight: false !default;
31
+ $fadeInUpBig: false !default;
32
+ $fadeOutUpBig: false !default;
33
+ $fadeInDownBig: false !default;
34
+ $fadeOutDownBig: false !default;
35
+ $fadeInRightBig: false !default;
36
+ $fadeOutLeftBig: false !default;
37
+ $fadeInLeftBig: false !default;
38
+ $fadeOutRightBig: false !default;
39
+ $bounceIn: false !default;
40
+ $bounceInDown: false !default;
41
+ $bounceInUp: false !default;
42
+ $bounceInRight: false !default;
43
+ $bounceInLeft: false !default;
44
+ $bounceOut: false !default;
45
+ $bounceOutUp: false !default;
46
+ $bounceOutDown: false !default;
47
+ $bounceOutLeft: false !default;
48
+ $bounceOutRight: false !default;
49
+ $flash: false !default;
50
+ $bounce: false !default;
51
+ $shake: false !default;
52
+ $rotateInDownLeft: false !default;
53
+ $rotateInUpLeft: false !default;
54
+ $rotateInUpRight: false !default;
55
+ $rotateInDownRight: false !default;
56
+ $rotateOutDownLeft: false !default;
57
+ $rotateOutUpLeft: false !default;
58
+ $rotateOutDownRight: false !default;
59
+ $rotateOutUpRight: false !default;
60
+ $rotateIn: false !default;
61
+ $rotateOut: false !default;
62
+ $tada: false !default;
16
63
 
17
- There are also available silent classes for all enabled animations to use with `@extend`
64
+ // Enable animation from the settings
18
65
 
19
- @extend %fadeIn;
66
+ @each $animation in $animations {
67
+ @if $animation == 'fadeIn' {$fadeIn: true;}
68
+ @if $animation == 'fadeOut' {$fadeOut: true;}
69
+ @if $animation == 'fadeInUp' {$fadeInUp: true;}
70
+ @if $animation == 'fadeOutUp' {$fadeOutUp: true;}
71
+ @if $animation == 'fadeInDown' {$fadeInDown: true;}
72
+ @if $animation == 'fadeOutDown' {$fadeOutDown: true;}
73
+ @if $animation == 'fadeInRight' {$fadeInRight: true;}
74
+ @if $animation == 'fadeOutLeft' {$fadeOutLeft: true;}
75
+ @if $animation == 'fadeInLeft' {$fadeInLeft: true;}
76
+ @if $animation == 'fadeOutRight' {$fadeOutRight: true;}
77
+ @if $animation == 'fadeInUpBig' {$fadeInUpBig: true;}
78
+ @if $animation == 'fadeOutUpBig' {$fadeOutUpBig: true;}
79
+ @if $animation == 'fadeInDownBig' {$fadeInDownBig: true;}
80
+ @if $animation == 'fadeOutDownBig' {$fadeOutDownBig: true;}
81
+ @if $animation == 'fadeInRightBig' {$fadeInRightBig: true;}
82
+ @if $animation == 'fadeOutLeftBig' {$fadeOutLeftBig: true;}
83
+ @if $animation == 'fadeInLeftBig' {$fadeInLeftBig: true;}
84
+ @if $animation == 'fadeOutRightBig' {$fadeOutRightBig: true;}
85
+ @if $animation == 'bounceIn' {$bounceIn: true;}
86
+ @if $animation == 'bounceInDown' {$bounceInDown: true;}
87
+ @if $animation == 'bounceInUp' {$bounceInUp: true;}
88
+ @if $animation == 'bounceInRight' {$bounceInRight: true;}
89
+ @if $animation == 'bounceInLeft' {$bounceInLeft: true;}
90
+ @if $animation == 'bounceOut' {$bounceOut: true;}
91
+ @if $animation == 'bounceOutUp' {$bounceOutUp: true;}
92
+ @if $animation == 'bounceOutDown' {$bounceOutDown: true;}
93
+ @if $animation == 'bounceOutLeft' {$bounceOutLeft: true;}
94
+ @if $animation == 'bounceOutRight' {$bounceOutRight: true;}
95
+ @if $animation == 'flash' {$flash: true;}
96
+ @if $animation == 'bounce' {$bounce: true;}
97
+ @if $animation == 'shake' {$shake: true;}
98
+ @if $animation == 'rotateInDownLeft' {$rotateInDownLeft: true;}
99
+ @if $animation == 'rotateInUpLeft' {$rotateInUpLeft: true;}
100
+ @if $animation == 'rotateInUpRight' {$rotateInUpRight: true;}
101
+ @if $animation == 'rotateInDownRight' {$rotateInDownRight: true;}
102
+ @if $animation == 'rotateOutDownLeft' {$rotateOutDownLeft: true;}
103
+ @if $animation == 'rotateOutUpLeft' {$rotateOutUpLeft: true;}
104
+ @if $animation == 'rotateOutDownRight' {$rotateOutDownRight: true;}
105
+ @if $animation == 'rotateOutUpRight' {$rotateOutUpRight: true;}
106
+ @if $animation == 'rotateIn' {$rotateIn: true;}
107
+ @if $animation == 'rotateOut' {$rotateOut: true;}
108
+ @if $animation == 'tada' {$tada: true;}
109
+ }
20
110
 
21
- Styleguide 20.
22
111
 
23
- ================================================================================================================= */
112
+ /*
24
113
 
25
- // Disable all animations by default
26
- // --------------------------------------------------------------------------------------------------------------------
27
-
28
- $fadeIn: false !default;
29
- $fadeOut: false !default;
30
- $fadeInUp: false !default;
31
- $fadeOutUp: false !default;
32
- $fadeInDown: false !default;
33
- $fadeOutDown: false !default;
34
- $fadeInRight: false !default;
35
- $fadeOutLeft: false !default;
36
- $fadeInLeft: false !default;
37
- $fadeOutRight: false !default;
38
- $fadeInUpBig: false !default;
39
- $fadeOutUpBig: false !default;
40
- $fadeInDownBig: false !default;
41
- $fadeOutDownBig: false !default;
42
- $fadeInRightBig: false !default;
43
- $fadeOutLeftBig: false !default;
44
- $fadeInLeftBig: false !default;
45
- $fadeOutRightBig: false !default;
46
- $bounceIn: false !default;
47
- $bounceInDown: false !default;
48
- $bounceInUp: false !default;
49
- $bounceInRight: false !default;
50
- $bounceInLeft: false !default;
51
- $bounceOut: false !default;
52
- $bounceOutUp: false !default;
53
- $bounceOutDown: false !default;
54
- $bounceOutLeft: false !default;
55
- $bounceOutRight: false !default;
56
- $flash: false !default;
57
- $bounce: false !default;
58
- $shake: false !default;
59
- $rotateInDownLeft: false !default;
60
- $rotateInUpLeft: false !default;
61
- $rotateInUpRight: false !default;
62
- $rotateInDownRight: false !default;
63
- $rotateOutDownLeft: false !default;
64
- $rotateOutUpLeft: false !default;
65
- $rotateOutDownRight: false !default;
66
- $rotateOutUpRight: false !default;
67
- $rotateIn: false !default;
68
- $rotateOut: false !default;
69
- $tada: false !default;
114
+ Classes for animations
70
115
 
71
- // Enable animation from the settings
72
- // --------------------------------------------------------------------------------------------------------------------
116
+ There are available classes for all enabled animations to use with `@extend`.
117
+
118
+ Example:
119
+
120
+ @extend %fadeIn;
121
+
122
+ Styleguide 20.3
123
+
124
+ */
125
+
126
+ @if $animations-classes {
127
+ @each $animation in $animations {
128
+ .#{$animation} {
129
+ @include animate($animation);
130
+ }
131
+ }
132
+ }
133
+
134
+ /*
135
+
136
+ Classes for delays
137
+
138
+ Like classes for the animations are also available 8 classes for delays.
139
+ Available delays: .delay-25, .delay-50, .delay-75, .delay-100, .delay-125, .delay-150, .delay-175, .delay-200.
140
+
141
+ Example:
142
+
143
+ @extend .delay-50;
144
+
145
+ Styleguide 20.4
146
+
147
+ */
73
148
 
74
- @each $animation in $animations {
75
- @if $animation == 'fadeIn' {$fadeIn: true;}
76
- @if $animation == 'fadeOut' {$fadeOut: true;}
77
- @if $animation == 'fadeInUp' {$fadeInUp: true;}
78
- @if $animation == 'fadeOutUp' {$fadeOutUp: true;}
79
- @if $animation == 'fadeInDown' {$fadeInDown: true;}
80
- @if $animation == 'fadeOutDown' {$fadeOutDown: true;}
81
- @if $animation == 'fadeInRight' {$fadeInRight: true;}
82
- @if $animation == 'fadeOutLeft' {$fadeOutLeft: true;}
83
- @if $animation == 'fadeInLeft' {$fadeInLeft: true;}
84
- @if $animation == 'fadeOutRight' {$fadeOutRight: true;}
85
- @if $animation == 'fadeInUpBig' {$fadeInUpBig: true;}
86
- @if $animation == 'fadeOutUpBig' {$fadeOutUpBig: true;}
87
- @if $animation == 'fadeInDownBig' {$fadeInDownBig: true;}
88
- @if $animation == 'fadeOutDownBig' {$fadeOutDownBig: true;}
89
- @if $animation == 'fadeInRightBig' {$fadeInRightBig: true;}
90
- @if $animation == 'fadeOutLeftBig' {$fadeOutLeftBig: true;}
91
- @if $animation == 'fadeInLeftBig' {$fadeInLeftBig: true;}
92
- @if $animation == 'fadeOutRightBig' {$fadeOutRightBig: true;}
93
- @if $animation == 'bounceIn' {$bounceIn: true;}
94
- @if $animation == 'bounceInDown' {$bounceInDown: true;}
95
- @if $animation == 'bounceInUp' {$bounceInUp: true;}
96
- @if $animation == 'bounceInRight' {$bounceInRight: true;}
97
- @if $animation == 'bounceInLeft' {$bounceInLeft: true;}
98
- @if $animation == 'bounceOut' {$bounceOut: true;}
99
- @if $animation == 'bounceOutUp' {$bounceOutUp: true;}
100
- @if $animation == 'bounceOutDown' {$bounceOutDown: true;}
101
- @if $animation == 'bounceOutLeft' {$bounceOutLeft: true;}
102
- @if $animation == 'bounceOutRight' {$bounceOutRight: true;}
103
- @if $animation == 'flash' {$flash: true;}
104
- @if $animation == 'bounce' {$bounce: true;}
105
- @if $animation == 'shake' {$shake: true;}
106
- @if $animation == 'rotateInDownLeft' {$rotateInDownLeft: true;}
107
- @if $animation == 'rotateInUpLeft' {$rotateInUpLeft: true;}
108
- @if $animation == 'rotateInUpRight' {$rotateInUpRight: true;}
109
- @if $animation == 'rotateInDownRight' {$rotateInDownRight: true;}
110
- @if $animation == 'rotateOutDownLeft' {$rotateOutDownLeft: true;}
111
- @if $animation == 'rotateOutUpLeft' {$rotateOutUpLeft: true;}
112
- @if $animation == 'rotateOutDownRight' {$rotateOutDownRight: true;}
113
- @if $animation == 'rotateOutUpRight' {$rotateOutUpRight: true;}
114
- @if $animation == 'rotateIn' {$rotateIn: true;}
115
- @if $animation == 'rotateOut' {$rotateOut: true;}
116
- @if $animation == 'tada' {$tada: true;}
117
- }
118
-
119
-
120
-
121
- // Animate Mixin Plugin;
122
- // --------------------------------------------------------------------------------------------------------------------
123
-
124
- @mixin animate($name, $duration: $animations-duration, $delay: $animations-delay, $function: $animations-function, $mode: $animations-mode) {
125
- @include experimental(animation, $name $duration $delay $function $mode);
126
- }
127
-
128
- // Classes that can be used with @extend;
129
149
  @if $animations-classes {
130
- @each $animation in $animations {
131
- %#{$animation} {
132
- @include animate($animation);
133
- }
134
- }
150
+ $delays: 0.25s, 0.50s, 0.75s, 1.00s, 1.25s, 1.50s, 1.75s, 2.00s;
151
+ @each $delay in $delays {
152
+ $delay-stripped: "";
153
+ @if($delay == 0.25s) { $delay-stripped: 025; }
154
+ @if($delay == 0.50s) { $delay-stripped: 050; }
155
+ @if($delay == 0.75s) { $delay-stripped: 075; }
156
+ @if($delay == 1.00s) { $delay-stripped: 100; }
157
+ @if($delay == 1.25s) { $delay-stripped: 125; }
158
+ @if($delay == 1.50s) { $delay-stripped: 150; }
159
+ @if($delay == 1.75s) { $delay-stripped: 175; }
160
+ @if($delay == 2.00s) { $delay-stripped: 200; }
161
+ .delay-#{$delay-stripped} {
162
+ @include experimental(animation-delay, $delay);
163
+ }
164
+ }
135
165
  }
136
166
 
167
+
168
+ /*
169
+
170
+ Animation mixin
171
+
172
+ Also available is an "animate" mixin, for more information see the Mixins section.
173
+
174
+ Styleguide 20.5
175
+
176
+ */
177
+
178
+
137
179
  // Keyframes
138
- // --------------------------------------------------------------------------------------------------------------------
139
180
 
140
181
  @if $fadeIn == true {
141
- @include keyframes(fadeIn) {
142
- 0% { opacity: 0; }
143
- 100% { opacity: 1; }
144
- }
182
+ @include keyframes(fadeIn) {
183
+ 0% { opacity: 0; }
184
+ 100% { opacity: 1; }
185
+ }
145
186
  }
146
187
  @if $fadeOut == true {
147
- @include keyframes(fadeOut) {
148
- 0% { opacity: 1; }
149
- 100% { opacity: 0; }
150
- }
188
+ @include keyframes(fadeOut) {
189
+ 0% { opacity: 1; }
190
+ 100% { opacity: 0; }
191
+ }
151
192
  }
152
193
  @if $fadeInUp == true {
153
- @include keyframes(fadeInUp) {
154
- 0% {
155
- @include transform(translateY(20px));
156
- opacity: 0;
157
- }
158
- 100% {
159
- @include transform(translateY(0));
160
- opacity: 1;
161
- }
162
- }
194
+ @include keyframes(fadeInUp) {
195
+ 0% {
196
+ @include transform(translateY(20px));
197
+ opacity: 0;
198
+ }
199
+ 100% {
200
+ @include transform(translateY(0));
201
+ opacity: 1;
202
+ }
203
+ }
163
204
  }
164
205
  @if $fadeOutUp == true {
165
- @include keyframes(fadeOutUp) {
166
- 0% {
167
- @include transform(translateY(0));
168
- opacity: 1;
169
- }
170
- 100% {
171
- @include transform(translateY(-20px));
172
- opacity: 0;
173
- }
174
- }
206
+ @include keyframes(fadeOutUp) {
207
+ 0% {
208
+ @include transform(translateY(0));
209
+ opacity: 1;
210
+ }
211
+ 100% {
212
+ @include transform(translateY(-20px));
213
+ opacity: 0;
214
+ }
215
+ }
175
216
  }
176
217
  @if $fadeInDown == true {
177
- @include keyframes(fadeInDown) {
178
- 0% {
179
- @include transform(translateY(-20px));
180
- opacity: 0;
181
- }
182
- 100% {
183
- @include transform(translateY(0));
184
- opacity: 1;
185
- }
186
- }
218
+ @include keyframes(fadeInDown) {
219
+ 0% {
220
+ @include transform(translateY(-20px));
221
+ opacity: 0;
222
+ }
223
+ 100% {
224
+ @include transform(translateY(0));
225
+ opacity: 1;
226
+ }
227
+ }
187
228
  }
188
229
  @if $fadeOutDown == true {
189
- @include keyframes(fadeOutDown) {
190
- 0% {
191
- @include transform(translateY(0));
192
- opacity: 1;
193
- }
194
- 100% {
195
- @include transform(translateY(20px));
196
- opacity: 0;
197
- }
198
- }
230
+ @include keyframes(fadeOutDown) {
231
+ 0% {
232
+ @include transform(translateY(0));
233
+ opacity: 1;
234
+ }
235
+ 100% {
236
+ @include transform(translateY(20px));
237
+ opacity: 0;
238
+ }
239
+ }
199
240
  }
200
241
  @if $fadeInRight == true {
201
- @include keyframes(fadeInRight) {
202
- 0% {
203
- @include transform(translateX(20px));
204
- opacity: 0;
205
- }
206
- 100% {
207
- @include transform(translateX(0));
208
- opacity: 1;
209
- }
210
- }
242
+ @include keyframes(fadeInRight) {
243
+ 0% {
244
+ @include transform(translateX(20px));
245
+ opacity: 0;
246
+ }
247
+ 100% {
248
+ @include transform(translateX(0));
249
+ opacity: 1;
250
+ }
251
+ }
211
252
  }
212
253
  @if $fadeOutLeft == true {
213
- @include keyframes(fadeOutLeft) {
214
- 0% {
215
- @include transform(translateX(0));
216
- opacity: 1;
217
- }
218
- 100% {
219
- @include transform(translateX(-20px));
220
- opacity: 0;
221
- }
222
- }
254
+ @include keyframes(fadeOutLeft) {
255
+ 0% {
256
+ @include transform(translateX(0));
257
+ opacity: 1;
258
+ }
259
+ 100% {
260
+ @include transform(translateX(-20px));
261
+ opacity: 0;
262
+ }
263
+ }
223
264
  }
224
265
  @if $fadeInLeft == true {
225
- @include keyframes(fadeInLeft) {
226
- 0% {
227
- @include transform(translateX(-20px));
228
- opacity: 0;
229
- }
230
- 100% {
231
- @include transform(translateX(0));
232
- opacity: 1;
233
- }
234
- }
266
+ @include keyframes(fadeInLeft) {
267
+ 0% {
268
+ @include transform(translateX(-20px));
269
+ opacity: 0;
270
+ }
271
+ 100% {
272
+ @include transform(translateX(0));
273
+ opacity: 1;
274
+ }
275
+ }
235
276
  }
236
277
  @if $fadeOutRight == true {
237
- @include keyframes(fadeOutRight) {
238
- 0% {
239
- @include transform(translateX(0));
240
- opacity: 1;
241
- }
242
- 100% {
243
- @include transform(translateX(20px));
244
- opacity: 0;
245
- }
246
- }
278
+ @include keyframes(fadeOutRight) {
279
+ 0% {
280
+ @include transform(translateX(0));
281
+ opacity: 1;
282
+ }
283
+ 100% {
284
+ @include transform(translateX(20px));
285
+ opacity: 0;
286
+ }
287
+ }
247
288
  }
248
289
  @if $fadeInUpBig == true {
249
- @include keyframes(fadeInUpBig) {
250
- 0% {
251
- @include transform(translateY(2000px));
252
- opacity: 0;
253
- }
254
- 100% {
255
- @include transform(translateY(0));
256
- opacity: 1;
257
- }
258
- }
290
+ @include keyframes(fadeInUpBig) {
291
+ 0% {
292
+ @include transform(translateY(2000px));
293
+ opacity: 0;
294
+ }
295
+ 100% {
296
+ @include transform(translateY(0));
297
+ opacity: 1;
298
+ }
299
+ }
259
300
  }
260
301
  @if $fadeOutUpBig == true {
261
- @include keyframes(fadeOutUpBig) {
262
- 0% {
263
- @include transform(translateY(0));
264
- opacity: 1;
265
- }
266
- 100% {
267
- @include transform(translateY(-2000px));
268
- opacity: 0;
269
- }
270
- }
302
+ @include keyframes(fadeOutUpBig) {
303
+ 0% {
304
+ @include transform(translateY(0));
305
+ opacity: 1;
306
+ }
307
+ 100% {
308
+ @include transform(translateY(-2000px));
309
+ opacity: 0;
310
+ }
311
+ }
271
312
  }
272
313
  @if $fadeInDownBig == true {
273
- @include keyframes(fadeInDownBig) {
274
- 0% {
275
- @include transform(translateY(-2000px));
276
- opacity: 0;
277
- }
278
- 100% {
279
- @include transform(translateY(0));
280
- opacity: 1;
281
- }
282
- }
314
+ @include keyframes(fadeInDownBig) {
315
+ 0% {
316
+ @include transform(translateY(-2000px));
317
+ opacity: 0;
318
+ }
319
+ 100% {
320
+ @include transform(translateY(0));
321
+ opacity: 1;
322
+ }
323
+ }
283
324
  }
284
325
  @if $fadeOutDownBig == true {
285
- @include keyframes(fadeOutDownBig) {
286
- 0% {
287
- @include transform(translateY(0));
288
- opacity: 1;
289
- }
290
- 100% {
291
- @include transform(translateY(2000px));
292
- opacity: 0;
293
- }
294
- }
326
+ @include keyframes(fadeOutDownBig) {
327
+ 0% {
328
+ @include transform(translateY(0));
329
+ opacity: 1;
330
+ }
331
+ 100% {
332
+ @include transform(translateY(2000px));
333
+ opacity: 0;
334
+ }
335
+ }
295
336
  }
296
337
  @if $fadeInRightBig == true {
297
- @include keyframes(fadeInRightBig) {
298
- 0% {
299
- @include transform(translateX(2000px));
300
- opacity: 0;
301
- }
302
- 100% {
303
- @include transform(translateX(0));
304
- opacity: 1;
305
- }
306
- }
338
+ @include keyframes(fadeInRightBig) {
339
+ 0% {
340
+ @include transform(translateX(2000px));
341
+ opacity: 0;
342
+ }
343
+ 100% {
344
+ @include transform(translateX(0));
345
+ opacity: 1;
346
+ }
347
+ }
307
348
  }
308
349
  @if $fadeOutLeftBig == true {
309
- @include keyframes(fadeOutLeftBig) {
310
- 0% {
311
- @include transform(translateX(0));
312
- opacity: 1;
313
- }
314
- 100% {
315
- @include transform(translateX(-2000px));
316
- opacity: 0;
317
- }
318
- }
350
+ @include keyframes(fadeOutLeftBig) {
351
+ 0% {
352
+ @include transform(translateX(0));
353
+ opacity: 1;
354
+ }
355
+ 100% {
356
+ @include transform(translateX(-2000px));
357
+ opacity: 0;
358
+ }
359
+ }
319
360
  }
320
361
  @if $fadeInLeftBig == true {
321
- @include keyframes(fadeInLeftBig) {
322
- 0% {
323
- @include transform(translateX(-2000px));
324
- opacity: 0;
325
- }
326
- 100% {
327
- @include transform(translateX(0));
328
- opacity: 1;
329
- }
330
- }
362
+ @include keyframes(fadeInLeftBig) {
363
+ 0% {
364
+ @include transform(translateX(-2000px));
365
+ opacity: 0;
366
+ }
367
+ 100% {
368
+ @include transform(translateX(0));
369
+ opacity: 1;
370
+ }
371
+ }
331
372
  }
332
373
  @if $fadeOutRightBig == true {
333
- @include keyframes(fadeOutRightBig) {
334
- 0% {
335
- @include transform(translateX(0));
336
- opacity: 1;
337
- }
338
- 100% {
339
- @include transform(translateX(2000px));
340
- opacity: 0;
341
- }
342
- }
374
+ @include keyframes(fadeOutRightBig) {
375
+ 0% {
376
+ @include transform(translateX(0));
377
+ opacity: 1;
378
+ }
379
+ 100% {
380
+ @include transform(translateX(2000px));
381
+ opacity: 0;
382
+ }
383
+ }
343
384
  }
344
385
  @if $bounceIn == true {
345
- @include keyframes(bounceIn) {
346
- 0% {
347
- @include transform(scale(0.3));
348
- opacity: 0;
349
- }
350
- 50% {
351
- @include transform(scale(1.05));
352
- opacity: 1;
353
- }
354
- 70% {
355
- @include transform(scale(0.9));
356
- }
357
- 100% {
358
- @include transform(scale(1));
359
- }
360
- }
386
+ @include keyframes(bounceIn) {
387
+ 0% {
388
+ @include transform(scale(0.3));
389
+ opacity: 0;
390
+ }
391
+ 50% {
392
+ @include transform(scale(1.05));
393
+ opacity: 1;
394
+ }
395
+ 70% {
396
+ @include transform(scale(0.9));
397
+ }
398
+ 100% {
399
+ @include transform(scale(1));
400
+ }
401
+ }
361
402
  }
362
403
  @if $bounceInDown == true {
363
- @include keyframes(bounceInDown) {
364
- 0% {
365
- @include transform(translateY(-2000px));
366
- opacity: 0;
367
- }
368
- 60% {
369
- @include transform(translateY(30px));
370
- opacity: 1;
371
- }
372
- 80% {
373
- @include transform(translateY(-10px));
374
- }
375
- 100% {
376
- @include transform(translateY(0));
377
- }
378
- }
404
+ @include keyframes(bounceInDown) {
405
+ 0% {
406
+ @include transform(translateY(-2000px));
407
+ opacity: 0;
408
+ }
409
+ 60% {
410
+ @include transform(translateY(30px));
411
+ opacity: 1;
412
+ }
413
+ 80% {
414
+ @include transform(translateY(-10px));
415
+ }
416
+ 100% {
417
+ @include transform(translateY(0));
418
+ }
419
+ }
379
420
  }
380
421
  @if $bounceInUp == true {
381
- @include keyframes(bounceInUp) {
382
- 0% {
383
- @include transform(translateY(2000px));
384
- opacity: 0;
385
- }
386
- 60% {
387
- @include transform(translateY(-30px));
388
- opacity: 1;
389
- }
390
- 80% {
391
- @include transform(translateY(10px));
392
- }
393
- 100% {
394
- @include transform(translateY(0));
395
- }
396
- }
422
+ @include keyframes(bounceInUp) {
423
+ 0% {
424
+ @include transform(translateY(2000px));
425
+ opacity: 0;
426
+ }
427
+ 60% {
428
+ @include transform(translateY(-30px));
429
+ opacity: 1;
430
+ }
431
+ 80% {
432
+ @include transform(translateY(10px));
433
+ }
434
+ 100% {
435
+ @include transform(translateY(0));
436
+ }
437
+ }
397
438
  }
398
439
  @if $bounceInRight == true {
399
- @include keyframes(bounceInRight) {
400
- 0% {
401
- @include transform(translateX(2000px));
402
- opacity: 0;
403
- }
404
- 60% {
405
- @include transform(translateX(-30px));
406
- opacity: 1;
407
- }
408
- 80% {
409
- @include transform(translateX(10px));
410
- }
411
- 100% {
412
- @include transform(translateX(0));
413
- }
414
- }
440
+ @include keyframes(bounceInRight) {
441
+ 0% {
442
+ @include transform(translateX(2000px));
443
+ opacity: 0;
444
+ }
445
+ 60% {
446
+ @include transform(translateX(-30px));
447
+ opacity: 1;
448
+ }
449
+ 80% {
450
+ @include transform(translateX(10px));
451
+ }
452
+ 100% {
453
+ @include transform(translateX(0));
454
+ }
455
+ }
415
456
  }
416
457
  @if $bounceInLeft == true {
417
- @include keyframes(bounceInLeft) {
418
- 0% {
419
- @include transform(translateX(-2000px));
420
- opacity: 0;
421
- }
422
- 60% {
423
- @include transform(translateX(30px));
424
- opacity: 1;
425
- }
426
- 80% {
427
- @include transform(translateX(-10px));
428
- }
429
- 100% {
430
- @include transform(translateX(0));
431
- }
432
- }
458
+ @include keyframes(bounceInLeft) {
459
+ 0% {
460
+ @include transform(translateX(-2000px));
461
+ opacity: 0;
462
+ }
463
+ 60% {
464
+ @include transform(translateX(30px));
465
+ opacity: 1;
466
+ }
467
+ 80% {
468
+ @include transform(translateX(-10px));
469
+ }
470
+ 100% {
471
+ @include transform(translateX(0));
472
+ }
473
+ }
433
474
  }
434
475
  @if $bounceOut == true {
435
- @include keyframes(bounceOut) {
436
- 0% {
437
- @include transform(scale(1));
438
- }
439
- 25% {
440
- @include transform(scale(0.95));
441
- }
442
- 50% {
443
- @include transform(scale(1.1));
444
- opacity: 1;
445
- }
446
- 100% {
447
- @include transform(scale(0.3));
448
- opacity: 0;
449
- }
450
- }
476
+ @include keyframes(bounceOut) {
477
+ 0% {
478
+ @include transform(scale(1));
479
+ }
480
+ 25% {
481
+ @include transform(scale(0.95));
482
+ }
483
+ 50% {
484
+ @include transform(scale(1.1));
485
+ opacity: 1;
486
+ }
487
+ 100% {
488
+ @include transform(scale(0.3));
489
+ opacity: 0;
490
+ }
491
+ }
451
492
  }
452
493
  @if $bounceOutUp == true {
453
- @include keyframes(bounceOutUp) {
454
- 0% {
455
- @include transform(translateY(0));
456
- }
457
- 20% {
458
- @include transform(translateY(20px));
459
- opacity: 1;
460
- }
461
- 100% {
462
- @include transform(translateY(-2000px));
463
- opacity: 0;
464
- }
465
- }
494
+ @include keyframes(bounceOutUp) {
495
+ 0% {
496
+ @include transform(translateY(0));
497
+ }
498
+ 20% {
499
+ @include transform(translateY(20px));
500
+ opacity: 1;
501
+ }
502
+ 100% {
503
+ @include transform(translateY(-2000px));
504
+ opacity: 0;
505
+ }
506
+ }
466
507
  }
467
508
  @if $bounceOutDown == true {
468
- @include keyframes(bounceOutDown) {
469
- 0% {
470
- @include transform(translateY(0));
471
- }
472
- 20% {
473
- @include transform(translateY(-20px));
474
- opacity: 1;
475
- }
476
- 100% {
477
- @include transform(translateY(2000px));
478
- opacity: 0;
479
- }
480
- }
509
+ @include keyframes(bounceOutDown) {
510
+ 0% {
511
+ @include transform(translateY(0));
512
+ }
513
+ 20% {
514
+ @include transform(translateY(-20px));
515
+ opacity: 1;
516
+ }
517
+ 100% {
518
+ @include transform(translateY(2000px));
519
+ opacity: 0;
520
+ }
521
+ }
481
522
  }
482
523
  @if $bounceOutLeft == true {
483
- @include keyframes(bounceOutLeft) {
484
- 0% {
485
- @include transform(translateX(0));
486
- }
487
- 20% {
488
- @include transform(translateX(20px));
489
- opacity: 1;
490
- }
491
- 100% {
492
- @include transform(translateX(-2000px));
493
- opacity: 0;
494
- }
495
- }
524
+ @include keyframes(bounceOutLeft) {
525
+ 0% {
526
+ @include transform(translateX(0));
527
+ }
528
+ 20% {
529
+ @include transform(translateX(20px));
530
+ opacity: 1;
531
+ }
532
+ 100% {
533
+ @include transform(translateX(-2000px));
534
+ opacity: 0;
535
+ }
536
+ }
496
537
  }
497
538
  @if $bounceOutRight == true {
498
- @include keyframes(bounceOutRight) {
499
- 0% {
500
- @include transform(translateX(0));
501
- }
502
- 20% {
503
- @include transform(translateX(-20px));
504
- opacity: 1;
505
- }
506
- 100% {
507
- @include transform(translateX(2000px));
508
- opacity: 0;
509
- }
510
- }
539
+ @include keyframes(bounceOutRight) {
540
+ 0% {
541
+ @include transform(translateX(0));
542
+ }
543
+ 20% {
544
+ @include transform(translateX(-20px));
545
+ opacity: 1;
546
+ }
547
+ 100% {
548
+ @include transform(translateX(2000px));
549
+ opacity: 0;
550
+ }
551
+ }
511
552
  }
512
553
  @if $flash == true {
513
- @include keyframes(flash) {
514
- 0% { opacity: 1; }
515
- 25% { opacity: 0; }
516
- 50% { opacity: 1; }
517
- 75% { opacity: 0; }
518
- 100% { opacity: 1; }
519
- }
554
+ @include keyframes(flash) {
555
+ 0% { opacity: 1; }
556
+ 25% { opacity: 0; }
557
+ 50% { opacity: 1; }
558
+ 75% { opacity: 0; }
559
+ 100% { opacity: 1; }
560
+ }
520
561
  }
521
562
  @if $bounce == true {
522
- @include keyframes(bounce) {
523
- 0% { @include transform(translateY(0)); }
524
- 20% { @include transform(translateY(0)); }
525
- 40% { @include transform(translateY(-30px)); }
526
- 50% { @include transform(translateY(0)); }
527
- 60% { @include transform(translateY(-15px)); }
528
- 80% { @include transform(translateY(0)); }
529
- 100% { @include transform(translateY(0)); }
530
- }
563
+ @include keyframes(bounce) {
564
+ 0% { @include transform(translateY(0)); }
565
+ 20% { @include transform(translateY(0)); }
566
+ 40% { @include transform(translateY(-30px)); }
567
+ 50% { @include transform(translateY(0)); }
568
+ 60% { @include transform(translateY(-15px)); }
569
+ 80% { @include transform(translateY(0)); }
570
+ 100% { @include transform(translateY(0)); }
571
+ }
531
572
  }
532
573
  @if $shake == true {
533
- @include keyframes(shake) {
534
- 0% { @include transform(translateX(0)); }
535
- 10% { @include transform(translateX(-10px)); }
536
- 20% { @include transform(translateX(10px)); }
537
- 30% { @include transform(translateX(-10px)); }
538
- 40% { @include transform(translateX(10px)); }
539
- 50% { @include transform(translateX(-10px)); }
540
- 60% { @include transform(translateX(10px)); }
541
- 70% { @include transform(translateX(-10px)); }
542
- 80% { @include transform(translateX(10px)); }
543
- 90% { @include transform(translateX(-10px)); }
544
- 100% { @include transform(translateX(0)); }
545
- }
574
+ @include keyframes(shake) {
575
+ 0% { @include transform(translateX(0)); }
576
+ 10% { @include transform(translateX(-10px)); }
577
+ 20% { @include transform(translateX(10px)); }
578
+ 30% { @include transform(translateX(-10px)); }
579
+ 40% { @include transform(translateX(10px)); }
580
+ 50% { @include transform(translateX(-10px)); }
581
+ 60% { @include transform(translateX(10px)); }
582
+ 70% { @include transform(translateX(-10px)); }
583
+ 80% { @include transform(translateX(10px)); }
584
+ 90% { @include transform(translateX(-10px)); }
585
+ 100% { @include transform(translateX(0)); }
586
+ }
546
587
  }
547
588
  @if $rotateInDownLeft == true {
548
- @include keyframes(rotateInDownLeft) {
549
- 0% {
550
- @include transform-origin(left, bottom);
551
- @include transform(rotate(-90deg));
552
- opacity: 0;
553
- }
554
- 100% {
555
- @include transform-origin(left, bottom);
556
- @include transform(rotate(0));
557
- opacity: 1;
558
- }
559
- }
589
+ @include keyframes(rotateInDownLeft) {
590
+ 0% {
591
+ @include transform-origin(left, bottom);
592
+ @include transform(rotate(-90deg));
593
+ opacity: 0;
594
+ }
595
+ 100% {
596
+ @include transform-origin(left, bottom);
597
+ @include transform(rotate(0));
598
+ opacity: 1;
599
+ }
600
+ }
560
601
  }
561
602
  @if $rotateInUpLeft == true {
562
- @include keyframes(rotateInUpLeft) {
563
- 0% {
564
- @include transform-origin(left, bottom);
565
- @include transform(rotate(90deg));
566
- opacity: 0;
567
- }
568
- 100% {
569
- @include transform-origin(left, bottom);
570
- @include transform(rotate(0));
571
- opacity: 1;
572
- }
573
- }
603
+ @include keyframes(rotateInUpLeft) {
604
+ 0% {
605
+ @include transform-origin(left, bottom);
606
+ @include transform(rotate(90deg));
607
+ opacity: 0;
608
+ }
609
+ 100% {
610
+ @include transform-origin(left, bottom);
611
+ @include transform(rotate(0));
612
+ opacity: 1;
613
+ }
614
+ }
574
615
  }
575
616
  @if $rotateInUpRight == true {
576
- @include keyframes(rotateInUpRight) {
577
- 0% {
578
- @include transform-origin(right, bottom);
579
- @include transform(rotate(-90deg));
580
- opacity: 0;
581
- }
582
- 100% {
583
- @include transform-origin(right, bottom);
584
- @include transform(rotate(0));
585
- opacity: 1;
586
- }
587
- }
617
+ @include keyframes(rotateInUpRight) {
618
+ 0% {
619
+ @include transform-origin(right, bottom);
620
+ @include transform(rotate(-90deg));
621
+ opacity: 0;
622
+ }
623
+ 100% {
624
+ @include transform-origin(right, bottom);
625
+ @include transform(rotate(0));
626
+ opacity: 1;
627
+ }
628
+ }
588
629
  }
589
630
  @if $rotateInDownRight == true {
590
- @include keyframes(rotateInDownRight) {
591
- 0% {
592
- @include transform-origin(right, bottom);
593
- @include transform(rotate(90deg));
594
- opacity: 0;
595
- }
596
- 100% {
597
- @include transform-origin(right, bottom);
598
- @include transform(rotate(0));
599
- opacity: 1;
600
- }
601
- }
631
+ @include keyframes(rotateInDownRight) {
632
+ 0% {
633
+ @include transform-origin(right, bottom);
634
+ @include transform(rotate(90deg));
635
+ opacity: 0;
636
+ }
637
+ 100% {
638
+ @include transform-origin(right, bottom);
639
+ @include transform(rotate(0));
640
+ opacity: 1;
641
+ }
642
+ }
602
643
  }
603
644
  @if $rotateOutDownLeft == true {
604
- @include keyframes(rotateOutDownLeft) {
605
- 0% {
606
- @include transform-origin(left, bottom);
607
- @include transform(rotate(0));
608
- opacity: 1;
609
- }
610
- 100% {
611
- @include transform-origin(left, bottom);
612
- @include transform(rotate(90deg));
613
- opacity: 0;
614
- }
615
- }
645
+ @include keyframes(rotateOutDownLeft) {
646
+ 0% {
647
+ @include transform-origin(left, bottom);
648
+ @include transform(rotate(0));
649
+ opacity: 1;
650
+ }
651
+ 100% {
652
+ @include transform-origin(left, bottom);
653
+ @include transform(rotate(90deg));
654
+ opacity: 0;
655
+ }
656
+ }
616
657
  }
617
658
  @if $rotateOutUpLeft == true {
618
- @include keyframes(rotateOutUpLeft) {
619
- 0% {
620
- @include transform-origin(left, bottom);
621
- @include transform(rotate(0));
622
- opacity: 1;
623
- }
624
- 100% {
625
- @include transform-origin(left, bottom);
626
- @include transform(rotate(-90deg));
627
- opacity: 0;
628
- }
629
- }
659
+ @include keyframes(rotateOutUpLeft) {
660
+ 0% {
661
+ @include transform-origin(left, bottom);
662
+ @include transform(rotate(0));
663
+ opacity: 1;
664
+ }
665
+ 100% {
666
+ @include transform-origin(left, bottom);
667
+ @include transform(rotate(-90deg));
668
+ opacity: 0;
669
+ }
670
+ }
630
671
  }
631
672
  @if $rotateOutDownRight == true {
632
- @include keyframes(rotateOutDownRight) {
633
- 0% {
634
- @include transform-origin(right, bottom);
635
- @include transform(rotate(0));
636
- opacity: 1;
637
- }
638
- 100% {
639
- @include transform-origin(right, bottom);
640
- @include transform(rotate(-90deg));
641
- opacity: 0;
642
- }
643
- }
673
+ @include keyframes(rotateOutDownRight) {
674
+ 0% {
675
+ @include transform-origin(right, bottom);
676
+ @include transform(rotate(0));
677
+ opacity: 1;
678
+ }
679
+ 100% {
680
+ @include transform-origin(right, bottom);
681
+ @include transform(rotate(-90deg));
682
+ opacity: 0;
683
+ }
684
+ }
644
685
  }
645
686
  @if $rotateOutUpRight == true {
646
- @include keyframes(rotateOutUpRight) {
647
- 0% {
648
- @include transform-origin(right, bottom);
649
- @include transform(rotate(0));
650
- opacity: 1;
651
- }
652
- 100% {
653
- @include transform-origin(right, bottom);
654
- @include transform(rotate(90deg));
655
- opacity: 0;
656
- }
657
- }
687
+ @include keyframes(rotateOutUpRight) {
688
+ 0% {
689
+ @include transform-origin(right, bottom);
690
+ @include transform(rotate(0));
691
+ opacity: 1;
692
+ }
693
+ 100% {
694
+ @include transform-origin(right, bottom);
695
+ @include transform(rotate(90deg));
696
+ opacity: 0;
697
+ }
698
+ }
658
699
  }
659
700
  @if $rotateIn == true {
660
- @include keyframes(rotateIn) {
661
- 0% {
662
- @include transform-origin(center, center);
663
- @include transform(rotate(-200deg));
664
- opacity: 0;
665
- }
666
- 100% {
667
- @include transform-origin(center, center);
668
- @include transform(rotate(0));
669
- opacity: 1;
670
- }
671
- }
701
+ @include keyframes(rotateIn) {
702
+ 0% {
703
+ @include transform-origin(center, center);
704
+ @include transform(rotate(-200deg));
705
+ opacity: 0;
706
+ }
707
+ 100% {
708
+ @include transform-origin(center, center);
709
+ @include transform(rotate(0));
710
+ opacity: 1;
711
+ }
712
+ }
672
713
  }
673
714
  @if $rotateOut == true {
674
- @include keyframes(rotateOut) {
675
- 0% {
676
- @include transform-origin(center, center);
677
- @include transform(rotate(0));
678
- opacity: 1;
679
- }
680
- 100% {
681
- @include transform-origin(center, center);
682
- @include transform(rotate(200deg));
683
- opacity: 0;
684
- }
685
- }
715
+ @include keyframes(rotateOut) {
716
+ 0% {
717
+ @include transform-origin(center, center);
718
+ @include transform(rotate(0));
719
+ opacity: 1;
720
+ }
721
+ 100% {
722
+ @include transform-origin(center, center);
723
+ @include transform(rotate(200deg));
724
+ opacity: 0;
725
+ }
726
+ }
686
727
  }
687
728
  @if $tada == true {
688
- @include keyframes(tada) {
689
- 0% { @include transform(scale(1)); }
690
- 10% { @include transform(scale(0.9) rotate(-3deg)); }
691
- 20% { @include transform(scale(0.9) rotate(-3deg)); }
692
- 30% { @include transform(scale(1.1) rotate(3deg)); }
693
- 40% { @include transform(scale(1.1) rotate(-3deg)); }
694
- 50% { @include transform(scale(1.1) rotate(3deg)); }
695
- 60% { @include transform(scale(1.1) rotate(-3deg)); }
696
- 70% { @include transform(scale(1.1) rotate(3deg)); }
697
- 80% { @include transform(scale(1.1) rotate(-3deg)); }
698
- 90% { @include transform(scale(1.1) rotate(3deg)); }
699
- 100% { @include transform(scale(1) rotate(0)); }
700
- }
729
+ @include keyframes(tada) {
730
+ 0% { @include transform(scale(1)); }
731
+ 10% { @include transform(scale(0.9) rotate(-3deg)); }
732
+ 20% { @include transform(scale(0.9) rotate(-3deg)); }
733
+ 30% { @include transform(scale(1.1) rotate(3deg)); }
734
+ 40% { @include transform(scale(1.1) rotate(-3deg)); }
735
+ 50% { @include transform(scale(1.1) rotate(3deg)); }
736
+ 60% { @include transform(scale(1.1) rotate(-3deg)); }
737
+ 70% { @include transform(scale(1.1) rotate(3deg)); }
738
+ 80% { @include transform(scale(1.1) rotate(-3deg)); }
739
+ 90% { @include transform(scale(1.1) rotate(3deg)); }
740
+ 100% { @include transform(scale(1) rotate(0)); }
741
+ }
701
742
  }