mindy 0.1.2.1 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/lib/mindy.rb +2 -2
- data/stylesheets/{mindy/_mindy.scss → _mindy.scss} +0 -0
- data/stylesheets/css3/_animate.scss +635 -0
- data/stylesheets/{mindy/css3 → css3}/_arrows.scss +0 -0
- data/stylesheets/css3/_buttons.scss +528 -0
- data/stylesheets/{mindy/css3 → css3}/_buttons_refactor.scss +0 -0
- data/stylesheets/{mindy/css3 → css3}/_font-family.scss +0 -0
- data/stylesheets/{mindy/css3 → css3}/_formalize.scss +0 -0
- data/stylesheets/{mindy/css3 → css3}/_multi_line_buttons.sass +0 -0
- data/stylesheets/{mindy/css3 → css3}/_shadow.scss +0 -0
- data/stylesheets/{mindy/grid → grid}/_grid.scss +2 -2
- data/stylesheets/{mindy/grid → grid}/_respond.scss +0 -0
- data/stylesheets/{mindy/utils → utils}/_deprecated.scss +0 -0
- data/stylesheets/{mindy/utils → utils}/_mixins.scss +23 -0
- data/stylesheets/{mindy/utils → utils}/_reset.scss +4 -4
- data/stylesheets/{mindy/utils → utils}/_variables.scss +0 -0
- metadata +18 -19
- data/stylesheets/mindy/css3/_animate.scss +0 -2557
- data/stylesheets/mindy/css3/_buttons.scss +0 -453
data/lib/mindy.rb
CHANGED
File without changes
|
@@ -0,0 +1,635 @@
|
|
1
|
+
//Animate Mixin Plugin
|
2
|
+
@mixin animate($name: fadeIn, $duration: 1s, $delay: 0.2s, $function: ease, $mode: both) {
|
3
|
+
@include experimental(animation, $name $duration $delay $function $mode);
|
4
|
+
}
|
5
|
+
|
6
|
+
//KeyFrame Defaults (pre-made don't edit)
|
7
|
+
@include keyframes(fadeIn) {
|
8
|
+
0% {
|
9
|
+
opacity: 0;
|
10
|
+
}
|
11
|
+
100% {
|
12
|
+
opacity: 1;
|
13
|
+
}
|
14
|
+
}
|
15
|
+
|
16
|
+
@include keyframes(fadeOut) {
|
17
|
+
0% {
|
18
|
+
opacity: 1;
|
19
|
+
}
|
20
|
+
100% {
|
21
|
+
opacity: 0;
|
22
|
+
}
|
23
|
+
}
|
24
|
+
|
25
|
+
@include keyframes(fadeInUp) {
|
26
|
+
0% {
|
27
|
+
@include transform(translateY(20px));
|
28
|
+
opacity: 0;
|
29
|
+
}
|
30
|
+
100% {
|
31
|
+
@include transform(translateY(0));
|
32
|
+
opacity: 1;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
|
36
|
+
@include keyframes(fadeOutUp) {
|
37
|
+
0% {
|
38
|
+
@include transform(translateY(0));
|
39
|
+
opacity: 1;
|
40
|
+
}
|
41
|
+
100% {
|
42
|
+
@include transform(translateY(-20px));
|
43
|
+
opacity: 0;
|
44
|
+
}
|
45
|
+
}
|
46
|
+
|
47
|
+
@include keyframes(fadeInDown) {
|
48
|
+
0% {
|
49
|
+
@include transform(translateY(-20px));
|
50
|
+
opacity: 0;
|
51
|
+
}
|
52
|
+
100% {
|
53
|
+
@include transform(translateY(0));
|
54
|
+
opacity: 1;
|
55
|
+
}
|
56
|
+
}
|
57
|
+
|
58
|
+
@include keyframes(fadeOutDown) {
|
59
|
+
0% {
|
60
|
+
@include transform(translateY(0));
|
61
|
+
opacity: 1;
|
62
|
+
}
|
63
|
+
100% {
|
64
|
+
@include transform(translateY(20px));
|
65
|
+
opacity: 0;
|
66
|
+
}
|
67
|
+
}
|
68
|
+
|
69
|
+
@include keyframes(fadeInRight) {
|
70
|
+
0% {
|
71
|
+
@include transform(translateX(20px));
|
72
|
+
opacity: 0;
|
73
|
+
}
|
74
|
+
100% {
|
75
|
+
@include transform(translateX(0));
|
76
|
+
opacity: 1;
|
77
|
+
}
|
78
|
+
}
|
79
|
+
|
80
|
+
@include keyframes(fadeOutLeft) {
|
81
|
+
0% {
|
82
|
+
@include transform(translateX(0));
|
83
|
+
opacity: 1;
|
84
|
+
}
|
85
|
+
100% {
|
86
|
+
@include transform(translateX(-20px));
|
87
|
+
opacity: 0;
|
88
|
+
}
|
89
|
+
}
|
90
|
+
|
91
|
+
|
92
|
+
@include keyframes(fadeInLeft) {
|
93
|
+
0% {
|
94
|
+
@include transform(translateX(-20px));
|
95
|
+
opacity: 0;
|
96
|
+
}
|
97
|
+
100% {
|
98
|
+
@include transform(translateX(0));
|
99
|
+
opacity: 1;
|
100
|
+
}
|
101
|
+
}
|
102
|
+
|
103
|
+
|
104
|
+
@include keyframes(fadeOutRight) {
|
105
|
+
0% {
|
106
|
+
@include transform(translateX(0));
|
107
|
+
opacity: 1;
|
108
|
+
}
|
109
|
+
100% {
|
110
|
+
@include transform(translateX(20px));
|
111
|
+
opacity: 0;
|
112
|
+
}
|
113
|
+
}
|
114
|
+
|
115
|
+
|
116
|
+
@include keyframes(fadeInUpBig) {
|
117
|
+
0% {
|
118
|
+
@include transform(translateY(2000px));
|
119
|
+
opacity: 0;
|
120
|
+
}
|
121
|
+
100% {
|
122
|
+
@include transform(translateY(0));
|
123
|
+
opacity: 1;
|
124
|
+
}
|
125
|
+
}
|
126
|
+
|
127
|
+
|
128
|
+
@include keyframes(fadeOutUpBig) {
|
129
|
+
0% {
|
130
|
+
opacity: 1;
|
131
|
+
@include transform(translateY(0));
|
132
|
+
}
|
133
|
+
100% {
|
134
|
+
opacity: 0;
|
135
|
+
@include transform(translateY(-2000px));
|
136
|
+
}
|
137
|
+
}
|
138
|
+
|
139
|
+
|
140
|
+
@include keyframes(fadeInDownBig) {
|
141
|
+
0% {
|
142
|
+
opacity: 0;
|
143
|
+
@include transform(translateY(-2000px));
|
144
|
+
}
|
145
|
+
100% {
|
146
|
+
opacity: 1;
|
147
|
+
@include transform(translateY(0));
|
148
|
+
}
|
149
|
+
}
|
150
|
+
|
151
|
+
|
152
|
+
@include keyframes(fadeOutDownBig) {
|
153
|
+
0% {
|
154
|
+
opacity: 1;
|
155
|
+
@include transform(translateY(0));
|
156
|
+
}
|
157
|
+
100% {
|
158
|
+
opacity: 0;
|
159
|
+
@include transform(translateY(2000px));
|
160
|
+
}
|
161
|
+
}
|
162
|
+
|
163
|
+
|
164
|
+
@include keyframes(fadeInRightBig) {
|
165
|
+
0% {
|
166
|
+
opacity: 0;
|
167
|
+
@include transform(translateX(2000px));
|
168
|
+
}
|
169
|
+
100% {
|
170
|
+
opacity: 1;
|
171
|
+
@include transform(translateX(0));
|
172
|
+
}
|
173
|
+
}
|
174
|
+
|
175
|
+
|
176
|
+
@include keyframes(fadeOutLeftBig) {
|
177
|
+
0% {
|
178
|
+
opacity: 1;
|
179
|
+
@include transform(translateX(0));
|
180
|
+
}
|
181
|
+
100% {
|
182
|
+
opacity: 0;
|
183
|
+
@include transform(translateX(-2000px));
|
184
|
+
}
|
185
|
+
}
|
186
|
+
|
187
|
+
|
188
|
+
@include keyframes(fadeInLeftBig) {
|
189
|
+
0% {
|
190
|
+
opacity: 0;
|
191
|
+
@include transform(translateX(-2000px));
|
192
|
+
}
|
193
|
+
100% {
|
194
|
+
opacity: 1;
|
195
|
+
@include transform(translateX(0));
|
196
|
+
}
|
197
|
+
}
|
198
|
+
|
199
|
+
|
200
|
+
@include keyframes(fadeOutRightBig) {
|
201
|
+
0% {
|
202
|
+
opacity: 1;
|
203
|
+
@include transform(translateX(0));
|
204
|
+
}
|
205
|
+
100% {
|
206
|
+
opacity: 0;
|
207
|
+
@include transform(translateX(2000px));
|
208
|
+
}
|
209
|
+
}
|
210
|
+
|
211
|
+
|
212
|
+
@include keyframes(bounceIn) {
|
213
|
+
0% {
|
214
|
+
opacity: 0;
|
215
|
+
@include transform(scale(0.3));
|
216
|
+
}
|
217
|
+
50% {
|
218
|
+
opacity: 1;
|
219
|
+
@include transform(scale(1.05));
|
220
|
+
}
|
221
|
+
70% {
|
222
|
+
@include transform(scale(0.9));
|
223
|
+
}
|
224
|
+
100% {
|
225
|
+
@include transform(scale(1));
|
226
|
+
}
|
227
|
+
}
|
228
|
+
|
229
|
+
|
230
|
+
@include keyframes(bounceInDown) {
|
231
|
+
0% {
|
232
|
+
opacity: 0;
|
233
|
+
@include transform(translateY(-2000px));
|
234
|
+
}
|
235
|
+
60% {
|
236
|
+
opacity: 1;
|
237
|
+
@include transform(translateY(30px));
|
238
|
+
}
|
239
|
+
80% {
|
240
|
+
@include transform(translateY(-10px));
|
241
|
+
}
|
242
|
+
100% {
|
243
|
+
@include transform(translateY(0));
|
244
|
+
}
|
245
|
+
}
|
246
|
+
|
247
|
+
|
248
|
+
@include keyframes(bounceInUp) {
|
249
|
+
0% {
|
250
|
+
opacity: 0;
|
251
|
+
@include transform(translateY(2000px));
|
252
|
+
}
|
253
|
+
60% {
|
254
|
+
opacity: 1;
|
255
|
+
@include transform(translateY(-30px));
|
256
|
+
}
|
257
|
+
80% {
|
258
|
+
@include transform(translateY(10px));
|
259
|
+
}
|
260
|
+
100% {
|
261
|
+
@include transform(translateY(0));
|
262
|
+
}
|
263
|
+
}
|
264
|
+
|
265
|
+
|
266
|
+
@include keyframes(bounceInRight) {
|
267
|
+
0% {
|
268
|
+
opacity: 0;
|
269
|
+
@include transform(translateX(2000px));
|
270
|
+
}
|
271
|
+
60% {
|
272
|
+
opacity: 1;
|
273
|
+
@include transform(translateX(-30px));
|
274
|
+
}
|
275
|
+
80% {
|
276
|
+
@include transform(translateX(10px));
|
277
|
+
}
|
278
|
+
100% {
|
279
|
+
@include transform(translateX(0));
|
280
|
+
}
|
281
|
+
}
|
282
|
+
|
283
|
+
|
284
|
+
@include keyframes(bounceInLeft) {
|
285
|
+
0% {
|
286
|
+
opacity: 0;
|
287
|
+
@include transform(translateX(-2000px));
|
288
|
+
}
|
289
|
+
60% {
|
290
|
+
opacity: 1;
|
291
|
+
@include transform(translateX(30px));
|
292
|
+
}
|
293
|
+
80% {
|
294
|
+
@include transform(translateX(-10px));
|
295
|
+
}
|
296
|
+
100% {
|
297
|
+
@include transform(translateX(0));
|
298
|
+
}
|
299
|
+
}
|
300
|
+
|
301
|
+
|
302
|
+
@include keyframes(bounceOut) {
|
303
|
+
0% {
|
304
|
+
@include transform(scale(1));
|
305
|
+
}
|
306
|
+
25% {
|
307
|
+
@include transform(scale(0.95));
|
308
|
+
}
|
309
|
+
50% {
|
310
|
+
opacity: 1;
|
311
|
+
@include transform(scale(1.1));
|
312
|
+
}
|
313
|
+
100% {
|
314
|
+
opacity: 0;
|
315
|
+
@include transform(scale(0.3));
|
316
|
+
}
|
317
|
+
}
|
318
|
+
|
319
|
+
|
320
|
+
@include keyframes(bounceOutUp) {
|
321
|
+
0% {
|
322
|
+
@include transform(translateY(0));
|
323
|
+
}
|
324
|
+
20% {
|
325
|
+
opacity: 1;
|
326
|
+
@include transform(translateY(20px));
|
327
|
+
}
|
328
|
+
100% {
|
329
|
+
opacity: 0;
|
330
|
+
@include transform(translateY(-2000px));
|
331
|
+
}
|
332
|
+
}
|
333
|
+
|
334
|
+
|
335
|
+
@include keyframes(bounceOutDown) {
|
336
|
+
0% {
|
337
|
+
@include transform(translateY(0));
|
338
|
+
}
|
339
|
+
20% {
|
340
|
+
opacity: 1;
|
341
|
+
@include transform(translateY(-20px));
|
342
|
+
}
|
343
|
+
100% {
|
344
|
+
opacity: 0;
|
345
|
+
@include transform(translateY(2000px));
|
346
|
+
}
|
347
|
+
}
|
348
|
+
|
349
|
+
|
350
|
+
@include keyframes(bounceOutLeft) {
|
351
|
+
0% {
|
352
|
+
@include transform(translateX(0));
|
353
|
+
}
|
354
|
+
20% {
|
355
|
+
opacity: 1;
|
356
|
+
@include transform(translateX(20px));
|
357
|
+
}
|
358
|
+
100% {
|
359
|
+
opacity: 0;
|
360
|
+
@include transform(translateX(-2000px));
|
361
|
+
}
|
362
|
+
}
|
363
|
+
|
364
|
+
|
365
|
+
@include keyframes(bounceOutRight) {
|
366
|
+
0% {
|
367
|
+
@include transform(translateX(0));
|
368
|
+
}
|
369
|
+
20% {
|
370
|
+
opacity: 1;
|
371
|
+
@include transform(translateX(-20px));
|
372
|
+
}
|
373
|
+
100% {
|
374
|
+
opacity: 0;
|
375
|
+
@include transform(translateX(2000px));
|
376
|
+
}
|
377
|
+
}
|
378
|
+
|
379
|
+
|
380
|
+
@include keyframes(flash) {
|
381
|
+
0% {
|
382
|
+
opacity: 1;
|
383
|
+
}
|
384
|
+
25% {
|
385
|
+
opacity: 0;
|
386
|
+
}
|
387
|
+
50% {
|
388
|
+
opacity: 1;
|
389
|
+
}
|
390
|
+
75% {
|
391
|
+
opacity: 0;
|
392
|
+
}
|
393
|
+
100% {
|
394
|
+
opacity: 1;
|
395
|
+
}
|
396
|
+
}
|
397
|
+
|
398
|
+
|
399
|
+
@include keyframes(bounce) {
|
400
|
+
0% {
|
401
|
+
@include transform(translateY(0));
|
402
|
+
}
|
403
|
+
20% {
|
404
|
+
@include transform(translateY(0));
|
405
|
+
}
|
406
|
+
40% {
|
407
|
+
@include transform(translateY(-30px));
|
408
|
+
}
|
409
|
+
50% {
|
410
|
+
@include transform(translateY(0));
|
411
|
+
}
|
412
|
+
60% {
|
413
|
+
@include transform(translateY(-15px));
|
414
|
+
}
|
415
|
+
80% {
|
416
|
+
@include transform(translateY(0));
|
417
|
+
}
|
418
|
+
100% {
|
419
|
+
@include transform(translateY(0));
|
420
|
+
}
|
421
|
+
}
|
422
|
+
|
423
|
+
|
424
|
+
@include keyframes(shake) {
|
425
|
+
0% {
|
426
|
+
@include transform(translateX(0));
|
427
|
+
}
|
428
|
+
10% {
|
429
|
+
@include transform(translateX(-10px));
|
430
|
+
}
|
431
|
+
20% {
|
432
|
+
@include transform(translateX(10px));
|
433
|
+
}
|
434
|
+
30% {
|
435
|
+
@include transform(translateX(-10px));
|
436
|
+
}
|
437
|
+
40% {
|
438
|
+
@include transform(translateX(10px));
|
439
|
+
}
|
440
|
+
50% {
|
441
|
+
@include transform(translateX(-10px));
|
442
|
+
}
|
443
|
+
60% {
|
444
|
+
@include transform(translateX(10px));
|
445
|
+
}
|
446
|
+
70% {
|
447
|
+
@include transform(translateX(-10px));
|
448
|
+
}
|
449
|
+
80% {
|
450
|
+
@include transform(translateX(10px));
|
451
|
+
}
|
452
|
+
90% {
|
453
|
+
@include transform(translateX(-10px));
|
454
|
+
}
|
455
|
+
100% {
|
456
|
+
@include transform(translateX(0));
|
457
|
+
}
|
458
|
+
}
|
459
|
+
|
460
|
+
|
461
|
+
@include keyframes(rotateInDownLeft) {
|
462
|
+
0% {
|
463
|
+
@include transform-origin(left bottom);
|
464
|
+
@include transform(rotate(-90deg));
|
465
|
+
opacity: 0;
|
466
|
+
}
|
467
|
+
100% {
|
468
|
+
@include transform-origin(left bottom);
|
469
|
+
@include transform(rotate(0));
|
470
|
+
opacity: 1;
|
471
|
+
}
|
472
|
+
}
|
473
|
+
|
474
|
+
|
475
|
+
@include keyframes(rotateInUpLeft) {
|
476
|
+
0% {
|
477
|
+
@include transform-origin(left bottom);
|
478
|
+
@include transform(rotate(90deg));
|
479
|
+
opacity: 0;
|
480
|
+
}
|
481
|
+
100% {
|
482
|
+
@include transform-origin(left bottom);
|
483
|
+
@include transform(rotate(0));
|
484
|
+
opacity: 1;
|
485
|
+
}
|
486
|
+
}
|
487
|
+
|
488
|
+
|
489
|
+
@include keyframes(rotateInUpRight) {
|
490
|
+
0% {
|
491
|
+
@include transform-origin(right bottom);
|
492
|
+
@include transform(rotate(-90deg));
|
493
|
+
opacity: 0;
|
494
|
+
}
|
495
|
+
100% {
|
496
|
+
@include transform-origin(right bottom);
|
497
|
+
@include transform(rotate(0));
|
498
|
+
opacity: 1;
|
499
|
+
}
|
500
|
+
}
|
501
|
+
|
502
|
+
|
503
|
+
@include keyframes(rotateInDownRight) {
|
504
|
+
0% {
|
505
|
+
@include transform-origin(right bottom);
|
506
|
+
@include transform(rotate(90deg));
|
507
|
+
opacity: 0;
|
508
|
+
}
|
509
|
+
100% {
|
510
|
+
@include transform-origin(right bottom);
|
511
|
+
@include transform(rotate(0));
|
512
|
+
opacity: 1;
|
513
|
+
}
|
514
|
+
}
|
515
|
+
|
516
|
+
|
517
|
+
@include keyframes(rotateOutDownLeft) {
|
518
|
+
0% {
|
519
|
+
@include transform-origin(left bottom);
|
520
|
+
@include transform(rotate(0));
|
521
|
+
opacity: 1;
|
522
|
+
}
|
523
|
+
100% {
|
524
|
+
@include transform-origin(left bottom);
|
525
|
+
@include transform(rotate(90deg));
|
526
|
+
opacity: 0;
|
527
|
+
}
|
528
|
+
}
|
529
|
+
|
530
|
+
|
531
|
+
@include keyframes(rotateOutUpLeft) {
|
532
|
+
0% {
|
533
|
+
@include transform-origin(left bottom);
|
534
|
+
@include transform(rotate(0));
|
535
|
+
opacity: 1;
|
536
|
+
}
|
537
|
+
100% {
|
538
|
+
@include transform-origin(left bottom);
|
539
|
+
@include transform(rotate(-90deg));
|
540
|
+
opacity: 0;
|
541
|
+
}
|
542
|
+
}
|
543
|
+
|
544
|
+
|
545
|
+
@include keyframes(rotateOutDownRight) {
|
546
|
+
0% {
|
547
|
+
@include transform-origin(right bottom);
|
548
|
+
@include transform(rotate(0));
|
549
|
+
opacity: 1;
|
550
|
+
}
|
551
|
+
100% {
|
552
|
+
@include transform-origin(right bottom);
|
553
|
+
@include transform(rotate(-90deg));
|
554
|
+
opacity: 0;
|
555
|
+
}
|
556
|
+
}
|
557
|
+
|
558
|
+
|
559
|
+
@include keyframes(rotateOutUpRight) {
|
560
|
+
0% {
|
561
|
+
@include transform-origin(right bottom);
|
562
|
+
@include transform(rotate(0));
|
563
|
+
opacity: 1;
|
564
|
+
}
|
565
|
+
100% {
|
566
|
+
@include transform-origin(right bottom);
|
567
|
+
@include transform(rotate(90deg));
|
568
|
+
opacity: 0;
|
569
|
+
}
|
570
|
+
}
|
571
|
+
|
572
|
+
|
573
|
+
@include keyframes(rotateIn) {
|
574
|
+
0% {
|
575
|
+
@include transform-origin(center center);
|
576
|
+
@include transform(rotate(-200deg));
|
577
|
+
opacity: 0;
|
578
|
+
}
|
579
|
+
100% {
|
580
|
+
@include transform-origin(center center);
|
581
|
+
@include transform(rotate(0));
|
582
|
+
opacity: 1;
|
583
|
+
}
|
584
|
+
}
|
585
|
+
|
586
|
+
|
587
|
+
@include keyframes(rotateOut) {
|
588
|
+
0% {
|
589
|
+
@include transform-origin(center center);
|
590
|
+
@include transform(rotate(0));
|
591
|
+
opacity: 1;
|
592
|
+
}
|
593
|
+
100% {
|
594
|
+
@include transform-origin(center center);
|
595
|
+
@include transform(rotate(200deg));
|
596
|
+
opacity: 0;
|
597
|
+
}
|
598
|
+
}
|
599
|
+
|
600
|
+
|
601
|
+
@include keyframes(tada) {
|
602
|
+
0% {
|
603
|
+
@include transform(scale(1));
|
604
|
+
}
|
605
|
+
10% {
|
606
|
+
@include transform(scale(0.9) rotate(-3deg));
|
607
|
+
}
|
608
|
+
20% {
|
609
|
+
@include transform(scale(0.9) rotate(-3deg));
|
610
|
+
}
|
611
|
+
30% {
|
612
|
+
@include transform(scale(1.1) rotate(3deg));
|
613
|
+
}
|
614
|
+
40% {
|
615
|
+
@include transform(scale(1.1) rotate(-3deg));
|
616
|
+
}
|
617
|
+
50% {
|
618
|
+
@include transform(scale(1.1) rotate(3deg));
|
619
|
+
}
|
620
|
+
60% {
|
621
|
+
@include transform(scale(1.1) rotate(-3deg));
|
622
|
+
}
|
623
|
+
70% {
|
624
|
+
@include transform(scale(1.1) rotate(3deg));
|
625
|
+
}
|
626
|
+
80% {
|
627
|
+
@include transform(scale(1.1) rotate(-3deg));
|
628
|
+
}
|
629
|
+
90% {
|
630
|
+
@include transform(scale(1.1) rotate(3deg));
|
631
|
+
}
|
632
|
+
100% {
|
633
|
+
@include transform(scale(1) rotate(0));
|
634
|
+
}
|
635
|
+
}
|