├── .gitignore ├── Gruntfile.js ├── bower.json ├── dev ├── javascript │ └── app.js ├── styles │ ├── _animate.scss │ ├── _colours.scss │ ├── _functions.scss │ ├── _grid.scss │ ├── _mixins.scss │ └── main.scss └── templates │ ├── includes │ └── header.jade │ └── index.jade ├── dist ├── css │ ├── fonts │ │ ├── Montserrat-Regular.eot │ │ ├── Montserrat-Regular.svg │ │ ├── Montserrat-Regular.ttf │ │ └── Montserrat-Regular.woff │ ├── main.css │ └── reset.css ├── images │ ├── Blur-4.png │ ├── background.jpg │ └── favicon.png ├── index.html └── scripts │ ├── main.min.js │ └── vendor │ ├── angular-animate │ └── angular-animate.min.js │ ├── angular-dropdowns │ └── angular-dropdowns.min.js │ ├── angular │ └── angular.min.js │ ├── jquery │ └── jquery.min.js │ └── modernizr │ └── modernizr.js ├── package.json └── readme.md /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache/ 2 | bower_components/ 3 | node_modules/ -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | var stylesheetsDir = 'dev/styles/'; 4 | 5 | module.exports = function(grunt) { 6 | // Project configuration. 7 | grunt.initConfig({ 8 | pkg: grunt.file.readJSON('package.json'), 9 | bowercopy: { 10 | options: { 11 | srcPrefix: 'bower_components' 12 | }, 13 | scripts: { 14 | options: { 15 | destPrefix: 'dist/scripts/vendor' 16 | }, 17 | files: { 18 | 'jquery/jquery.min.js': 'jquery/jquery.min.js', 19 | 'modernizr/modernizr.js': 'modernizr/modernizr.js', 20 | 'angular/angular.min.js': 'angular/angular.min.js', 21 | 'angular-dropdowns/angular-dropdowns.min.js': 'angular-dropdowns/dist/angular-dropdowns.min.js', 22 | 'angular-animate/angular-animate.min.js': 'angular-animate/angular-animate.min.js', 23 | } 24 | } 25 | }, 26 | jade: { 27 | html: { 28 | files: { 29 | 'dist/': ['dev/templates/*.jade'] 30 | }, 31 | options: { 32 | client: false, 33 | wrap: false 34 | } 35 | } 36 | }, 37 | connect: { 38 | server: { 39 | options: { 40 | port: 9001, 41 | base: 'dist/' 42 | } 43 | } 44 | }, 45 | concat: { 46 | js: { 47 | options: { 48 | separator: ';' 49 | }, 50 | src: [ 51 | 'dev/javascript/*.js' 52 | ], 53 | dest: 'dist/scripts/main.min.js' 54 | }, 55 | }, 56 | uglify: { 57 | options: { 58 | mangle: false 59 | }, 60 | js: { 61 | files: { 62 | 'dist/scripts/main.min.js': ['dev/javascript/app.js'] 63 | } 64 | } 65 | }, 66 | sass: { // Task 67 | dist: { // Target 68 | options: { // Target options 69 | style: 'expanded' 70 | }, 71 | files: { // Dictionary of files 72 | 'dist/css/main.css': stylesheetsDir + 'main.scss' // 'destination': 'source' 73 | } 74 | } 75 | }, 76 | svginject: { 77 | all : { 78 | options: {}, 79 | files: { 80 | 'dist/scripts/svginject.js': ['dist/css/svg/*.svg'], 81 | } 82 | } 83 | }, 84 | autoprefixer: { 85 | options: { 86 | browsers: ['last 5 version', 'ie 7', 'ie 8', 'ie 9'] 87 | }, 88 | no_dest: { 89 | src: 'dist/css/main.css' 90 | } 91 | }, 92 | uncss: { 93 | dist: { 94 | files: { 95 | 'dist/css/main.css' : ['dist/index.html'] 96 | } 97 | }, 98 | options: { 99 | ignore: ['#loading-bar*'] 100 | } 101 | }, 102 | watch: { 103 | js: { 104 | files: ['dev/javascript/*.js'], 105 | tasks: ['concat:js', 'uglify:js'], 106 | options: { 107 | livereload: true 108 | } 109 | }, 110 | css: { 111 | files: ['dev/**/*.scss'], 112 | tasks: ['sass', 'autoprefixer'], 113 | options: { 114 | livereload: true 115 | } 116 | }, 117 | jade: { 118 | files: ['dev/templates/*.jade', 'dev/templates/includes/*.jade'], 119 | tasks: ['jade'], 120 | options: { 121 | livereload: true 122 | } 123 | } 124 | } 125 | }); 126 | grunt.loadNpmTasks('grunt-bowercopy'); 127 | grunt.loadNpmTasks('grunt-jade'); 128 | grunt.loadNpmTasks('grunt-contrib-connect'); 129 | grunt.loadNpmTasks('grunt-contrib-concat'); 130 | grunt.loadNpmTasks('grunt-contrib-uglify'); 131 | grunt.loadNpmTasks('grunt-contrib-sass'); 132 | grunt.loadNpmTasks('grunt-svginject'); 133 | grunt.loadNpmTasks('grunt-autoprefixer'); 134 | grunt.loadNpmTasks('grunt-contrib-watch'); 135 | grunt.loadNpmTasks('grunt-uncss'); 136 | // Run the server and watch for file changes 137 | grunt.registerTask('default', ['jade', 'connect', 'concat', 'uglify', 'sass', 'autoprefixer', 'watch']); // Build Tasks 138 | grunt.registerTask('clean', ['uncss']); // Deploy build tasks 139 | grunt.registerTask('inject', ['bowercopy', 'svginject']); // Inject Bower and SVG tools 140 | }; -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "strongarm", 3 | "version": "1", 4 | "description": "componenetssssssss", 5 | "license": "MIT", 6 | "private": true, 7 | "ignore": [ 8 | "**/.*", 9 | "node_modules", 10 | "bower_components", 11 | "test", 12 | "tests" 13 | ], 14 | "dependencies": { 15 | "modernizr": "~2.6.2", 16 | "jquery": "~1.10.2" 17 | }, 18 | "dependenciesIgnore": { 19 | "jquery": [ 20 | "**/!(jquery.js)" 21 | ], 22 | "modernizr": [ 23 | "**/!(modernizr.js)" 24 | ], 25 | "when": [ 26 | "docs", 27 | "test", 28 | "*.!(js)", 29 | ".*" 30 | ] 31 | }, 32 | "authors": [ 33 | "Drew Minns" 34 | ], 35 | "homepage": "http://www.drewminns.com" 36 | } 37 | -------------------------------------------------------------------------------- /dev/javascript/app.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var iBrokeGit = angular.module('gitApp', ['ngDropdowns', 'ngAnimate']); 4 | 5 | iBrokeGit.controller('gitAppCtrl', function($scope) { 6 | $scope.templateOptions = [ 7 | { 8 | text: 'Push my files', 9 | url: 'push.html' 10 | },{ 11 | text: 'Pull Changes from my Repo', 12 | url: 'pullLocal.html' 13 | },{ 14 | text: 'Update my repo with changes from another repo', 15 | url: 'pullUpstream.html' 16 | },{ 17 | text: 'Clone a repo to my computer', 18 | url: 'clone.html' 19 | },{ 20 | text: 'Create a new Repository', 21 | url: 'create.html' 22 | },{ 23 | text: 'Fork a Repo', 24 | url: 'fork.html' 25 | },{ 26 | text: 'Create a Pull Request', 27 | url: 'pullRequest.html' 28 | },{ 29 | text: 'Remove Changes from Staging', 30 | url: 'resetHard.html' 31 | }, { 32 | text: 'Pull and Merge with minimal conflicts', 33 | url: 'rebase.html' 34 | }]; 35 | $scope.templateSelected = { text: 'Select an Option'}; 36 | }); -------------------------------------------------------------------------------- /dev/styles/_animate.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*! 4 | Animate.css - http://daneden.me/animate 5 | Licensed under the MIT license 6 | 7 | Copyright (c) 2013 Daniel Eden 8 | 9 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 14 | */ 15 | 16 | .animated { 17 | -webkit-animation-duration: 1s; 18 | animation-duration: 1s; 19 | -webkit-animation-fill-mode: both; 20 | animation-fill-mode: both; 21 | } 22 | 23 | .animated.infinite { 24 | -webkit-animation-iteration-count: infinite; 25 | animation-iteration-count: infinite; 26 | } 27 | 28 | .animated.hinge { 29 | -webkit-animation-duration: 2s; 30 | animation-duration: 2s; 31 | } 32 | 33 | @-webkit-keyframes bounce { 34 | 0%, 20%, 50%, 80%, 100% { 35 | -webkit-transform: translateY(0); 36 | transform: translateY(0); 37 | } 38 | 39 | 40% { 40 | -webkit-transform: translateY(-30px); 41 | transform: translateY(-30px); 42 | } 43 | 44 | 60% { 45 | -webkit-transform: translateY(-15px); 46 | transform: translateY(-15px); 47 | } 48 | } 49 | 50 | @keyframes bounce { 51 | 0%, 20%, 50%, 80%, 100% { 52 | -webkit-transform: translateY(0); 53 | -ms-transform: translateY(0); 54 | transform: translateY(0); 55 | } 56 | 57 | 40% { 58 | -webkit-transform: translateY(-30px); 59 | -ms-transform: translateY(-30px); 60 | transform: translateY(-30px); 61 | } 62 | 63 | 60% { 64 | -webkit-transform: translateY(-15px); 65 | -ms-transform: translateY(-15px); 66 | transform: translateY(-15px); 67 | } 68 | } 69 | 70 | .bounce { 71 | -webkit-animation-name: bounce; 72 | animation-name: bounce; 73 | } 74 | 75 | @-webkit-keyframes flash { 76 | 0%, 50%, 100% { 77 | opacity: 1; 78 | } 79 | 80 | 25%, 75% { 81 | opacity: 0; 82 | } 83 | } 84 | 85 | @keyframes flash { 86 | 0%, 50%, 100% { 87 | opacity: 1; 88 | } 89 | 90 | 25%, 75% { 91 | opacity: 0; 92 | } 93 | } 94 | 95 | .flash { 96 | -webkit-animation-name: flash; 97 | animation-name: flash; 98 | } 99 | 100 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 101 | 102 | @-webkit-keyframes pulse { 103 | 0% { 104 | -webkit-transform: scale(1); 105 | transform: scale(1); 106 | } 107 | 108 | 50% { 109 | -webkit-transform: scale(1.1); 110 | transform: scale(1.1); 111 | } 112 | 113 | 100% { 114 | -webkit-transform: scale(1); 115 | transform: scale(1); 116 | } 117 | } 118 | 119 | @keyframes pulse { 120 | 0% { 121 | -webkit-transform: scale(1); 122 | -ms-transform: scale(1); 123 | transform: scale(1); 124 | } 125 | 126 | 50% { 127 | -webkit-transform: scale(1.1); 128 | -ms-transform: scale(1.1); 129 | transform: scale(1.1); 130 | } 131 | 132 | 100% { 133 | -webkit-transform: scale(1); 134 | -ms-transform: scale(1); 135 | transform: scale(1); 136 | } 137 | } 138 | 139 | .pulse { 140 | -webkit-animation-name: pulse; 141 | animation-name: pulse; 142 | } 143 | 144 | @-webkit-keyframes rubberBand { 145 | 0% { 146 | -webkit-transform: scale(1); 147 | transform: scale(1); 148 | } 149 | 150 | 30% { 151 | -webkit-transform: scaleX(1.25) scaleY(0.75); 152 | transform: scaleX(1.25) scaleY(0.75); 153 | } 154 | 155 | 40% { 156 | -webkit-transform: scaleX(0.75) scaleY(1.25); 157 | transform: scaleX(0.75) scaleY(1.25); 158 | } 159 | 160 | 60% { 161 | -webkit-transform: scaleX(1.15) scaleY(0.85); 162 | transform: scaleX(1.15) scaleY(0.85); 163 | } 164 | 165 | 100% { 166 | -webkit-transform: scale(1); 167 | transform: scale(1); 168 | } 169 | } 170 | 171 | @keyframes rubberBand { 172 | 0% { 173 | -webkit-transform: scale(1); 174 | -ms-transform: scale(1); 175 | transform: scale(1); 176 | } 177 | 178 | 30% { 179 | -webkit-transform: scaleX(1.25) scaleY(0.75); 180 | -ms-transform: scaleX(1.25) scaleY(0.75); 181 | transform: scaleX(1.25) scaleY(0.75); 182 | } 183 | 184 | 40% { 185 | -webkit-transform: scaleX(0.75) scaleY(1.25); 186 | -ms-transform: scaleX(0.75) scaleY(1.25); 187 | transform: scaleX(0.75) scaleY(1.25); 188 | } 189 | 190 | 60% { 191 | -webkit-transform: scaleX(1.15) scaleY(0.85); 192 | -ms-transform: scaleX(1.15) scaleY(0.85); 193 | transform: scaleX(1.15) scaleY(0.85); 194 | } 195 | 196 | 100% { 197 | -webkit-transform: scale(1); 198 | -ms-transform: scale(1); 199 | transform: scale(1); 200 | } 201 | } 202 | 203 | .rubberBand { 204 | -webkit-animation-name: rubberBand; 205 | animation-name: rubberBand; 206 | } 207 | 208 | @-webkit-keyframes shake { 209 | 0%, 100% { 210 | -webkit-transform: translateX(0); 211 | transform: translateX(0); 212 | } 213 | 214 | 10%, 30%, 50%, 70%, 90% { 215 | -webkit-transform: translateX(-10px); 216 | transform: translateX(-10px); 217 | } 218 | 219 | 20%, 40%, 60%, 80% { 220 | -webkit-transform: translateX(10px); 221 | transform: translateX(10px); 222 | } 223 | } 224 | 225 | @keyframes shake { 226 | 0%, 100% { 227 | -webkit-transform: translateX(0); 228 | -ms-transform: translateX(0); 229 | transform: translateX(0); 230 | } 231 | 232 | 10%, 30%, 50%, 70%, 90% { 233 | -webkit-transform: translateX(-10px); 234 | -ms-transform: translateX(-10px); 235 | transform: translateX(-10px); 236 | } 237 | 238 | 20%, 40%, 60%, 80% { 239 | -webkit-transform: translateX(10px); 240 | -ms-transform: translateX(10px); 241 | transform: translateX(10px); 242 | } 243 | } 244 | 245 | .shake { 246 | -webkit-animation-name: shake; 247 | animation-name: shake; 248 | } 249 | 250 | @-webkit-keyframes swing { 251 | 20% { 252 | -webkit-transform: rotate(15deg); 253 | transform: rotate(15deg); 254 | } 255 | 256 | 40% { 257 | -webkit-transform: rotate(-10deg); 258 | transform: rotate(-10deg); 259 | } 260 | 261 | 60% { 262 | -webkit-transform: rotate(5deg); 263 | transform: rotate(5deg); 264 | } 265 | 266 | 80% { 267 | -webkit-transform: rotate(-5deg); 268 | transform: rotate(-5deg); 269 | } 270 | 271 | 100% { 272 | -webkit-transform: rotate(0deg); 273 | transform: rotate(0deg); 274 | } 275 | } 276 | 277 | @keyframes swing { 278 | 20% { 279 | -webkit-transform: rotate(15deg); 280 | -ms-transform: rotate(15deg); 281 | transform: rotate(15deg); 282 | } 283 | 284 | 40% { 285 | -webkit-transform: rotate(-10deg); 286 | -ms-transform: rotate(-10deg); 287 | transform: rotate(-10deg); 288 | } 289 | 290 | 60% { 291 | -webkit-transform: rotate(5deg); 292 | -ms-transform: rotate(5deg); 293 | transform: rotate(5deg); 294 | } 295 | 296 | 80% { 297 | -webkit-transform: rotate(-5deg); 298 | -ms-transform: rotate(-5deg); 299 | transform: rotate(-5deg); 300 | } 301 | 302 | 100% { 303 | -webkit-transform: rotate(0deg); 304 | -ms-transform: rotate(0deg); 305 | transform: rotate(0deg); 306 | } 307 | } 308 | 309 | .swing { 310 | -webkit-transform-origin: top center; 311 | -ms-transform-origin: top center; 312 | transform-origin: top center; 313 | -webkit-animation-name: swing; 314 | animation-name: swing; 315 | } 316 | 317 | @-webkit-keyframes tada { 318 | 0% { 319 | -webkit-transform: scale(1); 320 | transform: scale(1); 321 | } 322 | 323 | 10%, 20% { 324 | -webkit-transform: scale(0.9) rotate(-3deg); 325 | transform: scale(0.9) rotate(-3deg); 326 | } 327 | 328 | 30%, 50%, 70%, 90% { 329 | -webkit-transform: scale(1.1) rotate(3deg); 330 | transform: scale(1.1) rotate(3deg); 331 | } 332 | 333 | 40%, 60%, 80% { 334 | -webkit-transform: scale(1.1) rotate(-3deg); 335 | transform: scale(1.1) rotate(-3deg); 336 | } 337 | 338 | 100% { 339 | -webkit-transform: scale(1) rotate(0); 340 | transform: scale(1) rotate(0); 341 | } 342 | } 343 | 344 | @keyframes tada { 345 | 0% { 346 | -webkit-transform: scale(1); 347 | -ms-transform: scale(1); 348 | transform: scale(1); 349 | } 350 | 351 | 10%, 20% { 352 | -webkit-transform: scale(0.9) rotate(-3deg); 353 | -ms-transform: scale(0.9) rotate(-3deg); 354 | transform: scale(0.9) rotate(-3deg); 355 | } 356 | 357 | 30%, 50%, 70%, 90% { 358 | -webkit-transform: scale(1.1) rotate(3deg); 359 | -ms-transform: scale(1.1) rotate(3deg); 360 | transform: scale(1.1) rotate(3deg); 361 | } 362 | 363 | 40%, 60%, 80% { 364 | -webkit-transform: scale(1.1) rotate(-3deg); 365 | -ms-transform: scale(1.1) rotate(-3deg); 366 | transform: scale(1.1) rotate(-3deg); 367 | } 368 | 369 | 100% { 370 | -webkit-transform: scale(1) rotate(0); 371 | -ms-transform: scale(1) rotate(0); 372 | transform: scale(1) rotate(0); 373 | } 374 | } 375 | 376 | .tada { 377 | -webkit-animation-name: tada; 378 | animation-name: tada; 379 | } 380 | 381 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 382 | 383 | @-webkit-keyframes wobble { 384 | 0% { 385 | -webkit-transform: translateX(0%); 386 | transform: translateX(0%); 387 | } 388 | 389 | 15% { 390 | -webkit-transform: translateX(-25%) rotate(-5deg); 391 | transform: translateX(-25%) rotate(-5deg); 392 | } 393 | 394 | 30% { 395 | -webkit-transform: translateX(20%) rotate(3deg); 396 | transform: translateX(20%) rotate(3deg); 397 | } 398 | 399 | 45% { 400 | -webkit-transform: translateX(-15%) rotate(-3deg); 401 | transform: translateX(-15%) rotate(-3deg); 402 | } 403 | 404 | 60% { 405 | -webkit-transform: translateX(10%) rotate(2deg); 406 | transform: translateX(10%) rotate(2deg); 407 | } 408 | 409 | 75% { 410 | -webkit-transform: translateX(-5%) rotate(-1deg); 411 | transform: translateX(-5%) rotate(-1deg); 412 | } 413 | 414 | 100% { 415 | -webkit-transform: translateX(0%); 416 | transform: translateX(0%); 417 | } 418 | } 419 | 420 | @keyframes wobble { 421 | 0% { 422 | -webkit-transform: translateX(0%); 423 | -ms-transform: translateX(0%); 424 | transform: translateX(0%); 425 | } 426 | 427 | 15% { 428 | -webkit-transform: translateX(-25%) rotate(-5deg); 429 | -ms-transform: translateX(-25%) rotate(-5deg); 430 | transform: translateX(-25%) rotate(-5deg); 431 | } 432 | 433 | 30% { 434 | -webkit-transform: translateX(20%) rotate(3deg); 435 | -ms-transform: translateX(20%) rotate(3deg); 436 | transform: translateX(20%) rotate(3deg); 437 | } 438 | 439 | 45% { 440 | -webkit-transform: translateX(-15%) rotate(-3deg); 441 | -ms-transform: translateX(-15%) rotate(-3deg); 442 | transform: translateX(-15%) rotate(-3deg); 443 | } 444 | 445 | 60% { 446 | -webkit-transform: translateX(10%) rotate(2deg); 447 | -ms-transform: translateX(10%) rotate(2deg); 448 | transform: translateX(10%) rotate(2deg); 449 | } 450 | 451 | 75% { 452 | -webkit-transform: translateX(-5%) rotate(-1deg); 453 | -ms-transform: translateX(-5%) rotate(-1deg); 454 | transform: translateX(-5%) rotate(-1deg); 455 | } 456 | 457 | 100% { 458 | -webkit-transform: translateX(0%); 459 | -ms-transform: translateX(0%); 460 | transform: translateX(0%); 461 | } 462 | } 463 | 464 | .wobble { 465 | -webkit-animation-name: wobble; 466 | animation-name: wobble; 467 | } 468 | 469 | @-webkit-keyframes bounceIn { 470 | 0% { 471 | opacity: 0; 472 | -webkit-transform: scale(.3); 473 | transform: scale(.3); 474 | } 475 | 476 | 50% { 477 | opacity: 1; 478 | -webkit-transform: scale(1.05); 479 | transform: scale(1.05); 480 | } 481 | 482 | 70% { 483 | -webkit-transform: scale(.9); 484 | transform: scale(.9); 485 | } 486 | 487 | 100% { 488 | opacity: 1; 489 | -webkit-transform: scale(1); 490 | transform: scale(1); 491 | } 492 | } 493 | 494 | @keyframes bounceIn { 495 | 0% { 496 | opacity: 0; 497 | -webkit-transform: scale(.3); 498 | -ms-transform: scale(.3); 499 | transform: scale(.3); 500 | } 501 | 502 | 50% { 503 | opacity: 1; 504 | -webkit-transform: scale(1.05); 505 | -ms-transform: scale(1.05); 506 | transform: scale(1.05); 507 | } 508 | 509 | 70% { 510 | -webkit-transform: scale(.9); 511 | -ms-transform: scale(.9); 512 | transform: scale(.9); 513 | } 514 | 515 | 100% { 516 | opacity: 1; 517 | -webkit-transform: scale(1); 518 | -ms-transform: scale(1); 519 | transform: scale(1); 520 | } 521 | } 522 | 523 | .bounceIn { 524 | -webkit-animation-name: bounceIn; 525 | animation-name: bounceIn; 526 | } 527 | 528 | @-webkit-keyframes bounceInDown { 529 | 0% { 530 | opacity: 0; 531 | -webkit-transform: translateY(-2000px); 532 | transform: translateY(-2000px); 533 | } 534 | 535 | 60% { 536 | opacity: 1; 537 | -webkit-transform: translateY(30px); 538 | transform: translateY(30px); 539 | } 540 | 541 | 80% { 542 | -webkit-transform: translateY(-10px); 543 | transform: translateY(-10px); 544 | } 545 | 546 | 100% { 547 | -webkit-transform: translateY(0); 548 | transform: translateY(0); 549 | } 550 | } 551 | 552 | @keyframes bounceInDown { 553 | 0% { 554 | opacity: 0; 555 | -webkit-transform: translateY(-2000px); 556 | -ms-transform: translateY(-2000px); 557 | transform: translateY(-2000px); 558 | } 559 | 560 | 60% { 561 | opacity: 1; 562 | -webkit-transform: translateY(30px); 563 | -ms-transform: translateY(30px); 564 | transform: translateY(30px); 565 | } 566 | 567 | 80% { 568 | -webkit-transform: translateY(-10px); 569 | -ms-transform: translateY(-10px); 570 | transform: translateY(-10px); 571 | } 572 | 573 | 100% { 574 | -webkit-transform: translateY(0); 575 | -ms-transform: translateY(0); 576 | transform: translateY(0); 577 | } 578 | } 579 | 580 | .bounceInDown { 581 | -webkit-animation-name: bounceInDown; 582 | animation-name: bounceInDown; 583 | } 584 | 585 | @-webkit-keyframes bounceInLeft { 586 | 0% { 587 | opacity: 0; 588 | -webkit-transform: translateX(-2000px); 589 | transform: translateX(-2000px); 590 | } 591 | 592 | 60% { 593 | opacity: 1; 594 | -webkit-transform: translateX(30px); 595 | transform: translateX(30px); 596 | } 597 | 598 | 80% { 599 | -webkit-transform: translateX(-10px); 600 | transform: translateX(-10px); 601 | } 602 | 603 | 100% { 604 | -webkit-transform: translateX(0); 605 | transform: translateX(0); 606 | } 607 | } 608 | 609 | @keyframes bounceInLeft { 610 | 0% { 611 | opacity: 0; 612 | -webkit-transform: translateX(-2000px); 613 | -ms-transform: translateX(-2000px); 614 | transform: translateX(-2000px); 615 | } 616 | 617 | 60% { 618 | opacity: 1; 619 | -webkit-transform: translateX(30px); 620 | -ms-transform: translateX(30px); 621 | transform: translateX(30px); 622 | } 623 | 624 | 80% { 625 | -webkit-transform: translateX(-10px); 626 | -ms-transform: translateX(-10px); 627 | transform: translateX(-10px); 628 | } 629 | 630 | 100% { 631 | -webkit-transform: translateX(0); 632 | -ms-transform: translateX(0); 633 | transform: translateX(0); 634 | } 635 | } 636 | 637 | .bounceInLeft { 638 | -webkit-animation-name: bounceInLeft; 639 | animation-name: bounceInLeft; 640 | } 641 | 642 | @-webkit-keyframes bounceInRight { 643 | 0% { 644 | opacity: 0; 645 | -webkit-transform: translateX(2000px); 646 | transform: translateX(2000px); 647 | } 648 | 649 | 60% { 650 | opacity: 1; 651 | -webkit-transform: translateX(-30px); 652 | transform: translateX(-30px); 653 | } 654 | 655 | 80% { 656 | -webkit-transform: translateX(10px); 657 | transform: translateX(10px); 658 | } 659 | 660 | 100% { 661 | -webkit-transform: translateX(0); 662 | transform: translateX(0); 663 | } 664 | } 665 | 666 | @keyframes bounceInRight { 667 | 0% { 668 | opacity: 0; 669 | -webkit-transform: translateX(2000px); 670 | -ms-transform: translateX(2000px); 671 | transform: translateX(2000px); 672 | } 673 | 674 | 60% { 675 | opacity: 1; 676 | -webkit-transform: translateX(-30px); 677 | -ms-transform: translateX(-30px); 678 | transform: translateX(-30px); 679 | } 680 | 681 | 80% { 682 | -webkit-transform: translateX(10px); 683 | -ms-transform: translateX(10px); 684 | transform: translateX(10px); 685 | } 686 | 687 | 100% { 688 | -webkit-transform: translateX(0); 689 | -ms-transform: translateX(0); 690 | transform: translateX(0); 691 | } 692 | } 693 | 694 | .bounceInRight { 695 | -webkit-animation-name: bounceInRight; 696 | animation-name: bounceInRight; 697 | } 698 | 699 | @-webkit-keyframes bounceInUp { 700 | 0% { 701 | opacity: 0; 702 | -webkit-transform: translateY(2000px); 703 | transform: translateY(2000px); 704 | } 705 | 706 | 60% { 707 | opacity: 1; 708 | -webkit-transform: translateY(-30px); 709 | transform: translateY(-30px); 710 | } 711 | 712 | 80% { 713 | -webkit-transform: translateY(10px); 714 | transform: translateY(10px); 715 | } 716 | 717 | 100% { 718 | -webkit-transform: translateY(0); 719 | transform: translateY(0); 720 | } 721 | } 722 | 723 | @keyframes bounceInUp { 724 | 0% { 725 | opacity: 0; 726 | -webkit-transform: translateY(2000px); 727 | -ms-transform: translateY(2000px); 728 | transform: translateY(2000px); 729 | } 730 | 731 | 60% { 732 | opacity: 1; 733 | -webkit-transform: translateY(-30px); 734 | -ms-transform: translateY(-30px); 735 | transform: translateY(-30px); 736 | } 737 | 738 | 80% { 739 | -webkit-transform: translateY(10px); 740 | -ms-transform: translateY(10px); 741 | transform: translateY(10px); 742 | } 743 | 744 | 100% { 745 | -webkit-transform: translateY(0); 746 | -ms-transform: translateY(0); 747 | transform: translateY(0); 748 | } 749 | } 750 | 751 | .bounceInUp { 752 | -webkit-animation-name: bounceInUp; 753 | animation-name: bounceInUp; 754 | } 755 | 756 | @-webkit-keyframes bounceOut { 757 | 0% { 758 | -webkit-transform: scale(1); 759 | transform: scale(1); 760 | } 761 | 762 | 25% { 763 | -webkit-transform: scale(.95); 764 | transform: scale(.95); 765 | } 766 | 767 | 50% { 768 | opacity: 1; 769 | -webkit-transform: scale(1.1); 770 | transform: scale(1.1); 771 | } 772 | 773 | 100% { 774 | opacity: 0; 775 | -webkit-transform: scale(.3); 776 | transform: scale(.3); 777 | } 778 | } 779 | 780 | @keyframes bounceOut { 781 | 0% { 782 | -webkit-transform: scale(1); 783 | -ms-transform: scale(1); 784 | transform: scale(1); 785 | } 786 | 787 | 25% { 788 | -webkit-transform: scale(.95); 789 | -ms-transform: scale(.95); 790 | transform: scale(.95); 791 | } 792 | 793 | 50% { 794 | opacity: 1; 795 | -webkit-transform: scale(1.1); 796 | -ms-transform: scale(1.1); 797 | transform: scale(1.1); 798 | } 799 | 800 | 100% { 801 | opacity: 0; 802 | -webkit-transform: scale(.3); 803 | -ms-transform: scale(.3); 804 | transform: scale(.3); 805 | } 806 | } 807 | 808 | .bounceOut { 809 | -webkit-animation-name: bounceOut; 810 | animation-name: bounceOut; 811 | } 812 | 813 | @-webkit-keyframes bounceOutDown { 814 | 0% { 815 | -webkit-transform: translateY(0); 816 | transform: translateY(0); 817 | } 818 | 819 | 20% { 820 | opacity: 1; 821 | -webkit-transform: translateY(-20px); 822 | transform: translateY(-20px); 823 | } 824 | 825 | 100% { 826 | opacity: 0; 827 | -webkit-transform: translateY(2000px); 828 | transform: translateY(2000px); 829 | } 830 | } 831 | 832 | @keyframes bounceOutDown { 833 | 0% { 834 | -webkit-transform: translateY(0); 835 | -ms-transform: translateY(0); 836 | transform: translateY(0); 837 | } 838 | 839 | 20% { 840 | opacity: 1; 841 | -webkit-transform: translateY(-20px); 842 | -ms-transform: translateY(-20px); 843 | transform: translateY(-20px); 844 | } 845 | 846 | 100% { 847 | opacity: 0; 848 | -webkit-transform: translateY(2000px); 849 | -ms-transform: translateY(2000px); 850 | transform: translateY(2000px); 851 | } 852 | } 853 | 854 | .bounceOutDown { 855 | -webkit-animation-name: bounceOutDown; 856 | animation-name: bounceOutDown; 857 | } 858 | 859 | @-webkit-keyframes bounceOutLeft { 860 | 0% { 861 | -webkit-transform: translateX(0); 862 | transform: translateX(0); 863 | } 864 | 865 | 20% { 866 | opacity: 1; 867 | -webkit-transform: translateX(20px); 868 | transform: translateX(20px); 869 | } 870 | 871 | 100% { 872 | opacity: 0; 873 | -webkit-transform: translateX(-2000px); 874 | transform: translateX(-2000px); 875 | } 876 | } 877 | 878 | @keyframes bounceOutLeft { 879 | 0% { 880 | -webkit-transform: translateX(0); 881 | -ms-transform: translateX(0); 882 | transform: translateX(0); 883 | } 884 | 885 | 20% { 886 | opacity: 1; 887 | -webkit-transform: translateX(20px); 888 | -ms-transform: translateX(20px); 889 | transform: translateX(20px); 890 | } 891 | 892 | 100% { 893 | opacity: 0; 894 | -webkit-transform: translateX(-2000px); 895 | -ms-transform: translateX(-2000px); 896 | transform: translateX(-2000px); 897 | } 898 | } 899 | 900 | .bounceOutLeft { 901 | -webkit-animation-name: bounceOutLeft; 902 | animation-name: bounceOutLeft; 903 | } 904 | 905 | @-webkit-keyframes bounceOutRight { 906 | 0% { 907 | -webkit-transform: translateX(0); 908 | transform: translateX(0); 909 | } 910 | 911 | 20% { 912 | opacity: 1; 913 | -webkit-transform: translateX(-20px); 914 | transform: translateX(-20px); 915 | } 916 | 917 | 100% { 918 | opacity: 0; 919 | -webkit-transform: translateX(2000px); 920 | transform: translateX(2000px); 921 | } 922 | } 923 | 924 | @keyframes bounceOutRight { 925 | 0% { 926 | -webkit-transform: translateX(0); 927 | -ms-transform: translateX(0); 928 | transform: translateX(0); 929 | } 930 | 931 | 20% { 932 | opacity: 1; 933 | -webkit-transform: translateX(-20px); 934 | -ms-transform: translateX(-20px); 935 | transform: translateX(-20px); 936 | } 937 | 938 | 100% { 939 | opacity: 0; 940 | -webkit-transform: translateX(2000px); 941 | -ms-transform: translateX(2000px); 942 | transform: translateX(2000px); 943 | } 944 | } 945 | 946 | .bounceOutRight { 947 | -webkit-animation-name: bounceOutRight; 948 | animation-name: bounceOutRight; 949 | } 950 | 951 | @-webkit-keyframes bounceOutUp { 952 | 0% { 953 | -webkit-transform: translateY(0); 954 | transform: translateY(0); 955 | } 956 | 957 | 20% { 958 | opacity: 1; 959 | -webkit-transform: translateY(20px); 960 | transform: translateY(20px); 961 | } 962 | 963 | 100% { 964 | opacity: 0; 965 | -webkit-transform: translateY(-2000px); 966 | transform: translateY(-2000px); 967 | } 968 | } 969 | 970 | @keyframes bounceOutUp { 971 | 0% { 972 | -webkit-transform: translateY(0); 973 | -ms-transform: translateY(0); 974 | transform: translateY(0); 975 | } 976 | 977 | 20% { 978 | opacity: 1; 979 | -webkit-transform: translateY(20px); 980 | -ms-transform: translateY(20px); 981 | transform: translateY(20px); 982 | } 983 | 984 | 100% { 985 | opacity: 0; 986 | -webkit-transform: translateY(-2000px); 987 | -ms-transform: translateY(-2000px); 988 | transform: translateY(-2000px); 989 | } 990 | } 991 | 992 | .bounceOutUp { 993 | -webkit-animation-name: bounceOutUp; 994 | animation-name: bounceOutUp; 995 | } 996 | 997 | @-webkit-keyframes fadeIn { 998 | 0% { 999 | opacity: 0; 1000 | } 1001 | 1002 | 100% { 1003 | opacity: 1; 1004 | } 1005 | } 1006 | 1007 | @keyframes fadeIn { 1008 | 0% { 1009 | opacity: 0; 1010 | } 1011 | 1012 | 100% { 1013 | opacity: 1; 1014 | } 1015 | } 1016 | 1017 | .fadeIn { 1018 | -webkit-animation-name: fadeIn; 1019 | animation-name: fadeIn; 1020 | } 1021 | 1022 | @-webkit-keyframes fadeInDown { 1023 | 0% { 1024 | opacity: 0; 1025 | -webkit-transform: translateY(-20px); 1026 | transform: translateY(-20px); 1027 | } 1028 | 1029 | 100% { 1030 | opacity: 1; 1031 | -webkit-transform: translateY(0); 1032 | transform: translateY(0); 1033 | } 1034 | } 1035 | 1036 | @keyframes fadeInDown { 1037 | 0% { 1038 | opacity: 0; 1039 | -webkit-transform: translateY(-20px); 1040 | -ms-transform: translateY(-20px); 1041 | transform: translateY(-20px); 1042 | } 1043 | 1044 | 100% { 1045 | opacity: 1; 1046 | -webkit-transform: translateY(0); 1047 | -ms-transform: translateY(0); 1048 | transform: translateY(0); 1049 | } 1050 | } 1051 | 1052 | .fadeInDown { 1053 | -webkit-animation-name: fadeInDown; 1054 | animation-name: fadeInDown; 1055 | } 1056 | 1057 | @-webkit-keyframes fadeInDownBig { 1058 | 0% { 1059 | opacity: 0; 1060 | -webkit-transform: translateY(-2000px); 1061 | transform: translateY(-2000px); 1062 | } 1063 | 1064 | 100% { 1065 | opacity: 1; 1066 | -webkit-transform: translateY(0); 1067 | transform: translateY(0); 1068 | } 1069 | } 1070 | 1071 | @keyframes fadeInDownBig { 1072 | 0% { 1073 | opacity: 0; 1074 | -webkit-transform: translateY(-2000px); 1075 | -ms-transform: translateY(-2000px); 1076 | transform: translateY(-2000px); 1077 | } 1078 | 1079 | 100% { 1080 | opacity: 1; 1081 | -webkit-transform: translateY(0); 1082 | -ms-transform: translateY(0); 1083 | transform: translateY(0); 1084 | } 1085 | } 1086 | 1087 | .fadeInDownBig { 1088 | -webkit-animation-name: fadeInDownBig; 1089 | animation-name: fadeInDownBig; 1090 | } 1091 | 1092 | @-webkit-keyframes fadeInLeft { 1093 | 0% { 1094 | opacity: 0; 1095 | -webkit-transform: translateX(-20px); 1096 | transform: translateX(-20px); 1097 | } 1098 | 1099 | 100% { 1100 | opacity: 1; 1101 | -webkit-transform: translateX(0); 1102 | transform: translateX(0); 1103 | } 1104 | } 1105 | 1106 | @keyframes fadeInLeft { 1107 | 0% { 1108 | opacity: 0; 1109 | -webkit-transform: translateX(-20px); 1110 | -ms-transform: translateX(-20px); 1111 | transform: translateX(-20px); 1112 | } 1113 | 1114 | 100% { 1115 | opacity: 1; 1116 | -webkit-transform: translateX(0); 1117 | -ms-transform: translateX(0); 1118 | transform: translateX(0); 1119 | } 1120 | } 1121 | 1122 | .fadeInLeft { 1123 | -webkit-animation-name: fadeInLeft; 1124 | animation-name: fadeInLeft; 1125 | } 1126 | 1127 | @-webkit-keyframes fadeInLeftBig { 1128 | 0% { 1129 | opacity: 0; 1130 | -webkit-transform: translateX(-2000px); 1131 | transform: translateX(-2000px); 1132 | } 1133 | 1134 | 100% { 1135 | opacity: 1; 1136 | -webkit-transform: translateX(0); 1137 | transform: translateX(0); 1138 | } 1139 | } 1140 | 1141 | @keyframes fadeInLeftBig { 1142 | 0% { 1143 | opacity: 0; 1144 | -webkit-transform: translateX(-2000px); 1145 | -ms-transform: translateX(-2000px); 1146 | transform: translateX(-2000px); 1147 | } 1148 | 1149 | 100% { 1150 | opacity: 1; 1151 | -webkit-transform: translateX(0); 1152 | -ms-transform: translateX(0); 1153 | transform: translateX(0); 1154 | } 1155 | } 1156 | 1157 | .fadeInLeftBig { 1158 | -webkit-animation-name: fadeInLeftBig; 1159 | animation-name: fadeInLeftBig; 1160 | } 1161 | 1162 | @-webkit-keyframes fadeInRight { 1163 | 0% { 1164 | opacity: 0; 1165 | -webkit-transform: translateX(20px); 1166 | transform: translateX(20px); 1167 | } 1168 | 1169 | 100% { 1170 | opacity: 1; 1171 | -webkit-transform: translateX(0); 1172 | transform: translateX(0); 1173 | } 1174 | } 1175 | 1176 | @keyframes fadeInRight { 1177 | 0% { 1178 | opacity: 0; 1179 | -webkit-transform: translateX(20px); 1180 | -ms-transform: translateX(20px); 1181 | transform: translateX(20px); 1182 | } 1183 | 1184 | 100% { 1185 | opacity: 1; 1186 | -webkit-transform: translateX(0); 1187 | -ms-transform: translateX(0); 1188 | transform: translateX(0); 1189 | } 1190 | } 1191 | 1192 | .fadeInRight { 1193 | -webkit-animation-name: fadeInRight; 1194 | animation-name: fadeInRight; 1195 | } 1196 | 1197 | @-webkit-keyframes fadeInRightBig { 1198 | 0% { 1199 | opacity: 0; 1200 | -webkit-transform: translateX(2000px); 1201 | transform: translateX(2000px); 1202 | } 1203 | 1204 | 100% { 1205 | opacity: 1; 1206 | -webkit-transform: translateX(0); 1207 | transform: translateX(0); 1208 | } 1209 | } 1210 | 1211 | @keyframes fadeInRightBig { 1212 | 0% { 1213 | opacity: 0; 1214 | -webkit-transform: translateX(2000px); 1215 | -ms-transform: translateX(2000px); 1216 | transform: translateX(2000px); 1217 | } 1218 | 1219 | 100% { 1220 | opacity: 1; 1221 | -webkit-transform: translateX(0); 1222 | -ms-transform: translateX(0); 1223 | transform: translateX(0); 1224 | } 1225 | } 1226 | 1227 | .fadeInRightBig { 1228 | -webkit-animation-name: fadeInRightBig; 1229 | animation-name: fadeInRightBig; 1230 | } 1231 | 1232 | @-webkit-keyframes fadeInUp { 1233 | 0% { 1234 | opacity: 0; 1235 | -webkit-transform: translateY(20px); 1236 | transform: translateY(20px); 1237 | } 1238 | 1239 | 100% { 1240 | opacity: 1; 1241 | -webkit-transform: translateY(0); 1242 | transform: translateY(0); 1243 | } 1244 | } 1245 | 1246 | @keyframes fadeInUp { 1247 | 0% { 1248 | opacity: 0; 1249 | -webkit-transform: translateY(20px); 1250 | -ms-transform: translateY(20px); 1251 | transform: translateY(20px); 1252 | } 1253 | 1254 | 100% { 1255 | opacity: 1; 1256 | -webkit-transform: translateY(0); 1257 | -ms-transform: translateY(0); 1258 | transform: translateY(0); 1259 | } 1260 | } 1261 | 1262 | .fadeInUp { 1263 | -webkit-animation-name: fadeInUp; 1264 | animation-name: fadeInUp; 1265 | } 1266 | 1267 | @-webkit-keyframes fadeInUpBig { 1268 | 0% { 1269 | opacity: 0; 1270 | -webkit-transform: translateY(2000px); 1271 | transform: translateY(2000px); 1272 | } 1273 | 1274 | 100% { 1275 | opacity: 1; 1276 | -webkit-transform: translateY(0); 1277 | transform: translateY(0); 1278 | } 1279 | } 1280 | 1281 | @keyframes fadeInUpBig { 1282 | 0% { 1283 | opacity: 0; 1284 | -webkit-transform: translateY(2000px); 1285 | -ms-transform: translateY(2000px); 1286 | transform: translateY(2000px); 1287 | } 1288 | 1289 | 100% { 1290 | opacity: 1; 1291 | -webkit-transform: translateY(0); 1292 | -ms-transform: translateY(0); 1293 | transform: translateY(0); 1294 | } 1295 | } 1296 | 1297 | .fadeInUpBig { 1298 | -webkit-animation-name: fadeInUpBig; 1299 | animation-name: fadeInUpBig; 1300 | } 1301 | 1302 | @-webkit-keyframes fadeOut { 1303 | 0% { 1304 | opacity: 1; 1305 | } 1306 | 1307 | 100% { 1308 | opacity: 0; 1309 | } 1310 | } 1311 | 1312 | @keyframes fadeOut { 1313 | 0% { 1314 | opacity: 1; 1315 | } 1316 | 1317 | 100% { 1318 | opacity: 0; 1319 | } 1320 | } 1321 | 1322 | .fadeOut { 1323 | -webkit-animation-name: fadeOut; 1324 | animation-name: fadeOut; 1325 | } 1326 | 1327 | @-webkit-keyframes fadeOutDown { 1328 | 0% { 1329 | opacity: 1; 1330 | -webkit-transform: translateY(0); 1331 | transform: translateY(0); 1332 | } 1333 | 1334 | 100% { 1335 | opacity: 0; 1336 | -webkit-transform: translateY(20px); 1337 | transform: translateY(20px); 1338 | } 1339 | } 1340 | 1341 | @keyframes fadeOutDown { 1342 | 0% { 1343 | opacity: 1; 1344 | -webkit-transform: translateY(0); 1345 | -ms-transform: translateY(0); 1346 | transform: translateY(0); 1347 | } 1348 | 1349 | 100% { 1350 | opacity: 0; 1351 | -webkit-transform: translateY(20px); 1352 | -ms-transform: translateY(20px); 1353 | transform: translateY(20px); 1354 | } 1355 | } 1356 | 1357 | .fadeOutDown { 1358 | -webkit-animation-name: fadeOutDown; 1359 | animation-name: fadeOutDown; 1360 | } 1361 | 1362 | @-webkit-keyframes fadeOutDownBig { 1363 | 0% { 1364 | opacity: 1; 1365 | -webkit-transform: translateY(0); 1366 | transform: translateY(0); 1367 | } 1368 | 1369 | 100% { 1370 | opacity: 0; 1371 | -webkit-transform: translateY(2000px); 1372 | transform: translateY(2000px); 1373 | } 1374 | } 1375 | 1376 | @keyframes fadeOutDownBig { 1377 | 0% { 1378 | opacity: 1; 1379 | -webkit-transform: translateY(0); 1380 | -ms-transform: translateY(0); 1381 | transform: translateY(0); 1382 | } 1383 | 1384 | 100% { 1385 | opacity: 0; 1386 | -webkit-transform: translateY(2000px); 1387 | -ms-transform: translateY(2000px); 1388 | transform: translateY(2000px); 1389 | } 1390 | } 1391 | 1392 | .fadeOutDownBig { 1393 | -webkit-animation-name: fadeOutDownBig; 1394 | animation-name: fadeOutDownBig; 1395 | } 1396 | 1397 | @-webkit-keyframes fadeOutLeft { 1398 | 0% { 1399 | opacity: 1; 1400 | -webkit-transform: translateX(0); 1401 | transform: translateX(0); 1402 | } 1403 | 1404 | 100% { 1405 | opacity: 0; 1406 | -webkit-transform: translateX(-20px); 1407 | transform: translateX(-20px); 1408 | } 1409 | } 1410 | 1411 | @keyframes fadeOutLeft { 1412 | 0% { 1413 | opacity: 1; 1414 | -webkit-transform: translateX(0); 1415 | -ms-transform: translateX(0); 1416 | transform: translateX(0); 1417 | } 1418 | 1419 | 100% { 1420 | opacity: 0; 1421 | -webkit-transform: translateX(-20px); 1422 | -ms-transform: translateX(-20px); 1423 | transform: translateX(-20px); 1424 | } 1425 | } 1426 | 1427 | .fadeOutLeft { 1428 | -webkit-animation-name: fadeOutLeft; 1429 | animation-name: fadeOutLeft; 1430 | } 1431 | 1432 | @-webkit-keyframes fadeOutLeftBig { 1433 | 0% { 1434 | opacity: 1; 1435 | -webkit-transform: translateX(0); 1436 | transform: translateX(0); 1437 | } 1438 | 1439 | 100% { 1440 | opacity: 0; 1441 | -webkit-transform: translateX(-2000px); 1442 | transform: translateX(-2000px); 1443 | } 1444 | } 1445 | 1446 | @keyframes fadeOutLeftBig { 1447 | 0% { 1448 | opacity: 1; 1449 | -webkit-transform: translateX(0); 1450 | -ms-transform: translateX(0); 1451 | transform: translateX(0); 1452 | } 1453 | 1454 | 100% { 1455 | opacity: 0; 1456 | -webkit-transform: translateX(-2000px); 1457 | -ms-transform: translateX(-2000px); 1458 | transform: translateX(-2000px); 1459 | } 1460 | } 1461 | 1462 | .fadeOutLeftBig { 1463 | -webkit-animation-name: fadeOutLeftBig; 1464 | animation-name: fadeOutLeftBig; 1465 | } 1466 | 1467 | @-webkit-keyframes fadeOutRight { 1468 | 0% { 1469 | opacity: 1; 1470 | -webkit-transform: translateX(0); 1471 | transform: translateX(0); 1472 | } 1473 | 1474 | 100% { 1475 | opacity: 0; 1476 | -webkit-transform: translateX(20px); 1477 | transform: translateX(20px); 1478 | } 1479 | } 1480 | 1481 | @keyframes fadeOutRight { 1482 | 0% { 1483 | opacity: 1; 1484 | -webkit-transform: translateX(0); 1485 | -ms-transform: translateX(0); 1486 | transform: translateX(0); 1487 | } 1488 | 1489 | 100% { 1490 | opacity: 0; 1491 | -webkit-transform: translateX(20px); 1492 | -ms-transform: translateX(20px); 1493 | transform: translateX(20px); 1494 | } 1495 | } 1496 | 1497 | .fadeOutRight { 1498 | -webkit-animation-name: fadeOutRight; 1499 | animation-name: fadeOutRight; 1500 | } 1501 | 1502 | @-webkit-keyframes fadeOutRightBig { 1503 | 0% { 1504 | opacity: 1; 1505 | -webkit-transform: translateX(0); 1506 | transform: translateX(0); 1507 | } 1508 | 1509 | 100% { 1510 | opacity: 0; 1511 | -webkit-transform: translateX(2000px); 1512 | transform: translateX(2000px); 1513 | } 1514 | } 1515 | 1516 | @keyframes fadeOutRightBig { 1517 | 0% { 1518 | opacity: 1; 1519 | -webkit-transform: translateX(0); 1520 | -ms-transform: translateX(0); 1521 | transform: translateX(0); 1522 | } 1523 | 1524 | 100% { 1525 | opacity: 0; 1526 | -webkit-transform: translateX(2000px); 1527 | -ms-transform: translateX(2000px); 1528 | transform: translateX(2000px); 1529 | } 1530 | } 1531 | 1532 | .fadeOutRightBig { 1533 | -webkit-animation-name: fadeOutRightBig; 1534 | animation-name: fadeOutRightBig; 1535 | } 1536 | 1537 | @-webkit-keyframes fadeOutUp { 1538 | 0% { 1539 | opacity: 1; 1540 | -webkit-transform: translateY(0); 1541 | transform: translateY(0); 1542 | } 1543 | 1544 | 100% { 1545 | opacity: 0; 1546 | -webkit-transform: translateY(-20px); 1547 | transform: translateY(-20px); 1548 | } 1549 | } 1550 | 1551 | @keyframes fadeOutUp { 1552 | 0% { 1553 | opacity: 1; 1554 | -webkit-transform: translateY(0); 1555 | -ms-transform: translateY(0); 1556 | transform: translateY(0); 1557 | } 1558 | 1559 | 100% { 1560 | opacity: 0; 1561 | -webkit-transform: translateY(-20px); 1562 | -ms-transform: translateY(-20px); 1563 | transform: translateY(-20px); 1564 | } 1565 | } 1566 | 1567 | .fadeOutUp { 1568 | -webkit-animation-name: fadeOutUp; 1569 | animation-name: fadeOutUp; 1570 | } 1571 | 1572 | @-webkit-keyframes fadeOutUpBig { 1573 | 0% { 1574 | opacity: 1; 1575 | -webkit-transform: translateY(0); 1576 | transform: translateY(0); 1577 | } 1578 | 1579 | 100% { 1580 | opacity: 0; 1581 | -webkit-transform: translateY(-2000px); 1582 | transform: translateY(-2000px); 1583 | } 1584 | } 1585 | 1586 | @keyframes fadeOutUpBig { 1587 | 0% { 1588 | opacity: 1; 1589 | -webkit-transform: translateY(0); 1590 | -ms-transform: translateY(0); 1591 | transform: translateY(0); 1592 | } 1593 | 1594 | 100% { 1595 | opacity: 0; 1596 | -webkit-transform: translateY(-2000px); 1597 | -ms-transform: translateY(-2000px); 1598 | transform: translateY(-2000px); 1599 | } 1600 | } 1601 | 1602 | .fadeOutUpBig { 1603 | -webkit-animation-name: fadeOutUpBig; 1604 | animation-name: fadeOutUpBig; 1605 | } 1606 | 1607 | @-webkit-keyframes flip { 1608 | 0% { 1609 | -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 1610 | transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 1611 | -webkit-animation-timing-function: ease-out; 1612 | animation-timing-function: ease-out; 1613 | } 1614 | 1615 | 40% { 1616 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 1617 | transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 1618 | -webkit-animation-timing-function: ease-out; 1619 | animation-timing-function: ease-out; 1620 | } 1621 | 1622 | 50% { 1623 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 1624 | transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 1625 | -webkit-animation-timing-function: ease-in; 1626 | animation-timing-function: ease-in; 1627 | } 1628 | 1629 | 80% { 1630 | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 1631 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 1632 | -webkit-animation-timing-function: ease-in; 1633 | animation-timing-function: ease-in; 1634 | } 1635 | 1636 | 100% { 1637 | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 1638 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 1639 | -webkit-animation-timing-function: ease-in; 1640 | animation-timing-function: ease-in; 1641 | } 1642 | } 1643 | 1644 | @keyframes flip { 1645 | 0% { 1646 | -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 1647 | -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 1648 | transform: perspective(400px) translateZ(0) rotateY(0) scale(1); 1649 | -webkit-animation-timing-function: ease-out; 1650 | animation-timing-function: ease-out; 1651 | } 1652 | 1653 | 40% { 1654 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 1655 | -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 1656 | transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); 1657 | -webkit-animation-timing-function: ease-out; 1658 | animation-timing-function: ease-out; 1659 | } 1660 | 1661 | 50% { 1662 | -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 1663 | -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 1664 | transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); 1665 | -webkit-animation-timing-function: ease-in; 1666 | animation-timing-function: ease-in; 1667 | } 1668 | 1669 | 80% { 1670 | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 1671 | -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 1672 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); 1673 | -webkit-animation-timing-function: ease-in; 1674 | animation-timing-function: ease-in; 1675 | } 1676 | 1677 | 100% { 1678 | -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 1679 | -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 1680 | transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); 1681 | -webkit-animation-timing-function: ease-in; 1682 | animation-timing-function: ease-in; 1683 | } 1684 | } 1685 | 1686 | .animated.flip { 1687 | -webkit-backface-visibility: visible; 1688 | -ms-backface-visibility: visible; 1689 | backface-visibility: visible; 1690 | -webkit-animation-name: flip; 1691 | animation-name: flip; 1692 | } 1693 | 1694 | @-webkit-keyframes flipInX { 1695 | 0% { 1696 | -webkit-transform: perspective(400px) rotateX(90deg); 1697 | transform: perspective(400px) rotateX(90deg); 1698 | opacity: 0; 1699 | } 1700 | 1701 | 40% { 1702 | -webkit-transform: perspective(400px) rotateX(-10deg); 1703 | transform: perspective(400px) rotateX(-10deg); 1704 | } 1705 | 1706 | 70% { 1707 | -webkit-transform: perspective(400px) rotateX(10deg); 1708 | transform: perspective(400px) rotateX(10deg); 1709 | } 1710 | 1711 | 100% { 1712 | -webkit-transform: perspective(400px) rotateX(0deg); 1713 | transform: perspective(400px) rotateX(0deg); 1714 | opacity: 1; 1715 | } 1716 | } 1717 | 1718 | @keyframes flipInX { 1719 | 0% { 1720 | -webkit-transform: perspective(400px) rotateX(90deg); 1721 | -ms-transform: perspective(400px) rotateX(90deg); 1722 | transform: perspective(400px) rotateX(90deg); 1723 | opacity: 0; 1724 | } 1725 | 1726 | 40% { 1727 | -webkit-transform: perspective(400px) rotateX(-10deg); 1728 | -ms-transform: perspective(400px) rotateX(-10deg); 1729 | transform: perspective(400px) rotateX(-10deg); 1730 | } 1731 | 1732 | 70% { 1733 | -webkit-transform: perspective(400px) rotateX(10deg); 1734 | -ms-transform: perspective(400px) rotateX(10deg); 1735 | transform: perspective(400px) rotateX(10deg); 1736 | } 1737 | 1738 | 100% { 1739 | -webkit-transform: perspective(400px) rotateX(0deg); 1740 | -ms-transform: perspective(400px) rotateX(0deg); 1741 | transform: perspective(400px) rotateX(0deg); 1742 | opacity: 1; 1743 | } 1744 | } 1745 | 1746 | .flipInX { 1747 | -webkit-backface-visibility: visible !important; 1748 | -ms-backface-visibility: visible !important; 1749 | backface-visibility: visible !important; 1750 | -webkit-animation-name: flipInX; 1751 | animation-name: flipInX; 1752 | } 1753 | 1754 | @-webkit-keyframes flipInY { 1755 | 0% { 1756 | -webkit-transform: perspective(400px) rotateY(90deg); 1757 | transform: perspective(400px) rotateY(90deg); 1758 | opacity: 0; 1759 | } 1760 | 1761 | 40% { 1762 | -webkit-transform: perspective(400px) rotateY(-10deg); 1763 | transform: perspective(400px) rotateY(-10deg); 1764 | } 1765 | 1766 | 70% { 1767 | -webkit-transform: perspective(400px) rotateY(10deg); 1768 | transform: perspective(400px) rotateY(10deg); 1769 | } 1770 | 1771 | 100% { 1772 | -webkit-transform: perspective(400px) rotateY(0deg); 1773 | transform: perspective(400px) rotateY(0deg); 1774 | opacity: 1; 1775 | } 1776 | } 1777 | 1778 | @keyframes flipInY { 1779 | 0% { 1780 | -webkit-transform: perspective(400px) rotateY(90deg); 1781 | -ms-transform: perspective(400px) rotateY(90deg); 1782 | transform: perspective(400px) rotateY(90deg); 1783 | opacity: 0; 1784 | } 1785 | 1786 | 40% { 1787 | -webkit-transform: perspective(400px) rotateY(-10deg); 1788 | -ms-transform: perspective(400px) rotateY(-10deg); 1789 | transform: perspective(400px) rotateY(-10deg); 1790 | } 1791 | 1792 | 70% { 1793 | -webkit-transform: perspective(400px) rotateY(10deg); 1794 | -ms-transform: perspective(400px) rotateY(10deg); 1795 | transform: perspective(400px) rotateY(10deg); 1796 | } 1797 | 1798 | 100% { 1799 | -webkit-transform: perspective(400px) rotateY(0deg); 1800 | -ms-transform: perspective(400px) rotateY(0deg); 1801 | transform: perspective(400px) rotateY(0deg); 1802 | opacity: 1; 1803 | } 1804 | } 1805 | 1806 | .flipInY { 1807 | -webkit-backface-visibility: visible !important; 1808 | -ms-backface-visibility: visible !important; 1809 | backface-visibility: visible !important; 1810 | -webkit-animation-name: flipInY; 1811 | animation-name: flipInY; 1812 | } 1813 | 1814 | @-webkit-keyframes flipOutX { 1815 | 0% { 1816 | -webkit-transform: perspective(400px) rotateX(0deg); 1817 | transform: perspective(400px) rotateX(0deg); 1818 | opacity: 1; 1819 | } 1820 | 1821 | 100% { 1822 | -webkit-transform: perspective(400px) rotateX(90deg); 1823 | transform: perspective(400px) rotateX(90deg); 1824 | opacity: 0; 1825 | } 1826 | } 1827 | 1828 | @keyframes flipOutX { 1829 | 0% { 1830 | -webkit-transform: perspective(400px) rotateX(0deg); 1831 | -ms-transform: perspective(400px) rotateX(0deg); 1832 | transform: perspective(400px) rotateX(0deg); 1833 | opacity: 1; 1834 | } 1835 | 1836 | 100% { 1837 | -webkit-transform: perspective(400px) rotateX(90deg); 1838 | -ms-transform: perspective(400px) rotateX(90deg); 1839 | transform: perspective(400px) rotateX(90deg); 1840 | opacity: 0; 1841 | } 1842 | } 1843 | 1844 | .flipOutX { 1845 | -webkit-animation-name: flipOutX; 1846 | animation-name: flipOutX; 1847 | -webkit-backface-visibility: visible !important; 1848 | -ms-backface-visibility: visible !important; 1849 | backface-visibility: visible !important; 1850 | } 1851 | 1852 | @-webkit-keyframes flipOutY { 1853 | 0% { 1854 | -webkit-transform: perspective(400px) rotateY(0deg); 1855 | transform: perspective(400px) rotateY(0deg); 1856 | opacity: 1; 1857 | } 1858 | 1859 | 100% { 1860 | -webkit-transform: perspective(400px) rotateY(90deg); 1861 | transform: perspective(400px) rotateY(90deg); 1862 | opacity: 0; 1863 | } 1864 | } 1865 | 1866 | @keyframes flipOutY { 1867 | 0% { 1868 | -webkit-transform: perspective(400px) rotateY(0deg); 1869 | -ms-transform: perspective(400px) rotateY(0deg); 1870 | transform: perspective(400px) rotateY(0deg); 1871 | opacity: 1; 1872 | } 1873 | 1874 | 100% { 1875 | -webkit-transform: perspective(400px) rotateY(90deg); 1876 | -ms-transform: perspective(400px) rotateY(90deg); 1877 | transform: perspective(400px) rotateY(90deg); 1878 | opacity: 0; 1879 | } 1880 | } 1881 | 1882 | .flipOutY { 1883 | -webkit-backface-visibility: visible !important; 1884 | -ms-backface-visibility: visible !important; 1885 | backface-visibility: visible !important; 1886 | -webkit-animation-name: flipOutY; 1887 | animation-name: flipOutY; 1888 | } 1889 | 1890 | @-webkit-keyframes lightSpeedIn { 1891 | 0% { 1892 | -webkit-transform: translateX(100%) skewX(-30deg); 1893 | transform: translateX(100%) skewX(-30deg); 1894 | opacity: 0; 1895 | } 1896 | 1897 | 60% { 1898 | -webkit-transform: translateX(-20%) skewX(30deg); 1899 | transform: translateX(-20%) skewX(30deg); 1900 | opacity: 1; 1901 | } 1902 | 1903 | 80% { 1904 | -webkit-transform: translateX(0%) skewX(-15deg); 1905 | transform: translateX(0%) skewX(-15deg); 1906 | opacity: 1; 1907 | } 1908 | 1909 | 100% { 1910 | -webkit-transform: translateX(0%) skewX(0deg); 1911 | transform: translateX(0%) skewX(0deg); 1912 | opacity: 1; 1913 | } 1914 | } 1915 | 1916 | @keyframes lightSpeedIn { 1917 | 0% { 1918 | -webkit-transform: translateX(100%) skewX(-30deg); 1919 | -ms-transform: translateX(100%) skewX(-30deg); 1920 | transform: translateX(100%) skewX(-30deg); 1921 | opacity: 0; 1922 | } 1923 | 1924 | 60% { 1925 | -webkit-transform: translateX(-20%) skewX(30deg); 1926 | -ms-transform: translateX(-20%) skewX(30deg); 1927 | transform: translateX(-20%) skewX(30deg); 1928 | opacity: 1; 1929 | } 1930 | 1931 | 80% { 1932 | -webkit-transform: translateX(0%) skewX(-15deg); 1933 | -ms-transform: translateX(0%) skewX(-15deg); 1934 | transform: translateX(0%) skewX(-15deg); 1935 | opacity: 1; 1936 | } 1937 | 1938 | 100% { 1939 | -webkit-transform: translateX(0%) skewX(0deg); 1940 | -ms-transform: translateX(0%) skewX(0deg); 1941 | transform: translateX(0%) skewX(0deg); 1942 | opacity: 1; 1943 | } 1944 | } 1945 | 1946 | .lightSpeedIn { 1947 | -webkit-animation-name: lightSpeedIn; 1948 | animation-name: lightSpeedIn; 1949 | -webkit-animation-timing-function: ease-out; 1950 | animation-timing-function: ease-out; 1951 | } 1952 | 1953 | @-webkit-keyframes lightSpeedOut { 1954 | 0% { 1955 | -webkit-transform: translateX(0%) skewX(0deg); 1956 | transform: translateX(0%) skewX(0deg); 1957 | opacity: 1; 1958 | } 1959 | 1960 | 100% { 1961 | -webkit-transform: translateX(100%) skewX(-30deg); 1962 | transform: translateX(100%) skewX(-30deg); 1963 | opacity: 0; 1964 | } 1965 | } 1966 | 1967 | @keyframes lightSpeedOut { 1968 | 0% { 1969 | -webkit-transform: translateX(0%) skewX(0deg); 1970 | -ms-transform: translateX(0%) skewX(0deg); 1971 | transform: translateX(0%) skewX(0deg); 1972 | opacity: 1; 1973 | } 1974 | 1975 | 100% { 1976 | -webkit-transform: translateX(100%) skewX(-30deg); 1977 | -ms-transform: translateX(100%) skewX(-30deg); 1978 | transform: translateX(100%) skewX(-30deg); 1979 | opacity: 0; 1980 | } 1981 | } 1982 | 1983 | .lightSpeedOut { 1984 | -webkit-animation-name: lightSpeedOut; 1985 | animation-name: lightSpeedOut; 1986 | -webkit-animation-timing-function: ease-in; 1987 | animation-timing-function: ease-in; 1988 | } 1989 | 1990 | @-webkit-keyframes rotateIn { 1991 | 0% { 1992 | -webkit-transform-origin: center center; 1993 | transform-origin: center center; 1994 | -webkit-transform: rotate(-200deg); 1995 | transform: rotate(-200deg); 1996 | opacity: 0; 1997 | } 1998 | 1999 | 100% { 2000 | -webkit-transform-origin: center center; 2001 | transform-origin: center center; 2002 | -webkit-transform: rotate(0); 2003 | transform: rotate(0); 2004 | opacity: 1; 2005 | } 2006 | } 2007 | 2008 | @keyframes rotateIn { 2009 | 0% { 2010 | -webkit-transform-origin: center center; 2011 | -ms-transform-origin: center center; 2012 | transform-origin: center center; 2013 | -webkit-transform: rotate(-200deg); 2014 | -ms-transform: rotate(-200deg); 2015 | transform: rotate(-200deg); 2016 | opacity: 0; 2017 | } 2018 | 2019 | 100% { 2020 | -webkit-transform-origin: center center; 2021 | -ms-transform-origin: center center; 2022 | transform-origin: center center; 2023 | -webkit-transform: rotate(0); 2024 | -ms-transform: rotate(0); 2025 | transform: rotate(0); 2026 | opacity: 1; 2027 | } 2028 | } 2029 | 2030 | .rotateIn { 2031 | -webkit-animation-name: rotateIn; 2032 | animation-name: rotateIn; 2033 | } 2034 | 2035 | @-webkit-keyframes rotateInDownLeft { 2036 | 0% { 2037 | -webkit-transform-origin: left bottom; 2038 | transform-origin: left bottom; 2039 | -webkit-transform: rotate(-90deg); 2040 | transform: rotate(-90deg); 2041 | opacity: 0; 2042 | } 2043 | 2044 | 100% { 2045 | -webkit-transform-origin: left bottom; 2046 | transform-origin: left bottom; 2047 | -webkit-transform: rotate(0); 2048 | transform: rotate(0); 2049 | opacity: 1; 2050 | } 2051 | } 2052 | 2053 | @keyframes rotateInDownLeft { 2054 | 0% { 2055 | -webkit-transform-origin: left bottom; 2056 | -ms-transform-origin: left bottom; 2057 | transform-origin: left bottom; 2058 | -webkit-transform: rotate(-90deg); 2059 | -ms-transform: rotate(-90deg); 2060 | transform: rotate(-90deg); 2061 | opacity: 0; 2062 | } 2063 | 2064 | 100% { 2065 | -webkit-transform-origin: left bottom; 2066 | -ms-transform-origin: left bottom; 2067 | transform-origin: left bottom; 2068 | -webkit-transform: rotate(0); 2069 | -ms-transform: rotate(0); 2070 | transform: rotate(0); 2071 | opacity: 1; 2072 | } 2073 | } 2074 | 2075 | .rotateInDownLeft { 2076 | -webkit-animation-name: rotateInDownLeft; 2077 | animation-name: rotateInDownLeft; 2078 | } 2079 | 2080 | @-webkit-keyframes rotateInDownRight { 2081 | 0% { 2082 | -webkit-transform-origin: right bottom; 2083 | transform-origin: right bottom; 2084 | -webkit-transform: rotate(90deg); 2085 | transform: rotate(90deg); 2086 | opacity: 0; 2087 | } 2088 | 2089 | 100% { 2090 | -webkit-transform-origin: right bottom; 2091 | transform-origin: right bottom; 2092 | -webkit-transform: rotate(0); 2093 | transform: rotate(0); 2094 | opacity: 1; 2095 | } 2096 | } 2097 | 2098 | @keyframes rotateInDownRight { 2099 | 0% { 2100 | -webkit-transform-origin: right bottom; 2101 | -ms-transform-origin: right bottom; 2102 | transform-origin: right bottom; 2103 | -webkit-transform: rotate(90deg); 2104 | -ms-transform: rotate(90deg); 2105 | transform: rotate(90deg); 2106 | opacity: 0; 2107 | } 2108 | 2109 | 100% { 2110 | -webkit-transform-origin: right bottom; 2111 | -ms-transform-origin: right bottom; 2112 | transform-origin: right bottom; 2113 | -webkit-transform: rotate(0); 2114 | -ms-transform: rotate(0); 2115 | transform: rotate(0); 2116 | opacity: 1; 2117 | } 2118 | } 2119 | 2120 | .rotateInDownRight { 2121 | -webkit-animation-name: rotateInDownRight; 2122 | animation-name: rotateInDownRight; 2123 | } 2124 | 2125 | @-webkit-keyframes rotateInUpLeft { 2126 | 0% { 2127 | -webkit-transform-origin: left bottom; 2128 | transform-origin: left bottom; 2129 | -webkit-transform: rotate(90deg); 2130 | transform: rotate(90deg); 2131 | opacity: 0; 2132 | } 2133 | 2134 | 100% { 2135 | -webkit-transform-origin: left bottom; 2136 | transform-origin: left bottom; 2137 | -webkit-transform: rotate(0); 2138 | transform: rotate(0); 2139 | opacity: 1; 2140 | } 2141 | } 2142 | 2143 | @keyframes rotateInUpLeft { 2144 | 0% { 2145 | -webkit-transform-origin: left bottom; 2146 | -ms-transform-origin: left bottom; 2147 | transform-origin: left bottom; 2148 | -webkit-transform: rotate(90deg); 2149 | -ms-transform: rotate(90deg); 2150 | transform: rotate(90deg); 2151 | opacity: 0; 2152 | } 2153 | 2154 | 100% { 2155 | -webkit-transform-origin: left bottom; 2156 | -ms-transform-origin: left bottom; 2157 | transform-origin: left bottom; 2158 | -webkit-transform: rotate(0); 2159 | -ms-transform: rotate(0); 2160 | transform: rotate(0); 2161 | opacity: 1; 2162 | } 2163 | } 2164 | 2165 | .rotateInUpLeft { 2166 | -webkit-animation-name: rotateInUpLeft; 2167 | animation-name: rotateInUpLeft; 2168 | } 2169 | 2170 | @-webkit-keyframes rotateInUpRight { 2171 | 0% { 2172 | -webkit-transform-origin: right bottom; 2173 | transform-origin: right bottom; 2174 | -webkit-transform: rotate(-90deg); 2175 | transform: rotate(-90deg); 2176 | opacity: 0; 2177 | } 2178 | 2179 | 100% { 2180 | -webkit-transform-origin: right bottom; 2181 | transform-origin: right bottom; 2182 | -webkit-transform: rotate(0); 2183 | transform: rotate(0); 2184 | opacity: 1; 2185 | } 2186 | } 2187 | 2188 | @keyframes rotateInUpRight { 2189 | 0% { 2190 | -webkit-transform-origin: right bottom; 2191 | -ms-transform-origin: right bottom; 2192 | transform-origin: right bottom; 2193 | -webkit-transform: rotate(-90deg); 2194 | -ms-transform: rotate(-90deg); 2195 | transform: rotate(-90deg); 2196 | opacity: 0; 2197 | } 2198 | 2199 | 100% { 2200 | -webkit-transform-origin: right bottom; 2201 | -ms-transform-origin: right bottom; 2202 | transform-origin: right bottom; 2203 | -webkit-transform: rotate(0); 2204 | -ms-transform: rotate(0); 2205 | transform: rotate(0); 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 center; 2218 | transform-origin: center center; 2219 | -webkit-transform: rotate(0); 2220 | transform: rotate(0); 2221 | opacity: 1; 2222 | } 2223 | 2224 | 100% { 2225 | -webkit-transform-origin: center center; 2226 | transform-origin: center center; 2227 | -webkit-transform: rotate(200deg); 2228 | transform: rotate(200deg); 2229 | opacity: 0; 2230 | } 2231 | } 2232 | 2233 | @keyframes rotateOut { 2234 | 0% { 2235 | -webkit-transform-origin: center center; 2236 | -ms-transform-origin: center center; 2237 | transform-origin: center center; 2238 | -webkit-transform: rotate(0); 2239 | -ms-transform: rotate(0); 2240 | transform: rotate(0); 2241 | opacity: 1; 2242 | } 2243 | 2244 | 100% { 2245 | -webkit-transform-origin: center center; 2246 | -ms-transform-origin: center center; 2247 | transform-origin: center center; 2248 | -webkit-transform: rotate(200deg); 2249 | -ms-transform: rotate(200deg); 2250 | transform: rotate(200deg); 2251 | opacity: 0; 2252 | } 2253 | } 2254 | 2255 | .rotateOut { 2256 | -webkit-animation-name: rotateOut; 2257 | animation-name: rotateOut; 2258 | } 2259 | 2260 | @-webkit-keyframes rotateOutDownLeft { 2261 | 0% { 2262 | -webkit-transform-origin: left bottom; 2263 | transform-origin: left bottom; 2264 | -webkit-transform: rotate(0); 2265 | transform: rotate(0); 2266 | opacity: 1; 2267 | } 2268 | 2269 | 100% { 2270 | -webkit-transform-origin: left bottom; 2271 | transform-origin: left bottom; 2272 | -webkit-transform: rotate(90deg); 2273 | transform: rotate(90deg); 2274 | opacity: 0; 2275 | } 2276 | } 2277 | 2278 | @keyframes rotateOutDownLeft { 2279 | 0% { 2280 | -webkit-transform-origin: left bottom; 2281 | -ms-transform-origin: left bottom; 2282 | transform-origin: left bottom; 2283 | -webkit-transform: rotate(0); 2284 | -ms-transform: rotate(0); 2285 | transform: rotate(0); 2286 | opacity: 1; 2287 | } 2288 | 2289 | 100% { 2290 | -webkit-transform-origin: left bottom; 2291 | -ms-transform-origin: left bottom; 2292 | transform-origin: left bottom; 2293 | -webkit-transform: rotate(90deg); 2294 | -ms-transform: rotate(90deg); 2295 | transform: rotate(90deg); 2296 | opacity: 0; 2297 | } 2298 | } 2299 | 2300 | .rotateOutDownLeft { 2301 | -webkit-animation-name: rotateOutDownLeft; 2302 | animation-name: rotateOutDownLeft; 2303 | } 2304 | 2305 | @-webkit-keyframes rotateOutDownRight { 2306 | 0% { 2307 | -webkit-transform-origin: right bottom; 2308 | transform-origin: right bottom; 2309 | -webkit-transform: rotate(0); 2310 | transform: rotate(0); 2311 | opacity: 1; 2312 | } 2313 | 2314 | 100% { 2315 | -webkit-transform-origin: right bottom; 2316 | transform-origin: right bottom; 2317 | -webkit-transform: rotate(-90deg); 2318 | transform: rotate(-90deg); 2319 | opacity: 0; 2320 | } 2321 | } 2322 | 2323 | @keyframes rotateOutDownRight { 2324 | 0% { 2325 | -webkit-transform-origin: right bottom; 2326 | -ms-transform-origin: right bottom; 2327 | transform-origin: right bottom; 2328 | -webkit-transform: rotate(0); 2329 | -ms-transform: rotate(0); 2330 | transform: rotate(0); 2331 | opacity: 1; 2332 | } 2333 | 2334 | 100% { 2335 | -webkit-transform-origin: right bottom; 2336 | -ms-transform-origin: right bottom; 2337 | transform-origin: right bottom; 2338 | -webkit-transform: rotate(-90deg); 2339 | -ms-transform: rotate(-90deg); 2340 | transform: rotate(-90deg); 2341 | opacity: 0; 2342 | } 2343 | } 2344 | 2345 | .rotateOutDownRight { 2346 | -webkit-animation-name: rotateOutDownRight; 2347 | animation-name: rotateOutDownRight; 2348 | } 2349 | 2350 | @-webkit-keyframes rotateOutUpLeft { 2351 | 0% { 2352 | -webkit-transform-origin: left bottom; 2353 | transform-origin: left bottom; 2354 | -webkit-transform: rotate(0); 2355 | transform: rotate(0); 2356 | opacity: 1; 2357 | } 2358 | 2359 | 100% { 2360 | -webkit-transform-origin: left bottom; 2361 | transform-origin: left bottom; 2362 | -webkit-transform: rotate(-90deg); 2363 | transform: rotate(-90deg); 2364 | opacity: 0; 2365 | } 2366 | } 2367 | 2368 | @keyframes rotateOutUpLeft { 2369 | 0% { 2370 | -webkit-transform-origin: left bottom; 2371 | -ms-transform-origin: left bottom; 2372 | transform-origin: left bottom; 2373 | -webkit-transform: rotate(0); 2374 | -ms-transform: rotate(0); 2375 | transform: rotate(0); 2376 | opacity: 1; 2377 | } 2378 | 2379 | 100% { 2380 | -webkit-transform-origin: left bottom; 2381 | -ms-transform-origin: left bottom; 2382 | transform-origin: left bottom; 2383 | -webkit-transform: rotate(-90deg); 2384 | -ms-transform: rotate(-90deg); 2385 | transform: rotate(-90deg); 2386 | opacity: 0; 2387 | } 2388 | } 2389 | 2390 | .rotateOutUpLeft { 2391 | -webkit-animation-name: rotateOutUpLeft; 2392 | animation-name: rotateOutUpLeft; 2393 | } 2394 | 2395 | @-webkit-keyframes rotateOutUpRight { 2396 | 0% { 2397 | -webkit-transform-origin: right bottom; 2398 | transform-origin: right bottom; 2399 | -webkit-transform: rotate(0); 2400 | transform: rotate(0); 2401 | opacity: 1; 2402 | } 2403 | 2404 | 100% { 2405 | -webkit-transform-origin: right bottom; 2406 | transform-origin: right bottom; 2407 | -webkit-transform: rotate(90deg); 2408 | transform: rotate(90deg); 2409 | opacity: 0; 2410 | } 2411 | } 2412 | 2413 | @keyframes rotateOutUpRight { 2414 | 0% { 2415 | -webkit-transform-origin: right bottom; 2416 | -ms-transform-origin: right bottom; 2417 | transform-origin: right bottom; 2418 | -webkit-transform: rotate(0); 2419 | -ms-transform: rotate(0); 2420 | transform: rotate(0); 2421 | opacity: 1; 2422 | } 2423 | 2424 | 100% { 2425 | -webkit-transform-origin: right bottom; 2426 | -ms-transform-origin: right bottom; 2427 | transform-origin: right bottom; 2428 | -webkit-transform: rotate(90deg); 2429 | -ms-transform: rotate(90deg); 2430 | transform: rotate(90deg); 2431 | opacity: 0; 2432 | } 2433 | } 2434 | 2435 | .rotateOutUpRight { 2436 | -webkit-animation-name: rotateOutUpRight; 2437 | animation-name: rotateOutUpRight; 2438 | } 2439 | 2440 | @-webkit-keyframes slideInDown { 2441 | 0% { 2442 | opacity: 0; 2443 | -webkit-transform: translateY(-2000px); 2444 | transform: translateY(-2000px); 2445 | } 2446 | 2447 | 100% { 2448 | -webkit-transform: translateY(0); 2449 | transform: translateY(0); 2450 | } 2451 | } 2452 | 2453 | @keyframes slideInDown { 2454 | 0% { 2455 | opacity: 0; 2456 | -webkit-transform: translateY(-2000px); 2457 | -ms-transform: translateY(-2000px); 2458 | transform: translateY(-2000px); 2459 | } 2460 | 2461 | 100% { 2462 | -webkit-transform: translateY(0); 2463 | -ms-transform: translateY(0); 2464 | transform: translateY(0); 2465 | } 2466 | } 2467 | 2468 | .slideInDown { 2469 | -webkit-animation-name: slideInDown; 2470 | animation-name: slideInDown; 2471 | } 2472 | 2473 | @-webkit-keyframes slideInLeft { 2474 | 0% { 2475 | opacity: 0; 2476 | -webkit-transform: translateX(-2000px); 2477 | transform: translateX(-2000px); 2478 | } 2479 | 2480 | 100% { 2481 | -webkit-transform: translateX(0); 2482 | transform: translateX(0); 2483 | } 2484 | } 2485 | 2486 | @keyframes slideInLeft { 2487 | 0% { 2488 | opacity: 0; 2489 | -webkit-transform: translateX(-2000px); 2490 | -ms-transform: translateX(-2000px); 2491 | transform: translateX(-2000px); 2492 | } 2493 | 2494 | 100% { 2495 | -webkit-transform: translateX(0); 2496 | -ms-transform: translateX(0); 2497 | transform: translateX(0); 2498 | } 2499 | } 2500 | 2501 | .slideInLeft { 2502 | -webkit-animation-name: slideInLeft; 2503 | animation-name: slideInLeft; 2504 | } 2505 | 2506 | @-webkit-keyframes slideInRight { 2507 | 0% { 2508 | opacity: 0; 2509 | -webkit-transform: translateX(2000px); 2510 | transform: translateX(2000px); 2511 | } 2512 | 2513 | 100% { 2514 | -webkit-transform: translateX(0); 2515 | transform: translateX(0); 2516 | } 2517 | } 2518 | 2519 | @keyframes slideInRight { 2520 | 0% { 2521 | opacity: 0; 2522 | -webkit-transform: translateX(2000px); 2523 | -ms-transform: translateX(2000px); 2524 | transform: translateX(2000px); 2525 | } 2526 | 2527 | 100% { 2528 | -webkit-transform: translateX(0); 2529 | -ms-transform: translateX(0); 2530 | transform: translateX(0); 2531 | } 2532 | } 2533 | 2534 | .slideInRight { 2535 | -webkit-animation-name: slideInRight; 2536 | animation-name: slideInRight; 2537 | } 2538 | 2539 | @-webkit-keyframes slideOutLeft { 2540 | 0% { 2541 | -webkit-transform: translateX(0); 2542 | transform: translateX(0); 2543 | } 2544 | 2545 | 100% { 2546 | opacity: 0; 2547 | -webkit-transform: translateX(-2000px); 2548 | transform: translateX(-2000px); 2549 | } 2550 | } 2551 | 2552 | @keyframes slideOutLeft { 2553 | 0% { 2554 | -webkit-transform: translateX(0); 2555 | -ms-transform: translateX(0); 2556 | transform: translateX(0); 2557 | } 2558 | 2559 | 100% { 2560 | opacity: 0; 2561 | -webkit-transform: translateX(-2000px); 2562 | -ms-transform: translateX(-2000px); 2563 | transform: translateX(-2000px); 2564 | } 2565 | } 2566 | 2567 | .slideOutLeft { 2568 | -webkit-animation-name: slideOutLeft; 2569 | animation-name: slideOutLeft; 2570 | } 2571 | 2572 | @-webkit-keyframes slideOutRight { 2573 | 0% { 2574 | -webkit-transform: translateX(0); 2575 | transform: translateX(0); 2576 | } 2577 | 2578 | 100% { 2579 | opacity: 0; 2580 | -webkit-transform: translateX(2000px); 2581 | transform: translateX(2000px); 2582 | } 2583 | } 2584 | 2585 | @keyframes slideOutRight { 2586 | 0% { 2587 | -webkit-transform: translateX(0); 2588 | -ms-transform: translateX(0); 2589 | transform: translateX(0); 2590 | } 2591 | 2592 | 100% { 2593 | opacity: 0; 2594 | -webkit-transform: translateX(2000px); 2595 | -ms-transform: translateX(2000px); 2596 | transform: translateX(2000px); 2597 | } 2598 | } 2599 | 2600 | .slideOutRight { 2601 | -webkit-animation-name: slideOutRight; 2602 | animation-name: slideOutRight; 2603 | } 2604 | 2605 | @-webkit-keyframes slideOutUp { 2606 | 0% { 2607 | -webkit-transform: translateY(0); 2608 | transform: translateY(0); 2609 | } 2610 | 2611 | 100% { 2612 | opacity: 0; 2613 | -webkit-transform: translateY(-2000px); 2614 | transform: translateY(-2000px); 2615 | } 2616 | } 2617 | 2618 | @keyframes slideOutUp { 2619 | 0% { 2620 | -webkit-transform: translateY(0); 2621 | -ms-transform: translateY(0); 2622 | transform: translateY(0); 2623 | } 2624 | 2625 | 100% { 2626 | opacity: 0; 2627 | -webkit-transform: translateY(-2000px); 2628 | -ms-transform: translateY(-2000px); 2629 | transform: translateY(-2000px); 2630 | } 2631 | } 2632 | 2633 | .slideOutUp { 2634 | -webkit-animation-name: slideOutUp; 2635 | animation-name: slideOutUp; 2636 | } 2637 | 2638 | @-webkit-keyframes slideInUp { 2639 | 0% { 2640 | opacity: 0; 2641 | -webkit-transform: translateY(2000px); 2642 | transform: translateY(2000px); 2643 | } 2644 | 2645 | 100% { 2646 | opacity: 1; 2647 | -webkit-transform: translateY(0); 2648 | transform: translateY(0); 2649 | } 2650 | } 2651 | 2652 | @keyframes slideInUp { 2653 | 0% { 2654 | opacity: 0; 2655 | -webkit-transform: translateY(2000px); 2656 | -ms-transform: translateY(2000px); 2657 | transform: translateY(2000px); 2658 | } 2659 | 2660 | 100% { 2661 | opacity: 1; 2662 | -webkit-transform: translateY(0); 2663 | -ms-transform: translateY(0); 2664 | transform: translateY(0); 2665 | } 2666 | } 2667 | 2668 | .slideInUp { 2669 | -webkit-animation-name: slideInUp; 2670 | animation-name: slideInUp; 2671 | } 2672 | 2673 | @-webkit-keyframes slideOutDown { 2674 | 0% { 2675 | -webkit-transform: translateY(0); 2676 | transform: translateY(0); 2677 | } 2678 | 2679 | 100% { 2680 | opacity: 0; 2681 | -webkit-transform: translateY(2000px); 2682 | transform: translateY(2000px); 2683 | } 2684 | } 2685 | 2686 | @keyframes slideOutDown { 2687 | 0% { 2688 | -webkit-transform: translateY(0); 2689 | -ms-transform: translateY(0); 2690 | transform: translateY(0); 2691 | } 2692 | 2693 | 100% { 2694 | opacity: 0; 2695 | -webkit-transform: translateY(2000px); 2696 | -ms-transform: translateY(2000px); 2697 | transform: translateY(2000px); 2698 | } 2699 | } 2700 | 2701 | .slideOutDown { 2702 | -webkit-animation-name: slideOutDown; 2703 | animation-name: slideOutDown; 2704 | } 2705 | 2706 | @-webkit-keyframes hinge { 2707 | 0% { 2708 | -webkit-transform: rotate(0); 2709 | transform: rotate(0); 2710 | -webkit-transform-origin: top left; 2711 | transform-origin: top left; 2712 | -webkit-animation-timing-function: ease-in-out; 2713 | animation-timing-function: ease-in-out; 2714 | } 2715 | 2716 | 20%, 60% { 2717 | -webkit-transform: rotate(80deg); 2718 | transform: rotate(80deg); 2719 | -webkit-transform-origin: top left; 2720 | transform-origin: top left; 2721 | -webkit-animation-timing-function: ease-in-out; 2722 | animation-timing-function: ease-in-out; 2723 | } 2724 | 2725 | 40% { 2726 | -webkit-transform: rotate(60deg); 2727 | transform: rotate(60deg); 2728 | -webkit-transform-origin: top left; 2729 | transform-origin: top left; 2730 | -webkit-animation-timing-function: ease-in-out; 2731 | animation-timing-function: ease-in-out; 2732 | } 2733 | 2734 | 80% { 2735 | -webkit-transform: rotate(60deg) translateY(0); 2736 | transform: rotate(60deg) translateY(0); 2737 | -webkit-transform-origin: top left; 2738 | transform-origin: top left; 2739 | -webkit-animation-timing-function: ease-in-out; 2740 | animation-timing-function: ease-in-out; 2741 | opacity: 1; 2742 | } 2743 | 2744 | 100% { 2745 | -webkit-transform: translateY(700px); 2746 | transform: translateY(700px); 2747 | opacity: 0; 2748 | } 2749 | } 2750 | 2751 | @keyframes hinge { 2752 | 0% { 2753 | -webkit-transform: rotate(0); 2754 | -ms-transform: rotate(0); 2755 | transform: rotate(0); 2756 | -webkit-transform-origin: top left; 2757 | -ms-transform-origin: top left; 2758 | transform-origin: top left; 2759 | -webkit-animation-timing-function: ease-in-out; 2760 | animation-timing-function: ease-in-out; 2761 | } 2762 | 2763 | 20%, 60% { 2764 | -webkit-transform: rotate(80deg); 2765 | -ms-transform: rotate(80deg); 2766 | transform: rotate(80deg); 2767 | -webkit-transform-origin: top left; 2768 | -ms-transform-origin: top left; 2769 | transform-origin: top left; 2770 | -webkit-animation-timing-function: ease-in-out; 2771 | animation-timing-function: ease-in-out; 2772 | } 2773 | 2774 | 40% { 2775 | -webkit-transform: rotate(60deg); 2776 | -ms-transform: rotate(60deg); 2777 | transform: rotate(60deg); 2778 | -webkit-transform-origin: top left; 2779 | -ms-transform-origin: top left; 2780 | transform-origin: top left; 2781 | -webkit-animation-timing-function: ease-in-out; 2782 | animation-timing-function: ease-in-out; 2783 | } 2784 | 2785 | 80% { 2786 | -webkit-transform: rotate(60deg) translateY(0); 2787 | -ms-transform: rotate(60deg) translateY(0); 2788 | transform: rotate(60deg) translateY(0); 2789 | -webkit-transform-origin: top left; 2790 | -ms-transform-origin: top left; 2791 | transform-origin: top left; 2792 | -webkit-animation-timing-function: ease-in-out; 2793 | animation-timing-function: ease-in-out; 2794 | opacity: 1; 2795 | } 2796 | 2797 | 100% { 2798 | -webkit-transform: translateY(700px); 2799 | -ms-transform: translateY(700px); 2800 | transform: translateY(700px); 2801 | opacity: 0; 2802 | } 2803 | } 2804 | 2805 | .hinge { 2806 | -webkit-animation-name: hinge; 2807 | animation-name: hinge; 2808 | } 2809 | 2810 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2811 | 2812 | @-webkit-keyframes rollIn { 2813 | 0% { 2814 | opacity: 0; 2815 | -webkit-transform: translateX(-100%) rotate(-120deg); 2816 | transform: translateX(-100%) rotate(-120deg); 2817 | } 2818 | 2819 | 100% { 2820 | opacity: 1; 2821 | -webkit-transform: translateX(0px) rotate(0deg); 2822 | transform: translateX(0px) rotate(0deg); 2823 | } 2824 | } 2825 | 2826 | @keyframes rollIn { 2827 | 0% { 2828 | opacity: 0; 2829 | -webkit-transform: translateX(-100%) rotate(-120deg); 2830 | -ms-transform: translateX(-100%) rotate(-120deg); 2831 | transform: translateX(-100%) rotate(-120deg); 2832 | } 2833 | 2834 | 100% { 2835 | opacity: 1; 2836 | -webkit-transform: translateX(0px) rotate(0deg); 2837 | -ms-transform: translateX(0px) rotate(0deg); 2838 | transform: translateX(0px) rotate(0deg); 2839 | } 2840 | } 2841 | 2842 | .rollIn { 2843 | -webkit-animation-name: rollIn; 2844 | animation-name: rollIn; 2845 | } 2846 | 2847 | /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ 2848 | 2849 | @-webkit-keyframes rollOut { 2850 | 0% { 2851 | opacity: 1; 2852 | -webkit-transform: translateX(0px) rotate(0deg); 2853 | transform: translateX(0px) rotate(0deg); 2854 | } 2855 | 2856 | 100% { 2857 | opacity: 0; 2858 | -webkit-transform: translateX(100%) rotate(120deg); 2859 | transform: translateX(100%) rotate(120deg); 2860 | } 2861 | } 2862 | 2863 | @keyframes rollOut { 2864 | 0% { 2865 | opacity: 1; 2866 | -webkit-transform: translateX(0px) rotate(0deg); 2867 | -ms-transform: translateX(0px) rotate(0deg); 2868 | transform: translateX(0px) rotate(0deg); 2869 | } 2870 | 2871 | 100% { 2872 | opacity: 0; 2873 | -webkit-transform: translateX(100%) rotate(120deg); 2874 | -ms-transform: translateX(100%) rotate(120deg); 2875 | transform: translateX(100%) rotate(120deg); 2876 | } 2877 | } 2878 | 2879 | .rollOut { 2880 | -webkit-animation-name: rollOut; 2881 | animation-name: rollOut; 2882 | } 2883 | 2884 | @-webkit-keyframes zoomIn { 2885 | 0% { 2886 | opacity: 0; 2887 | -webkit-transform: scale(.3); 2888 | transform: scale(.3); 2889 | } 2890 | 2891 | 50% { 2892 | opacity: 1; 2893 | } 2894 | } 2895 | 2896 | @keyframes zoomIn { 2897 | 0% { 2898 | opacity: 0; 2899 | -webkit-transform: scale(.3); 2900 | -ms-transform: scale(.3); 2901 | transform: scale(.3); 2902 | } 2903 | 2904 | 50% { 2905 | opacity: 1; 2906 | } 2907 | } 2908 | 2909 | .zoomIn { 2910 | -webkit-animation-name: zoomIn; 2911 | animation-name: zoomIn; 2912 | } 2913 | 2914 | @-webkit-keyframes zoomInDown { 2915 | 0% { 2916 | opacity: 0; 2917 | -webkit-transform: scale(.1) translateY(-2000px); 2918 | transform: scale(.1) translateY(-2000px); 2919 | -webkit-animation-timing-function: ease-in-out; 2920 | animation-timing-function: ease-in-out; 2921 | } 2922 | 2923 | 60% { 2924 | opacity: 1; 2925 | -webkit-transform: scale(.475) translateY(60px); 2926 | transform: scale(.475) translateY(60px); 2927 | -webkit-animation-timing-function: ease-out; 2928 | animation-timing-function: ease-out; 2929 | } 2930 | } 2931 | 2932 | @keyframes zoomInDown { 2933 | 0% { 2934 | opacity: 0; 2935 | -webkit-transform: scale(.1) translateY(-2000px); 2936 | -ms-transform: scale(.1) translateY(-2000px); 2937 | transform: scale(.1) translateY(-2000px); 2938 | -webkit-animation-timing-function: ease-in-out; 2939 | animation-timing-function: ease-in-out; 2940 | } 2941 | 2942 | 60% { 2943 | opacity: 1; 2944 | -webkit-transform: scale(.475) translateY(60px); 2945 | -ms-transform: scale(.475) translateY(60px); 2946 | transform: scale(.475) translateY(60px); 2947 | -webkit-animation-timing-function: ease-out; 2948 | animation-timing-function: ease-out; 2949 | } 2950 | } 2951 | 2952 | .zoomInDown { 2953 | -webkit-animation-name: zoomInDown; 2954 | animation-name: zoomInDown; 2955 | } 2956 | 2957 | @-webkit-keyframes zoomInLeft { 2958 | 0% { 2959 | opacity: 0; 2960 | -webkit-transform: scale(.1) translateX(-2000px); 2961 | transform: scale(.1) translateX(-2000px); 2962 | -webkit-animation-timing-function: ease-in-out; 2963 | animation-timing-function: ease-in-out; 2964 | } 2965 | 2966 | 60% { 2967 | opacity: 1; 2968 | -webkit-transform: scale(.475) translateX(48px); 2969 | transform: scale(.475) translateX(48px); 2970 | -webkit-animation-timing-function: ease-out; 2971 | animation-timing-function: ease-out; 2972 | } 2973 | } 2974 | 2975 | @keyframes zoomInLeft { 2976 | 0% { 2977 | opacity: 0; 2978 | -webkit-transform: scale(.1) translateX(-2000px); 2979 | -ms-transform: scale(.1) translateX(-2000px); 2980 | transform: scale(.1) translateX(-2000px); 2981 | -webkit-animation-timing-function: ease-in-out; 2982 | animation-timing-function: ease-in-out; 2983 | } 2984 | 2985 | 60% { 2986 | opacity: 1; 2987 | -webkit-transform: scale(.475) translateX(48px); 2988 | -ms-transform: scale(.475) translateX(48px); 2989 | transform: scale(.475) translateX(48px); 2990 | -webkit-animation-timing-function: ease-out; 2991 | animation-timing-function: ease-out; 2992 | } 2993 | } 2994 | 2995 | .zoomInLeft { 2996 | -webkit-animation-name: zoomInLeft; 2997 | animation-name: zoomInLeft; 2998 | } 2999 | 3000 | @-webkit-keyframes zoomInRight { 3001 | 0% { 3002 | opacity: 0; 3003 | -webkit-transform: scale(.1) translateX(2000px); 3004 | transform: scale(.1) translateX(2000px); 3005 | -webkit-animation-timing-function: ease-in-out; 3006 | animation-timing-function: ease-in-out; 3007 | } 3008 | 3009 | 60% { 3010 | opacity: 1; 3011 | -webkit-transform: scale(.475) translateX(-48px); 3012 | transform: scale(.475) translateX(-48px); 3013 | -webkit-animation-timing-function: ease-out; 3014 | animation-timing-function: ease-out; 3015 | } 3016 | } 3017 | 3018 | @keyframes zoomInRight { 3019 | 0% { 3020 | opacity: 0; 3021 | -webkit-transform: scale(.1) translateX(2000px); 3022 | -ms-transform: scale(.1) translateX(2000px); 3023 | transform: scale(.1) translateX(2000px); 3024 | -webkit-animation-timing-function: ease-in-out; 3025 | animation-timing-function: ease-in-out; 3026 | } 3027 | 3028 | 60% { 3029 | opacity: 1; 3030 | -webkit-transform: scale(.475) translateX(-48px); 3031 | -ms-transform: scale(.475) translateX(-48px); 3032 | transform: scale(.475) translateX(-48px); 3033 | -webkit-animation-timing-function: ease-out; 3034 | animation-timing-function: ease-out; 3035 | } 3036 | } 3037 | 3038 | .zoomInRight { 3039 | -webkit-animation-name: zoomInRight; 3040 | animation-name: zoomInRight; 3041 | } 3042 | 3043 | @-webkit-keyframes zoomInUp { 3044 | 0% { 3045 | opacity: 0; 3046 | -webkit-transform: scale(.1) translateY(2000px); 3047 | transform: scale(.1) translateY(2000px); 3048 | -webkit-animation-timing-function: ease-in-out; 3049 | animation-timing-function: ease-in-out; 3050 | } 3051 | 3052 | 60% { 3053 | opacity: 1; 3054 | -webkit-transform: scale(.475) translateY(-60px); 3055 | transform: scale(.475) translateY(-60px); 3056 | -webkit-animation-timing-function: ease-out; 3057 | animation-timing-function: ease-out; 3058 | } 3059 | } 3060 | 3061 | @keyframes zoomInUp { 3062 | 0% { 3063 | opacity: 0; 3064 | -webkit-transform: scale(.1) translateY(2000px); 3065 | -ms-transform: scale(.1) translateY(2000px); 3066 | transform: scale(.1) translateY(2000px); 3067 | -webkit-animation-timing-function: ease-in-out; 3068 | animation-timing-function: ease-in-out; 3069 | } 3070 | 3071 | 60% { 3072 | opacity: 1; 3073 | -webkit-transform: scale(.475) translateY(-60px); 3074 | -ms-transform: scale(.475) translateY(-60px); 3075 | transform: scale(.475) translateY(-60px); 3076 | -webkit-animation-timing-function: ease-out; 3077 | animation-timing-function: ease-out; 3078 | } 3079 | } 3080 | 3081 | .zoomInUp { 3082 | -webkit-animation-name: zoomInUp; 3083 | animation-name: zoomInUp; 3084 | } 3085 | 3086 | @-webkit-keyframes zoomOut { 3087 | 0% { 3088 | opacity: 1; 3089 | -webkit-transform: scale(1); 3090 | transform: scale(1); 3091 | } 3092 | 3093 | 50% { 3094 | opacity: 0; 3095 | -webkit-transform: scale(.3); 3096 | transform: scale(.3); 3097 | } 3098 | 3099 | 100% { 3100 | opacity: 0; 3101 | } 3102 | } 3103 | 3104 | @keyframes zoomOut { 3105 | 0% { 3106 | opacity: 1; 3107 | -webkit-transform: scale(1); 3108 | -ms-transform: scale(1); 3109 | transform: scale(1); 3110 | } 3111 | 3112 | 50% { 3113 | opacity: 0; 3114 | -webkit-transform: scale(.3); 3115 | -ms-transform: scale(.3); 3116 | transform: scale(.3); 3117 | } 3118 | 3119 | 100% { 3120 | opacity: 0; 3121 | } 3122 | } 3123 | 3124 | .zoomOut { 3125 | -webkit-animation-name: zoomOut; 3126 | animation-name: zoomOut; 3127 | } 3128 | 3129 | @-webkit-keyframes zoomOutDown { 3130 | 40% { 3131 | opacity: 1; 3132 | -webkit-transform: scale(.475) translateY(-60px); 3133 | transform: scale(.475) translateY(-60px); 3134 | -webkit-animation-timing-function: linear; 3135 | animation-timing-function: linear; 3136 | } 3137 | 3138 | 100% { 3139 | opacity: 0; 3140 | -webkit-transform: scale(.1) translateY(2000px); 3141 | transform: scale(.1) translateY(2000px); 3142 | -webkit-transform-origin: center bottom; 3143 | transform-origin: center bottom; 3144 | } 3145 | } 3146 | 3147 | @keyframes zoomOutDown { 3148 | 40% { 3149 | opacity: 1; 3150 | -webkit-transform: scale(.475) translateY(-60px); 3151 | -ms-transform: scale(.475) translateY(-60px); 3152 | transform: scale(.475) translateY(-60px); 3153 | -webkit-animation-timing-function: linear; 3154 | animation-timing-function: linear; 3155 | } 3156 | 3157 | 100% { 3158 | opacity: 0; 3159 | -webkit-transform: scale(.1) translateY(2000px); 3160 | -ms-transform: scale(.1) translateY(2000px); 3161 | transform: scale(.1) translateY(2000px); 3162 | -webkit-transform-origin: center bottom; 3163 | -ms-transform-origin: center bottom; 3164 | transform-origin: center bottom; 3165 | } 3166 | } 3167 | 3168 | .zoomOutDown { 3169 | -webkit-animation-name: zoomOutDown; 3170 | animation-name: zoomOutDown; 3171 | } 3172 | 3173 | @-webkit-keyframes zoomOutLeft { 3174 | 40% { 3175 | opacity: 1; 3176 | -webkit-transform: scale(.475) translateX(42px); 3177 | transform: scale(.475) translateX(42px); 3178 | -webkit-animation-timing-function: linear; 3179 | animation-timing-function: linear; 3180 | } 3181 | 3182 | 100% { 3183 | opacity: 0; 3184 | -webkit-transform: scale(.1) translateX(-2000px); 3185 | transform: scale(.1) translateX(-2000px); 3186 | -webkit-transform-origin: left center; 3187 | transform-origin: left center; 3188 | } 3189 | } 3190 | 3191 | @keyframes zoomOutLeft { 3192 | 40% { 3193 | opacity: 1; 3194 | -webkit-transform: scale(.475) translateX(42px); 3195 | -ms-transform: scale(.475) translateX(42px); 3196 | transform: scale(.475) translateX(42px); 3197 | -webkit-animation-timing-function: linear; 3198 | animation-timing-function: linear; 3199 | } 3200 | 3201 | 100% { 3202 | opacity: 0; 3203 | -webkit-transform: scale(.1) translateX(-2000px); 3204 | -ms-transform: scale(.1) translateX(-2000px); 3205 | transform: scale(.1) translateX(-2000px); 3206 | -webkit-transform-origin: left center; 3207 | -ms-transform-origin: left center; 3208 | transform-origin: left center; 3209 | } 3210 | } 3211 | 3212 | .zoomOutLeft { 3213 | -webkit-animation-name: zoomOutLeft; 3214 | animation-name: zoomOutLeft; 3215 | } 3216 | 3217 | @-webkit-keyframes zoomOutRight { 3218 | 40% { 3219 | opacity: 1; 3220 | -webkit-transform: scale(.475) translateX(-42px); 3221 | transform: scale(.475) translateX(-42px); 3222 | -webkit-animation-timing-function: linear; 3223 | animation-timing-function: linear; 3224 | } 3225 | 3226 | 100% { 3227 | opacity: 0; 3228 | -webkit-transform: scale(.1) translateX(2000px); 3229 | transform: scale(.1) translateX(2000px); 3230 | -webkit-transform-origin: right center; 3231 | transform-origin: right center; 3232 | } 3233 | } 3234 | 3235 | @keyframes zoomOutRight { 3236 | 40% { 3237 | opacity: 1; 3238 | -webkit-transform: scale(.475) translateX(-42px); 3239 | -ms-transform: scale(.475) translateX(-42px); 3240 | transform: scale(.475) translateX(-42px); 3241 | -webkit-animation-timing-function: linear; 3242 | animation-timing-function: linear; 3243 | } 3244 | 3245 | 100% { 3246 | opacity: 0; 3247 | -webkit-transform: scale(.1) translateX(2000px); 3248 | -ms-transform: scale(.1) translateX(2000px); 3249 | transform: scale(.1) translateX(2000px); 3250 | -webkit-transform-origin: right center; 3251 | -ms-transform-origin: right center; 3252 | transform-origin: right center; 3253 | } 3254 | } 3255 | 3256 | .zoomOutRight { 3257 | -webkit-animation-name: zoomOutRight; 3258 | animation-name: zoomOutRight; 3259 | } 3260 | 3261 | @-webkit-keyframes zoomOutUp { 3262 | 40% { 3263 | opacity: 1; 3264 | -webkit-transform: scale(.475) translateY(60px); 3265 | transform: scale(.475) translateY(60px); 3266 | -webkit-animation-timing-function: linear; 3267 | animation-timing-function: linear; 3268 | } 3269 | 3270 | 100% { 3271 | opacity: 0; 3272 | -webkit-transform: scale(.1) translateY(-2000px); 3273 | transform: scale(.1) translateY(-2000px); 3274 | -webkit-transform-origin: center top; 3275 | transform-origin: center top; 3276 | } 3277 | } 3278 | 3279 | @keyframes zoomOutUp { 3280 | 40% { 3281 | opacity: 1; 3282 | -webkit-transform: scale(.475) translateY(60px); 3283 | -ms-transform: scale(.475) translateY(60px); 3284 | transform: scale(.475) translateY(60px); 3285 | -webkit-animation-timing-function: linear; 3286 | animation-timing-function: linear; 3287 | } 3288 | 3289 | 100% { 3290 | opacity: 0; 3291 | -webkit-transform: scale(.1) translateY(-2000px); 3292 | -ms-transform: scale(.1) translateY(-2000px); 3293 | transform: scale(.1) translateY(-2000px); 3294 | -webkit-transform-origin: center top; 3295 | -ms-transform-origin: center top; 3296 | transform-origin: center top; 3297 | } 3298 | } 3299 | 3300 | .zoomOutUp { 3301 | -webkit-animation-name: zoomOutUp; 3302 | animation-name: zoomOutUp; 3303 | } -------------------------------------------------------------------------------- /dev/styles/_colours.scss: -------------------------------------------------------------------------------- 1 | // Better Colours 2 | // From http://clrs.cc/ 3 | 4 | $aqua: #7FDBFF; 5 | $blue: #0074D9; 6 | $navy: #001F3F; 7 | $teal: #39CCCC; 8 | $green: #2ECC40; 9 | $olive: #3D9970; 10 | $lime: #01FF70; 11 | 12 | // Warm 13 | 14 | $yellow: #FFDC00; 15 | $orange: #FF851B; 16 | $red: #FF4136; 17 | $fuchsia: #F012BE; 18 | $purple: #B10DC9; 19 | $maroon: #85144B; 20 | 21 | // Gray Scale 22 | 23 | $white: #fff; 24 | $silver: #ddd; 25 | $gray: #aaa; 26 | $black: #111; -------------------------------------------------------------------------------- /dev/styles/_functions.scss: -------------------------------------------------------------------------------- 1 | // ----------------------- 2 | // Linear Gradient Position Tool 3 | // ----------------------- 4 | @function _linear-positions-parser($pos) { 5 | $type: type-of(nth($pos, 1)); 6 | $spec: null; 7 | $degree: null; 8 | $side: null; 9 | $corner: null; 10 | $length: length($pos); 11 | // Parse Side and corner positions 12 | @if ($length > 1) { 13 | @if nth($pos, 1) == "to" { // Newer syntax 14 | $side: nth($pos, 2); 15 | 16 | @if $length == 2 { // eg. to top 17 | // Swap for backwards compatability 18 | $degree: _position-flipper(nth($pos, 2)); 19 | } 20 | @else if $length == 3 { // eg. to top left 21 | $corner: nth($pos, 3); 22 | } 23 | } 24 | @else if $length == 2 { // Older syntax ("top left") 25 | $side: _position-flipper(nth($pos, 1)); 26 | $corner: _position-flipper(nth($pos, 2)); 27 | } 28 | 29 | @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") { 30 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 31 | } 32 | @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") { 33 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 34 | } 35 | @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") { 36 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 37 | } 38 | @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") { 39 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 40 | } 41 | $spec: to $side $corner; 42 | } 43 | @else if $length == 1 { 44 | // Swap for backwards compatability 45 | @if $type == string { 46 | $degree: $pos; 47 | $spec: to _position-flipper($pos); 48 | } 49 | @else { 50 | $degree: -270 - $pos; //rotate the gradient opposite from spec 51 | $spec: $pos; 52 | } 53 | } 54 | $degree: unquote($degree + ","); 55 | $spec: unquote($spec + ","); 56 | @return $degree $spec; 57 | } 58 | 59 | @function _position-flipper($pos) { 60 | @return if($pos == left, right, null) 61 | if($pos == right, left, null) 62 | if($pos == top, bottom, null) 63 | if($pos == bottom, top, null); 64 | } 65 | 66 | 67 | @function calculateRem($size) { 68 | $remSize: $size / $basefontsize; 69 | @return $remSize * 1em; 70 | } 71 | 72 | @function lineheight($size) { 73 | $stripped: $size / ($size * 1 + 1); 74 | $lineHeight: ($stripped) * 1.6; 75 | @return ($lineHeight) * 1em; 76 | 77 | } -------------------------------------------------------------------------------- /dev/styles/_grid.scss: -------------------------------------------------------------------------------- 1 | ///////////////// 2 | // Semantic.gs // for SCSS: http://sass-lang.com/ 3 | ///////////////// 4 | 5 | // Defaults which you can freely override 6 | $column-width: 60px; 7 | $gutter-width: 20px; 8 | $columns: 12; 9 | 10 | // Utility function — you should never need to modify this 11 | @function gridsystem-width($columns:$columns) { 12 | @return ($column-width * $columns) + ($gutter-width * $columns); 13 | } 14 | 15 | // Set $total-width to 100% for a fluid layout 16 | $total-width: gridsystem-width($columns); 17 | 18 | // Uncomment these two lines and the star-hack width/margin lines below to enable sub-pixel fix for IE6 & 7. See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html 19 | // $min-width: 999999; 20 | // $correction: 0.5 / $min-width * 100; 21 | 22 | // The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/ 23 | @mixin clearfix() { 24 | *zoom:1; 25 | 26 | &:before, 27 | &:after { 28 | content:""; 29 | display:table; 30 | } 31 | &:after { 32 | clear:both; 33 | } 34 | } 35 | 36 | 37 | ////////// 38 | // GRID // 39 | ////////// 40 | 41 | body { 42 | width: 100%; 43 | @include clearfix(); 44 | } 45 | 46 | @mixin row($columns:$columns) { 47 | display: block; 48 | width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns)); 49 | margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1); 50 | // *width: $total-width*(($gutter-width + gridsystem-width($columns))/gridsystem-width($columns))-$correction; 51 | // *margin: 0 $total-width*((($gutter-width*.5)/gridsystem-width($columns))*-1)-$correction; 52 | @include clearfix(); 53 | } 54 | @mixin column($x,$columns:$columns) { 55 | display: inline; 56 | float: left; 57 | width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns)); 58 | margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns)); 59 | // *width: $total-width*(((($gutter-width+$column-width)*$x)-$gutter-width) / gridsystem-width($columns))-$correction; 60 | // *margin: 0 $total-width*(($gutter-width*.5)/gridsystem-width($columns))-$correction; 61 | } 62 | @mixin push($offset:1) { 63 | margin-left: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns)); 64 | } 65 | @mixin pull($offset:1) { 66 | margin-right: $total-width*((($gutter-width+$column-width)*$offset) / gridsystem-width($columns)) + $total-width*(($gutter-width*.5)/gridsystem-width($columns)); 67 | } -------------------------------------------------------------------------------- /dev/styles/_mixins.scss: -------------------------------------------------------------------------------- 1 | @import '_functions'; 2 | 3 | 4 | // ---------------------------------------------------------------------------------------- 5 | // ####################################################################################### 6 | // Mega Mixin galore 7 | // ---------------------------------------------------------------------------------------- 8 | 9 | 10 | @mixin importfont($font-family, $font-filename, $font-weight : normal, $font-style :normal, $font-stretch : normal) { 11 | @font-face { 12 | font-family: '#{$font-family}'; 13 | src: url('#{$font-filename}.eot'); 14 | src: url('#{$font-filename}.eot?#iefix') format('embedded-opentype'), 15 | url('#{$font-filename}.woff') format('woff'), 16 | url('#{$font-filename}.ttf') format('truetype'), 17 | url('#{$font-filename}.svg##{$font-family}') format('svg'); 18 | font-weight: $font-weight; 19 | font-style: $font-style; 20 | font-stretch: $font-stretch; 21 | } 22 | } 23 | 24 | // ------------------------- 25 | // Border-Box 26 | // -------- 27 | // For making elements respond like you'd expect them to. 28 | @mixin box-sizing () { 29 | @each $vendor in $vendors { 30 | #{$vendor}box-sizing: border-box; 31 | } 32 | box-sizing:border-box; 33 | } 34 | 35 | // ------------------------- 36 | // Vendor Prefix everything 37 | // -------- 38 | @mixin prefixr($rule, $value) { 39 | -moz-#{$rule}: $value; 40 | -webkit-#{$rule}: $value; 41 | -o-#{$rule}: $value; 42 | #{$rule}: $value; 43 | } 44 | 45 | // ------------------------- 46 | // Create a full width block element 47 | // -------- 48 | @mixin fullwidth() { 49 | display: inline-block; 50 | float: left; 51 | width: 100%; 52 | } 53 | 54 | // -------------------------- 55 | // Linear Gradient Mixin 56 | // Requires _linear-positions-parser function 57 | // Thank you Bourbon 58 | // --------- 59 | // EXAMPLES 60 | // @include linear-gradient(#1e5799, #2989d8); 61 | // @include linear-gradient(to top, #8fdce5, #3dc3d1); 62 | // @include linear-gradient(to top, #8fdce5, #3dc3d1, $fallback: red); 63 | // @include linear-gradient(50deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); 64 | // -------------------------- 65 | @mixin linear-gradient($pos, $stop1, $stop2: null, $stop3: null, $stop4: null, $stop5: null, $stop6: null, $stop7: null, $stop8: null, $stop9: null, $stop10: null, $fallback: null) { 66 | // Detect what type of value exists in $pos 67 | $pos-type: type-of(nth($pos, 1)); 68 | $pos-spec: null; 69 | $pos-degree: null; 70 | 71 | // If $pos is missing from mixin, reassign vars and add default position 72 | @if ($pos-type == color) or (nth($pos, 1) == "transparent") { 73 | $stop10: $stop9; $stop9: $stop8; $stop8: $stop7; $stop7: $stop6; $stop6: $stop5; 74 | $stop5: $stop4; $stop4: $stop3; $stop3: $stop2; $stop2: $stop1; $stop1: $pos; 75 | $pos: null; 76 | } 77 | 78 | @if $pos { 79 | $positions: _linear-positions-parser($pos); 80 | $pos-degree: nth($positions, 1); 81 | $pos-spec: nth($positions, 2); 82 | } 83 | 84 | $full: $stop1, $stop2, $stop3, $stop4, $stop5, $stop6, $stop7, $stop8, $stop9, $stop10; 85 | 86 | // Set $G1 as the default fallback color 87 | $fallback-color: nth($stop1, 1); 88 | 89 | // If $fallback is a color use that color as the fallback color 90 | @if (type-of($fallback) == color) or ($fallback == "transparent") { 91 | $fallback-color: $fallback; 92 | } 93 | 94 | background-color: $fallback-color; 95 | background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome 96 | background-image: unquote("linear-gradient(#{$pos-spec}#{$full})"); 97 | } 98 | 99 | // ------------------------- 100 | // Box-Shadow 101 | // -------- 102 | // For making elements respond like you'd expect them to. 103 | @mixin box-shadow($top, $left, $blur, $color, $inset: false) { 104 | @if $inset { 105 | @each $vendor in $vendors { 106 | #{$vendor}box-shadow: inset $top $left $blur $color; 107 | } 108 | box-shadow: inset $top $left $blur $color; 109 | } @else { 110 | @each $vendor in $vendors { 111 | #{$vendor}box-shadow: $top $left $blur $color; 112 | } 113 | box-shadow: $top $left $blur $color; 114 | } 115 | } 116 | 117 | @mixin duoboxshadow( $string: -1px 0px 5px 0px rgba(50, 50, 50, 0.75), $stringinset: inset 0px 0px 14px -5px rgba(50, 50, 50, 0.75)) { 118 | -webkit-box-shadow: $string, $stringinset; 119 | -moz-box-shadow: $string, $stringinset; 120 | box-shadow: $string, $stringinset; 121 | } 122 | 123 | // Auto Retina Image 124 | @mixin image-2x($image, $width, $height) { 125 | @media (min--moz-device-pixel-ratio: 1.3), 126 | (-o-min-device-pixel-ratio: 2.6/2), 127 | (-webkit-min-device-pixel-ratio: 1.3), 128 | (min-device-pixel-ratio: 1.3), 129 | (min-resolution: 1.3dppx) { 130 | /* on retina, use image that's scaled by 2 */ 131 | background-image: url($image); 132 | background-size: $width $height; 133 | } 134 | } 135 | 136 | // ------------------------- 137 | // Size 138 | // ----------- 139 | // Takes Width and Height values respectively in that order and applies px to them. 140 | @mixin inlinebox($dimension1, $dimension2: false ) { 141 | $widthpx: (); 142 | $heightpx: (); 143 | @each $i in $dimension1 { 144 | $widthpx: append($widthpx, $i + px); 145 | } 146 | @each $i in $dimension2 { 147 | $heightpx: append($heightpx, $i + px); 148 | } 149 | @if $dimension2 { 150 | height: $widthpx; 151 | width: $heightpx; 152 | } @else { 153 | height: $widthpx; 154 | width: $widthpx; 155 | } 156 | } 157 | 158 | // ------------------------- 159 | // Text-Shadow 160 | // ------------------------- 161 | @mixin text-shadow ($string: 0 1px 3px rgba(0, 0, 0, 0.25)) { 162 | text-shadow: $string; 163 | } 164 | 165 | // ------------------------- 166 | // Transition 167 | // ------------------------- 168 | @mixin transition($string: all 0.50s ease-in-out ) { 169 | @each $vendor in $vendors { 170 | #{$vendor}transition: $string; 171 | } 172 | transition: $string; 173 | } 174 | 175 | // ------------------------- 176 | // Rounded Corners 177 | // ------------------------- 178 | @mixin borderradius($radius) { 179 | @each $vendor in $vendors { 180 | #{$vendor}border-radius: $radius; 181 | } 182 | -moz-background-clip: padding; 183 | -webkit-background-clip: padding-box; 184 | background-clip: padding-box; 185 | } 186 | 187 | 188 | 189 | @mixin radius($radius: false, $topleftradius: false, $toprightradius: false, $bottomrightradius: false, $bottomleftradius: false) { 190 | @if $radius { 191 | @each $vendor in $vendors { 192 | #{$vendor}border-radius: $radius; 193 | } 194 | } 195 | @if $topleftradius { 196 | @each $vendor in $vendors { 197 | #{$vendor}border-top-left-radius: $topleftradius; 198 | } 199 | } 200 | @if $toprightradius { 201 | @each $vendor in $vendors { 202 | #{$vendor}border-top-right-radius: $toprightradius; 203 | } 204 | } 205 | @if $bottomrightradius { 206 | @each $vendor in $vendors { 207 | #{$vendor}border-bottom-right-radius: $bottomrightradius; 208 | } 209 | } 210 | @if $bottomleftradius { 211 | @each $vendor in $vendors { 212 | #{$vendor}border-bottom-left-radius: $bottomleftradius; 213 | } 214 | } 215 | -moz-background-clip: padding; 216 | -webkit-background-clip: padding-box; 217 | background-clip: padding-box; 218 | } 219 | 220 | 221 | 222 | // ------------------------- 223 | // Rounded Top Corners 224 | // ------------------------- 225 | @mixin topradius($radius) { 226 | @each $vendor in $vendors { 227 | #{$vendor}border-top-right-radius: $radius; 228 | } 229 | @each $vendor in $vendors { 230 | #{$vendor}border-top-left-radius: $radius; 231 | } 232 | -moz-background-clip: padding; 233 | -webkit-background-clip: padding-box; 234 | background-clip: padding-box; 235 | } 236 | 237 | // ------------------------- 238 | // Rounded Right Corners 239 | // ------------------------- 240 | @mixin rightradius($radius) { 241 | @each $vendor in $vendors { 242 | #{$vendor}border-bottom-right-radius: $radius; 243 | } 244 | @each $vendor in $vendors { 245 | #{$vendor}top-right-radius: $radius; 246 | } 247 | -moz-background-clip: padding; 248 | -webkit-background-clip: padding-box; 249 | background-clip: padding-box; 250 | } 251 | 252 | // ------------------------- 253 | // Rounded Bottom Corners 254 | // ------------------------- 255 | @mixin bottomradius($radius) { 256 | @each $vendor in $vendors { 257 | #{$vendor}border-bottom-right-radius: $radius; 258 | } 259 | @each $vendor in $vendors { 260 | #{$vendor}bottom-left-radius: $radius; 261 | } 262 | -moz-background-clip: padding; 263 | -webkit-background-clip: padding-box; 264 | background-clip: padding-box; 265 | } 266 | 267 | // ------------------------- 268 | // Rounded Left Corners 269 | // ------------------------- 270 | @mixin leftradius($radius) { 271 | @each $vendor in $vendors { 272 | #{$vendor}border-bottom-left-radius: $radius; 273 | } 274 | @each $vendor in $vendors { 275 | #{$vendor}border-top-left-radius: $radius; 276 | } 277 | -moz-background-clip: padding; 278 | -webkit-background-clip: padding-box; 279 | background-clip: padding-box; 280 | } 281 | 282 | 283 | // ------------------------- 284 | // Text overflow 285 | // ------------------------- 286 | @mixin text-truncate { 287 | overflow: hidden; 288 | text-overflow: ellipsis; 289 | white-space: nowrap; 290 | } 291 | 292 | // ------------------------- 293 | // Position Mixin 294 | // ------------------------- 295 | @mixin pos ($top: auto, $right: auto, $bottom: auto, $left: auto, $type: relative) { 296 | top: $top; 297 | right: $right; 298 | bottom: $bottom; 299 | left: $left; 300 | position: $type; 301 | } 302 | 303 | // ------------------------- 304 | // IE7 inline-block 305 | // ---------------- 306 | @mixin ie7-inline-block() { 307 | *display: inline; /* IE7 inline-block hack */ 308 | *zoom: 1; 309 | } 310 | 311 | // ------------------------- 312 | // Overlay 313 | // ------------------------- 314 | @mixin overlay { 315 | position: fixed; 316 | top: 0; 317 | left: 0; 318 | z-index: 998; 319 | width: 100%; 320 | height: 100%; 321 | background-color: rgba(0, 0, 0, 0.4); 322 | } 323 | 324 | @mixin hide-text { 325 | font: 0/0 a; 326 | text-shadow: none; 327 | color: transparent; 328 | } 329 | 330 | @mixin middleborder($color) { 331 | height: 1px; 332 | border-top: 1px solid $color; 333 | position: relative; 334 | top: 10px; 335 | display: block; 336 | z-index: -1; 337 | } 338 | 339 | @mixin fontbase($size) { 340 | font-size: $size; 341 | font-size: calculateRem($size); 342 | line-height: lineheight($size); 343 | } 344 | 345 | 346 | -------------------------------------------------------------------------------- /dev/styles/main.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after { 4 | box-sizing: border-box; 5 | -moz-border-box: box-sizing; 6 | -webkit-border-box: box-sizing; 7 | } 8 | 9 | @import '_mixins'; 10 | @import '_colours'; // Better Colours 11 | @import '_grid'; // Better Colours 12 | @import '_animate'; 13 | 14 | // Specify the number of columns and set column and gutter widths 15 | $columns: 12; 16 | $column-width: 60; 17 | $gutter-width: 20; 18 | 19 | // Remove the definition below for a pixel-based layout 20 | $total-width: 100%; 21 | 22 | /* --------------------------- 23 | Fonts are located in dist/css/fonts bro 24 | ------------------------------ */ 25 | @include importfont('Montserrat Regular', 'fonts/Montserrat-Regular', 400); 26 | @include importfont('SourceCodePro-Regular', 'fonts/SourceCodePro-Regular', 300); 27 | // ********************** 28 | // Set Variables Here 29 | //*********************** 30 | $basefontsize: 10px; 31 | $baselineheight: 1.5; 32 | $cap-height: 0.68; 33 | $basefontcolour: #333; 34 | $basefontfamily: "Montserrat Regular", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 35 | $helveticafontfamily: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 36 | $headingsfontfamily: "Montserrat Regular", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 37 | $sourcefontfamily: "SourceCodePro-Regular", Monaco, "Bitstream Vera Sans Mono", monospace; 38 | $linkcolour: #0074D9; 39 | 40 | html { 41 | height:100%; 42 | } 43 | 44 | body { 45 | height: 100%; 46 | color: #333; 47 | font-weight: 300; 48 | font-size: $basefontsize; 49 | font-family: $basefontfamily; 50 | background: url('../images/background.jpg'); 51 | background-size: cover; 52 | } 53 | 54 | // Headings 55 | // ------------------------- 56 | h1, h2, h3, h4, h5, h6, p, ul { 57 | -webkit-margin-before:0em; 58 | -webkit-margin-after:0em; 59 | } 60 | 61 | h1, h2, h3, h4, h5, h6 { 62 | margin: 0; 63 | padding: 0; 64 | text-transform: uppercase; 65 | font-weight: 100; 66 | font-family: $headingsfontfamily; 67 | text-rendering: optimizelegibility; // Fix the character spacing for headings 68 | a { 69 | color: $basefontcolour; 70 | } 71 | } 72 | 73 | h1 { 74 | @include fontbase(32px); 75 | } 76 | 77 | h2 { 78 | @include fontbase(42px); 79 | } 80 | 81 | h3 { 82 | @include fontbase(36px); 83 | } 84 | 85 | h4 { 86 | @include fontbase(32px); 87 | } 88 | 89 | h5 { 90 | @include fontbase(28px); 91 | } 92 | 93 | // General Typography 94 | // ------------------------- 95 | p { 96 | @include fontbase(12px); 97 | } 98 | 99 | a { 100 | color: $linkcolour; 101 | text-decoration: none; 102 | } 103 | 104 | // Lists 105 | // -------------------------------------------------- 106 | 107 | // Unordered and Ordered lists 108 | ul, ol { 109 | margin: 0; 110 | padding: 0; 111 | } 112 | 113 | ul ul, 114 | ul ol, 115 | ol ol, 116 | ol ul { 117 | margin-bottom: 0; 118 | } 119 | 120 | // ********************** 121 | // All Styles Go Below Here Bud 122 | //*********************** 123 | 124 | .container { 125 | max-width: 1080px; 126 | margin: 0 auto; 127 | } 128 | 129 | header.top { 130 | color: #f6f6f6; 131 | background: #141E21; 132 | width: 100%; 133 | float: left; 134 | margin-top: 50px; 135 | .logo { 136 | background: #BD4030; 137 | font-family: $sourcefontfamily; 138 | font-weight: 700; 139 | @include fontbase(36px); 140 | color: #f6f6f6; 141 | float: left; 142 | width: 7%; 143 | height: 100%; 144 | padding: 24px 0 27px 14px; 145 | } 146 | .details { 147 | float: left; 148 | display: block; 149 | width: 93%; 150 | padding: 16px 0 21px 17px; 151 | 152 | h1.title { 153 | margin-top: 12px; 154 | float: left; 155 | } 156 | } 157 | } 158 | 159 | 160 | .includes.ng-enter { 161 | -webkit-animation: bounceInLeft 1s; 162 | -moz-animation: bounceInLeft 1s; 163 | -ms-animation: bounceInLeft 1s; 164 | animation: bounceInLeft 1s; 165 | } 166 | 167 | section.selection { 168 | width: 100%; 169 | float: left; 170 | background: rgba(#FEFEFD, 0.5); 171 | padding: 40px 0; 172 | color: #333; 173 | font-size: 21px; 174 | .wrapper { 175 | max-width: 800px; 176 | margin: 0 auto; 177 | .title { 178 | font-size: 32px; 179 | line-height: 48px; 180 | } 181 | p { 182 | font-size: 21px; 183 | } 184 | p.small { 185 | font-size: 14px; 186 | } 187 | ul.instruct { 188 | margin: 15px 0; 189 | font-family: $sourcefontfamily; 190 | color: #f6f6f6; 191 | li { 192 | margin: 10px 0; 193 | background: rgba(0,0,0,0.7); 194 | padding: 10px; 195 | } 196 | li:before { 197 | content: ">"; 198 | margin-right: 30px; 199 | } 200 | } 201 | } 202 | } 203 | 204 | footer { 205 | position: fixed; 206 | bottom: 0; 207 | right: 0; 208 | background: #141E21; 209 | color: #f6f6f6; 210 | padding: 15px 10px; 211 | a { 212 | color: #1abc9c; 213 | margin-left: 5px; 214 | } 215 | } 216 | 217 | 218 | /****** dropdown-select *******/ 219 | 220 | .wrap-dd-select { 221 | /* Size and position */ 222 | position: relative; 223 | margin: 19px 0px 0px 13px; 224 | width: 450px; 225 | float: left; 226 | padding: 10px; 227 | display: block; 228 | 229 | /* Styles */ 230 | background: #fff; 231 | border: 1px solid rgba(0,0,0,0.15); 232 | box-shadow: 0 1px 1px rgba(50,50,50,0.1); 233 | cursor: pointer; 234 | outline: none; 235 | font-size: 14px; 236 | 237 | /* Font settings */ 238 | font-weight: bold; 239 | color: #2c3e50; 240 | } 241 | 242 | .wrap-dd-select:after { 243 | content: ""; 244 | width: 0; 245 | height: 0; 246 | position: absolute; 247 | right: 15px; 248 | top: 50%; 249 | margin-top: -3px; 250 | border-width: 6px 6px 0 6px; 251 | border-style: solid; 252 | border-color: #2c3e50 transparent; 253 | } 254 | 255 | .wrap-dd-select .dropdown { 256 | /* Size & position */ 257 | position: absolute; 258 | top: 120%; 259 | left: 0; 260 | right: 0; 261 | 262 | /* Styles */ 263 | background: white; 264 | padding: 0; 265 | border-radius: inherit; 266 | border: 1px solid rgba(0,0,0,0.17); 267 | box-shadow: 0 0 5px rgba(0,0,0,0.1); 268 | font-weight: normal; 269 | transition: all 0.2s ease-in; 270 | list-style: none; 271 | 272 | /* Hiding */ 273 | opacity: 0; 274 | pointer-events: none; 275 | } 276 | 277 | .wrap-dd-select .dropdown li.divider { 278 | padding: 2px 0; 279 | background: #e6e8ea; 280 | } 281 | 282 | .wrap-dd-select .dropdown li a { 283 | display: block; 284 | padding: 10px; 285 | font-size: 14px; 286 | text-decoration: none; 287 | color: #2c3e50; 288 | border-bottom: 1px solid #e6e8ea; 289 | box-shadow: inset 0 1px 0 rgba(255,255,255,1); 290 | transition: all 0.3s ease-out; 291 | } 292 | 293 | .wrap-dd-select .dropdown li i { 294 | float: right; 295 | color: inherit; 296 | } 297 | 298 | .wrap-dd-select .dropdown li:first-of-type a { 299 | border-radius: 7px 7px 0 0; 300 | } 301 | 302 | .wrap-dd-select .dropdown li:last-of-type a { 303 | border-radius: 0 0 7px 7px; 304 | border: none; 305 | } 306 | 307 | /* Hover state */ 308 | 309 | .wrap-dd-select .dropdown li:hover a { 310 | background: #f3f8f8; 311 | } 312 | 313 | .wrap-dd-select .dropdown:after { 314 | content: ""; 315 | width: 0; 316 | height: 0; 317 | position: absolute; 318 | bottom: 100%; 319 | right: 15px; 320 | border-width: 0 6px 6px 6px; 321 | border-style: solid; 322 | border-color: #fff transparent; 323 | } 324 | 325 | .wrap-dd-select .dropdown:before { 326 | content: ""; 327 | width: 0; 328 | height: 0; 329 | position: absolute; 330 | bottom: 100%; 331 | right: 13px; 332 | border-width: 0 8px 8px 8px; 333 | border-style: solid; 334 | border-color: rgba(0,0,0,0.1) transparent; 335 | } 336 | 337 | .wrap-dd-select.active .dropdown { 338 | opacity: 1; 339 | pointer-events: auto; 340 | } 341 | 342 | /****** dropdown-menu *******/ 343 | .wrap-dd-menu { 344 | /* Size and position */ 345 | position: relative; 346 | width: 200px; 347 | margin: 0 auto; 348 | padding: 10px; 349 | } 350 | 351 | .wrap-dd-menu .dropdown { 352 | /* Size & position */ 353 | position: absolute; 354 | z-index: 1; 355 | top: 70%; 356 | left: 0; 357 | right: 0; 358 | 359 | /* Styles */ 360 | background: white; 361 | padding: 0; 362 | border-radius: 7px; 363 | border: 1px solid rgba(0,0,0,0.17); 364 | box-shadow: 0 0 5px rgba(0,0,0,0.1); 365 | font-weight: normal; 366 | transition: all 0.2s ease-in; 367 | list-style: none; 368 | 369 | /* Hiding */ 370 | opacity: 0; 371 | pointer-events: none; 372 | } 373 | 374 | .wrap-dd-menu .dropdown li.divider { 375 | padding: 2px 0; 376 | background: #e6e8ea; 377 | } 378 | 379 | .wrap-dd-menu .dropdown li a { 380 | display: block; 381 | padding: 10px; 382 | text-decoration: none; 383 | color: #8aa8bd; 384 | border-bottom: 1px solid #e6e8ea; 385 | box-shadow: inset 0 1px 0 rgba(255,255,255,1); 386 | transition: all 0.3s ease-out; 387 | } 388 | 389 | .wrap-dd-menu .dropdown li i { 390 | float: right; 391 | color: inherit; 392 | } 393 | 394 | .wrap-dd-menu .dropdown li:first-of-type a { 395 | border-radius: 7px 7px 0 0; 396 | } 397 | 398 | .wrap-dd-menu .dropdown li:last-of-type a { 399 | border-radius: 0 0 7px 7px; 400 | border: none; 401 | } 402 | 403 | /* Hover state */ 404 | 405 | .wrap-dd-menu .dropdown li:hover a { 406 | background: #f3f8f8; 407 | } 408 | 409 | .wrap-dd-menu .dropdown:after { 410 | content: ""; 411 | width: 0; 412 | height: 0; 413 | position: absolute; 414 | bottom: 100%; 415 | border-width: 0 6px 6px 6px; 416 | border-style: solid; 417 | border-color: #fff transparent; 418 | } 419 | 420 | .wrap-dd-menu .dropdown:before { 421 | content: ""; 422 | width: 0; 423 | height: 0; 424 | position: absolute; 425 | bottom: 100%; 426 | right: 95px; 427 | border-width: 0 8px 8px 8px; 428 | border-style: solid; 429 | border-color: rgba(0,0,0,0.1) transparent; 430 | } 431 | 432 | .wrap-dd-menu .dropdown.active { 433 | opacity: 1; 434 | pointer-events: auto; 435 | } 436 | 437 | 438 | .btn-menu { 439 | padding: 5px 25px; 440 | background: #fff; 441 | border: 1px solid rgba(0,0,0,0.15); 442 | border-radius: 7px; 443 | box-shadow: 0 1px 1px rgba(50,50,50,0.25); 444 | /*style the text*/ 445 | color: #8AA8BD; 446 | font-weight: bold; 447 | cursor: pointer; 448 | } 449 | 450 | .btn-menu:hover, .btn-menu:focus { 451 | box-shadow: 0 1px 1px rgba(50,50,50,0.75); 452 | } 453 | 454 | 455 | .sample-show-hide { 456 | padding:10px; 457 | border:1px solid black; 458 | background:white; 459 | } 460 | 461 | .sample-show-hide.ng-hide-add, .sample-show-hide.ng-hide-remove { 462 | -webkit-transition:all linear 0.5s; 463 | -moz-transition:all linear 0.5s; 464 | -o-transition:all linear 0.5s; 465 | transition:all linear 0.5s; 466 | display:block!important; 467 | } 468 | 469 | .sample-show-hide.ng-hide-add.ng-hide-add-active, 470 | .sample-show-hide.ng-hide-remove { 471 | opacity:0; 472 | } 473 | 474 | .sample-show-hide.ng-hide-add, 475 | .sample-show-hide.ng-hide-remove.ng-hide-remove-active { 476 | opacity:1; 477 | } 478 | -------------------------------------------------------------------------------- /dev/templates/includes/header.jade: -------------------------------------------------------------------------------- 1 | meta(charset='UTF-8') 2 | title i broke git :( 3 | link(rel='stylesheet', href='css/reset.css', type='text/css') 4 | link(rel='stylesheet', href='css/main.css', type='text/css') 5 | link(rel='icon', href='images/favicon.png', type="image/png") 6 | // script(src='scripts/vendor/jquery/jquery.min.js') 7 | script(src='scripts/vendor/jquery/jquery.min.js') 8 | script(src='scripts/vendor/angular/angular.min.js') 9 | script(src='scripts/vendor/angular-dropdowns/angular-dropdowns.min.js') 10 | script(src='scripts/vendor/angular-animate/angular-animate.min.js') 11 | script(src='scripts/main.min.js') -------------------------------------------------------------------------------- /dev/templates/index.jade: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang='en', ng-app="gitApp") 3 | head 4 | include includes/header 5 | body 6 | 7 | div(ng-controller="gitAppCtrl") 8 | .container 9 | header.top 10 | .logo :( 11 | .details 12 | h1.title i broke git while trying to 13 | div(dropdown-select="templateOptions", dropdown-model="templateSelected") 14 | div.includes(ng-include src="templateSelected.url") 15 | footer 16 | p made with love by 17 | a(href="http://twitter.com/drewisthe", target="_blank") drewisthe 18 | p got some changes? Fork the project on 19 | a(href="https://github.com/drewminns/ibrokegit") Github 20 | 21 | script(type="text/ng-template", id="push.html") 22 | section.selection 23 | .wrapper 24 | .title Did you do the following steps? 25 | ul.instruct 26 | li git status 27 | li git add (file name) 28 | li git commit -m "Put a commit message here" 29 | li git push origin (branch name) 30 | 31 | script(type="text/ng-template", id="pullLocal.html") 32 | section.selection 33 | .wrapper 34 | .title Did you do the following steps? 35 | ul.instruct 36 | li git pull origin (branch name) 37 | p Merge Conflict? 38 | p.small Fix the files locally and then 39 | ul.instruct 40 | li git status 41 | li git add (fixed filename) 42 | li git commit -m "Fixed Merge Conflicts" 43 | li git push origin (branch name) 44 | 45 | script(type="text/ng-template", id="pullUpstream.html") 46 | section.selection 47 | .wrapper 48 | .title Did you do the following steps? 49 | ul.instruct 50 | li git pull remote upstream 51 | p Merge Conflict? 52 | p.small Fix the files locally and then 53 | ul.instruct 54 | li git status 55 | li git add (fixed filename) 56 | li git commit -m "Fixed Merge Conflicts" 57 | li git push origin (branch name) 58 | 59 | script(type="text/ng-template", id="clone.html") 60 | section.selection 61 | .wrapper 62 | .title Did you do the following steps? 63 | p Get the clone url from the repo and navigate locally to the parent folder that you would like the repo to be cloned into 64 | ul.instruct 65 | li git clone (copied url) 66 | 67 | script(type="text/ng-template", id="create.html") 68 | section.selection 69 | .wrapper 70 | .title Did you do the following steps? 71 | p Create a repo on Github or Bitbucket and copy the URL generated 72 | p Navigate to the project folder on your computer 73 | ul.instruct 74 | li git init 75 | li git remote add origin (url from Github or Bitbucket) 76 | li git add -A 77 | li git commit -m "initial commit" 78 | li git push origin master 79 | 80 | script(type="text/ng-template", id="fork.html") 81 | section.selection 82 | .wrapper 83 | .title Did you do the following steps? 84 | p Click the 'Fork' button on an existing repo and copy the URL generated from the resulting copy 85 | p Navigate to where you'd like to store the files locally. 86 | ul.instruct 87 | li git clone (copied url) 88 | p To pull updates from original source, navigate into your local version directory 89 | ul.instruct 90 | li git remote add upstream (original repo url) 91 | li git pull upstream master 92 | 93 | 94 | 95 | script(type="text/ng-template", id="pullRequest.html") 96 | section.selection 97 | .wrapper 98 | .title Did you do the following steps? 99 | ul.instruct 100 | li git add (files changed) 101 | li git commit -m "commit message" 102 | li git push origin master 103 | p On Github or Bitbucket, click the Pull Request button and follow the instructions 104 | 105 | script(type="text/ng-template", id="resetHard.html") 106 | section.selection 107 | .wrapper 108 | .title Did you do the following steps? 109 | ul.instruct 110 | li git reset (files changed) 111 | p Reset all changes and revert to the last commit 112 | ul.instruct 113 | li git reset --hard 114 | 115 | script(type="text/ng-template", id="rebase.html") 116 | section.selection 117 | .wrapper 118 | .title Did you do the following steps? 119 | ul.instruct 120 | li git pull --rebase 121 | 122 | script 123 | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-51053134-1', 'ibrokegit.com');ga('send', 'pageview'); 124 | -------------------------------------------------------------------------------- /dist/css/fonts/Montserrat-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewminns/ibrokegit/82f7864e659440a3056f413e8bd187854bd950c1/dist/css/fonts/Montserrat-Regular.eot -------------------------------------------------------------------------------- /dist/css/fonts/Montserrat-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewminns/ibrokegit/82f7864e659440a3056f413e8bd187854bd950c1/dist/css/fonts/Montserrat-Regular.ttf -------------------------------------------------------------------------------- /dist/css/fonts/Montserrat-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewminns/ibrokegit/82f7864e659440a3056f413e8bd187854bd950c1/dist/css/fonts/Montserrat-Regular.woff -------------------------------------------------------------------------------- /dist/css/reset.css: -------------------------------------------------------------------------------- 1 | /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ 2 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} -------------------------------------------------------------------------------- /dist/images/Blur-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewminns/ibrokegit/82f7864e659440a3056f413e8bd187854bd950c1/dist/images/Blur-4.png -------------------------------------------------------------------------------- /dist/images/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewminns/ibrokegit/82f7864e659440a3056f413e8bd187854bd950c1/dist/images/background.jpg -------------------------------------------------------------------------------- /dist/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drewminns/ibrokegit/82f7864e659440a3056f413e8bd187854bd950c1/dist/images/favicon.png -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | i broke git :(

i broke git while trying to

-------------------------------------------------------------------------------- /dist/scripts/main.min.js: -------------------------------------------------------------------------------- 1 | "use strict";var iBrokeGit=angular.module("gitApp",["ngDropdowns","ngAnimate"]);iBrokeGit.controller("gitAppCtrl",function($scope){$scope.templateOptions=[{text:"Push my files",url:"push.html"},{text:"Pull Changes from my Repo",url:"pullLocal.html"},{text:"Update my repo with changes from another repo",url:"pullUpstream.html"},{text:"Clone a repo to my computer",url:"clone.html"},{text:"Create a new Repository",url:"create.html"},{text:"Fork a Repo",url:"fork.html"},{text:"Create a Pull Request",url:"pullRequest.html"},{text:"Remove Changes from Staging",url:"resetHard.html"},{text:"Pull and Merge with minimal conflicts",url:"rebase.html"}],$scope.templateSelected={text:"Select an Option"}}); -------------------------------------------------------------------------------- /dist/scripts/vendor/angular-animate/angular-animate.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | AngularJS v1.2.16 3 | (c) 2010-2014 Google, Inc. http://angularjs.org 4 | License: MIT 5 | */ 6 | (function(s,g,P){'use strict';g.module("ngAnimate",["ng"]).factory("$$animateReflow",["$$rAF","$document",function(g,s){return function(e){return g(function(){e()})}}]).config(["$provide","$animateProvider",function(ga,G){function e(e){for(var p=0;p=x&&b>=v&&f()}var l=e(b);a=b.data(n);if(-1!=l.getAttribute("class").indexOf(c)&&a){var r="";p(c.split(" "),function(a,b){r+=(0\n {{dropdownModel[labelField]}}\n \n"}}]).directive("dropdownSelectItem",[function(){return{require:"^dropdownSelect",replace:!0,scope:{dropdownItemLabel:"=",dropdownSelectItem:"="},link:function(a,b,c,d){a.selectItem=function(){a.dropdownSelectItem.href||d.select(a.dropdownSelectItem)}},template:"
  • \n \n {{dropdownSelectItem[dropdownItemLabel]}}\n \n
    • "}}]).directive("dropdownMenu",["$parse","$compile","$document",function(a,b,c){var d;return d="",{restrict:"A",replace:!1,scope:{dropdownMenu:"=",dropdownModel:"=",dropdownOnchange:"&"},controller:["$scope","$element","$attrs",function(a,e,f){var g,h,i,j;a.labelField=null!=f.dropdownItemLabel?f.dropdownItemLabel:"text",g=angular.element(d),g.data("$dropdownMenuController",this),j=b(g)(a),h=angular.element("
    "),e.replaceWith(h),h.append(e),h.append(j),this.select=function(b){angular.copy(b,a.dropdownModel),a.dropdownOnchange({selected:b})},i=c.find("body"),i.bind("click",function(){j.removeClass("active")}),e.bind("click",function(a){a.stopPropagation(),j.toggleClass("active")})}]}}]).directive("dropdownMenuItem",[function(){return{require:"^dropdownMenu",replace:!0,scope:{dropdownMenuItem:"=",dropdownItemLabel:"="},link:function(a,b,c,d){a.selectItem=function(){a.dropdownMenuItem.href||d.select(a.dropdownMenuItem)}},template:"
  • \n \n {{dropdownMenuItem[dropdownItemLabel]}}\n \n
    • "}}]); -------------------------------------------------------------------------------- /dist/scripts/vendor/modernizr/modernizr.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Modernizr v2.6.3 3 | * www.modernizr.com 4 | * 5 | * Copyright (c) Faruk Ates, Paul Irish, Alex Sexton 6 | * Available under the BSD and MIT licenses: www.modernizr.com/license/ 7 | */ 8 | 9 | /* 10 | * Modernizr tests which native CSS3 and HTML5 features are available in 11 | * the current UA and makes the results available to you in two ways: 12 | * as properties on a global Modernizr object, and as classes on the 13 | * element. This information allows you to progressively enhance 14 | * your pages with a granular level of control over the experience. 15 | * 16 | * Modernizr has an optional (not included) conditional resource loader 17 | * called Modernizr.load(), based on Yepnope.js (yepnopejs.com). 18 | * To get a build that includes Modernizr.load(), as well as choosing 19 | * which tests to include, go to www.modernizr.com/download/ 20 | * 21 | * Authors Faruk Ates, Paul Irish, Alex Sexton 22 | * Contributors Ryan Seddon, Ben Alman 23 | */ 24 | 25 | window.Modernizr = (function( window, document, undefined ) { 26 | 27 | var version = '2.6.3', 28 | 29 | Modernizr = {}, 30 | 31 | /*>>cssclasses*/ 32 | // option for enabling the HTML classes to be added 33 | enableClasses = true, 34 | /*>>cssclasses*/ 35 | 36 | docElement = document.documentElement, 37 | 38 | /** 39 | * Create our "modernizr" element that we do most feature tests on. 40 | */ 41 | mod = 'modernizr', 42 | modElem = document.createElement(mod), 43 | mStyle = modElem.style, 44 | 45 | /** 46 | * Create the input element for various Web Forms feature tests. 47 | */ 48 | inputElem /*>>inputelem*/ = document.createElement('input') /*>>inputelem*/ , 49 | 50 | /*>>smile*/ 51 | smile = ':)', 52 | /*>>smile*/ 53 | 54 | toString = {}.toString, 55 | 56 | // TODO :: make the prefixes more granular 57 | /*>>prefixes*/ 58 | // List of property values to set for css tests. See ticket #21 59 | prefixes = ' -webkit- -moz- -o- -ms- '.split(' '), 60 | /*>>prefixes*/ 61 | 62 | /*>>domprefixes*/ 63 | // Following spec is to expose vendor-specific style properties as: 64 | // elem.style.WebkitBorderRadius 65 | // and the following would be incorrect: 66 | // elem.style.webkitBorderRadius 67 | 68 | // Webkit ghosts their properties in lowercase but Opera & Moz do not. 69 | // Microsoft uses a lowercase `ms` instead of the correct `Ms` in IE8+ 70 | // erik.eae.net/archives/2008/03/10/21.48.10/ 71 | 72 | // More here: github.com/Modernizr/Modernizr/issues/issue/21 73 | omPrefixes = 'Webkit Moz O ms', 74 | 75 | cssomPrefixes = omPrefixes.split(' '), 76 | 77 | domPrefixes = omPrefixes.toLowerCase().split(' '), 78 | /*>>domprefixes*/ 79 | 80 | /*>>ns*/ 81 | ns = {'svg': 'http://www.w3.org/2000/svg'}, 82 | /*>>ns*/ 83 | 84 | tests = {}, 85 | inputs = {}, 86 | attrs = {}, 87 | 88 | classes = [], 89 | 90 | slice = classes.slice, 91 | 92 | featureName, // used in testing loop 93 | 94 | 95 | /*>>teststyles*/ 96 | // Inject element with style element and some CSS rules 97 | injectElementWithStyles = function( rule, callback, nodes, testnames ) { 98 | 99 | var style, ret, node, docOverflow, 100 | div = document.createElement('div'), 101 | // After page load injecting a fake body doesn't work so check if body exists 102 | body = document.body, 103 | // IE6 and 7 won't return offsetWidth or offsetHeight unless it's in the body element, so we fake it. 104 | fakeBody = body || document.createElement('body'); 105 | 106 | if ( parseInt(nodes, 10) ) { 107 | // In order not to give false positives we create a node for each test 108 | // This also allows the method to scale for unspecified uses 109 | while ( nodes-- ) { 110 | node = document.createElement('div'); 111 | node.id = testnames ? testnames[nodes] : mod + (nodes + 1); 112 | div.appendChild(node); 113 | } 114 | } 115 | 116 | // '].join(''); 122 | div.id = mod; 123 | // IE6 will false positive on some tests due to the style element inside the test div somehow interfering offsetHeight, so insert it into body or fakebody. 124 | // Opera will act all quirky when injecting elements in documentElement when page is served as xml, needs fakebody too. #270 125 | (body ? div : fakeBody).innerHTML += style; 126 | fakeBody.appendChild(div); 127 | if ( !body ) { 128 | //avoid crashing IE8, if background image is used 129 | fakeBody.style.background = ''; 130 | //Safari 5.13/5.1.4 OSX stops loading if ::-webkit-scrollbar is used and scrollbars are visible 131 | fakeBody.style.overflow = 'hidden'; 132 | docOverflow = docElement.style.overflow; 133 | docElement.style.overflow = 'hidden'; 134 | docElement.appendChild(fakeBody); 135 | } 136 | 137 | ret = callback(div, rule); 138 | // If this is done after page load we don't want to remove the body so check if body exists 139 | if ( !body ) { 140 | fakeBody.parentNode.removeChild(fakeBody); 141 | docElement.style.overflow = docOverflow; 142 | } else { 143 | div.parentNode.removeChild(div); 144 | } 145 | 146 | return !!ret; 147 | 148 | }, 149 | /*>>teststyles*/ 150 | 151 | /*>>mq*/ 152 | // adapted from matchMedia polyfill 153 | // by Scott Jehl and Paul Irish 154 | // gist.github.com/786768 155 | testMediaQuery = function( mq ) { 156 | 157 | var matchMedia = window.matchMedia || window.msMatchMedia; 158 | if ( matchMedia ) { 159 | return matchMedia(mq).matches; 160 | } 161 | 162 | var bool; 163 | 164 | injectElementWithStyles('@media ' + mq + ' { #' + mod + ' { position: absolute; } }', function( node ) { 165 | bool = (window.getComputedStyle ? 166 | getComputedStyle(node, null) : 167 | node.currentStyle)['position'] == 'absolute'; 168 | }); 169 | 170 | return bool; 171 | 172 | }, 173 | /*>>mq*/ 174 | 175 | 176 | /*>>hasevent*/ 177 | // 178 | // isEventSupported determines if a given element supports the given event 179 | // kangax.github.com/iseventsupported/ 180 | // 181 | // The following results are known incorrects: 182 | // Modernizr.hasEvent("webkitTransitionEnd", elem) // false negative 183 | // Modernizr.hasEvent("textInput") // in Webkit. github.com/Modernizr/Modernizr/issues/333 184 | // ... 185 | isEventSupported = (function() { 186 | 187 | var TAGNAMES = { 188 | 'select': 'input', 'change': 'input', 189 | 'submit': 'form', 'reset': 'form', 190 | 'error': 'img', 'load': 'img', 'abort': 'img' 191 | }; 192 | 193 | function isEventSupported( eventName, element ) { 194 | 195 | element = element || document.createElement(TAGNAMES[eventName] || 'div'); 196 | eventName = 'on' + eventName; 197 | 198 | // When using `setAttribute`, IE skips "unload", WebKit skips "unload" and "resize", whereas `in` "catches" those 199 | var isSupported = eventName in element; 200 | 201 | if ( !isSupported ) { 202 | // If it has no `setAttribute` (i.e. doesn't implement Node interface), try generic element 203 | if ( !element.setAttribute ) { 204 | element = document.createElement('div'); 205 | } 206 | if ( element.setAttribute && element.removeAttribute ) { 207 | element.setAttribute(eventName, ''); 208 | isSupported = is(element[eventName], 'function'); 209 | 210 | // If property was created, "remove it" (by setting value to `undefined`) 211 | if ( !is(element[eventName], 'undefined') ) { 212 | element[eventName] = undefined; 213 | } 214 | element.removeAttribute(eventName); 215 | } 216 | } 217 | 218 | element = null; 219 | return isSupported; 220 | } 221 | return isEventSupported; 222 | })(), 223 | /*>>hasevent*/ 224 | 225 | // TODO :: Add flag for hasownprop ? didn't last time 226 | 227 | // hasOwnProperty shim by kangax needed for Safari 2.0 support 228 | _hasOwnProperty = ({}).hasOwnProperty, hasOwnProp; 229 | 230 | if ( !is(_hasOwnProperty, 'undefined') && !is(_hasOwnProperty.call, 'undefined') ) { 231 | hasOwnProp = function (object, property) { 232 | return _hasOwnProperty.call(object, property); 233 | }; 234 | } 235 | else { 236 | hasOwnProp = function (object, property) { /* yes, this can give false positives/negatives, but most of the time we don't care about those */ 237 | return ((property in object) && is(object.constructor.prototype[property], 'undefined')); 238 | }; 239 | } 240 | 241 | // Adapted from ES5-shim https://github.com/kriskowal/es5-shim/blob/master/es5-shim.js 242 | // es5.github.com/#x15.3.4.5 243 | 244 | if (!Function.prototype.bind) { 245 | Function.prototype.bind = function bind(that) { 246 | 247 | var target = this; 248 | 249 | if (typeof target != "function") { 250 | throw new TypeError(); 251 | } 252 | 253 | var args = slice.call(arguments, 1), 254 | bound = function () { 255 | 256 | if (this instanceof bound) { 257 | 258 | var F = function(){}; 259 | F.prototype = target.prototype; 260 | var self = new F(); 261 | 262 | var result = target.apply( 263 | self, 264 | args.concat(slice.call(arguments)) 265 | ); 266 | if (Object(result) === result) { 267 | return result; 268 | } 269 | return self; 270 | 271 | } else { 272 | 273 | return target.apply( 274 | that, 275 | args.concat(slice.call(arguments)) 276 | ); 277 | 278 | } 279 | 280 | }; 281 | 282 | return bound; 283 | }; 284 | } 285 | 286 | /** 287 | * setCss applies given styles to the Modernizr DOM node. 288 | */ 289 | function setCss( str ) { 290 | mStyle.cssText = str; 291 | } 292 | 293 | /** 294 | * setCssAll extrapolates all vendor-specific css strings. 295 | */ 296 | function setCssAll( str1, str2 ) { 297 | return setCss(prefixes.join(str1 + ';') + ( str2 || '' )); 298 | } 299 | 300 | /** 301 | * is returns a boolean for if typeof obj is exactly type. 302 | */ 303 | function is( obj, type ) { 304 | return typeof obj === type; 305 | } 306 | 307 | /** 308 | * contains returns a boolean for if substr is found within str. 309 | */ 310 | function contains( str, substr ) { 311 | return !!~('' + str).indexOf(substr); 312 | } 313 | 314 | /*>>testprop*/ 315 | 316 | // testProps is a generic CSS / DOM property test. 317 | 318 | // In testing support for a given CSS property, it's legit to test: 319 | // `elem.style[styleName] !== undefined` 320 | // If the property is supported it will return an empty string, 321 | // if unsupported it will return undefined. 322 | 323 | // We'll take advantage of this quick test and skip setting a style 324 | // on our modernizr element, but instead just testing undefined vs 325 | // empty string. 326 | 327 | // Because the testing of the CSS property names (with "-", as 328 | // opposed to the camelCase DOM properties) is non-portable and 329 | // non-standard but works in WebKit and IE (but not Gecko or Opera), 330 | // we explicitly reject properties with dashes so that authors 331 | // developing in WebKit or IE first don't end up with 332 | // browser-specific content by accident. 333 | 334 | function testProps( props, prefixed ) { 335 | for ( var i in props ) { 336 | var prop = props[i]; 337 | if ( !contains(prop, "-") && mStyle[prop] !== undefined ) { 338 | return prefixed == 'pfx' ? prop : true; 339 | } 340 | } 341 | return false; 342 | } 343 | /*>>testprop*/ 344 | 345 | // TODO :: add testDOMProps 346 | /** 347 | * testDOMProps is a generic DOM property test; if a browser supports 348 | * a certain property, it won't return undefined for it. 349 | */ 350 | function testDOMProps( props, obj, elem ) { 351 | for ( var i in props ) { 352 | var item = obj[props[i]]; 353 | if ( item !== undefined) { 354 | 355 | // return the property name as a string 356 | if (elem === false) return props[i]; 357 | 358 | // let's bind a function 359 | if (is(item, 'function')){ 360 | // default to autobind unless override 361 | return item.bind(elem || obj); 362 | } 363 | 364 | // return the unbound function or obj or value 365 | return item; 366 | } 367 | } 368 | return false; 369 | } 370 | 371 | /*>>testallprops*/ 372 | /** 373 | * testPropsAll tests a list of DOM properties we want to check against. 374 | * We specify literally ALL possible (known and/or likely) properties on 375 | * the element including the non-vendor prefixed one, for forward- 376 | * compatibility. 377 | */ 378 | function testPropsAll( prop, prefixed, elem ) { 379 | 380 | var ucProp = prop.charAt(0).toUpperCase() + prop.slice(1), 381 | props = (prop + ' ' + cssomPrefixes.join(ucProp + ' ') + ucProp).split(' '); 382 | 383 | // did they call .prefixed('boxSizing') or are we just testing a prop? 384 | if(is(prefixed, "string") || is(prefixed, "undefined")) { 385 | return testProps(props, prefixed); 386 | 387 | // otherwise, they called .prefixed('requestAnimationFrame', window[, elem]) 388 | } else { 389 | props = (prop + ' ' + (domPrefixes).join(ucProp + ' ') + ucProp).split(' '); 390 | return testDOMProps(props, prefixed, elem); 391 | } 392 | } 393 | /*>>testallprops*/ 394 | 395 | 396 | /** 397 | * Tests 398 | * ----- 399 | */ 400 | 401 | // The *new* flexbox 402 | // dev.w3.org/csswg/css3-flexbox 403 | 404 | tests['flexbox'] = function() { 405 | return testPropsAll('flexWrap'); 406 | }; 407 | 408 | // The *old* flexbox 409 | // www.w3.org/TR/2009/WD-css3-flexbox-20090723/ 410 | 411 | tests['flexboxlegacy'] = function() { 412 | return testPropsAll('boxDirection'); 413 | }; 414 | 415 | // On the S60 and BB Storm, getContext exists, but always returns undefined 416 | // so we actually have to call getContext() to verify 417 | // github.com/Modernizr/Modernizr/issues/issue/97/ 418 | 419 | tests['canvas'] = function() { 420 | var elem = document.createElement('canvas'); 421 | return !!(elem.getContext && elem.getContext('2d')); 422 | }; 423 | 424 | tests['canvastext'] = function() { 425 | return !!(Modernizr['canvas'] && is(document.createElement('canvas').getContext('2d').fillText, 'function')); 426 | }; 427 | 428 | // webk.it/70117 is tracking a legit WebGL feature detect proposal 429 | 430 | // We do a soft detect which may false positive in order to avoid 431 | // an expensive context creation: bugzil.la/732441 432 | 433 | tests['webgl'] = function() { 434 | return !!window.WebGLRenderingContext; 435 | }; 436 | 437 | /* 438 | * The Modernizr.touch test only indicates if the browser supports 439 | * touch events, which does not necessarily reflect a touchscreen 440 | * device, as evidenced by tablets running Windows 7 or, alas, 441 | * the Palm Pre / WebOS (touch) phones. 442 | * 443 | * Additionally, Chrome (desktop) used to lie about its support on this, 444 | * but that has since been rectified: crbug.com/36415 445 | * 446 | * We also test for Firefox 4 Multitouch Support. 447 | * 448 | * For more info, see: modernizr.github.com/Modernizr/touch.html 449 | */ 450 | 451 | tests['touch'] = function() { 452 | var bool; 453 | 454 | if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) { 455 | bool = true; 456 | } else { 457 | injectElementWithStyles(['@media (',prefixes.join('touch-enabled),('),mod,')','{#modernizr{top:9px;position:absolute}}'].join(''), function( node ) { 458 | bool = node.offsetTop === 9; 459 | }); 460 | } 461 | 462 | return bool; 463 | }; 464 | 465 | 466 | // geolocation is often considered a trivial feature detect... 467 | // Turns out, it's quite tricky to get right: 468 | // 469 | // Using !!navigator.geolocation does two things we don't want. It: 470 | // 1. Leaks memory in IE9: github.com/Modernizr/Modernizr/issues/513 471 | // 2. Disables page caching in WebKit: webk.it/43956 472 | // 473 | // Meanwhile, in Firefox < 8, an about:config setting could expose 474 | // a false positive that would throw an exception: bugzil.la/688158 475 | 476 | tests['geolocation'] = function() { 477 | return 'geolocation' in navigator; 478 | }; 479 | 480 | 481 | tests['postmessage'] = function() { 482 | return !!window.postMessage; 483 | }; 484 | 485 | 486 | // Chrome incognito mode used to throw an exception when using openDatabase 487 | // It doesn't anymore. 488 | tests['websqldatabase'] = function() { 489 | return !!window.openDatabase; 490 | }; 491 | 492 | // Vendors had inconsistent prefixing with the experimental Indexed DB: 493 | // - Webkit's implementation is accessible through webkitIndexedDB 494 | // - Firefox shipped moz_indexedDB before FF4b9, but since then has been mozIndexedDB 495 | // For speed, we don't test the legacy (and beta-only) indexedDB 496 | tests['indexedDB'] = function() { 497 | return !!testPropsAll("indexedDB", window); 498 | }; 499 | 500 | // documentMode logic from YUI to filter out IE8 Compat Mode 501 | // which false positives. 502 | tests['hashchange'] = function() { 503 | return isEventSupported('hashchange', window) && (document.documentMode === undefined || document.documentMode > 7); 504 | }; 505 | 506 | // Per 1.6: 507 | // This used to be Modernizr.historymanagement but the longer 508 | // name has been deprecated in favor of a shorter and property-matching one. 509 | // The old API is still available in 1.6, but as of 2.0 will throw a warning, 510 | // and in the first release thereafter disappear entirely. 511 | tests['history'] = function() { 512 | return !!(window.history && history.pushState); 513 | }; 514 | 515 | tests['draganddrop'] = function() { 516 | var div = document.createElement('div'); 517 | return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div); 518 | }; 519 | 520 | // FF3.6 was EOL'ed on 4/24/12, but the ESR version of FF10 521 | // will be supported until FF19 (2/12/13), at which time, ESR becomes FF17. 522 | // FF10 still uses prefixes, so check for it until then. 523 | // for more ESR info, see: mozilla.org/en-US/firefox/organizations/faq/ 524 | tests['websockets'] = function() { 525 | return 'WebSocket' in window || 'MozWebSocket' in window; 526 | }; 527 | 528 | 529 | // css-tricks.com/rgba-browser-support/ 530 | tests['rgba'] = function() { 531 | // Set an rgba() color and check the returned value 532 | 533 | setCss('background-color:rgba(150,255,150,.5)'); 534 | 535 | return contains(mStyle.backgroundColor, 'rgba'); 536 | }; 537 | 538 | tests['hsla'] = function() { 539 | // Same as rgba(), in fact, browsers re-map hsla() to rgba() internally, 540 | // except IE9 who retains it as hsla 541 | 542 | setCss('background-color:hsla(120,40%,100%,.5)'); 543 | 544 | return contains(mStyle.backgroundColor, 'rgba') || contains(mStyle.backgroundColor, 'hsla'); 545 | }; 546 | 547 | tests['multiplebgs'] = function() { 548 | // Setting multiple images AND a color on the background shorthand property 549 | // and then querying the style.background property value for the number of 550 | // occurrences of "url(" is a reliable method for detecting ACTUAL support for this! 551 | 552 | setCss('background:url(https://),url(https://),red url(https://)'); 553 | 554 | // If the UA supports multiple backgrounds, there should be three occurrences 555 | // of the string "url(" in the return value for elemStyle.background 556 | 557 | return (/(url\s*\(.*?){3}/).test(mStyle.background); 558 | }; 559 | 560 | 561 | 562 | // this will false positive in Opera Mini 563 | // github.com/Modernizr/Modernizr/issues/396 564 | 565 | tests['backgroundsize'] = function() { 566 | return testPropsAll('backgroundSize'); 567 | }; 568 | 569 | tests['borderimage'] = function() { 570 | return testPropsAll('borderImage'); 571 | }; 572 | 573 | 574 | // Super comprehensive table about all the unique implementations of 575 | // border-radius: muddledramblings.com/table-of-css3-border-radius-compliance 576 | 577 | tests['borderradius'] = function() { 578 | return testPropsAll('borderRadius'); 579 | }; 580 | 581 | // WebOS unfortunately false positives on this test. 582 | tests['boxshadow'] = function() { 583 | return testPropsAll('boxShadow'); 584 | }; 585 | 586 | // FF3.0 will false positive on this test 587 | tests['textshadow'] = function() { 588 | return document.createElement('div').style.textShadow === ''; 589 | }; 590 | 591 | 592 | tests['opacity'] = function() { 593 | // Browsers that actually have CSS Opacity implemented have done so 594 | // according to spec, which means their return values are within the 595 | // range of [0.0,1.0] - including the leading zero. 596 | 597 | setCssAll('opacity:.55'); 598 | 599 | // The non-literal . in this regex is intentional: 600 | // German Chrome returns this value as 0,55 601 | // github.com/Modernizr/Modernizr/issues/#issue/59/comment/516632 602 | return (/^0.55$/).test(mStyle.opacity); 603 | }; 604 | 605 | 606 | // Note, Android < 4 will pass this test, but can only animate 607 | // a single property at a time 608 | // daneden.me/2011/12/putting-up-with-androids-bullshit/ 609 | tests['cssanimations'] = function() { 610 | return testPropsAll('animationName'); 611 | }; 612 | 613 | 614 | tests['csscolumns'] = function() { 615 | return testPropsAll('columnCount'); 616 | }; 617 | 618 | 619 | tests['cssgradients'] = function() { 620 | /** 621 | * For CSS Gradients syntax, please see: 622 | * webkit.org/blog/175/introducing-css-gradients/ 623 | * developer.mozilla.org/en/CSS/-moz-linear-gradient 624 | * developer.mozilla.org/en/CSS/-moz-radial-gradient 625 | * dev.w3.org/csswg/css3-images/#gradients- 626 | */ 627 | 628 | var str1 = 'background-image:', 629 | str2 = 'gradient(linear,left top,right bottom,from(#9f9),to(white));', 630 | str3 = 'linear-gradient(left top,#9f9, white);'; 631 | 632 | setCss( 633 | // legacy webkit syntax (FIXME: remove when syntax not in use anymore) 634 | (str1 + '-webkit- '.split(' ').join(str2 + str1) + 635 | // standard syntax // trailing 'background-image:' 636 | prefixes.join(str3 + str1)).slice(0, -str1.length) 637 | ); 638 | 639 | return contains(mStyle.backgroundImage, 'gradient'); 640 | }; 641 | 642 | 643 | tests['cssreflections'] = function() { 644 | return testPropsAll('boxReflect'); 645 | }; 646 | 647 | 648 | tests['csstransforms'] = function() { 649 | return !!testPropsAll('transform'); 650 | }; 651 | 652 | 653 | tests['csstransforms3d'] = function() { 654 | 655 | var ret = !!testPropsAll('perspective'); 656 | 657 | // Webkit's 3D transforms are passed off to the browser's own graphics renderer. 658 | // It works fine in Safari on Leopard and Snow Leopard, but not in Chrome in 659 | // some conditions. As a result, Webkit typically recognizes the syntax but 660 | // will sometimes throw a false positive, thus we must do a more thorough check: 661 | if ( ret && 'webkitPerspective' in docElement.style ) { 662 | 663 | // Webkit allows this media query to succeed only if the feature is enabled. 664 | // `@media (transform-3d),(-webkit-transform-3d){ ... }` 665 | injectElementWithStyles('@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}', function( node, rule ) { 666 | ret = node.offsetLeft === 9 && node.offsetHeight === 3; 667 | }); 668 | } 669 | return ret; 670 | }; 671 | 672 | 673 | tests['csstransitions'] = function() { 674 | return testPropsAll('transition'); 675 | }; 676 | 677 | 678 | /*>>fontface*/ 679 | // @font-face detection routine by Diego Perini 680 | // javascript.nwbox.com/CSSSupport/ 681 | 682 | // false positives: 683 | // WebOS github.com/Modernizr/Modernizr/issues/342 684 | // WP7 github.com/Modernizr/Modernizr/issues/538 685 | tests['fontface'] = function() { 686 | var bool; 687 | 688 | injectElementWithStyles('@font-face {font-family:"font";src:url("https://")}', function( node, rule ) { 689 | var style = document.getElementById('smodernizr'), 690 | sheet = style.sheet || style.styleSheet, 691 | cssText = sheet ? (sheet.cssRules && sheet.cssRules[0] ? sheet.cssRules[0].cssText : sheet.cssText || '') : ''; 692 | 693 | bool = /src/i.test(cssText) && cssText.indexOf(rule.split(' ')[0]) === 0; 694 | }); 695 | 696 | return bool; 697 | }; 698 | /*>>fontface*/ 699 | 700 | // CSS generated content detection 701 | tests['generatedcontent'] = function() { 702 | var bool; 703 | 704 | injectElementWithStyles(['#',mod,'{font:0/0 a}#',mod,':after{content:"',smile,'";visibility:hidden;font:3px/1 a}'].join(''), function( node ) { 705 | bool = node.offsetHeight >= 3; 706 | }); 707 | 708 | return bool; 709 | }; 710 | 711 | 712 | 713 | // These tests evaluate support of the video/audio elements, as well as 714 | // testing what types of content they support. 715 | // 716 | // We're using the Boolean constructor here, so that we can extend the value 717 | // e.g. Modernizr.video // true 718 | // Modernizr.video.ogg // 'probably' 719 | // 720 | // Codec values from : github.com/NielsLeenheer/html5test/blob/9106a8/index.html#L845 721 | // thx to NielsLeenheer and zcorpan 722 | 723 | // Note: in some older browsers, "no" was a return value instead of empty string. 724 | // It was live in FF3.5.0 and 3.5.1, but fixed in 3.5.2 725 | // It was also live in Safari 4.0.0 - 4.0.4, but fixed in 4.0.5 726 | 727 | tests['video'] = function() { 728 | var elem = document.createElement('video'), 729 | bool = false; 730 | 731 | // IE9 Running on Windows Server SKU can cause an exception to be thrown, bug #224 732 | try { 733 | if ( bool = !!elem.canPlayType ) { 734 | bool = new Boolean(bool); 735 | bool.ogg = elem.canPlayType('video/ogg; codecs="theora"') .replace(/^no$/,''); 736 | 737 | // Without QuickTime, this value will be `undefined`. github.com/Modernizr/Modernizr/issues/546 738 | bool.h264 = elem.canPlayType('video/mp4; codecs="avc1.42E01E"') .replace(/^no$/,''); 739 | 740 | bool.webm = elem.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/,''); 741 | } 742 | 743 | } catch(e) { } 744 | 745 | return bool; 746 | }; 747 | 748 | tests['audio'] = function() { 749 | var elem = document.createElement('audio'), 750 | bool = false; 751 | 752 | try { 753 | if ( bool = !!elem.canPlayType ) { 754 | bool = new Boolean(bool); 755 | bool.ogg = elem.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,''); 756 | bool.mp3 = elem.canPlayType('audio/mpeg;') .replace(/^no$/,''); 757 | 758 | // Mimetypes accepted: 759 | // developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements 760 | // bit.ly/iphoneoscodecs 761 | bool.wav = elem.canPlayType('audio/wav; codecs="1"') .replace(/^no$/,''); 762 | bool.m4a = ( elem.canPlayType('audio/x-m4a;') || 763 | elem.canPlayType('audio/aac;')) .replace(/^no$/,''); 764 | } 765 | } catch(e) { } 766 | 767 | return bool; 768 | }; 769 | 770 | 771 | // In FF4, if disabled, window.localStorage should === null. 772 | 773 | // Normally, we could not test that directly and need to do a 774 | // `('localStorage' in window) && ` test first because otherwise Firefox will 775 | // throw bugzil.la/365772 if cookies are disabled 776 | 777 | // Also in iOS5 Private Browsing mode, attempting to use localStorage.setItem 778 | // will throw the exception: 779 | // QUOTA_EXCEEDED_ERRROR DOM Exception 22. 780 | // Peculiarly, getItem and removeItem calls do not throw. 781 | 782 | // Because we are forced to try/catch this, we'll go aggressive. 783 | 784 | // Just FWIW: IE8 Compat mode supports these features completely: 785 | // www.quirksmode.org/dom/html5.html 786 | // But IE8 doesn't support either with local files 787 | 788 | tests['localstorage'] = function() { 789 | try { 790 | localStorage.setItem(mod, mod); 791 | localStorage.removeItem(mod); 792 | return true; 793 | } catch(e) { 794 | return false; 795 | } 796 | }; 797 | 798 | tests['sessionstorage'] = function() { 799 | try { 800 | sessionStorage.setItem(mod, mod); 801 | sessionStorage.removeItem(mod); 802 | return true; 803 | } catch(e) { 804 | return false; 805 | } 806 | }; 807 | 808 | 809 | tests['webworkers'] = function() { 810 | return !!window.Worker; 811 | }; 812 | 813 | 814 | tests['applicationcache'] = function() { 815 | return !!window.applicationCache; 816 | }; 817 | 818 | 819 | // Thanks to Erik Dahlstrom 820 | tests['svg'] = function() { 821 | return !!document.createElementNS && !!document.createElementNS(ns.svg, 'svg').createSVGRect; 822 | }; 823 | 824 | // specifically for SVG inline in HTML, not within XHTML 825 | // test page: paulirish.com/demo/inline-svg 826 | tests['inlinesvg'] = function() { 827 | var div = document.createElement('div'); 828 | div.innerHTML = ''; 829 | return (div.firstChild && div.firstChild.namespaceURI) == ns.svg; 830 | }; 831 | 832 | // SVG SMIL animation 833 | tests['smil'] = function() { 834 | return !!document.createElementNS && /SVGAnimate/.test(toString.call(document.createElementNS(ns.svg, 'animate'))); 835 | }; 836 | 837 | // This test is only for clip paths in SVG proper, not clip paths on HTML content 838 | // demo: srufaculty.sru.edu/david.dailey/svg/newstuff/clipPath4.svg 839 | 840 | // However read the comments to dig into applying SVG clippaths to HTML content here: 841 | // github.com/Modernizr/Modernizr/issues/213#issuecomment-1149491 842 | tests['svgclippaths'] = function() { 843 | return !!document.createElementNS && /SVGClipPath/.test(toString.call(document.createElementNS(ns.svg, 'clipPath'))); 844 | }; 845 | 846 | /*>>webforms*/ 847 | // input features and input types go directly onto the ret object, bypassing the tests loop. 848 | // Hold this guy to execute in a moment. 849 | function webforms() { 850 | /*>>input*/ 851 | // Run through HTML5's new input attributes to see if the UA understands any. 852 | // We're using f which is the element created early on 853 | // Mike Taylr has created a comprehensive resource for testing these attributes 854 | // when applied to all input types: 855 | // miketaylr.com/code/input-type-attr.html 856 | // spec: www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#input-type-attr-summary 857 | 858 | // Only input placeholder is tested while textarea's placeholder is not. 859 | // Currently Safari 4 and Opera 11 have support only for the input placeholder 860 | // Both tests are available in feature-detects/forms-placeholder.js 861 | Modernizr['input'] = (function( props ) { 862 | for ( var i = 0, len = props.length; i < len; i++ ) { 863 | attrs[ props[i] ] = !!(props[i] in inputElem); 864 | } 865 | if (attrs.list){ 866 | // safari false positive's on datalist: webk.it/74252 867 | // see also github.com/Modernizr/Modernizr/issues/146 868 | attrs.list = !!(document.createElement('datalist') && window.HTMLDataListElement); 869 | } 870 | return attrs; 871 | })('autocomplete autofocus list placeholder max min multiple pattern required step'.split(' ')); 872 | /*>>input*/ 873 | 874 | /*>>inputtypes*/ 875 | // Run through HTML5's new input types to see if the UA understands any. 876 | // This is put behind the tests runloop because it doesn't return a 877 | // true/false like all the other tests; instead, it returns an object 878 | // containing each input type with its corresponding true/false value 879 | 880 | // Big thanks to @miketaylr for the html5 forms expertise. miketaylr.com/ 881 | Modernizr['inputtypes'] = (function(props) { 882 | 883 | for ( var i = 0, bool, inputElemType, defaultView, len = props.length; i < len; i++ ) { 884 | 885 | inputElem.setAttribute('type', inputElemType = props[i]); 886 | bool = inputElem.type !== 'text'; 887 | 888 | // We first check to see if the type we give it sticks.. 889 | // If the type does, we feed it a textual value, which shouldn't be valid. 890 | // If the value doesn't stick, we know there's input sanitization which infers a custom UI 891 | if ( bool ) { 892 | 893 | inputElem.value = smile; 894 | inputElem.style.cssText = 'position:absolute;visibility:hidden;'; 895 | 896 | if ( /^range$/.test(inputElemType) && inputElem.style.WebkitAppearance !== undefined ) { 897 | 898 | docElement.appendChild(inputElem); 899 | defaultView = document.defaultView; 900 | 901 | // Safari 2-4 allows the smiley as a value, despite making a slider 902 | bool = defaultView.getComputedStyle && 903 | defaultView.getComputedStyle(inputElem, null).WebkitAppearance !== 'textfield' && 904 | // Mobile android web browser has false positive, so must 905 | // check the height to see if the widget is actually there. 906 | (inputElem.offsetHeight !== 0); 907 | 908 | docElement.removeChild(inputElem); 909 | 910 | } else if ( /^(search|tel)$/.test(inputElemType) ){ 911 | // Spec doesn't define any special parsing or detectable UI 912 | // behaviors so we pass these through as true 913 | 914 | // Interestingly, opera fails the earlier test, so it doesn't 915 | // even make it here. 916 | 917 | } else if ( /^(url|email)$/.test(inputElemType) ) { 918 | // Real url and email support comes with prebaked validation. 919 | bool = inputElem.checkValidity && inputElem.checkValidity() === false; 920 | 921 | } else { 922 | // If the upgraded input compontent rejects the :) text, we got a winner 923 | bool = inputElem.value != smile; 924 | } 925 | } 926 | 927 | inputs[ props[i] ] = !!bool; 928 | } 929 | return inputs; 930 | })('search tel url email datetime date month week time datetime-local number range color'.split(' ')); 931 | /*>>inputtypes*/ 932 | } 933 | /*>>webforms*/ 934 | 935 | 936 | // End of test definitions 937 | // ----------------------- 938 | 939 | 940 | 941 | // Run through all tests and detect their support in the current UA. 942 | // todo: hypothetically we could be doing an array of tests and use a basic loop here. 943 | for ( var feature in tests ) { 944 | if ( hasOwnProp(tests, feature) ) { 945 | // run the test, throw the return value into the Modernizr, 946 | // then based on that boolean, define an appropriate className 947 | // and push it into an array of classes we'll join later. 948 | featureName = feature.toLowerCase(); 949 | Modernizr[featureName] = tests[feature](); 950 | 951 | classes.push((Modernizr[featureName] ? '' : 'no-') + featureName); 952 | } 953 | } 954 | 955 | /*>>webforms*/ 956 | // input tests need to run. 957 | Modernizr.input || webforms(); 958 | /*>>webforms*/ 959 | 960 | 961 | /** 962 | * addTest allows the user to define their own feature tests 963 | * the result will be added onto the Modernizr object, 964 | * as well as an appropriate className set on the html element 965 | * 966 | * @param feature - String naming the feature 967 | * @param test - Function returning true if feature is supported, false if not 968 | */ 969 | Modernizr.addTest = function ( feature, test ) { 970 | if ( typeof feature == 'object' ) { 971 | for ( var key in feature ) { 972 | if ( hasOwnProp( feature, key ) ) { 973 | Modernizr.addTest( key, feature[ key ] ); 974 | } 975 | } 976 | } else { 977 | 978 | feature = feature.toLowerCase(); 979 | 980 | if ( Modernizr[feature] !== undefined ) { 981 | // we're going to quit if you're trying to overwrite an existing test 982 | // if we were to allow it, we'd do this: 983 | // var re = new RegExp("\\b(no-)?" + feature + "\\b"); 984 | // docElement.className = docElement.className.replace( re, '' ); 985 | // but, no rly, stuff 'em. 986 | return Modernizr; 987 | } 988 | 989 | test = typeof test == 'function' ? test() : test; 990 | 991 | if (typeof enableClasses !== "undefined" && enableClasses) { 992 | docElement.className += ' ' + (test ? '' : 'no-') + feature; 993 | } 994 | Modernizr[feature] = test; 995 | 996 | } 997 | 998 | return Modernizr; // allow chaining. 999 | }; 1000 | 1001 | 1002 | // Reset modElem.cssText to nothing to reduce memory footprint. 1003 | setCss(''); 1004 | modElem = inputElem = null; 1005 | 1006 | /*>>shiv*/ 1007 | /*! HTML5 Shiv v3.6.1 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed */ 1008 | ;(function(window, document) { 1009 | /*jshint evil:true */ 1010 | /** Preset options */ 1011 | var options = window.html5 || {}; 1012 | 1013 | /** Used to skip problem elements */ 1014 | var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i; 1015 | 1016 | /** Not all elements can be cloned in IE **/ 1017 | var saveClones = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i; 1018 | 1019 | /** Detect whether the browser supports default html5 styles */ 1020 | var supportsHtml5Styles; 1021 | 1022 | /** Name of the expando, to work with multiple documents or to re-shiv one document */ 1023 | var expando = '_html5shiv'; 1024 | 1025 | /** The id for the the documents expando */ 1026 | var expanID = 0; 1027 | 1028 | /** Cached data for each document */ 1029 | var expandoData = {}; 1030 | 1031 | /** Detect whether the browser supports unknown elements */ 1032 | var supportsUnknownElements; 1033 | 1034 | (function() { 1035 | try { 1036 | var a = document.createElement('a'); 1037 | a.innerHTML = ''; 1038 | //if the hidden property is implemented we can assume, that the browser supports basic HTML5 Styles 1039 | supportsHtml5Styles = ('hidden' in a); 1040 | 1041 | supportsUnknownElements = a.childNodes.length == 1 || (function() { 1042 | // assign a false positive if unable to shiv 1043 | (document.createElement)('a'); 1044 | var frag = document.createDocumentFragment(); 1045 | return ( 1046 | typeof frag.cloneNode == 'undefined' || 1047 | typeof frag.createDocumentFragment == 'undefined' || 1048 | typeof frag.createElement == 'undefined' 1049 | ); 1050 | }()); 1051 | } catch(e) { 1052 | supportsHtml5Styles = true; 1053 | supportsUnknownElements = true; 1054 | } 1055 | 1056 | }()); 1057 | 1058 | /*--------------------------------------------------------------------------*/ 1059 | 1060 | /** 1061 | * Creates a style sheet with the given CSS text and adds it to the document. 1062 | * @private 1063 | * @param {Document} ownerDocument The document. 1064 | * @param {String} cssText The CSS text. 1065 | * @returns {StyleSheet} The style element. 1066 | */ 1067 | function addStyleSheet(ownerDocument, cssText) { 1068 | var p = ownerDocument.createElement('p'), 1069 | parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement; 1070 | 1071 | p.innerHTML = 'x'; 1072 | return parent.insertBefore(p.lastChild, parent.firstChild); 1073 | } 1074 | 1075 | /** 1076 | * Returns the value of `html5.elements` as an array. 1077 | * @private 1078 | * @returns {Array} An array of shived element node names. 1079 | */ 1080 | function getElements() { 1081 | var elements = html5.elements; 1082 | return typeof elements == 'string' ? elements.split(' ') : elements; 1083 | } 1084 | 1085 | /** 1086 | * Returns the data associated to the given document 1087 | * @private 1088 | * @param {Document} ownerDocument The document. 1089 | * @returns {Object} An object of data. 1090 | */ 1091 | function getExpandoData(ownerDocument) { 1092 | var data = expandoData[ownerDocument[expando]]; 1093 | if (!data) { 1094 | data = {}; 1095 | expanID++; 1096 | ownerDocument[expando] = expanID; 1097 | expandoData[expanID] = data; 1098 | } 1099 | return data; 1100 | } 1101 | 1102 | /** 1103 | * returns a shived element for the given nodeName and document 1104 | * @memberOf html5 1105 | * @param {String} nodeName name of the element 1106 | * @param {Document} ownerDocument The context document. 1107 | * @returns {Object} The shived element. 1108 | */ 1109 | function createElement(nodeName, ownerDocument, data){ 1110 | if (!ownerDocument) { 1111 | ownerDocument = document; 1112 | } 1113 | if(supportsUnknownElements){ 1114 | return ownerDocument.createElement(nodeName); 1115 | } 1116 | if (!data) { 1117 | data = getExpandoData(ownerDocument); 1118 | } 1119 | var node; 1120 | 1121 | if (data.cache[nodeName]) { 1122 | node = data.cache[nodeName].cloneNode(); 1123 | } else if (saveClones.test(nodeName)) { 1124 | node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode(); 1125 | } else { 1126 | node = data.createElem(nodeName); 1127 | } 1128 | 1129 | // Avoid adding some elements to fragments in IE < 9 because 1130 | // * Attributes like `name` or `type` cannot be set/changed once an element 1131 | // is inserted into a document/fragment 1132 | // * Link elements with `src` attributes that are inaccessible, as with 1133 | // a 403 response, will cause the tab/window to crash 1134 | // * Script elements appended to fragments will execute when their `src` 1135 | // or `text` property is set 1136 | return node.canHaveChildren && !reSkip.test(nodeName) ? data.frag.appendChild(node) : node; 1137 | } 1138 | 1139 | /** 1140 | * returns a shived DocumentFragment for the given document 1141 | * @memberOf html5 1142 | * @param {Document} ownerDocument The context document. 1143 | * @returns {Object} The shived DocumentFragment. 1144 | */ 1145 | function createDocumentFragment(ownerDocument, data){ 1146 | if (!ownerDocument) { 1147 | ownerDocument = document; 1148 | } 1149 | if(supportsUnknownElements){ 1150 | return ownerDocument.createDocumentFragment(); 1151 | } 1152 | data = data || getExpandoData(ownerDocument); 1153 | var clone = data.frag.cloneNode(), 1154 | i = 0, 1155 | elems = getElements(), 1156 | l = elems.length; 1157 | for(;i>shiv*/ 1296 | 1297 | // Assign private properties to the return object with prefix 1298 | Modernizr._version = version; 1299 | 1300 | // expose these for the plugin API. Look in the source for how to join() them against your input 1301 | /*>>prefixes*/ 1302 | Modernizr._prefixes = prefixes; 1303 | /*>>prefixes*/ 1304 | /*>>domprefixes*/ 1305 | Modernizr._domPrefixes = domPrefixes; 1306 | Modernizr._cssomPrefixes = cssomPrefixes; 1307 | /*>>domprefixes*/ 1308 | 1309 | /*>>mq*/ 1310 | // Modernizr.mq tests a given media query, live against the current state of the window 1311 | // A few important notes: 1312 | // * If a browser does not support media queries at all (eg. oldIE) the mq() will always return false 1313 | // * A max-width or orientation query will be evaluated against the current state, which may change later. 1314 | // * You must specify values. Eg. If you are testing support for the min-width media query use: 1315 | // Modernizr.mq('(min-width:0)') 1316 | // usage: 1317 | // Modernizr.mq('only screen and (max-width:768)') 1318 | Modernizr.mq = testMediaQuery; 1319 | /*>>mq*/ 1320 | 1321 | /*>>hasevent*/ 1322 | // Modernizr.hasEvent() detects support for a given event, with an optional element to test on 1323 | // Modernizr.hasEvent('gesturestart', elem) 1324 | Modernizr.hasEvent = isEventSupported; 1325 | /*>>hasevent*/ 1326 | 1327 | /*>>testprop*/ 1328 | // Modernizr.testProp() investigates whether a given style property is recognized 1329 | // Note that the property names must be provided in the camelCase variant. 1330 | // Modernizr.testProp('pointerEvents') 1331 | Modernizr.testProp = function(prop){ 1332 | return testProps([prop]); 1333 | }; 1334 | /*>>testprop*/ 1335 | 1336 | /*>>testallprops*/ 1337 | // Modernizr.testAllProps() investigates whether a given style property, 1338 | // or any of its vendor-prefixed variants, is recognized 1339 | // Note that the property names must be provided in the camelCase variant. 1340 | // Modernizr.testAllProps('boxSizing') 1341 | Modernizr.testAllProps = testPropsAll; 1342 | /*>>testallprops*/ 1343 | 1344 | 1345 | /*>>teststyles*/ 1346 | // Modernizr.testStyles() allows you to add custom styles to the document and test an element afterwards 1347 | // Modernizr.testStyles('#modernizr { position:absolute }', function(elem, rule){ ... }) 1348 | Modernizr.testStyles = injectElementWithStyles; 1349 | /*>>teststyles*/ 1350 | 1351 | 1352 | /*>>prefixed*/ 1353 | // Modernizr.prefixed() returns the prefixed or nonprefixed property name variant of your input 1354 | // Modernizr.prefixed('boxSizing') // 'MozBoxSizing' 1355 | 1356 | // Properties must be passed as dom-style camelcase, rather than `box-sizing` hypentated style. 1357 | // Return values will also be the camelCase variant, if you need to translate that to hypenated style use: 1358 | // 1359 | // str.replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-'); 1360 | 1361 | // If you're trying to ascertain which transition end event to bind to, you might do something like... 1362 | // 1363 | // var transEndEventNames = { 1364 | // 'WebkitTransition' : 'webkitTransitionEnd', 1365 | // 'MozTransition' : 'transitionend', 1366 | // 'OTransition' : 'oTransitionEnd', 1367 | // 'msTransition' : 'MSTransitionEnd', 1368 | // 'transition' : 'transitionend' 1369 | // }, 1370 | // transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ]; 1371 | 1372 | Modernizr.prefixed = function(prop, obj, elem){ 1373 | if(!obj) { 1374 | return testPropsAll(prop, 'pfx'); 1375 | } else { 1376 | // Testing DOM property e.g. Modernizr.prefixed('requestAnimationFrame', window) // 'mozRequestAnimationFrame' 1377 | return testPropsAll(prop, obj, elem); 1378 | } 1379 | }; 1380 | /*>>prefixed*/ 1381 | 1382 | 1383 | /*>>cssclasses*/ 1384 | // Remove "no-js" class from element, if it exists: 1385 | docElement.className = docElement.className.replace(/(^|\s)no-js(\s|$)/, '$1$2') + 1386 | 1387 | // Add the new classes to the element. 1388 | (enableClasses ? ' js ' + classes.join(' ') : ''); 1389 | /*>>cssclasses*/ 1390 | 1391 | return Modernizr; 1392 | 1393 | })(this, this.document); 1394 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "strongarm", 3 | "version": "0.0.1", 4 | "dependencies": { 5 | "grunt-cli": "latest", 6 | "grunt-contrib-concat": "latest", 7 | "grunt-contrib-uglify": "latest", 8 | "grunt-contrib-sass": "latest", 9 | "grunt-contrib-watch": "latest" 10 | }, 11 | "devDependencies": { 12 | "grunt-contrib-sass": "~0.7.2", 13 | "grunt-autoprefixer": "~0.7.2", 14 | "grunt-contrib-connect": "~0.6.0", 15 | "grunt-bower-install": "~1.4.0", 16 | "grunt-bower-clean": "~0.2.1", 17 | "grunt-html-build": "~0.3.2", 18 | "grunt-bowercopy": "~1.0.0", 19 | "grunt-uncss": "~0.3.2", 20 | "grunt-jade": "~0.4.0", 21 | "grunt-svginject": "0.0.1", 22 | "grunt-wiredep": "~1.7.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | #i broke git --------------------------------------------------------------------------------