semantic-ui-sass 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (93) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +18 -0
  3. data/Gemfile +4 -0
  4. data/LICENSE.txt +22 -0
  5. data/README.md +51 -0
  6. data/Rakefile +5 -0
  7. data/app/assets/fonts/semantic-ui/basic.icons.eot +0 -0
  8. data/app/assets/fonts/semantic-ui/basic.icons.svg +450 -0
  9. data/app/assets/fonts/semantic-ui/basic.icons.ttf +0 -0
  10. data/app/assets/fonts/semantic-ui/basic.icons.woff +0 -0
  11. data/app/assets/fonts/semantic-ui/icons.eot +0 -0
  12. data/app/assets/fonts/semantic-ui/icons.otf +0 -0
  13. data/app/assets/fonts/semantic-ui/icons.svg +399 -0
  14. data/app/assets/fonts/semantic-ui/icons.ttf +0 -0
  15. data/app/assets/fonts/semantic-ui/icons.woff +0 -0
  16. data/app/assets/images/semantic-ui/loader-large-inverted.gif +0 -0
  17. data/app/assets/images/semantic-ui/loader-large.gif +0 -0
  18. data/app/assets/images/semantic-ui/loader-medium-inverted.gif +0 -0
  19. data/app/assets/images/semantic-ui/loader-medium.gif +0 -0
  20. data/app/assets/images/semantic-ui/loader-mini-inverted.gif +0 -0
  21. data/app/assets/images/semantic-ui/loader-mini.gif +0 -0
  22. data/app/assets/images/semantic-ui/loader-small-inverted.gif +0 -0
  23. data/app/assets/images/semantic-ui/loader-small.gif +0 -0
  24. data/app/assets/javascripts/semantic-ui.js +20 -0
  25. data/app/assets/javascripts/semantic-ui/accordion.js +419 -0
  26. data/app/assets/javascripts/semantic-ui/behavior/api.js +638 -0
  27. data/app/assets/javascripts/semantic-ui/behavior/colorize.js +270 -0
  28. data/app/assets/javascripts/semantic-ui/behavior/form.js +702 -0
  29. data/app/assets/javascripts/semantic-ui/behavior/state.js +725 -0
  30. data/app/assets/javascripts/semantic-ui/chatroom.js +769 -0
  31. data/app/assets/javascripts/semantic-ui/checkbox.js +344 -0
  32. data/app/assets/javascripts/semantic-ui/dimmer.js +564 -0
  33. data/app/assets/javascripts/semantic-ui/dropdown.js +724 -0
  34. data/app/assets/javascripts/semantic-ui/modal.js +553 -0
  35. data/app/assets/javascripts/semantic-ui/nag.js +545 -0
  36. data/app/assets/javascripts/semantic-ui/popup.js +727 -0
  37. data/app/assets/javascripts/semantic-ui/rating.js +403 -0
  38. data/app/assets/javascripts/semantic-ui/search.js +772 -0
  39. data/app/assets/javascripts/semantic-ui/shape.js +778 -0
  40. data/app/assets/javascripts/semantic-ui/sidebar.js +490 -0
  41. data/app/assets/javascripts/semantic-ui/tab.js +689 -0
  42. data/app/assets/javascripts/semantic-ui/transition.js +654 -0
  43. data/app/assets/javascripts/semantic-ui/video.js +457 -0
  44. data/app/assets/stylesheets/semantic-ui.scss +4 -0
  45. data/app/assets/stylesheets/semantic-ui/collections/_all.scss +6 -0
  46. data/app/assets/stylesheets/semantic-ui/collections/_breadcrumb.scss +77 -0
  47. data/app/assets/stylesheets/semantic-ui/collections/_form.scss +569 -0
  48. data/app/assets/stylesheets/semantic-ui/collections/_grid.scss +643 -0
  49. data/app/assets/stylesheets/semantic-ui/collections/_menu.scss +1767 -0
  50. data/app/assets/stylesheets/semantic-ui/collections/_message.scss +347 -0
  51. data/app/assets/stylesheets/semantic-ui/collections/_table.scss +524 -0
  52. data/app/assets/stylesheets/semantic-ui/elements/_all.scss +12 -0
  53. data/app/assets/stylesheets/semantic-ui/elements/_basic.icon.scss +479 -0
  54. data/app/assets/stylesheets/semantic-ui/elements/_button.scss +1187 -0
  55. data/app/assets/stylesheets/semantic-ui/elements/_divider.scss +199 -0
  56. data/app/assets/stylesheets/semantic-ui/elements/_header.scss +342 -0
  57. data/app/assets/stylesheets/semantic-ui/elements/_icon.scss +772 -0
  58. data/app/assets/stylesheets/semantic-ui/elements/_image.scss +181 -0
  59. data/app/assets/stylesheets/semantic-ui/elements/_input.scss +338 -0
  60. data/app/assets/stylesheets/semantic-ui/elements/_label.scss +827 -0
  61. data/app/assets/stylesheets/semantic-ui/elements/_loader.scss +185 -0
  62. data/app/assets/stylesheets/semantic-ui/elements/_progress.scss +352 -0
  63. data/app/assets/stylesheets/semantic-ui/elements/_segment.scss +464 -0
  64. data/app/assets/stylesheets/semantic-ui/elements/_step.scss +293 -0
  65. data/app/assets/stylesheets/semantic-ui/modules/_accordion.scss +199 -0
  66. data/app/assets/stylesheets/semantic-ui/modules/_all.scss +16 -0
  67. data/app/assets/stylesheets/semantic-ui/modules/_chatroom.scss +281 -0
  68. data/app/assets/stylesheets/semantic-ui/modules/_checkbox.scss +481 -0
  69. data/app/assets/stylesheets/semantic-ui/modules/_dimmer.scss +236 -0
  70. data/app/assets/stylesheets/semantic-ui/modules/_dropdown.scss +548 -0
  71. data/app/assets/stylesheets/semantic-ui/modules/_modal.scss +217 -0
  72. data/app/assets/stylesheets/semantic-ui/modules/_nag.scss +173 -0
  73. data/app/assets/stylesheets/semantic-ui/modules/_popup.scss +255 -0
  74. data/app/assets/stylesheets/semantic-ui/modules/_rating.scss +179 -0
  75. data/app/assets/stylesheets/semantic-ui/modules/_reveal.scss +365 -0
  76. data/app/assets/stylesheets/semantic-ui/modules/_search.scss +273 -0
  77. data/app/assets/stylesheets/semantic-ui/modules/_shape.scss +113 -0
  78. data/app/assets/stylesheets/semantic-ui/modules/_sidebar.scss +150 -0
  79. data/app/assets/stylesheets/semantic-ui/modules/_tab.scss +63 -0
  80. data/app/assets/stylesheets/semantic-ui/modules/_transition.scss +1096 -0
  81. data/app/assets/stylesheets/semantic-ui/modules/_video.scss +98 -0
  82. data/app/assets/stylesheets/semantic-ui/views/_all.scss +5 -0
  83. data/app/assets/stylesheets/semantic-ui/views/_comment.scss +221 -0
  84. data/app/assets/stylesheets/semantic-ui/views/_feed.scss +152 -0
  85. data/app/assets/stylesheets/semantic-ui/views/_item.scss +651 -0
  86. data/app/assets/stylesheets/semantic-ui/views/_list.scss +555 -0
  87. data/app/assets/stylesheets/semantic-ui/views/_statistic.scss +27 -0
  88. data/lib/semantic/ui/sass.rb +10 -0
  89. data/lib/semantic/ui/sass/engine.rb +13 -0
  90. data/lib/semantic/ui/sass/version.rb +8 -0
  91. data/semantic-ui-sass.gemspec +24 -0
  92. data/tasks/converter.rb +237 -0
  93. metadata +177 -0
@@ -0,0 +1,63 @@
1
+ /*
2
+ * # Semantic - Tab
3
+ * http://github.com/jlukic/semantic-ui/
4
+ *
5
+ *
6
+ * Copyright 2013 Contributors
7
+ * Released under the MIT license
8
+ * http://opensource.org/licenses/MIT
9
+ *
10
+ */
11
+
12
+
13
+ /*******************************
14
+ UI Tabs
15
+ *******************************/
16
+
17
+ .ui.tab {
18
+ display: none;
19
+ }
20
+
21
+
22
+ /*******************************
23
+ States
24
+ *******************************/
25
+
26
+ /*--------------------
27
+ Active
28
+ ---------------------*/
29
+
30
+ .ui.tab.active,
31
+ .ui.tab.open {
32
+ display: block;
33
+ }
34
+
35
+ /*--------------------
36
+ Loading
37
+ ---------------------*/
38
+
39
+ .ui.tab.loading {
40
+ position: relative;
41
+ overflow: hidden;
42
+ display: block;
43
+ min-height: 250px;
44
+ text-indent: -10000px;
45
+ }
46
+ .ui.tab.loading * {
47
+ position: relative !important;
48
+ left: -10000px !important;
49
+ }
50
+ .ui.tab.loading:after {
51
+ position: absolute;
52
+ top: 50px;
53
+ left: 50%;
54
+ content: 'Loading...';
55
+ margin-left: -32px;
56
+ text-indent: 5px;
57
+ color: rgba(0, 0, 0, 0.4);
58
+ width: 100%;
59
+ height: 100%;
60
+ padding-top: 75px;
61
+ background: image-url("semantic-ui/loader-large.gif") no-repeat 0px 0px;
62
+ visibility: visible;
63
+ }
@@ -0,0 +1,1096 @@
1
+ /*******************************
2
+ Semantic - Transition
3
+ Author: Jack Lukic
4
+
5
+ CSS animation definitions for
6
+ transition module
7
+
8
+ *******************************/
9
+
10
+ /*
11
+ Some transitions adapted from Animate CSS
12
+ https://github.com/daneden/animate.css
13
+ */
14
+
15
+
16
+ .ui.transition {
17
+ -webkit-backface-visibility: hidden;
18
+ -moz-backface-visibility: hidden;
19
+ -ms-backface-visibility: hidden;
20
+ -o-backface-visibility: hidden;
21
+ backface-visibility: hidden;
22
+
23
+ -webkit-animation-iteration-count: 1;
24
+ -moz-animation-iteration-count: 1;
25
+ -ms-animation-iteration-count: 1;
26
+ -o-animation-iteration-count: 1;
27
+ animation-iteration-count: 1;
28
+
29
+ -webkit-animation-duration: 1s;
30
+ -moz-animation-duration: 1s;
31
+ -ms-animation-duration: 1s;
32
+ -o-animation-duration: 1s;
33
+ animation-duration: 1s;
34
+
35
+ animation-timing-function: ease;
36
+ -webkit-animation-timing-function: ease;
37
+
38
+ -webkit-animation-fill-mode: both;
39
+ -moz-animation-fill-mode: both;
40
+ -ms-animation-fill-mode: both;
41
+ -o-animation-fill-mode: both;
42
+ animation-fill-mode: both;
43
+
44
+ -webkit-transform: translateZ(0);
45
+ -moz-transform: translateZ(0);
46
+ -ms-transform: translateZ(0);
47
+ -o-transform: translateZ(0);
48
+ transform: translateZ(0);
49
+ }
50
+
51
+ /*******************************
52
+ States
53
+ *******************************/
54
+
55
+ /* Loading */
56
+ .ui.loading.transition {
57
+ position: absolute;
58
+ top: -999999px;
59
+ left: -99999px;
60
+ }
61
+
62
+ /* Hidden */
63
+ .ui.hidden.transition {
64
+ display: none;
65
+ }
66
+
67
+ /* Visible */
68
+ .ui.visible.transition {
69
+ display: block;
70
+ visibility: visible;
71
+ }
72
+
73
+ /* Disabled */
74
+ .ui.disabled.transition {
75
+ -webkit-animation-play-state: paused;
76
+ -moz-animation-play-state: paused;
77
+ -ms-animation-play-state: paused;
78
+ -o-animation-play-state: paused;
79
+ animation-play-state: paused;
80
+ }
81
+
82
+ /*******************************
83
+ Variations
84
+ *******************************/
85
+
86
+ .ui.looping.transition {
87
+ -webkit-animation-iteration-count: infinite;
88
+ -moz-animation-iteration-count: infinite;
89
+ -ms-animation-iteration-count: infinite;
90
+ -o-animation-iteration-count: infinite;
91
+ animation-iteration-count: infinite;
92
+ }
93
+
94
+
95
+ /*******************************
96
+ Types
97
+ *******************************/
98
+
99
+ /*--------------
100
+ Emphasis
101
+ ---------------*/
102
+
103
+ .ui.flash.transition {
104
+ -webkit-animation-name: flash;
105
+ -moz-animation-name: flash;
106
+ -o-animation-name: flash;
107
+ animation-name: flash;
108
+ }
109
+ .ui.shake.transition {
110
+ -webkit-animation-name: shake;
111
+ -moz-animation-name: shake;
112
+ -o-animation-name: shake;
113
+ animation-name: shake;
114
+ }
115
+ .ui.bounce.transition {
116
+ -webkit-animation-name: bounce;
117
+ -moz-animation-name: bounce;
118
+ -o-animation-name: bounce;
119
+ animation-name: bounce;
120
+ }
121
+ .ui.tada.transition {
122
+ -webkit-animation-name: tada;
123
+ -moz-animation-name: tada;
124
+ -o-animation-name: tada;
125
+ animation-name: tada;
126
+ }
127
+ /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
128
+ .ui.pulse.transition {
129
+ -webkit-animation-name: pulse;
130
+ -moz-animation-name: pulse;
131
+ -o-animation-name: pulse;
132
+ animation-name: pulse;
133
+ }
134
+ /*--------------
135
+ Flips
136
+ ---------------*/
137
+
138
+ .ui.flip.transition.in,
139
+ .ui.flip.transition.out {
140
+ -webkit-perspective: 2000px;
141
+ perspective: 2000px;
142
+ }
143
+ .ui.horizontal.flip.transition.in,
144
+ .ui.horizontal.flip.transition.out {
145
+ -webkit-animation-name: horizontalFlip;
146
+ -moz-animation-name: horizontalFlip;
147
+ -o-animation-name: horizontalFlip;
148
+ animation-name: horizontalFlip;
149
+ }
150
+ .ui.horizontal.flip.transition.out {
151
+ -webkit-animation-name: horizontalFlipOut;
152
+ -moz-animation-name: horizontalFlipOut;
153
+ -o-animation-name: horizontalFlipOut;
154
+ animation-name: horizontalFlipOut;
155
+ }
156
+ .ui.vertical.flip.transition.in,
157
+ .ui.vertical.flip.transition.out {
158
+ -webkit-animation-name: verticalFlip;
159
+ -moz-animation-name: verticalFlip;
160
+ -o-animation-name: verticalFlip;
161
+ animation-name: verticalFlip;
162
+ }
163
+ .ui.vertical.flip.transition.out {
164
+ -webkit-animation-name: verticalFlipOut;
165
+ -moz-animation-name: verticalFlipOut;
166
+ -o-animation-name: verticalFlipOut;
167
+ animation-name: verticalFlipOut;
168
+ }
169
+
170
+ /*--------------
171
+ Fades
172
+ ---------------*/
173
+
174
+ .ui.fade.transition.in {
175
+ -webkit-animation-name: fade;
176
+ -moz-animation-name: fade;
177
+ -o-animation-name: fade;
178
+ animation-name: fade;
179
+ }
180
+ .ui.fade.transition.out {
181
+ -webkit-animation-name: fadeOut;
182
+ -moz-animation-name: fadeOut;
183
+ -o-animation-name: fadeOut;
184
+ animation-name: fadeOut;
185
+ }
186
+
187
+ .ui.fade.up.transition.in {
188
+ -webkit-animation-name: fadeUp;
189
+ -moz-animation-name: fadeUp;
190
+ -o-animation-name: fadeUp;
191
+ animation-name: fadeUp;
192
+ }
193
+ .ui.fade.up.transition.out {
194
+ -webkit-animation-name: fadeUpOut;
195
+ -moz-animation-name: fadeUpOut;
196
+ -o-animation-name: fadeUpOut;
197
+ animation-name: fadeUpOut;
198
+ }
199
+
200
+ .ui.fade.down.transition.in {
201
+ -webkit-animation-name: fadeDown;
202
+ -moz-animation-name: fadeDown;
203
+ -o-animation-name: fadeDown;
204
+ animation-name: fadeDown;
205
+ }
206
+ .ui.fade.down.transition.out {
207
+ -webkit-animation-name: fadeDownOut;
208
+ -moz-animation-name: fadeDownOut;
209
+ -o-animation-name: fadeDownOut;
210
+ animation-name: fadeDownOut;
211
+ }
212
+
213
+ /*--------------
214
+ Scale
215
+ ---------------*/
216
+
217
+ .ui.scale.transition.in {
218
+ -webkit-animation-name: scale;
219
+ -moz-animation-name: scale;
220
+ -o-animation-name: scale;
221
+ animation-name: scale;
222
+ }
223
+ .ui.scale.transition.out {
224
+ -webkit-animation-name: scaleOut;
225
+ -moz-animation-name: scaleOut;
226
+ -o-animation-name: scaleOut;
227
+ animation-name: scaleOut;
228
+ }
229
+
230
+
231
+
232
+ /*--------------
233
+ Slide
234
+ ---------------*/
235
+
236
+ .ui.slide.down.transition.in {
237
+ -webkit-animation-name: slide;
238
+ -moz-animation-name: slide;
239
+ -o-animation-name: slide;
240
+ animation-name: slide;
241
+ transform-origin: 50% 0%;
242
+ -ms-transform-origin: 50% 0%;
243
+ -webkit-transform-origin: 50% 0%;
244
+ }
245
+ .ui.slide.down.transition.out {
246
+ -webkit-animation-name: slideOut;
247
+ -moz-animation-name: slideOut;
248
+ -o-animation-name: slideOut;
249
+ animation-name: slideOut;
250
+ transform-origin: 50% 0%;
251
+ -ms-transform-origin: 50% 0%;
252
+ -webkit-transform-origin: 50% 0%;
253
+ }
254
+
255
+ .ui.slide.up.transition.in {
256
+ -webkit-animation-name: slide;
257
+ -moz-animation-name: slide;
258
+ -o-animation-name: slide;
259
+ animation-name: slide;
260
+ transform-origin: 50% 100%;
261
+ -ms-transform-origin: 50% 100%;
262
+ -webkit-transform-origin: 50% 100%;
263
+ }
264
+ .ui.slide.up.transition.out {
265
+ -webkit-animation-name: slideOut;
266
+ -moz-animation-name: slideOut;
267
+ -o-animation-name: slideOut;
268
+ animation-name: slideOut;
269
+ transform-origin: 50% 100%;
270
+ -ms-transform-origin: 50% 100%;
271
+ -webkit-transform-origin: 50% 100%;
272
+ }
273
+
274
+
275
+ @-moz-keyframes slide {
276
+ 0% {
277
+ opacity: 0;
278
+ -moz-transform: scaleY(0);
279
+ }
280
+ 100% {
281
+ opacity: 1;
282
+ -moz-transform: scaleY(1);
283
+ }
284
+ }
285
+ @-webkit-keyframes slide {
286
+ 0% {
287
+ opacity: 0;
288
+ -webkit-transform: scaleY(0);
289
+ }
290
+ 100% {
291
+ opacity: 1;
292
+ -webkit-transform: scaleY(1);
293
+ }
294
+ }
295
+ @keyframes slide {
296
+ 0% {
297
+ opacity: 0;
298
+ transform: scaleY(0);
299
+ }
300
+ 100% {
301
+ opacity: 1;
302
+ transform: scaleY(1);
303
+ }
304
+ }
305
+
306
+ @-moz-keyframes slideOut {
307
+ 0% {
308
+ opacity: 1;
309
+ -moz-transform: scaleY(1);
310
+ }
311
+ 100% {
312
+ opacity: 0;
313
+ -moz-transform: scaleY(0);
314
+ }
315
+ }
316
+ @-webkit-keyframes slideOut {
317
+ 0% {
318
+ opacity: 1;
319
+ -webkit-transform: scaleY(1);
320
+ }
321
+ 100% {
322
+ opacity: 0;
323
+ -webkit-transform: scaleY(0);
324
+ }
325
+ }
326
+ @keyframes slideOut {
327
+ 0% {
328
+ opacity: 1;
329
+ transform: scaleY(1);
330
+ }
331
+ 100% {
332
+ opacity: 0;
333
+ transform: scaleY(0);
334
+ }
335
+ }
336
+
337
+ /*******************************
338
+ Animations
339
+ *******************************/
340
+
341
+ /*--------------
342
+ Emphasis
343
+ ---------------*/
344
+
345
+ /* Flash */
346
+ @-webkit-keyframes flash {
347
+ 0%, 50%, 100% {
348
+ opacity: 1;
349
+ }
350
+ 25%, 75% {
351
+ opacity: 0;
352
+ }
353
+ }
354
+ @-moz-keyframes flash {
355
+ 0%, 50%, 100% {
356
+ opacity: 1;
357
+ }
358
+ 25%, 75% {
359
+ opacity: 0;
360
+ }
361
+ }
362
+ @-o-keyframes flash {
363
+ 0%, 50%, 100% {
364
+ opacity: 1;
365
+ }
366
+ 25%, 75% {
367
+ opacity: 0;
368
+ }
369
+ }
370
+ @keyframes flash {
371
+ 0%, 50%, 100% {
372
+ opacity: 1;
373
+ }
374
+ 25%, 75% {
375
+ opacity: 0;
376
+ }
377
+ }
378
+
379
+ /* Shake */
380
+ @-webkit-keyframes shake {
381
+ 0%, 100% {
382
+ -webkit-transform: translateX(0);
383
+ }
384
+ 10%, 30%, 50%, 70%, 90% {
385
+ -webkit-transform: translateX(-10px);
386
+ }
387
+ 20%, 40%, 60%, 80% {
388
+ -webkit-transform: translateX(10px);
389
+ }
390
+ }
391
+ @-moz-keyframes shake {
392
+ 0%, 100% {
393
+ -moz-transform: translateX(0);
394
+ }
395
+ 10%, 30%, 50%, 70%, 90% {
396
+ -moz-transform: translateX(-10px);
397
+ }
398
+ 20%, 40%, 60%, 80% {
399
+ -moz-transform: translateX(10px);
400
+ }
401
+ }
402
+ @-o-keyframes shake {
403
+ 0%, 100% {
404
+ -o-transform: translateX(0);
405
+ }
406
+ 10%, 30%, 50%, 70%, 90% {
407
+ -o-transform: translateX(-10px);
408
+ }
409
+ 20%, 40%, 60%, 80% {
410
+ -o-transform: translateX(10px);
411
+ }
412
+ }
413
+ @keyframes shake {
414
+ 0%, 100% {
415
+ transform: translateX(0);
416
+ }
417
+ 10%, 30%, 50%, 70%, 90% {
418
+ transform: translateX(-10px);
419
+ }
420
+ 20%, 40%, 60%, 80% {
421
+ transform: translateX(10px);
422
+ }
423
+ }
424
+
425
+ /* Bounce */
426
+ @-webkit-keyframes bounce {
427
+ 0%, 20%, 50%, 80%, 100% {
428
+ -webkit-transform: translateY(0);
429
+ }
430
+ 40% {
431
+ -webkit-transform: translateY(-30px);
432
+ }
433
+ 60% {
434
+ -webkit-transform: translateY(-15px);
435
+ }
436
+ }
437
+ @-moz-keyframes bounce {
438
+ 0%, 20%, 50%, 80%, 100% {
439
+ -moz-transform: translateY(0);
440
+ }
441
+ 40% {
442
+ -moz-transform: translateY(-30px);
443
+ }
444
+ 60% {
445
+ -moz-transform: translateY(-15px);
446
+ }
447
+ }
448
+ @-o-keyframes bounce {
449
+ 0%, 20%, 50%, 80%, 100% {
450
+ -o-transform: translateY(0);
451
+ }
452
+ 40% {
453
+ -o-transform: translateY(-30px);
454
+ }
455
+ 60% {
456
+ -o-transform: translateY(-15px);
457
+ }
458
+ }
459
+ @keyframes bounce {
460
+ 0%, 20%, 50%, 80%, 100% {
461
+ transform: translateY(0);
462
+ }
463
+ 40% {
464
+ transform: translateY(-30px);
465
+ }
466
+ 60% {
467
+ transform: translateY(-15px);
468
+ }
469
+ }
470
+
471
+ /* Tada */
472
+ @-webkit-keyframes tada {
473
+ 0% {
474
+ -webkit-transform: scale(1);
475
+ }
476
+ 10%, 20% {
477
+ -webkit-transform: scale(0.9) rotate(-3deg);
478
+ }
479
+ 30%, 50%, 70%, 90% {
480
+ -webkit-transform: scale(1.1) rotate(3deg);
481
+ }
482
+ 40%, 60%, 80% {
483
+ -webkit-transform: scale(1.1) rotate(-3deg);
484
+ }
485
+ 100% {
486
+ -webkit-transform: scale(1) rotate(0);
487
+ }
488
+ }
489
+ @-moz-keyframes tada {
490
+ 0% {
491
+ -moz-transform: scale(1);
492
+ }
493
+ 10%, 20% {
494
+ -moz-transform: scale(0.9) rotate(-3deg);
495
+ }
496
+ 30%, 50%, 70%, 90% {
497
+ -moz-transform: scale(1.1) rotate(3deg);
498
+ }
499
+ 40%, 60%, 80% {
500
+ -moz-transform: scale(1.1) rotate(-3deg);
501
+ }
502
+ 100% {
503
+ -moz-transform: scale(1) rotate(0);
504
+ }
505
+ }
506
+ @-o-keyframes tada {
507
+ 0% {
508
+ -o-transform: scale(1);
509
+ }
510
+ 10%, 20% {
511
+ -o-transform: scale(0.9) rotate(-3deg);
512
+ }
513
+ 30%, 50%, 70%, 90% {
514
+ -o-transform: scale(1.1) rotate(3deg);
515
+ }
516
+ 40%, 60%, 80% {
517
+ -o-transform: scale(1.1) rotate(-3deg);
518
+ }
519
+ 100% {
520
+ -o-transform: scale(1) rotate(0);
521
+ }
522
+ }
523
+
524
+ @keyframes tada {
525
+ 0% {
526
+ transform: scale(1);
527
+ }
528
+ 10%, 20% {
529
+ transform: scale(0.9) rotate(-3deg);
530
+ }
531
+ 30%, 50%, 70%, 90% {
532
+ transform: scale(1.1) rotate(3deg);
533
+ }
534
+ 40%, 60%, 80% {
535
+ transform: scale(1.1) rotate(-3deg);
536
+ }
537
+ 100% {
538
+ transform: scale(1) rotate(0);
539
+ }
540
+ }
541
+
542
+ @-webkit-keyframes pulse {
543
+ 0% {
544
+ -webkit-transform: scale(1);
545
+ opacity: 1;
546
+ }
547
+ 50% {
548
+ -webkit-transform: scale(0.9);
549
+ opacity: 0.7;
550
+ }
551
+ 100% {
552
+ -webkit-transform: scale(1);
553
+ opacity: 1;
554
+ }
555
+ }
556
+
557
+ @-o-keyframes pulse {
558
+ 0% {
559
+ -o-transform: scale(1);
560
+ opacity: 1;
561
+ }
562
+ 50% {
563
+ -o-transform: scale(0.9);
564
+ opacity: 0.7;
565
+ }
566
+ 100% {
567
+ -o-transform: scale(1);
568
+ opacity: 1;
569
+ }
570
+ }
571
+
572
+ @-moz-keyframes pulse {
573
+ 0% {
574
+ -moz-transform: scale(1);
575
+ opacity: 1;
576
+ }
577
+ 50% {
578
+ -moz-transform: scale(0.9);
579
+ opacity: 0.7;
580
+ }
581
+ 100% {
582
+ -moz-transform: scale(1);
583
+ opacity: 1;
584
+ }
585
+ }
586
+
587
+ @keyframes pulse {
588
+ 0% {
589
+ transform: scale(1);
590
+ opacity: 1;
591
+ }
592
+ 50% {
593
+ transform: scale(0.9);
594
+ opacity: 0.7;
595
+ }
596
+ 100% {
597
+ transform: scale(1);
598
+ opacity: 1;
599
+ }
600
+
601
+ }
602
+
603
+
604
+ /*--------------
605
+ Flips
606
+ ---------------*/
607
+
608
+ /* Horizontal */
609
+ @-webkit-keyframes horizontalFlip {
610
+ 0% {
611
+ -webkit-transform: rotateY(-90deg);
612
+ opacity: 0;
613
+ }
614
+ 100% {
615
+ -webkit-transform: rotateY(0deg);
616
+ opacity: 1;
617
+ }
618
+ }
619
+ @-moz-keyframes horizontalFlip {
620
+ 0% {
621
+ -moz-transform: rotateY(-90deg);
622
+ opacity: 0;
623
+ }
624
+ 100% {
625
+ -moz-transform: rotateY(0deg);
626
+ opacity: 1;
627
+ }
628
+ }
629
+ @-o-keyframes horizontalFlip {
630
+ 0% {
631
+ -o-transform: rotateY(-90deg);
632
+ opacity: 0;
633
+ }
634
+ 100% {
635
+ -o-transform: rotateY(0deg);
636
+ opacity: 1;
637
+ }
638
+ }
639
+ @keyframes horizontalFlip {
640
+ 0% {
641
+ transform: rotateY(-90deg);
642
+ opacity: 0;
643
+ }
644
+ 100% {
645
+ transform: rotateY(0deg);
646
+ opacity: 1;
647
+ }
648
+ }
649
+ /* Horizontal */
650
+ @-webkit-keyframes horizontalFlipOut {
651
+ 0% {
652
+ -webkit-transform: rotateY(0deg);
653
+ opacity: 0;
654
+ }
655
+ 100% {
656
+ -webkit-transform: rotateY(90deg);
657
+ opacity: 1;
658
+ }
659
+ }
660
+ @-moz-keyframes horizontalFlipOut {
661
+ 0% {
662
+ -moz-transform: rotateY(0deg);
663
+ opacity: 0;
664
+ }
665
+ 100% {
666
+ -moz-transform: rotateY(90deg);
667
+ opacity: 1;
668
+ }
669
+ }
670
+ @-o-keyframes horizontalFlipOut {
671
+ 0% {
672
+ -o-transform: rotateY(0deg);
673
+ opacity: 0;
674
+ }
675
+ 100% {
676
+ -o-transform: rotateY(90deg);
677
+ opacity: 1;
678
+ }
679
+ }
680
+ @keyframes horizontalFlipOut {
681
+ 0% {
682
+ transform: rotateY(0deg);
683
+ opacity: 0;
684
+ }
685
+ 100% {
686
+ transform: rotateY(90deg);
687
+ opacity: 1;
688
+ }
689
+ }
690
+
691
+ /* Vertical */
692
+ @-webkit-keyframes verticalFlip {
693
+ 0% {
694
+ -webkit-transform: rotateX(-90deg);
695
+ opacity: 0;
696
+ }
697
+ 100% {
698
+ -webkit-transform: rotateX(0deg);
699
+ opacity: 1;
700
+ }
701
+ }
702
+ @-moz-keyframes verticalFlip {
703
+ 0% {
704
+ -moz-transform: rotateX(-90deg);
705
+ opacity: 0;
706
+ }
707
+ 100% {
708
+ -moz-transform: rotateX(0deg);
709
+ opacity: 1;
710
+ }
711
+ }
712
+ @-o-keyframes verticalFlip {
713
+ 0% {
714
+ -o-transform: rotateX(-90deg);
715
+ opacity: 0;
716
+ }
717
+ 100% {
718
+ -o-transform: rotateX(0deg);
719
+ opacity: 1;
720
+ }
721
+ }
722
+ @keyframes verticalFlip {
723
+ 0% {
724
+ transform: rotateX(-90deg);
725
+ opacity: 0;
726
+ }
727
+ 100% {
728
+ transform: rotateX(0deg);
729
+ opacity: 1;
730
+ }
731
+ }
732
+ @-webkit-keyframes verticalFlipOut {
733
+ 0% {
734
+ -webkit-transform: rotateX(0deg);
735
+ opacity: 1;
736
+ }
737
+ 100% {
738
+ -webkit-transform: rotateX(-90deg);
739
+ opacity: 0;
740
+ }
741
+ }
742
+ @-moz-keyframes verticalFlipOut {
743
+ 0% {
744
+ -moz-transform: rotateX(0deg);
745
+ opacity: 1;
746
+ }
747
+ 100% {
748
+ -moz-transform: rotateX(-90deg);
749
+ opacity: 0;
750
+ }
751
+ }
752
+ @-o-keyframes verticalFlipOut {
753
+ 0% {
754
+ -o-transform: rotateX(0deg);
755
+ opacity: 1;
756
+ }
757
+ 100% {
758
+ -o-transform: rotateX(-90deg);
759
+ opacity: 0;
760
+ }
761
+ }
762
+ @keyframes verticalFlipOut {
763
+ 0% {
764
+ transform: rotateX(0deg);
765
+ opacity: 1;
766
+ }
767
+ 100% {
768
+ transform: rotateX(-90deg);
769
+ opacity: 0;
770
+ }
771
+ }
772
+
773
+ /*--------------
774
+ Fades
775
+ ---------------*/
776
+
777
+ /* Fade */
778
+ @-webkit-keyframes fade {
779
+ 0% {
780
+ opacity: 0;
781
+ }
782
+ 100% {
783
+ opacity: 1;
784
+ }
785
+ }
786
+ @-moz-keyframes fade {
787
+ 0% {
788
+ opacity: 0;
789
+ }
790
+ 100% {
791
+ opacity: 1;
792
+ }
793
+ }
794
+ @-o-keyframes fade {
795
+ 0% {
796
+ opacity: 0;
797
+ }
798
+ 100% {
799
+ opacity: 1;
800
+ }
801
+ }
802
+ @keyframes fade {
803
+ 0% {
804
+ opacity: 0;
805
+ }
806
+ 100% {
807
+ opacity: 1;
808
+ }
809
+ }
810
+
811
+ @-webkit-keyframes fadeOut {
812
+ 0% {
813
+ opacity: 1;
814
+ }
815
+ 100% {
816
+ opacity: 0;
817
+ }
818
+ }
819
+ @-moz-keyframes fadeOut {
820
+ 0% {
821
+ opacity: 1;
822
+ }
823
+ 100% {
824
+ opacity: 0;
825
+ }
826
+ }
827
+ @-o-keyframes fadeOut {
828
+ 0% {
829
+ opacity: 1;
830
+ }
831
+ 100% {
832
+ opacity: 0;
833
+ }
834
+ }
835
+ @keyframes fadeOut {
836
+ 0% {
837
+ opacity: 1;
838
+ }
839
+ 100% {
840
+ opacity: 0;
841
+ }
842
+ }
843
+
844
+ /* Fade Up */
845
+ @-webkit-keyframes fadeUp {
846
+ 0% {
847
+ opacity: 0;
848
+ -webkit-transform: translateY(20px);
849
+ }
850
+ 100% {
851
+ opacity: 1;
852
+ -webkit-transform: translateY(0);
853
+ }
854
+ }
855
+ @-moz-keyframes fadeUp {
856
+ 0% {
857
+ opacity: 0;
858
+ -moz-transform: translateY(20px);
859
+ }
860
+ 100% {
861
+ opacity: 1;
862
+ -moz-transform: translateY(0);
863
+ }
864
+ }
865
+ @-o-keyframes fadeUp {
866
+ 0% {
867
+ opacity: 0;
868
+ -o-transform: translateY(20px);
869
+ }
870
+ 100% {
871
+ opacity: 1;
872
+ -o-transform: translateY(0);
873
+ }
874
+ }
875
+ @keyframes fadeUp {
876
+ 0% {
877
+ opacity: 0;
878
+ transform: translateY(20px);
879
+ }
880
+ 100% {
881
+ opacity: 1;
882
+ transform: translateY(0);
883
+ }
884
+ }
885
+
886
+ @-webkit-keyframes fadeUpOut {
887
+ 0% {
888
+ opacity: 1;
889
+ -webkit-transform: translateY(0);
890
+ }
891
+ 100% {
892
+ opacity: 0;
893
+ -webkit-transform: translateY(20px);
894
+ }
895
+ }
896
+ @-moz-keyframes fadeUpOut {
897
+ 0% {
898
+ opacity: 1;
899
+ -moz-transform: translateY(0);
900
+ }
901
+ 100% {
902
+ opacity: 0;
903
+ -moz-transform: translateY(20px);
904
+ }
905
+ }
906
+ @-o-keyframes fadeUpOut {
907
+ 0% {
908
+ opacity: 1;
909
+ -o-transform: translateY(0);
910
+ }
911
+ 100% {
912
+ opacity: 0;
913
+ -o-transform: translateY(20px);
914
+ }
915
+ }
916
+ @keyframes fadeUpOut {
917
+ 0% {
918
+ opacity: 1;
919
+ transform: translateY(0);
920
+ }
921
+ 100% {
922
+ opacity: 0;
923
+ transform: translateY(20px);
924
+ }
925
+ }
926
+
927
+ /* Fade Down */
928
+ @-webkit-keyframes fadeDown {
929
+ 0% {
930
+ opacity: 0;
931
+ -webkit-transform: translateY(-20px);
932
+ }
933
+ 100% {
934
+ opacity: 1;
935
+ -webkit-transform: translateY(0);
936
+ }
937
+ }
938
+ @-moz-keyframes fadeDown {
939
+ 0% {
940
+ opacity: 0;
941
+ -moz-transform: translateY(-20px);
942
+ }
943
+ 100% {
944
+ opacity: 1;
945
+ -moz-transform: translateY(0);
946
+ }
947
+ }
948
+ @-o-keyframes fadeDown {
949
+ 0% {
950
+ opacity: 0;
951
+ -o-transform: translateY(-20px);
952
+ }
953
+ 100% {
954
+ opacity: 1;
955
+ -o-transform: translateY(0);
956
+ }
957
+ }
958
+ @keyframes fadeDown {
959
+ 0% {
960
+ opacity: 0;
961
+ transform: translateY(-20px);
962
+ }
963
+ 100% {
964
+ opacity: 1;
965
+ transform: translateY(0);
966
+ }
967
+ }
968
+
969
+
970
+ @-webkit-keyframes fadeDownOut {
971
+ 0% {
972
+ opacity: 1;
973
+ -webkit-transform: translateY(0);
974
+ }
975
+ 100% {
976
+ opacity: 0;
977
+ -webkit-transform: translateY(-20px);
978
+ }
979
+ }
980
+ @-moz-keyframes fadeDownOut {
981
+ 0% {
982
+ opacity: 1;
983
+ -moz-transform: translateY(0);
984
+ }
985
+ 100% {
986
+ opacity: 0;
987
+ -moz-transform: translateY(-20px);
988
+ }
989
+ }
990
+ @-o-keyframes fadeDownOut {
991
+ 0% {
992
+ opacity: 1;
993
+ -o-transform: translateY(0);
994
+ }
995
+ 100% {
996
+ opacity: 0;
997
+ -o-transform: translateY(-20px);
998
+ }
999
+ }
1000
+ @keyframes fadeDownOut {
1001
+ 0% {
1002
+ opacity: 1;
1003
+ transform: translateY(0);
1004
+ }
1005
+ 100% {
1006
+ opacity: 0;
1007
+ transform: translateY(-20px);
1008
+ }
1009
+ }
1010
+
1011
+ /*--------------
1012
+ Scale
1013
+ ---------------*/
1014
+
1015
+ /* Scale */
1016
+ @-webkit-keyframes scale {
1017
+ 0% {
1018
+ opacity: 0;
1019
+ -webkit-transform: scale(0.7);
1020
+ }
1021
+ 100% {
1022
+ opacity: 1;
1023
+ -webkit-transform: scale(1);
1024
+ }
1025
+ }
1026
+ @-moz-keyframes scale {
1027
+ 0% {
1028
+ opacity: 0;
1029
+ -moz-transform: scale(0.7);
1030
+ }
1031
+ 100% {
1032
+ opacity: 1;
1033
+ -moz-transform: scale(1);
1034
+ }
1035
+ }
1036
+ @-o-keyframes scale {
1037
+ 0% {
1038
+ opacity: 0;
1039
+ -o-transform: scale(0.7);
1040
+ }
1041
+ 100% {
1042
+ opacity: 1;
1043
+ -o-transform: scale(1);
1044
+ }
1045
+ }
1046
+ @keyframes scale {
1047
+ 0% {
1048
+ opacity: 0;
1049
+ transform: scale(0.7);
1050
+ }
1051
+ 100% {
1052
+ opacity: 1;
1053
+ transform: scale(1);
1054
+ }
1055
+ }
1056
+
1057
+ @-webkit-keyframes scaleOut {
1058
+ 0% {
1059
+ opacity: 1;
1060
+ -webkit-transform: scale(1);
1061
+ }
1062
+ 100% {
1063
+ opacity: 0;
1064
+ -webkit-transform: scale(0.7);
1065
+ }
1066
+ }
1067
+ @-moz-keyframes scaleOut {
1068
+ 0% {
1069
+ opacity: 1;
1070
+ -moz-transform: scale(1);
1071
+ }
1072
+ 100% {
1073
+ opacity: 0;
1074
+ -moz-transform: scale(0.7);
1075
+ }
1076
+ }
1077
+ @-o-keyframes scaleOut {
1078
+ 0% {
1079
+ opacity: 1;
1080
+ -o-transform: scale(1);
1081
+ }
1082
+ 100% {
1083
+ opacity: 0;
1084
+ -o-transform: scale(0.7);
1085
+ }
1086
+ }
1087
+ @keyframes scaleOut {
1088
+ 0% {
1089
+ opacity: 1;
1090
+ transform: scale(1);
1091
+ }
1092
+ 100% {
1093
+ opacity: 0;
1094
+ transform: scale(0.7);
1095
+ }
1096
+ }