[ { "path": ".gitignore", "content": "node_modules\n.sass-cache/" }, { "path": ".hsdoc", "content": "title: \"Odometer\"\nsource: \"odometer.coffee\"\nexamples: \"**/*.md\"\nassets: \"{docs/welcome/*,odometer.js,themes/*}\"\n" }, { "path": "Gruntfile.coffee", "content": "Path = require('path')\nfs = require('fs')\n\nmodule.exports = (grunt) ->\n grunt.initConfig\n pkg: grunt.file.readJSON(\"package.json\")\n\n coffee:\n compile:\n files:\n 'odometer.js': 'odometer.coffee'\n 'docs/welcome/landing-page.js': 'docs/welcome/landing-page.coffee'\n\n watch:\n coffee:\n files: ['odometer.coffee', 'docs/welcome/landing-page.coffee', 'sass/*']\n tasks: [\"coffee\", \"uglify\", \"compass\"]\n\n uglify:\n options:\n banner: \"/*! <%= pkg.name %> <%= pkg.version %> */\\n\"\n\n dist:\n src: 'odometer.js'\n dest: 'odometer.min.js'\n\n compass:\n dist:\n options:\n sassDir: 'sass'\n cssDir: 'themes'\n\n grunt.loadNpmTasks 'grunt-contrib-watch'\n grunt.loadNpmTasks 'grunt-contrib-uglify'\n grunt.loadNpmTasks 'grunt-contrib-coffee'\n grunt.loadNpmTasks 'grunt-contrib-compass'\n\n grunt.registerTask 'default', ['coffee', 'uglify', 'compass']\n" }, { "path": "LICENSE", "content": "Copyright (c) 2013 HubSpot, Inc.\n\nPermission 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:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE 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.\n\n" }, { "path": "README.md", "content": "Odometer\n========\n\nOdometer is a Javascript and CSS library for smoothly transitioning numbers.\n\n### [Overview](http://github.hubspot.com/odometer/docs/welcome)\n### [Docs and Demo](http://github.hubspot.com/odometer)\n" }, { "path": "bower.json", "content": "{\n \"name\": \"odometer\",\n \"main\": \"odometer.js\",\n \"version\": \"0.4.8\",\n \"homepage\": \"http://github.hubspot.com/odometer/docs/welcome\",\n \"authors\": [\n \"Zack Bloom \",\n \"Adam Schwartz \"\n ],\n \"description\": \"Transition numbers with ease\",\n \"keywords\": [\n \"odometer\",\n \"car\",\n \"number\",\n \"transition\",\n \"animation\",\n \"slot\",\n \"machine\",\n \"turnstile\",\n \"javascript\",\n \"client-side\"\n ],\n \"license\": \"MIT\",\n \"ignore\": [\n \"**/.*\",\n \"node_modules\",\n \"bower_components\"\n ]\n}\n" }, { "path": "component.json", "content": "{\n \"name\": \"odometer\",\n \"version\": \"0.4.8\",\n \"repo\": \"hubspot/odometer\",\n \"description\": \"Transition numbers with ease\",\n \"keywords\": [\n \"odometer\",\n \"car\",\n \"number\",\n \"transition\",\n \"animation\",\n \"slot\",\n \"machine\",\n \"turnstile\",\n \"javascript\",\n \"client-side\"\n ],\n \"styles\": [\"themes/odometer-theme-default.css\"],\n \"scripts\": [\n \"odometer.js\"\n ]\n}\n" }, { "path": "config.rb", "content": "preferred_syntax = :sass\ncss_dir = './themes'\nsass_dir = './sass'\noutput_style = :expanded\nenvironment = :production" }, { "path": "docs/api/themes.md", "content": "## Themes\n\nTo use a builtin theme, simply include the theme style sheet:\n\n```html\n\n```\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameTheme
Default`default`
Minimal`minimal`
Car`car`
Plaza`plaza`
Slot Machine`slot-machine`
Train Station`train-station`
Digital`digital`
\n\n### Multiple Themes on One Page\n\nIf you need to use multipled Odometer themes on a single page, do the following.\n\n```javascript\nodometerOptions = { auto: false }; // Disables auto-initialization\n\n// For each odometer, initialize with the theme passed in:\nvar odometer = new Odometer({ el: $('.odometer')[0], value: 123, theme: 'car' });\nodometer.render();\n```\n\n\n

\n\n\n\n\n\n\n\n\n\n\n\n" }, { "path": "docs/intro.md", "content": "Odometer\n========\n\n\n\n\n\n\n\n\n\n

GitHub ★ s so far:
0

\n
Star odometer on GitHub to to see it update.
\n\nOdometer is a Javascript and CSS library for smoothly transitioning numbers.\nSee the [demo page](http://github.hubspot.com/odometer/docs/welcome) for some examples.\n\nOdometer's animations are handled entirely in CSS using transforms making\nthem extremely performant, with automatic fallback on older browsers.\n\nThe library and largest theme is less than 3kb when minified and compressed.\n\nAll of [the themes](http://github.hubspot.com/odometer/api/themes/) can be resized by setting the `font-size` of the `.odometer` element.\n\nUsage\n-----\n\n**The simplest possible usage is just including [the javascript](https://raw.github.com/HubSpot/odometer/v0.4.8/odometer.min.js) and a [theme css](http://github.hubspot.com/odometer/api/themes/)\nfile on your page. Add the `odometer` class to any numbers you'd like to animate on change. You're done.**\n\nJust set the `innerHTML`, `innerText`, or use jQuery's `.text()` or `.html()` methods to change their contents, and the animation\nwill happen automatically. Any libraries you're using to update their value, provided they don't update by erasing and rerendering\nthe `odometer` element, will work just fine.\n\nOn older browsers, it will automatically fallback to a simpler animation which won't tax their fragile javascript runtime.\n\nExample\n-------\n\n
123
\n\nPlay with this simple example on [jsFiddle](http://jsfiddle.net/adamschwartz/rx6BQ/).\n\nAdvanced\n--------\n\nYou can set options by creating a `odometerOptions` object:\n\n```javascript\nwindow.odometerOptions = {\n auto: false, // Don't automatically initialize everything with class 'odometer'\n selector: '.my-numbers', // Change the selector used to automatically find things to be animated\n format: '(,ddd).dd', // Change how digit groups are formatted, and how many digits are shown after the decimal point\n duration: 3000, // Change how long the javascript expects the CSS animation to take\n theme: 'car', // Specify the theme (if you have more than one theme css file on the page)\n animation: 'count' // Count is a simpler animation method which just increments the value,\n // use it when you're looking for something more subtle.\n};\n```\n\nYou can manually initialize an odometer with the global `Odometer`:\n\n```javascript\nvar el = document.querySelector('.some-element');\n\nod = new Odometer({\n el: el,\n value: 333555,\n\n // Any option (other than auto and selector) can be passed in here\n format: '',\n theme: 'digital'\n});\n\nod.update(555)\n// or\nel.innerHTML = 555\n```\n\nFormat\n------\n\nThe format option allows you to configure how the digit groups are formatted,\nand how many digits are shown after the decimal point.\n\n Format - Example\n (,ddd) - 12,345,678\n (,ddd).dd - 12,345,678.09\n (.ddd),dd - 12.345.678,09\n ( ddd),dd - 12 345 678,09\n d - 12345678\n\nBrowser Support\n---------------\n\nOdometer is intended to support IE8+, FF4+, Safari 6+, and Chrome.\n\nDependencies\n------------\n\nNone!\n\nContributing\n------------\n\nOdometer is built using Grunt. To setup the build environment you first\nmust have Node.js installed. Then:\n\n```bash\n# In the project directory\nnpm install\n```\n\nTo build the project:\n```bash\ngrunt\n```\n\nTo have it watch for changes and build automatically:\n```bash\ngrunt watch\n```\n\nWe welcome pull requests!\n" }, { "path": "docs/welcome/index.html", "content": "\n\n\n\n\n \n \n \n \n \n Odometer — Transition numbers with ease\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n
\n
\n O\n  \n L\n M\n O\n \n D\n  \n Z\n A\n B\n C\n D\n \n O\n  \n I\n J\n K\n L\n M\n O\n \n M\n  \n G\n H\n I\n J\n K\n L\n M\n \n E\n  \n Y\n Z\n A\n B\n C\n D\n E\n \n T\n  \n L\n M\n N\n O\n P\n Q\n R\n S\n T\n \n E\n  \n V\n W\n X\n Y\n Z\n A\n B\n C\n D\n E\n \n R\n  \n G\n H\n I\n J\n K\n L\n M\n O\n P\n Q\n R\n \n
\n
\n
\n Transition numbers with ease
\n Docs\n ★ On Github\n
\n
\n
\n
\n\n
\n\n
\n
\n

How To Use

\n

Add the js and a theme file to your page:

\n
<link rel=\"stylesheet\" href=\"odometer-theme-car.css\" />\n<script src=\"odometer.js\"></script>
\n

Any element with class name \"odometer\" will automatically be made into an Odometer! When you want to update the value, simply update it the same way you normally would.

\n
element.innerHTML = 123 // Native, or...\n$('.odometer').html(123) // with jQuery
\n
★ On Github
\n
\n
\n\n
\n
\n

About

\n

Odometer was made by Adam Schwartz and Zack Bloom of HubSpot.

\n
★ On Github
\n
\n
\n\n
\n
\n
\n \n

\n
\n \n
\n
\n
\n
\n\n \n \n \n \n\n \n\n \n \n\n \n \n \n\n \n\n \n
\n \n\n" }, { "path": "docs/welcome/landing-page.coffee", "content": "THEMES = [{\n name: 'minimal'\n numbers: [{\n number: 10000\n description: '= 282 + 962 = 602 + 802'\n detail: 'two sums of two squares'\n source: 'http://www.wolframalpha.com/input/?i=10000'\n }, {\n number: 99999\n description: '= 110000110100111112'\n detail: '11000011010011111 in base 2'\n source: 'http://www.wolframalpha.com/input/?i=99999'\n }]\n}, {\n name: 'car'\n odometerOptions:\n format: 'd'\n numbers: [{\n number: 13476\n description: 'miles driven'\n detail: 'by the average american each year'\n source: 'http://www.fhwa.dot.gov/ohim/onh00/bar8.htm'\n }, {\n number: 25114\n description: 'flat tires'\n detail: 'occur in america each hour'\n source: 'http://excelmathmike.blogspot.com/2011/04/phooey-on-flats-part-i.html'\n }]\n}, {\n name: 'digital'\n odometerOptions:\n format: 'd'\n numbers: [{\n number: 87360\n description: 'minutes of tv watched'\n detail: 'by the average american each year'\n source: 'http://www.nationmaster.com/graph/med_tel_vie-media-television-viewing'\n }, {\n number: 20938\n description: 'minutes snoozed'\n detail: 'by the average american each year'\n source: 'http://jsfiddle.net/adamschwartz/BWgWj/show/light/'\n }]\n}, {\n name: 'slot-machine'\n numbers: [{\n number: 818\n description: ''\n detail: ''\n source: ''\n }, {\n number: 777\n description: ''\n detail: ''\n source: ''\n }]\n}, {\n name: 'train-station'\n numbers: [{\n number: 682\n description: 'train cars'\n detail: 'on the longest train in the world'\n source: 'http://en.wikipedia.org/wiki/Longest_trains'\n }, {\n number: 853\n description: 'people'\n detail: 'capacity of the largest commercial airplane'\n source: 'http://en.wikipedia.org/wiki/Airbus_A380'\n }]\n}]\n\nanimateHeader = ->\n $('.title-number-section .odometer').addClass 'odometer-animating-up odometer-animating'\n\nsetupOnePageScroll = ->\n $ ->\n $('.main').onepage_scroll\n sectionContainer: '.section'\n\n $('.down-arrow').click -> $('.main').moveDown()\n\n $(document).keydown (e) ->\n switch e.keyCode\n when 40, 34 then $('.main').moveDown()\n when 33, 38 then $('.main').moveUp()\n\nsetupNumberSections = ->\n $afterSections = $('.after-number-sections')\n $numberSectionTemplate = $('.number-section.template')\n $numberSectionTemplateClone = $numberSectionTemplate.clone().removeClass('template')\n\n _.each THEMES, (theme) ->\n $section = $numberSectionTemplateClone.clone().addClass('number-section-theme-' + theme.name)\n\n $afterSections.before $section\n\n $odometerContainer = $section.find '.odometer-container'\n $odometerContainer.append('
')\n $odometerContainer = $odometerContainer.find('div')\n\n currentNumber = 0\n\n odometerOptions = $.extend(true, {}, theme.odometerOptions or {},\n theme: theme.name\n value: theme.numbers[1].number\n el: $odometerContainer[0]\n )\n\n odometer = new Odometer odometerOptions\n\n odometer.render()\n\n next = ->\n number = theme.numbers[currentNumber]\n odometer.update number.number\n $section.find('.number-description').html number.description\n $section.find('.number-detail').html number.detail\n $section.find('.number-source').attr 'href', number.source\n currentNumber = (currentNumber + 1) % theme.numbers.length\n\n next()\n\n setInterval ->\n next() if $section.hasClass('active')\n , 4 * 1000\n\n $afterSections.remove()\n $numberSectionTemplate.remove()\n\ninit = ->\n setupNumberSections()\n setupOnePageScroll()\n setTimeout ->\n animateHeader()\n , 500\n\ninit()\n" }, { "path": "docs/welcome/landing-page.css", "content": "/* Prism.js */\ncode[class*=\"language-\"], pre[class*=\"language-\"] {color: black; text-shadow: 0 1px white; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } pre[class*=\"language-\"]::-moz-selection, pre[class*=\"language-\"] ::-moz-selection, code[class*=\"language-\"]::-moz-selection, code[class*=\"language-\"] ::-moz-selection {text-shadow: none; background: #b3d4fc; } pre[class*=\"language-\"]::selection, pre[class*=\"language-\"] ::selection, code[class*=\"language-\"]::selection, code[class*=\"language-\"] ::selection {text-shadow: none; background: #b3d4fc; } @media print {code[class*=\"language-\"], pre[class*=\"language-\"] {text-shadow: none; } } /* Code blocks */ pre[class*=\"language-\"] {padding: 1em; margin: .5em 0; overflow: auto; font-size: .7em; } :not(pre) > code[class*=\"language-\"], pre[class*=\"language-\"] {background: #f5f2f0; } /* Inline code */ :not(pre) > code[class*=\"language-\"] {padding: .1em; border-radius: .3em; } .token.comment, .token.prolog, .token.doctype, .token.cdata {color: slategray; } .token.punctuation {color: #999; } .namespace {opacity: .7; } .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol {color: #905; } .token.selector, .token.attr-name, .token.string, .token.builtin {color: #690; } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, .token.variable {color: #a67f59; background: hsla(0,0%,100%,.5); } .token.atrule, .token.attr-value, .token.keyword {color: #07a; } .token.regex, .token.important {color: #e90; } .token.important {font-weight: bold; } .token.entity {cursor: help; }\n\nhtml, body {\n height: 100%;\n margin: 0;\n}\n\nhtml { font-size: 150%; }\n@media (max-width: 1200px) { html { font-size: 125%; } }\n@media (max-width: 1000px) { html { font-size: 100%; } }\n@media (max-width: 767px) { html { font-size: 80%; } }\n@media (max-width: 568px) { html { font-size: 50%; } }\n@media (max-width: 480px) { html { font-size: 35%; } }\n@media (max-width: 320px) { html { font-size: 25%; } }\n\nbody {\n font-family: \"proxima-nova\", \"Helvetica Neue\", sans-serif;\n}\n\n.template {\n display: none;\n}\n\n.section {\n height: 100%;\n width: 100%;\n position: relative;\n -webkit-transform: translateZ(0);\n}\n\n.number-container, .about-section {\n position: absolute;\n margin: auto;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 100%;\n height: 20em;\n text-align: center;\n -webkit-transform: translateZ(0);\n}\n\n.about-section {\n font-size: 1em;\n text-align: left;\n width: 30em;\n height: 22em;\n max-width: 80%;\n}\n\n.about-section h1 {\n margin-top: 0;\n text-align: center;\n}\n\n.about-section a {\n color: inherit;\n}\n\n.number-container .odometer-container {\n font-size: 6em;\n}\n\n.number-description {\n display: inline-block;\n text-transform: uppercase;\n font-size: 2.5em;\n letter-spacing: .08em;\n margin: 1em 0 0;\n font-weight: bold;\n}\n\n.number-detail {\n display: inline-block;\n text-transform: uppercase;\n font-size: 1.5em;\n letter-spacing: .08em;\n opacity: 0.5;\n}\n\n.title-number-section .number-container .odometer-container {\n font-size: 4em;\n}\n\n.title-number-section .number-description {\n font-size: 1.55em;\n margin: .5em 0 .25em;\n color: #666;\n}\n\n@media (max-width: 767px) {\n .title-number-section .number-container .odometer-container {\n font-size: 5em;\n }\n\n .title-number-section .number-description {\n font-size: 1.8em\n }\n}\n\n@media (max-width: 568px) {\n .title-number-section .number-container .odometer-container {\n font-size: 6em;\n }\n\n .title-number-section .number-description {\n font-size: 2.2em;\n }\n}\n\n.button {\n text-decoration: none;\n color: #000;\n font-size: 0.7em;\n padding: .3em .7em .4em;\n cursor: pointer;\n margin: 2em auto;\n border: .15em solid;\n display: inline-block;\n line-height: 1.7;\n}\n\n.dark-button {\n color: white;\n background-color: #222;\n}\n\n.number-source {\n text-decoration: none;\n color: inherit;\n}\n\n.number-source:hover .number-detail {\n border-bottom: 1px dotted;\n opacity: 0.8;\n}\n\n.number-section.number-section-theme-minimal {\n background: #eee;\n color: #444;\n}\n\n.number-section.number-section-theme-minimal .odometer.odometer-theme-minimal .odometer-digit .odometer-digit-inner {\n text-align: right;\n}\n\n.number-section.number-section-theme-digital .odometer {\n border: .1em solid rgba(139, 245, 165, 0.4);\n}\n\n.number-section.number-section-theme-digital {\n background: #000;\n color: #8bf5a5;\n}\n\n.number-section.number-section-theme-car {\n background: #eee0d3;\n color: #333;\n}\n\n.number-section.number-section-theme-train-station {\n background: #ccc;\n color: #000;\n}\n\n.number-section.number-section-theme-slot-machine {\n background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #000000), color-stop(2%, #000000), color-stop(2%, #ffa500), color-stop(50%, #ffe000), color-stop(98%, #ffa500), color-stop(98%, #000000), color-stop(100%, #000000));\n background-image: -webkit-linear-gradient(left, #000000 0%, #000000 2%, #ffa500 2%, #ffe000 50%, #ffa500 98%, #000000 98%, #000000 100%);\n background-image: -moz-linear-gradient(left, #000000 0%, #000000 2%, #ffa500 2%, #ffe000 50%, #ffa500 98%, #000000 98%, #000000 100%);\n background-image: -o-linear-gradient(left, #000000 0%, #000000 2%, #ffa500 2%, #ffe000 50%, #ffa500 98%, #000000 98%, #000000 100%);\n background-image: -ms-linear-gradient(left, #000000 0%, #000000 2%, #ffa500 2%, #ffe000 50%, #ffa500 98%, #000000 98%, #000000 100%);\n background-image: linear-gradient(left, #000000 0%, #000000 2%, #ffa500 2%, #ffe000 50%, #ffa500 98%, #000000 98%, #000000 100%);\n background-size: 31em 100%;\n background-repeat: no-repeat;\n background-position: center;\n color: #000;\n}\n\n.odometer.odometer-theme-odometer {\n line-height: 2em;\n}\n\n.odometer-theme-odometer:before {\n content: \" \";\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: .1em;\n background: #000;\n}\n\n.odometer-theme-odometer:after {\n content: \" \";\n position: absolute;\n left: 0;\n bottom: 0;\n width: 100%;\n height: .1em;\n background: #000;\n}\n\n.odometer-theme-odometer .odometer-value {\n width: 100%;\n text-align: center;\n}\n\n.down-arrow {\n position: absolute;\n cursor: pointer;\n margin: auto;\n display: block;\n left: 0;\n right: 0;\n font-size: 2em;\n bottom: 1em;\n height: 1em;\n width: 1em;\n text-align: center;\n opacity: 0.5;\n -webkit-transform: translateZ(0);\n}\n\n.down-arrow:hover {\n opacity: 1;\n}\n\n.down-arrow:before {\n content: \"\\2193\";\n display: block;\n}\n\n/* Social sharing */\n\n#retweet_button {\n position: fixed;\n bottom: 30px;\n left: 30px;\n width: 100px;\n z-index: 3;\n}\n\n#github_stars {\n position: fixed;\n bottom: 30px;\n left: 130px;\n width: 100px;\n z-index: 3;\n}\n\n.social-sharing-wrapper { -webkit-filter: grayscale(1) contrast(1.3); }\n.social-sharing-wrapper:hover { -webkit-filter: none; }\n" }, { "path": "docs/welcome/landing-page.js", "content": "(function() {\n var THEMES, animateHeader, init, setupNumberSections, setupOnePageScroll;\n\n THEMES = [\n {\n name: 'minimal',\n numbers: [\n {\n number: 10000,\n description: '= 282 + 962 = 602 + 802',\n detail: 'two sums of two squares',\n source: 'http://www.wolframalpha.com/input/?i=10000'\n }, {\n number: 99999,\n description: '= 110000110100111112',\n detail: '11000011010011111 in base 2',\n source: 'http://www.wolframalpha.com/input/?i=99999'\n }\n ]\n }, {\n name: 'car',\n odometerOptions: {\n format: 'd'\n },\n numbers: [\n {\n number: 13476,\n description: 'miles driven',\n detail: 'by the average american each year',\n source: 'http://www.fhwa.dot.gov/ohim/onh00/bar8.htm'\n }, {\n number: 25114,\n description: 'flat tires',\n detail: 'occur in america each hour',\n source: 'http://excelmathmike.blogspot.com/2011/04/phooey-on-flats-part-i.html'\n }\n ]\n }, {\n name: 'digital',\n odometerOptions: {\n format: 'd'\n },\n numbers: [\n {\n number: 87360,\n description: 'minutes of tv watched',\n detail: 'by the average american each year',\n source: 'http://www.nationmaster.com/graph/med_tel_vie-media-television-viewing'\n }, {\n number: 20938,\n description: 'minutes snoozed',\n detail: 'by the average american each year',\n source: 'http://jsfiddle.net/adamschwartz/BWgWj/show/light/'\n }\n ]\n }, {\n name: 'slot-machine',\n numbers: [\n {\n number: 818,\n description: '',\n detail: '',\n source: ''\n }, {\n number: 777,\n description: '',\n detail: '',\n source: ''\n }\n ]\n }, {\n name: 'train-station',\n numbers: [\n {\n number: 682,\n description: 'train cars',\n detail: 'on the longest train in the world',\n source: 'http://en.wikipedia.org/wiki/Longest_trains'\n }, {\n number: 853,\n description: 'people',\n detail: 'capacity of the largest commercial airplane',\n source: 'http://en.wikipedia.org/wiki/Airbus_A380'\n }\n ]\n }\n ];\n\n animateHeader = function() {\n return $('.title-number-section .odometer').addClass('odometer-animating-up odometer-animating');\n };\n\n setupOnePageScroll = function() {\n return $(function() {\n $('.main').onepage_scroll({\n sectionContainer: '.section'\n });\n $('.down-arrow').click(function() {\n return $('.main').moveDown();\n });\n return $(document).keydown(function(e) {\n switch (e.keyCode) {\n case 40:\n case 34:\n return $('.main').moveDown();\n case 33:\n case 38:\n return $('.main').moveUp();\n }\n });\n });\n };\n\n setupNumberSections = function() {\n var $afterSections, $numberSectionTemplate, $numberSectionTemplateClone;\n $afterSections = $('.after-number-sections');\n $numberSectionTemplate = $('.number-section.template');\n $numberSectionTemplateClone = $numberSectionTemplate.clone().removeClass('template');\n _.each(THEMES, function(theme) {\n var $odometerContainer, $section, currentNumber, next, odometer, odometerOptions;\n $section = $numberSectionTemplateClone.clone().addClass('number-section-theme-' + theme.name);\n $afterSections.before($section);\n $odometerContainer = $section.find('.odometer-container');\n $odometerContainer.append('
');\n $odometerContainer = $odometerContainer.find('div');\n currentNumber = 0;\n odometerOptions = $.extend(true, {}, theme.odometerOptions || {}, {\n theme: theme.name,\n value: theme.numbers[1].number,\n el: $odometerContainer[0]\n });\n odometer = new Odometer(odometerOptions);\n odometer.render();\n next = function() {\n var number;\n number = theme.numbers[currentNumber];\n odometer.update(number.number);\n $section.find('.number-description').html(number.description);\n $section.find('.number-detail').html(number.detail);\n $section.find('.number-source').attr('href', number.source);\n return currentNumber = (currentNumber + 1) % theme.numbers.length;\n };\n next();\n return setInterval(function() {\n if ($section.hasClass('active')) {\n return next();\n }\n }, 4 * 1000);\n });\n $afterSections.remove();\n return $numberSectionTemplate.remove();\n };\n\n init = function() {\n setupNumberSections();\n setupOnePageScroll();\n return setTimeout(function() {\n return animateHeader();\n }, 500);\n };\n\n init();\n\n}).call(this);\n" }, { "path": "docs/welcome/onepage-scroll.css", "content": "body, html {\n margin: 0;\n overflow: hidden;\n -webkit-transition: opacity 400ms;\n -moz-transition: opacity 400ms;\n transition: opacity 400ms;\n}\n\nbody, .onepage-wrapper, html {\n display: block;\n position: static;\n padding: 0;\n width: 100%;\n height: 100%;\n}\n\n.main {\n height: 100%;\n}\n\n.onepage-wrapper {\n width: 100%;\n height: 100%;\n display: block;\n position: relative;\n padding: 0;\n -webkit-transform-style: preserve-3d;\n}\n\n.onepage-wrapper .section {\n width: 100%;\n height: 100%;\n}\n\n.onepage-pagination {\n position: absolute;\n margin: auto;\n right: 10px;\n left: auto;\n top: 0;\n bottom: 0;\n height: 190px;\n z-index: 5;\n list-style: none;\n padding: 0;\n}\n\n.onepage-pagination li {\n padding: 0;\n text-align: center;\n}\n\n.onepage-pagination li a{\n padding: 10px;\n width: 4px;\n height: 4px;\n display: block;\n\n}\n.onepage-pagination li a:before{\n content: '';\n position: absolute;\n width: 4px;\n height: 4px;\n background: rgba(0,0,0,0.85);\n border-radius: 10px;\n -webkit-border-radius: 10px;\n -moz-border-radius: 10px;\n}\n\n.onepage-pagination li a.active:before{\n width: 10px;\n height: 10px;\n background: none;\n border: 1px solid black;\n margin-top: -4px;\n left: 8px;\n}\n\nbody.viewing-page-2 .onepage-pagination li a:before { background-color: #444; }\nbody.viewing-page-2 .onepage-pagination li a.active:before { border-color: #444; background: none; }\n\nbody.viewing-page-3 .onepage-pagination li a:before { background-color: #333; }\nbody.viewing-page-3 .onepage-pagination li a.active:before { border-color: #333; background: none; }\nbody.viewing-page-3 .social-sharing-wrapper { -webkit-filter: grayscale(1) sepia(1) hue-rotate(-47deg); }\nbody.viewing-page-3 .social-sharing-wrapper:hover { -webkit-filter: none; }\n\nbody.viewing-page-4 .onepage-pagination li a:before { background-color: #8bf5a5; }\nbody.viewing-page-4 .onepage-pagination li a.active:before { border-color: #8bf5a5; background: none; }\nbody.viewing-page-4 .social-sharing-wrapper { -webkit-filter: grayscale(1) contrast(1.3) invert(1); }\nbody.viewing-page-4 .social-sharing-wrapper:hover { -webkit-filter: none; }" }, { "path": "docs/welcome/onepage-scroll.js", "content": "/* ===========================================================\n * jquery-onepage-scroll.js v1\n * ===========================================================\n * Copyright 2013 Pete Rojwongsuriya.\n * http://www.thepetedesign.com\n *\n * Create an Apple-like website that let user scroll\n * one page at a time\n *\n * Credit: Eike Send for the awesome swipe event\n * https://github.com/peachananr/onepage-scroll\n *\n * ========================================================== */\n\n!function($){\n\n var defaults = {\n sectionContainer: \"section\",\n easing: \"ease\",\n animationTime: 1000,\n pagination: true,\n updateURL: false\n };\n\n /*------------------------------------------------*/\n /* Credit: Eike Send for the awesome swipe event */\n /*------------------------------------------------*/\n\n $.fn.swipeEvents = function() {\n return this.each(function() {\n\n var startX,\n startY,\n $this = $(this);\n\n $this.bind('touchstart', touchstart);\n\n function touchstart(event) {\n var touches = event.originalEvent.touches;\n if (touches && touches.length) {\n startX = touches[0].pageX;\n startY = touches[0].pageY;\n $this.bind('touchmove', touchmove);\n }\n event.preventDefault();\n }\n\n function touchmove(event) {\n var touches = event.originalEvent.touches;\n if (touches && touches.length) {\n var deltaX = startX - touches[0].pageX;\n var deltaY = startY - touches[0].pageY;\n\n if (deltaX >= 50) {\n $this.trigger(\"swipeLeft\");\n }\n if (deltaX <= -50) {\n $this.trigger(\"swipeRight\");\n }\n if (deltaY >= 50) {\n $this.trigger(\"swipeUp\");\n }\n if (deltaY <= -50) {\n $this.trigger(\"swipeDown\");\n }\n if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) {\n $this.unbind('touchmove', touchmove);\n }\n }\n event.preventDefault();\n }\n\n });\n };\n\n\n $.fn.onepage_scroll = function(options){\n var settings = $.extend({}, defaults, options),\n el = $(this),\n sections = $(settings.sectionContainer),\n total = sections.length,\n status = \"off\",\n topPos = 0,\n lastAnimation = 0,\n quietPeriod = 500,\n paginationList = \"\";\n\n $.fn.transformPage = function(settings, pos) {\n $(this).css({\n \"-webkit-transform\": \"translate3d(0, \" + pos + \"%, 0)\",\n \"-webkit-transition\": \"all \" + settings.animationTime + \"ms \" + settings.easing,\n \"-moz-transform\": \"translate3d(0, \" + pos + \"%, 0)\",\n \"-moz-transition\": \"all \" + settings.animationTime + \"ms \" + settings.easing,\n \"-ms-transform\": \"translate3d(0, \" + pos + \"%, 0)\",\n \"-ms-transition\": \"all \" + settings.animationTime + \"ms \" + settings.easing,\n \"transform\": \"translate3d(0, \" + pos + \"%, 0)\",\n \"transition\": \"all \" + settings.animationTime + \"ms \" + settings.easing\n });\n };\n\n $.fn.moveDown = function() {\n var el = $(this);\n index = $(settings.sectionContainer +\".active\").data(\"index\");\n if(index < total) {\n current = $(settings.sectionContainer + \"[data-index='\" + index + \"']\");\n next = $(settings.sectionContainer + \"[data-index='\" + (index + 1) + \"']\");\n if(next) {\n current.removeClass(\"active\");\n next.addClass(\"active\");\n if(settings.pagination === true) {\n $(\".onepage-pagination li a\" + \"[data-index='\" + index + \"']\").removeClass(\"active\");\n $(\".onepage-pagination li a\" + \"[data-index='\" + (index + 1) + \"']\").addClass(\"active\");\n }\n $(\"body\")[0].className = $(\"body\")[0].className.replace(/\\bviewing-page-\\d.*?\\b/g, '');\n $(\"body\").addClass(\"viewing-page-\"+next.data(\"index\"));\n\n if (history.replaceState && settings.updateURL === true) {\n var href = window.location.href.substr(0,window.location.href.indexOf('#')) + \"#\" + (index + 1);\n history.pushState( {}, document.title, href );\n }\n }\n pos = (index * 100) * -1;\n el.transformPage(settings, pos);\n }\n };\n\n $.fn.moveUp = function() {\n var el = $(this);\n index = $(settings.sectionContainer +\".active\").data(\"index\");\n if(index <= total && index > 1) {\n current = $(settings.sectionContainer + \"[data-index='\" + index + \"']\");\n next = $(settings.sectionContainer + \"[data-index='\" + (index - 1) + \"']\");\n\n if(next) {\n current.removeClass(\"active\");\n next.addClass(\"active\");\n if(settings.pagination === true) {\n $(\".onepage-pagination li a\" + \"[data-index='\" + index + \"']\").removeClass(\"active\");\n $(\".onepage-pagination li a\" + \"[data-index='\" + (index - 1) + \"']\").addClass(\"active\");\n }\n $(\"body\")[0].className = $(\"body\")[0].className.replace(/\\bviewing-page-\\d.*?\\b/g, '');\n $(\"body\").addClass(\"viewing-page-\"+next.data(\"index\"));\n\n if (history.replaceState && settings.updateURL === true) {\n var href = window.location.href.substr(0,window.location.href.indexOf('#')) + \"#\" + (index - 1);\n history.pushState( {}, document.title, href );\n }\n }\n pos = ((next.data(\"index\") - 1) * 100) * -1;\n el.transformPage(settings, pos);\n }\n };\n\n function init_scroll(event, delta) {\n deltaOfInterest = delta;\n var timeNow = new Date().getTime();\n // Cancel scroll if currently animating or within quiet period\n if(timeNow - lastAnimation < quietPeriod + settings.animationTime) {\n event.preventDefault();\n return;\n }\n\n if (deltaOfInterest < 0) {\n el.moveDown();\n } else {\n el.moveUp();\n }\n lastAnimation = timeNow;\n }\n\n // Prepare everything before binding wheel scroll\n\n el.addClass(\"onepage-wrapper\").css(\"position\",\"relative\");\n $.each( sections, function(i) {\n $(this).css({\n position: \"absolute\",\n top: topPos + \"%\"\n }).addClass(\"section\").attr(\"data-index\", i+1);\n topPos = topPos + 100;\n if(settings.pagination === true) {\n paginationList += \"
    • \";\n }\n });\n\n el.swipeEvents().bind(\"swipeDown\", function(){\n el.moveUp();\n }).bind(\"swipeUp\", function(){\n el.moveDown();\n });\n\n // Create Pagination and Display Them\n if(settings.pagination === true) {\n $(\"
      \" + paginationList + \"
    \").prependTo(\"body\");\n posTop = (el.find(\".onepage-pagination\").height() / 2) * -1;\n el.find(\".onepage-pagination\").css(\"margin-top\", posTop);\n }\n\n if(window.location.hash !== \"\" && window.location.hash !== \"#1\") {\n init_index = window.location.hash.replace(\"#\", \"\");\n $(settings.sectionContainer + \"[data-index='\" + init_index + \"']\").addClass(\"active\");\n $(\"body\").addClass(\"viewing-page-\"+ init_index);\n if(settings.pagination === true) $(\".onepage-pagination li a\" + \"[data-index='\" + init_index + \"']\").addClass(\"active\");\n\n next = $(settings.sectionContainer + \"[data-index='\" + (init_index) + \"']\");\n if(next) {\n next.addClass(\"active\");\n if(settings.pagination === true) $(\".onepage-pagination li a\" + \"[data-index='\" + (init_index) + \"']\").addClass(\"active\");\n $(\"body\")[0].className = $(\"body\")[0].className.replace(/\\bviewing-page-\\d.*?\\b/g, '');\n $(\"body\").addClass(\"viewing-page-\"+next.data(\"index\"));\n if (history.replaceState && settings.updateURL === true) {\n var href = window.location.href.substr(0,window.location.href.indexOf('#')) + \"#\" + (init_index);\n history.pushState( {}, document.title, href );\n }\n }\n pos = ((init_index - 1) * 100) * -1;\n el.transformPage(settings, pos);\n\n }else{\n $(settings.sectionContainer + \"[data-index='1']\").addClass(\"active\");\n $(\"body\").addClass(\"viewing-page-1\");\n if(settings.pagination === true) $(\".onepage-pagination li a\" + \"[data-index='1']\").addClass(\"active\");\n }\n if(settings.pagination === true) {\n $(\".onepage-pagination li a\").click(function (){\n var page_index = $(this).data(\"index\");\n if (!$(this).hasClass(\"active\")) {\n current = $(settings.sectionContainer + \".active\");\n next = $(settings.sectionContainer + \"[data-index='\" + (page_index) + \"']\");\n if(next) {\n current.removeClass(\"active\");\n next.addClass(\"active\");\n $(\".onepage-pagination li a\" + \".active\").removeClass(\"active\");\n $(\".onepage-pagination li a\" + \"[data-index='\" + (page_index) + \"']\").addClass(\"active\");\n $(\"body\")[0].className = $(\"body\")[0].className.replace(/\\bviewing-page-\\d.*?\\b/g, '');\n $(\"body\").addClass(\"viewing-page-\"+next.data(\"index\"));\n }\n pos = ((page_index - 1) * 100) * -1;\n el.transformPage(settings, pos);\n }\n if (settings.updateURL === false) return false;\n });\n }\n\n\n\n $(document).bind('mousewheel DOMMouseScroll', function(event) {\n event.preventDefault();\n var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;\n init_scroll(event, delta);\n });\n return false;\n\n };\n\n}(window.jQuery);" }, { "path": "odometer.coffee", "content": "VALUE_HTML = ''\nRIBBON_HTML = '' + VALUE_HTML + ''\nDIGIT_HTML = '8' + RIBBON_HTML + ''\nFORMAT_MARK_HTML = ''\n\n# The bit within the parenthesis will be repeated, so (,ddd) becomes 123,456,789....\n#\n# If your locale uses spaces to seperate digits, you could consider using a\n# Narrow No-Break Space ( ), as it's a bit more correct.\n#\n# Numbers will be rounded to the number of digits after the radix seperator.\n#\n# When values are set using `.update` or the `.innerHTML`-type attributes,\n# strings are assumed to already be in the locale's format.\n#\n# This is just the default, it can also be set as options.format.\nDIGIT_FORMAT = '(,ddd).dd'\n\nFORMAT_PARSER = /^\\(?([^)]*)\\)?(?:(.)(d+))?$/\n\n# What is our target framerate?\nFRAMERATE = 30\n\n# How long will the animation last?\nDURATION = 2000\n\n# What is the fastest we should update values when we are\n# counting up (not using the wheel animation).\nCOUNT_FRAMERATE = 20\n\n# What is the minimum number of frames for each value on the wheel?\n# We won't render more values than could be reasonably seen\nFRAMES_PER_VALUE = 2\n\n# If more than one digit is hitting the frame limit, they would all get\n# capped at that limit and appear to be moving at the same rate. This\n# factor adds a boost to subsequent digits to make them appear faster.\nDIGIT_SPEEDBOOST = .5\n\nMS_PER_FRAME = 1000 / FRAMERATE\nCOUNT_MS_PER_FRAME = 1000 / COUNT_FRAMERATE\n\nTRANSITION_END_EVENTS = 'transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd'\n\ntransitionCheckStyles = document.createElement('div').style\nTRANSITION_SUPPORT = transitionCheckStyles.transition? or transitionCheckStyles.webkitTransition? or\n transitionCheckStyles.mozTransition? or transitionCheckStyles.oTransition?\n\nrequestAnimationFrame = window.requestAnimationFrame or window.mozRequestAnimationFrame or\n window.webkitRequestAnimationFrame or window.msRequestAnimationFrame\n\nMutationObserver = window.MutationObserver or window.WebKitMutationObserver or window.MozMutationObserver\n\ncreateFromHTML = (html) ->\n el = document.createElement('div')\n el.innerHTML = html\n el.children[0]\n\nremoveClass = (el, name) ->\n el.className = el.className.replace new RegExp(\"(^| )#{ name.split(' ').join('|') }( |$)\", 'gi'), ' '\n\naddClass = (el, name) ->\n removeClass el, name\n el.className += \" #{ name }\"\n\ntrigger = (el, name) ->\n # Custom DOM events are not supported in IE8\n if document.createEvent?\n evt = document.createEvent('HTMLEvents')\n evt.initEvent(name, true, true)\n el.dispatchEvent(evt)\n\nnow = ->\n window.performance?.now?() ? +new Date\n\nround = (val, precision=0) ->\n return Math.round(val) unless precision\n\n val *= Math.pow(10, precision)\n val += 0.5\n val = Math.floor(val)\n val /= Math.pow(10, precision)\n\ntruncate = (val) ->\n # | 0 fails on numbers greater than 2^32\n if val < 0\n Math.ceil(val)\n else\n Math.floor(val)\n\nfractionalPart = (val) ->\n val - round(val)\n\n_jQueryWrapped = false\ndo wrapJQuery = ->\n return if _jQueryWrapped\n\n if window.jQuery?\n _jQueryWrapped = true\n # We need to wrap jQuery's .html and .text because they don't always\n # call .innerHTML/.innerText\n for property in ['html', 'text']\n do (property) ->\n old = window.jQuery.fn[property]\n window.jQuery.fn[property] = (val) ->\n if not val? or not this[0]?.odometer?\n return old.apply this, arguments\n\n this[0].odometer.update val\n\n# In case jQuery is brought in after this file\nsetTimeout wrapJQuery, 0\n\nclass Odometer\n constructor: (@options) ->\n @el = @options.el\n return @el.odometer if @el.odometer?\n\n @el.odometer = @\n\n for k, v of Odometer.options\n if not @options[k]?\n @options[k] = v\n\n @options.duration ?= DURATION\n @MAX_VALUES = ((@options.duration / MS_PER_FRAME) / FRAMES_PER_VALUE) | 0\n\n @resetFormat()\n\n @value = @cleanValue(@options.value ? '')\n\n @renderInside()\n @render()\n\n try\n for property in ['innerHTML', 'innerText', 'textContent'] when @el[property]?\n do (property) =>\n Object.defineProperty @el, property,\n get: =>\n if property is 'innerHTML'\n @inside.outerHTML\n else\n # It's just a single HTML element, so innerText is the\n # same as outerText.\n @inside.innerText ? @inside.textContent\n set: (val) =>\n @update val\n catch e\n # Safari\n @watchForMutations()\n\n @\n\n renderInside: ->\n @inside = document.createElement 'div'\n @inside.className = 'odometer-inside'\n @el.innerHTML = ''\n @el.appendChild @inside\n\n watchForMutations: ->\n # Safari doesn't allow us to wrap .innerHTML, so we listen for it\n # changing.\n return unless MutationObserver?\n\n try\n @observer ?= new MutationObserver (mutations) =>\n newVal = @el.innerText\n\n @renderInside()\n @render @value\n @update newVal\n\n @watchMutations = true\n @startWatchingMutations()\n catch e\n\n startWatchingMutations: ->\n if @watchMutations\n @observer.observe @el, {childList: true}\n\n stopWatchingMutations: ->\n @observer?.disconnect()\n\n cleanValue: (val) ->\n if typeof val is 'string'\n # We need to normalize the format so we can properly turn it into\n # a float.\n val = val.replace((@format.radix ? '.'), '')\n val = val.replace /[.,]/g, ''\n val = val.replace '', '.'\n val = parseFloat(val, 10) or 0\n\n round(val, @format.precision)\n\n bindTransitionEnd: ->\n return if @transitionEndBound\n @transitionEndBound = true\n\n # The event will be triggered once for each ribbon, we only\n # want one render though\n renderEnqueued = false\n for event in TRANSITION_END_EVENTS.split(' ')\n @el.addEventListener event, =>\n return true if renderEnqueued\n\n renderEnqueued = true\n\n setTimeout =>\n @render()\n renderEnqueued = false\n\n trigger @el, 'odometerdone'\n , 0\n\n true\n , false\n\n resetFormat: ->\n format = @options.format ? DIGIT_FORMAT\n format or= 'd'\n\n parsed = FORMAT_PARSER.exec format\n if not parsed\n throw new Error \"Odometer: Unparsable digit format\"\n\n [repeating, radix, fractional] = parsed[1..3]\n\n precision = fractional?.length or 0\n\n @format = {repeating, radix, precision}\n\n render: (value=@value) ->\n @stopWatchingMutations()\n @resetFormat()\n\n @inside.innerHTML = ''\n\n theme = @options.theme\n\n classes = @el.className.split(' ')\n newClasses = []\n for cls in classes when cls.length\n if match = /^odometer-theme-(.+)$/.exec(cls)\n theme = match[1]\n continue\n\n if /^odometer(-|$)/.test(cls)\n continue\n\n newClasses.push cls\n\n newClasses.push 'odometer'\n\n unless TRANSITION_SUPPORT\n newClasses.push 'odometer-no-transitions'\n\n if theme\n newClasses.push \"odometer-theme-#{ theme }\"\n else\n # This class matches all themes, so it should do what you'd expect if only one\n # theme css file is brought into the page.\n newClasses.push \"odometer-auto-theme\"\n\n @el.className = newClasses.join(' ')\n\n @ribbons = {}\n\n @formatDigits(value)\n\n @startWatchingMutations()\n\n formatDigits: (value) ->\n @digits = []\n\n if @options.formatFunction\n valueString = @options.formatFunction(value)\n for valueDigit in valueString.split('').reverse()\n if valueDigit.match(/0-9/)\n digit = @renderDigit()\n digit.querySelector('.odometer-value').innerHTML = valueDigit\n @digits.push digit\n @insertDigit digit\n else\n @addSpacer valueDigit\n else\n wholePart = not @format.precision or not fractionalPart(value) or false\n for digit in value.toString().split('').reverse()\n if digit is '.'\n wholePart = true\n\n @addDigit digit, wholePart\n\n return\n\n update: (newValue) ->\n newValue = @cleanValue newValue\n\n return unless diff = newValue - @value\n\n removeClass @el, 'odometer-animating-up odometer-animating-down odometer-animating'\n if diff > 0\n addClass @el, 'odometer-animating-up'\n else\n addClass @el, 'odometer-animating-down'\n\n @stopWatchingMutations()\n @animate newValue\n @startWatchingMutations()\n\n setTimeout =>\n # Force a repaint\n @el.offsetHeight\n\n addClass @el, 'odometer-animating'\n , 0\n\n @value = newValue\n\n renderDigit: ->\n createFromHTML DIGIT_HTML\n\n insertDigit: (digit, before) ->\n if before?\n @inside.insertBefore digit, before\n else if not @inside.children.length\n @inside.appendChild digit\n else\n @inside.insertBefore digit, @inside.children[0]\n\n addSpacer: (chr, before, extraClasses) ->\n spacer = createFromHTML FORMAT_MARK_HTML\n spacer.innerHTML = chr\n addClass(spacer, extraClasses) if extraClasses\n @insertDigit spacer, before\n\n addDigit: (value, repeating=true) ->\n if value is '-'\n return @addSpacer value, null, 'odometer-negation-mark'\n\n if value is '.'\n return @addSpacer (@format.radix ? '.'), null, 'odometer-radix-mark'\n\n if repeating\n resetted = false\n while true\n if not @format.repeating.length\n if resetted\n throw new Error \"Bad odometer format without digits\"\n\n @resetFormat()\n resetted = true\n\n chr = @format.repeating[@format.repeating.length - 1]\n @format.repeating = @format.repeating.substring(0, @format.repeating.length - 1)\n\n break if chr is 'd'\n\n @addSpacer chr\n\n digit = @renderDigit()\n digit.querySelector('.odometer-value').innerHTML = value\n @digits.push digit\n\n @insertDigit digit\n\n animate: (newValue) ->\n if not TRANSITION_SUPPORT or @options.animation is 'count'\n @animateCount newValue\n else\n @animateSlide newValue\n\n animateCount: (newValue) ->\n return unless diff = +newValue - @value\n\n start = last = now()\n\n cur = @value\n do tick = =>\n if (now() - start) > @options.duration\n @value = newValue\n @render()\n trigger @el, 'odometerdone'\n return\n\n delta = now() - last\n\n if delta > COUNT_MS_PER_FRAME\n last = now()\n\n fraction = delta / @options.duration\n dist = diff * fraction\n\n cur += dist\n @render Math.round cur\n\n if requestAnimationFrame?\n requestAnimationFrame tick\n else\n setTimeout tick, COUNT_MS_PER_FRAME\n\n getDigitCount: (values...) ->\n for value, i in values\n values[i] = Math.abs(value)\n\n max = Math.max values...\n\n Math.ceil(Math.log(max + 1) / Math.log(10))\n\n getFractionalDigitCount: (values...) ->\n # This assumes the value has already been rounded to\n # @format.precision places\n #\n parser = /^\\-?\\d*\\.(\\d*?)0*$/\n for value, i in values\n values[i] = value.toString()\n\n parts = parser.exec values[i]\n\n if not parts?\n values[i] = 0\n else\n values[i] = parts[1].length\n\n Math.max values...\n\n resetDigits: ->\n @digits = []\n @ribbons = []\n @inside.innerHTML = ''\n @resetFormat()\n\n animateSlide: (newValue) ->\n oldValue = @value\n\n fractionalCount = @getFractionalDigitCount oldValue, newValue\n\n if fractionalCount\n newValue = newValue * Math.pow(10, fractionalCount)\n oldValue = oldValue * Math.pow(10, fractionalCount)\n\n return unless diff = newValue - oldValue\n\n @bindTransitionEnd()\n\n digitCount = @getDigitCount(oldValue, newValue)\n\n digits = []\n boosted = 0\n # We create a array to represent the series of digits which should be\n # animated in each column\n for i in [0...digitCount]\n start = truncate(oldValue / Math.pow(10, (digitCount - i - 1)))\n end = truncate(newValue / Math.pow(10, (digitCount - i - 1)))\n\n dist = end - start\n\n if Math.abs(dist) > @MAX_VALUES\n # We need to subsample\n frames = []\n\n # Subsequent digits need to be faster than previous ones\n incr = dist / (@MAX_VALUES + @MAX_VALUES * boosted * DIGIT_SPEEDBOOST)\n cur = start\n\n while (dist > 0 and cur < end) or (dist < 0 and cur > end)\n frames.push Math.round cur\n cur += incr\n\n if frames[frames.length - 1] isnt end\n frames.push end\n\n boosted++\n else\n frames = [start..end]\n\n # We only care about the last digit\n for frame, i in frames\n frames[i] = Math.abs(frame % 10)\n\n digits.push frames\n\n @resetDigits()\n\n for frames, i in digits.reverse()\n if not @digits[i]\n @addDigit ' ', (i >= fractionalCount)\n\n @ribbons[i] ?= @digits[i].querySelector('.odometer-ribbon-inner')\n @ribbons[i].innerHTML = ''\n\n if diff < 0\n frames = frames.reverse()\n\n for frame, j in frames\n numEl = document.createElement('div')\n numEl.className = 'odometer-value'\n numEl.innerHTML = frame\n\n @ribbons[i].appendChild numEl\n\n if j == frames.length - 1\n addClass numEl, 'odometer-last-value'\n if j == 0\n addClass numEl, 'odometer-first-value'\n\n if start < 0\n @addDigit '-'\n\n mark = @inside.querySelector('.odometer-radix-mark')\n mark.parent.removeChild(mark) if mark?\n\n if fractionalCount\n @addSpacer @format.radix, @digits[fractionalCount - 1], 'odometer-radix-mark'\n\nOdometer.options = window.odometerOptions ? {}\n\nsetTimeout ->\n # We do this in a seperate pass to allow people to set\n # window.odometerOptions after bringing the file in.\n if window.odometerOptions\n for k, v of window.odometerOptions\n Odometer.options[k] ?= v\n, 0\n\nOdometer.init = ->\n if not document.querySelectorAll?\n # IE 7 or 8 in Quirksmode\n return\n\n elements = document.querySelectorAll (Odometer.options.selector or '.odometer')\n\n for el in elements\n el.odometer = new Odometer {el, value: (el.innerText ? el.textContent)}\n\nif document.documentElement?.doScroll? and document.createEventObject?\n # IE < 9\n _old = document.onreadystatechange\n document.onreadystatechange = ->\n if document.readyState is 'complete' and Odometer.options.auto isnt false\n Odometer.init()\n\n _old?.apply this, arguments\nelse\n document.addEventListener 'DOMContentLoaded', ->\n if Odometer.options.auto isnt false\n Odometer.init()\n , false\n\n\nif typeof define is 'function' and define.amd\n # AMD. Register as an anonymous module.\n define [], ->\n Odometer\nelse if exports?\n # CommonJS\n module.exports = Odometer\nelse\n # Browser globals\n window.Odometer = Odometer\n" }, { "path": "odometer.js", "content": "(function() {\n var COUNT_FRAMERATE, COUNT_MS_PER_FRAME, DIGIT_FORMAT, DIGIT_HTML, DIGIT_SPEEDBOOST, DURATION, FORMAT_MARK_HTML, FORMAT_PARSER, FRAMERATE, FRAMES_PER_VALUE, MS_PER_FRAME, MutationObserver, Odometer, RIBBON_HTML, TRANSITION_END_EVENTS, TRANSITION_SUPPORT, VALUE_HTML, addClass, createFromHTML, fractionalPart, now, removeClass, requestAnimationFrame, round, transitionCheckStyles, trigger, truncate, wrapJQuery, _jQueryWrapped, _old, _ref, _ref1,\n __slice = [].slice;\n\n VALUE_HTML = '';\n\n RIBBON_HTML = '' + VALUE_HTML + '';\n\n DIGIT_HTML = '8' + RIBBON_HTML + '';\n\n FORMAT_MARK_HTML = '';\n\n DIGIT_FORMAT = '(,ddd).dd';\n\n FORMAT_PARSER = /^\\(?([^)]*)\\)?(?:(.)(d+))?$/;\n\n FRAMERATE = 30;\n\n DURATION = 2000;\n\n COUNT_FRAMERATE = 20;\n\n FRAMES_PER_VALUE = 2;\n\n DIGIT_SPEEDBOOST = .5;\n\n MS_PER_FRAME = 1000 / FRAMERATE;\n\n COUNT_MS_PER_FRAME = 1000 / COUNT_FRAMERATE;\n\n TRANSITION_END_EVENTS = 'transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd';\n\n transitionCheckStyles = document.createElement('div').style;\n\n TRANSITION_SUPPORT = (transitionCheckStyles.transition != null) || (transitionCheckStyles.webkitTransition != null) || (transitionCheckStyles.mozTransition != null) || (transitionCheckStyles.oTransition != null);\n\n requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n\n MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;\n\n createFromHTML = function(html) {\n var el;\n el = document.createElement('div');\n el.innerHTML = html;\n return el.children[0];\n };\n\n removeClass = function(el, name) {\n return el.className = el.className.replace(new RegExp(\"(^| )\" + (name.split(' ').join('|')) + \"( |$)\", 'gi'), ' ');\n };\n\n addClass = function(el, name) {\n removeClass(el, name);\n return el.className += \" \" + name;\n };\n\n trigger = function(el, name) {\n var evt;\n if (document.createEvent != null) {\n evt = document.createEvent('HTMLEvents');\n evt.initEvent(name, true, true);\n return el.dispatchEvent(evt);\n }\n };\n\n now = function() {\n var _ref, _ref1;\n return (_ref = (_ref1 = window.performance) != null ? typeof _ref1.now === \"function\" ? _ref1.now() : void 0 : void 0) != null ? _ref : +(new Date);\n };\n\n round = function(val, precision) {\n if (precision == null) {\n precision = 0;\n }\n if (!precision) {\n return Math.round(val);\n }\n val *= Math.pow(10, precision);\n val += 0.5;\n val = Math.floor(val);\n return val /= Math.pow(10, precision);\n };\n\n truncate = function(val) {\n if (val < 0) {\n return Math.ceil(val);\n } else {\n return Math.floor(val);\n }\n };\n\n fractionalPart = function(val) {\n return val - round(val);\n };\n\n _jQueryWrapped = false;\n\n (wrapJQuery = function() {\n var property, _i, _len, _ref, _results;\n if (_jQueryWrapped) {\n return;\n }\n if (window.jQuery != null) {\n _jQueryWrapped = true;\n _ref = ['html', 'text'];\n _results = [];\n for (_i = 0, _len = _ref.length; _i < _len; _i++) {\n property = _ref[_i];\n _results.push((function(property) {\n var old;\n old = window.jQuery.fn[property];\n return window.jQuery.fn[property] = function(val) {\n var _ref1;\n if ((val == null) || (((_ref1 = this[0]) != null ? _ref1.odometer : void 0) == null)) {\n return old.apply(this, arguments);\n }\n return this[0].odometer.update(val);\n };\n })(property));\n }\n return _results;\n }\n })();\n\n setTimeout(wrapJQuery, 0);\n\n Odometer = (function() {\n function Odometer(options) {\n var e, k, property, v, _base, _i, _len, _ref, _ref1, _ref2,\n _this = this;\n this.options = options;\n this.el = this.options.el;\n if (this.el.odometer != null) {\n return this.el.odometer;\n }\n this.el.odometer = this;\n _ref = Odometer.options;\n for (k in _ref) {\n v = _ref[k];\n if (this.options[k] == null) {\n this.options[k] = v;\n }\n }\n if ((_base = this.options).duration == null) {\n _base.duration = DURATION;\n }\n this.MAX_VALUES = ((this.options.duration / MS_PER_FRAME) / FRAMES_PER_VALUE) | 0;\n this.resetFormat();\n this.value = this.cleanValue((_ref1 = this.options.value) != null ? _ref1 : '');\n this.renderInside();\n this.render();\n try {\n _ref2 = ['innerHTML', 'innerText', 'textContent'];\n for (_i = 0, _len = _ref2.length; _i < _len; _i++) {\n property = _ref2[_i];\n if (this.el[property] != null) {\n (function(property) {\n return Object.defineProperty(_this.el, property, {\n get: function() {\n var _ref3;\n if (property === 'innerHTML') {\n return _this.inside.outerHTML;\n } else {\n return (_ref3 = _this.inside.innerText) != null ? _ref3 : _this.inside.textContent;\n }\n },\n set: function(val) {\n return _this.update(val);\n }\n });\n })(property);\n }\n }\n } catch (_error) {\n e = _error;\n this.watchForMutations();\n }\n this;\n }\n\n Odometer.prototype.renderInside = function() {\n this.inside = document.createElement('div');\n this.inside.className = 'odometer-inside';\n this.el.innerHTML = '';\n return this.el.appendChild(this.inside);\n };\n\n Odometer.prototype.watchForMutations = function() {\n var e,\n _this = this;\n if (MutationObserver == null) {\n return;\n }\n try {\n if (this.observer == null) {\n this.observer = new MutationObserver(function(mutations) {\n var newVal;\n newVal = _this.el.innerText;\n _this.renderInside();\n _this.render(_this.value);\n return _this.update(newVal);\n });\n }\n this.watchMutations = true;\n return this.startWatchingMutations();\n } catch (_error) {\n e = _error;\n }\n };\n\n Odometer.prototype.startWatchingMutations = function() {\n if (this.watchMutations) {\n return this.observer.observe(this.el, {\n childList: true\n });\n }\n };\n\n Odometer.prototype.stopWatchingMutations = function() {\n var _ref;\n return (_ref = this.observer) != null ? _ref.disconnect() : void 0;\n };\n\n Odometer.prototype.cleanValue = function(val) {\n var _ref;\n if (typeof val === 'string') {\n val = val.replace((_ref = this.format.radix) != null ? _ref : '.', '');\n val = val.replace(/[.,]/g, '');\n val = val.replace('', '.');\n val = parseFloat(val, 10) || 0;\n }\n return round(val, this.format.precision);\n };\n\n Odometer.prototype.bindTransitionEnd = function() {\n var event, renderEnqueued, _i, _len, _ref, _results,\n _this = this;\n if (this.transitionEndBound) {\n return;\n }\n this.transitionEndBound = true;\n renderEnqueued = false;\n _ref = TRANSITION_END_EVENTS.split(' ');\n _results = [];\n for (_i = 0, _len = _ref.length; _i < _len; _i++) {\n event = _ref[_i];\n _results.push(this.el.addEventListener(event, function() {\n if (renderEnqueued) {\n return true;\n }\n renderEnqueued = true;\n setTimeout(function() {\n _this.render();\n renderEnqueued = false;\n return trigger(_this.el, 'odometerdone');\n }, 0);\n return true;\n }, false));\n }\n return _results;\n };\n\n Odometer.prototype.resetFormat = function() {\n var format, fractional, parsed, precision, radix, repeating, _ref, _ref1;\n format = (_ref = this.options.format) != null ? _ref : DIGIT_FORMAT;\n format || (format = 'd');\n parsed = FORMAT_PARSER.exec(format);\n if (!parsed) {\n throw new Error(\"Odometer: Unparsable digit format\");\n }\n _ref1 = parsed.slice(1, 4), repeating = _ref1[0], radix = _ref1[1], fractional = _ref1[2];\n precision = (fractional != null ? fractional.length : void 0) || 0;\n return this.format = {\n repeating: repeating,\n radix: radix,\n precision: precision\n };\n };\n\n Odometer.prototype.render = function(value) {\n var classes, cls, match, newClasses, theme, _i, _len;\n if (value == null) {\n value = this.value;\n }\n this.stopWatchingMutations();\n this.resetFormat();\n this.inside.innerHTML = '';\n theme = this.options.theme;\n classes = this.el.className.split(' ');\n newClasses = [];\n for (_i = 0, _len = classes.length; _i < _len; _i++) {\n cls = classes[_i];\n if (!cls.length) {\n continue;\n }\n if (match = /^odometer-theme-(.+)$/.exec(cls)) {\n theme = match[1];\n continue;\n }\n if (/^odometer(-|$)/.test(cls)) {\n continue;\n }\n newClasses.push(cls);\n }\n newClasses.push('odometer');\n if (!TRANSITION_SUPPORT) {\n newClasses.push('odometer-no-transitions');\n }\n if (theme) {\n newClasses.push(\"odometer-theme-\" + theme);\n } else {\n newClasses.push(\"odometer-auto-theme\");\n }\n this.el.className = newClasses.join(' ');\n this.ribbons = {};\n this.formatDigits(value);\n return this.startWatchingMutations();\n };\n\n Odometer.prototype.formatDigits = function(value) {\n var digit, valueDigit, valueString, wholePart, _i, _j, _len, _len1, _ref, _ref1;\n this.digits = [];\n if (this.options.formatFunction) {\n valueString = this.options.formatFunction(value);\n _ref = valueString.split('').reverse();\n for (_i = 0, _len = _ref.length; _i < _len; _i++) {\n valueDigit = _ref[_i];\n if (valueDigit.match(/0-9/)) {\n digit = this.renderDigit();\n digit.querySelector('.odometer-value').innerHTML = valueDigit;\n this.digits.push(digit);\n this.insertDigit(digit);\n } else {\n this.addSpacer(valueDigit);\n }\n }\n } else {\n wholePart = !this.format.precision || !fractionalPart(value) || false;\n _ref1 = value.toString().split('').reverse();\n for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {\n digit = _ref1[_j];\n if (digit === '.') {\n wholePart = true;\n }\n this.addDigit(digit, wholePart);\n }\n }\n };\n\n Odometer.prototype.update = function(newValue) {\n var diff,\n _this = this;\n newValue = this.cleanValue(newValue);\n if (!(diff = newValue - this.value)) {\n return;\n }\n removeClass(this.el, 'odometer-animating-up odometer-animating-down odometer-animating');\n if (diff > 0) {\n addClass(this.el, 'odometer-animating-up');\n } else {\n addClass(this.el, 'odometer-animating-down');\n }\n this.stopWatchingMutations();\n this.animate(newValue);\n this.startWatchingMutations();\n setTimeout(function() {\n _this.el.offsetHeight;\n return addClass(_this.el, 'odometer-animating');\n }, 0);\n return this.value = newValue;\n };\n\n Odometer.prototype.renderDigit = function() {\n return createFromHTML(DIGIT_HTML);\n };\n\n Odometer.prototype.insertDigit = function(digit, before) {\n if (before != null) {\n return this.inside.insertBefore(digit, before);\n } else if (!this.inside.children.length) {\n return this.inside.appendChild(digit);\n } else {\n return this.inside.insertBefore(digit, this.inside.children[0]);\n }\n };\n\n Odometer.prototype.addSpacer = function(chr, before, extraClasses) {\n var spacer;\n spacer = createFromHTML(FORMAT_MARK_HTML);\n spacer.innerHTML = chr;\n if (extraClasses) {\n addClass(spacer, extraClasses);\n }\n return this.insertDigit(spacer, before);\n };\n\n Odometer.prototype.addDigit = function(value, repeating) {\n var chr, digit, resetted, _ref;\n if (repeating == null) {\n repeating = true;\n }\n if (value === '-') {\n return this.addSpacer(value, null, 'odometer-negation-mark');\n }\n if (value === '.') {\n return this.addSpacer((_ref = this.format.radix) != null ? _ref : '.', null, 'odometer-radix-mark');\n }\n if (repeating) {\n resetted = false;\n while (true) {\n if (!this.format.repeating.length) {\n if (resetted) {\n throw new Error(\"Bad odometer format without digits\");\n }\n this.resetFormat();\n resetted = true;\n }\n chr = this.format.repeating[this.format.repeating.length - 1];\n this.format.repeating = this.format.repeating.substring(0, this.format.repeating.length - 1);\n if (chr === 'd') {\n break;\n }\n this.addSpacer(chr);\n }\n }\n digit = this.renderDigit();\n digit.querySelector('.odometer-value').innerHTML = value;\n this.digits.push(digit);\n return this.insertDigit(digit);\n };\n\n Odometer.prototype.animate = function(newValue) {\n if (!TRANSITION_SUPPORT || this.options.animation === 'count') {\n return this.animateCount(newValue);\n } else {\n return this.animateSlide(newValue);\n }\n };\n\n Odometer.prototype.animateCount = function(newValue) {\n var cur, diff, last, start, tick,\n _this = this;\n if (!(diff = +newValue - this.value)) {\n return;\n }\n start = last = now();\n cur = this.value;\n return (tick = function() {\n var delta, dist, fraction;\n if ((now() - start) > _this.options.duration) {\n _this.value = newValue;\n _this.render();\n trigger(_this.el, 'odometerdone');\n return;\n }\n delta = now() - last;\n if (delta > COUNT_MS_PER_FRAME) {\n last = now();\n fraction = delta / _this.options.duration;\n dist = diff * fraction;\n cur += dist;\n _this.render(Math.round(cur));\n }\n if (requestAnimationFrame != null) {\n return requestAnimationFrame(tick);\n } else {\n return setTimeout(tick, COUNT_MS_PER_FRAME);\n }\n })();\n };\n\n Odometer.prototype.getDigitCount = function() {\n var i, max, value, values, _i, _len;\n values = 1 <= arguments.length ? __slice.call(arguments, 0) : [];\n for (i = _i = 0, _len = values.length; _i < _len; i = ++_i) {\n value = values[i];\n values[i] = Math.abs(value);\n }\n max = Math.max.apply(Math, values);\n return Math.ceil(Math.log(max + 1) / Math.log(10));\n };\n\n Odometer.prototype.getFractionalDigitCount = function() {\n var i, parser, parts, value, values, _i, _len;\n values = 1 <= arguments.length ? __slice.call(arguments, 0) : [];\n parser = /^\\-?\\d*\\.(\\d*?)0*$/;\n for (i = _i = 0, _len = values.length; _i < _len; i = ++_i) {\n value = values[i];\n values[i] = value.toString();\n parts = parser.exec(values[i]);\n if (parts == null) {\n values[i] = 0;\n } else {\n values[i] = parts[1].length;\n }\n }\n return Math.max.apply(Math, values);\n };\n\n Odometer.prototype.resetDigits = function() {\n this.digits = [];\n this.ribbons = [];\n this.inside.innerHTML = '';\n return this.resetFormat();\n };\n\n Odometer.prototype.animateSlide = function(newValue) {\n var boosted, cur, diff, digitCount, digits, dist, end, fractionalCount, frame, frames, i, incr, j, mark, numEl, oldValue, start, _base, _i, _j, _k, _l, _len, _len1, _len2, _m, _ref, _results;\n oldValue = this.value;\n fractionalCount = this.getFractionalDigitCount(oldValue, newValue);\n if (fractionalCount) {\n newValue = newValue * Math.pow(10, fractionalCount);\n oldValue = oldValue * Math.pow(10, fractionalCount);\n }\n if (!(diff = newValue - oldValue)) {\n return;\n }\n this.bindTransitionEnd();\n digitCount = this.getDigitCount(oldValue, newValue);\n digits = [];\n boosted = 0;\n for (i = _i = 0; 0 <= digitCount ? _i < digitCount : _i > digitCount; i = 0 <= digitCount ? ++_i : --_i) {\n start = truncate(oldValue / Math.pow(10, digitCount - i - 1));\n end = truncate(newValue / Math.pow(10, digitCount - i - 1));\n dist = end - start;\n if (Math.abs(dist) > this.MAX_VALUES) {\n frames = [];\n incr = dist / (this.MAX_VALUES + this.MAX_VALUES * boosted * DIGIT_SPEEDBOOST);\n cur = start;\n while ((dist > 0 && cur < end) || (dist < 0 && cur > end)) {\n frames.push(Math.round(cur));\n cur += incr;\n }\n if (frames[frames.length - 1] !== end) {\n frames.push(end);\n }\n boosted++;\n } else {\n frames = (function() {\n _results = [];\n for (var _j = start; start <= end ? _j <= end : _j >= end; start <= end ? _j++ : _j--){ _results.push(_j); }\n return _results;\n }).apply(this);\n }\n for (i = _k = 0, _len = frames.length; _k < _len; i = ++_k) {\n frame = frames[i];\n frames[i] = Math.abs(frame % 10);\n }\n digits.push(frames);\n }\n this.resetDigits();\n _ref = digits.reverse();\n for (i = _l = 0, _len1 = _ref.length; _l < _len1; i = ++_l) {\n frames = _ref[i];\n if (!this.digits[i]) {\n this.addDigit(' ', i >= fractionalCount);\n }\n if ((_base = this.ribbons)[i] == null) {\n _base[i] = this.digits[i].querySelector('.odometer-ribbon-inner');\n }\n this.ribbons[i].innerHTML = '';\n if (diff < 0) {\n frames = frames.reverse();\n }\n for (j = _m = 0, _len2 = frames.length; _m < _len2; j = ++_m) {\n frame = frames[j];\n numEl = document.createElement('div');\n numEl.className = 'odometer-value';\n numEl.innerHTML = frame;\n this.ribbons[i].appendChild(numEl);\n if (j === frames.length - 1) {\n addClass(numEl, 'odometer-last-value');\n }\n if (j === 0) {\n addClass(numEl, 'odometer-first-value');\n }\n }\n }\n if (start < 0) {\n this.addDigit('-');\n }\n mark = this.inside.querySelector('.odometer-radix-mark');\n if (mark != null) {\n mark.parent.removeChild(mark);\n }\n if (fractionalCount) {\n return this.addSpacer(this.format.radix, this.digits[fractionalCount - 1], 'odometer-radix-mark');\n }\n };\n\n return Odometer;\n\n })();\n\n Odometer.options = (_ref = window.odometerOptions) != null ? _ref : {};\n\n setTimeout(function() {\n var k, v, _base, _ref1, _results;\n if (window.odometerOptions) {\n _ref1 = window.odometerOptions;\n _results = [];\n for (k in _ref1) {\n v = _ref1[k];\n _results.push((_base = Odometer.options)[k] != null ? (_base = Odometer.options)[k] : _base[k] = v);\n }\n return _results;\n }\n }, 0);\n\n Odometer.init = function() {\n var el, elements, _i, _len, _ref1, _results;\n if (document.querySelectorAll == null) {\n return;\n }\n elements = document.querySelectorAll(Odometer.options.selector || '.odometer');\n _results = [];\n for (_i = 0, _len = elements.length; _i < _len; _i++) {\n el = elements[_i];\n _results.push(el.odometer = new Odometer({\n el: el,\n value: (_ref1 = el.innerText) != null ? _ref1 : el.textContent\n }));\n }\n return _results;\n };\n\n if ((((_ref1 = document.documentElement) != null ? _ref1.doScroll : void 0) != null) && (document.createEventObject != null)) {\n _old = document.onreadystatechange;\n document.onreadystatechange = function() {\n if (document.readyState === 'complete' && Odometer.options.auto !== false) {\n Odometer.init();\n }\n return _old != null ? _old.apply(this, arguments) : void 0;\n };\n } else {\n document.addEventListener('DOMContentLoaded', function() {\n if (Odometer.options.auto !== false) {\n return Odometer.init();\n }\n }, false);\n }\n\n if (typeof define === 'function' && define.amd) {\n define([], function() {\n return Odometer;\n });\n } else if (typeof exports !== \"undefined\" && exports !== null) {\n module.exports = Odometer;\n } else {\n window.Odometer = Odometer;\n }\n\n}).call(this);\n" }, { "path": "package.json", "content": "{\n \"name\": \"odometer\",\n \"version\": \"0.4.8\",\n \"description\": \"Transition numbers with ease\",\n \"main\": \"odometer.js\",\n \"authors\": [\n \"Adam Schwartz \",\n \"Zack Bloom \"\n ],\n \"license\": \"MIT\",\n \"devDependencies\": {\n \"grunt-contrib-coffee\": \"~0.7.0\",\n \"coffee-script\": \"~1.6.3\",\n \"grunt-contrib-uglify\": \"~0.2.4\",\n \"grunt-cli\": \"~0.1.9\",\n \"grunt\": \"~0.4.1\",\n \"grunt-contrib-watch\": \"~0.5.3\",\n \"grunt-contrib-compass\": \"~0.5.0\",\n \"color\": \"~0.4.4\"\n }\n}\n" }, { "path": "sass/_mixins.sass", "content": "@import compass/css3\n\n=spinning-odometer($themeName)\n .odometer.odometer-auto-theme, .odometer#{\".\" + $themeName}\n +inline-block\n position: relative\n\n .odometer-digit\n +inline-block\n position: relative\n\n .odometer-digit-spacer\n +inline-block\n visibility: hidden\n\n .odometer-digit-inner\n text-align: left\n display: block\n position: absolute\n top: 0\n left: 0\n right: 0\n bottom: 0\n overflow: hidden\n\n .odometer-ribbon\n display: block\n\n .odometer-ribbon-inner\n display: block\n -webkit-backface-visibility: hidden\n\n .odometer-value\n display: block\n -webkit-transform: translateZ(0)\n\n &.odometer-last-value\n position: absolute\n\n &.odometer-animating-up\n\n .odometer-ribbon-inner\n -webkit-transition: -webkit-transform 2s\n -moz-transition: -moz-transform 2s\n -ms-transition: -ms-transform 2s\n -o-transition: -o-transform 2s\n transition: transform 2s\n\n &.odometer-animating .odometer-ribbon-inner\n -webkit-transform: translateY(-100%)\n -moz-transform: translateY(-100%)\n -ms-transform: translateY(-100%)\n -o-transform: translateY(-100%)\n transform: translateY(-100%)\n\n &.odometer-animating-down\n\n .odometer-ribbon-inner\n -webkit-transform: translateY(-100%)\n -moz-transform: translateY(-100%)\n -ms-transform: translateY(-100%)\n -o-transform: translateY(-100%)\n transform: translateY(-100%)\n\n &.odometer-animating .odometer-ribbon-inner\n -webkit-transition: -webkit-transform 2s\n -moz-transition: -moz-transform 2s\n -ms-transition: -ms-transform 2s\n -o-transition: -o-transform 2s\n transition: transform 2s\n\n -webkit-transform: translateY(0)\n -moz-transform: translateY(0)\n -ms-transform: translateY(0)\n -o-transform: translateY(0)\n transform: translateY(0)" }, { "path": "sass/odometer-theme-car.sass", "content": "@import compass/css3\n@import mixins\n@import url(\"//fonts.googleapis.com/css?family=Arimo\")\n\n$themeName: \"odometer-theme-car\"\n$padding: .15em\n$borderRadius: .2em\n\n+spinning-odometer($themeName)\n\n.odometer.odometer-auto-theme, .odometer#{\".\" + $themeName}\n +border-radius(.34em)\n font-family: \"Arimo\", monospace\n padding: $padding\n background: #000\n color: #eee0d3\n\n .odometer-digit\n +box-shadow(inset 0 0 .3em rgba(0, 0, 0, 0.8))\n +background-image(linear-gradient(top, #333 0%, #333 40%, #101010 60%, #333 80%, #333 100%))\n padding: 0 $padding\n\n &:first-child\n +border-radius($borderRadius 0 0 $borderRadius)\n\n &:last-child\n +border-radius(0 $borderRadius $borderRadius 0)\n +background-image(linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%))\n background-color: #eee0d3\n color: #000\n\n .odometer-digit-inner\n left: $padding\n\n &.odometer-animating-up .odometer-ribbon-inner, &.odometer-animating-down.odometer-animating .odometer-ribbon-inner\n -webkit-transition-timing-function: linear\n -moz-transition-timing-function: linear\n -ms-transition-timing-function: linear\n -o-transition-timing-function: linear\n transition-timing-function: linear" }, { "path": "sass/odometer-theme-default.sass", "content": "@import compass/css3\n@import mixins\n\n$themeName: \"odometer-theme-default\"\n\n+spinning-odometer($themeName)\n\n.odometer.odometer-auto-theme, .odometer#{\".\" + $themeName}\n font-family: \"Helvetica Neue\", sans-serif\n line-height: 1.1em\n\n .odometer-value\n text-align: center" }, { "path": "sass/odometer-theme-digital.sass", "content": "@import compass/css3\n@import mixins\n@import url(\"//fonts.googleapis.com/css?family=Wallpoet\")\n\n$themeName: \"odometer-theme-digital\"\n$green: #8bf5a5\n\n+spinning-odometer($themeName)\n\n.odometer.odometer-auto-theme, .odometer#{\".\" + $themeName}\n +background-image(radial-gradient(rgba($green, 0.4), #000))\n background-color: #000\n font-family: \"Wallpoet\", monospace\n padding: 0 .2em\n line-height: 1.1em\n color: $green\n\n .odometer-digit + .odometer-digit\n margin-left: .1em" }, { "path": "sass/odometer-theme-minimal.sass", "content": "@import compass/css3\n@import mixins\n\n$themeName: \"odometer-theme-minimal\"\n\n+spinning-odometer($themeName)" }, { "path": "sass/odometer-theme-plaza.sass", "content": "@import compass/css3\n@import mixins\n\n$themeName: \"odometer-theme-plaza\"\n$digitPadding: .03em\n\n+spinning-odometer($themeName)\n\n.odometer.odometer-auto-theme, .odometer#{\".\" + $themeName}\n +border-radius(.15em)\n background-color: #f0f8ff\n font-family: \"Helvetica Neue\", sans-serif\n font-weight: 100\n padding: 0 .12em\n line-height: 1.2em\n font-size: 1.2em\n background-size: 16px 16px\n\n .odometer-digit\n +border-radius(.1em)\n padding: 0 $digitPadding\n color: #648baf\n\n .odometer-digit-inner\n left: $digitPadding\n" }, { "path": "sass/odometer-theme-slot-machine.sass", "content": "@import compass/css3\n@import mixins\n@import url(\"//fonts.googleapis.com/css?family=Rye\")\n\n$themeName: \"odometer-theme-slot-machine\"\n$spacing: .15em\n$borderRadius: .2em\n\n+spinning-odometer($themeName)\n\n.odometer.odometer-auto-theme, .odometer#{\".\" + $themeName}\n +border-radius(.34em)\n +background-image(linear-gradient(#ff0, #ffa500))\n background-color: #fc0\n font-family: \"Rye\", monospace\n padding: $spacing\n color: #f80000\n line-height: 1.35em\n border: .03em solid #000\n -webkit-text-stroke: .05em #000\n\n .odometer-digit\n +box-shadow(inset 0 0 .1em rgba(0, 0, 0, 0.5), 0 0 0 .03em #fff, 0 0 0 .05em rgba(0, 0, 0, 0.2))\n +border-radius(.2em)\n +background-image(linear-gradient(top, #ccc 0%, #fff 20%, #fff 80%, #ccc 100%))\n border: .03em solid #444\n padding: .1em $spacing 0\n\n &:first-child\n +box-shadow(inset .05em 0 .1em rgba(0, 0, 0, 0.5), 0 0 0 .03em #fff, 0 0 0 .05em rgba(0, 0, 0, 0.2))\n\n &:last-child\n +box-shadow(inset -.05em 0 .1em rgba(0, 0, 0, 0.5), 0 0 0 .03em #fff, 0 0 0 .05em rgba(0, 0, 0, 0.2))\n\n + .odometer-digit\n margin-left: $spacing\n\n .odometer-digit-inner\n padding-top: .08em\n\n .odometer-digit-inner, .odometer-value.odometer-last-value\n left: 0\n right: 0\n text-align: center" }, { "path": "sass/odometer-theme-train-station.sass", "content": "@import compass/css3\n@import mixins\n@import url(\"//fonts.googleapis.com/css?family=Economica\")\n\n$themeName: \"odometer-theme-train-station\"\n$digitPadding: .15em\n\n+spinning-odometer($themeName)\n\n.odometer.odometer-auto-theme, .odometer#{\".\" + $themeName}\n font-family: \"Economica\", sans-serif\n\n .odometer-digit\n +inline-block\n +border-radius(.1em)\n +background-image(linear-gradient(top, #111 0%, #111 35%, #333 55%, #111 55%, #111 100%))\n background-color: #222\n padding: 0 $digitPadding\n color: #fff\n\n + .odometer-digit\n margin-left: .1em\n\n .odometer-digit-inner\n left: $digitPadding" }, { "path": "test/demo.html", "content": "\n\n\n\n\n\n\n
    3252
    \n\n\n" }, { "path": "test/performance.html", "content": "\n\n\n\n\n\n\n\n\n
    \n
    \n
    \n\n\n\n
    \n\n\n" }, { "path": "themes/odometer-theme-car.css", "content": "@import url(\"//fonts.googleapis.com/css?family=Arimo\");\n.odometer.odometer-auto-theme, .odometer.odometer-theme-car {\n display: inline-block;\n vertical-align: middle;\n *vertical-align: auto;\n *zoom: 1;\n *display: inline;\n position: relative;\n}\n.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-car .odometer-digit {\n display: inline-block;\n vertical-align: middle;\n *vertical-align: auto;\n *zoom: 1;\n *display: inline;\n position: relative;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-car .odometer-digit .odometer-digit-spacer {\n display: inline-block;\n vertical-align: middle;\n *vertical-align: auto;\n *zoom: 1;\n *display: inline;\n visibility: hidden;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-car .odometer-digit .odometer-digit-inner {\n text-align: left;\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n overflow: hidden;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-car .odometer-digit .odometer-ribbon {\n display: block;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-car .odometer-digit .odometer-ribbon-inner {\n display: block;\n -webkit-backface-visibility: hidden;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-car .odometer-digit .odometer-value {\n display: block;\n -webkit-transform: translateZ(0);\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-car .odometer-digit .odometer-value.odometer-last-value {\n position: absolute;\n}\n.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-up .odometer-ribbon-inner {\n -webkit-transition: -webkit-transform 2s;\n -moz-transition: -moz-transform 2s;\n -ms-transition: -ms-transform 2s;\n -o-transition: -o-transform 2s;\n transition: transform 2s;\n}\n.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-up.odometer-animating .odometer-ribbon-inner {\n -webkit-transform: translateY(-100%);\n -moz-transform: translateY(-100%);\n -ms-transform: translateY(-100%);\n -o-transform: translateY(-100%);\n transform: translateY(-100%);\n}\n.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-down .odometer-ribbon-inner {\n -webkit-transform: translateY(-100%);\n -moz-transform: translateY(-100%);\n -ms-transform: translateY(-100%);\n -o-transform: translateY(-100%);\n transform: translateY(-100%);\n}\n.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-down.odometer-animating .odometer-ribbon-inner {\n -webkit-transition: -webkit-transform 2s;\n -moz-transition: -moz-transform 2s;\n -ms-transition: -ms-transform 2s;\n -o-transition: -o-transform 2s;\n transition: transform 2s;\n -webkit-transform: translateY(0);\n -moz-transform: translateY(0);\n -ms-transform: translateY(0);\n -o-transform: translateY(0);\n transform: translateY(0);\n}\n\n.odometer.odometer-auto-theme, .odometer.odometer-theme-car {\n -moz-border-radius: 0.34em;\n -webkit-border-radius: 0.34em;\n border-radius: 0.34em;\n font-family: \"Arimo\", monospace;\n padding: 0.15em;\n background: #000;\n color: #eee0d3;\n}\n.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-car .odometer-digit {\n -moz-box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8);\n -webkit-box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8);\n box-shadow: inset 0 0 0.3em rgba(0, 0, 0, 0.8);\n background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjMzMzMzMzIi8+PHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiMxMDEwMTAiLz48c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');\n background-size: 100%;\n background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333333), color-stop(40%, #333333), color-stop(60%, #101010), color-stop(80%, #333333), color-stop(100%, #333333));\n background-image: -moz-linear-gradient(top, #333333 0%, #333333 40%, #101010 60%, #333333 80%, #333333 100%);\n background-image: -webkit-linear-gradient(top, #333333 0%, #333333 40%, #101010 60%, #333333 80%, #333333 100%);\n background-image: linear-gradient(to bottom, #333333 0%, #333333 40%, #101010 60%, #333333 80%, #333333 100%);\n padding: 0 0.15em;\n}\n.odometer.odometer-auto-theme .odometer-digit:first-child, .odometer.odometer-theme-car .odometer-digit:first-child {\n -moz-border-radius: 0.2em 0 0 0.2em;\n -webkit-border-radius: 0.2em;\n border-radius: 0.2em 0 0 0.2em;\n}\n.odometer.odometer-auto-theme .odometer-digit:last-child, .odometer.odometer-theme-car .odometer-digit:last-child {\n -moz-border-radius: 0 0.2em 0.2em 0;\n -webkit-border-radius: 0;\n border-radius: 0 0.2em 0.2em 0;\n background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZTBkMyIvPjxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjZWVlMGQzIi8+PHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiNiYmFhOWEiLz48c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iI2VlZTBkMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VlZTBkMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');\n background-size: 100%;\n background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eee0d3), color-stop(40%, #eee0d3), color-stop(60%, #bbaa9a), color-stop(80%, #eee0d3), color-stop(100%, #eee0d3));\n background-image: -moz-linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%);\n background-image: -webkit-linear-gradient(top, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%);\n background-image: linear-gradient(to bottom, #eee0d3 0%, #eee0d3 40%, #bbaa9a 60%, #eee0d3 80%, #eee0d3 100%);\n background-color: #eee0d3;\n color: #000;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-car .odometer-digit .odometer-digit-inner {\n left: 0.15em;\n}\n.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-car.odometer-animating-down.odometer-animating .odometer-ribbon-inner {\n -webkit-transition-timing-function: linear;\n -moz-transition-timing-function: linear;\n -ms-transition-timing-function: linear;\n -o-transition-timing-function: linear;\n transition-timing-function: linear;\n}\n" }, { "path": "themes/odometer-theme-default.css", "content": ".odometer.odometer-auto-theme, .odometer.odometer-theme-default {\n display: inline-block;\n vertical-align: middle;\n *vertical-align: auto;\n *zoom: 1;\n *display: inline;\n position: relative;\n}\n.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit {\n display: inline-block;\n vertical-align: middle;\n *vertical-align: auto;\n *zoom: 1;\n *display: inline;\n position: relative;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer {\n display: inline-block;\n vertical-align: middle;\n *vertical-align: auto;\n *zoom: 1;\n *display: inline;\n visibility: hidden;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-default .odometer-digit .odometer-digit-inner {\n text-align: left;\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n overflow: hidden;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon {\n display: block;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon-inner {\n display: block;\n -webkit-backface-visibility: hidden;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-default .odometer-digit .odometer-value {\n display: block;\n -webkit-transform: translateZ(0);\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-default .odometer-digit .odometer-value.odometer-last-value {\n position: absolute;\n}\n.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner {\n -webkit-transition: -webkit-transform 2s;\n -moz-transition: -moz-transform 2s;\n -ms-transition: -ms-transform 2s;\n -o-transition: -o-transform 2s;\n transition: transform 2s;\n}\n.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up.odometer-animating .odometer-ribbon-inner {\n -webkit-transform: translateY(-100%);\n -moz-transform: translateY(-100%);\n -ms-transform: translateY(-100%);\n -o-transform: translateY(-100%);\n transform: translateY(-100%);\n}\n.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down .odometer-ribbon-inner {\n -webkit-transform: translateY(-100%);\n -moz-transform: translateY(-100%);\n -ms-transform: translateY(-100%);\n -o-transform: translateY(-100%);\n transform: translateY(-100%);\n}\n.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down.odometer-animating .odometer-ribbon-inner {\n -webkit-transition: -webkit-transform 2s;\n -moz-transition: -moz-transform 2s;\n -ms-transition: -ms-transform 2s;\n -o-transition: -o-transform 2s;\n transition: transform 2s;\n -webkit-transform: translateY(0);\n -moz-transform: translateY(0);\n -ms-transform: translateY(0);\n -o-transform: translateY(0);\n transform: translateY(0);\n}\n\n.odometer.odometer-auto-theme, .odometer.odometer-theme-default {\n font-family: \"Helvetica Neue\", sans-serif;\n line-height: 1.1em;\n}\n.odometer.odometer-auto-theme .odometer-value, .odometer.odometer-theme-default .odometer-value {\n text-align: center;\n}\n" }, { "path": "themes/odometer-theme-digital.css", "content": "@import url(\"//fonts.googleapis.com/css?family=Wallpoet\");\n.odometer.odometer-auto-theme, .odometer.odometer-theme-digital {\n display: inline-block;\n vertical-align: middle;\n *vertical-align: auto;\n *zoom: 1;\n *display: inline;\n position: relative;\n}\n.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-digital .odometer-digit {\n display: inline-block;\n vertical-align: middle;\n *vertical-align: auto;\n *zoom: 1;\n *display: inline;\n position: relative;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-digital .odometer-digit .odometer-digit-spacer {\n display: inline-block;\n vertical-align: middle;\n *vertical-align: auto;\n *zoom: 1;\n *display: inline;\n visibility: hidden;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-digital .odometer-digit .odometer-digit-inner {\n text-align: left;\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n overflow: hidden;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-digital .odometer-digit .odometer-ribbon {\n display: block;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-digital .odometer-digit .odometer-ribbon-inner {\n display: block;\n -webkit-backface-visibility: hidden;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-digital .odometer-digit .odometer-value {\n display: block;\n -webkit-transform: translateZ(0);\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-digital .odometer-digit .odometer-value.odometer-last-value {\n position: absolute;\n}\n.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-digital.odometer-animating-up .odometer-ribbon-inner {\n -webkit-transition: -webkit-transform 2s;\n -moz-transition: -moz-transform 2s;\n -ms-transition: -ms-transform 2s;\n -o-transition: -o-transform 2s;\n transition: transform 2s;\n}\n.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-digital.odometer-animating-up.odometer-animating .odometer-ribbon-inner {\n -webkit-transform: translateY(-100%);\n -moz-transform: translateY(-100%);\n -ms-transform: translateY(-100%);\n -o-transform: translateY(-100%);\n transform: translateY(-100%);\n}\n.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-digital.odometer-animating-down .odometer-ribbon-inner {\n -webkit-transform: translateY(-100%);\n -moz-transform: translateY(-100%);\n -ms-transform: translateY(-100%);\n -o-transform: translateY(-100%);\n transform: translateY(-100%);\n}\n.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-digital.odometer-animating-down.odometer-animating .odometer-ribbon-inner {\n -webkit-transition: -webkit-transform 2s;\n -moz-transition: -moz-transform 2s;\n -ms-transition: -ms-transform 2s;\n -o-transition: -o-transform 2s;\n transition: transform 2s;\n -webkit-transform: translateY(0);\n -moz-transform: translateY(0);\n -ms-transform: translateY(0);\n -o-transform: translateY(0);\n transform: translateY(0);\n}\n\n.odometer.odometer-auto-theme, .odometer.odometer-theme-digital {\n background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhiZjVhNSIgc3RvcC1vcGFjaXR5PSIwLjQiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');\n background-size: 100%;\n background-image: -moz-radial-gradient(rgba(139, 245, 165, 0.4), #000000);\n background-image: -webkit-radial-gradient(rgba(139, 245, 165, 0.4), #000000);\n background-image: radial-gradient(rgba(139, 245, 165, 0.4), #000000);\n background-color: #000;\n font-family: \"Wallpoet\", monospace;\n padding: 0 0.2em;\n line-height: 1.1em;\n color: #8bf5a5;\n}\n.odometer.odometer-auto-theme .odometer-digit + .odometer-digit, .odometer.odometer-theme-digital .odometer-digit + .odometer-digit {\n margin-left: 0.1em;\n}\n" }, { "path": "themes/odometer-theme-minimal.css", "content": ".odometer.odometer-auto-theme, .odometer.odometer-theme-minimal {\n display: inline-block;\n vertical-align: middle;\n *vertical-align: auto;\n *zoom: 1;\n *display: inline;\n position: relative;\n}\n.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-minimal .odometer-digit {\n display: inline-block;\n vertical-align: middle;\n *vertical-align: auto;\n *zoom: 1;\n *display: inline;\n position: relative;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-minimal .odometer-digit .odometer-digit-spacer {\n display: inline-block;\n vertical-align: middle;\n *vertical-align: auto;\n *zoom: 1;\n *display: inline;\n visibility: hidden;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-minimal .odometer-digit .odometer-digit-inner {\n text-align: left;\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n overflow: hidden;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-minimal .odometer-digit .odometer-ribbon {\n display: block;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-minimal .odometer-digit .odometer-ribbon-inner {\n display: block;\n -webkit-backface-visibility: hidden;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-minimal .odometer-digit .odometer-value {\n display: block;\n -webkit-transform: translateZ(0);\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-minimal .odometer-digit .odometer-value.odometer-last-value {\n position: absolute;\n}\n.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-up .odometer-ribbon-inner {\n -webkit-transition: -webkit-transform 2s;\n -moz-transition: -moz-transform 2s;\n -ms-transition: -ms-transform 2s;\n -o-transition: -o-transform 2s;\n transition: transform 2s;\n}\n.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-up.odometer-animating .odometer-ribbon-inner {\n -webkit-transform: translateY(-100%);\n -moz-transform: translateY(-100%);\n -ms-transform: translateY(-100%);\n -o-transform: translateY(-100%);\n transform: translateY(-100%);\n}\n.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-down .odometer-ribbon-inner {\n -webkit-transform: translateY(-100%);\n -moz-transform: translateY(-100%);\n -ms-transform: translateY(-100%);\n -o-transform: translateY(-100%);\n transform: translateY(-100%);\n}\n.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-minimal.odometer-animating-down.odometer-animating .odometer-ribbon-inner {\n -webkit-transition: -webkit-transform 2s;\n -moz-transition: -moz-transform 2s;\n -ms-transition: -ms-transform 2s;\n -o-transition: -o-transform 2s;\n transition: transform 2s;\n -webkit-transform: translateY(0);\n -moz-transform: translateY(0);\n -ms-transform: translateY(0);\n -o-transform: translateY(0);\n transform: translateY(0);\n}\n" }, { "path": "themes/odometer-theme-plaza.css", "content": ".odometer.odometer-auto-theme, .odometer.odometer-theme-plaza {\n display: inline-block;\n vertical-align: middle;\n *vertical-align: auto;\n *zoom: 1;\n *display: inline;\n position: relative;\n}\n.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-plaza .odometer-digit {\n display: inline-block;\n vertical-align: middle;\n *vertical-align: auto;\n *zoom: 1;\n *display: inline;\n position: relative;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-spacer {\n display: inline-block;\n vertical-align: middle;\n *vertical-align: auto;\n *zoom: 1;\n *display: inline;\n visibility: hidden;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-inner {\n text-align: left;\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n overflow: hidden;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-plaza .odometer-digit .odometer-ribbon {\n display: block;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-plaza .odometer-digit .odometer-ribbon-inner {\n display: block;\n -webkit-backface-visibility: hidden;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-plaza .odometer-digit .odometer-value {\n display: block;\n -webkit-transform: translateZ(0);\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-plaza .odometer-digit .odometer-value.odometer-last-value {\n position: absolute;\n}\n.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-up .odometer-ribbon-inner {\n -webkit-transition: -webkit-transform 2s;\n -moz-transition: -moz-transform 2s;\n -ms-transition: -ms-transform 2s;\n -o-transition: -o-transform 2s;\n transition: transform 2s;\n}\n.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-up.odometer-animating .odometer-ribbon-inner {\n -webkit-transform: translateY(-100%);\n -moz-transform: translateY(-100%);\n -ms-transform: translateY(-100%);\n -o-transform: translateY(-100%);\n transform: translateY(-100%);\n}\n.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-down .odometer-ribbon-inner {\n -webkit-transform: translateY(-100%);\n -moz-transform: translateY(-100%);\n -ms-transform: translateY(-100%);\n -o-transform: translateY(-100%);\n transform: translateY(-100%);\n}\n.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-plaza.odometer-animating-down.odometer-animating .odometer-ribbon-inner {\n -webkit-transition: -webkit-transform 2s;\n -moz-transition: -moz-transform 2s;\n -ms-transition: -ms-transform 2s;\n -o-transition: -o-transform 2s;\n transition: transform 2s;\n -webkit-transform: translateY(0);\n -moz-transform: translateY(0);\n -ms-transform: translateY(0);\n -o-transform: translateY(0);\n transform: translateY(0);\n}\n\n.odometer.odometer-auto-theme, .odometer.odometer-theme-plaza {\n -moz-border-radius: 0.15em;\n -webkit-border-radius: 0.15em;\n border-radius: 0.15em;\n background-color: #f0f8ff;\n font-family: \"Helvetica Neue\", sans-serif;\n font-weight: 100;\n padding: 0 0.12em;\n line-height: 1.2em;\n font-size: 1.2em;\n background-size: 16px 16px;\n}\n.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-plaza .odometer-digit {\n -moz-border-radius: 0.1em;\n -webkit-border-radius: 0.1em;\n border-radius: 0.1em;\n padding: 0 0.03em;\n color: #648baf;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-plaza .odometer-digit .odometer-digit-inner {\n left: 0.03em;\n}\n" }, { "path": "themes/odometer-theme-slot-machine.css", "content": "@import url(\"//fonts.googleapis.com/css?family=Rye\");\n.odometer.odometer-auto-theme, .odometer.odometer-theme-slot-machine {\n display: inline-block;\n vertical-align: middle;\n *vertical-align: auto;\n *zoom: 1;\n *display: inline;\n position: relative;\n}\n.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-slot-machine .odometer-digit {\n display: inline-block;\n vertical-align: middle;\n *vertical-align: auto;\n *zoom: 1;\n *display: inline;\n position: relative;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-digit-spacer {\n display: inline-block;\n vertical-align: middle;\n *vertical-align: auto;\n *zoom: 1;\n *display: inline;\n visibility: hidden;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-digit-inner {\n text-align: left;\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n overflow: hidden;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-ribbon {\n display: block;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-ribbon-inner {\n display: block;\n -webkit-backface-visibility: hidden;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-value {\n display: block;\n -webkit-transform: translateZ(0);\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-value.odometer-last-value {\n position: absolute;\n}\n.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine.odometer-animating-up .odometer-ribbon-inner {\n -webkit-transition: -webkit-transform 2s;\n -moz-transition: -moz-transform 2s;\n -ms-transition: -ms-transform 2s;\n -o-transition: -o-transform 2s;\n transition: transform 2s;\n}\n.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine.odometer-animating-up.odometer-animating .odometer-ribbon-inner {\n -webkit-transform: translateY(-100%);\n -moz-transform: translateY(-100%);\n -ms-transform: translateY(-100%);\n -o-transform: translateY(-100%);\n transform: translateY(-100%);\n}\n.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine.odometer-animating-down .odometer-ribbon-inner {\n -webkit-transform: translateY(-100%);\n -moz-transform: translateY(-100%);\n -ms-transform: translateY(-100%);\n -o-transform: translateY(-100%);\n transform: translateY(-100%);\n}\n.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-slot-machine.odometer-animating-down.odometer-animating .odometer-ribbon-inner {\n -webkit-transition: -webkit-transform 2s;\n -moz-transition: -moz-transform 2s;\n -ms-transition: -ms-transform 2s;\n -o-transition: -o-transform 2s;\n transition: transform 2s;\n -webkit-transform: translateY(0);\n -moz-transform: translateY(0);\n -ms-transform: translateY(0);\n -o-transform: translateY(0);\n transform: translateY(0);\n}\n\n.odometer.odometer-auto-theme, .odometer.odometer-theme-slot-machine {\n -moz-border-radius: 0.34em;\n -webkit-border-radius: 0.34em;\n border-radius: 0.34em;\n background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmYwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmYTUwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');\n background-size: 100%;\n background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffff00), color-stop(100%, #ffa500));\n background-image: -moz-linear-gradient(#ffff00, #ffa500);\n background-image: -webkit-linear-gradient(#ffff00, #ffa500);\n background-image: linear-gradient(#ffff00, #ffa500);\n background-color: #fc0;\n font-family: \"Rye\", monospace;\n padding: 0.15em;\n color: #f80000;\n line-height: 1.35em;\n border: 0.03em solid #000;\n -webkit-text-stroke: 0.05em #000;\n}\n.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-slot-machine .odometer-digit {\n -moz-box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2);\n -webkit-box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2);\n box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2);\n -moz-border-radius: 0.2em;\n -webkit-border-radius: 0.2em;\n border-radius: 0.2em;\n background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PHN0b3Agb2Zmc2V0PSI4MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjY2NjY2MiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');\n background-size: 100%;\n background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cccccc), color-stop(20%, #ffffff), color-stop(80%, #ffffff), color-stop(100%, #cccccc));\n background-image: -moz-linear-gradient(top, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%);\n background-image: -webkit-linear-gradient(top, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%);\n background-image: linear-gradient(to bottom, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%);\n border: 0.03em solid #444;\n padding: 0.1em 0.15em 0;\n}\n.odometer.odometer-auto-theme .odometer-digit:first-child, .odometer.odometer-theme-slot-machine .odometer-digit:first-child {\n -moz-box-shadow: inset 0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2);\n -webkit-box-shadow: inset 0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2);\n box-shadow: inset 0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2);\n}\n.odometer.odometer-auto-theme .odometer-digit:last-child, .odometer.odometer-theme-slot-machine .odometer-digit:last-child {\n -moz-box-shadow: inset -0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2);\n -webkit-box-shadow: inset -0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2);\n box-shadow: inset -0.05em 0 0.1em rgba(0, 0, 0, 0.5), 0 0 0 0.03em #fff, 0 0 0 0.05em rgba(0, 0, 0, 0.2);\n}\n.odometer.odometer-auto-theme .odometer-digit + .odometer-digit, .odometer.odometer-theme-slot-machine .odometer-digit + .odometer-digit {\n margin-left: 0.15em;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-digit-inner {\n padding-top: 0.08em;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-slot-machine .odometer-digit .odometer-value.odometer-last-value {\n left: 0;\n right: 0;\n text-align: center;\n}\n" }, { "path": "themes/odometer-theme-train-station.css", "content": "@import url(\"//fonts.googleapis.com/css?family=Economica\");\n.odometer.odometer-auto-theme, .odometer.odometer-theme-train-station {\n display: inline-block;\n vertical-align: middle;\n *vertical-align: auto;\n *zoom: 1;\n *display: inline;\n position: relative;\n}\n.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-train-station .odometer-digit {\n display: inline-block;\n vertical-align: middle;\n *vertical-align: auto;\n *zoom: 1;\n *display: inline;\n position: relative;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-train-station .odometer-digit .odometer-digit-spacer {\n display: inline-block;\n vertical-align: middle;\n *vertical-align: auto;\n *zoom: 1;\n *display: inline;\n visibility: hidden;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-train-station .odometer-digit .odometer-digit-inner {\n text-align: left;\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n overflow: hidden;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-train-station .odometer-digit .odometer-ribbon {\n display: block;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-train-station .odometer-digit .odometer-ribbon-inner {\n display: block;\n -webkit-backface-visibility: hidden;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-train-station .odometer-digit .odometer-value {\n display: block;\n -webkit-transform: translateZ(0);\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-train-station .odometer-digit .odometer-value.odometer-last-value {\n position: absolute;\n}\n.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-train-station.odometer-animating-up .odometer-ribbon-inner {\n -webkit-transition: -webkit-transform 2s;\n -moz-transition: -moz-transform 2s;\n -ms-transition: -ms-transform 2s;\n -o-transition: -o-transform 2s;\n transition: transform 2s;\n}\n.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-train-station.odometer-animating-up.odometer-animating .odometer-ribbon-inner {\n -webkit-transform: translateY(-100%);\n -moz-transform: translateY(-100%);\n -ms-transform: translateY(-100%);\n -o-transform: translateY(-100%);\n transform: translateY(-100%);\n}\n.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-train-station.odometer-animating-down .odometer-ribbon-inner {\n -webkit-transform: translateY(-100%);\n -moz-transform: translateY(-100%);\n -ms-transform: translateY(-100%);\n -o-transform: translateY(-100%);\n transform: translateY(-100%);\n}\n.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-train-station.odometer-animating-down.odometer-animating .odometer-ribbon-inner {\n -webkit-transition: -webkit-transform 2s;\n -moz-transition: -moz-transform 2s;\n -ms-transition: -ms-transform 2s;\n -o-transition: -o-transform 2s;\n transition: transform 2s;\n -webkit-transform: translateY(0);\n -moz-transform: translateY(0);\n -ms-transform: translateY(0);\n -o-transform: translateY(0);\n transform: translateY(0);\n}\n\n.odometer.odometer-auto-theme, .odometer.odometer-theme-train-station {\n font-family: \"Economica\", sans-serif;\n}\n.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-train-station .odometer-digit {\n display: inline-block;\n vertical-align: middle;\n *vertical-align: auto;\n *zoom: 1;\n *display: inline;\n -moz-border-radius: 0.1em;\n -webkit-border-radius: 0.1em;\n border-radius: 0.1em;\n background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzExMTExMSIvPjxzdG9wIG9mZnNldD0iMzUlIiBzdG9wLWNvbG9yPSIjMTExMTExIi8+PHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9IiMzMzMzMzMiLz48c3RvcCBvZmZzZXQ9IjU1JSIgc3RvcC1jb2xvcj0iIzExMTExMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzExMTExMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');\n background-size: 100%;\n background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #111111), color-stop(35%, #111111), color-stop(55%, #333333), color-stop(55%, #111111), color-stop(100%, #111111));\n background-image: -moz-linear-gradient(top, #111111 0%, #111111 35%, #333333 55%, #111111 55%, #111111 100%);\n background-image: -webkit-linear-gradient(top, #111111 0%, #111111 35%, #333333 55%, #111111 55%, #111111 100%);\n background-image: linear-gradient(to bottom, #111111 0%, #111111 35%, #333333 55%, #111111 55%, #111111 100%);\n background-color: #222;\n padding: 0 0.15em;\n color: #fff;\n}\n.odometer.odometer-auto-theme .odometer-digit + .odometer-digit, .odometer.odometer-theme-train-station .odometer-digit + .odometer-digit {\n margin-left: 0.1em;\n}\n.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-train-station .odometer-digit .odometer-digit-inner {\n left: 0.15em;\n}\n" } ]