├── .gitignore ├── Gemfile ├── Gemfile.lock ├── Readme.md ├── build ├── images │ ├── background.jpg │ ├── bg-body.jpg │ ├── bgnoise_lg.png │ ├── body.png │ ├── browser-logos-64.png │ ├── download-24.png │ ├── fork-it-24.png │ ├── goovepaper.png │ └── users │ │ ├── sparrow.png │ │ ├── testpilot.png │ │ └── unknown.png ├── index.html ├── javascripts │ ├── application.js │ └── vendor │ │ ├── animated-progress.js │ │ ├── bootstrap-twipsy.js │ │ └── jquery.js └── stylesheets │ ├── application.css │ └── ui-progress-bar.css ├── config.rb ├── config.ru └── source ├── images ├── background.jpg ├── bg-body.jpg ├── bgnoise_lg.png ├── body.png ├── browser-logos-64.png ├── download-24.png ├── fork-it-24.png ├── goovepaper.png └── users │ ├── sparrow.png │ ├── testpilot.png │ └── unknown.png ├── index.html.haml ├── javascripts ├── application.js.coffee └── vendor │ ├── animated-progress.js │ ├── bootstrap-twipsy.js │ └── jquery.js ├── layout.haml └── stylesheets ├── application.css.scss └── ui-progress-bar.css.scss /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache/ -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source "http://rubygems.org" 2 | 3 | gem "middleman", "~>2.0.14" 4 | gem 'haml-coderay' 5 | gem 'therubyracer' 6 | gem 'rack-contrib' -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: http://rubygems.org/ 3 | specs: 4 | activesupport (3.1.3) 5 | multi_json (~> 1.0) 6 | addressable (2.2.6) 7 | chunky_png (1.2.5) 8 | coderay (1.0.5) 9 | coffee-script (2.2.0) 10 | coffee-script-source 11 | execjs 12 | coffee-script-source (1.2.0) 13 | compass (0.11.6) 14 | chunky_png (~> 1.2) 15 | fssm (>= 0.2.7) 16 | sass (~> 3.1) 17 | daemons (1.1.5) 18 | em-websocket (0.3.6) 19 | addressable (>= 2.1.1) 20 | eventmachine (>= 0.12.9) 21 | eventmachine (0.12.10) 22 | execjs (1.2.13) 23 | multi_json (~> 1.0) 24 | fssm (0.2.7) 25 | guard (0.6.3) 26 | thor (~> 0.14.6) 27 | guard-livereload (0.3.1) 28 | em-websocket (>= 0.2.0) 29 | guard (>= 0.4.0) 30 | multi_json (~> 1.0.3) 31 | haml (3.1.4) 32 | haml-coderay (0.1.2) 33 | coderay 34 | haml 35 | hike (1.2.1) 36 | http_router (0.10.2) 37 | rack (>= 1.0.0) 38 | url_mount (~> 0.2.1) 39 | i18n (0.6.0) 40 | libv8 (3.3.10.4) 41 | maruku (0.6.0) 42 | syntax (>= 1.0.0) 43 | middleman (2.0.14) 44 | coffee-script (~> 2.2.0) 45 | compass (~> 0.11.3) 46 | execjs (~> 1.2.7) 47 | guard (~> 0.6.2) 48 | haml (~> 3.1.0) 49 | maruku (~> 0.6.0) 50 | middleman-livereload (~> 0.2.0) 51 | padrino-core (~> 0.10.5) 52 | padrino-helpers (~> 0.10.5) 53 | rack (~> 1.3.5) 54 | rack-test (~> 0.6.1) 55 | sass (~> 3.1.7) 56 | sinatra (~> 1.3.1) 57 | slim (~> 1.0.2) 58 | sprockets (~> 2.0.3) 59 | thin (~> 1.2.11) 60 | thor (~> 0.14.0) 61 | tilt (~> 1.3.1) 62 | uglifier (~> 1.0.0) 63 | middleman-livereload (0.2.1) 64 | guard-livereload (~> 0.3.1) 65 | multi_json (1.0.4) 66 | padrino-core (0.10.5) 67 | activesupport (~> 3.1.0) 68 | http_router (~> 0.10.2) 69 | sinatra (~> 1.3.1) 70 | thor (~> 0.14.3) 71 | tilt (~> 1.3.0) 72 | padrino-helpers (0.10.5) 73 | i18n (~> 0.6) 74 | padrino-core (= 0.10.5) 75 | rack (1.3.6) 76 | rack-contrib (1.1.0) 77 | rack (>= 0.9.1) 78 | rack-protection (1.2.0) 79 | rack 80 | rack-test (0.6.1) 81 | rack (>= 1.0) 82 | sass (3.1.12) 83 | sinatra (1.3.2) 84 | rack (~> 1.3, >= 1.3.6) 85 | rack-protection (~> 1.2) 86 | tilt (~> 1.3, >= 1.3.3) 87 | slim (1.0.4) 88 | temple (~> 0.3.4) 89 | tilt (~> 1.3.2) 90 | sprockets (2.0.3) 91 | hike (~> 1.2) 92 | rack (~> 1.0) 93 | tilt (~> 1.1, != 1.3.0) 94 | syntax (1.0.0) 95 | temple (0.3.4) 96 | therubyracer (0.9.9) 97 | libv8 (~> 3.3.10) 98 | thin (1.2.11) 99 | daemons (>= 1.0.9) 100 | eventmachine (>= 0.12.6) 101 | rack (>= 1.0.0) 102 | thor (0.14.6) 103 | tilt (1.3.3) 104 | uglifier (1.0.4) 105 | execjs (>= 0.3.0) 106 | multi_json (>= 1.0.2) 107 | url_mount (0.2.1) 108 | rack 109 | 110 | PLATFORMS 111 | ruby 112 | 113 | DEPENDENCIES 114 | haml-coderay 115 | middleman (~> 2.0.14) 116 | rack-contrib 117 | therubyracer 118 | -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | **This project is no longer maintained. You can find a better progress bar in [Bootstrap](http://getbootstrap.com/components/#progress)** 2 | ___ 3 | 4 | Pure CSS Progress Bar 5 | ===================== 6 | 7 | A Progress Bar implemented entirely using CSS 3 gradients, shadows, and border-radius, with a touch of animation. 8 | 9 | Demo: [http://ivan.ly/ui](http://ivan.ly/ui "CSS Progress Bar") 10 | 11 | Contributing 12 | ============ 13 | 14 | Once you've made your great commits: 15 | 16 | 1. Fork This repository 17 | 2. Create a topic branch - `git checkout -b my_branch` 18 | 3. Push to your branch - `git push origin my_branch` 19 | 4. Send a pull request 20 | 5. That's it! 21 | 22 | Author 23 | ====== 24 | 25 | Ivan Vanderbyl - [TestPilot](http://testpilot.me/ivan) :: [@IvanVanderbyl](http://twitter.com/ivanvanderbyl) 26 | 27 | License 28 | ======= 29 | 30 | Copyright (c) 2010-2012 Ivan Vanderbyl, Some Rights Reserved. 31 | 32 | Originally found at [ivan.ly](http://ivan.ly/ui) and developed for use in [TestPilot](http://testpilot.me) [Continuous Integration](http://testpilot.me) service. 33 | 34 | Permission is hereby granted, free of charge, to any person obtaining a copy 35 | of this software and associated documentation files (the "Software"), to deal 36 | in the Software without restriction, including without limitation the rights 37 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 38 | copies of the Software, and to permit persons to whom the Software is 39 | furnished to do so, subject to the following conditions: 40 | 41 | The above copyright notice and this permission notice shall be included in 42 | all copies or substantial portions of the Software. 43 | 44 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 45 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 46 | FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE 47 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 48 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 49 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 50 | THE SOFTWARE. 51 | -------------------------------------------------------------------------------- /build/images/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvanderbyl/ui-progress-bar/09c4aab3f928afae7c1b7558b264bb2d13f8b30a/build/images/background.jpg -------------------------------------------------------------------------------- /build/images/bg-body.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvanderbyl/ui-progress-bar/09c4aab3f928afae7c1b7558b264bb2d13f8b30a/build/images/bg-body.jpg -------------------------------------------------------------------------------- /build/images/bgnoise_lg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvanderbyl/ui-progress-bar/09c4aab3f928afae7c1b7558b264bb2d13f8b30a/build/images/bgnoise_lg.png -------------------------------------------------------------------------------- /build/images/body.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvanderbyl/ui-progress-bar/09c4aab3f928afae7c1b7558b264bb2d13f8b30a/build/images/body.png -------------------------------------------------------------------------------- /build/images/browser-logos-64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvanderbyl/ui-progress-bar/09c4aab3f928afae7c1b7558b264bb2d13f8b30a/build/images/browser-logos-64.png -------------------------------------------------------------------------------- /build/images/download-24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvanderbyl/ui-progress-bar/09c4aab3f928afae7c1b7558b264bb2d13f8b30a/build/images/download-24.png -------------------------------------------------------------------------------- /build/images/fork-it-24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvanderbyl/ui-progress-bar/09c4aab3f928afae7c1b7558b264bb2d13f8b30a/build/images/fork-it-24.png -------------------------------------------------------------------------------- /build/images/goovepaper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvanderbyl/ui-progress-bar/09c4aab3f928afae7c1b7558b264bb2d13f8b30a/build/images/goovepaper.png -------------------------------------------------------------------------------- /build/images/users/sparrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvanderbyl/ui-progress-bar/09c4aab3f928afae7c1b7558b264bb2d13f8b30a/build/images/users/sparrow.png -------------------------------------------------------------------------------- /build/images/users/testpilot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvanderbyl/ui-progress-bar/09c4aab3f928afae7c1b7558b264bb2d13f8b30a/build/images/users/testpilot.png -------------------------------------------------------------------------------- /build/images/users/unknown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvanderbyl/ui-progress-bar/09c4aab3f928afae7c1b7558b264bb2d13f8b30a/build/images/users/unknown.png -------------------------------------------------------------------------------- /build/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pure CSS Progress bar demo 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

17 | Progress Bar 18 | 19 | 20 | 21 |

22 |
23 |
24 |
25 |
26 |
27 | 31 |
32 |
33 |
34 | 55 | 81 | 98 |
99 | 106 | 111 |
112 | 113 | 114 | -------------------------------------------------------------------------------- /build/javascripts/vendor/animated-progress.js: -------------------------------------------------------------------------------- 1 | (function( $ ){ 2 | // Simple wrapper around jQuery animate to simplify animating progress from your app 3 | // Inputs: Progress as a percent, Callback 4 | // TODO: Add options and jQuery UI support. 5 | $.fn.animateProgress = function(progress, callback) { 6 | return this.each(function() { 7 | $(this).animate({ 8 | width: progress+'%' 9 | }, { 10 | duration: 2000, 11 | 12 | // swing or linear 13 | easing: 'swing', 14 | 15 | // this gets called every step of the animation, and updates the label 16 | step: function( progress ){ 17 | var labelEl = $('.ui-label', this), 18 | valueEl = $('.value', labelEl); 19 | 20 | if (Math.ceil(progress) < 20 && $('.ui-label', this).is(":visible")) { 21 | labelEl.hide(); 22 | }else{ 23 | if (labelEl.is(":hidden")) { 24 | labelEl.fadeIn(); 25 | }; 26 | } 27 | 28 | if (Math.ceil(progress) == 100) { 29 | labelEl.text('Completed'); 30 | setTimeout(function() { 31 | labelEl.fadeOut(); 32 | }, 1000); 33 | }else{ 34 | valueEl.text(Math.ceil(progress) + '%'); 35 | } 36 | }, 37 | complete: function(scope, i, elem) { 38 | if (callback) { 39 | callback.call(this, i, elem ); 40 | }; 41 | } 42 | }); 43 | }); 44 | }; 45 | })( jQuery ); 46 | -------------------------------------------------------------------------------- /build/javascripts/vendor/bootstrap-twipsy.js: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * bootstrap-twipsy.js v1.4.0 3 | * http://twitter.github.com/bootstrap/javascript.html#twipsy 4 | * Adapted from the original jQuery.tipsy by Jason Frame 5 | * ========================================================== 6 | * Copyright 2011 Twitter, Inc. 7 | * 8 | * Licensed under the Apache License, Version 2.0 (the "License"); 9 | * you may not use this file except in compliance with the License. 10 | * You may obtain a copy of the License at 11 | * 12 | * http://www.apache.org/licenses/LICENSE-2.0 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | * ========================================================== */ 20 | 21 | 22 | 23 | !function( $ ) { 24 | 25 | "use strict" 26 | 27 | /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) 28 | * ======================================================= */ 29 | 30 | var transitionEnd 31 | 32 | $(document).ready(function () { 33 | 34 | $.support.transition = (function () { 35 | var thisBody = document.body || document.documentElement 36 | , thisStyle = thisBody.style 37 | , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined 38 | return support 39 | })() 40 | 41 | // set CSS transition event type 42 | if ( $.support.transition ) { 43 | transitionEnd = "TransitionEnd" 44 | if ( $.browser.webkit ) { 45 | transitionEnd = "webkitTransitionEnd" 46 | } else if ( $.browser.mozilla ) { 47 | transitionEnd = "transitionend" 48 | } else if ( $.browser.opera ) { 49 | transitionEnd = "oTransitionEnd" 50 | } 51 | } 52 | 53 | }) 54 | 55 | 56 | /* TWIPSY PUBLIC CLASS DEFINITION 57 | * ============================== */ 58 | 59 | var Twipsy = function ( element, options ) { 60 | this.$element = $(element) 61 | this.options = options 62 | this.enabled = true 63 | this.fixTitle() 64 | } 65 | 66 | Twipsy.prototype = { 67 | 68 | show: function() { 69 | var pos 70 | , actualWidth 71 | , actualHeight 72 | , placement 73 | , $tip 74 | , tp 75 | 76 | if (this.hasContent() && this.enabled) { 77 | $tip = this.tip() 78 | this.setContent() 79 | 80 | if (this.options.animate) { 81 | $tip.addClass('fade') 82 | } 83 | 84 | $tip 85 | .remove() 86 | .css({ top: 0, left: 0, display: 'block' }) 87 | .prependTo(document.body) 88 | 89 | pos = $.extend({}, this.$element.offset(), { 90 | width: this.$element[0].offsetWidth 91 | , height: this.$element[0].offsetHeight 92 | }) 93 | 94 | actualWidth = $tip[0].offsetWidth 95 | actualHeight = $tip[0].offsetHeight 96 | 97 | placement = maybeCall(this.options.placement, this, [ $tip[0], this.$element[0] ]) 98 | 99 | switch (placement) { 100 | case 'below': 101 | tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2} 102 | break 103 | case 'above': 104 | tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2} 105 | break 106 | case 'left': 107 | tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset} 108 | break 109 | case 'right': 110 | tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset} 111 | break 112 | } 113 | 114 | $tip 115 | .css(tp) 116 | .addClass(placement) 117 | .addClass('in') 118 | } 119 | } 120 | 121 | , setContent: function () { 122 | var $tip = this.tip() 123 | $tip.find('.twipsy-inner')[this.options.html ? 'html' : 'text'](this.getTitle()) 124 | $tip[0].className = 'twipsy' 125 | } 126 | 127 | , hide: function() { 128 | var that = this 129 | , $tip = this.tip() 130 | 131 | $tip.removeClass('in') 132 | 133 | function removeElement () { 134 | $tip.remove() 135 | } 136 | 137 | $.support.transition && this.$tip.hasClass('fade') ? 138 | $tip.bind(transitionEnd, removeElement) : 139 | removeElement() 140 | } 141 | 142 | , fixTitle: function() { 143 | var $e = this.$element 144 | if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') { 145 | $e.attr('data-original-title', $e.attr('title') || '').removeAttr('title') 146 | } 147 | } 148 | 149 | , hasContent: function () { 150 | return this.getTitle() 151 | } 152 | 153 | , getTitle: function() { 154 | var title 155 | , $e = this.$element 156 | , o = this.options 157 | 158 | this.fixTitle() 159 | 160 | if (typeof o.title == 'string') { 161 | title = $e.attr(o.title == 'title' ? 'data-original-title' : o.title) 162 | } else if (typeof o.title == 'function') { 163 | title = o.title.call($e[0]) 164 | } 165 | 166 | title = ('' + title).replace(/(^\s*|\s*$)/, "") 167 | 168 | return title || o.fallback 169 | } 170 | 171 | , tip: function() { 172 | return this.$tip = this.$tip || $('
').html(this.options.template) 173 | } 174 | 175 | , validate: function() { 176 | if (!this.$element[0].parentNode) { 177 | this.hide() 178 | this.$element = null 179 | this.options = null 180 | } 181 | } 182 | 183 | , enable: function() { 184 | this.enabled = true 185 | } 186 | 187 | , disable: function() { 188 | this.enabled = false 189 | } 190 | 191 | , toggleEnabled: function() { 192 | this.enabled = !this.enabled 193 | } 194 | 195 | , toggle: function () { 196 | this[this.tip().hasClass('in') ? 'hide' : 'show']() 197 | } 198 | 199 | } 200 | 201 | 202 | /* TWIPSY PRIVATE METHODS 203 | * ====================== */ 204 | 205 | function maybeCall ( thing, ctx, args ) { 206 | return typeof thing == 'function' ? thing.apply(ctx, args) : thing 207 | } 208 | 209 | /* TWIPSY PLUGIN DEFINITION 210 | * ======================== */ 211 | 212 | $.fn.twipsy = function (options) { 213 | $.fn.twipsy.initWith.call(this, options, Twipsy, 'twipsy') 214 | return this 215 | } 216 | 217 | $.fn.twipsy.initWith = function (options, Constructor, name) { 218 | var twipsy 219 | , binder 220 | , eventIn 221 | , eventOut 222 | 223 | if (options === true) { 224 | return this.data(name) 225 | } else if (typeof options == 'string') { 226 | twipsy = this.data(name) 227 | if (twipsy) { 228 | twipsy[options]() 229 | } 230 | return this 231 | } 232 | 233 | options = $.extend({}, $.fn[name].defaults, options) 234 | 235 | function get(ele) { 236 | var twipsy = $.data(ele, name) 237 | 238 | if (!twipsy) { 239 | twipsy = new Constructor(ele, $.fn.twipsy.elementOptions(ele, options)) 240 | $.data(ele, name, twipsy) 241 | } 242 | 243 | return twipsy 244 | } 245 | 246 | function enter() { 247 | var twipsy = get(this) 248 | twipsy.hoverState = 'in' 249 | 250 | if (options.delayIn == 0) { 251 | twipsy.show() 252 | } else { 253 | twipsy.fixTitle() 254 | setTimeout(function() { 255 | if (twipsy.hoverState == 'in') { 256 | twipsy.show() 257 | } 258 | }, options.delayIn) 259 | } 260 | } 261 | 262 | function leave() { 263 | var twipsy = get(this) 264 | twipsy.hoverState = 'out' 265 | if (options.delayOut == 0) { 266 | twipsy.hide() 267 | } else { 268 | setTimeout(function() { 269 | if (twipsy.hoverState == 'out') { 270 | twipsy.hide() 271 | } 272 | }, options.delayOut) 273 | } 274 | } 275 | 276 | if (!options.live) { 277 | this.each(function() { 278 | get(this) 279 | }) 280 | } 281 | 282 | if (options.trigger != 'manual') { 283 | binder = options.live ? 'live' : 'bind' 284 | eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus' 285 | eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur' 286 | this[binder](eventIn, enter)[binder](eventOut, leave) 287 | } 288 | 289 | return this 290 | } 291 | 292 | $.fn.twipsy.Twipsy = Twipsy 293 | 294 | $.fn.twipsy.defaults = { 295 | animate: true 296 | , delayIn: 0 297 | , delayOut: 0 298 | , fallback: '' 299 | , placement: 'above' 300 | , html: false 301 | , live: false 302 | , offset: 0 303 | , title: 'title' 304 | , trigger: 'hover' 305 | , template: '
' 306 | } 307 | 308 | $.fn.twipsy.rejectAttrOptions = [ 'title' ] 309 | 310 | $.fn.twipsy.elementOptions = function(ele, options) { 311 | var data = $(ele).data() 312 | , rejects = $.fn.twipsy.rejectAttrOptions 313 | , i = rejects.length 314 | 315 | while (i--) { 316 | delete data[rejects[i]] 317 | } 318 | 319 | return $.extend({}, options, data) 320 | } 321 | 322 | }( window.jQuery || window.ender ); 323 | -------------------------------------------------------------------------------- /build/stylesheets/application.css: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 | a, abbr, acronym, address, big, cite, code, 4 | del, dfn, em, img, ins, kbd, q, s, samp, 5 | small, strike, strong, sub, sup, tt, var, 6 | b, u, i, center, 7 | dl, dt, dd, ol, ul, li, 8 | fieldset, form, label, legend, 9 | table, caption, tbody, tfoot, thead, tr, th, td, 10 | article, aside, canvas, details, embed, 11 | figure, figcaption, footer, header, hgroup, 12 | menu, nav, output, ruby, section, summary, 13 | time, mark, audio, video { 14 | margin: 0; 15 | padding: 0; 16 | border: 0; 17 | font-size: 100%; 18 | font: inherit; 19 | vertical-align: baseline; 20 | } 21 | 22 | body { 23 | line-height: 1; 24 | } 25 | 26 | ol, ul { 27 | list-style: none; 28 | } 29 | 30 | table { 31 | border-collapse: collapse; 32 | border-spacing: 0; 33 | } 34 | 35 | caption, th, td { 36 | text-align: left; 37 | font-weight: normal; 38 | vertical-align: middle; 39 | } 40 | 41 | q, blockquote { 42 | quotes: none; 43 | } 44 | q:before, q:after, blockquote:before, blockquote:after { 45 | content: ""; 46 | content: none; 47 | } 48 | 49 | a img { 50 | border: none; 51 | } 52 | 53 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { 54 | display: block; 55 | } 56 | 57 | /* new clearfix */ 58 | .clearfix:after, section ol.links:after, section.compatibility ol.browsers:after, section.wild ol.users:after { 59 | visibility: hidden; 60 | display: block; 61 | font-size: 0; 62 | content: " "; 63 | clear: both; 64 | height: 0; 65 | } 66 | 67 | * html .clearfix, * html section ol.links, section * html ol.links, * html section.compatibility ol.browsers, section.compatibility * html ol.browsers, * html section.wild ol.users, section.wild * html ol.users { 68 | zoom: 1; 69 | } 70 | 71 | /* IE6 */ 72 | *:first-child + html .clearfix, *:first-child + html section ol.links, section *:first-child + html ol.links, *:first-child + html section.compatibility ol.browsers, section.compatibility *:first-child + html ol.browsers, *:first-child + html section.wild ol.users, section.wild *:first-child + html ol.users { 73 | zoom: 1; 74 | } 75 | 76 | /* IE7 */ 77 | body { 78 | font-family: sans-serif; 79 | color: #2a2a2a; 80 | background: -webkit-gradient(linear, 50% 0%, 50% 200, color-stop(0%, #ffffff), color-stop(10%, #ffffff), color-stop(100%, rgba(255, 255, 255, 0))) no-repeat, url('../images/bg-body.jpg?1325656353'); 81 | background: -webkit-linear-gradient(#ffffff 0%, #ffffff 20px, rgba(255, 255, 255, 0) 200px) no-repeat, url('../images/bg-body.jpg?1325656353'); 82 | background: -moz-linear-gradient(#ffffff 0%, #ffffff 20px, rgba(255, 255, 255, 0) 200px) no-repeat, url('../images/bg-body.jpg?1325656353'); 83 | background: -o-linear-gradient(#ffffff 0%, #ffffff 20px, rgba(255, 255, 255, 0) 200px) no-repeat, url('../images/bg-body.jpg?1325656353'); 84 | background: -ms-linear-gradient(#ffffff 0%, #ffffff 20px, rgba(255, 255, 255, 0) 200px) no-repeat, url('../images/bg-body.jpg?1325656353'); 85 | background: linear-gradient(#ffffff 0%, #ffffff 20px, rgba(255, 255, 255, 0) 200px) no-repeat, url('../images/bg-body.jpg?1325656353'); 86 | -moz-font-smoothing: antialiased; 87 | -webkit-font-smoothing: antialiased; 88 | -o-font-smoothing: antialiased; 89 | -ms-font-smoothing: antialiased; 90 | -khtml-font-smoothing: antialiased; 91 | font-smoothing: antialiased; 92 | padding: 20px 0; 93 | } 94 | 95 | a { 96 | color: #0388a6; 97 | } 98 | a:hover { 99 | color: #009ce0; 100 | } 101 | 102 | #container { 103 | margin: 0 auto; 104 | width: 720px; 105 | } 106 | #container h1 { 107 | padding-top: 1em; 108 | } 109 | #container h1 a { 110 | font-family: "Myriad Pro", "Helvetica Neue", sans-serif; 111 | font-size: 2.5em; 112 | color: black; 113 | text-decoration: none; 114 | line-height: 1.5em; 115 | font-weight: bold; 116 | position: relative; 117 | } 118 | #container h1 a .grad { 119 | background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(50%, rgba(255, 255, 255, 0.3)), color-stop(50%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(255, 255, 255, 0.5))); 120 | background: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.5) 100%); 121 | background: -moz-linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.5) 100%); 122 | background: -o-linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.5) 100%); 123 | background: -ms-linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.5) 100%); 124 | background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.5) 100%); 125 | display: block; 126 | position: absolute; 127 | top: 0; 128 | right: 0; 129 | bottom: 0; 130 | left: 0; 131 | } 132 | 133 | #stage { 134 | margin-top: 10px; 135 | padding: 50px; 136 | background: #fbfbfb; 137 | -moz-border-radius: 4px; 138 | -webkit-border-radius: 4px; 139 | -o-border-radius: 4px; 140 | -ms-border-radius: 4px; 141 | -khtml-border-radius: 4px; 142 | border-radius: 4px; 143 | -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 0px 1px 0, rgba(0, 0, 0, 0.3) 0 1px 3px 0, rgba(0, 0, 0, 0.1) 0 1px 5px 0; 144 | -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 0px 1px 0, rgba(0, 0, 0, 0.3) 0 1px 3px 0, rgba(0, 0, 0, 0.1) 0 1px 5px 0; 145 | -o-box-shadow: rgba(0, 0, 0, 0.2) 0 0px 1px 0, rgba(0, 0, 0, 0.3) 0 1px 3px 0, rgba(0, 0, 0, 0.1) 0 1px 5px 0; 146 | box-shadow: rgba(0, 0, 0, 0.2) 0 0px 1px 0, rgba(0, 0, 0, 0.3) 0 1px 3px 0, rgba(0, 0, 0, 0.1) 0 1px 5px 0; 147 | } 148 | 149 | section { 150 | padding: 20px 0; 151 | } 152 | section a.btn { 153 | cursor: pointer; 154 | display: inline-block; 155 | background-color: #E6E6E6; 156 | background-repeat: no-repeat; 157 | text-decoration: none; 158 | padding: 15px 25px; 159 | text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); 160 | color: #333; 161 | font-size: 13px; 162 | line-height: normal; 163 | border: 1px solid #CCC; 164 | border-bottom-color: #BBB; 165 | -moz-border-radius: 4px; 166 | -webkit-border-radius: 4px; 167 | -o-border-radius: 4px; 168 | -ms-border-radius: 4px; 169 | -khtml-border-radius: 4px; 170 | border-radius: 4px; 171 | -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 172 | -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 173 | -o-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 174 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); 175 | -moz-transition: 0.1s linear all; 176 | -webkit-transition: 0.1s linear all; 177 | -o-transition: 0.1s linear all; 178 | -ms-transition: 0.1s linear all; 179 | -khtml-transition: 0.1s linear all; 180 | transition: 0.1s linear all; 181 | border: none; 182 | font-family: "Myriad Pro", sans-serif; 183 | font-size: 20px; 184 | color: rgba(0, 0, 0, 0.8); 185 | line-height: 1em; 186 | -moz-box-shadow: rgba(255, 255, 255, 0.8) 0 1px 0 inset, rgba(0, 0, 0, 0.2) 0 2px 3px 0; 187 | -webkit-box-shadow: rgba(255, 255, 255, 0.8) 0 1px 0 inset, rgba(0, 0, 0, 0.2) 0 2px 3px 0; 188 | -o-box-shadow: rgba(255, 255, 255, 0.8) 0 1px 0 inset, rgba(0, 0, 0, 0.2) 0 2px 3px 0; 189 | box-shadow: rgba(255, 255, 255, 0.8) 0 1px 0 inset, rgba(0, 0, 0, 0.2) 0 2px 3px 0; 190 | } 191 | section a.btn span { 192 | padding-left: 26px; 193 | line-height: 24px; 194 | display: block; 195 | } 196 | section a.btn:hover { 197 | -moz-box-shadow: rgba(255, 255, 255, 0.8) 0 1px 0 inset, rgba(255, 255, 255, 0.2) 0 5px 5px inset, rgba(0, 0, 0, 0.2) 0 2px 3px 0; 198 | -webkit-box-shadow: rgba(255, 255, 255, 0.8) 0 1px 0 inset, rgba(255, 255, 255, 0.2) 0 5px 5px inset, rgba(0, 0, 0, 0.2) 0 2px 3px 0; 199 | -o-box-shadow: rgba(255, 255, 255, 0.8) 0 1px 0 inset, rgba(255, 255, 255, 0.2) 0 5px 5px inset, rgba(0, 0, 0, 0.2) 0 2px 3px 0; 200 | box-shadow: rgba(255, 255, 255, 0.8) 0 1px 0 inset, rgba(255, 255, 255, 0.2) 0 5px 5px inset, rgba(0, 0, 0, 0.2) 0 2px 3px 0; 201 | } 202 | section a.btn:active { 203 | -moz-box-shadow: rgba(255, 255, 255, 0.8) 0 1px 0 inset, rgba(0, 0, 0, 0.2) 0 2px 3px 0; 204 | -webkit-box-shadow: rgba(255, 255, 255, 0.8) 0 1px 0 inset, rgba(0, 0, 0, 0.2) 0 2px 3px 0; 205 | -o-box-shadow: rgba(255, 255, 255, 0.8) 0 1px 0 inset, rgba(0, 0, 0, 0.2) 0 2px 3px 0; 206 | box-shadow: rgba(255, 255, 255, 0.8) 0 1px 0 inset, rgba(0, 0, 0, 0.2) 0 2px 3px 0; 207 | } 208 | section a.btn.fork { 209 | background: #20A0D6; 210 | background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #20a0d6), color-stop(100%, #197faa)); 211 | background: -webkit-linear-gradient(#20a0d6, #197faa); 212 | background: -moz-linear-gradient(#20a0d6, #197faa); 213 | background: -o-linear-gradient(#20a0d6, #197faa); 214 | background: -ms-linear-gradient(#20a0d6, #197faa); 215 | background: linear-gradient(#20a0d6, #197faa); 216 | } 217 | section a.btn.fork span { 218 | background: url('../images/fork-it-24.png?1325735238') no-repeat left center; 219 | } 220 | section a.btn.fork:active { 221 | background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #197faa), color-stop(100%, #20a0d6)); 222 | background: -webkit-linear-gradient(#197faa, #20a0d6); 223 | background: -moz-linear-gradient(#197faa, #20a0d6); 224 | background: -o-linear-gradient(#197faa, #20a0d6); 225 | background: -ms-linear-gradient(#197faa, #20a0d6); 226 | background: linear-gradient(#197faa, #20a0d6); 227 | } 228 | section a.btn.download { 229 | background: #18ab3b; 230 | background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #20d74b), color-stop(100%, #18ab3b)); 231 | background: -webkit-linear-gradient(#20d74b, #18ab3b); 232 | background: -moz-linear-gradient(#20d74b, #18ab3b); 233 | background: -o-linear-gradient(#20d74b, #18ab3b); 234 | background: -ms-linear-gradient(#20d74b, #18ab3b); 235 | background: linear-gradient(#20d74b, #18ab3b); 236 | } 237 | section a.btn.download span { 238 | background: url('../images/download-24.png?1325735338') no-repeat left center; 239 | } 240 | section a.btn.download:active { 241 | background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #18ab3b), color-stop(100%, #20d74b)); 242 | background: -webkit-linear-gradient(#18ab3b, #20d74b); 243 | background: -moz-linear-gradient(#18ab3b, #20d74b); 244 | background: -o-linear-gradient(#18ab3b, #20d74b); 245 | background: -ms-linear-gradient(#18ab3b, #20d74b); 246 | background: linear-gradient(#18ab3b, #20d74b); 247 | } 248 | section ol.links li { 249 | float: left; 250 | margin-right: 1em; 251 | } 252 | section h2 { 253 | font-size: 1.5em; 254 | line-height: 2em; 255 | } 256 | section h2 span { 257 | font-size: 0.5em; 258 | } 259 | section p { 260 | line-height: 1.2em; 261 | margin-bottom: 0.5em; 262 | } 263 | section p i { 264 | font-style: italic; 265 | color: #666666; 266 | } 267 | section.wild, section.compatibility { 268 | border-top: 1px solid #ebebeb; 269 | } 270 | section.intro { 271 | padding: 0; 272 | } 273 | section article { 274 | padding: 15px; 275 | -moz-border-radius: 3px; 276 | -webkit-border-radius: 3px; 277 | -o-border-radius: 3px; 278 | -ms-border-radius: 3px; 279 | -khtml-border-radius: 3px; 280 | border-radius: 3px; 281 | background: #ebebeb; 282 | } 283 | section .download { 284 | padding: 20px 0; 285 | } 286 | section.compatibility ol.browsers { 287 | margin: 0 0 1em 0; 288 | padding: 0; 289 | } 290 | section.compatibility ol.browsers li.browser { 291 | float: left; 292 | width: 80px; 293 | margin-right: 1em; 294 | display: block; 295 | } 296 | section.compatibility ol.browsers li.browser p { 297 | font-size: 11px; 298 | width: 64px; 299 | padding-top: 64px; 300 | background: url('../images/browser-logos-64.png?1325731909') no-repeat; 301 | text-align: center; 302 | } 303 | section.compatibility ol.browsers li.browser#chrome p { 304 | background-position: 0 0; 305 | } 306 | section.compatibility ol.browsers li.browser#firefox p { 307 | background-position: -72px 0; 308 | } 309 | section.compatibility ol.browsers li.browser#ie p { 310 | background-position: -280px 0; 311 | } 312 | section.compatibility ol.browsers li.browser#opera p { 313 | background-position: -144px 0; 314 | } 315 | section.compatibility ol.browsers li.browser#safari p { 316 | background-position: -210px 0; 317 | } 318 | section.wild { 319 | padding-bottom: 0; 320 | } 321 | section.wild ol.users li.user { 322 | -moz-border-radius: 3px; 323 | -webkit-border-radius: 3px; 324 | -o-border-radius: 3px; 325 | -ms-border-radius: 3px; 326 | -khtml-border-radius: 3px; 327 | border-radius: 3px; 328 | float: left; 329 | margin-right: 1em; 330 | -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 0px 1px 0; 331 | -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0px 1px 0; 332 | -o-box-shadow: rgba(0, 0, 0, 0.5) 0 0px 1px 0; 333 | box-shadow: rgba(0, 0, 0, 0.5) 0 0px 1px 0; 334 | } 335 | section.wild ol.users li.user a { 336 | width: 150px; 337 | height: 80px; 338 | display: block; 339 | text-indent: -999px; 340 | padding: 5px; 341 | -moz-border-radius: 2px; 342 | -webkit-border-radius: 2px; 343 | -o-border-radius: 2px; 344 | -ms-border-radius: 2px; 345 | -khtml-border-radius: 2px; 346 | border-radius: 2px; 347 | } 348 | section.wild ol.users li.user#sparrow a { 349 | background: url('../images/users/sparrow.png?1325664766') no-repeat center center; 350 | } 351 | section.wild ol.users li.user#sparrow a:hover { 352 | background: url('../images/users/sparrow.png?1325664766') no-repeat center center, #e8e8e8; 353 | } 354 | section.wild ol.users li.user#test_pilot a { 355 | background: url('../images/users/testpilot.png?1325669019') no-repeat center center; 356 | } 357 | section.wild ol.users li.user#test_pilot a:hover { 358 | background: url('../images/users/testpilot.png?1325669019') no-repeat center center, #e8e8e8; 359 | } 360 | section.wild ol.users li.user#add { 361 | width: 90px; 362 | } 363 | section.wild ol.users li.user#add a { 364 | width: 80px; 365 | background: url('../images/users/unknown.png?1325669840') no-repeat center center; 366 | } 367 | section.wild ol.users li.user#add a:hover { 368 | background: url('../images/users/unknown.png?1325669840') no-repeat center center, #e8e8e8; 369 | } 370 | 371 | footer { 372 | font-size: 11px; 373 | padding: 15px 20px; 374 | } 375 | 376 | .modal .popover, .modal .twipsy { 377 | z-index: 12000; 378 | } 379 | 380 | .twipsy { 381 | display: block; 382 | position: absolute; 383 | visibility: visible; 384 | padding: 5px; 385 | font-size: 11px; 386 | z-index: 1000; 387 | filter: alpha(opacity=80); 388 | -khtml-opacity: 0.8; 389 | -moz-opacity: 0.8; 390 | opacity: 0.8; 391 | } 392 | 393 | .twipsy.fade.in { 394 | filter: alpha(opacity=80); 395 | -khtml-opacity: 0.8; 396 | -moz-opacity: 0.8; 397 | opacity: 0.8; 398 | } 399 | 400 | .twipsy.above .twipsy-arrow { 401 | bottom: 0; 402 | left: 50%; 403 | margin-left: -5px; 404 | border-left: 5px solid transparent; 405 | border-right: 5px solid transparent; 406 | border-top: 5px solid #000000; 407 | } 408 | 409 | .twipsy.left .twipsy-arrow { 410 | top: 50%; 411 | right: 0; 412 | margin-top: -5px; 413 | border-top: 5px solid transparent; 414 | border-bottom: 5px solid transparent; 415 | border-left: 5px solid #000000; 416 | } 417 | 418 | .twipsy.below .twipsy-arrow { 419 | top: 0; 420 | left: 50%; 421 | margin-left: -5px; 422 | border-left: 5px solid transparent; 423 | border-right: 5px solid transparent; 424 | border-bottom: 5px solid #000000; 425 | } 426 | 427 | .twipsy.right .twipsy-arrow { 428 | top: 50%; 429 | left: 0; 430 | margin-top: -5px; 431 | border-top: 5px solid transparent; 432 | border-bottom: 5px solid transparent; 433 | border-right: 5px solid #000000; 434 | } 435 | 436 | .twipsy-inner { 437 | padding: 3px 8px; 438 | background-color: #000000; 439 | color: white; 440 | text-align: center; 441 | max-width: 200px; 442 | text-decoration: none; 443 | -webkit-border-radius: 4px; 444 | -moz-border-radius: 4px; 445 | border-radius: 4px; 446 | } 447 | 448 | .twipsy-arrow { 449 | position: absolute; 450 | width: 0; 451 | height: 0; 452 | } 453 | 454 | .fade { 455 | -webkit-transition: opacity 0.15s linear; 456 | -moz-transition: opacity 0.15s linear; 457 | -ms-transition: opacity 0.15s linear; 458 | -o-transition: opacity 0.15s linear; 459 | transition: opacity 0.15s linear; 460 | opacity: 0; 461 | } 462 | 463 | .fade.in { 464 | opacity: 1; 465 | } 466 | -------------------------------------------------------------------------------- /build/stylesheets/ui-progress-bar.css: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright (c) 2010-2012 Ivan Vanderbyl 3 | Originally found at http://ivan.ly/ui 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | 23 | */ 24 | /* Webkit animation keyframes */ 25 | @-webkit-keyframes animate-stripes { 26 | from { 27 | background-position: 0 0; 28 | } 29 | 30 | to { 31 | background-position: 44px 0; 32 | } 33 | } 34 | 35 | @-moz-keyframes animate-stripes { 36 | from { 37 | background-position: 0 0; 38 | } 39 | 40 | to { 41 | background-position: 36px 0; 42 | } 43 | } 44 | 45 | /* Bar which is placed behind the progress */ 46 | .ui-progress-bar { 47 | /* Usual setup stuff */ 48 | position: relative; 49 | height: 25px; 50 | /* Pad right so we don't cover the borders when fully progressed */ 51 | padding-right: 2px; 52 | /* For browser that don't support gradients, we'll set a blanket background colour */ 53 | background-color: #abb2bc; 54 | /* Rounds the ends, we specify an excessive amount to make sure they are completely rounded */ 55 | /* Adjust to your liking, and don't forget to adjust to the same amount in .ui-progress */ 56 | -moz-border-radius: 25px; 57 | -webkit-border-radius: 25px; 58 | -o-border-radius: 25px; 59 | -ms-border-radius: 25px; 60 | -khtml-border-radius: 25px; 61 | border-radius: 25px; 62 | /* Background gradient */ 63 | background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #949daa), color-stop(100%, #abb2bc)); 64 | background: -webkit-linear-gradient(#949daa 0%, #abb2bc 100%); 65 | background: -moz-linear-gradient(#949daa 0%, #abb2bc 100%); 66 | background: -o-linear-gradient(#949daa 0%, #abb2bc 100%); 67 | background: -ms-linear-gradient(#949daa 0%, #abb2bc 100%); 68 | background: linear-gradient(#949daa 0%, #abb2bc 100%); 69 | /* Give it the inset look by adding some shadows and highlights */ 70 | -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px white; 71 | -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px white; 72 | -o-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px white; 73 | box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px white; 74 | /* Alt colours */ 75 | /* Progress part of the progress bar */ 76 | } 77 | .ui-progress-bar.blue .ui-progress { 78 | background-color: #339BB9!important; 79 | border: 1px solid #287a91; 80 | } 81 | .ui-progress-bar.error .ui-progress { 82 | background-color: #C43C35 !important; 83 | border: 1px solid #9c302a; 84 | } 85 | .ui-progress-bar.warning .ui-progress { 86 | background-color: #D9B31A!important; 87 | border: 1px solid #ab8d15; 88 | } 89 | .ui-progress-bar.success .ui-progress { 90 | background-color: #57A957!important; 91 | border: 1px solid #458845; 92 | } 93 | .ui-progress-bar.transition .ui-progress { 94 | -moz-transition: background-color 0.5s ease-in, border-color 1.5s ease-out, box-shadow 1.5s ease-out; 95 | -webkit-transition: background-color 0.5s ease-in, border-color 1.5s ease-out, box-shadow 1.5s ease-out; 96 | -o-transition: background-color 0.5s ease-in, border-color 1.5s ease-out, box-shadow 1.5s ease-out; 97 | transition: background-color 0.5s ease-in, border-color 1.5s ease-out, box-shadow 1.5s ease-out; 98 | } 99 | .ui-progress-bar .ui-progress { 100 | /* Usual setup stuff */ 101 | position: relative; 102 | display: block; 103 | overflow: hidden; 104 | /* Height should be 2px less than .ui-progress-bar so as to not cover borders and give it a look of being inset */ 105 | height: 23px; 106 | /* Rounds the ends, we specify an excessive amount to make sure they are completely rounded */ 107 | /* Adjust to your liking, and don't forget to adjust to the same amount in .ui-progress-bar */ 108 | -moz-border-radius: 25px; 109 | -webkit-border-radius: 25px; 110 | -o-border-radius: 25px; 111 | -ms-border-radius: 25px; 112 | -khtml-border-radius: 25px; 113 | border-radius: 25px; 114 | /* Set the background size so the stripes work correctly */ 115 | -webkit-background-size: 44px 44px; 116 | -moz-background-size: 36px 36px; 117 | /* Webkit */ 118 | /* For browser that don't support gradients, we'll set a base background colour */ 119 | background-color: #74d04c; 120 | /* Webkit background stripes and gradient */ 121 | background-image: 122 | -webkit-gradient(linear, 0 0, 100% 100%, 123 | color-stop(.25, rgba(255, 255, 255, .2)), 124 | color-stop(.25, transparent), color-stop(.5, transparent), 125 | color-stop(.5, rgba(255, 255, 255, .2)), 126 | color-stop(.75, rgba(255, 255, 255, .2)), 127 | color-stop(.75, transparent), to(transparent) 128 | ); 129 | /* Mozilla (Firefox etc) background stripes */ 130 | /* Note: Mozilla's support for gradients is more true to the original design, allowing gradients at 30 degrees, as apposed to 45 degress in webkit. */ 131 | background: -moz-repeating-linear-gradient(top left -30deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.17) 15px, rgba(255, 255, 255, 0) 15px, rgba(255, 255, 255, 0) 30px), -moz-linear-gradient(rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%), #74d04c; 132 | -moz-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px -1px 1px rgba(0, 0, 0, 0.2); 133 | -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px -1px 1px rgba(0, 0, 0, 0.2); 134 | -o-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px -1px 1px rgba(0, 0, 0, 0.2); 135 | box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), inset 0px -1px 1px rgba(0, 0, 0, 0.2); 136 | /* Give it a higher contrast outline */ 137 | border: 1px solid #4c8932; 138 | /* Animate */ 139 | -moz-animation: animate-stripes 2s linear infinite; 140 | -webkit-animation: animate-stripes 2s linear infinite; 141 | -o-animation: animate-stripes 2s linear infinite; 142 | -ms-animation: animate-stripes 2s linear infinite; 143 | -khtml-animation: animate-stripes 2s linear infinite; 144 | animation: animate-stripes 2s linear infinite; 145 | /* Style status label */ 146 | } 147 | .ui-progress-bar .ui-progress span.ui-label { 148 | -moz-font-smoothing: antialiased; 149 | -webkit-font-smoothing: antialiased; 150 | -o-font-smoothing: antialiased; 151 | -ms-font-smoothing: antialiased; 152 | -khtml-font-smoothing: antialiased; 153 | font-smoothing: antialiased; 154 | font-size: 13px; 155 | position: absolute; 156 | right: 0; 157 | line-height: 23px; 158 | padding-right: 12px; 159 | color: rgba(0, 0, 0, 0.6); 160 | text-shadow: rgba(255, 255, 255, 0.45) 0 1px 0px; 161 | white-space: nowrap; 162 | } 163 | .ui-progress-bar .ui-progress span.ui-label b { 164 | font-weight: bold; 165 | } 166 | -------------------------------------------------------------------------------- /config.rb: -------------------------------------------------------------------------------- 1 | compass_config do |config| 2 | config.line_comments = false 3 | config.output_style = :expanded 4 | end 5 | 6 | set :haml, { :format => :html5, :attr_wrapper => '"' } 7 | 8 | activate :automatic_image_sizes 9 | 10 | activate :relative_assets 11 | 12 | configure :build do 13 | activate :cache_buster 14 | end 15 | -------------------------------------------------------------------------------- /config.ru: -------------------------------------------------------------------------------- 1 | require 'rubygems' 2 | require 'middleman' 3 | require "rack/contrib/try_static" 4 | require "rack/contrib/simple_endpoint" 5 | 6 | use Rack::TryStatic, :root => "build", :urls => %w[/], :try => ['.html'] 7 | 8 | class SinatraStaticServer < Sinatra::Base 9 | 10 | get('/ui/?') do 11 | redirect '/' 12 | end 13 | 14 | not_found do 15 | send_sinatra_file('404.html') {"Sorry, I cannot find #{request.path}"} 16 | end 17 | 18 | end 19 | 20 | use SinatraStaticServer 21 | 22 | run Middleman.server 23 | -------------------------------------------------------------------------------- /source/images/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvanderbyl/ui-progress-bar/09c4aab3f928afae7c1b7558b264bb2d13f8b30a/source/images/background.jpg -------------------------------------------------------------------------------- /source/images/bg-body.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvanderbyl/ui-progress-bar/09c4aab3f928afae7c1b7558b264bb2d13f8b30a/source/images/bg-body.jpg -------------------------------------------------------------------------------- /source/images/bgnoise_lg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvanderbyl/ui-progress-bar/09c4aab3f928afae7c1b7558b264bb2d13f8b30a/source/images/bgnoise_lg.png -------------------------------------------------------------------------------- /source/images/body.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvanderbyl/ui-progress-bar/09c4aab3f928afae7c1b7558b264bb2d13f8b30a/source/images/body.png -------------------------------------------------------------------------------- /source/images/browser-logos-64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvanderbyl/ui-progress-bar/09c4aab3f928afae7c1b7558b264bb2d13f8b30a/source/images/browser-logos-64.png -------------------------------------------------------------------------------- /source/images/download-24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvanderbyl/ui-progress-bar/09c4aab3f928afae7c1b7558b264bb2d13f8b30a/source/images/download-24.png -------------------------------------------------------------------------------- /source/images/fork-it-24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvanderbyl/ui-progress-bar/09c4aab3f928afae7c1b7558b264bb2d13f8b30a/source/images/fork-it-24.png -------------------------------------------------------------------------------- /source/images/goovepaper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvanderbyl/ui-progress-bar/09c4aab3f928afae7c1b7558b264bb2d13f8b30a/source/images/goovepaper.png -------------------------------------------------------------------------------- /source/images/users/sparrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvanderbyl/ui-progress-bar/09c4aab3f928afae7c1b7558b264bb2d13f8b30a/source/images/users/sparrow.png -------------------------------------------------------------------------------- /source/images/users/testpilot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvanderbyl/ui-progress-bar/09c4aab3f928afae7c1b7558b264bb2d13f8b30a/source/images/users/testpilot.png -------------------------------------------------------------------------------- /source/images/users/unknown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivanvanderbyl/ui-progress-bar/09c4aab3f928afae7c1b7558b264bb2d13f8b30a/source/images/users/unknown.png -------------------------------------------------------------------------------- /source/index.html.haml: -------------------------------------------------------------------------------- 1 | %header 2 | %h1 3 | = link_to '/', :rel => "twipsy", :title => "This is CSS" do 4 | Progress Bar 5 | %span.grad 6 | 7 | #stage 8 | %section.work 9 | #progress_bar.ui-progress-bar.ui-container 10 | .ui-progress{:style => "width: 7%;"} 11 | %span.ui-label{:style => "display:none;"} 12 | Loading Resources 13 | %b.value 7% 14 | 15 | %section.intro{:style => "display: none;"} 16 | %article 17 | %h2 A pure CSS progress bar. 18 | 19 | %p 20 | The purpose of this project is to demonstrate the capabilities CSS3 in modern web browsers, and as such this progress bar is styled entirely using CSS. 21 | 22 | %p 23 | For funtional purposes the progression is handled by Javascript, allowing this to be used within your application 24 | right away. 25 | 26 | %p 27 | %i No styles were harmed by images in the making of this project. 28 | 29 | .download 30 | %ol.links 31 | %li.link= link_to "Get it", '/stylesheets/ui-progress-bar.css', :class => 'btn download' 32 | %li.link= link_to "Fork it", 'http://github.com/ivanvanderbyl/ui-progress-bar', :class => 'btn fork' 33 | 34 | %section.compatibility{:style => "display: none;"} 35 | %h2 Compatibility 36 | %ol.browsers 37 | %li.browser#chrome 38 | %p Google Chrome 12+ 39 | 40 | %li.browser#firefox 41 | %p Firefox 5+ 42 | 43 | %li.browser#safari 44 | %p Safari 5+ 45 | 46 | %li.browser#opera 47 | %p Opera 11+ 48 | 49 | %li.browser#ie 50 | %p Internet Explorer 9+ 51 | 52 | %article 53 | %p 54 | This progress bar will work in the latest version of all major browsers to provide full compatibility with animation, gradients, and shadows, and degrade gracefully in older versions, however 55 | %abbr{:title=>"Your Mileage May Vary"} YMMV 56 | 57 | %section.wild{:style => "display: none;"} 58 | %h2 59 | In the wild 60 | %span Who's using it? 61 | 62 | %ol.users 63 | %li.user#sparrow 64 | = link_to "Sparrow for iPhone", "http://sprw.me/comingsoon/", :rel => 'nofollow' 65 | %li.user#test_pilot 66 | = link_to "TestPilot CI", "http://testpilot.me" 67 | %li.user#add 68 | = link_to "I'm using it!", "https://github.com/ivanvanderbyl/ui-progress-bar/issues/new?title=[INSERT+PROJECT]+is+using+this", :rel => 'twipsy', :title => "I'm using this!" 69 | 70 | 71 | :javascript 72 | $(function() { 73 | App.init(); 74 | }); 75 | -------------------------------------------------------------------------------- /source/javascripts/application.js.coffee: -------------------------------------------------------------------------------- 1 | #= require "vendor/jquery" 2 | #= require "vendor/bootstrap-twipsy" 3 | #= require "vendor/animated-progress" 4 | #= require_self 5 | 6 | window.App = { 7 | sections: ['intro', 'compatibility', 'wild'] 8 | 9 | progressBar: null 10 | 11 | init: -> 12 | self = @ 13 | $('a[rel="twipsy"], abbr').twipsy() 14 | 15 | @progressBar = $("#progress_bar") 16 | @progressBar.removeClass("transition").addClass("error").addClass("transition") 17 | $(".ui-progress .ui-label", @progressBar).hide() 18 | $(".ui-progress", @progressBar).css "width", "7%" 19 | $(".ui-progress", @progressBar).animateProgress 35, -> 20 | self.fadeInNextSection() 21 | setTimeout (-> 22 | $("#progress_bar").removeClass("error").addClass "warning" 23 | $("#progress_bar .ui-progress").animateProgress 60, -> 24 | self.fadeInNextSection() 25 | $("#progress_bar").removeClass "warning" 26 | setTimeout (-> 27 | $("#progress_bar .ui-progress").animateProgress 100, -> 28 | self.fadeInNextSection() 29 | $('footer').fadeIn(1000) 30 | ), 2000 31 | ), 1000 32 | 33 | fadeIn: (section) -> 34 | $("section.#{section}").fadeIn 'slow' 35 | 36 | fadeInNextSection: -> 37 | @fadeIn(@sections.shift()) if @sections.length > 0 38 | } 39 | 40 | 41 | -------------------------------------------------------------------------------- /source/javascripts/vendor/animated-progress.js: -------------------------------------------------------------------------------- 1 | (function( $ ){ 2 | // Simple wrapper around jQuery animate to simplify animating progress from your app 3 | // Inputs: Progress as a percent, Callback 4 | // TODO: Add options and jQuery UI support. 5 | $.fn.animateProgress = function(progress, callback) { 6 | return this.each(function() { 7 | $(this).animate({ 8 | width: progress+'%' 9 | }, { 10 | duration: 2000, 11 | 12 | // swing or linear 13 | easing: 'swing', 14 | 15 | // this gets called every step of the animation, and updates the label 16 | step: function( progress ){ 17 | var labelEl = $('.ui-label', this), 18 | valueEl = $('.value', labelEl); 19 | 20 | if (Math.ceil(progress) < 20 && $('.ui-label', this).is(":visible")) { 21 | labelEl.hide(); 22 | }else{ 23 | if (labelEl.is(":hidden")) { 24 | labelEl.fadeIn(); 25 | }; 26 | } 27 | 28 | if (Math.ceil(progress) == 100) { 29 | labelEl.text('Completed'); 30 | setTimeout(function() { 31 | labelEl.fadeOut(); 32 | }, 1000); 33 | }else{ 34 | valueEl.text(Math.ceil(progress) + '%'); 35 | } 36 | }, 37 | complete: function(scope, i, elem) { 38 | if (callback) { 39 | callback.call(this, i, elem ); 40 | }; 41 | } 42 | }); 43 | }); 44 | }; 45 | })( jQuery ); 46 | -------------------------------------------------------------------------------- /source/javascripts/vendor/bootstrap-twipsy.js: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * bootstrap-twipsy.js v1.4.0 3 | * http://twitter.github.com/bootstrap/javascript.html#twipsy 4 | * Adapted from the original jQuery.tipsy by Jason Frame 5 | * ========================================================== 6 | * Copyright 2011 Twitter, Inc. 7 | * 8 | * Licensed under the Apache License, Version 2.0 (the "License"); 9 | * you may not use this file except in compliance with the License. 10 | * You may obtain a copy of the License at 11 | * 12 | * http://www.apache.org/licenses/LICENSE-2.0 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | * ========================================================== */ 20 | 21 | 22 | !function( $ ) { 23 | 24 | "use strict" 25 | 26 | /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) 27 | * ======================================================= */ 28 | 29 | var transitionEnd 30 | 31 | $(document).ready(function () { 32 | 33 | $.support.transition = (function () { 34 | var thisBody = document.body || document.documentElement 35 | , thisStyle = thisBody.style 36 | , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined 37 | return support 38 | })() 39 | 40 | // set CSS transition event type 41 | if ( $.support.transition ) { 42 | transitionEnd = "TransitionEnd" 43 | if ( $.browser.webkit ) { 44 | transitionEnd = "webkitTransitionEnd" 45 | } else if ( $.browser.mozilla ) { 46 | transitionEnd = "transitionend" 47 | } else if ( $.browser.opera ) { 48 | transitionEnd = "oTransitionEnd" 49 | } 50 | } 51 | 52 | }) 53 | 54 | 55 | /* TWIPSY PUBLIC CLASS DEFINITION 56 | * ============================== */ 57 | 58 | var Twipsy = function ( element, options ) { 59 | this.$element = $(element) 60 | this.options = options 61 | this.enabled = true 62 | this.fixTitle() 63 | } 64 | 65 | Twipsy.prototype = { 66 | 67 | show: function() { 68 | var pos 69 | , actualWidth 70 | , actualHeight 71 | , placement 72 | , $tip 73 | , tp 74 | 75 | if (this.hasContent() && this.enabled) { 76 | $tip = this.tip() 77 | this.setContent() 78 | 79 | if (this.options.animate) { 80 | $tip.addClass('fade') 81 | } 82 | 83 | $tip 84 | .remove() 85 | .css({ top: 0, left: 0, display: 'block' }) 86 | .prependTo(document.body) 87 | 88 | pos = $.extend({}, this.$element.offset(), { 89 | width: this.$element[0].offsetWidth 90 | , height: this.$element[0].offsetHeight 91 | }) 92 | 93 | actualWidth = $tip[0].offsetWidth 94 | actualHeight = $tip[0].offsetHeight 95 | 96 | placement = maybeCall(this.options.placement, this, [ $tip[0], this.$element[0] ]) 97 | 98 | switch (placement) { 99 | case 'below': 100 | tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2} 101 | break 102 | case 'above': 103 | tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2} 104 | break 105 | case 'left': 106 | tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset} 107 | break 108 | case 'right': 109 | tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset} 110 | break 111 | } 112 | 113 | $tip 114 | .css(tp) 115 | .addClass(placement) 116 | .addClass('in') 117 | } 118 | } 119 | 120 | , setContent: function () { 121 | var $tip = this.tip() 122 | $tip.find('.twipsy-inner')[this.options.html ? 'html' : 'text'](this.getTitle()) 123 | $tip[0].className = 'twipsy' 124 | } 125 | 126 | , hide: function() { 127 | var that = this 128 | , $tip = this.tip() 129 | 130 | $tip.removeClass('in') 131 | 132 | function removeElement () { 133 | $tip.remove() 134 | } 135 | 136 | $.support.transition && this.$tip.hasClass('fade') ? 137 | $tip.bind(transitionEnd, removeElement) : 138 | removeElement() 139 | } 140 | 141 | , fixTitle: function() { 142 | var $e = this.$element 143 | if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') { 144 | $e.attr('data-original-title', $e.attr('title') || '').removeAttr('title') 145 | } 146 | } 147 | 148 | , hasContent: function () { 149 | return this.getTitle() 150 | } 151 | 152 | , getTitle: function() { 153 | var title 154 | , $e = this.$element 155 | , o = this.options 156 | 157 | this.fixTitle() 158 | 159 | if (typeof o.title == 'string') { 160 | title = $e.attr(o.title == 'title' ? 'data-original-title' : o.title) 161 | } else if (typeof o.title == 'function') { 162 | title = o.title.call($e[0]) 163 | } 164 | 165 | title = ('' + title).replace(/(^\s*|\s*$)/, "") 166 | 167 | return title || o.fallback 168 | } 169 | 170 | , tip: function() { 171 | return this.$tip = this.$tip || $('
').html(this.options.template) 172 | } 173 | 174 | , validate: function() { 175 | if (!this.$element[0].parentNode) { 176 | this.hide() 177 | this.$element = null 178 | this.options = null 179 | } 180 | } 181 | 182 | , enable: function() { 183 | this.enabled = true 184 | } 185 | 186 | , disable: function() { 187 | this.enabled = false 188 | } 189 | 190 | , toggleEnabled: function() { 191 | this.enabled = !this.enabled 192 | } 193 | 194 | , toggle: function () { 195 | this[this.tip().hasClass('in') ? 'hide' : 'show']() 196 | } 197 | 198 | } 199 | 200 | 201 | /* TWIPSY PRIVATE METHODS 202 | * ====================== */ 203 | 204 | function maybeCall ( thing, ctx, args ) { 205 | return typeof thing == 'function' ? thing.apply(ctx, args) : thing 206 | } 207 | 208 | /* TWIPSY PLUGIN DEFINITION 209 | * ======================== */ 210 | 211 | $.fn.twipsy = function (options) { 212 | $.fn.twipsy.initWith.call(this, options, Twipsy, 'twipsy') 213 | return this 214 | } 215 | 216 | $.fn.twipsy.initWith = function (options, Constructor, name) { 217 | var twipsy 218 | , binder 219 | , eventIn 220 | , eventOut 221 | 222 | if (options === true) { 223 | return this.data(name) 224 | } else if (typeof options == 'string') { 225 | twipsy = this.data(name) 226 | if (twipsy) { 227 | twipsy[options]() 228 | } 229 | return this 230 | } 231 | 232 | options = $.extend({}, $.fn[name].defaults, options) 233 | 234 | function get(ele) { 235 | var twipsy = $.data(ele, name) 236 | 237 | if (!twipsy) { 238 | twipsy = new Constructor(ele, $.fn.twipsy.elementOptions(ele, options)) 239 | $.data(ele, name, twipsy) 240 | } 241 | 242 | return twipsy 243 | } 244 | 245 | function enter() { 246 | var twipsy = get(this) 247 | twipsy.hoverState = 'in' 248 | 249 | if (options.delayIn == 0) { 250 | twipsy.show() 251 | } else { 252 | twipsy.fixTitle() 253 | setTimeout(function() { 254 | if (twipsy.hoverState == 'in') { 255 | twipsy.show() 256 | } 257 | }, options.delayIn) 258 | } 259 | } 260 | 261 | function leave() { 262 | var twipsy = get(this) 263 | twipsy.hoverState = 'out' 264 | if (options.delayOut == 0) { 265 | twipsy.hide() 266 | } else { 267 | setTimeout(function() { 268 | if (twipsy.hoverState == 'out') { 269 | twipsy.hide() 270 | } 271 | }, options.delayOut) 272 | } 273 | } 274 | 275 | if (!options.live) { 276 | this.each(function() { 277 | get(this) 278 | }) 279 | } 280 | 281 | if (options.trigger != 'manual') { 282 | binder = options.live ? 'live' : 'bind' 283 | eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus' 284 | eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur' 285 | this[binder](eventIn, enter)[binder](eventOut, leave) 286 | } 287 | 288 | return this 289 | } 290 | 291 | $.fn.twipsy.Twipsy = Twipsy 292 | 293 | $.fn.twipsy.defaults = { 294 | animate: true 295 | , delayIn: 0 296 | , delayOut: 0 297 | , fallback: '' 298 | , placement: 'above' 299 | , html: false 300 | , live: false 301 | , offset: 0 302 | , title: 'title' 303 | , trigger: 'hover' 304 | , template: '
' 305 | } 306 | 307 | $.fn.twipsy.rejectAttrOptions = [ 'title' ] 308 | 309 | $.fn.twipsy.elementOptions = function(ele, options) { 310 | var data = $(ele).data() 311 | , rejects = $.fn.twipsy.rejectAttrOptions 312 | , i = rejects.length 313 | 314 | while (i--) { 315 | delete data[rejects[i]] 316 | } 317 | 318 | return $.extend({}, options, data) 319 | } 320 | 321 | }( window.jQuery || window.ender ); -------------------------------------------------------------------------------- /source/layout.haml: -------------------------------------------------------------------------------- 1 | !!! 5 2 | %html{ :lang => 'en' } 3 | %head 4 | %meta{:charset => "utf-8"} 5 | %meta{:content => "IE=edge,chrome=1", "http-equiv" => "X-UA-Compatible"} 6 | %meta{ :name => 'viewport', :content => 'initial-scale=1, maximum-scale=1, width=device-width' } 7 | 8 | %title Pure CSS Progress bar demo 9 | 10 | = stylesheet_link_tag "application.css" 11 | = stylesheet_link_tag "ui-progress-bar.css" 12 | 13 | = javascript_include_tag "application.js" 14 | 15 | = yield_content :head 16 | %body{:class => page_classes} 17 | #container 18 | = yield 19 | 20 | %footer{:style => "display: none;"} 21 | %p.copy 22 | Another #{link_to("Ivan Vanderbyl", 'http://twitter.com/IvanVanderbyl', :rel => "twipsy", :title => "Follow Ivan on Twitter")} project. Copyright © 2012 Some Rights Reserved. 23 | 24 | 25 | :javascript 26 | var _gaq = _gaq || []; 27 | _gaq.push(['_setAccount', 'UA-374977-27']); 28 | _gaq.push(['_trackPageview']); 29 | 30 | (function() { 31 | var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 32 | ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 33 | var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 34 | })(); 35 | -------------------------------------------------------------------------------- /source/stylesheets/application.css.scss: -------------------------------------------------------------------------------- 1 | @import "compass"; 2 | 3 | $link-color: #0388a6; 4 | $link-hover-color: #009ce0; 5 | $link-focus-color: false; 6 | $link-active-color: false; 7 | $link-visited-color: false; 8 | 9 | $font-color: #2a2a2a; 10 | $font-family: sans-serif; 11 | $base-font-size: 12px; 12 | $base-line-height: 18px; 13 | 14 | $total-cols: 12; 15 | $col-width: 4em; 16 | $gutter-width: 1em; 17 | $side-gutter-width: $gutter-width; 18 | 19 | @include global-reset; 20 | 21 | /* new clearfix */ 22 | .clearfix:after { 23 | visibility: hidden; 24 | display: block; 25 | font-size: 0; 26 | content: " "; 27 | clear: both; 28 | height: 0; 29 | } 30 | * html .clearfix { zoom: 1; } /* IE6 */ 31 | *:first-child+html .clearfix { zoom: 1; } /* IE7 */ 32 | 33 | @mixin clearfix { 34 | @extend .clearfix; 35 | } 36 | 37 | 38 | body { 39 | font-family: $font-family; 40 | color: $font-color; 41 | @include background(linear-gradient(white 0, white 20px, rgba(white, 0) 200px) no-repeat,image-url('bg-body.jpg')); 42 | @include experimental(font-smoothing, antialiased); 43 | padding: 20px 0; 44 | } 45 | 46 | a { 47 | @include link-colors($link-color, $link-hover-color, $link-focus-color, $link-active-color, $link-visited-color); 48 | } 49 | 50 | #container { 51 | margin: 0 auto; 52 | width: 720px; 53 | 54 | h1 { 55 | padding-top: 1em; 56 | 57 | a { 58 | font-family: "Myriad Pro", "Helvetica Neue", sans-serif; 59 | font-size: 2.5em; 60 | color: black; 61 | text-decoration: none; 62 | line-height: 1.5em; 63 | font-weight: bold; 64 | position: relative; 65 | 66 | .grad { 67 | @include background(linear-gradient(rgba(white, 0.2), rgba(white, 0.3) 50%, rgba(white, 0.2) 50%, rgba(white, 0.5) 100%)); 68 | display: block; 69 | position: absolute; 70 | top: 0; 71 | right: 0; 72 | bottom: 0; 73 | left: 0; 74 | } 75 | } 76 | } 77 | } 78 | 79 | #stage { 80 | margin-top: 10px; 81 | padding: 50px; 82 | 83 | background: darken(white, 1.5%); 84 | @include border-radius(4px); 85 | @include box-shadow(rgba(black, 0.2) 0 0px 1px 0, rgba(black, 0.3) 0 1px 3px 0, rgba(black, 0.1) 0 1px 5px 0); 86 | } 87 | 88 | section { 89 | padding: 20px 0; 90 | 91 | a.btn { 92 | cursor: pointer; 93 | display: inline-block; 94 | background-color: #E6E6E6; 95 | background-repeat: no-repeat; 96 | text-decoration: none; 97 | padding: 15px 25px; 98 | text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); 99 | color: #333; 100 | font-size: 13px; 101 | line-height: normal; 102 | border: 1px solid #CCC; 103 | border-bottom-color: #BBB; 104 | 105 | @include border-radius(4px); 106 | @include box-shadow(inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05)); 107 | @include experimental(transition, 0.1s linear all); 108 | 109 | border: none; 110 | font-family: "Myriad Pro", sans-serif; 111 | font-size: 20px; 112 | color: rgba(black, 0.8); 113 | line-height: 1em; 114 | 115 | span { 116 | padding-left: 26px; 117 | line-height: 24px; 118 | display: block; 119 | } 120 | 121 | @include box-shadow(rgba(white, 0.8) 0 1px 0 inset, rgba(black, 0.2) 0 2px 3px 0); 122 | 123 | &:hover { 124 | @include box-shadow(rgba(white, 0.8) 0 1px 0 inset, rgba(white, 0.2) 0 5px 5px inset, rgba(black, 0.2) 0 2px 3px 0); 125 | } 126 | 127 | &:active { 128 | @include box-shadow(rgba(white, 0.8) 0 1px 0 inset, rgba(black, 0.2) 0 2px 3px 0); 129 | } 130 | 131 | &.fork { 132 | background: #20A0D6; 133 | @include background(linear-gradient(#20A0D6, darken(#20A0D6, 10%))); 134 | 135 | span { 136 | background: image-url("fork-it-24.png") no-repeat left center; 137 | } 138 | 139 | &:active { 140 | @include background(linear-gradient(darken(#20A0D6, 10%), #20A0D6)); 141 | } 142 | } 143 | 144 | &.download { 145 | background: #18ab3b; 146 | @include background(linear-gradient(#20d74b, #18ab3b)); 147 | 148 | span { 149 | background: image-url("download-24.png") no-repeat left center; 150 | } 151 | 152 | &:active { 153 | @include background(linear-gradient(#18ab3b, #20d74b)); 154 | } 155 | 156 | } 157 | 158 | } 159 | 160 | ol.links { 161 | @include clearfix; 162 | li { 163 | float: left; 164 | margin-right: 1em; 165 | } 166 | } 167 | 168 | h2 { 169 | font-size: 1.5em; 170 | line-height: 2em; 171 | 172 | span { 173 | font-size: 0.5em; 174 | } 175 | } 176 | 177 | p { 178 | line-height: 1.2em; 179 | margin-bottom: 0.5em; 180 | 181 | i { 182 | font-style: italic; 183 | color: lighten(black, 40%); 184 | } 185 | } 186 | 187 | &.wild, &.compatibility { 188 | border-top: 1px solid darken(white, 8%); 189 | } 190 | 191 | &.intro { 192 | padding: 0; 193 | } 194 | 195 | article { 196 | padding: 15px; 197 | @include border-radius(3px); 198 | background: darken(white, 8%); 199 | } 200 | 201 | .download { 202 | padding: 20px 0; 203 | } 204 | 205 | &.compatibility { 206 | ol.browsers { 207 | margin: 0 0 1em 0; 208 | padding: 0; 209 | @include clearfix; 210 | 211 | li.browser { 212 | float: left; 213 | width: 80px; 214 | margin-right: 1em; 215 | display: block; 216 | p { 217 | font-size: 11px; 218 | width: 64px; 219 | padding-top: 64px; 220 | background: image-url("browser-logos-64.png") no-repeat; 221 | text-align: center; 222 | } 223 | 224 | &#chrome { 225 | p { 226 | background-position: 0 0; 227 | } 228 | } 229 | 230 | &#firefox { 231 | p { 232 | background-position: -72px 0; 233 | } 234 | } 235 | 236 | &#ie { 237 | p { 238 | background-position: -280px 0; 239 | } 240 | } 241 | 242 | &#opera { 243 | p { 244 | background-position: -144px 0; 245 | } 246 | } 247 | 248 | &#safari { 249 | p { 250 | background-position: -210px 0; 251 | } 252 | } 253 | 254 | } 255 | } 256 | } 257 | 258 | &.wild { 259 | padding-bottom: 0; 260 | 261 | ol.users { 262 | @include clearfix; 263 | li.user { 264 | @include border-radius(3px); 265 | float: left; 266 | margin-right: 1em; 267 | @include box-shadow(rgba(black, 0.5) 0 0px 1px 0); 268 | 269 | 270 | a { 271 | width: 150px; 272 | height: 80px; 273 | display: block; 274 | text-indent: -999px; 275 | padding: 5px; 276 | @include border-radius(2px); 277 | } 278 | 279 | &#sparrow a { 280 | background: image-url("users/sparrow.png") no-repeat center center; 281 | 282 | &:hover { 283 | background: image-url("users/sparrow.png") no-repeat center center, darken(white, 9%); 284 | }; 285 | } 286 | 287 | &#test_pilot a { 288 | background: image-url("users/testpilot.png") no-repeat center center; 289 | 290 | &:hover { 291 | background: image-url("users/testpilot.png") no-repeat center center, darken(white, 9%); 292 | }; 293 | } 294 | 295 | &#add { 296 | width: 90px; 297 | a { 298 | width: 80px; 299 | background: image-url("users/unknown.png") no-repeat center center; 300 | 301 | &:hover { 302 | background: image-url("users/unknown.png") no-repeat center center, darken(white, 9%); 303 | }; 304 | } 305 | } 306 | 307 | } 308 | } 309 | } 310 | } 311 | 312 | footer { 313 | font-size: 11px; 314 | padding: 15px 20px; 315 | } 316 | 317 | .modal .popover, .modal .twipsy { 318 | z-index: 12000; 319 | } 320 | .twipsy { 321 | display: block; 322 | position: absolute; 323 | visibility: visible; 324 | padding: 5px; 325 | font-size: 11px; 326 | z-index: 1000; 327 | filter: alpha(opacity=80); 328 | -khtml-opacity: 0.8; 329 | -moz-opacity: 0.8; 330 | opacity: 0.8; 331 | } 332 | .twipsy.fade.in { 333 | filter: alpha(opacity=80); 334 | -khtml-opacity: 0.8; 335 | -moz-opacity: 0.8; 336 | opacity: 0.8; 337 | } 338 | .twipsy.above .twipsy-arrow { 339 | bottom: 0; 340 | left: 50%; 341 | margin-left: -5px; 342 | border-left: 5px solid transparent; 343 | border-right: 5px solid transparent; 344 | border-top: 5px solid #000000; 345 | } 346 | .twipsy.left .twipsy-arrow { 347 | top: 50%; 348 | right: 0; 349 | margin-top: -5px; 350 | border-top: 5px solid transparent; 351 | border-bottom: 5px solid transparent; 352 | border-left: 5px solid #000000; 353 | } 354 | .twipsy.below .twipsy-arrow { 355 | top: 0; 356 | left: 50%; 357 | margin-left: -5px; 358 | border-left: 5px solid transparent; 359 | border-right: 5px solid transparent; 360 | border-bottom: 5px solid #000000; 361 | } 362 | .twipsy.right .twipsy-arrow { 363 | top: 50%; 364 | left: 0; 365 | margin-top: -5px; 366 | border-top: 5px solid transparent; 367 | border-bottom: 5px solid transparent; 368 | border-right: 5px solid #000000; 369 | } 370 | .twipsy-inner { 371 | padding: 3px 8px; 372 | background-color: #000000; 373 | color: white; 374 | text-align: center; 375 | max-width: 200px; 376 | text-decoration: none; 377 | -webkit-border-radius: 4px; 378 | -moz-border-radius: 4px; 379 | border-radius: 4px; 380 | } 381 | .twipsy-arrow { 382 | position: absolute; 383 | width: 0; 384 | height: 0; 385 | } 386 | 387 | .fade { 388 | -webkit-transition: opacity 0.15s linear; 389 | -moz-transition: opacity 0.15s linear; 390 | -ms-transition: opacity 0.15s linear; 391 | -o-transition: opacity 0.15s linear; 392 | transition: opacity 0.15s linear; 393 | opacity: 0; 394 | } 395 | .fade.in { 396 | opacity: 1; 397 | } -------------------------------------------------------------------------------- /source/stylesheets/ui-progress-bar.css.scss: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright (c) 2010-2012 Ivan Vanderbyl 3 | Originally found at http://ivan.ly/ui 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | 23 | */ 24 | 25 | $background-color: #abb2bc; 26 | $bar-color: #74d04c; 27 | $height: 25px; 28 | $border-width: 1px; 29 | $border-color: #4c8932; 30 | $border-radius: $height; 31 | 32 | @import "compass/css3"; 33 | 34 | /* Webkit animation keyframes */ 35 | @-webkit-keyframes animate-stripes { 36 | from { 37 | background-position: 0 0; 38 | } 39 | to { 40 | background-position: 44px 0; 41 | } 42 | } 43 | 44 | @-moz-keyframes animate-stripes { 45 | from { 46 | background-position: 0 0; 47 | } 48 | to { 49 | background-position: 36px 0; 50 | } 51 | } 52 | 53 | /* Bar which is placed behind the progress */ 54 | .ui-progress-bar { 55 | /* Usual setup stuff */ 56 | position: relative; 57 | height: $height; 58 | /* Pad right so we don't cover the borders when fully progressed */ 59 | padding-right: ($border-width * 2); 60 | /* For browser that don't support gradients, we'll set a blanket background colour */ 61 | background-color: $background-color; 62 | 63 | /* Rounds the ends, we specify an excessive amount to make sure they are completely rounded */ 64 | /* Adjust to your liking, and don't forget to adjust to the same amount in .ui-progress */ 65 | @include border-radius($border-radius); 66 | 67 | /* Background gradient */ 68 | @include background(linear-gradient(darken($background-color, 8%) 0%, $background-color 100%)); 69 | 70 | /* Give it the inset look by adding some shadows and highlights */ 71 | @include box-shadow(inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px white); 72 | 73 | /* Alt colours */ 74 | &.blue { 75 | .ui-progress { 76 | background-color: #339BB9!important; 77 | border: 1px solid darken(#339BB9, 10%); 78 | } 79 | } 80 | 81 | &.error { 82 | .ui-progress { 83 | background-color: #C43C35 !important; 84 | border: 1px solid darken(#C43C35, 10%); 85 | } 86 | } 87 | 88 | &.warning { 89 | .ui-progress { 90 | background-color: #D9B31A!important; 91 | border: 1px solid darken(#D9B31A, 10%); 92 | } 93 | } 94 | 95 | &.success { 96 | .ui-progress { 97 | background-color: #57A957!important; 98 | border: 1px solid darken(#57A957, 10%); 99 | } 100 | } 101 | 102 | &.transition .ui-progress { 103 | @include transition(background-color 0.5s ease-in, 104 | border-color 1.5s ease-out, 105 | width .6s ease, 106 | box-shadow 1.5s ease-out); 107 | } 108 | /* Progress part of the progress bar */ 109 | .ui-progress { 110 | /* Usual setup stuff */ 111 | position: relative; 112 | display: block; 113 | overflow: hidden; 114 | /* Height should be 2px less than .ui-progress-bar so as to not cover borders and give it a look of being inset */ 115 | height: $height - ($border-width * 2); 116 | 117 | /* Rounds the ends, we specify an excessive amount to make sure they are completely rounded */ 118 | /* Adjust to your liking, and don't forget to adjust to the same amount in .ui-progress-bar */ 119 | @include border-radius($border-radius); 120 | 121 | /* Webkit */ 122 | /* For browser that don't support gradients, we'll set a base background colour */ 123 | background-color: $bar-color; 124 | 125 | /* Webkit background stripes and gradient */ 126 | background: -webkit-gradient(linear, 0 0, 44 44, 127 | color-stop(0.00, rgba(255,255,255,0.17)), 128 | color-stop(0.25, rgba(255,255,255,0.17)), 129 | color-stop(0.26, rgba(255,255,255,0)), 130 | color-stop(0.50, rgba(255,255,255,0)), 131 | color-stop(0.51, rgba(255,255,255,0.17)), 132 | color-stop(0.75, rgba(255,255,255,0.17)), 133 | color-stop(0.76, rgba(255,255,255,0)), 134 | color-stop(1.00, rgba(255,255,255,0)) 135 | ), -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(white, 0)), color-stop(1, rgba(white, 0.35))), $bar-color; 136 | 137 | /* Mozilla (Firefox etc) background stripes */ 138 | /* Note: Mozilla's support for gradients is more true to the original design, allowing gradients at 30 degrees, as apposed to 45 degress in webkit. */ 139 | background: -moz-repeating-linear-gradient(top left -30deg, 140 | rgba(255,255,255,0.17), 141 | rgba(255,255,255,0.17) 15px, 142 | rgba(255,255,255,0) 15px, 143 | rgba(255,255,255,0) 30px 144 | ), -moz-linear-gradient(rgba(white, 0.25) 0%, rgba(white, 0) 100%), $bar-color; 145 | 146 | /* Set the background size so the stripes work correctly */ 147 | -webkit-background-size: 44px 44px; 148 | -moz-background-size: 36px 36px; 149 | 150 | @include box-shadow(inset 0px 1px 0px 0px rgba(white, 0.4), inset 0px -1px 1px rgba(black, 0.2)); 151 | 152 | /* Give it a higher contrast outline */ 153 | border: 1px solid $border-color; 154 | 155 | /* Animate */ 156 | @include experimental(animation, animate-stripes 2s linear infinite); 157 | 158 | /* Style status label */ 159 | span.ui-label { 160 | @include experimental(font-smoothing, antialiased); 161 | font-size: 13px; 162 | position: absolute; 163 | right: 0; 164 | line-height: $height - (2 * $border-width); 165 | padding-right: 12px; 166 | color: rgba(0, 0, 0, 0.6); 167 | text-shadow: rgba(255, 255, 255, 0.45) 0 1px 0px; 168 | white-space: nowrap; 169 | 170 | b { 171 | font-weight: bold; 172 | } 173 | } 174 | } 175 | } 176 | --------------------------------------------------------------------------------