semantic-ui-sass 0.19.3.1 → 1.7.0.0

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