├── .meteor ├── .finished-upgraders ├── .gitignore ├── .id ├── packages ├── platforms ├── release └── versions ├── README.md ├── both └── collections.js ├── client ├── TodoApp │ ├── app.jsx │ ├── footer.jsx │ └── todoItem.jsx ├── example-animation.css ├── layout.html ├── router.jsx ├── styles.css └── vendor │ └── animate.css └── server ├── methods.js └── publications.js /.meteor/.finished-upgraders: -------------------------------------------------------------------------------- 1 | # This file contains information which helps Meteor properly upgrade your 2 | # app when you run 'meteor update'. You should check it into version control 3 | # with your project. 4 | 5 | notices-for-0.9.0 6 | notices-for-0.9.1 7 | 0.9.4-platform-file 8 | notices-for-facebook-graph-api-2 9 | -------------------------------------------------------------------------------- /.meteor/.gitignore: -------------------------------------------------------------------------------- 1 | local 2 | -------------------------------------------------------------------------------- /.meteor/.id: -------------------------------------------------------------------------------- 1 | # This file contains a token that is unique to your project. 2 | # Check it into your repository along with the rest of this directory. 3 | # It can be used for purposes such as: 4 | # - ensuring you don't accidentally deploy one app on top of another 5 | # - providing package authors with aggregated statistics 6 | 7 | z2ypw7bfxuot17fgz8l 8 | -------------------------------------------------------------------------------- /.meteor/packages: -------------------------------------------------------------------------------- 1 | # Meteor packages used by this project, one per line. 2 | # Check this file (and the other files in this directory) into your repository. 3 | # 4 | # 'meteor add' and 'meteor remove' will edit this file for you, 5 | # but you can also edit it by hand. 6 | 7 | meteor-platform 8 | grigio:babel 9 | grove:react 10 | meteorhacks:flow-router 11 | accounts-ui 12 | accounts-password 13 | -------------------------------------------------------------------------------- /.meteor/platforms: -------------------------------------------------------------------------------- 1 | server 2 | browser 3 | -------------------------------------------------------------------------------- /.meteor/release: -------------------------------------------------------------------------------- 1 | METEOR@1.1.0.2 2 | -------------------------------------------------------------------------------- /.meteor/versions: -------------------------------------------------------------------------------- 1 | accounts-base@1.2.0 2 | accounts-password@1.1.1 3 | accounts-ui@1.1.5 4 | accounts-ui-unstyled@1.1.7 5 | autoupdate@1.2.1 6 | base64@1.0.3 7 | binary-heap@1.0.3 8 | blaze@2.1.2 9 | blaze-tools@1.0.3 10 | boilerplate-generator@1.0.3 11 | callback-hook@1.0.3 12 | check@1.0.5 13 | ddp@1.1.0 14 | deps@1.0.7 15 | ejson@1.0.6 16 | email@1.0.6 17 | fastclick@1.0.3 18 | geojson-utils@1.0.3 19 | grigio:babel@0.1.2 20 | grove:react@0.1.2 21 | html-tools@1.0.4 22 | htmljs@1.0.4 23 | http@1.1.0 24 | id-map@1.0.3 25 | jquery@1.11.3_2 26 | json@1.0.3 27 | launch-screen@1.0.2 28 | less@1.0.14 29 | livedata@1.0.13 30 | localstorage@1.0.3 31 | logging@1.0.7 32 | meteor@1.1.6 33 | meteor-platform@1.2.2 34 | meteorhacks:flow-router@1.4.1 35 | minifiers@1.1.5 36 | minimongo@1.0.8 37 | mobile-status-bar@1.0.3 38 | mongo@1.1.0 39 | npm-bcrypt@0.7.8_2 40 | observe-sequence@1.0.6 41 | ordered-dict@1.0.3 42 | random@1.0.3 43 | reactive-dict@1.1.0 44 | reactive-var@1.0.5 45 | reload@1.1.3 46 | retry@1.0.3 47 | routepolicy@1.0.5 48 | service-configuration@1.0.4 49 | session@1.1.0 50 | sha@1.0.3 51 | spacebars@1.0.6 52 | spacebars-compiler@1.0.6 53 | srp@1.0.3 54 | templating@1.1.1 55 | tracker@1.0.7 56 | ui@1.0.6 57 | underscore@1.0.3 58 | url@1.0.4 59 | webapp@1.2.0 60 | webapp-hashing@1.0.3 61 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # TodoMVC Meteor React example 2 | 3 | Source: https://github.com/grigio/todomvc-meteor-react 4 | 5 | Live: http://todomvc-meteor-react.meteor.com 6 | 7 | Post: https://medium.com/@grigi0/todomvc-meteor-react-with-router-animations-ae3836efe0b1 8 | 9 | ## Credits 10 | 11 | Luigi Maselli and https://github.com/tastejs/todomvc/tree/gh-pages/examples/react 12 | -------------------------------------------------------------------------------- /both/collections.js: -------------------------------------------------------------------------------- 1 | Todos = new Meteor.Collection("todos"); 2 | 3 | Todos.allow({ 4 | insert: function () { 5 | return true; 6 | }, 7 | update: function () { 8 | return true; 9 | }, 10 | remove: function () { 11 | return true; 12 | } 13 | }); -------------------------------------------------------------------------------- /client/TodoApp/app.jsx: -------------------------------------------------------------------------------- 1 | var app = app || {}; 2 | 3 | app.ALL_TODOS = 'all'; 4 | app.ACTIVE_TODOS = 'active'; 5 | app.COMPLETED_TODOS = 'completed'; 6 | 7 | var ENTER_KEY = 13; 8 | // mount animation from React namespace 9 | var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; 10 | 11 | 12 | TodoApp = React.createClass({ 13 | mixins: [ DDPMixin, ReactiveMixin ], 14 | 15 | subscriptions: function() { 16 | return Meteor.subscribe("todos"); 17 | }, 18 | 19 | getReactiveState: function() { 20 | if ( this.subsReady() ) { 21 | // NOTE: when the route change the subscription 22 | // is ready but not the component 23 | this.isMounted() && this.setState({ready:true}); 24 | } 25 | return { 26 | user: Meteor.user() && Meteor.user().emails[0].address, 27 | todos: Todos.find({}, {}).fetch() 28 | }; 29 | }, 30 | 31 | getInitialState: function () { 32 | return { 33 | ready: this.subsReady() || false, 34 | nowShowing: this.props.filter || app.ALL_TODOS, 35 | editing: null 36 | }; 37 | }, 38 | 39 | componentDidMount: function () { 40 | Blaze.render(Template.loginButtons,document.getElementById('login_placeholder')); 41 | }, 42 | 43 | handleNewTodoKeyDown: function (event) { 44 | if (event.which !== ENTER_KEY) { 45 | return; 46 | } 47 | 48 | event.preventDefault(); 49 | 50 | var val = this.refs.newField.getDOMNode().value.trim(); 51 | 52 | if (val) { 53 | this.refs.newField.getDOMNode().value = ''; 54 | Todos.insert({title:val, completed:false}); 55 | } 56 | }, 57 | 58 | messageOrLoading: function () { 59 | return (this.state.ready) ? 'What needs to be done?' : 'loading..' 60 | }, 61 | 62 | clearCompleted: function () { 63 | // NOTE: mass updates of multiple docs are done server-side 64 | var todos = this.state.todos; 65 | var ids = _.pluck(todos, '_id'); 66 | 67 | Meteor.call('clearCompleted', ids); 68 | }, 69 | 70 | toggleAll: function (event) { 71 | var checked = event.target.checked; 72 | 73 | var todos = this.state.todos; 74 | var ids = _.pluck(todos, '_id'); 75 | 76 | Meteor.call('toggleAll', ids, checked); 77 | }, 78 | 79 | toggle: function (todoToToggle) { 80 | Todos.update({_id:todoToToggle._id}, {$set:{completed:!todoToToggle.completed}}); 81 | }, 82 | 83 | destroy: function (todo) { 84 | Todos.remove({_id:todo._id}); 85 | }, 86 | 87 | edit: function (todo) { 88 | this.setState({editing: todo._id}); 89 | }, 90 | 91 | save: function (todoToSave, text) { 92 | Todos.update({_id:todoToSave._id}, {$set:{title:text}}); 93 | this.setState({editing: null}); 94 | }, 95 | 96 | cancel: function () { 97 | this.setState({editing: null}); 98 | }, 99 | 100 | render: function () { 101 | 102 | var footer; 103 | var main; 104 | var todos = this.state.todos; 105 | 106 | var shownTodos = todos.filter(function (todo) { 107 | switch (this.state.nowShowing) { 108 | case app.ACTIVE_TODOS: 109 | return !todo.completed; 110 | case app.COMPLETED_TODOS: 111 | return todo.completed; 112 | default: 113 | return true; 114 | } 115 | }, this); 116 | 117 | var todoItems = shownTodos.map(function (todo) { 118 | return ( 119 | 130 | ); 131 | }, this); 132 | 133 | 134 | var activeTodoCount = todos.reduce(function (accum, todo) { 135 | return todo.completed ? accum : accum + 1; 136 | }, 0); 137 | 138 | var completedCount = todos.length - activeTodoCount; 139 | 140 | if (activeTodoCount || completedCount) { 141 | footer = 142 | ; 148 | } 149 | 150 | if (todos.length) { 151 | main = ( 152 |
153 | 158 |
    159 | 160 | {todoItems} 161 | 162 |
163 |
164 | ); 165 | } 166 | 167 | return ( 168 |
169 | 180 | {main} 181 | {footer} 182 |
183 | ); 184 | } 185 | }); -------------------------------------------------------------------------------- /client/TodoApp/footer.jsx: -------------------------------------------------------------------------------- 1 | TodoFooter = React.createClass({ 2 | render: function () { 3 | var activeTodoWord = 'items'; 4 | var clearButton = null; 5 | 6 | if (this.props.completedCount > 0) { 7 | clearButton = ( 8 | 13 | ); 14 | } 15 | return ( 16 | 47 | ); 48 | } 49 | }); 50 | -------------------------------------------------------------------------------- /client/TodoApp/todoItem.jsx: -------------------------------------------------------------------------------- 1 | var ESCAPE_KEY = 27; 2 | var ENTER_KEY = 13; 3 | 4 | TodoItem = React.createClass({ 5 | handleSubmit: function (event) { 6 | var val = this.state.editText.trim(); 7 | if (val) { 8 | this.props.onSave(val); 9 | this.setState({editText: val}); 10 | } else { 11 | this.props.onDestroy(); 12 | } 13 | }, 14 | 15 | handleEdit: function () { 16 | this.props.onEdit(); 17 | this.setState({editText: this.props.todo.title}); 18 | }, 19 | 20 | handleKeyDown: function (event) { 21 | if (event.which === ESCAPE_KEY) { 22 | this.setState({editText: this.props.todo.title}); 23 | this.props.onCancel(event); 24 | } else if (event.which === ENTER_KEY) { 25 | this.handleSubmit(event); 26 | } 27 | }, 28 | 29 | handleChange: function (event) { 30 | this.setState({editText: event.target.value}); 31 | }, 32 | 33 | getInitialState: function () { 34 | return {editText: this.props.todo.title}; 35 | }, 36 | 37 | /** 38 | * This is a completely optional performance enhancement that you can 39 | * implement on any React component. If you were to delete this method 40 | * the app would still work correctly (and still be very performant!), we 41 | * just use it as an example of how little code it takes to get an order 42 | * of magnitude performance improvement. 43 | */ 44 | shouldComponentUpdate: function (nextProps, nextState) { 45 | return ( 46 | nextProps.todo !== this.props.todo || 47 | nextProps.editing !== this.props.editing || 48 | nextState.editText !== this.state.editText 49 | ); 50 | }, 51 | 52 | /** 53 | * Safely manipulate the DOM after updating the state when invoking 54 | * `this.props.onEdit()` in the `handleEdit` method above. 55 | * For more info refer to notes at https://facebook.github.io/react/docs/component-api.html#setstate 56 | * and https://facebook.github.io/react/docs/component-specs.html#updating-componentdidupdate 57 | */ 58 | componentDidUpdate: function (prevProps) { 59 | if (!prevProps.editing && this.props.editing) { 60 | var node = this.refs.editField.getDOMNode(); 61 | node.focus(); 62 | node.setSelectionRange(node.value.length, node.value.length); 63 | } 64 | }, 65 | 66 | render: function () { 67 | // NOTE: to replace React.addons.classSet DEPRECATED 68 | var classString = `${(this.props.todo.completed) ? 'completed':''} ${(this.props.editing) ? 'editing':''}`; 69 | return ( 70 |
  • 71 |
    72 | 78 | 81 |
    83 | 91 |
    • 92 | ); 93 | } 94 | }); 95 | -------------------------------------------------------------------------------- /client/example-animation.css: -------------------------------------------------------------------------------- 1 | /*.example-enter { 2 | opacity: 0.01; 3 | transition: opacity .5s ease-in; 4 | } 5 | 6 | .example-enter.example-enter-active { 7 | opacity: 1; 8 | } 9 | .example-leave { 10 | background: red; 11 | opacity: 1; 12 | transition: opacity .5s ease-in; 13 | } 14 | 15 | .example-leave.example-leave-active { 16 | opacity: 0.01; 17 | }*/ 18 | 19 | /* bounce */ 20 | 21 | .example-enter { 22 | -webkit-animation-duration: .75s; 23 | animation-duration: .75s; 24 | -webkit-animation-name: bounceInUp; 25 | animation-name: bounceInUp; 26 | -webkit-transform-origin: center bottom; 27 | transform-origin: center bottom; 28 | } 29 | 30 | .example-enter.example-enter-active { 31 | } 32 | 33 | .example-leave { 34 | -webkit-animation-name: zoomOut; 35 | animation-name: zoomOut; 36 | -webkit-animation-duration: .75s; 37 | animation-duration: .75s; 38 | background: yellow; 39 | opacity: 1.0; 40 | transition: opacity .5s ease-in; 41 | 42 | } 43 | 44 | .example-leave.example-leave-active { 45 | opacity: 0.01; 46 | } -------------------------------------------------------------------------------- /client/layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Meteor React • TodoMVC 4 | 5 | 6 | 7 |
    8 | 9 | 14 | 15 | -------------------------------------------------------------------------------- /client/router.jsx: -------------------------------------------------------------------------------- 1 | FlowRouter.route('/:filter?', { 2 | subscriptions: function(params) { 3 | // subscribe at router or component level 4 | }, 5 | 6 | action: function(params) { 7 | // We need to replace an existing React component if route has changed 8 | React.unmountComponentAtNode(document.getElementById('yield')); 9 | React.render(, document.getElementById('yield')); 10 | } 11 | }); -------------------------------------------------------------------------------- /client/styles.css: -------------------------------------------------------------------------------- 1 | 2 | hr { 3 | margin: 20px 0; 4 | border: 0; 5 | border-top: 1px dashed #c5c5c5; 6 | border-bottom: 1px dashed #f7f7f7; 7 | } 8 | 9 | .learn a { 10 | font-weight: normal; 11 | text-decoration: none; 12 | color: #b83f45; 13 | } 14 | 15 | .learn a:hover { 16 | text-decoration: underline; 17 | color: #787e7e; 18 | } 19 | 20 | .learn h3, 21 | .learn h4, 22 | .learn h5 { 23 | margin: 10px 0; 24 | font-weight: 500; 25 | line-height: 1.2; 26 | color: #000; 27 | } 28 | 29 | .learn h3 { 30 | font-size: 24px; 31 | } 32 | 33 | .learn h4 { 34 | font-size: 18px; 35 | } 36 | 37 | .learn h5 { 38 | margin-bottom: 0; 39 | font-size: 14px; 40 | } 41 | 42 | .learn ul { 43 | padding: 0; 44 | margin: 0 0 30px 25px; 45 | } 46 | 47 | .learn li { 48 | line-height: 20px; 49 | } 50 | 51 | .learn p { 52 | font-size: 15px; 53 | font-weight: 300; 54 | line-height: 1.3; 55 | margin-top: 0; 56 | margin-bottom: 0; 57 | } 58 | 59 | #issue-count { 60 | display: none; 61 | } 62 | 63 | .quote { 64 | border: none; 65 | margin: 20px 0 60px 0; 66 | } 67 | 68 | .quote p { 69 | font-style: italic; 70 | } 71 | 72 | .quote p:before { 73 | content: '“'; 74 | font-size: 50px; 75 | opacity: .15; 76 | position: absolute; 77 | top: -20px; 78 | left: 3px; 79 | } 80 | 81 | .quote p:after { 82 | content: '”'; 83 | font-size: 50px; 84 | opacity: .15; 85 | position: absolute; 86 | bottom: -42px; 87 | right: 3px; 88 | } 89 | 90 | .quote footer { 91 | position: absolute; 92 | bottom: -40px; 93 | right: 0; 94 | } 95 | 96 | .quote footer img { 97 | border-radius: 3px; 98 | } 99 | 100 | .quote footer a { 101 | margin-left: 5px; 102 | vertical-align: middle; 103 | } 104 | 105 | .speech-bubble { 106 | position: relative; 107 | padding: 10px; 108 | background: rgba(0, 0, 0, .04); 109 | border-radius: 5px; 110 | } 111 | 112 | .speech-bubble:after { 113 | content: ''; 114 | position: absolute; 115 | top: 100%; 116 | right: 30px; 117 | border: 13px solid transparent; 118 | border-top-color: rgba(0, 0, 0, .04); 119 | } 120 | 121 | .learn-bar > .learn { 122 | position: absolute; 123 | width: 272px; 124 | top: 8px; 125 | left: -300px; 126 | padding: 10px; 127 | border-radius: 5px; 128 | background-color: rgba(255, 255, 255, .6); 129 | transition-property: left; 130 | transition-duration: 500ms; 131 | } 132 | 133 | @media (min-width: 899px) { 134 | .learn-bar { 135 | width: auto; 136 | padding-left: 300px; 137 | } 138 | 139 | .learn-bar > .learn { 140 | left: 8px; 141 | } 142 | } 143 | 144 | html, 145 | body { 146 | margin: 0; 147 | padding: 0; 148 | } 149 | 150 | button { 151 | margin: 0; 152 | padding: 0; 153 | border: 0; 154 | background: none; 155 | font-size: 100%; 156 | vertical-align: baseline; 157 | font-family: inherit; 158 | font-weight: inherit; 159 | color: inherit; 160 | -webkit-appearance: none; 161 | -ms-appearance: none; 162 | appearance: none; 163 | -webkit-font-smoothing: antialiased; 164 | -moz-font-smoothing: antialiased; 165 | -ms-font-smoothing: antialiased; 166 | font-smoothing: antialiased; 167 | } 168 | 169 | body { 170 | font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; 171 | line-height: 1.4em; 172 | background: #f5f5f5; 173 | color: #4d4d4d; 174 | min-width: 230px; 175 | max-width: 550px; 176 | margin: 0 auto; 177 | -webkit-font-smoothing: antialiased; 178 | -moz-font-smoothing: antialiased; 179 | -ms-font-smoothing: antialiased; 180 | font-smoothing: antialiased; 181 | font-weight: 300; 182 | } 183 | 184 | button, 185 | input[type="checkbox"] { 186 | outline: none; 187 | } 188 | 189 | .hidden { 190 | display: none; 191 | } 192 | 193 | #todoapp { 194 | background: #fff; 195 | margin: 130px 0 40px 0; 196 | position: relative; 197 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 198 | 0 25px 50px 0 rgba(0, 0, 0, 0.1); 199 | } 200 | 201 | #todoapp input::-webkit-input-placeholder { 202 | font-style: italic; 203 | font-weight: 300; 204 | color: #e6e6e6; 205 | } 206 | 207 | #todoapp input::-moz-placeholder { 208 | font-style: italic; 209 | font-weight: 300; 210 | color: #e6e6e6; 211 | } 212 | 213 | #todoapp input::input-placeholder { 214 | font-style: italic; 215 | font-weight: 300; 216 | color: #e6e6e6; 217 | } 218 | 219 | #todoapp h1 { 220 | position: absolute; 221 | top: -155px; 222 | width: 100%; 223 | font-size: 100px; 224 | font-weight: 100; 225 | text-align: center; 226 | color: rgba(175, 47, 47, 0.15); 227 | -webkit-text-rendering: optimizeLegibility; 228 | -moz-text-rendering: optimizeLegibility; 229 | -ms-text-rendering: optimizeLegibility; 230 | text-rendering: optimizeLegibility; 231 | } 232 | 233 | #new-todo, 234 | .edit { 235 | position: relative; 236 | margin: 0; 237 | width: 100%; 238 | font-size: 24px; 239 | font-family: inherit; 240 | font-weight: inherit; 241 | line-height: 1.4em; 242 | border: 0; 243 | outline: none; 244 | color: inherit; 245 | padding: 6px; 246 | border: 1px solid #999; 247 | box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); 248 | -ms-box-sizing: border-box; 249 | box-sizing: border-box; 250 | -webkit-font-smoothing: antialiased; 251 | -moz-font-smoothing: antialiased; 252 | -ms-font-smoothing: antialiased; 253 | font-smoothing: antialiased; 254 | } 255 | 256 | #new-todo { 257 | padding: 16px 16px 16px 60px; 258 | border: none; 259 | background: rgba(0, 0, 0, 0.003); 260 | box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03); 261 | } 262 | 263 | #main { 264 | position: relative; 265 | z-index: 2; 266 | border-top: 1px solid #e6e6e6; 267 | } 268 | 269 | label[for='toggle-all'] { 270 | display: none; 271 | } 272 | 273 | #toggle-all { 274 | position: absolute; 275 | top: -55px; 276 | left: -12px; 277 | width: 60px; 278 | height: 34px; 279 | text-align: center; 280 | border: none; /* Mobile Safari */ 281 | } 282 | 283 | #toggle-all:before { 284 | content: '❯'; 285 | font-size: 22px; 286 | color: #e6e6e6; 287 | padding: 10px 27px 10px 27px; 288 | } 289 | 290 | #toggle-all:checked:before { 291 | color: #737373; 292 | } 293 | 294 | #todo-list { 295 | margin: 0; 296 | padding: 0; 297 | list-style: none; 298 | } 299 | 300 | #todo-list li { 301 | position: relative; 302 | font-size: 24px; 303 | border-bottom: 1px solid #ededed; 304 | } 305 | 306 | #todo-list li:last-child { 307 | border-bottom: none; 308 | } 309 | 310 | #todo-list li.editing { 311 | border-bottom: none; 312 | padding: 0; 313 | } 314 | 315 | #todo-list li.editing .edit { 316 | display: block; 317 | width: 506px; 318 | padding: 13px 17px 12px 17px; 319 | margin: 0 0 0 43px; 320 | } 321 | 322 | #todo-list li.editing .view { 323 | display: none; 324 | } 325 | 326 | #todo-list li .toggle { 327 | text-align: center; 328 | width: 40px; 329 | /* auto, since non-WebKit browsers doesn't support input styling */ 330 | height: auto; 331 | position: absolute; 332 | top: 0; 333 | bottom: 0; 334 | margin: auto 0; 335 | border: none; /* Mobile Safari */ 336 | -webkit-appearance: none; 337 | -ms-appearance: none; 338 | appearance: none; 339 | } 340 | 341 | #todo-list li .toggle:after { 342 | content: url('data:image/svg+xml;utf8,'); 343 | } 344 | 345 | #todo-list li .toggle:checked:after { 346 | content: url('data:image/svg+xml;utf8,'); 347 | } 348 | 349 | #todo-list li label { 350 | white-space: pre; 351 | word-break: break-word; 352 | padding: 15px 60px 15px 15px; 353 | margin-left: 45px; 354 | display: block; 355 | line-height: 1.2; 356 | transition: color 0.4s; 357 | } 358 | 359 | #todo-list li.completed label { 360 | color: #d9d9d9; 361 | text-decoration: line-through; 362 | } 363 | 364 | #todo-list li .destroy { 365 | display: none; 366 | position: absolute; 367 | top: 0; 368 | right: 10px; 369 | bottom: 0; 370 | width: 40px; 371 | height: 40px; 372 | margin: auto 0; 373 | font-size: 30px; 374 | color: #cc9a9a; 375 | margin-bottom: 11px; 376 | transition: color 0.2s ease-out; 377 | } 378 | 379 | #todo-list li .destroy:hover { 380 | color: #af5b5e; 381 | } 382 | 383 | #todo-list li .destroy:after { 384 | content: '×'; 385 | } 386 | 387 | #todo-list li:hover .destroy { 388 | display: block; 389 | } 390 | 391 | #todo-list li .edit { 392 | display: none; 393 | } 394 | 395 | #todo-list li.editing:last-child { 396 | margin-bottom: -1px; 397 | } 398 | 399 | #footer { 400 | color: #777; 401 | padding: 10px 15px; 402 | height: 20px; 403 | text-align: center; 404 | border-top: 1px solid #e6e6e6; 405 | } 406 | 407 | #footer:before { 408 | content: ''; 409 | position: absolute; 410 | right: 0; 411 | bottom: 0; 412 | left: 0; 413 | height: 50px; 414 | overflow: hidden; 415 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 416 | 0 8px 0 -3px #f6f6f6, 417 | 0 9px 1px -3px rgba(0, 0, 0, 0.2), 418 | 0 16px 0 -6px #f6f6f6, 419 | 0 17px 2px -6px rgba(0, 0, 0, 0.2); 420 | } 421 | 422 | #todo-count { 423 | float: left; 424 | text-align: left; 425 | } 426 | 427 | #todo-count strong { 428 | font-weight: 300; 429 | } 430 | 431 | #filters { 432 | margin: 0; 433 | padding: 0; 434 | list-style: none; 435 | position: absolute; 436 | right: 0; 437 | left: 0; 438 | } 439 | 440 | #filters li { 441 | display: inline; 442 | } 443 | 444 | #filters li a { 445 | color: inherit; 446 | margin: 3px; 447 | padding: 3px 7px; 448 | text-decoration: none; 449 | border: 1px solid transparent; 450 | border-radius: 3px; 451 | } 452 | 453 | #filters li a.selected, 454 | #filters li a:hover { 455 | border-color: rgba(175, 47, 47, 0.1); 456 | } 457 | 458 | #filters li a.selected { 459 | border-color: rgba(175, 47, 47, 0.2); 460 | } 461 | 462 | #clear-completed, 463 | html #clear-completed:active { 464 | float: right; 465 | position: relative; 466 | line-height: 20px; 467 | text-decoration: none; 468 | cursor: pointer; 469 | visibility: hidden; 470 | position: relative; 471 | } 472 | 473 | #clear-completed::after { 474 | visibility: visible; 475 | content: 'Clear completed'; 476 | position: absolute; 477 | right: 0; 478 | white-space: nowrap; 479 | } 480 | 481 | #clear-completed:hover::after { 482 | text-decoration: underline; 483 | } 484 | 485 | #info { 486 | margin: 65px auto 0; 487 | color: #bfbfbf; 488 | font-size: 10px; 489 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); 490 | text-align: center; 491 | } 492 | 493 | #info p { 494 | line-height: 1; 495 | } 496 | 497 | #info a { 498 | color: inherit; 499 | text-decoration: none; 500 | font-weight: 400; 501 | } 502 | 503 | #info a:hover { 504 | text-decoration: underline; 505 | } 506 | 507 | /* 508 | Hack to remove background from Mobile Safari. 509 | Can't use it globally since it destroys checkboxes in Firefox 510 | */ 511 | @media screen and (-webkit-min-device-pixel-ratio:0) { 512 | #toggle-all, 513 | #todo-list li .toggle { 514 | background: none; 515 | } 516 | 517 | #todo-list li .toggle { 518 | height: 40px; 519 | } 520 | 521 | #toggle-all { 522 | -webkit-transform: rotate(90deg); 523 | transform: rotate(90deg); 524 | -webkit-appearance: none; 525 | appearance: none; 526 | } 527 | } 528 | 529 | @media (max-width: 430px) { 530 | #footer { 531 | height: 50px; 532 | } 533 | 534 | #filters { 535 | bottom: 10px; 536 | } 537 | } -------------------------------------------------------------------------------- /client/vendor/animate.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Animate.css - http://daneden.me/animate 3 | Licensed under the MIT license - http://opensource.org/licenses/MIT 4 | 5 | Copyright (c) 2015 Daniel Eden 6 | */ 7 | 8 | .animated { 9 | -webkit-animation-duration: 1s; 10 | animation-duration: 1s; 11 | -webkit-animation-fill-mode: both; 12 | animation-fill-mode: both; 13 | } 14 | 15 | .animated.infinite { 16 | -webkit-animation-iteration-count: infinite; 17 | animation-iteration-count: infinite; 18 | } 19 | 20 | .animated.hinge { 21 | -webkit-animation-duration: 2s; 22 | animation-duration: 2s; 23 | } 24 | 25 | .animated.bounceIn, 26 | .animated.bounceOut { 27 | -webkit-animation-duration: .75s; 28 | animation-duration: .75s; 29 | } 30 | 31 | .animated.flipOutX, 32 | .animated.flipOutY { 33 | -webkit-animation-duration: .75s; 34 | animation-duration: .75s; 35 | } 36 | 37 | @-webkit-keyframes bounce { 38 | 0%, 20%, 53%, 80%, 100% { 39 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 40 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 41 | -webkit-transform: translate3d(0,0,0); 42 | transform: translate3d(0,0,0); 43 | } 44 | 45 | 40%, 43% { 46 | -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 47 | transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 48 | -webkit-transform: translate3d(0, -30px, 0); 49 | transform: translate3d(0, -30px, 0); 50 | } 51 | 52 | 70% { 53 | -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 54 | transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 55 | -webkit-transform: translate3d(0, -15px, 0); 56 | transform: translate3d(0, -15px, 0); 57 | } 58 | 59 | 90% { 60 | -webkit-transform: translate3d(0,-4px,0); 61 | transform: translate3d(0,-4px,0); 62 | } 63 | } 64 | 65 | @keyframes bounce { 66 | 0%, 20%, 53%, 80%, 100% { 67 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 68 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 69 | -webkit-transform: translate3d(0,0,0); 70 | transform: translate3d(0,0,0); 71 | } 72 | 73 | 40%, 43% { 74 | -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 75 | transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 76 | -webkit-transform: translate3d(0, -30px, 0); 77 | transform: translate3d(0, -30px, 0); 78 | } 79 | 80 | 70% { 81 | -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 82 | transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 83 | -webkit-transform: translate3d(0, -15px, 0); 84 | transform: translate3d(0, -15px, 0); 85 | } 86 | 87 | 90% { 88 | -webkit-transform: translate3d(0,-4px,0); 89 | transform: translate3d(0,-4px,0); 90 | } 91 | } 92 | 93 | .bounce { 94 | -webkit-animation-name: bounce; 95 | animation-name: bounce; 96 | -webkit-transform-origin: center bottom; 97 | transform-origin: center bottom; 98 | } 99 | 100 | @-webkit-keyframes flash { 101 | 0%, 50%, 100% { 102 | opacity: 1; 103 | } 104 | 105 | 25%, 75% { 106 | opacity: 0; 107 | } 108 | } 109 | 110 | @keyframes flash { 111 | 0%, 50%, 100% { 112 | opacity: 1; 113 | } 114 | 115 | 25%, 75% { 116 | opacity: 0; 117 | } 118 | } 119 | 120 | .flash { 121 | -webkit-animation-name: flash; 122 | animation-name: flash; 123 | } 124 | 125 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 126 | 127 | @-webkit-keyframes pulse { 128 | 0% { 129 | -webkit-transform: scale3d(1, 1, 1); 130 | transform: scale3d(1, 1, 1); 131 | } 132 | 133 | 50% { 134 | -webkit-transform: scale3d(1.05, 1.05, 1.05); 135 | transform: scale3d(1.05, 1.05, 1.05); 136 | } 137 | 138 | 100% { 139 | -webkit-transform: scale3d(1, 1, 1); 140 | transform: scale3d(1, 1, 1); 141 | } 142 | } 143 | 144 | @keyframes pulse { 145 | 0% { 146 | -webkit-transform: scale3d(1, 1, 1); 147 | transform: scale3d(1, 1, 1); 148 | } 149 | 150 | 50% { 151 | -webkit-transform: scale3d(1.05, 1.05, 1.05); 152 | transform: scale3d(1.05, 1.05, 1.05); 153 | } 154 | 155 | 100% { 156 | -webkit-transform: scale3d(1, 1, 1); 157 | transform: scale3d(1, 1, 1); 158 | } 159 | } 160 | 161 | .pulse { 162 | -webkit-animation-name: pulse; 163 | animation-name: pulse; 164 | } 165 | 166 | @-webkit-keyframes rubberBand { 167 | 0% { 168 | -webkit-transform: scale3d(1, 1, 1); 169 | transform: scale3d(1, 1, 1); 170 | } 171 | 172 | 30% { 173 | -webkit-transform: scale3d(1.25, 0.75, 1); 174 | transform: scale3d(1.25, 0.75, 1); 175 | } 176 | 177 | 40% { 178 | -webkit-transform: scale3d(0.75, 1.25, 1); 179 | transform: scale3d(0.75, 1.25, 1); 180 | } 181 | 182 | 50% { 183 | -webkit-transform: scale3d(1.15, 0.85, 1); 184 | transform: scale3d(1.15, 0.85, 1); 185 | } 186 | 187 | 65% { 188 | -webkit-transform: scale3d(.95, 1.05, 1); 189 | transform: scale3d(.95, 1.05, 1); 190 | } 191 | 192 | 75% { 193 | -webkit-transform: scale3d(1.05, .95, 1); 194 | transform: scale3d(1.05, .95, 1); 195 | } 196 | 197 | 100% { 198 | -webkit-transform: scale3d(1, 1, 1); 199 | transform: scale3d(1, 1, 1); 200 | } 201 | } 202 | 203 | @keyframes rubberBand { 204 | 0% { 205 | -webkit-transform: scale3d(1, 1, 1); 206 | transform: scale3d(1, 1, 1); 207 | } 208 | 209 | 30% { 210 | -webkit-transform: scale3d(1.25, 0.75, 1); 211 | transform: scale3d(1.25, 0.75, 1); 212 | } 213 | 214 | 40% { 215 | -webkit-transform: scale3d(0.75, 1.25, 1); 216 | transform: scale3d(0.75, 1.25, 1); 217 | } 218 | 219 | 50% { 220 | -webkit-transform: scale3d(1.15, 0.85, 1); 221 | transform: scale3d(1.15, 0.85, 1); 222 | } 223 | 224 | 65% { 225 | -webkit-transform: scale3d(.95, 1.05, 1); 226 | transform: scale3d(.95, 1.05, 1); 227 | } 228 | 229 | 75% { 230 | -webkit-transform: scale3d(1.05, .95, 1); 231 | transform: scale3d(1.05, .95, 1); 232 | } 233 | 234 | 100% { 235 | -webkit-transform: scale3d(1, 1, 1); 236 | transform: scale3d(1, 1, 1); 237 | } 238 | } 239 | 240 | .rubberBand { 241 | -webkit-animation-name: rubberBand; 242 | animation-name: rubberBand; 243 | } 244 | 245 | @-webkit-keyframes shake { 246 | 0%, 100% { 247 | -webkit-transform: translate3d(0, 0, 0); 248 | transform: translate3d(0, 0, 0); 249 | } 250 | 251 | 10%, 30%, 50%, 70%, 90% { 252 | -webkit-transform: translate3d(-10px, 0, 0); 253 | transform: translate3d(-10px, 0, 0); 254 | } 255 | 256 | 20%, 40%, 60%, 80% { 257 | -webkit-transform: translate3d(10px, 0, 0); 258 | transform: translate3d(10px, 0, 0); 259 | } 260 | } 261 | 262 | @keyframes shake { 263 | 0%, 100% { 264 | -webkit-transform: translate3d(0, 0, 0); 265 | transform: translate3d(0, 0, 0); 266 | } 267 | 268 | 10%, 30%, 50%, 70%, 90% { 269 | -webkit-transform: translate3d(-10px, 0, 0); 270 | transform: translate3d(-10px, 0, 0); 271 | } 272 | 273 | 20%, 40%, 60%, 80% { 274 | -webkit-transform: translate3d(10px, 0, 0); 275 | transform: translate3d(10px, 0, 0); 276 | } 277 | } 278 | 279 | .shake { 280 | -webkit-animation-name: shake; 281 | animation-name: shake; 282 | } 283 | 284 | @-webkit-keyframes swing { 285 | 20% { 286 | -webkit-transform: rotate3d(0, 0, 1, 15deg); 287 | transform: rotate3d(0, 0, 1, 15deg); 288 | } 289 | 290 | 40% { 291 | -webkit-transform: rotate3d(0, 0, 1, -10deg); 292 | transform: rotate3d(0, 0, 1, -10deg); 293 | } 294 | 295 | 60% { 296 | -webkit-transform: rotate3d(0, 0, 1, 5deg); 297 | transform: rotate3d(0, 0, 1, 5deg); 298 | } 299 | 300 | 80% { 301 | -webkit-transform: rotate3d(0, 0, 1, -5deg); 302 | transform: rotate3d(0, 0, 1, -5deg); 303 | } 304 | 305 | 100% { 306 | -webkit-transform: rotate3d(0, 0, 1, 0deg); 307 | transform: rotate3d(0, 0, 1, 0deg); 308 | } 309 | } 310 | 311 | @keyframes swing { 312 | 20% { 313 | -webkit-transform: rotate3d(0, 0, 1, 15deg); 314 | transform: rotate3d(0, 0, 1, 15deg); 315 | } 316 | 317 | 40% { 318 | -webkit-transform: rotate3d(0, 0, 1, -10deg); 319 | transform: rotate3d(0, 0, 1, -10deg); 320 | } 321 | 322 | 60% { 323 | -webkit-transform: rotate3d(0, 0, 1, 5deg); 324 | transform: rotate3d(0, 0, 1, 5deg); 325 | } 326 | 327 | 80% { 328 | -webkit-transform: rotate3d(0, 0, 1, -5deg); 329 | transform: rotate3d(0, 0, 1, -5deg); 330 | } 331 | 332 | 100% { 333 | -webkit-transform: rotate3d(0, 0, 1, 0deg); 334 | transform: rotate3d(0, 0, 1, 0deg); 335 | } 336 | } 337 | 338 | .swing { 339 | -webkit-transform-origin: top center; 340 | transform-origin: top center; 341 | -webkit-animation-name: swing; 342 | animation-name: swing; 343 | } 344 | 345 | @-webkit-keyframes tada { 346 | 0% { 347 | -webkit-transform: scale3d(1, 1, 1); 348 | transform: scale3d(1, 1, 1); 349 | } 350 | 351 | 10%, 20% { 352 | -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 353 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 354 | } 355 | 356 | 30%, 50%, 70%, 90% { 357 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 358 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 359 | } 360 | 361 | 40%, 60%, 80% { 362 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 363 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 364 | } 365 | 366 | 100% { 367 | -webkit-transform: scale3d(1, 1, 1); 368 | transform: scale3d(1, 1, 1); 369 | } 370 | } 371 | 372 | @keyframes tada { 373 | 0% { 374 | -webkit-transform: scale3d(1, 1, 1); 375 | transform: scale3d(1, 1, 1); 376 | } 377 | 378 | 10%, 20% { 379 | -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 380 | transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 381 | } 382 | 383 | 30%, 50%, 70%, 90% { 384 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 385 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); 386 | } 387 | 388 | 40%, 60%, 80% { 389 | -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 390 | transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); 391 | } 392 | 393 | 100% { 394 | -webkit-transform: scale3d(1, 1, 1); 395 | transform: scale3d(1, 1, 1); 396 | } 397 | } 398 | 399 | .tada { 400 | -webkit-animation-name: tada; 401 | animation-name: tada; 402 | } 403 | 404 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 405 | 406 | @-webkit-keyframes wobble { 407 | 0% { 408 | -webkit-transform: none; 409 | transform: none; 410 | } 411 | 412 | 15% { 413 | -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 414 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 415 | } 416 | 417 | 30% { 418 | -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 419 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 420 | } 421 | 422 | 45% { 423 | -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 424 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 425 | } 426 | 427 | 60% { 428 | -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 429 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 430 | } 431 | 432 | 75% { 433 | -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 434 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 435 | } 436 | 437 | 100% { 438 | -webkit-transform: none; 439 | transform: none; 440 | } 441 | } 442 | 443 | @keyframes wobble { 444 | 0% { 445 | -webkit-transform: none; 446 | transform: none; 447 | } 448 | 449 | 15% { 450 | -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 451 | transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); 452 | } 453 | 454 | 30% { 455 | -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 456 | transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); 457 | } 458 | 459 | 45% { 460 | -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 461 | transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); 462 | } 463 | 464 | 60% { 465 | -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 466 | transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); 467 | } 468 | 469 | 75% { 470 | -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 471 | transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); 472 | } 473 | 474 | 100% { 475 | -webkit-transform: none; 476 | transform: none; 477 | } 478 | } 479 | 480 | .wobble { 481 | -webkit-animation-name: wobble; 482 | animation-name: wobble; 483 | } 484 | 485 | @-webkit-keyframes bounceIn { 486 | 0%, 20%, 40%, 60%, 80%, 100% { 487 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 488 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 489 | } 490 | 491 | 0% { 492 | opacity: 0; 493 | -webkit-transform: scale3d(.3, .3, .3); 494 | transform: scale3d(.3, .3, .3); 495 | } 496 | 497 | 20% { 498 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 499 | transform: scale3d(1.1, 1.1, 1.1); 500 | } 501 | 502 | 40% { 503 | -webkit-transform: scale3d(.9, .9, .9); 504 | transform: scale3d(.9, .9, .9); 505 | } 506 | 507 | 60% { 508 | opacity: 1; 509 | -webkit-transform: scale3d(1.03, 1.03, 1.03); 510 | transform: scale3d(1.03, 1.03, 1.03); 511 | } 512 | 513 | 80% { 514 | -webkit-transform: scale3d(.97, .97, .97); 515 | transform: scale3d(.97, .97, .97); 516 | } 517 | 518 | 100% { 519 | opacity: 1; 520 | -webkit-transform: scale3d(1, 1, 1); 521 | transform: scale3d(1, 1, 1); 522 | } 523 | } 524 | 525 | @keyframes bounceIn { 526 | 0%, 20%, 40%, 60%, 80%, 100% { 527 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 528 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 529 | } 530 | 531 | 0% { 532 | opacity: 0; 533 | -webkit-transform: scale3d(.3, .3, .3); 534 | transform: scale3d(.3, .3, .3); 535 | } 536 | 537 | 20% { 538 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 539 | transform: scale3d(1.1, 1.1, 1.1); 540 | } 541 | 542 | 40% { 543 | -webkit-transform: scale3d(.9, .9, .9); 544 | transform: scale3d(.9, .9, .9); 545 | } 546 | 547 | 60% { 548 | opacity: 1; 549 | -webkit-transform: scale3d(1.03, 1.03, 1.03); 550 | transform: scale3d(1.03, 1.03, 1.03); 551 | } 552 | 553 | 80% { 554 | -webkit-transform: scale3d(.97, .97, .97); 555 | transform: scale3d(.97, .97, .97); 556 | } 557 | 558 | 100% { 559 | opacity: 1; 560 | -webkit-transform: scale3d(1, 1, 1); 561 | transform: scale3d(1, 1, 1); 562 | } 563 | } 564 | 565 | .bounceIn { 566 | -webkit-animation-name: bounceIn; 567 | animation-name: bounceIn; 568 | } 569 | 570 | @-webkit-keyframes bounceInDown { 571 | 0%, 60%, 75%, 90%, 100% { 572 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 573 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 574 | } 575 | 576 | 0% { 577 | opacity: 0; 578 | -webkit-transform: translate3d(0, -3000px, 0); 579 | transform: translate3d(0, -3000px, 0); 580 | } 581 | 582 | 60% { 583 | opacity: 1; 584 | -webkit-transform: translate3d(0, 25px, 0); 585 | transform: translate3d(0, 25px, 0); 586 | } 587 | 588 | 75% { 589 | -webkit-transform: translate3d(0, -10px, 0); 590 | transform: translate3d(0, -10px, 0); 591 | } 592 | 593 | 90% { 594 | -webkit-transform: translate3d(0, 5px, 0); 595 | transform: translate3d(0, 5px, 0); 596 | } 597 | 598 | 100% { 599 | -webkit-transform: none; 600 | transform: none; 601 | } 602 | } 603 | 604 | @keyframes bounceInDown { 605 | 0%, 60%, 75%, 90%, 100% { 606 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 607 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 608 | } 609 | 610 | 0% { 611 | opacity: 0; 612 | -webkit-transform: translate3d(0, -3000px, 0); 613 | transform: translate3d(0, -3000px, 0); 614 | } 615 | 616 | 60% { 617 | opacity: 1; 618 | -webkit-transform: translate3d(0, 25px, 0); 619 | transform: translate3d(0, 25px, 0); 620 | } 621 | 622 | 75% { 623 | -webkit-transform: translate3d(0, -10px, 0); 624 | transform: translate3d(0, -10px, 0); 625 | } 626 | 627 | 90% { 628 | -webkit-transform: translate3d(0, 5px, 0); 629 | transform: translate3d(0, 5px, 0); 630 | } 631 | 632 | 100% { 633 | -webkit-transform: none; 634 | transform: none; 635 | } 636 | } 637 | 638 | .bounceInDown { 639 | -webkit-animation-name: bounceInDown; 640 | animation-name: bounceInDown; 641 | } 642 | 643 | @-webkit-keyframes bounceInLeft { 644 | 0%, 60%, 75%, 90%, 100% { 645 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 646 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 647 | } 648 | 649 | 0% { 650 | opacity: 0; 651 | -webkit-transform: translate3d(-3000px, 0, 0); 652 | transform: translate3d(-3000px, 0, 0); 653 | } 654 | 655 | 60% { 656 | opacity: 1; 657 | -webkit-transform: translate3d(25px, 0, 0); 658 | transform: translate3d(25px, 0, 0); 659 | } 660 | 661 | 75% { 662 | -webkit-transform: translate3d(-10px, 0, 0); 663 | transform: translate3d(-10px, 0, 0); 664 | } 665 | 666 | 90% { 667 | -webkit-transform: translate3d(5px, 0, 0); 668 | transform: translate3d(5px, 0, 0); 669 | } 670 | 671 | 100% { 672 | -webkit-transform: none; 673 | transform: none; 674 | } 675 | } 676 | 677 | @keyframes bounceInLeft { 678 | 0%, 60%, 75%, 90%, 100% { 679 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 680 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 681 | } 682 | 683 | 0% { 684 | opacity: 0; 685 | -webkit-transform: translate3d(-3000px, 0, 0); 686 | transform: translate3d(-3000px, 0, 0); 687 | } 688 | 689 | 60% { 690 | opacity: 1; 691 | -webkit-transform: translate3d(25px, 0, 0); 692 | transform: translate3d(25px, 0, 0); 693 | } 694 | 695 | 75% { 696 | -webkit-transform: translate3d(-10px, 0, 0); 697 | transform: translate3d(-10px, 0, 0); 698 | } 699 | 700 | 90% { 701 | -webkit-transform: translate3d(5px, 0, 0); 702 | transform: translate3d(5px, 0, 0); 703 | } 704 | 705 | 100% { 706 | -webkit-transform: none; 707 | transform: none; 708 | } 709 | } 710 | 711 | .bounceInLeft { 712 | -webkit-animation-name: bounceInLeft; 713 | animation-name: bounceInLeft; 714 | } 715 | 716 | @-webkit-keyframes bounceInRight { 717 | 0%, 60%, 75%, 90%, 100% { 718 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 719 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 720 | } 721 | 722 | 0% { 723 | opacity: 0; 724 | -webkit-transform: translate3d(3000px, 0, 0); 725 | transform: translate3d(3000px, 0, 0); 726 | } 727 | 728 | 60% { 729 | opacity: 1; 730 | -webkit-transform: translate3d(-25px, 0, 0); 731 | transform: translate3d(-25px, 0, 0); 732 | } 733 | 734 | 75% { 735 | -webkit-transform: translate3d(10px, 0, 0); 736 | transform: translate3d(10px, 0, 0); 737 | } 738 | 739 | 90% { 740 | -webkit-transform: translate3d(-5px, 0, 0); 741 | transform: translate3d(-5px, 0, 0); 742 | } 743 | 744 | 100% { 745 | -webkit-transform: none; 746 | transform: none; 747 | } 748 | } 749 | 750 | @keyframes bounceInRight { 751 | 0%, 60%, 75%, 90%, 100% { 752 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 753 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 754 | } 755 | 756 | 0% { 757 | opacity: 0; 758 | -webkit-transform: translate3d(3000px, 0, 0); 759 | transform: translate3d(3000px, 0, 0); 760 | } 761 | 762 | 60% { 763 | opacity: 1; 764 | -webkit-transform: translate3d(-25px, 0, 0); 765 | transform: translate3d(-25px, 0, 0); 766 | } 767 | 768 | 75% { 769 | -webkit-transform: translate3d(10px, 0, 0); 770 | transform: translate3d(10px, 0, 0); 771 | } 772 | 773 | 90% { 774 | -webkit-transform: translate3d(-5px, 0, 0); 775 | transform: translate3d(-5px, 0, 0); 776 | } 777 | 778 | 100% { 779 | -webkit-transform: none; 780 | transform: none; 781 | } 782 | } 783 | 784 | .bounceInRight { 785 | -webkit-animation-name: bounceInRight; 786 | animation-name: bounceInRight; 787 | } 788 | 789 | @-webkit-keyframes bounceInUp { 790 | 0%, 60%, 75%, 90%, 100% { 791 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 792 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 793 | } 794 | 795 | 0% { 796 | opacity: 0; 797 | -webkit-transform: translate3d(0, 3000px, 0); 798 | transform: translate3d(0, 3000px, 0); 799 | } 800 | 801 | 60% { 802 | opacity: 1; 803 | -webkit-transform: translate3d(0, -20px, 0); 804 | transform: translate3d(0, -20px, 0); 805 | } 806 | 807 | 75% { 808 | -webkit-transform: translate3d(0, 10px, 0); 809 | transform: translate3d(0, 10px, 0); 810 | } 811 | 812 | 90% { 813 | -webkit-transform: translate3d(0, -5px, 0); 814 | transform: translate3d(0, -5px, 0); 815 | } 816 | 817 | 100% { 818 | -webkit-transform: translate3d(0, 0, 0); 819 | transform: translate3d(0, 0, 0); 820 | } 821 | } 822 | 823 | @keyframes bounceInUp { 824 | 0%, 60%, 75%, 90%, 100% { 825 | -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 826 | transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 827 | } 828 | 829 | 0% { 830 | opacity: 0; 831 | -webkit-transform: translate3d(0, 3000px, 0); 832 | transform: translate3d(0, 3000px, 0); 833 | } 834 | 835 | 60% { 836 | opacity: 1; 837 | -webkit-transform: translate3d(0, -20px, 0); 838 | transform: translate3d(0, -20px, 0); 839 | } 840 | 841 | 75% { 842 | -webkit-transform: translate3d(0, 10px, 0); 843 | transform: translate3d(0, 10px, 0); 844 | } 845 | 846 | 90% { 847 | -webkit-transform: translate3d(0, -5px, 0); 848 | transform: translate3d(0, -5px, 0); 849 | } 850 | 851 | 100% { 852 | -webkit-transform: translate3d(0, 0, 0); 853 | transform: translate3d(0, 0, 0); 854 | } 855 | } 856 | 857 | .bounceInUp { 858 | -webkit-animation-name: bounceInUp; 859 | animation-name: bounceInUp; 860 | } 861 | 862 | @-webkit-keyframes bounceOut { 863 | 20% { 864 | -webkit-transform: scale3d(.9, .9, .9); 865 | transform: scale3d(.9, .9, .9); 866 | } 867 | 868 | 50%, 55% { 869 | opacity: 1; 870 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 871 | transform: scale3d(1.1, 1.1, 1.1); 872 | } 873 | 874 | 100% { 875 | opacity: 0; 876 | -webkit-transform: scale3d(.3, .3, .3); 877 | transform: scale3d(.3, .3, .3); 878 | } 879 | } 880 | 881 | @keyframes bounceOut { 882 | 20% { 883 | -webkit-transform: scale3d(.9, .9, .9); 884 | transform: scale3d(.9, .9, .9); 885 | } 886 | 887 | 50%, 55% { 888 | opacity: 1; 889 | -webkit-transform: scale3d(1.1, 1.1, 1.1); 890 | transform: scale3d(1.1, 1.1, 1.1); 891 | } 892 | 893 | 100% { 894 | opacity: 0; 895 | -webkit-transform: scale3d(.3, .3, .3); 896 | transform: scale3d(.3, .3, .3); 897 | } 898 | } 899 | 900 | .bounceOut { 901 | -webkit-animation-name: bounceOut; 902 | animation-name: bounceOut; 903 | } 904 | 905 | @-webkit-keyframes bounceOutDown { 906 | 20% { 907 | -webkit-transform: translate3d(0, 10px, 0); 908 | transform: translate3d(0, 10px, 0); 909 | } 910 | 911 | 40%, 45% { 912 | opacity: 1; 913 | -webkit-transform: translate3d(0, -20px, 0); 914 | transform: translate3d(0, -20px, 0); 915 | } 916 | 917 | 100% { 918 | opacity: 0; 919 | -webkit-transform: translate3d(0, 2000px, 0); 920 | transform: translate3d(0, 2000px, 0); 921 | } 922 | } 923 | 924 | @keyframes bounceOutDown { 925 | 20% { 926 | -webkit-transform: translate3d(0, 10px, 0); 927 | transform: translate3d(0, 10px, 0); 928 | } 929 | 930 | 40%, 45% { 931 | opacity: 1; 932 | -webkit-transform: translate3d(0, -20px, 0); 933 | transform: translate3d(0, -20px, 0); 934 | } 935 | 936 | 100% { 937 | opacity: 0; 938 | -webkit-transform: translate3d(0, 2000px, 0); 939 | transform: translate3d(0, 2000px, 0); 940 | } 941 | } 942 | 943 | .bounceOutDown { 944 | -webkit-animation-name: bounceOutDown; 945 | animation-name: bounceOutDown; 946 | } 947 | 948 | @-webkit-keyframes bounceOutLeft { 949 | 20% { 950 | opacity: 1; 951 | -webkit-transform: translate3d(20px, 0, 0); 952 | transform: translate3d(20px, 0, 0); 953 | } 954 | 955 | 100% { 956 | opacity: 0; 957 | -webkit-transform: translate3d(-2000px, 0, 0); 958 | transform: translate3d(-2000px, 0, 0); 959 | } 960 | } 961 | 962 | @keyframes bounceOutLeft { 963 | 20% { 964 | opacity: 1; 965 | -webkit-transform: translate3d(20px, 0, 0); 966 | transform: translate3d(20px, 0, 0); 967 | } 968 | 969 | 100% { 970 | opacity: 0; 971 | -webkit-transform: translate3d(-2000px, 0, 0); 972 | transform: translate3d(-2000px, 0, 0); 973 | } 974 | } 975 | 976 | .bounceOutLeft { 977 | -webkit-animation-name: bounceOutLeft; 978 | animation-name: bounceOutLeft; 979 | } 980 | 981 | @-webkit-keyframes bounceOutRight { 982 | 20% { 983 | opacity: 1; 984 | -webkit-transform: translate3d(-20px, 0, 0); 985 | transform: translate3d(-20px, 0, 0); 986 | } 987 | 988 | 100% { 989 | opacity: 0; 990 | -webkit-transform: translate3d(2000px, 0, 0); 991 | transform: translate3d(2000px, 0, 0); 992 | } 993 | } 994 | 995 | @keyframes bounceOutRight { 996 | 20% { 997 | opacity: 1; 998 | -webkit-transform: translate3d(-20px, 0, 0); 999 | transform: translate3d(-20px, 0, 0); 1000 | } 1001 | 1002 | 100% { 1003 | opacity: 0; 1004 | -webkit-transform: translate3d(2000px, 0, 0); 1005 | transform: translate3d(2000px, 0, 0); 1006 | } 1007 | } 1008 | 1009 | .bounceOutRight { 1010 | -webkit-animation-name: bounceOutRight; 1011 | animation-name: bounceOutRight; 1012 | } 1013 | 1014 | @-webkit-keyframes bounceOutUp { 1015 | 20% { 1016 | -webkit-transform: translate3d(0, -10px, 0); 1017 | transform: translate3d(0, -10px, 0); 1018 | } 1019 | 1020 | 40%, 45% { 1021 | opacity: 1; 1022 | -webkit-transform: translate3d(0, 20px, 0); 1023 | transform: translate3d(0, 20px, 0); 1024 | } 1025 | 1026 | 100% { 1027 | opacity: 0; 1028 | -webkit-transform: translate3d(0, -2000px, 0); 1029 | transform: translate3d(0, -2000px, 0); 1030 | } 1031 | } 1032 | 1033 | @keyframes bounceOutUp { 1034 | 20% { 1035 | -webkit-transform: translate3d(0, -10px, 0); 1036 | transform: translate3d(0, -10px, 0); 1037 | } 1038 | 1039 | 40%, 45% { 1040 | opacity: 1; 1041 | -webkit-transform: translate3d(0, 20px, 0); 1042 | transform: translate3d(0, 20px, 0); 1043 | } 1044 | 1045 | 100% { 1046 | opacity: 0; 1047 | -webkit-transform: translate3d(0, -2000px, 0); 1048 | transform: translate3d(0, -2000px, 0); 1049 | } 1050 | } 1051 | 1052 | .bounceOutUp { 1053 | -webkit-animation-name: bounceOutUp; 1054 | animation-name: bounceOutUp; 1055 | } 1056 | 1057 | @-webkit-keyframes fadeIn { 1058 | 0% { 1059 | opacity: 0; 1060 | } 1061 | 1062 | 100% { 1063 | opacity: 1; 1064 | } 1065 | } 1066 | 1067 | @keyframes fadeIn { 1068 | 0% { 1069 | opacity: 0; 1070 | } 1071 | 1072 | 100% { 1073 | opacity: 1; 1074 | } 1075 | } 1076 | 1077 | .fadeIn { 1078 | -webkit-animation-name: fadeIn; 1079 | animation-name: fadeIn; 1080 | } 1081 | 1082 | @-webkit-keyframes fadeInDown { 1083 | 0% { 1084 | opacity: 0; 1085 | -webkit-transform: translate3d(0, -100%, 0); 1086 | transform: translate3d(0, -100%, 0); 1087 | } 1088 | 1089 | 100% { 1090 | opacity: 1; 1091 | -webkit-transform: none; 1092 | transform: none; 1093 | } 1094 | } 1095 | 1096 | @keyframes fadeInDown { 1097 | 0% { 1098 | opacity: 0; 1099 | -webkit-transform: translate3d(0, -100%, 0); 1100 | transform: translate3d(0, -100%, 0); 1101 | } 1102 | 1103 | 100% { 1104 | opacity: 1; 1105 | -webkit-transform: none; 1106 | transform: none; 1107 | } 1108 | } 1109 | 1110 | .fadeInDown { 1111 | -webkit-animation-name: fadeInDown; 1112 | animation-name: fadeInDown; 1113 | } 1114 | 1115 | @-webkit-keyframes fadeInDownBig { 1116 | 0% { 1117 | opacity: 0; 1118 | -webkit-transform: translate3d(0, -2000px, 0); 1119 | transform: translate3d(0, -2000px, 0); 1120 | } 1121 | 1122 | 100% { 1123 | opacity: 1; 1124 | -webkit-transform: none; 1125 | transform: none; 1126 | } 1127 | } 1128 | 1129 | @keyframes fadeInDownBig { 1130 | 0% { 1131 | opacity: 0; 1132 | -webkit-transform: translate3d(0, -2000px, 0); 1133 | transform: translate3d(0, -2000px, 0); 1134 | } 1135 | 1136 | 100% { 1137 | opacity: 1; 1138 | -webkit-transform: none; 1139 | transform: none; 1140 | } 1141 | } 1142 | 1143 | .fadeInDownBig { 1144 | -webkit-animation-name: fadeInDownBig; 1145 | animation-name: fadeInDownBig; 1146 | } 1147 | 1148 | @-webkit-keyframes fadeInLeft { 1149 | 0% { 1150 | opacity: 0; 1151 | -webkit-transform: translate3d(-100%, 0, 0); 1152 | transform: translate3d(-100%, 0, 0); 1153 | } 1154 | 1155 | 100% { 1156 | opacity: 1; 1157 | -webkit-transform: none; 1158 | transform: none; 1159 | } 1160 | } 1161 | 1162 | @keyframes fadeInLeft { 1163 | 0% { 1164 | opacity: 0; 1165 | -webkit-transform: translate3d(-100%, 0, 0); 1166 | transform: translate3d(-100%, 0, 0); 1167 | } 1168 | 1169 | 100% { 1170 | opacity: 1; 1171 | -webkit-transform: none; 1172 | transform: none; 1173 | } 1174 | } 1175 | 1176 | .fadeInLeft { 1177 | -webkit-animation-name: fadeInLeft; 1178 | animation-name: fadeInLeft; 1179 | } 1180 | 1181 | @-webkit-keyframes fadeInLeftBig { 1182 | 0% { 1183 | opacity: 0; 1184 | -webkit-transform: translate3d(-2000px, 0, 0); 1185 | transform: translate3d(-2000px, 0, 0); 1186 | } 1187 | 1188 | 100% { 1189 | opacity: 1; 1190 | -webkit-transform: none; 1191 | transform: none; 1192 | } 1193 | } 1194 | 1195 | @keyframes fadeInLeftBig { 1196 | 0% { 1197 | opacity: 0; 1198 | -webkit-transform: translate3d(-2000px, 0, 0); 1199 | transform: translate3d(-2000px, 0, 0); 1200 | } 1201 | 1202 | 100% { 1203 | opacity: 1; 1204 | -webkit-transform: none; 1205 | transform: none; 1206 | } 1207 | } 1208 | 1209 | .fadeInLeftBig { 1210 | -webkit-animation-name: fadeInLeftBig; 1211 | animation-name: fadeInLeftBig; 1212 | } 1213 | 1214 | @-webkit-keyframes fadeInRight { 1215 | 0% { 1216 | opacity: 0; 1217 | -webkit-transform: translate3d(100%, 0, 0); 1218 | transform: translate3d(100%, 0, 0); 1219 | } 1220 | 1221 | 100% { 1222 | opacity: 1; 1223 | -webkit-transform: none; 1224 | transform: none; 1225 | } 1226 | } 1227 | 1228 | @keyframes fadeInRight { 1229 | 0% { 1230 | opacity: 0; 1231 | -webkit-transform: translate3d(100%, 0, 0); 1232 | transform: translate3d(100%, 0, 0); 1233 | } 1234 | 1235 | 100% { 1236 | opacity: 1; 1237 | -webkit-transform: none; 1238 | transform: none; 1239 | } 1240 | } 1241 | 1242 | .fadeInRight { 1243 | -webkit-animation-name: fadeInRight; 1244 | animation-name: fadeInRight; 1245 | } 1246 | 1247 | @-webkit-keyframes fadeInRightBig { 1248 | 0% { 1249 | opacity: 0; 1250 | -webkit-transform: translate3d(2000px, 0, 0); 1251 | transform: translate3d(2000px, 0, 0); 1252 | } 1253 | 1254 | 100% { 1255 | opacity: 1; 1256 | -webkit-transform: none; 1257 | transform: none; 1258 | } 1259 | } 1260 | 1261 | @keyframes fadeInRightBig { 1262 | 0% { 1263 | opacity: 0; 1264 | -webkit-transform: translate3d(2000px, 0, 0); 1265 | transform: translate3d(2000px, 0, 0); 1266 | } 1267 | 1268 | 100% { 1269 | opacity: 1; 1270 | -webkit-transform: none; 1271 | transform: none; 1272 | } 1273 | } 1274 | 1275 | .fadeInRightBig { 1276 | -webkit-animation-name: fadeInRightBig; 1277 | animation-name: fadeInRightBig; 1278 | } 1279 | 1280 | @-webkit-keyframes fadeInUp { 1281 | 0% { 1282 | opacity: 0; 1283 | -webkit-transform: translate3d(0, 100%, 0); 1284 | transform: translate3d(0, 100%, 0); 1285 | } 1286 | 1287 | 100% { 1288 | opacity: 1; 1289 | -webkit-transform: none; 1290 | transform: none; 1291 | } 1292 | } 1293 | 1294 | @keyframes fadeInUp { 1295 | 0% { 1296 | opacity: 0; 1297 | -webkit-transform: translate3d(0, 100%, 0); 1298 | transform: translate3d(0, 100%, 0); 1299 | } 1300 | 1301 | 100% { 1302 | opacity: 1; 1303 | -webkit-transform: none; 1304 | transform: none; 1305 | } 1306 | } 1307 | 1308 | .fadeInUp { 1309 | -webkit-animation-name: fadeInUp; 1310 | animation-name: fadeInUp; 1311 | } 1312 | 1313 | @-webkit-keyframes fadeInUpBig { 1314 | 0% { 1315 | opacity: 0; 1316 | -webkit-transform: translate3d(0, 2000px, 0); 1317 | transform: translate3d(0, 2000px, 0); 1318 | } 1319 | 1320 | 100% { 1321 | opacity: 1; 1322 | -webkit-transform: none; 1323 | transform: none; 1324 | } 1325 | } 1326 | 1327 | @keyframes fadeInUpBig { 1328 | 0% { 1329 | opacity: 0; 1330 | -webkit-transform: translate3d(0, 2000px, 0); 1331 | transform: translate3d(0, 2000px, 0); 1332 | } 1333 | 1334 | 100% { 1335 | opacity: 1; 1336 | -webkit-transform: none; 1337 | transform: none; 1338 | } 1339 | } 1340 | 1341 | .fadeInUpBig { 1342 | -webkit-animation-name: fadeInUpBig; 1343 | animation-name: fadeInUpBig; 1344 | } 1345 | 1346 | @-webkit-keyframes fadeOut { 1347 | 0% { 1348 | opacity: 1; 1349 | } 1350 | 1351 | 100% { 1352 | opacity: 0; 1353 | } 1354 | } 1355 | 1356 | @keyframes fadeOut { 1357 | 0% { 1358 | opacity: 1; 1359 | } 1360 | 1361 | 100% { 1362 | opacity: 0; 1363 | } 1364 | } 1365 | 1366 | .fadeOut { 1367 | -webkit-animation-name: fadeOut; 1368 | animation-name: fadeOut; 1369 | } 1370 | 1371 | @-webkit-keyframes fadeOutDown { 1372 | 0% { 1373 | opacity: 1; 1374 | } 1375 | 1376 | 100% { 1377 | opacity: 0; 1378 | -webkit-transform: translate3d(0, 100%, 0); 1379 | transform: translate3d(0, 100%, 0); 1380 | } 1381 | } 1382 | 1383 | @keyframes fadeOutDown { 1384 | 0% { 1385 | opacity: 1; 1386 | } 1387 | 1388 | 100% { 1389 | opacity: 0; 1390 | -webkit-transform: translate3d(0, 100%, 0); 1391 | transform: translate3d(0, 100%, 0); 1392 | } 1393 | } 1394 | 1395 | .fadeOutDown { 1396 | -webkit-animation-name: fadeOutDown; 1397 | animation-name: fadeOutDown; 1398 | } 1399 | 1400 | @-webkit-keyframes fadeOutDownBig { 1401 | 0% { 1402 | opacity: 1; 1403 | } 1404 | 1405 | 100% { 1406 | opacity: 0; 1407 | -webkit-transform: translate3d(0, 2000px, 0); 1408 | transform: translate3d(0, 2000px, 0); 1409 | } 1410 | } 1411 | 1412 | @keyframes fadeOutDownBig { 1413 | 0% { 1414 | opacity: 1; 1415 | } 1416 | 1417 | 100% { 1418 | opacity: 0; 1419 | -webkit-transform: translate3d(0, 2000px, 0); 1420 | transform: translate3d(0, 2000px, 0); 1421 | } 1422 | } 1423 | 1424 | .fadeOutDownBig { 1425 | -webkit-animation-name: fadeOutDownBig; 1426 | animation-name: fadeOutDownBig; 1427 | } 1428 | 1429 | @-webkit-keyframes fadeOutLeft { 1430 | 0% { 1431 | opacity: 1; 1432 | } 1433 | 1434 | 100% { 1435 | opacity: 0; 1436 | -webkit-transform: translate3d(-100%, 0, 0); 1437 | transform: translate3d(-100%, 0, 0); 1438 | } 1439 | } 1440 | 1441 | @keyframes fadeOutLeft { 1442 | 0% { 1443 | opacity: 1; 1444 | } 1445 | 1446 | 100% { 1447 | opacity: 0; 1448 | -webkit-transform: translate3d(-100%, 0, 0); 1449 | transform: translate3d(-100%, 0, 0); 1450 | } 1451 | } 1452 | 1453 | .fadeOutLeft { 1454 | -webkit-animation-name: fadeOutLeft; 1455 | animation-name: fadeOutLeft; 1456 | } 1457 | 1458 | @-webkit-keyframes fadeOutLeftBig { 1459 | 0% { 1460 | opacity: 1; 1461 | } 1462 | 1463 | 100% { 1464 | opacity: 0; 1465 | -webkit-transform: translate3d(-2000px, 0, 0); 1466 | transform: translate3d(-2000px, 0, 0); 1467 | } 1468 | } 1469 | 1470 | @keyframes fadeOutLeftBig { 1471 | 0% { 1472 | opacity: 1; 1473 | } 1474 | 1475 | 100% { 1476 | opacity: 0; 1477 | -webkit-transform: translate3d(-2000px, 0, 0); 1478 | transform: translate3d(-2000px, 0, 0); 1479 | } 1480 | } 1481 | 1482 | .fadeOutLeftBig { 1483 | -webkit-animation-name: fadeOutLeftBig; 1484 | animation-name: fadeOutLeftBig; 1485 | } 1486 | 1487 | @-webkit-keyframes fadeOutRight { 1488 | 0% { 1489 | opacity: 1; 1490 | } 1491 | 1492 | 100% { 1493 | opacity: 0; 1494 | -webkit-transform: translate3d(100%, 0, 0); 1495 | transform: translate3d(100%, 0, 0); 1496 | } 1497 | } 1498 | 1499 | @keyframes fadeOutRight { 1500 | 0% { 1501 | opacity: 1; 1502 | } 1503 | 1504 | 100% { 1505 | opacity: 0; 1506 | -webkit-transform: translate3d(100%, 0, 0); 1507 | transform: translate3d(100%, 0, 0); 1508 | } 1509 | } 1510 | 1511 | .fadeOutRight { 1512 | -webkit-animation-name: fadeOutRight; 1513 | animation-name: fadeOutRight; 1514 | } 1515 | 1516 | @-webkit-keyframes fadeOutRightBig { 1517 | 0% { 1518 | opacity: 1; 1519 | } 1520 | 1521 | 100% { 1522 | opacity: 0; 1523 | -webkit-transform: translate3d(2000px, 0, 0); 1524 | transform: translate3d(2000px, 0, 0); 1525 | } 1526 | } 1527 | 1528 | @keyframes fadeOutRightBig { 1529 | 0% { 1530 | opacity: 1; 1531 | } 1532 | 1533 | 100% { 1534 | opacity: 0; 1535 | -webkit-transform: translate3d(2000px, 0, 0); 1536 | transform: translate3d(2000px, 0, 0); 1537 | } 1538 | } 1539 | 1540 | .fadeOutRightBig { 1541 | -webkit-animation-name: fadeOutRightBig; 1542 | animation-name: fadeOutRightBig; 1543 | } 1544 | 1545 | @-webkit-keyframes fadeOutUp { 1546 | 0% { 1547 | opacity: 1; 1548 | } 1549 | 1550 | 100% { 1551 | opacity: 0; 1552 | -webkit-transform: translate3d(0, -100%, 0); 1553 | transform: translate3d(0, -100%, 0); 1554 | } 1555 | } 1556 | 1557 | @keyframes fadeOutUp { 1558 | 0% { 1559 | opacity: 1; 1560 | } 1561 | 1562 | 100% { 1563 | opacity: 0; 1564 | -webkit-transform: translate3d(0, -100%, 0); 1565 | transform: translate3d(0, -100%, 0); 1566 | } 1567 | } 1568 | 1569 | .fadeOutUp { 1570 | -webkit-animation-name: fadeOutUp; 1571 | animation-name: fadeOutUp; 1572 | } 1573 | 1574 | @-webkit-keyframes fadeOutUpBig { 1575 | 0% { 1576 | opacity: 1; 1577 | } 1578 | 1579 | 100% { 1580 | opacity: 0; 1581 | -webkit-transform: translate3d(0, -2000px, 0); 1582 | transform: translate3d(0, -2000px, 0); 1583 | } 1584 | } 1585 | 1586 | @keyframes fadeOutUpBig { 1587 | 0% { 1588 | opacity: 1; 1589 | } 1590 | 1591 | 100% { 1592 | opacity: 0; 1593 | -webkit-transform: translate3d(0, -2000px, 0); 1594 | transform: translate3d(0, -2000px, 0); 1595 | } 1596 | } 1597 | 1598 | .fadeOutUpBig { 1599 | -webkit-animation-name: fadeOutUpBig; 1600 | animation-name: fadeOutUpBig; 1601 | } 1602 | 1603 | @-webkit-keyframes flip { 1604 | 0% { 1605 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 1606 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 1607 | -webkit-animation-timing-function: ease-out; 1608 | animation-timing-function: ease-out; 1609 | } 1610 | 1611 | 40% { 1612 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 1613 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 1614 | -webkit-animation-timing-function: ease-out; 1615 | animation-timing-function: ease-out; 1616 | } 1617 | 1618 | 50% { 1619 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 1620 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 1621 | -webkit-animation-timing-function: ease-in; 1622 | animation-timing-function: ease-in; 1623 | } 1624 | 1625 | 80% { 1626 | -webkit-transform: perspective(400px) scale3d(.95, .95, .95); 1627 | transform: perspective(400px) scale3d(.95, .95, .95); 1628 | -webkit-animation-timing-function: ease-in; 1629 | animation-timing-function: ease-in; 1630 | } 1631 | 1632 | 100% { 1633 | -webkit-transform: perspective(400px); 1634 | transform: perspective(400px); 1635 | -webkit-animation-timing-function: ease-in; 1636 | animation-timing-function: ease-in; 1637 | } 1638 | } 1639 | 1640 | @keyframes flip { 1641 | 0% { 1642 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 1643 | transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 1644 | -webkit-animation-timing-function: ease-out; 1645 | animation-timing-function: ease-out; 1646 | } 1647 | 1648 | 40% { 1649 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 1650 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); 1651 | -webkit-animation-timing-function: ease-out; 1652 | animation-timing-function: ease-out; 1653 | } 1654 | 1655 | 50% { 1656 | -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 1657 | transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); 1658 | -webkit-animation-timing-function: ease-in; 1659 | animation-timing-function: ease-in; 1660 | } 1661 | 1662 | 80% { 1663 | -webkit-transform: perspective(400px) scale3d(.95, .95, .95); 1664 | transform: perspective(400px) scale3d(.95, .95, .95); 1665 | -webkit-animation-timing-function: ease-in; 1666 | animation-timing-function: ease-in; 1667 | } 1668 | 1669 | 100% { 1670 | -webkit-transform: perspective(400px); 1671 | transform: perspective(400px); 1672 | -webkit-animation-timing-function: ease-in; 1673 | animation-timing-function: ease-in; 1674 | } 1675 | } 1676 | 1677 | .animated.flip { 1678 | -webkit-backface-visibility: visible; 1679 | backface-visibility: visible; 1680 | -webkit-animation-name: flip; 1681 | animation-name: flip; 1682 | } 1683 | 1684 | @-webkit-keyframes flipInX { 1685 | 0% { 1686 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1687 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1688 | -webkit-transition-timing-function: ease-in; 1689 | transition-timing-function: ease-in; 1690 | opacity: 0; 1691 | } 1692 | 1693 | 40% { 1694 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1695 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1696 | -webkit-transition-timing-function: ease-in; 1697 | transition-timing-function: ease-in; 1698 | } 1699 | 1700 | 60% { 1701 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1702 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1703 | opacity: 1; 1704 | } 1705 | 1706 | 80% { 1707 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1708 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1709 | } 1710 | 1711 | 100% { 1712 | -webkit-transform: perspective(400px); 1713 | transform: perspective(400px); 1714 | } 1715 | } 1716 | 1717 | @keyframes flipInX { 1718 | 0% { 1719 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1720 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1721 | -webkit-transition-timing-function: ease-in; 1722 | transition-timing-function: ease-in; 1723 | opacity: 0; 1724 | } 1725 | 1726 | 40% { 1727 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1728 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1729 | -webkit-transition-timing-function: ease-in; 1730 | transition-timing-function: ease-in; 1731 | } 1732 | 1733 | 60% { 1734 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1735 | transform: perspective(400px) rotate3d(1, 0, 0, 10deg); 1736 | opacity: 1; 1737 | } 1738 | 1739 | 80% { 1740 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1741 | transform: perspective(400px) rotate3d(1, 0, 0, -5deg); 1742 | } 1743 | 1744 | 100% { 1745 | -webkit-transform: perspective(400px); 1746 | transform: perspective(400px); 1747 | } 1748 | } 1749 | 1750 | .flipInX { 1751 | -webkit-backface-visibility: visible !important; 1752 | backface-visibility: visible !important; 1753 | -webkit-animation-name: flipInX; 1754 | animation-name: flipInX; 1755 | } 1756 | 1757 | @-webkit-keyframes flipInY { 1758 | 0% { 1759 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1760 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1761 | -webkit-transition-timing-function: ease-in; 1762 | transition-timing-function: ease-in; 1763 | opacity: 0; 1764 | } 1765 | 1766 | 40% { 1767 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1768 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1769 | -webkit-transition-timing-function: ease-in; 1770 | transition-timing-function: ease-in; 1771 | } 1772 | 1773 | 60% { 1774 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1775 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1776 | opacity: 1; 1777 | } 1778 | 1779 | 80% { 1780 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1781 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1782 | } 1783 | 1784 | 100% { 1785 | -webkit-transform: perspective(400px); 1786 | transform: perspective(400px); 1787 | } 1788 | } 1789 | 1790 | @keyframes flipInY { 1791 | 0% { 1792 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1793 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1794 | -webkit-transition-timing-function: ease-in; 1795 | transition-timing-function: ease-in; 1796 | opacity: 0; 1797 | } 1798 | 1799 | 40% { 1800 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1801 | transform: perspective(400px) rotate3d(0, 1, 0, -20deg); 1802 | -webkit-transition-timing-function: ease-in; 1803 | transition-timing-function: ease-in; 1804 | } 1805 | 1806 | 60% { 1807 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1808 | transform: perspective(400px) rotate3d(0, 1, 0, 10deg); 1809 | opacity: 1; 1810 | } 1811 | 1812 | 80% { 1813 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1814 | transform: perspective(400px) rotate3d(0, 1, 0, -5deg); 1815 | } 1816 | 1817 | 100% { 1818 | -webkit-transform: perspective(400px); 1819 | transform: perspective(400px); 1820 | } 1821 | } 1822 | 1823 | .flipInY { 1824 | -webkit-backface-visibility: visible !important; 1825 | backface-visibility: visible !important; 1826 | -webkit-animation-name: flipInY; 1827 | animation-name: flipInY; 1828 | } 1829 | 1830 | @-webkit-keyframes flipOutX { 1831 | 0% { 1832 | -webkit-transform: perspective(400px); 1833 | transform: perspective(400px); 1834 | } 1835 | 1836 | 30% { 1837 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1838 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1839 | opacity: 1; 1840 | } 1841 | 1842 | 100% { 1843 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1844 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1845 | opacity: 0; 1846 | } 1847 | } 1848 | 1849 | @keyframes flipOutX { 1850 | 0% { 1851 | -webkit-transform: perspective(400px); 1852 | transform: perspective(400px); 1853 | } 1854 | 1855 | 30% { 1856 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1857 | transform: perspective(400px) rotate3d(1, 0, 0, -20deg); 1858 | opacity: 1; 1859 | } 1860 | 1861 | 100% { 1862 | -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1863 | transform: perspective(400px) rotate3d(1, 0, 0, 90deg); 1864 | opacity: 0; 1865 | } 1866 | } 1867 | 1868 | .flipOutX { 1869 | -webkit-animation-name: flipOutX; 1870 | animation-name: flipOutX; 1871 | -webkit-backface-visibility: visible !important; 1872 | backface-visibility: visible !important; 1873 | } 1874 | 1875 | @-webkit-keyframes flipOutY { 1876 | 0% { 1877 | -webkit-transform: perspective(400px); 1878 | transform: perspective(400px); 1879 | } 1880 | 1881 | 30% { 1882 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 1883 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 1884 | opacity: 1; 1885 | } 1886 | 1887 | 100% { 1888 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1889 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1890 | opacity: 0; 1891 | } 1892 | } 1893 | 1894 | @keyframes flipOutY { 1895 | 0% { 1896 | -webkit-transform: perspective(400px); 1897 | transform: perspective(400px); 1898 | } 1899 | 1900 | 30% { 1901 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 1902 | transform: perspective(400px) rotate3d(0, 1, 0, -15deg); 1903 | opacity: 1; 1904 | } 1905 | 1906 | 100% { 1907 | -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1908 | transform: perspective(400px) rotate3d(0, 1, 0, 90deg); 1909 | opacity: 0; 1910 | } 1911 | } 1912 | 1913 | .flipOutY { 1914 | -webkit-backface-visibility: visible !important; 1915 | backface-visibility: visible !important; 1916 | -webkit-animation-name: flipOutY; 1917 | animation-name: flipOutY; 1918 | } 1919 | 1920 | @-webkit-keyframes lightSpeedIn { 1921 | 0% { 1922 | -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); 1923 | transform: translate3d(100%, 0, 0) skewX(-30deg); 1924 | opacity: 0; 1925 | } 1926 | 1927 | 60% { 1928 | -webkit-transform: skewX(20deg); 1929 | transform: skewX(20deg); 1930 | opacity: 1; 1931 | } 1932 | 1933 | 80% { 1934 | -webkit-transform: skewX(-5deg); 1935 | transform: skewX(-5deg); 1936 | opacity: 1; 1937 | } 1938 | 1939 | 100% { 1940 | -webkit-transform: none; 1941 | transform: none; 1942 | opacity: 1; 1943 | } 1944 | } 1945 | 1946 | @keyframes lightSpeedIn { 1947 | 0% { 1948 | -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); 1949 | transform: translate3d(100%, 0, 0) skewX(-30deg); 1950 | opacity: 0; 1951 | } 1952 | 1953 | 60% { 1954 | -webkit-transform: skewX(20deg); 1955 | transform: skewX(20deg); 1956 | opacity: 1; 1957 | } 1958 | 1959 | 80% { 1960 | -webkit-transform: skewX(-5deg); 1961 | transform: skewX(-5deg); 1962 | opacity: 1; 1963 | } 1964 | 1965 | 100% { 1966 | -webkit-transform: none; 1967 | transform: none; 1968 | opacity: 1; 1969 | } 1970 | } 1971 | 1972 | .lightSpeedIn { 1973 | -webkit-animation-name: lightSpeedIn; 1974 | animation-name: lightSpeedIn; 1975 | -webkit-animation-timing-function: ease-out; 1976 | animation-timing-function: ease-out; 1977 | } 1978 | 1979 | @-webkit-keyframes lightSpeedOut { 1980 | 0% { 1981 | opacity: 1; 1982 | } 1983 | 1984 | 100% { 1985 | -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); 1986 | transform: translate3d(100%, 0, 0) skewX(30deg); 1987 | opacity: 0; 1988 | } 1989 | } 1990 | 1991 | @keyframes lightSpeedOut { 1992 | 0% { 1993 | opacity: 1; 1994 | } 1995 | 1996 | 100% { 1997 | -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); 1998 | transform: translate3d(100%, 0, 0) skewX(30deg); 1999 | opacity: 0; 2000 | } 2001 | } 2002 | 2003 | .lightSpeedOut { 2004 | -webkit-animation-name: lightSpeedOut; 2005 | animation-name: lightSpeedOut; 2006 | -webkit-animation-timing-function: ease-in; 2007 | animation-timing-function: ease-in; 2008 | } 2009 | 2010 | @-webkit-keyframes rotateIn { 2011 | 0% { 2012 | -webkit-transform-origin: center; 2013 | transform-origin: center; 2014 | -webkit-transform: rotate3d(0, 0, 1, -200deg); 2015 | transform: rotate3d(0, 0, 1, -200deg); 2016 | opacity: 0; 2017 | } 2018 | 2019 | 100% { 2020 | -webkit-transform-origin: center; 2021 | transform-origin: center; 2022 | -webkit-transform: none; 2023 | transform: none; 2024 | opacity: 1; 2025 | } 2026 | } 2027 | 2028 | @keyframes rotateIn { 2029 | 0% { 2030 | -webkit-transform-origin: center; 2031 | transform-origin: center; 2032 | -webkit-transform: rotate3d(0, 0, 1, -200deg); 2033 | transform: rotate3d(0, 0, 1, -200deg); 2034 | opacity: 0; 2035 | } 2036 | 2037 | 100% { 2038 | -webkit-transform-origin: center; 2039 | transform-origin: center; 2040 | -webkit-transform: none; 2041 | transform: none; 2042 | opacity: 1; 2043 | } 2044 | } 2045 | 2046 | .rotateIn { 2047 | -webkit-animation-name: rotateIn; 2048 | animation-name: rotateIn; 2049 | } 2050 | 2051 | @-webkit-keyframes rotateInDownLeft { 2052 | 0% { 2053 | -webkit-transform-origin: left bottom; 2054 | transform-origin: left bottom; 2055 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2056 | transform: rotate3d(0, 0, 1, -45deg); 2057 | opacity: 0; 2058 | } 2059 | 2060 | 100% { 2061 | -webkit-transform-origin: left bottom; 2062 | transform-origin: left bottom; 2063 | -webkit-transform: none; 2064 | transform: none; 2065 | opacity: 1; 2066 | } 2067 | } 2068 | 2069 | @keyframes rotateInDownLeft { 2070 | 0% { 2071 | -webkit-transform-origin: left bottom; 2072 | transform-origin: left bottom; 2073 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2074 | transform: rotate3d(0, 0, 1, -45deg); 2075 | opacity: 0; 2076 | } 2077 | 2078 | 100% { 2079 | -webkit-transform-origin: left bottom; 2080 | transform-origin: left bottom; 2081 | -webkit-transform: none; 2082 | transform: none; 2083 | opacity: 1; 2084 | } 2085 | } 2086 | 2087 | .rotateInDownLeft { 2088 | -webkit-animation-name: rotateInDownLeft; 2089 | animation-name: rotateInDownLeft; 2090 | } 2091 | 2092 | @-webkit-keyframes rotateInDownRight { 2093 | 0% { 2094 | -webkit-transform-origin: right bottom; 2095 | transform-origin: right bottom; 2096 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2097 | transform: rotate3d(0, 0, 1, 45deg); 2098 | opacity: 0; 2099 | } 2100 | 2101 | 100% { 2102 | -webkit-transform-origin: right bottom; 2103 | transform-origin: right bottom; 2104 | -webkit-transform: none; 2105 | transform: none; 2106 | opacity: 1; 2107 | } 2108 | } 2109 | 2110 | @keyframes rotateInDownRight { 2111 | 0% { 2112 | -webkit-transform-origin: right bottom; 2113 | transform-origin: right bottom; 2114 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2115 | transform: rotate3d(0, 0, 1, 45deg); 2116 | opacity: 0; 2117 | } 2118 | 2119 | 100% { 2120 | -webkit-transform-origin: right bottom; 2121 | transform-origin: right bottom; 2122 | -webkit-transform: none; 2123 | transform: none; 2124 | opacity: 1; 2125 | } 2126 | } 2127 | 2128 | .rotateInDownRight { 2129 | -webkit-animation-name: rotateInDownRight; 2130 | animation-name: rotateInDownRight; 2131 | } 2132 | 2133 | @-webkit-keyframes rotateInUpLeft { 2134 | 0% { 2135 | -webkit-transform-origin: left bottom; 2136 | transform-origin: left bottom; 2137 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2138 | transform: rotate3d(0, 0, 1, 45deg); 2139 | opacity: 0; 2140 | } 2141 | 2142 | 100% { 2143 | -webkit-transform-origin: left bottom; 2144 | transform-origin: left bottom; 2145 | -webkit-transform: none; 2146 | transform: none; 2147 | opacity: 1; 2148 | } 2149 | } 2150 | 2151 | @keyframes rotateInUpLeft { 2152 | 0% { 2153 | -webkit-transform-origin: left bottom; 2154 | transform-origin: left bottom; 2155 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2156 | transform: rotate3d(0, 0, 1, 45deg); 2157 | opacity: 0; 2158 | } 2159 | 2160 | 100% { 2161 | -webkit-transform-origin: left bottom; 2162 | transform-origin: left bottom; 2163 | -webkit-transform: none; 2164 | transform: none; 2165 | opacity: 1; 2166 | } 2167 | } 2168 | 2169 | .rotateInUpLeft { 2170 | -webkit-animation-name: rotateInUpLeft; 2171 | animation-name: rotateInUpLeft; 2172 | } 2173 | 2174 | @-webkit-keyframes rotateInUpRight { 2175 | 0% { 2176 | -webkit-transform-origin: right bottom; 2177 | transform-origin: right bottom; 2178 | -webkit-transform: rotate3d(0, 0, 1, -90deg); 2179 | transform: rotate3d(0, 0, 1, -90deg); 2180 | opacity: 0; 2181 | } 2182 | 2183 | 100% { 2184 | -webkit-transform-origin: right bottom; 2185 | transform-origin: right bottom; 2186 | -webkit-transform: none; 2187 | transform: none; 2188 | opacity: 1; 2189 | } 2190 | } 2191 | 2192 | @keyframes rotateInUpRight { 2193 | 0% { 2194 | -webkit-transform-origin: right bottom; 2195 | transform-origin: right bottom; 2196 | -webkit-transform: rotate3d(0, 0, 1, -90deg); 2197 | transform: rotate3d(0, 0, 1, -90deg); 2198 | opacity: 0; 2199 | } 2200 | 2201 | 100% { 2202 | -webkit-transform-origin: right bottom; 2203 | transform-origin: right bottom; 2204 | -webkit-transform: none; 2205 | transform: none; 2206 | opacity: 1; 2207 | } 2208 | } 2209 | 2210 | .rotateInUpRight { 2211 | -webkit-animation-name: rotateInUpRight; 2212 | animation-name: rotateInUpRight; 2213 | } 2214 | 2215 | @-webkit-keyframes rotateOut { 2216 | 0% { 2217 | -webkit-transform-origin: center; 2218 | transform-origin: center; 2219 | opacity: 1; 2220 | } 2221 | 2222 | 100% { 2223 | -webkit-transform-origin: center; 2224 | transform-origin: center; 2225 | -webkit-transform: rotate3d(0, 0, 1, 200deg); 2226 | transform: rotate3d(0, 0, 1, 200deg); 2227 | opacity: 0; 2228 | } 2229 | } 2230 | 2231 | @keyframes rotateOut { 2232 | 0% { 2233 | -webkit-transform-origin: center; 2234 | transform-origin: center; 2235 | opacity: 1; 2236 | } 2237 | 2238 | 100% { 2239 | -webkit-transform-origin: center; 2240 | transform-origin: center; 2241 | -webkit-transform: rotate3d(0, 0, 1, 200deg); 2242 | transform: rotate3d(0, 0, 1, 200deg); 2243 | opacity: 0; 2244 | } 2245 | } 2246 | 2247 | .rotateOut { 2248 | -webkit-animation-name: rotateOut; 2249 | animation-name: rotateOut; 2250 | } 2251 | 2252 | @-webkit-keyframes rotateOutDownLeft { 2253 | 0% { 2254 | -webkit-transform-origin: left bottom; 2255 | transform-origin: left bottom; 2256 | opacity: 1; 2257 | } 2258 | 2259 | 100% { 2260 | -webkit-transform-origin: left bottom; 2261 | transform-origin: left bottom; 2262 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2263 | transform: rotate3d(0, 0, 1, 45deg); 2264 | opacity: 0; 2265 | } 2266 | } 2267 | 2268 | @keyframes rotateOutDownLeft { 2269 | 0% { 2270 | -webkit-transform-origin: left bottom; 2271 | transform-origin: left bottom; 2272 | opacity: 1; 2273 | } 2274 | 2275 | 100% { 2276 | -webkit-transform-origin: left bottom; 2277 | transform-origin: left bottom; 2278 | -webkit-transform: rotate3d(0, 0, 1, 45deg); 2279 | transform: rotate3d(0, 0, 1, 45deg); 2280 | opacity: 0; 2281 | } 2282 | } 2283 | 2284 | .rotateOutDownLeft { 2285 | -webkit-animation-name: rotateOutDownLeft; 2286 | animation-name: rotateOutDownLeft; 2287 | } 2288 | 2289 | @-webkit-keyframes rotateOutDownRight { 2290 | 0% { 2291 | -webkit-transform-origin: right bottom; 2292 | transform-origin: right bottom; 2293 | opacity: 1; 2294 | } 2295 | 2296 | 100% { 2297 | -webkit-transform-origin: right bottom; 2298 | transform-origin: right bottom; 2299 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2300 | transform: rotate3d(0, 0, 1, -45deg); 2301 | opacity: 0; 2302 | } 2303 | } 2304 | 2305 | @keyframes rotateOutDownRight { 2306 | 0% { 2307 | -webkit-transform-origin: right bottom; 2308 | transform-origin: right bottom; 2309 | opacity: 1; 2310 | } 2311 | 2312 | 100% { 2313 | -webkit-transform-origin: right bottom; 2314 | transform-origin: right bottom; 2315 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2316 | transform: rotate3d(0, 0, 1, -45deg); 2317 | opacity: 0; 2318 | } 2319 | } 2320 | 2321 | .rotateOutDownRight { 2322 | -webkit-animation-name: rotateOutDownRight; 2323 | animation-name: rotateOutDownRight; 2324 | } 2325 | 2326 | @-webkit-keyframes rotateOutUpLeft { 2327 | 0% { 2328 | -webkit-transform-origin: left bottom; 2329 | transform-origin: left bottom; 2330 | opacity: 1; 2331 | } 2332 | 2333 | 100% { 2334 | -webkit-transform-origin: left bottom; 2335 | transform-origin: left bottom; 2336 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2337 | transform: rotate3d(0, 0, 1, -45deg); 2338 | opacity: 0; 2339 | } 2340 | } 2341 | 2342 | @keyframes rotateOutUpLeft { 2343 | 0% { 2344 | -webkit-transform-origin: left bottom; 2345 | transform-origin: left bottom; 2346 | opacity: 1; 2347 | } 2348 | 2349 | 100% { 2350 | -webkit-transform-origin: left bottom; 2351 | transform-origin: left bottom; 2352 | -webkit-transform: rotate3d(0, 0, 1, -45deg); 2353 | transform: rotate3d(0, 0, 1, -45deg); 2354 | opacity: 0; 2355 | } 2356 | } 2357 | 2358 | .rotateOutUpLeft { 2359 | -webkit-animation-name: rotateOutUpLeft; 2360 | animation-name: rotateOutUpLeft; 2361 | } 2362 | 2363 | @-webkit-keyframes rotateOutUpRight { 2364 | 0% { 2365 | -webkit-transform-origin: right bottom; 2366 | transform-origin: right bottom; 2367 | opacity: 1; 2368 | } 2369 | 2370 | 100% { 2371 | -webkit-transform-origin: right bottom; 2372 | transform-origin: right bottom; 2373 | -webkit-transform: rotate3d(0, 0, 1, 90deg); 2374 | transform: rotate3d(0, 0, 1, 90deg); 2375 | opacity: 0; 2376 | } 2377 | } 2378 | 2379 | @keyframes rotateOutUpRight { 2380 | 0% { 2381 | -webkit-transform-origin: right bottom; 2382 | transform-origin: right bottom; 2383 | opacity: 1; 2384 | } 2385 | 2386 | 100% { 2387 | -webkit-transform-origin: right bottom; 2388 | transform-origin: right bottom; 2389 | -webkit-transform: rotate3d(0, 0, 1, 90deg); 2390 | transform: rotate3d(0, 0, 1, 90deg); 2391 | opacity: 0; 2392 | } 2393 | } 2394 | 2395 | .rotateOutUpRight { 2396 | -webkit-animation-name: rotateOutUpRight; 2397 | animation-name: rotateOutUpRight; 2398 | } 2399 | 2400 | @-webkit-keyframes hinge { 2401 | 0% { 2402 | -webkit-transform-origin: top left; 2403 | transform-origin: top left; 2404 | -webkit-animation-timing-function: ease-in-out; 2405 | animation-timing-function: ease-in-out; 2406 | } 2407 | 2408 | 20%, 60% { 2409 | -webkit-transform: rotate3d(0, 0, 1, 80deg); 2410 | transform: rotate3d(0, 0, 1, 80deg); 2411 | -webkit-transform-origin: top left; 2412 | transform-origin: top left; 2413 | -webkit-animation-timing-function: ease-in-out; 2414 | animation-timing-function: ease-in-out; 2415 | } 2416 | 2417 | 40%, 80% { 2418 | -webkit-transform: rotate3d(0, 0, 1, 60deg); 2419 | transform: rotate3d(0, 0, 1, 60deg); 2420 | -webkit-transform-origin: top left; 2421 | transform-origin: top left; 2422 | -webkit-animation-timing-function: ease-in-out; 2423 | animation-timing-function: ease-in-out; 2424 | opacity: 1; 2425 | } 2426 | 2427 | 100% { 2428 | -webkit-transform: translate3d(0, 700px, 0); 2429 | transform: translate3d(0, 700px, 0); 2430 | opacity: 0; 2431 | } 2432 | } 2433 | 2434 | @keyframes hinge { 2435 | 0% { 2436 | -webkit-transform-origin: top left; 2437 | transform-origin: top left; 2438 | -webkit-animation-timing-function: ease-in-out; 2439 | animation-timing-function: ease-in-out; 2440 | } 2441 | 2442 | 20%, 60% { 2443 | -webkit-transform: rotate3d(0, 0, 1, 80deg); 2444 | transform: rotate3d(0, 0, 1, 80deg); 2445 | -webkit-transform-origin: top left; 2446 | transform-origin: top left; 2447 | -webkit-animation-timing-function: ease-in-out; 2448 | animation-timing-function: ease-in-out; 2449 | } 2450 | 2451 | 40%, 80% { 2452 | -webkit-transform: rotate3d(0, 0, 1, 60deg); 2453 | transform: rotate3d(0, 0, 1, 60deg); 2454 | -webkit-transform-origin: top left; 2455 | transform-origin: top left; 2456 | -webkit-animation-timing-function: ease-in-out; 2457 | animation-timing-function: ease-in-out; 2458 | opacity: 1; 2459 | } 2460 | 2461 | 100% { 2462 | -webkit-transform: translate3d(0, 700px, 0); 2463 | transform: translate3d(0, 700px, 0); 2464 | opacity: 0; 2465 | } 2466 | } 2467 | 2468 | .hinge { 2469 | -webkit-animation-name: hinge; 2470 | animation-name: hinge; 2471 | } 2472 | 2473 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2474 | 2475 | @-webkit-keyframes rollIn { 2476 | 0% { 2477 | opacity: 0; 2478 | -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2479 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2480 | } 2481 | 2482 | 100% { 2483 | opacity: 1; 2484 | -webkit-transform: none; 2485 | transform: none; 2486 | } 2487 | } 2488 | 2489 | @keyframes rollIn { 2490 | 0% { 2491 | opacity: 0; 2492 | -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2493 | transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); 2494 | } 2495 | 2496 | 100% { 2497 | opacity: 1; 2498 | -webkit-transform: none; 2499 | transform: none; 2500 | } 2501 | } 2502 | 2503 | .rollIn { 2504 | -webkit-animation-name: rollIn; 2505 | animation-name: rollIn; 2506 | } 2507 | 2508 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2509 | 2510 | @-webkit-keyframes rollOut { 2511 | 0% { 2512 | opacity: 1; 2513 | } 2514 | 2515 | 100% { 2516 | opacity: 0; 2517 | -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2518 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2519 | } 2520 | } 2521 | 2522 | @keyframes rollOut { 2523 | 0% { 2524 | opacity: 1; 2525 | } 2526 | 2527 | 100% { 2528 | opacity: 0; 2529 | -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2530 | transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); 2531 | } 2532 | } 2533 | 2534 | .rollOut { 2535 | -webkit-animation-name: rollOut; 2536 | animation-name: rollOut; 2537 | } 2538 | 2539 | @-webkit-keyframes zoomIn { 2540 | 0% { 2541 | opacity: 0; 2542 | -webkit-transform: scale3d(.3, .3, .3); 2543 | transform: scale3d(.3, .3, .3); 2544 | } 2545 | 2546 | 50% { 2547 | opacity: 1; 2548 | } 2549 | } 2550 | 2551 | @keyframes zoomIn { 2552 | 0% { 2553 | opacity: 0; 2554 | -webkit-transform: scale3d(.3, .3, .3); 2555 | transform: scale3d(.3, .3, .3); 2556 | } 2557 | 2558 | 50% { 2559 | opacity: 1; 2560 | } 2561 | } 2562 | 2563 | .zoomIn { 2564 | -webkit-animation-name: zoomIn; 2565 | animation-name: zoomIn; 2566 | } 2567 | 2568 | @-webkit-keyframes zoomInDown { 2569 | 0% { 2570 | opacity: 0; 2571 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2572 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2573 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2574 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2575 | } 2576 | 2577 | 60% { 2578 | opacity: 1; 2579 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2580 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2581 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2582 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2583 | } 2584 | } 2585 | 2586 | @keyframes zoomInDown { 2587 | 0% { 2588 | opacity: 0; 2589 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2590 | transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); 2591 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2592 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2593 | } 2594 | 2595 | 60% { 2596 | opacity: 1; 2597 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2598 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2599 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2600 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2601 | } 2602 | } 2603 | 2604 | .zoomInDown { 2605 | -webkit-animation-name: zoomInDown; 2606 | animation-name: zoomInDown; 2607 | } 2608 | 2609 | @-webkit-keyframes zoomInLeft { 2610 | 0% { 2611 | opacity: 0; 2612 | -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2613 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2614 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2615 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2616 | } 2617 | 2618 | 60% { 2619 | opacity: 1; 2620 | -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2621 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2622 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2623 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2624 | } 2625 | } 2626 | 2627 | @keyframes zoomInLeft { 2628 | 0% { 2629 | opacity: 0; 2630 | -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2631 | transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); 2632 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2633 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2634 | } 2635 | 2636 | 60% { 2637 | opacity: 1; 2638 | -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2639 | transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); 2640 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2641 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2642 | } 2643 | } 2644 | 2645 | .zoomInLeft { 2646 | -webkit-animation-name: zoomInLeft; 2647 | animation-name: zoomInLeft; 2648 | } 2649 | 2650 | @-webkit-keyframes zoomInRight { 2651 | 0% { 2652 | opacity: 0; 2653 | -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2654 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2655 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2656 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2657 | } 2658 | 2659 | 60% { 2660 | opacity: 1; 2661 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2662 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2663 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2664 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2665 | } 2666 | } 2667 | 2668 | @keyframes zoomInRight { 2669 | 0% { 2670 | opacity: 0; 2671 | -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2672 | transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); 2673 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2674 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2675 | } 2676 | 2677 | 60% { 2678 | opacity: 1; 2679 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2680 | transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); 2681 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2682 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2683 | } 2684 | } 2685 | 2686 | .zoomInRight { 2687 | -webkit-animation-name: zoomInRight; 2688 | animation-name: zoomInRight; 2689 | } 2690 | 2691 | @-webkit-keyframes zoomInUp { 2692 | 0% { 2693 | opacity: 0; 2694 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2695 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2696 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2697 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2698 | } 2699 | 2700 | 60% { 2701 | opacity: 1; 2702 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2703 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2704 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2705 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2706 | } 2707 | } 2708 | 2709 | @keyframes zoomInUp { 2710 | 0% { 2711 | opacity: 0; 2712 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2713 | transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); 2714 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2715 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2716 | } 2717 | 2718 | 60% { 2719 | opacity: 1; 2720 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2721 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2722 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2723 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2724 | } 2725 | } 2726 | 2727 | .zoomInUp { 2728 | -webkit-animation-name: zoomInUp; 2729 | animation-name: zoomInUp; 2730 | } 2731 | 2732 | @-webkit-keyframes zoomOut { 2733 | 0% { 2734 | opacity: 1; 2735 | } 2736 | 2737 | 50% { 2738 | opacity: 0; 2739 | -webkit-transform: scale3d(.3, .3, .3); 2740 | transform: scale3d(.3, .3, .3); 2741 | } 2742 | 2743 | 100% { 2744 | opacity: 0; 2745 | } 2746 | } 2747 | 2748 | @keyframes zoomOut { 2749 | 0% { 2750 | opacity: 1; 2751 | } 2752 | 2753 | 50% { 2754 | opacity: 0; 2755 | -webkit-transform: scale3d(.3, .3, .3); 2756 | transform: scale3d(.3, .3, .3); 2757 | } 2758 | 2759 | 100% { 2760 | opacity: 0; 2761 | } 2762 | } 2763 | 2764 | .zoomOut { 2765 | -webkit-animation-name: zoomOut; 2766 | animation-name: zoomOut; 2767 | } 2768 | 2769 | @-webkit-keyframes zoomOutDown { 2770 | 40% { 2771 | opacity: 1; 2772 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2773 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2774 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2775 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2776 | } 2777 | 2778 | 100% { 2779 | opacity: 0; 2780 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2781 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2782 | -webkit-transform-origin: center bottom; 2783 | transform-origin: center bottom; 2784 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2785 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2786 | } 2787 | } 2788 | 2789 | @keyframes zoomOutDown { 2790 | 40% { 2791 | opacity: 1; 2792 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2793 | transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); 2794 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2795 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2796 | } 2797 | 2798 | 100% { 2799 | opacity: 0; 2800 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2801 | transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); 2802 | -webkit-transform-origin: center bottom; 2803 | transform-origin: center bottom; 2804 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2805 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2806 | } 2807 | } 2808 | 2809 | .zoomOutDown { 2810 | -webkit-animation-name: zoomOutDown; 2811 | animation-name: zoomOutDown; 2812 | } 2813 | 2814 | @-webkit-keyframes zoomOutLeft { 2815 | 40% { 2816 | opacity: 1; 2817 | -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 2818 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 2819 | } 2820 | 2821 | 100% { 2822 | opacity: 0; 2823 | -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); 2824 | transform: scale(.1) translate3d(-2000px, 0, 0); 2825 | -webkit-transform-origin: left center; 2826 | transform-origin: left center; 2827 | } 2828 | } 2829 | 2830 | @keyframes zoomOutLeft { 2831 | 40% { 2832 | opacity: 1; 2833 | -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 2834 | transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); 2835 | } 2836 | 2837 | 100% { 2838 | opacity: 0; 2839 | -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); 2840 | transform: scale(.1) translate3d(-2000px, 0, 0); 2841 | -webkit-transform-origin: left center; 2842 | transform-origin: left center; 2843 | } 2844 | } 2845 | 2846 | .zoomOutLeft { 2847 | -webkit-animation-name: zoomOutLeft; 2848 | animation-name: zoomOutLeft; 2849 | } 2850 | 2851 | @-webkit-keyframes zoomOutRight { 2852 | 40% { 2853 | opacity: 1; 2854 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 2855 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 2856 | } 2857 | 2858 | 100% { 2859 | opacity: 0; 2860 | -webkit-transform: scale(.1) translate3d(2000px, 0, 0); 2861 | transform: scale(.1) translate3d(2000px, 0, 0); 2862 | -webkit-transform-origin: right center; 2863 | transform-origin: right center; 2864 | } 2865 | } 2866 | 2867 | @keyframes zoomOutRight { 2868 | 40% { 2869 | opacity: 1; 2870 | -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 2871 | transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); 2872 | } 2873 | 2874 | 100% { 2875 | opacity: 0; 2876 | -webkit-transform: scale(.1) translate3d(2000px, 0, 0); 2877 | transform: scale(.1) translate3d(2000px, 0, 0); 2878 | -webkit-transform-origin: right center; 2879 | transform-origin: right center; 2880 | } 2881 | } 2882 | 2883 | .zoomOutRight { 2884 | -webkit-animation-name: zoomOutRight; 2885 | animation-name: zoomOutRight; 2886 | } 2887 | 2888 | @-webkit-keyframes zoomOutUp { 2889 | 40% { 2890 | opacity: 1; 2891 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2892 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2893 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2894 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2895 | } 2896 | 2897 | 100% { 2898 | opacity: 0; 2899 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 2900 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 2901 | -webkit-transform-origin: center bottom; 2902 | transform-origin: center bottom; 2903 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2904 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2905 | } 2906 | } 2907 | 2908 | @keyframes zoomOutUp { 2909 | 40% { 2910 | opacity: 1; 2911 | -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2912 | transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); 2913 | -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2914 | animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); 2915 | } 2916 | 2917 | 100% { 2918 | opacity: 0; 2919 | -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 2920 | transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); 2921 | -webkit-transform-origin: center bottom; 2922 | transform-origin: center bottom; 2923 | -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2924 | animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); 2925 | } 2926 | } 2927 | 2928 | .zoomOutUp { 2929 | -webkit-animation-name: zoomOutUp; 2930 | animation-name: zoomOutUp; 2931 | } 2932 | 2933 | @-webkit-keyframes slideInDown { 2934 | 0% { 2935 | -webkit-transform: translate3d(0, -100%, 0); 2936 | transform: translate3d(0, -100%, 0); 2937 | visibility: visible; 2938 | } 2939 | 2940 | 100% { 2941 | -webkit-transform: translate3d(0, 0, 0); 2942 | transform: translate3d(0, 0, 0); 2943 | } 2944 | } 2945 | 2946 | @keyframes slideInDown { 2947 | 0% { 2948 | -webkit-transform: translate3d(0, -100%, 0); 2949 | transform: translate3d(0, -100%, 0); 2950 | visibility: visible; 2951 | } 2952 | 2953 | 100% { 2954 | -webkit-transform: translate3d(0, 0, 0); 2955 | transform: translate3d(0, 0, 0); 2956 | } 2957 | } 2958 | 2959 | .slideInDown { 2960 | -webkit-animation-name: slideInDown; 2961 | animation-name: slideInDown; 2962 | } 2963 | 2964 | @-webkit-keyframes slideInLeft { 2965 | 0% { 2966 | -webkit-transform: translate3d(-100%, 0, 0); 2967 | transform: translate3d(-100%, 0, 0); 2968 | visibility: visible; 2969 | } 2970 | 2971 | 100% { 2972 | -webkit-transform: translate3d(0, 0, 0); 2973 | transform: translate3d(0, 0, 0); 2974 | } 2975 | } 2976 | 2977 | @keyframes slideInLeft { 2978 | 0% { 2979 | -webkit-transform: translate3d(-100%, 0, 0); 2980 | transform: translate3d(-100%, 0, 0); 2981 | visibility: visible; 2982 | } 2983 | 2984 | 100% { 2985 | -webkit-transform: translate3d(0, 0, 0); 2986 | transform: translate3d(0, 0, 0); 2987 | } 2988 | } 2989 | 2990 | .slideInLeft { 2991 | -webkit-animation-name: slideInLeft; 2992 | animation-name: slideInLeft; 2993 | } 2994 | 2995 | @-webkit-keyframes slideInRight { 2996 | 0% { 2997 | -webkit-transform: translate3d(100%, 0, 0); 2998 | transform: translate3d(100%, 0, 0); 2999 | visibility: visible; 3000 | } 3001 | 3002 | 100% { 3003 | -webkit-transform: translate3d(0, 0, 0); 3004 | transform: translate3d(0, 0, 0); 3005 | } 3006 | } 3007 | 3008 | @keyframes slideInRight { 3009 | 0% { 3010 | -webkit-transform: translate3d(100%, 0, 0); 3011 | transform: translate3d(100%, 0, 0); 3012 | visibility: visible; 3013 | } 3014 | 3015 | 100% { 3016 | -webkit-transform: translate3d(0, 0, 0); 3017 | transform: translate3d(0, 0, 0); 3018 | } 3019 | } 3020 | 3021 | .slideInRight { 3022 | -webkit-animation-name: slideInRight; 3023 | animation-name: slideInRight; 3024 | } 3025 | 3026 | @-webkit-keyframes slideInUp { 3027 | 0% { 3028 | -webkit-transform: translate3d(0, 100%, 0); 3029 | transform: translate3d(0, 100%, 0); 3030 | visibility: visible; 3031 | } 3032 | 3033 | 100% { 3034 | -webkit-transform: translate3d(0, 0, 0); 3035 | transform: translate3d(0, 0, 0); 3036 | } 3037 | } 3038 | 3039 | @keyframes slideInUp { 3040 | 0% { 3041 | -webkit-transform: translate3d(0, 100%, 0); 3042 | transform: translate3d(0, 100%, 0); 3043 | visibility: visible; 3044 | } 3045 | 3046 | 100% { 3047 | -webkit-transform: translate3d(0, 0, 0); 3048 | transform: translate3d(0, 0, 0); 3049 | } 3050 | } 3051 | 3052 | .slideInUp { 3053 | -webkit-animation-name: slideInUp; 3054 | animation-name: slideInUp; 3055 | } 3056 | 3057 | @-webkit-keyframes slideOutDown { 3058 | 0% { 3059 | -webkit-transform: translate3d(0, 0, 0); 3060 | transform: translate3d(0, 0, 0); 3061 | } 3062 | 3063 | 100% { 3064 | visibility: hidden; 3065 | -webkit-transform: translate3d(0, 100%, 0); 3066 | transform: translate3d(0, 100%, 0); 3067 | } 3068 | } 3069 | 3070 | @keyframes slideOutDown { 3071 | 0% { 3072 | -webkit-transform: translate3d(0, 0, 0); 3073 | transform: translate3d(0, 0, 0); 3074 | } 3075 | 3076 | 100% { 3077 | visibility: hidden; 3078 | -webkit-transform: translate3d(0, 100%, 0); 3079 | transform: translate3d(0, 100%, 0); 3080 | } 3081 | } 3082 | 3083 | .slideOutDown { 3084 | -webkit-animation-name: slideOutDown; 3085 | animation-name: slideOutDown; 3086 | } 3087 | 3088 | @-webkit-keyframes slideOutLeft { 3089 | 0% { 3090 | -webkit-transform: translate3d(0, 0, 0); 3091 | transform: translate3d(0, 0, 0); 3092 | } 3093 | 3094 | 100% { 3095 | visibility: hidden; 3096 | -webkit-transform: translate3d(-100%, 0, 0); 3097 | transform: translate3d(-100%, 0, 0); 3098 | } 3099 | } 3100 | 3101 | @keyframes slideOutLeft { 3102 | 0% { 3103 | -webkit-transform: translate3d(0, 0, 0); 3104 | transform: translate3d(0, 0, 0); 3105 | } 3106 | 3107 | 100% { 3108 | visibility: hidden; 3109 | -webkit-transform: translate3d(-100%, 0, 0); 3110 | transform: translate3d(-100%, 0, 0); 3111 | } 3112 | } 3113 | 3114 | .slideOutLeft { 3115 | -webkit-animation-name: slideOutLeft; 3116 | animation-name: slideOutLeft; 3117 | } 3118 | 3119 | @-webkit-keyframes slideOutRight { 3120 | 0% { 3121 | -webkit-transform: translate3d(0, 0, 0); 3122 | transform: translate3d(0, 0, 0); 3123 | } 3124 | 3125 | 100% { 3126 | visibility: hidden; 3127 | -webkit-transform: translate3d(100%, 0, 0); 3128 | transform: translate3d(100%, 0, 0); 3129 | } 3130 | } 3131 | 3132 | @keyframes slideOutRight { 3133 | 0% { 3134 | -webkit-transform: translate3d(0, 0, 0); 3135 | transform: translate3d(0, 0, 0); 3136 | } 3137 | 3138 | 100% { 3139 | visibility: hidden; 3140 | -webkit-transform: translate3d(100%, 0, 0); 3141 | transform: translate3d(100%, 0, 0); 3142 | } 3143 | } 3144 | 3145 | .slideOutRight { 3146 | -webkit-animation-name: slideOutRight; 3147 | animation-name: slideOutRight; 3148 | } 3149 | 3150 | @-webkit-keyframes slideOutUp { 3151 | 0% { 3152 | -webkit-transform: translate3d(0, 0, 0); 3153 | transform: translate3d(0, 0, 0); 3154 | } 3155 | 3156 | 100% { 3157 | visibility: hidden; 3158 | -webkit-transform: translate3d(0, -100%, 0); 3159 | transform: translate3d(0, -100%, 0); 3160 | } 3161 | } 3162 | 3163 | @keyframes slideOutUp { 3164 | 0% { 3165 | -webkit-transform: translate3d(0, 0, 0); 3166 | transform: translate3d(0, 0, 0); 3167 | } 3168 | 3169 | 100% { 3170 | visibility: hidden; 3171 | -webkit-transform: translate3d(0, -100%, 0); 3172 | transform: translate3d(0, -100%, 0); 3173 | } 3174 | } 3175 | 3176 | .slideOutUp { 3177 | -webkit-animation-name: slideOutUp; 3178 | animation-name: slideOutUp; 3179 | } -------------------------------------------------------------------------------- /server/methods.js: -------------------------------------------------------------------------------- 1 | Meteor.methods({ 2 | 'toggleAll': function (ids, checked) { 3 | check(ids, [String]); 4 | check(checked, Boolean); 5 | 6 | Todos.update({_id: {$in: ids}}, 7 | {$set: {completed: checked}}, {multi:true}); 8 | }, 9 | 10 | 'clearCompleted':function(ids){ 11 | check(ids, [String]); 12 | 13 | Todos.remove({_id: {$in: ids}, completed: true }); 14 | } 15 | }); -------------------------------------------------------------------------------- /server/publications.js: -------------------------------------------------------------------------------- 1 | Meteor.publish("todos", function() { 2 | // publish private todos only to authenticated users 3 | var filter = (this.userId) ? {} : {private: {$ne: true} } ; 4 | return Todos.find(filter); 5 | }); 6 | 7 | // autoseed 8 | if (Todos.find({private: true}).count() === 0){ 9 | Todos.insert({title:'Secret note1', completed:false, private:true}); 10 | Todos.insert({title:'Secret note2', completed:false, private:true}); 11 | } --------------------------------------------------------------------------------