fancy-progress-bars 0.1.0

data/.gitignore

@@ -0,0 +1,8 @@
+src/.sass-cache
+example/stylesheets
+example/sass/.sass-cache
+*.gem
+.bundle
+.DS_Store
+Gemfile.lock
+pkg/*

data/CHANGELOG.md

@@ -0,0 +1,3 @@
+## 0.1.0 (unreleased)
+
+  * Initial release

data/Gemfile

@@ -0,0 +1,4 @@
+source "http://rubygems.org"
+
+# Specify your gem's dependencies in progress_bars.gemspec
+gemspec

data/LICENSE

@@ -0,0 +1,19 @@
+Copyright (C) 2011 by Stefan Huber
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,53 @@
+## Install
+
+Install the plugin: (should automatically install latest dependencies for Compass, and Haml)
+    gem install fancy-progress-bars
+
+To create a new project based on fancy-progress-bars:
+
+    compass install -r fancy-progress-bars -f fancy-progress-bars
+
+To add fancy-progress-bars to an existing compass project:
+
+    # Add the following lines to your compass configuration file:
+    require 'fancy-progress-bars'
+
+    # Then run the following command:
+    compass install -r fancy-progress-bars -f fancy-progress-bars
+
+## Basic usage
+
+In order to work correctly fancy-progress-bars assume the following html (the class name is - of course - arbitrary):
+
+    <div class="progress">
+        <div><span></span></div>
+    </div>
+
+fancy-progress-bars are added by simply including the progress-bar mixin:
+
+    @import "fancy-progress-bars";
+
+    .progress {
+        @include progress-bar;
+    }
+
+Various options are available (check [examples](https://github.com/MSNexploder/fancy-progress-bars/tree/master/example) for more details).
+
+## Note on Patches/Pull Requests
+
+* Fork the project.
+* Make your feature addition or bug fix.
+* Commit, do not mess with rakefile, gemspec, version, or history. (if you want to have your own version, that is fine but bump version in a commit by itself I can ignore when I pull)
+* Send me a pull request. Bonus points for topic branches.
+
+## License
+
+(The MIT License)
+
+Copyright © 2011 Stefan Huber
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ‘Software’), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED ‘AS IS’, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/Rakefile

@@ -0,0 +1,7 @@
+# -*- encoding: utf-8 -*-
+begin
+  require 'bundler'
+  Bundler::GemHelper.install_tasks
+rescue LoadError
+  $stderr.puts "Bundler not installed. You should install it with: [sudo] gem install bundler"
+end

data/example/basics.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+  <title>Fancy Progress Bars - Basics Demo</title>
+  <link href="stylesheets/basics.css" media="screen, projection" rel="stylesheet" type="text/css" />
+  <!--[if IE]>
+    <link href="stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
+  <![endif]-->
+</head>
+  <body>
+    <h1>Fancy Progress Bars</h1>
+    <div class="base">
+      <div class="basics">
+        <div><span></span></div>
+      </div>
+
+      <div class="striped">
+        <div><span></span></div>
+      </div>
+
+      <div class="animated">
+        <div><span></span></div>
+      </div>
+    </div>
+
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" charset="utf-8"></script>
+    <script src="javascripts/progress.js" charset="utf-8"></script>
+  </body>
+</html>

data/example/colors.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+  <title>Fancy Progress Bars - Basics Demo</title>
+  <link href="stylesheets/colors.css" media="screen, projection" rel="stylesheet" type="text/css" />
+  <!--[if IE]>
+    <link href="stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
+  <![endif]-->
+</head>
+  <body>
+    <h1>Fancy Progress Bars</h1>
+    <div class="base">
+      <div class="bluish">
+        <div><span></span></div>
+      </div>
+
+      <div class="background">
+        <div><span></span></div>
+      </div>
+
+      <div class="stripes">
+        <div><span></span></div>
+      </div>
+    </div>
+
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" charset="utf-8"></script>
+    <script src="javascripts/progress.js" charset="utf-8"></script>
+  </body>
+</html>

data/example/config.rb

@@ -0,0 +1,21 @@
+# -*- encoding: utf-8 -*-
+# Require any additional compass plugins here.
+require 'fancy-progress-bars'
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "stylesheets"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "javascripts"
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+# To enable relative paths to assets via compass helper functions. Uncomment:
+relative_assets = true
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

data/example/javascripts/progress.js

@@ -0,0 +1,71 @@
+// Copyright (c) 2010 Ivan Vanderbyl
+// Originally found at http://ivan.ly/ui
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+// slightly modified for fancy-progress-bars examples by Stefan Huber
+
+(function($) {
+  // Simple wrapper around jQuery animate to simplify animating progress from your app
+  // Inputs: Progress as a percent, Callback
+  // TODO: Add options and jQuery UI support.
+  $.fn.animateProgress = function(progress, callback) {
+    return this.each(function() {
+      $(this).animate({
+        width: progress+'%'
+      }, {
+        duration: 2000,
+
+        // swing or linear
+        easing: 'swing',
+
+        // this gets called every step of the animation, and updates the label
+        step: function(progress) {
+          var labelEl = $('> span', this);
+
+          if (Math.ceil(progress) == 100) {
+            labelEl.text('Done');
+          } else {
+            labelEl.text('processing... ' + Math.ceil(progress) + '%');
+          }
+        },
+        complete: function(scope, i, elem) {
+          if (callback) {
+            callback.call(this, i, elem);
+          }
+        }
+      });
+    });
+  };
+})(jQuery);
+
+$(function() {
+  // Set initial value
+  $('.base > div > div').css('width', '7%');
+
+  // Simulate some progress
+  $('.base > div > div').animateProgress(43, function() {
+    $(this).animateProgress(79, function() {
+      setTimeout(function() {
+        $('.base > div > div').animateProgress(100, function() {
+        });
+      }, 2000);
+    });
+  });
+});

data/example/sass/_page-styles.scss

@@ -0,0 +1,45 @@
+@import "compass";
+@include global-reset;
+@include reset-html5;
+
+html {
+  @include background-image(linear-gradient(#ddd, darken(#ddd, 20)));
+  background-color: #ddd;
+  height: 100%;
+}
+
+body {
+  background: none;
+  text-align: center;
+  padding-top: 10px;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #fff;
+}
+
+#{headings()} {
+  @include text-shadow(rgba(#000, 0.3) 1px 1px 4px);
+  letter-spacing: -1px;
+  margin: 0.4em 0 0.8em;
+  font-weight: bold;
+}
+
+h1 {
+  font-size: 50px;
+}
+h2 {
+  font-size: 30px;
+}
+
+div.base {
+  @include box-shadow(rgba(#000, 0.4) 0 0 1px 1px inset);
+  @include border-radius(10px);
+  @include background-clip(padding-box);
+  background: #eee;
+  width: 810px;
+  margin: 0 auto;
+  padding: 40px 20px;
+  
+  & > div {
+    margin: 1em 0;
+  }
+}

data/example/sass/basics.scss

@@ -0,0 +1,14 @@
+@import "page-styles";
+@import "fancy-progress-bars";
+
+.basics {
+  @include progress-bar;
+}
+
+.striped {
+  @include progress-bar-striped;
+}
+
+.animated {
+  @include progress-bar-animated;
+}

data/example/sass/colors.scss

@@ -0,0 +1,16 @@
+@import "page-styles";
+@import "fancy-progress-bars";
+
+.bluish {
+  @include progress-bar-plain-animated($default-progress-bar-height, #87cefa);
+}
+
+.background {
+  @include progress-bar-plain-animated;
+  @include progress-bar-background($default-progress-bar-height, #87cefa);
+}
+
+.stripes {
+  @include progress-bar-plain-animated;
+  @include progress-bar-stripes(#87cefa);
+}

data/example/sass/ie.scss

@@ -0,0 +1,5 @@
+/* Welcome to Compass. Use this file to write IE specific override styles.
+ * Import this file using the following HTML or equivalent:
+ * <!--[if IE]>
+ *   <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
+ * <![endif]--> */

data/example/sass/size.scss

@@ -0,0 +1,14 @@
+@import "page-styles";
+@import "fancy-progress-bars";
+
+.smallish {
+  @include progress-bar(10px);
+}
+
+.big {
+  @include progress-bar(30px);
+}
+
+.huge {
+  @include progress-bar(60px);
+}

data/example/sass/styles.scss

@@ -0,0 +1,14 @@
+@import "page-styles";
+@import "fancy-progress-bars";
+
+.plain {
+  @include progress-bar-plain-striped;
+}
+
+.glossy {
+  @include progress-bar-glossy-striped;
+}
+
+.matte {
+  @include progress-bar-matte-striped;
+}

data/example/size.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+  <title>Fancy Progress Bars - Basics Demo</title>
+  <link href="stylesheets/size.css" media="screen, projection" rel="stylesheet" type="text/css" />
+  <!--[if IE]>
+    <link href="stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
+  <![endif]-->
+</head>
+  <body>
+    <h1>Fancy Progress Bars</h1>
+    <div class="base">
+      <div class="smallish">
+        <div><span></span></div>
+      </div>
+
+      <div class="big">
+        <div><span></span></div>
+      </div>
+
+      <div class="huge">
+        <div><span></span></div>
+      </div>
+    </div>
+
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" charset="utf-8"></script>
+    <script src="javascripts/progress.js" charset="utf-8"></script>
+  </body>
+</html>

data/example/styles.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
+  <title>Fancy Progress Bars - Basics Demo</title>
+  <link href="stylesheets/styles.css" media="screen, projection" rel="stylesheet" type="text/css" />
+  <!--[if IE]>
+    <link href="stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
+  <![endif]-->
+</head>
+  <body>
+    <h1>Fancy Progress Bars</h1>
+    <div class="base">
+      <div class="plain">
+        <div><span></span></div>
+      </div>
+
+      <div class="matte">
+        <div><span></span></div>
+      </div>
+
+      <div class="glossy">
+        <div><span></span></div>
+      </div>
+    </div>
+
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" charset="utf-8"></script>
+    <script src="javascripts/progress.js" charset="utf-8"></script>
+  </body>
+</html>

data/fancy-progress-bars.gemspec

@@ -0,0 +1,25 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+require "fancy-progress-bars/version"
+
+Gem::Specification.new do |s|
+  s.name        = "fancy-progress-bars"
+  s.version     = FancyProgressBars::VERSION::STRING
+  s.platform    = Gem::Platform::RUBY
+  s.authors     = ["Stefan Huber"]
+  s.email       = ["MSNexploder@gmail.com"]
+  s.homepage    = "https://github.com/MSNexploder/fancy-progress-bars"
+  s.summary     = %q{Make fancy CSS3 progress bars with the Compass stylesheet authoring framework.}
+  s.description = %q{Fancy Progress Bars helps you easily style progress bars with beautiful CSS3 features without any images. This requires the Compass stylesheet authoring framework.}
+
+  s.add_development_dependency 'bundler', '~> 1.0.10'
+
+  s.add_dependency 'compass', '~> 0.11.beta.7'
+
+  s.rubyforge_project = "fancy-progress-bars"
+
+  s.files         = `git ls-files`.split("\n")
+  s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+  s.require_paths = ["lib"]
+end

data/lib/fancy-progress-bars.rb

@@ -0,0 +1,10 @@
+# -*- encoding: utf-8 -*-
+module FancyProgressBars
+  def self.register_module
+    Compass::Frameworks.register('fancy-progress-bars',
+                                 :stylesheets_directory => File.join(File.dirname(__FILE__), 'fancy-progress-bars/stylesheets'),
+                                 :templates_directory   => File.join(File.dirname(__FILE__), 'fancy-progress-bars/templates'))
+  end
+end
+
+FancyProgressBars.register_module

data/lib/fancy-progress-bars/stylesheets/_fancy-progress-bars.scss

@@ -0,0 +1,22 @@
+// This is your framework's main stylesheet. Use it to import all default modules.
+@import "fancy-progress-bars/defaults";
+@import "fancy-progress-bars/common";
+@import "fancy-progress-bars/label";
+@import "fancy-progress-bars/stripes";
+@import "fancy-progress-bars/animated";
+@import "fancy-progress-bars/background";
+@import "fancy-progress-bars/glossy-gradient";
+@import "fancy-progress-bars/matte-gradient";
+@import "fancy-progress-bars/plain";
+
+@mixin progress-bar($height: $default-progress-bar-height, $base-color: $default-progress-bar-base-color, $background-color: $default-progress-bar-background-color) {
+  @include progress-bar-glossy($height, $base-color, $background-color);
+}
+
+@mixin progress-bar-striped($height: $default-progress-bar-height, $base-color: $default-progress-bar-base-color, $background-color: $default-progress-bar-background-color, $strip-color: $default-progress-bar-stripes-color) {
+  @include progress-bar-glossy-striped($height, $base-color, $background-color, $strip-color);
+}
+
+@mixin progress-bar-animated($height: $default-progress-bar-height, $base-color: $default-progress-bar-base-color, $background-color: $default-progress-bar-background-color, $strip-color: $default-progress-bar-stripes-color) {
+  @include progress-bar-glossy-animated($height, $base-color, $background-color, $strip-color);
+}

data/lib/fancy-progress-bars/stylesheets/fancy-progress-bars/_animated.scss

@@ -0,0 +1,18 @@
+@import "fancy-progress-bars/defaults";
+
+@-webkit-keyframes animate-stripes {
+    0% {
+       background-position: 0 0;
+    }
+    100% {
+       background-position: -50px -50px;
+    }
+}
+
+// Only webkit supported right now
+// TODO find similar stuff for other browsers
+@mixin progress-bar-animation {
+  & > div > span {
+    -webkit-animation: animate-stripes 2s linear infinite;
+  }
+}

data/lib/fancy-progress-bars/stylesheets/fancy-progress-bars/_background.scss

@@ -0,0 +1,13 @@
+@import "fancy-progress-bars/defaults";
+
+@import "compass/css3/border-radius";
+
+@mixin progress-bar-background($height: $default-progress-bar-height, $background-color: $default-progress-bar-background-color) {
+  $border-radius: ceil($height / 2);
+  @include border-radius($border-radius);
+  @include box-shadow(
+    rgba(0, 0, 0, 0.5) 0 ($height / 20) ($height / 10) inset,
+    rgba(255, 255, 255, 1.0) 0 ($height / 20) 0 0
+  );
+  background: $background-color;
+}

data/lib/fancy-progress-bars/stylesheets/fancy-progress-bars/_common.scss

@@ -0,0 +1,19 @@
+@import "compass/css3/border-radius";
+
+@import "fancy-progress-bars/defaults";
+@import "fancy-progress-bars/label";
+@import "fancy-progress-bars/background";
+
+@mixin progress-bar-base($height, $base-color, $background-color) {
+  @include progress-bar-label($height);
+  @include progress-bar-background($height, $background-color);
+  height: $height;
+
+  & > div {
+    @include border-radius(ceil($height / 2));
+    background-color: $base-color;
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+  }
+}

data/lib/fancy-progress-bars/stylesheets/fancy-progress-bars/_defaults.scss

@@ -0,0 +1,6 @@
+$default-progress-bar-height: 20px !default;
+$default-progress-bar-base-color: rgb(52, 210, 94) !default;
+$default-progress-bar-stripes-color: rgba(255, 255, 255, 0.3) !default;
+$default-progress-bar-background-color: rgb(171, 178, 188) !default;
+$default-progress-bar-label-position: right !default;
+$default-progress-bar-label-text-color: rgba(0, 0, 0, 0.6) !default;

data/lib/fancy-progress-bars/stylesheets/fancy-progress-bars/_glossy-gradient.scss

@@ -0,0 +1,42 @@
+@import "compass/css3/images";
+@import "compass/css3/box-shadow";
+
+@import "fancy-progress-bars/defaults";
+@import "fancy-progress-bars/common";
+@import "fancy-progress-bars/stripes";
+@import "fancy-progress-bars/animated";
+
+@mixin progress-bar-glossy($height: $default-progress-bar-height, $base-color: $default-progress-bar-base-color, $background-color: $default-progress-bar-background-color) {
+  @include progress-bar-base($height, $base-color, $background-color);
+  & > div {
+    @include glossy-gradient($base-color);
+    & > span {
+      @include box-shadow(
+        rgba(255, 255, 255, (lightness($base-color) / 100)) 0 0 ($height / 20) 0 inset
+      );
+    }
+  }
+}
+
+@mixin progress-bar-glossy-striped($height: $default-progress-bar-height, $base-color: $default-progress-bar-base-color, $background-color: $default-progress-bar-background-color, $strip-color: $default-progress-bar-stripes-color) {
+  @include progress-bar-glossy($height, $base-color, $background-color);
+  @include progress-bar-stripes($strip-color);
+}
+
+@mixin progress-bar-glossy-animated($height: $default-progress-bar-height, $base-color: $default-progress-bar-base-color, $background-color: $default-progress-bar-background-color, $strip-color: $default-progress-bar-stripes-color) {
+  @include progress-bar-glossy-striped($height, $base-color, $background-color, $strip-color);
+  @include progress-bar-animation;
+}
+
+@mixin glossy-gradient($base-color) {
+  $gradient-top: lighten($base-color, 15%);
+  $gradient-bottom: darken($base-color, 6%);
+
+  @include background(linear-gradient(
+    lighten($gradient-top, 18%),
+    $gradient-top 10%,
+    lighten($gradient-bottom, 3%) 50%,
+    $gradient-bottom 50%,
+    lighten($gradient-bottom, 10%)
+  ));
+}

data/lib/fancy-progress-bars/stylesheets/fancy-progress-bars/_label.scss

@@ -0,0 +1,25 @@
+@import "compass/css3/border-radius";
+
+@import "fancy-progress-bars/defaults";
+
+@mixin progress-bar-label($height: $default-progress-bar-height, $label-position: $default-progress-bar-label-position, $label-color: $default-progress-bar-label-text-color) {
+  & > div > span {
+    @if $height < 25px {
+      font-size: $height * 0.7;
+    } @else {
+      font-size: (25px * 0.7);
+    }
+    $border-radius: ceil($height / 2);
+
+    @include border-radius($border-radius);
+    overflow: hidden;
+    text-align: $label-position;
+    color: $label-color;
+    line-height: $height;
+    text-shadow: rgba(255, 255, 255, 0.45) 0 1px 0px;
+    padding: 0 ceil($height / 2);
+    white-space: nowrap;
+    position: absolute;
+      top: 0; left: 0; bottom: 0; right: 0;
+  }
+}

data/lib/fancy-progress-bars/stylesheets/fancy-progress-bars/_matte-gradient.scss

@@ -0,0 +1,36 @@
+@import "compass/css3/images";
+@import "compass/css3/box-shadow";
+
+@import "fancy-progress-bars/defaults";
+@import "fancy-progress-bars/common";
+@import "fancy-progress-bars/stripes";
+@import "fancy-progress-bars/animated";
+
+@mixin progress-bar-matte($height: $default-progress-bar-height, $base-color: $default-progress-bar-base-color, $background-color: $default-progress-bar-background-color) {
+  @include progress-bar-base($height, $base-color, $background-color);
+  & > div {
+    @include matte-gradient($base-color);
+    & > span {
+      @include box-shadow(
+        rgba(255, 255, 255, (lightness($base-color) / 100)) 0 0 ($height / 20) 0 inset
+      );
+    }
+  }
+}
+
+@mixin progress-bar-matte-striped($height: $default-progress-bar-height, $base-color: $default-progress-bar-base-color, $background-color: $default-progress-bar-background-color, $strip-color: $default-progress-bar-stripes-color) {
+  @include progress-bar-matte($height, $base-color, $background-color);
+  @include progress-bar-stripes($strip-color);
+}
+
+@mixin progress-bar-matte-animated($height: $default-progress-bar-height, $base-color: $default-progress-bar-base-color, $background-color: $default-progress-bar-background-color, $strip-color: $default-progress-bar-stripes-color) {
+  @include progress-bar-matte-striped($height, $base-color, $background-color, $strip-color);
+  @include progress-bar-animation;
+}
+
+@mixin matte-gradient($base-color) {
+  @include background(linear-gradient(
+    lighten($base-color, 15%),
+    darken($base-color, 6%)
+  ));
+}

data/lib/fancy-progress-bars/stylesheets/fancy-progress-bars/_plain.scss

@@ -0,0 +1,26 @@
+@import "compass/css3/box-shadow";
+
+@import "fancy-progress-bars/defaults";
+@import "fancy-progress-bars/common";
+@import "fancy-progress-bars/stripes";
+@import "fancy-progress-bars/animated";
+
+@mixin progress-bar-plain($height: $default-progress-bar-height, $base-color: $default-progress-bar-base-color, $background-color: $default-progress-bar-background-color) {
+  @include progress-bar-base($height, $base-color, $background-color);
+  & > div > span {
+    @include box-shadow(
+      darken($base-color, 30%) 0 ($height / 20) 0 0 inset,
+      darken($base-color, 20%) ($height / 20 * -1) ($height / 20) inset
+    );
+  }
+}
+
+@mixin progress-bar-plain-striped($height: $default-progress-bar-height, $base-color: $default-progress-bar-base-color, $background-color: $default-progress-bar-background-color, $strip-color: $default-progress-bar-stripes-color) {
+  @include progress-bar-plain($height, $base-color, $background-color);
+  @include progress-bar-stripes($strip-color);
+}
+
+@mixin progress-bar-plain-animated($height: $default-progress-bar-height, $base-color: $default-progress-bar-base-color, $background-color: $default-progress-bar-background-color, $strip-color: $default-progress-bar-stripes-color) {
+  @include progress-bar-plain-striped($height, $base-color, $background-color, $strip-color);
+  @include progress-bar-animation;
+}

data/lib/fancy-progress-bars/stylesheets/fancy-progress-bars/_stripes.scss

@@ -0,0 +1,36 @@
+@import "compass/css3/images";
+
+@import "fancy-progress-bars/defaults";
+
+@mixin progress-bar-stripes($strip-color: $default-progress-bar-stripes-color) {
+  & > div > span {
+    @include progress-bar-stripes-webkit-fix($strip-color);
+    @include background(linear-gradient(
+      -45deg,
+      $strip-color 0%,
+      $strip-color 25%,
+      rgba(0, 0, 0, 0.0) 25%, // TODO switch to transparent once supported
+      rgba(0, 0, 0, 0.0) 50%, // TODO switch to transparent once supported
+      $strip-color 50%,
+      $strip-color 75%,
+      rgba(0, 0, 0, 0.0) 75%, // TODO switch to transparent once supported
+      rgba(0, 0, 0, 0.0) 100% // TODO switch to transparent once supported
+    ));
+    background-size: 50px 50px;
+  }
+}
+
+// Fix for older webkit not supporting the offical gradient syntax
+@mixin progress-bar-stripes-webkit-fix ($strip-color) {
+  background-image:
+     -webkit-gradient(linear, 0 0, 100% 100%,
+        color-stop(0.0, $strip-color),
+        color-stop(0.25, $strip-color),
+        color-stop(0.25, transparent),
+        color-stop(0.5, transparent),
+        color-stop(0.5, $strip-color),
+        color-stop(0.75, $strip-color),
+        color-stop(0.75, transparent),
+        color-stop(1.0, transparent)
+     );
+}

data/lib/fancy-progress-bars/templates/project/manifest.rb

@@ -0,0 +1,2 @@
+# Make sure you list all the project template files here in the manifest.
+stylesheet 'screen.scss', :media => 'screen, projection'

data/lib/fancy-progress-bars/templates/project/screen.scss

@@ -0,0 +1,3 @@
+// This is where you put the contents of the main stylesheet for the user's project.
+// It should import your sass stylesheets and demonstrate how to use them.
+@import "fancy-progress-bars";

data/lib/fancy-progress-bars/version.rb

@@ -0,0 +1,11 @@
+# -*- encoding: utf-8 -*-
+module FancyProgressBars
+  module VERSION #:nodoc:
+      MAJOR = 0
+      MINOR = 1
+      TINY  = 0
+      PRE   = nil
+
+      STRING = [MAJOR, MINOR, TINY, PRE].compact.join('.')
+    end
+end

metadata

@@ -0,0 +1,103 @@
+--- !ruby/object:Gem::Specification
+name: fancy-progress-bars
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+  prerelease: 
+platform: ruby
+authors:
+- Stefan Huber
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2011-04-21 00:00:00.000000000Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: &2152911800 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 1.0.10
+  type: :development
+  prerelease: false
+  version_requirements: *2152911800
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: &2152911300 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 0.11.beta.7
+  type: :runtime
+  prerelease: false
+  version_requirements: *2152911300
+description: Fancy Progress Bars helps you easily style progress bars with beautiful
+  CSS3 features without any images. This requires the Compass stylesheet authoring
+  framework.
+email:
+- MSNexploder@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- CHANGELOG.md
+- Gemfile
+- LICENSE
+- README.md
+- Rakefile
+- example/basics.html
+- example/colors.html
+- example/config.rb
+- example/javascripts/progress.js
+- example/sass/_page-styles.scss
+- example/sass/basics.scss
+- example/sass/colors.scss
+- example/sass/ie.scss
+- example/sass/size.scss
+- example/sass/styles.scss
+- example/size.html
+- example/styles.html
+- fancy-progress-bars.gemspec
+- lib/fancy-progress-bars.rb
+- lib/fancy-progress-bars/stylesheets/_fancy-progress-bars.scss
+- lib/fancy-progress-bars/stylesheets/fancy-progress-bars/_animated.scss
+- lib/fancy-progress-bars/stylesheets/fancy-progress-bars/_background.scss
+- lib/fancy-progress-bars/stylesheets/fancy-progress-bars/_common.scss
+- lib/fancy-progress-bars/stylesheets/fancy-progress-bars/_defaults.scss
+- lib/fancy-progress-bars/stylesheets/fancy-progress-bars/_glossy-gradient.scss
+- lib/fancy-progress-bars/stylesheets/fancy-progress-bars/_label.scss
+- lib/fancy-progress-bars/stylesheets/fancy-progress-bars/_matte-gradient.scss
+- lib/fancy-progress-bars/stylesheets/fancy-progress-bars/_plain.scss
+- lib/fancy-progress-bars/stylesheets/fancy-progress-bars/_stripes.scss
+- lib/fancy-progress-bars/templates/project/manifest.rb
+- lib/fancy-progress-bars/templates/project/screen.scss
+- lib/fancy-progress-bars/version.rb
+homepage: https://github.com/MSNexploder/fancy-progress-bars
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: fancy-progress-bars
+rubygems_version: 1.7.2
+signing_key: 
+specification_version: 3
+summary: Make fancy CSS3 progress bars with the Compass stylesheet authoring framework.
+test_files: []
+has_rdoc: