pace-rails 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b4527a1298fd354412b9efb132581487a9ba106e
-  data.tar.gz: 0923cbabf0c0cc617d4d4361b542440a177601c8
+  metadata.gz: c5b020bf510f38281d7c99219192224c1967175a
+  data.tar.gz: c1664e6ae08983f4d83ad529a4c689c3cd756909
 SHA512:
-  metadata.gz: 35bcbeb06321400f80e3319bda5fd709f1963115714a358f024bc2fe8452306d64ecb9b7c2b87a2d89e51c219dc7b408d35abfab48c759bdb4c9c86e5195af6c
-  data.tar.gz: f7eaa0b09f9150d5a0ae50ead276c42e4a7494b54233b62f68509a09fb82d3ffa018d9bbc3e2c16501196c517f77ccbf9838d9eb47d4ed1ab0b0cb7785db3a0c
+  metadata.gz: 904ca015206f25e15fe050e9364564a9d268c3def5976484e4e158655ee0b35e02861ec4bad214658995df25a85d02f8ac7dd579c9c3f5f6ee85da9a286395b6
+  data.tar.gz: b4b5be31380660dc0facda56cb1abb02dab466cb94208d7c3b044b61f1f9f058126b8ed2155a0604d86bcc37a2fd2ad01ad0f6ad00b3985cfa98975fd913cf25

data/README.md

@@ -5,7 +5,7 @@ Automatic web page progress bar.
 -	[Demo](http://github.hubspot.com/pace/docs/welcome/)
 -	[Documentation](http://github.hubspot.com/pace/)
 
-## Rails 3+ | 4+
+## Rails 4+
 
 Include pace-rails in Gemfile:
 

data/lib/pace/rails/version.rb

@@ -1,5 +1,5 @@
 module Pace
   module Rails
-    VERSION = "0.1.1"
+    VERSION = "0.1.2"
   end
 end

data/vendor/assets/javascripts/pace/pace.js

@@ -1,16 +1,16 @@
 (function() {
-  var AjaxMonitor, Bar, DocumentMonitor, ElementMonitor, ElementTracker, EventLagMonitor, Evented, Events, NoTargetError, RequestIntercept, SOURCE_KEYS, Scaler, SocketRequestTracker, XHRRequestTracker, animation, avgAmplitude, bar, cancelAnimation, cancelAnimationFrame, defaultOptions, extend, extendNative, getFromDOM, getIntercept, handlePushState, ignoreStack, init, now, options, requestAnimationFrame, result, runAnimation, scalers, shouldIgnoreURL, shouldTrack, source, sources, uniScaler, _WebSocket, _XDomainRequest, _XMLHttpRequest, _i, _intercept, _len, _pushState, _ref, _ref1, _replaceState,
+  var AjaxMonitor, Bar, DocumentMonitor, ElementMonitor, ElementTracker, EventLagMonitor, Evented, Events, NoTargetError, Pace, RequestIntercept, SOURCE_KEYS, Scaler, SocketRequestTracker, XHRRequestTracker, animation, avgAmplitude, bar, cancelAnimation, cancelAnimationFrame, defaultOptions, extend, extendNative, getFromDOM, getIntercept, handlePushState, ignoreStack, init, now, options, requestAnimationFrame, result, runAnimation, scalers, shouldIgnoreURL, shouldTrack, source, sources, uniScaler, _WebSocket, _XDomainRequest, _XMLHttpRequest, _i, _intercept, _len, _pushState, _ref, _ref1, _replaceState,
     __slice = [].slice,
     __hasProp = {}.hasOwnProperty,
     __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
     __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
 
   defaultOptions = {
-    catchupTime: 500,
+    catchupTime: 100,
     initialRate: .03,
-    minTime: 500,
-    ghostTime: 500,
-    maxProgressPerFrame: 10,
+    minTime: 250,
+    ghostTime: 100,
+    maxProgressPerFrame: 20,
     easeFactor: 1.25,
     startOnPageLoad: true,
     restartOnPushState: true,
@@ -202,9 +202,9 @@
 
   })();
 
-  if (window.Pace == null) {
-    window.Pace = {};
-  }
+  Pace = window.Pace || {};
+
+  window.Pace = Pace;
 
   extend(Pace, Evented.prototype);
 
@@ -280,12 +280,17 @@
     };
 
     Bar.prototype.render = function() {
-      var el, progressStr;
+      var el, key, progressStr, transform, _j, _len1, _ref2;
       if (document.querySelector(options.target) == null) {
         return false;
       }
       el = this.getElement();
-      el.children[0].style.width = "" + this.progress + "%";
+      transform = "translate3d(" + this.progress + "%, 0, 0)";
+      _ref2 = ['webkitTransform', 'msTransform', 'transform'];
+      for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
+        key = _ref2[_j];
+        el.children[0].style[key] = transform;
+      }
       if (!this.lastRenderedProgress || this.lastRenderedProgress | 0 !== this.progress | 0) {
         el.children[0].setAttribute('data-progress-text', "" + (this.progress | 0) + "%");
         if (this.progress >= 100) {
@@ -344,13 +349,22 @@
   _WebSocket = window.WebSocket;
 
   extendNative = function(to, from) {
-    var e, key, val, _results;
+    var e, key, _results;
     _results = [];
     for (key in from.prototype) {
       try {
-        val = from.prototype[key];
-        if ((to[key] == null) && typeof val !== 'function') {
-          _results.push(to[key] = val);
+        if ((to[key] == null) && typeof from[key] !== 'function') {
+          if (typeof Object.defineProperty === 'function') {
+            _results.push(Object.defineProperty(to, key, {
+              get: function() {
+                return from.prototype[key];
+              },
+              configurable: true,
+              enumerable: true
+            }));
+          } else {
+            _results.push(to[key] = from.prototype[key]);
+          }
         } else {
           _results.push(void 0);
         }
@@ -573,13 +587,13 @@
           } else {
             return _this.progress = _this.progress + (100 - _this.progress) / 2;
           }
-        });
+        }, false);
         _ref2 = ['load', 'abort', 'timeout', 'error'];
         for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
           event = _ref2[_j];
           request.addEventListener(event, function() {
             return _this.progress = 100;
-          });
+          }, false);
         }
       } else {
         _onreadystatechange = request.onreadystatechange;
@@ -609,7 +623,7 @@
         event = _ref2[_j];
         request.addEventListener(event, function() {
           return _this.progress = 100;
-        });
+        }, false);
       }
     }
 
@@ -907,7 +921,7 @@
   };
 
   if (typeof define === 'function' && define.amd) {
-    define(function() {
+    define(['pace'], function() {
       return Pace;
     });
   } else if (typeof exports === 'object') {

data/vendor/assets/stylesheets/pace/pace-theme-barber-shop.css

@@ -1,10 +1,19 @@
-/* This is a compiled file, you should be editing the file in the templates directory */
 .pace {
   -webkit-pointer-events: none;
   pointer-events: none;
+
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
+
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2000;
+  width: 100%;
+  height: 12px;
+  background: #fff;
 }
 
 .pace-inactive {
@@ -12,26 +21,27 @@
 }
 
 .pace .pace-progress {
-  background-color: #29d;
+  background-color: `args.color || "#29d"`;
   position: fixed;
-  z-index: 2000;
   top: 0;
-  left: 0;
-  height: 12px;
+  bottom: 0;
+  right: 100%;
+  width: 100%;
   overflow: hidden;
-
-  -webkit-transition: width 1s;
-  -moz-transition: width 1s;
-  -o-transition: width 1s;
-  transition: width 1s;
 }
 
-.pace .pace-progress-inner {
-  position: absolute;
+.pace .pace-activity {
+  position: fixed;
   top: 0;
-  left: 0;
   right: -32px;
   bottom: 0;
+  left: 0;
+
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 
   background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
@@ -43,30 +53,30 @@
   -o-background-size: 32px 32px;
   background-size: 32px 32px;
 
-  -webkit-animation: pace-stripe-animation 500ms linear infinite;
-  -moz-animation: pace-stripe-animation 500ms linear infinite;
-  -ms-animation: pace-stripe-animation 500ms linear infinite;
-  -o-animation: pace-stripe-animation 500ms linear infinite;
-  animation: pace-stripe-animation 500ms linear infinite;
+  -webkit-animation: pace-theme-barber-shop-motion 500ms linear infinite;
+  -moz-animation: pace-theme-barber-shop-motion 500ms linear infinite;
+  -ms-animation: pace-theme-barber-shop-motion 500ms linear infinite;
+  -o-animation: pace-theme-barber-shop-motion 500ms linear infinite;
+  animation: pace-theme-barber-shop-motion 500ms linear infinite;
 }
 
-@-webkit-keyframes pace-stripe-animation {
+@-webkit-keyframes pace-theme-barber-shop-motion {
   0% { -webkit-transform: none; transform: none; }
   100% { -webkit-transform: translate(-32px, 0); transform: translate(-32px, 0); }
 }
-@-moz-keyframes pace-stripe-animation {
+@-moz-keyframes pace-theme-barber-shop-motion {
   0% { -moz-transform: none; transform: none; }
   100% { -moz-transform: translate(-32px, 0); transform: translate(-32px, 0); }
 }
-@-o-keyframes pace-stripe-animation {
+@-o-keyframes pace-theme-barber-shop-motion {
   0% { -o-transform: none; transform: none; }
   100% { -o-transform: translate(-32px, 0); transform: translate(-32px, 0); }
 }
-@-ms-keyframes pace-stripe-animation {
+@-ms-keyframes pace-theme-barber-shop-motion {
   0% { -ms-transform: none; transform: none; }
   100% { -ms-transform: translate(-32px, 0); transform: translate(-32px, 0); }
 }
-@keyframes pace-stripe-animation {
+@keyframes pace-theme-barber-shop-motion {
   0% { transform: none; transform: none; }
   100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }
 }

data/vendor/assets/stylesheets/pace/pace-theme-big-counter.css

@@ -1,7 +1,7 @@
-/* This is a compiled file, you should be editing the file in the templates directory */
 .pace {
   -webkit-pointer-events: none;
   pointer-events: none;
+
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
@@ -18,6 +18,10 @@
   right: 0;
   height: 5rem;
   width: 5rem;
+
+  -webkit-transform: translate3d(0, 0, 0) !important;
+  -ms-transform: translate3d(0, 0, 0) !important;
+  transform: translate3d(0, 0, 0) !important;
 }
 
 .pace .pace-progress:after {
@@ -31,5 +35,5 @@
   font-size: 5rem;
   line-height: 1;
   text-align: right;
-  color: rgba(0, 0, 0, 0.19999999999999996);
+  color: `Color(args.color || '#000').clearer(0.8).rgbString()`;
 }

data/vendor/assets/stylesheets/pace/pace-theme-bounce.css

@@ -1,4 +1,3 @@
-/* This is a compiled file, you should be editing the file in the templates directory */
 .pace {
   width: 140px;
   height: 300px;
@@ -30,7 +29,7 @@
   width: 140px;
   height: 140px;
   border-radius: 70px;
-  background: #29d;
+  background: `args.color || "#29d"`;
   position: absolute;
   top: 0;
   z-index: 1911;
@@ -53,11 +52,11 @@
   background: rgba(20, 20, 20, .1);
   box-shadow: 0 0 20px 35px rgba(20, 20, 20, .1);
   border-radius: 30px / 40px;
-  -webkit-transform: scaleY(.3);
-  -moz-transform: scaleY(.3);
-  -ms-transform: scaleY(.3);
-  -o-transform: scaleY(.3);
-  transform: scaleY(.3);
+  -webkit-transform: scaleY(.3) !important;
+  -moz-transform: scaleY(.3) !important;
+  -ms-transform: scaleY(.3) !important;
+  -o-transform: scaleY(.3) !important;
+  transform: scaleY(.3) !important;
   -webkit-animation: pace-compress .5s infinite alternate;
   -moz-animation: pace-compress .5s infinite alternate;
   -o-animation: pace-compress .5s infinite alternate;

data/vendor/assets/stylesheets/pace/pace-theme-center-atom.css

@@ -1,4 +1,3 @@
-/* This is a compiled file, you should be editing the file in the templates directory */
 .pace.pace-inactive {
   display: none;
 }
@@ -26,14 +25,18 @@
   z-index: 2000;
   position: absolute;
   height: 60px;
-  width: 100px !important;
+  width: 100px;
+
+  -webkit-transform: translate3d(0, 0, 0) !important;
+  -ms-transform: translate3d(0, 0, 0) !important;
+  transform: translate3d(0, 0, 0) !important;
 }
 
 .pace .pace-progress:before {
   content: attr(data-progress-text);
   text-align: center;
   color: #fff;
-  background: #29d;
+  background: `args.color || "#29d"`;
   border-radius: 50%;
   font-family: "Helvetica Neue", sans-serif;
   font-size: 14px;
@@ -48,27 +51,6 @@
   position: absolute;
 }
 
-.pace .pace-progress:after {
-  border-radius: 50%;
-  border: 5px solid #29d;
-  content: ' ';
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 60px;
-  width: 100px;
-
-  -webkit-transform: rotate(90deg);
-     -moz-transform: rotate(90deg);
-       -o-transform: rotate(90deg);
-          transform: rotate(90deg);
-  -webkit-animation: spin-3 2s linear infinite;
-     -moz-animation: spin-3 2s linear infinite;
-       -o-animation: spin-3 2s linear infinite;
-          animation: spin-3 2s linear infinite;
-}
-
 .pace .pace-activity {
   font-size: 15px;
   line-height: 1;
@@ -78,11 +60,15 @@
   width: 100px;
 
   display: block;
+  -webkit-animation: pace-theme-center-atom-spin 2s linear infinite;
+  -moz-animation: pace-theme-center-atom-spin 2s linear infinite;
+  -o-animation: pace-theme-center-atom-spin 2s linear infinite;
+  animation: pace-theme-center-atom-spin 2s linear infinite;
 }
 
-.pace .pace-activity:before {
+.pace .pace-activity {
   border-radius: 50%;
-  border: 5px solid #29d;
+  border: 5px solid `args.color || "#29d"`;
   content: ' ';
   display: block;
   position: absolute;
@@ -90,81 +76,55 @@
   left: 0;
   height: 60px;
   width: 100px;
-
-  -webkit-animation: spin-1 2s linear infinite;
-     -moz-animation: spin-1 2s linear infinite;
-       -o-animation: spin-1 2s linear infinite;
-          animation: spin-1 2s linear infinite;
 }
 
-.pace .pace-activity:after{
+.pace .pace-activity:after {
   border-radius: 50%;
-  border: 5px solid #29d;
+  border: 5px solid `args.color || "#29d"`;
   content: ' ';
   display: block;
   position: absolute;
-  top: 0;
-  left: 0;
+  top: -5px;
+  left: -5px;
   height: 60px;
   width: 100px;
 
-  -webkit-transform: rotate(45deg);
-     -moz-transform: rotate(45deg);
-       -o-transform: rotate(45deg);
-          transform: rotate(45deg);
-  -webkit-animation: spin-2 2s linear infinite;
-     -moz-animation: spin-2 2s linear infinite;
-       -o-animation: spin-2 2s linear infinite;
-          animation: spin-2 2s linear infinite;
+  -webkit-transform: rotate(60deg);
+  -moz-transform: rotate(60deg);
+  -o-transform: rotate(60deg);
+  transform: rotate(60deg);
 }
 
-@-webkit-keyframes spin-1 {
-  0%  { -webkit-transform: rotate(0deg); }
-  100%{ -webkit-transform: rotate(359deg);}
-}
-@-moz-keyframes spin-1 {
-  0%  { -moz-transform: rotate(0deg); }
-  100%{ -moz-transform: rotate(359deg);}
-}
-@-o-keyframes spin-1 {
-  0%  { -o-transform: rotate(0deg); }
-  100%{ -o-transform: rotate(359deg);}
-}
-@keyframes spin-1 {
-  0%  { transform: rotate(0deg); }
-  100%{ transform: rotate(359deg);}
-}
+.pace .pace-activity:before {
+  border-radius: 50%;
+  border: 5px solid `args.color || "#29d"`;
+  content: ' ';
+  display: block;
+  position: absolute;
+  top: -5px;
+  left: -5px;
+  height: 60px;
+  width: 100px;
 
-@-webkit-keyframes spin-2 {
-  0%  { -webkit-transform: rotate(59.8deg); }
-  100%{ -webkit-transform: rotate(418.8deg);}
-}
-@-moz-keyframes spin-2 {
-  0%  { -moz-transform: rotate(59.8deg); }
-  100%{ -moz-transform: rotate(418.8deg);}
-}
-@-o-keyframes spin-2 {
-  0%  { -o-transform: rotate(59.8deg); }
-  100%{ -o-transform: rotate(418.8deg);}
-}
-@keyframes spin-2 {
-  0%  { transform: rotate(59.8deg); }
-  100%{ transform: rotate(418.8deg);}
+  -webkit-transform: rotate(120deg);
+  -moz-transform: rotate(120deg);
+  -o-transform: rotate(120deg);
+  transform: rotate(120deg);
 }
 
-@-webkit-keyframes spin-3 {
-  0%  { -webkit-transform: rotate(119.6deg); }
-  100%{ -webkit-transform: rotate(478.6deg);}
+@-webkit-keyframes pace-theme-center-atom-spin {
+  0%   { -webkit-transform: rotate(0deg) }
+  100% { -webkit-transform: rotate(359deg) }
+}
+@-moz-keyframes pace-theme-center-atom-spin {
+  0%   { -moz-transform: rotate(0deg) }
+  100% { -moz-transform: rotate(359deg) }
 }
-@-moz-keyframes spin-3 {
-  0%  { -moz-transform: rotate(119.6deg); }
-  100%{ -moz-transform: rotate(478.6deg);}
+@-o-keyframes pace-theme-center-atom-spin {
+  0%   { -o-transform: rotate(0deg) }
+  100% { -o-transform: rotate(359deg) }
 }
-@-o-keyframes spin-3 {
-  0%  { -o-transform: rotate(119.6deg); }
-  100%{ -o-transform: rotate(478.6deg);}
+@keyframes pace-theme-center-atom-spin {
+  0%   { transform: rotate(0deg) }
+  100% { transform: rotate(359deg) }
 }
-@keyframes spin-3 {
-  0%  { transform: rotate(119.6deg); }
-  100%{ transform: rotate(478.6deg);}
-}

data/vendor/assets/stylesheets/pace/pace-theme-center-circle.css

@@ -1,4 +1,3 @@
-/* This is a compiled file, you should be editing the file in the templates directory */
 .pace {
   -webkit-pointer-events: none;
   pointer-events: none;
@@ -40,17 +39,17 @@
   line-height: 6rem;
   font-size: 2rem;
   border-radius: 50%;
-  background: rgba(34, 153, 221, 0.8);
+  background: `Color(args.color || '#29d').clearer(0.2).rgbString()`;
   color: #fff;
   font-family: "Helvetica Neue", sans-serif;
   font-weight: 100;
   text-align: center;
 
-  -webkit-animation: pace-3d-spinner linear infinite 2s;
-  -moz-animation: pace-3d-spinner linear infinite 2s;
-  -ms-animation: pace-3d-spinner linear infinite 2s;
-  -o-animation: pace-3d-spinner linear infinite 2s;
-  animation: pace-3d-spinner linear infinite 2s;
+  -webkit-animation: pace-theme-center-circle-spin linear infinite 2s;
+  -moz-animation: pace-theme-center-circle-spin linear infinite 2s;
+  -ms-animation: pace-theme-center-circle-spin linear infinite 2s;
+  -o-animation: pace-theme-center-circle-spin linear infinite 2s;
+  animation: pace-theme-center-circle-spin linear infinite 2s;
 
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
@@ -64,47 +63,27 @@
   display: block;
 }
 
-@-webkit-keyframes pace-3d-spinner {
-  from {
-    -webkit-transform: rotateY(0deg);
-  }
-  to {
-    -webkit-transform: rotateY(360deg);
-  }
+@-webkit-keyframes pace-theme-center-circle-spin {
+  from { -webkit-transform: rotateY(0deg) }
+  to { -webkit-transform: rotateY(360deg) }
 }
 
-@-moz-keyframes pace-3d-spinner {
-  from {
-    -moz-transform: rotateY(0deg);
-  }
-  to {
-    -moz-transform: rotateY(360deg);
-  }
+@-moz-keyframes pace-theme-center-circle-spin {
+  from { -moz-transform: rotateY(0deg) }
+  to { -moz-transform: rotateY(360deg) }
 }
 
-@-ms-keyframes pace-3d-spinner {
-  from {
-    -ms-transform: rotateY(0deg);
-  }
-  to {
-    -ms-transform: rotateY(360deg);
-  }
+@-ms-keyframes pace-theme-center-circle-spin {
+  from { -ms-transform: rotateY(0deg) }
+  to { -ms-transform: rotateY(360deg) }
 }
 
-@-o-keyframes pace-3d-spinner {
-  from {
-    -o-transform: rotateY(0deg);
-  }
-  to {
-    -o-transform: rotateY(360deg);
-  }
+@-o-keyframes pace-theme-center-circle-spin {
+  from { -o-transform: rotateY(0deg) }
+  to { -o-transform: rotateY(360deg) }
 }
 
-@keyframes pace-3d-spinner {
-  from {
-    transform: rotateY(0deg);
-  }
-  to {
-    transform: rotateY(360deg);
-  }
+@keyframes pace-theme-center-circle-spin {
+  from { transform: rotateY(0deg) }
+  to { transform: rotateY(360deg) }
 }

data/vendor/assets/stylesheets/pace/pace-theme-center-radar.css

@@ -1,8 +1,11 @@
-/* This is a compiled file, you should be editing the file in the templates directory */
 .pace {
   -webkit-pointer-events: none;
   pointer-events: none;
 
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+
   z-index: 2000;
   position: fixed;
   height: 90px;
@@ -30,13 +33,13 @@
   display: block;
   border-width: 30px;
   border-style: double;
-  border-color: #29d transparent transparent;
+  border-color: `args.color || "#29d"` transparent transparent;
   border-radius: 50%;
 
   -webkit-animation: spin 1s linear infinite;
-     -moz-animation: spin 1s linear infinite;
-       -o-animation: spin 1s linear infinite;
-          animation: spin 1s linear infinite;
+  -moz-animation: spin 1s linear infinite;
+  -o-animation: spin 1s linear infinite;
+  animation: spin 1s linear infinite;
 }
 
 .pace .pace-activity:before {
@@ -49,11 +52,10 @@
   display: block;
   border-width: 10px;
   border-style: solid;
-  border-color: #29d transparent transparent;
+  border-color: `args.color || "#29d"` transparent transparent;
   border-radius: 50%;
 }
 
-
 @-webkit-keyframes spin {
   100% { -webkit-transform: rotate(359deg); }
 }

data/vendor/assets/stylesheets/pace/pace-theme-center-simple.css

@@ -1,7 +1,7 @@
-/* This is a compiled file, you should be editing the file in the templates directory */
 .pace {
   -webkit-pointer-events: none;
   pointer-events: none;
+
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
@@ -16,7 +16,9 @@
   height: 5px;
   width: 200px;
   background: #fff;
-  border: 1px solid #29d;
+  border: 1px solid `args.color || "#29d"`;
+
+  overflow: hidden;
 }
 
 .pace .pace-progress {
@@ -26,12 +28,6 @@
   -o-box-sizing: border-box;
   box-sizing: border-box;
 
-  -webkit-transition: width 1s ease-in-out 1s linear;
-  -moz-transition: width 1s ease-in-out 1s linear;
-  -ms-transition: width 1s ease-in-out 1s linear;
-  -o-transition: width 1s ease-in-out 1s linear;
-  transition: width 1s ease-in-out 1s linear;
-
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
@@ -43,10 +39,11 @@
   z-index: 2000;
   display: block;
   position: absolute;
-  left: 0px;
-  top: 0px;
+  top: 0;
+  right: 100%;
   height: 100%;
-  background: #29d;
+  width: 100%;
+  background: `args.color || "#29d"`;
 }
 
 .pace.pace-inactive {

data/vendor/assets/stylesheets/pace/pace-theme-corner-indicator.css

@@ -1,7 +1,7 @@
-/* This is a compiled file, you should be editing the file in the templates directory */
 .pace {
   -webkit-pointer-events: none;
   pointer-events: none;
+
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
@@ -15,7 +15,7 @@
   right: 0;
   width: 300px;
   height: 300px;
-  background: #29d;
+  background: `args.color || "#29d"`;
   -webkit-transition: -webkit-transform 0.3s;
   transition: transform 0.3s;
   -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
@@ -30,6 +30,8 @@
 
 .pace .pace-activity::before,
 .pace .pace-activity::after {
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
     position: absolute;
     bottom: 30px;
     left: 50%;
@@ -45,8 +47,8 @@
     height: 80px;
     border-right-color: rgba(0, 0, 0, .2);
     border-left-color: rgba(0, 0, 0, .2);
-    -webkit-animation: pace-rotation 3s linear infinite;
-    animation: pace-rotation 3s linear infinite;
+    -webkit-animation: pace-theme-corner-indicator-spin 3s linear infinite;
+    animation: pace-theme-corner-indicator-spin 3s linear infinite;
 }
 
 .pace .pace-activity::after {
@@ -56,15 +58,15 @@
     height: 40px;
     border-top-color: rgba(0, 0, 0, .2);
     border-bottom-color: rgba(0, 0, 0, .2);
-    -webkit-animation: pace-rotation 1s linear infinite;
-    animation: pace-rotation 1s linear infinite;
+    -webkit-animation: pace-theme-corner-indicator-spin 1s linear infinite;
+    animation: pace-theme-corner-indicator-spin 1s linear infinite;
 }
 
-@-webkit-keyframes pace-rotation {
+@-webkit-keyframes pace-theme-corner-indicator-spin {
   0% { -webkit-transform: rotate(0deg); }
   100% { -webkit-transform: rotate(359deg); }
 }
-@keyframes pace-rotation {
+@keyframes pace-theme-corner-indicator-spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(359deg); }
 }

data/vendor/assets/stylesheets/pace/pace-theme-fill-left.css

@@ -1,4 +1,3 @@
-/* This is a compiled file, you should be editing the file in the templates directory */
 .pace {
   -webkit-pointer-events: none;
   pointer-events: none;
@@ -7,16 +6,16 @@
   user-select: none;
 }
 
+.pace-inactive {
+  display: none;
+}
+
 .pace .pace-progress {
-  background-color: rgba(0, 0, 0, 0.19999999999999996);
+  background-color: `Color(args.color).clearer(0.8).rgbString() || "rgba(0, 0, 0, 0.2)"`;
   position: fixed;
   z-index: -1;
   top: 0;
-  left: 0;
+  right: 100%;
   bottom: 0;
-
-  -webkit-transition: width 1s;
-  -moz-transition: width 1s;
-  -o-transition: width 1s;
-  transition: width 1s;
+  width: 100%;
 }

data/vendor/assets/stylesheets/pace/pace-theme-flash.css

@@ -1,4 +1,3 @@
-/* This is a compiled file, you should be editing the file in the templates directory */
 .pace {
   -webkit-pointer-events: none;
   pointer-events: none;
@@ -12,17 +11,13 @@
 }
 
 .pace .pace-progress {
-  background: #29d;
+  background: `args.color || "#29d"`;
   position: fixed;
   z-index: 2000;
   top: 0;
-  left: 0;
+  right: 100%;
+  width: 100%;
   height: 2px;
-
-  -webkit-transition: width 1s;
-  -moz-transition: width 1s;
-  -o-transition: width 1s;
-  transition: width 1s;
 }
 
 .pace .pace-progress-inner {
@@ -31,7 +26,7 @@
   right: 0px;
   width: 100px;
   height: 100%;
-  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+  box-shadow: 0 0 10px `args.color || '#29d'`, 0 0 5px `args.color || '#29d'`;
   opacity: 1.0;
   -webkit-transform: rotate(3deg) translate(0px, -4px);
   -moz-transform: rotate(3deg) translate(0px, -4px);
@@ -49,8 +44,8 @@
   width: 14px;
   height: 14px;
   border: solid 2px transparent;
-  border-top-color: #29d;
-  border-left-color: #29d;
+  border-top-color: `args.color || '#29d'`;
+  border-left-color: `args.color || '#29d'`;
   border-radius: 10px;
   -webkit-animation: pace-spinner 400ms linear infinite;
   -moz-animation: pace-spinner 400ms linear infinite;

data/vendor/assets/stylesheets/pace/pace-theme-loading-bar.css

@@ -1,5 +1,11 @@
-/* This is a compiled file, you should be editing the file in the templates directory */
 .pace {
+  -webkit-pointer-events: none;
+  pointer-events: none;
+
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
@@ -10,16 +16,10 @@
   -moz-border-radius: 10px;
   border-radius: 10px;
 
-  -moz-background-clip: padding;
   -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
   background-clip: padding-box;
 
-  -webkit-pointer-events: none;
-  pointer-events: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-
   z-index: 2000;
   position: fixed;
   margin: auto;
@@ -28,9 +28,8 @@
   right: 0;
   bottom: 0;
   width: 200px;
-  height: 25px;
-  border: 2px solid #29d;
-  background-color: #fff;
+  height: 50px;
+  overflow: hidden;
 }
 
 .pace .pace-progress {
@@ -40,44 +39,66 @@
   -o-box-sizing: border-box;
   box-sizing: border-box;
 
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
 
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
 
-  -webkit-transition: width 1s ease-in-out 1s linear;
-  -moz-transition: width 1s ease-in-out 1s linear;
-  -ms-transition: width 1s ease-in-out 1s linear;
-  -o-transition: width 1s ease-in-out 1s linear;
-  transition: width 1s ease-in-out 1s linear;
-
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
 
-  max-width: 190px;
-  position: fixed;
-  z-index: 2000;
   display: block;
   position: absolute;
-  left: 3px;
-  top: 3px;
-  height: 15px;
+  right: 100%;
+  margin-right: -7px;
+  width: 93%;
+  top: 7px;
+  height: 14px;
   font-size: 12px;
-  background: #29d;
-  color: #29d;
+  background: `args.color || "#29d"`;
+  color: `args.color || "#29d"`;
   line-height: 60px;
   font-weight: bold;
-  font-family:  Helvetica, Arial, "Lucida Grande", sans-serif;
+  font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
+
+  -webkit-box-shadow: 120px 0 #fff, 240px 0 #fff;
+  -ms-box-shadow: 120px 0 #fff, 240px 0 #fff;
+  box-shadow: 120px 0 #fff, 240px 0 #fff;
 }
 
 .pace .pace-progress:after {
   content: attr(data-progress-text);
   display: inline-block;
+  position: fixed;
+  width: 45px;
+  text-align: right;
+  right: 0;
+  padding-right: 16px;
+  top: 4px;
+}
+
+`
+var out = '';
+
+for (var i = 0; i < 101 ; i++) {
+  out += ".pace .pace-progress[data-progress-text=\"" + i + "%\"]:after { right: -" + (200 - (i * 2) + ((i * 14) / 100)) + "px }\n";
+}
+
+out
+`
+
+.pace .pace-activity {
+  position: absolute;
+  width: 100%;
+  height: 28px;
+  z-index: 2001;
+  box-shadow: inset 0 0 0 2px `args.color || "#29d"`, inset 0 0 0 7px #FFF;
+  border-radius: 10px;
 }
 
 .pace.pace-inactive {
   display: none;
-}
+}

data/vendor/assets/stylesheets/pace/pace-theme-mac-osx.css

@@ -1,10 +1,19 @@
-/* This is a compiled file, you should be editing the file in the templates directory */
 .pace {
   -webkit-pointer-events: none;
   pointer-events: none;
+
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
+
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2000;
+  width: 100%;
+  height: 12px;
+  background: #fff;
 }
 
 .pace-inactive {
@@ -12,13 +21,11 @@
 }
 
 .pace .pace-progress {
-  background-color: #78c0f0;
-
-  color: #CBE7F9;
+  background-color: `Color(args.color || "#29d").darken(.2).saturate(.65).hexString();`;
   position: fixed;
-  z-index: 2000;
   top: 0;
-  left: 0;
+  right: 100%;
+  width: 100%;
   height: 12px;
   overflow: hidden;
 
@@ -27,59 +34,53 @@
   -o-border-radius: 0 0 4px 0;
   border-radius: 0 0 4px 0;
 
-  -webkit-box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
-  -moz-box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
-  -o-box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
-  box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, 0.3);
-
-  -webkit-transition: width 1s;
-  -moz-transition: width 1s;
-  -o-transition: width 1s;
-  transition: width 1s;
+  -webkit-box-shadow: inset -1px 0 `Color(args.color || "#29d").darken(.5).saturate(.7).hexString();`, inset 0 -1px `Color(args.color || "#29d").darken(.5).saturate(.7).hexString();`, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
+  -moz-box-shadow: inset -1px 0 `Color(args.color || "#29d").darken(.5).saturate(.7).hexString();`, inset 0 -1px `Color(args.color || "#29d").darken(.5).saturate(.7).hexString();`, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
+  -o-box-shadow: inset -1px 0 `Color(args.color || "#29d").darken(.5).saturate(.7).hexString();`, inset 0 -1px `Color(args.color || "#29d").darken(.5).saturate(.7).hexString();`, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
+  box-shadow: inset -1px 0 `Color(args.color || "#29d").darken(.5).saturate(.7).hexString();`, inset 0 -1px `Color(args.color || "#29d").darken(.5).saturate(.7).hexString();`, inset 0 2px rgba(255, 255, 255, 0.5), inset 0 6px rgba(255, 255, 255, .3);
 }
 
-.pace .pace-progress-inner {
-  position: absolute;
+.pace .pace-activity {
+  position: fixed;
   top: 0;
   left: 0;
   right: -28px;
   bottom: 0;
 
-  background-image: -o-radial-gradient(rgba(25, 147, 228, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
-  background-image: -moz-radial-gradient(rgba(25, 147, 228, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
-  background-image: -webkit-radial-gradient(rgba(25, 147, 228, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
-  background-image: radial-gradient(rgba(25, 147, 228, 0.6) 0%, rgba(120, 192, 240, 0) 100%);
-
+  -webkit-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%);
+  -moz-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%);
+  -o-background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%);
+  background-image: radial-gradient(rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 100%);
 
   -webkit-background-size: 28px 100%;
   -moz-background-size: 28px 100%;
   -o-background-size: 28px 100%;
   background-size: 28px 100%;
 
-  -webkit-animation: pace-stripe-animation 500ms linear infinite;
-  -moz-animation: pace-stripe-animation 500ms linear infinite;
-  -ms-animation: pace-stripe-animation 500ms linear infinite;
-  -o-animation: pace-stripe-animation 500ms linear infinite;
-  animation: pace-stripe-animation 500ms linear infinite;
+  -webkit-animation: pace-theme-mac-osx-motion 500ms linear infinite;
+  -moz-animation: pace-theme-mac-osx-motion 500ms linear infinite;
+  -ms-animation: pace-theme-mac-osx-motion 500ms linear infinite;
+  -o-animation: pace-theme-mac-osx-motion 500ms linear infinite;
+  animation: pace-theme-mac-osx-motion 500ms linear infinite;
 }
 
-@-webkit-keyframes pace-stripe-animation {
+@-webkit-keyframes pace-theme-mac-osx-motion {
   0% { -webkit-transform: none; transform: none; }
   100% { -webkit-transform: translate(-28px, 0); transform: translate(-28px, 0); }
 }
-@-moz-keyframes pace-stripe-animation {
+@-moz-keyframes pace-theme-mac-osx-motion {
   0% { -moz-transform: none; transform: none; }
   100% { -moz-transform: translate(-28px, 0); transform: translate(-28px, 0); }
 }
-@-o-keyframes pace-stripe-animation {
+@-o-keyframes pace-theme-mac-osx-motion {
   0% { -o-transform: none; transform: none; }
   100% { -o-transform: translate(-28px, 0); transform: translate(-28px, 0); }
 }
-@-ms-keyframes pace-stripe-animation {
+@-ms-keyframes pace-theme-mac-osx-motion {
   0% { -ms-transform: none; transform: none; }
   100% { -ms-transform: translate(-28px, 0); transform: translate(-28px, 0); }
 }
-@keyframes pace-stripe-animation {
+@keyframes pace-theme-mac-osx-motion {
   0% { transform: none; transform: none; }
   100% { transform: translate(-28px, 0); transform: translate(-28px, 0); }
 }

data/vendor/assets/stylesheets/pace/pace-theme-minimal.css

@@ -1,18 +1,22 @@
-/* This is a compiled file, you should be editing the file in the templates directory */
-.pace .pace-progress {
-  background: #29d;
-  position: fixed;
-  z-index: 2000;
-  top: 0;
-  left: 0;
-  height: 2px;
+.pace {
+  -webkit-pointer-events: none;
+  pointer-events: none;
 
-  -webkit-transition: width 1s;
-  -moz-transition: width 1s;
-  -o-transition: width 1s;
-  transition: width 1s;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
 }
 
 .pace-inactive {
   display: none;
 }
+
+.pace .pace-progress {
+  background: `args.color || "#29d"`;
+  position: fixed;
+  z-index: 2000;
+  top: 0;
+  right: 100%;
+  width: 100%;
+  height: 2px;
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: pace-rails
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.2
 platform: ruby
 authors:
 - Dan Vera
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-08-28 00:00:00.000000000 Z
+date: 2015-02-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -78,7 +78,6 @@ files:
 - vendor/assets/stylesheets/pace/pace-theme-corner-indicator.css
 - vendor/assets/stylesheets/pace/pace-theme-fill-left.css
 - vendor/assets/stylesheets/pace/pace-theme-flash.css
-- vendor/assets/stylesheets/pace/pace-theme-flat-top.css
 - vendor/assets/stylesheets/pace/pace-theme-loading-bar.css
 - vendor/assets/stylesheets/pace/pace-theme-mac-osx.css
 - vendor/assets/stylesheets/pace/pace-theme-minimal.css

data/vendor/assets/stylesheets/pace/pace-theme-flat-top.css

@@ -1,33 +0,0 @@
-/* This is a compiled file, you should be editing the file in the templates directory */
-.pace {
-  -webkit-pointer-events: none;
-  pointer-events: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-
-.pace .pace-progress {
-  display: block;
-  position: fixed;
-  z-index: 2000;
-  top: 0;
-  left: 0;
-  height: 12px;
-  background: #29d;
-
-  -webkit-transition: -webkit-transform .3s, width 1s;
-  -moz-transition: width 1s;
-  -o-transform: width 1s;
-  transition: transform .3s, width 1s;
-
-  -webkit-transform: translateY(-50px);
-  transform: translateY(-50px);
-
-  pointer-events: none;
-}
-
-.pace.pace-active .pace-progress {
-  -webkit-transform: translateY(0);
-  transform: translateY(0);
-}