You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by ga...@apache.org on 2014/08/26 18:24:13 UTC
[4/7] API URL style updates,
added Velocity.js (http://julian.com/research/velocity/) for use on
animated transitions
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/3e6ab2e4/assets/js/plugins/velocity.ui.js
----------------------------------------------------------------------
diff --git a/assets/js/plugins/velocity.ui.js b/assets/js/plugins/velocity.ui.js
new file mode 100644
index 0000000..c447d63
--- /dev/null
+++ b/assets/js/plugins/velocity.ui.js
@@ -0,0 +1,664 @@
+/**********************
+ Velocity UI Pack
+**********************/
+
+/* VelocityJS.org UI Pack (4.1.2). (C) 2014 Julian Shapiro. MIT @license: en.wikipedia.org/wiki/MIT_License. Portions copyright Daniel Eden, Christian Pucci. */
+
+(function() {
+
+ /*************
+ Setup
+ *************/
+
+ var Container = (window.jQuery || window.Zepto || window);
+
+ if (!Container.Velocity || !Container.Velocity.Utilities) {
+ window.console && console.log("Velocity UI Pack: Velocity must be loaded first. Aborting.");
+
+ return;
+ }
+
+ if (!Container.Velocity.version || (Container.Velocity.version.major <= 0 && Container.Velocity.version.minor <= 5 && Container.Velocity.version.patch <= 2)) {
+ var abortError = "Velocity UI Pack: You need to update Velocity (jquery.velocity.js) to a newer version. Visit http://github.com/julianshapiro/velocity.";
+
+ alert(abortError);
+ throw new Error(abortError);
+ }
+
+ /******************
+ Register UI
+ ******************/
+
+ Container.Velocity.RegisterUI = function (effectName, properties) {
+ /* Animate the expansion/contraction of the elements' parent's height for In/Out effects. */
+ function animateParentHeight (elements, direction, totalDuration, stagger) {
+ var totalHeightDelta = 0,
+ parentNode;
+
+ /* Sum the total height (including padding and margin) of all targeted elements. */
+ Container.Velocity.Utilities.each(elements.nodeType ? [ elements ] : elements, function(i, element) {
+ if (stagger) {
+ /* Increase the totalDuration by the successive delay amounts produced by the stagger option. */
+ totalDuration += i * stagger;
+ }
+
+ parentNode = element.parentNode;
+
+ Container.Velocity.Utilities.each([ "height", "paddingTop", "paddingBottom", "marginTop", "marginBottom"], function(i, property) {
+ totalHeightDelta += parseFloat(Container.Velocity.CSS.getPropertyValue(element, property));
+ });
+ });
+
+ /* Animate the parent element's height adjustment (with a varying duration multiplier for aesthetic benefits). */
+ Container.Velocity.animate(
+ parentNode,
+ { height: (direction === "In" ? "+" : "-") + "=" + totalHeightDelta },
+ { queue: false, easing: "ease-in-out", duration: totalDuration * (direction === "In" ? 0.6 : 1) }
+ );
+ }
+
+ /* Register a custom sequence for each effect. */
+ Container.Velocity.Sequences[effectName] = function (element, sequenceOptions, elementsIndex, elementsSize, elements, promiseData) {
+ var finalElement = (elementsIndex === elementsSize - 1);
+
+ /* Iterate through each effect's call array. */
+ for (var callIndex = 0; callIndex < properties.calls.length; callIndex++) {
+ var call = properties.calls[callIndex],
+ propertyMap = call[0],
+ sequenceDuration = (sequenceOptions.duration || properties.defaultDuration || 1000),
+ durationPercentage = call[1],
+ callOptions = call[2] || {},
+ opts = {};
+
+ /* Assign the whitelisted per-call options. */
+ opts.duration = sequenceDuration * (durationPercentage || 1);
+ opts.queue = sequenceOptions.queue || "";
+ opts.easing = callOptions.easing || "ease";
+ opts.delay = callOptions.delay || 0;
+ opts._cacheValues = callOptions._cacheValues || true;
+
+ /* Special processing for the first effect call. */
+ if (callIndex === 0) {
+ /* If a delay was passed into the sequence, combine it with the first call's delay. */
+ opts.delay += (sequenceOptions.delay || 0);
+
+ if (elementsIndex === 0) {
+ opts.begin = function() {
+ /* Only trigger a begin callback on the first effect call with the first element in the set. */
+ sequenceOptions.begin && sequenceOptions.begin.call(elements, elements);
+
+ /* Only trigger animateParentHeight() if we're using an In/Out transition. */
+ var direction = effectName.match(/(In|Out)$/);
+ if (sequenceOptions.animateParentHeight && direction) {
+ animateParentHeight(elements, direction[0], sequenceDuration + opts.delay, sequenceOptions.stagger);
+ }
+ }
+ }
+
+ /* If the user isn't overriding the display option, default to "auto" for "In"-suffixed transitions. */
+ if (sequenceOptions.display !== null) {
+ if (sequenceOptions.display && sequenceOptions.display !== "none") {
+ opts.display = sequenceOptions.display;
+ } else if (/In$/.test(effectName)) {
+ /* Inline elements cannot be subjected to transforms, so we switch them to inline-block. */
+ var defaultDisplay = Container.Velocity.CSS.Values.getDisplayType(element);
+ opts.display = (defaultDisplay === "inline") ? "inline-block" : defaultDisplay;
+ }
+ }
+
+ if (sequenceOptions.visibility && sequenceOptions.visibility !== "hidden") {
+ opts.visibility = sequenceOptions.visibility;
+ }
+ }
+
+ /* Special processing for the last effect call. */
+ if (callIndex === properties.calls.length - 1) {
+ /* Append promise resolving onto the user's sequence callback. */
+ function injectFinalCallbacks () {
+ if ((sequenceOptions.display === undefined || sequenceOptions.display === "none") && /Out$/.test(effectName)) {
+ Container.Velocity.Utilities.each(elements.nodeType ? [ elements ] : elements, function(i, element) {
+ Container.Velocity.CSS.setPropertyValue(element, "display", "none");
+ });
+ }
+
+ sequenceOptions.complete && sequenceOptions.complete.call(elements, elements);
+
+ if (promiseData) {
+ promiseData.resolver(elements || element);
+ }
+ }
+
+ opts.complete = function() {
+ if (properties.reset) {
+ for (var resetProperty in properties.reset) {
+ var resetValue = properties.reset[resetProperty];
+
+ /* Format each non-array value in the reset property map to [ value, value ] so that changes apply
+ immediately and DOM querying is avoided (via forcefeeding). */
+ if (typeof resetValue === "string" || typeof resetValue === "number") {
+ properties.reset[resetProperty] = [ properties.reset[resetProperty], properties.reset[resetProperty] ];
+ }
+ }
+
+ /* So that the reset values are applied instantly upon the next rAF tick, use a zero duration and parallel queueing. */
+ var resetOptions = { duration: 0, queue: false };
+
+ /* Since the reset option uses up the complete callback, we trigger the user's complete callback at the end of ours. */
+ if (finalElement) {
+ resetOptions.complete = injectFinalCallbacks;
+ }
+
+ Container.Velocity.animate(element, properties.reset, resetOptions);
+ /* Only trigger the user's complete callback on the last effect call with the last element in the set. */
+ } else if (finalElement) {
+ injectFinalCallbacks();
+ }
+ };
+
+ if (sequenceOptions.visibility === "hidden") {
+ opts.visibility = sequenceOptions.visibility;
+ }
+ }
+
+ Container.Velocity.animate(element, propertyMap, opts);
+ }
+ };
+
+ /* Return the Velocity object so that RegisterUI calls can be chained. */
+ return Container.Velocity;
+ };
+
+ /*********************
+ Packaged Effects
+ *********************/
+
+ /* Externalize the packagedEffects data so that they can optionally be modified and re-registered. */
+ /* Support: <=IE8: Callouts will have no effect, and transitions will simply fade in/out. IE9/Android 2.3: Most effects are fully supported, the rest fade in/out. All other browsers: full support. */
+ Container.Velocity.RegisterUI.packagedEffects =
+ {
+ /* Animate.css */
+ "callout.bounce": {
+ defaultDuration: 550,
+ calls: [
+ [ { translateY: -30 }, 0.25 ],
+ [ { translateY: 0 }, 0.125 ],
+ [ { translateY: -15 }, 0.125 ],
+ [ { translateY: 0 }, 0.25 ]
+ ]
+ },
+ /* Animate.css */
+ "callout.shake": {
+ defaultDuration: 800,
+ calls: [
+ [ { translateX: -11 }, 0.125 ],
+ [ { translateX: 11 }, 0.125 ],
+ [ { translateX: -11 }, 0.125 ],
+ [ { translateX: 11 }, 0.125 ],
+ [ { translateX: -11 }, 0.125 ],
+ [ { translateX: 11 }, 0.125 ],
+ [ { translateX: -11 }, 0.125 ],
+ [ { translateX: 0 }, 0.125 ]
+ ]
+ },
+ /* Animate.css */
+ "callout.flash": {
+ defaultDuration: 1100,
+ calls: [
+ [ { opacity: [ 0, "easeInOutQuad", 1 ] }, 0.25 ],
+ [ { opacity: [ 1, "easeInOutQuad" ] }, 0.25 ],
+ [ { opacity: [ 0, "easeInOutQuad" ] }, 0.25 ],
+ [ { opacity: [ 1, "easeInOutQuad" ] }, 0.25 ]
+ ]
+ },
+ /* Animate.css */
+ "callout.pulse": {
+ defaultDuration: 825,
+ calls: [
+ [ { scaleX: 1.1, scaleY: 1.1 }, 0.50 ],
+ [ { scaleX: 1, scaleY: 1 }, 0.50 ]
+ ]
+ },
+ /* Animate.css */
+ "callout.swing": {
+ defaultDuration: 950,
+ calls: [
+ [ { rotateZ: 15 }, 0.20 ],
+ [ { rotateZ: -10 }, 0.20 ],
+ [ { rotateZ: 5 }, 0.20 ],
+ [ { rotateZ: -5 }, 0.20 ],
+ [ { rotateZ: 0 }, 0.20 ]
+ ]
+ },
+ /* Animate.css */
+ "callout.tada": {
+ defaultDuration: 1000,
+ calls: [
+ [ { scaleX: 0.9, scaleY: 0.9, rotateZ: -3 }, 0.10 ],
+ [ { scaleX: 1.1, scaleY: 1.1, rotateZ: 3 }, 0.10 ],
+ [ { scaleX: 1.1, scaleY: 1.1, rotateZ: -3 }, 0.10 ],
+ [ "reverse", 0.125 ],
+ [ "reverse", 0.125 ],
+ [ "reverse", 0.125 ],
+ [ "reverse", 0.125 ],
+ [ "reverse", 0.125 ],
+ [ { scaleX: 1, scaleY: 1, rotateZ: 0 }, 0.20 ]
+ ]
+ },
+ "transition.fadeIn": {
+ defaultDuration: 500,
+ calls: [
+ [ { opacity: [ 1, 0 ] } ]
+ ]
+ },
+ "transition.fadeOut": {
+ defaultDuration: 500,
+ calls: [
+ [ { opacity: [ 0, 1 ] } ]
+ ]
+ },
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.flipXIn": {
+ defaultDuration: 700,
+ calls: [
+ [ { opacity: [ 1, 0 ], transformPerspective: [ 800, 800 ], rotateY: [ 0, -55 ] } ]
+ ],
+ reset: { transformPerspective: 0 }
+ },
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.flipXOut": {
+ defaultDuration: 700,
+ calls: [
+ [ { opacity: [ 0, 1 ], transformPerspective: [ 800, 800 ], rotateY: 55 } ]
+ ],
+ reset: { transformPerspective: 0, rotateY: 0 }
+ },
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.flipYIn": {
+ defaultDuration: 800,
+ calls: [
+ [ { opacity: [ 1, 0 ], transformPerspective: [ 800, 800 ], rotateX: [ 0, -45 ] } ]
+ ],
+ reset: { transformPerspective: 0 }
+ },
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.flipYOut": {
+ defaultDuration: 800,
+ calls: [
+ [ { opacity: [ 0, 1 ], transformPerspective: [ 800, 800 ], rotateX: 25 } ]
+ ],
+ reset: { transformPerspective: 0, rotateX: 0 }
+ },
+ /* Animate.css */
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.flipBounceXIn": {
+ defaultDuration: 900,
+ calls: [
+ [ { opacity: [ 0.725, 0 ], transformPerspective: [ 400, 400 ], rotateY: [ -10, 90 ] }, 0.50 ],
+ [ { opacity: 0.80, rotateY: 10 }, 0.25 ],
+ [ { opacity: 1, rotateY: 0 }, 0.25 ]
+ ],
+ reset: { transformPerspective: 0 }
+ },
+ /* Animate.css */
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.flipBounceXOut": {
+ defaultDuration: 800,
+ calls: [
+ [ { opacity: [ 0.9, 1 ], transformPerspective: [ 400, 400 ], rotateY: -10 }, 0.50 ],
+ [ { opacity: 0, rotateY: 90 }, 0.50 ]
+ ],
+ reset: { transformPerspective: 0, rotateY: 0 }
+ },
+ /* Animate.css */
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.flipBounceYIn": {
+ defaultDuration: 850,
+ calls: [
+ [ { opacity: [ 0.725, 0 ], transformPerspective: [ 400, 400 ], rotateX: [ -10, 90 ] }, 0.50 ],
+ [ { opacity: 0.80, rotateX: 10 }, 0.25 ],
+ [ { opacity: 1, rotateX: 0 }, 0.25 ]
+ ],
+ reset: { transformPerspective: 0 }
+ },
+ /* Animate.css */
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.flipBounceYOut": {
+ defaultDuration: 800,
+ calls: [
+ [ { opacity: [ 0.9, 1 ], transformPerspective: [ 400, 400 ], rotateX: -15 }, 0.50 ],
+ [ { opacity: 0, rotateX: 90 }, 0.50 ]
+ ],
+ reset: { transformPerspective: 0, rotateX: 0 }
+ },
+ /* Magic.css */
+ "transition.swoopIn": {
+ defaultDuration: 850,
+ calls: [
+ [ { opacity: [ 1, 0 ], transformOriginX: [ "100%", "50%" ], transformOriginY: [ "100%", "100%" ], scaleX: [ 1, 0 ], scaleY: [ 1, 0 ], translateX: [ 0, -700 ], translateZ: 0 } ]
+ ],
+ reset: { transformOriginX: "50%", transformOriginY: "50%" }
+ },
+ /* Magic.css */
+ "transition.swoopOut": {
+ defaultDuration: 850,
+ calls: [
+ [ { opacity: [ 0, 1 ], transformOriginX: [ "50%", "100%" ], transformOriginY: [ "100%", "100%" ], scaleX: 0, scaleY: 0, translateX: -700, translateZ: 0 } ]
+ ],
+ reset: { transformOriginX: "50%", transformOriginY: "50%", scaleX: 1, scaleY: 1, translateX: 0 }
+ },
+ /* Magic.css */
+ /* Support: Loses rotation in IE9/Android 2.3. (Fades and scales only.) */
+ "transition.whirlIn": {
+ defaultDuration: 900,
+ calls: [
+ [ { opacity: [ 1, 0 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: [ 1, 0 ], scaleY: [ 1, 0 ], rotateY: [ 0, 160 ] } ]
+ ]
+ },
+ /* Magic.css */
+ /* Support: Loses rotation in IE9/Android 2.3. (Fades and scales only.) */
+ "transition.whirlOut": {
+ defaultDuration: 900,
+ calls: [
+ [ { opacity: [ 0, 1 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: 0, scaleY: 0, rotateY: 160 } ]
+ ],
+ reset: { scaleX: 1, scaleY: 1, rotateY: 0 }
+ },
+ "transition.shrinkIn": {
+ defaultDuration: 700,
+ calls: [
+ [ { opacity: [ 1, 0 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: [ 1, 1.5 ], scaleY: [ 1, 1.5 ], translateZ: 0 } ]
+ ]
+ },
+ "transition.shrinkOut": {
+ defaultDuration: 650,
+ calls: [
+ [ { opacity: [ 0, 1 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: 1.3, scaleY: 1.3, translateZ: 0 } ]
+ ],
+ reset: { scaleX: 1, scaleY: 1 }
+ },
+ "transition.expandIn": {
+ defaultDuration: 700,
+ calls: [
+ [ { opacity: [ 1, 0 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: [ 1, 0.625 ], scaleY: [ 1, 0.625 ], translateZ: 0 } ]
+ ]
+ },
+ "transition.expandOut": {
+ defaultDuration: 700,
+ calls: [
+ [ { opacity: [ 0, 1 ], transformOriginX: [ "50%", "50%" ], transformOriginY: [ "50%", "50%" ], scaleX: 0.5, scaleY: 0.5, translateZ: 0 } ]
+ ],
+ reset: { scaleX: 1, scaleY: 1 }
+ },
+ /* Animate.css */
+ "transition.bounceIn": {
+ defaultDuration: 800,
+ calls: [
+ [ { opacity: [ 1, 0 ], scaleX: [ 1.05, 0.3 ], scaleY: [ 1.05, 0.3 ] }, 0.40 ],
+ [ { scaleX: 0.9, scaleY: 0.9, translateZ: 0 }, 0.20 ],
+ [ { scaleX: 1, scaleY: 1 }, 0.50 ]
+ ]
+ },
+ /* Animate.css */
+ "transition.bounceOut": {
+ defaultDuration: 800,
+ calls: [
+ [ { scaleX: 0.95, scaleY: 0.95 }, 0.40 ],
+ [ { scaleX: 1.1, scaleY: 1.1, translateZ: 0 }, 0.40 ],
+ [ { opacity: [ 0, 1 ], scaleX: 0.3, scaleY: 0.3 }, 0.20 ]
+ ],
+ reset: { scaleX: 1, scaleY: 1 }
+ },
+ /* Animate.css */
+ "transition.bounceUpIn": {
+ defaultDuration: 800,
+ calls: [
+ [ { opacity: [ 1, 0 ], translateY: [ -30, 1000 ] }, 0.60, { easing: "easeOutCirc" } ],
+ [ { translateY: 10 }, 0.20 ],
+ [ { translateY: 0 }, 0.20 ]
+ ]
+ },
+ /* Animate.css */
+ "transition.bounceUpOut": {
+ defaultDuration: 1000,
+ calls: [
+ [ { translateY: 20 }, 0.20 ],
+ [ { opacity: [ 0, "easeInCirc", 1 ], translateY: -1000 }, 0.80 ]
+ ],
+ reset: { translateY: 0 }
+ },
+ /* Animate.css */
+ "transition.bounceDownIn": {
+ defaultDuration: 800,
+ calls: [
+ [ { opacity: [ 1, 0 ], translateY: [ 30, -1000 ] }, 0.60, { easing: "easeOutCirc" } ],
+ [ { translateY: -10 }, 0.20 ],
+ [ { translateY: 0 }, 0.20 ]
+ ]
+ },
+ /* Animate.css */
+ "transition.bounceDownOut": {
+ defaultDuration: 1000,
+ calls: [
+ [ { translateY: -20 }, 0.20 ],
+ [ { opacity: [ 0, "easeInCirc", 1 ], translateY: 1000 }, 0.80 ]
+ ],
+ reset: { translateY: 0 }
+ },
+ /* Animate.css */
+ "transition.bounceLeftIn": {
+ defaultDuration: 750,
+ calls: [
+ [ { opacity: [ 1, 0 ], translateX: [ 30, -1250 ] }, 0.60, { easing: "easeOutCirc" } ],
+ [ { translateX: -10 }, 0.20 ],
+ [ { translateX: 0 }, 0.20 ]
+ ]
+ },
+ /* Animate.css */
+ "transition.bounceLeftOut": {
+ defaultDuration: 750,
+ calls: [
+ [ { translateX: 30 }, 0.20 ],
+ [ { opacity: [ 0, "easeInCirc", 1 ], translateX: -1250 }, 0.80 ]
+ ],
+ reset: { translateX: 0 }
+ },
+ /* Animate.css */
+ "transition.bounceRightIn": {
+ defaultDuration: 750,
+ calls: [
+ [ { opacity: [ 1, 0 ], translateX: [ -30, 1250 ] }, 0.60, { easing: "easeOutCirc" } ],
+ [ { translateX: 10 }, 0.20 ],
+ [ { translateX: 0 }, 0.20 ]
+ ]
+ },
+ /* Animate.css */
+ "transition.bounceRightOut": {
+ defaultDuration: 750,
+ calls: [
+ [ { translateX: -30 }, 0.20 ],
+ [ { opacity: [ 0, "easeInCirc", 1 ], translateX: 1250 }, 0.80 ]
+ ],
+ reset: { translateX: 0 }
+ },
+ "transition.slideUpIn": {
+ defaultDuration: 900,
+ calls: [
+ [ { opacity: [ 1, 0 ], translateY: [ 0, 20 ], translateZ: 0 } ]
+ ]
+ },
+ "transition.slideUpOut": {
+ defaultDuration: 900,
+ calls: [
+ [ { opacity: [ 0, 1 ], translateY: -20, translateZ: 0 } ]
+ ],
+ reset: { translateY: 0 }
+ },
+ "transition.slideDownIn": {
+ defaultDuration: 900,
+ calls: [
+ [ { opacity: [ 1, 0 ], translateY: [ 0, -20 ], translateZ: 0 } ]
+ ]
+ },
+ "transition.slideDownOut": {
+ defaultDuration: 900,
+ calls: [
+ [ { opacity: [ 0, 1 ], translateY: 20, translateZ: 0 } ]
+ ],
+ reset: { translateY: 0 }
+ },
+ "transition.slideLeftIn": {
+ defaultDuration: 1000,
+ calls: [
+ [ { opacity: [ 1, 0 ], translateX: [ 0, -20 ], translateZ: 0 } ]
+ ]
+ },
+ "transition.slideLeftOut": {
+ defaultDuration: 1050,
+ calls: [
+ [ { opacity: [ 0, 1 ], translateX: -20, translateZ: 0 } ]
+ ],
+ reset: { translateX: 0 }
+ },
+ "transition.slideRightIn": {
+ defaultDuration: 1000,
+ calls: [
+ [ { opacity: [ 1, 0 ], translateX: [ 0, 20 ], translateZ: 0 } ]
+ ]
+ },
+ "transition.slideRightOut": {
+ defaultDuration: 1050,
+ calls: [
+ [ { opacity: [ 0, 1 ], translateX: 20, translateZ: 0 } ]
+ ],
+ reset: { translateX: 0 }
+ },
+ "transition.slideUpBigIn": {
+ defaultDuration: 850,
+ calls: [
+ [ { opacity: [ 1, 0 ], translateY: [ 0, 75 ], translateZ: 0 } ]
+ ]
+ },
+ "transition.slideUpBigOut": {
+ defaultDuration: 800,
+ calls: [
+ [ { opacity: [ 0, 1 ], translateY: -75, translateZ: 0 } ]
+ ],
+ reset: { translateY: 0 }
+ },
+ "transition.slideDownBigIn": {
+ defaultDuration: 850,
+ calls: [
+ [ { opacity: [ 1, 0 ], translateY: [ 0, -75 ], translateZ: 0 } ]
+ ]
+ },
+ "transition.slideDownBigOut": {
+ defaultDuration: 800,
+ calls: [
+ [ { opacity: [ 0, 1 ], translateY: 75, translateZ: 0 } ]
+ ],
+ reset: { translateY: 0 }
+ },
+ "transition.slideLeftBigIn": {
+ defaultDuration: 800,
+ calls: [
+ [ { opacity: [ 1, 0 ], translateX: [ 0, -75 ], translateZ: 0 } ]
+ ]
+ },
+ "transition.slideLeftBigOut": {
+ defaultDuration: 750,
+ calls: [
+ [ { opacity: [ 0, 1 ], translateX: -75, translateZ: 0 } ]
+ ],
+ reset: { translateX: 0 }
+ },
+ "transition.slideRightBigIn": {
+ defaultDuration: 800,
+ calls: [
+ [ { opacity: [ 1, 0 ], translateX: [ 0, 75 ], translateZ: 0 } ]
+ ]
+ },
+ "transition.slideRightBigOut": {
+ defaultDuration: 750,
+ calls: [
+ [ { opacity: [ 0, 1 ], translateX: 75, translateZ: 0 } ]
+ ],
+ reset: { translateX: 0 }
+ },
+ /* Magic.css */
+ "transition.perspectiveUpIn": {
+ defaultDuration: 800,
+ calls: [
+ [ { opacity: [ 1, 0 ], transformPerspective: [ 800, 800 ], transformOriginX: [ 0, 0 ], transformOriginY: [ "100%", "100%" ], rotateX: [ 0, -180 ] } ]
+ ],
+ reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%" }
+ },
+ /* Magic.css */
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.perspectiveUpOut": {
+ defaultDuration: 850,
+ calls: [
+ [ { opacity: [ 0, 1 ], transformPerspective: [ 800, 800 ], transformOriginX: [ 0, 0 ], transformOriginY: [ "100%", "100%" ], rotateX: -180 } ]
+ ],
+ reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%", rotateX: 0 }
+ },
+ /* Magic.css */
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.perspectiveDownIn": {
+ defaultDuration: 800,
+ calls: [
+ [ { opacity: [ 1, 0 ], transformPerspective: [ 800, 800 ], transformOriginX: [ 0, 0 ], transformOriginY: [ 0, 0 ], rotateX: [ 0, 180 ] } ]
+ ],
+ reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%" }
+ },
+ /* Magic.css */
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.perspectiveDownOut": {
+ defaultDuration: 850,
+ calls: [
+ [ { opacity: [ 0, 1 ], transformPerspective: [ 800, 800 ], transformOriginX: [ 0, 0 ], transformOriginY: [ 0, 0 ], rotateX: 180 } ]
+ ],
+ reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%", rotateX: 0 }
+ },
+ /* Magic.css */
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.perspectiveLeftIn": {
+ defaultDuration: 950,
+ calls: [
+ [ { opacity: [ 1, 0 ], transformPerspective: [ 2000, 2000 ], transformOriginX: [ 0, 0 ], transformOriginY: [ 0, 0 ], rotateY: [ 0, -180 ] } ]
+ ],
+ reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%" }
+ },
+ /* Magic.css */
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.perspectiveLeftOut": {
+ defaultDuration: 950,
+ calls: [
+ [ { opacity: [ 0, 1 ], transformPerspective: [ 2000, 2000 ], transformOriginX: [ 0, 0 ], transformOriginY: [ 0, 0 ], rotateY: -180 } ]
+ ],
+ reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%", rotateY: 0 }
+ },
+ /* Magic.css */
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.perspectiveRightIn": {
+ defaultDuration: 950,
+ calls: [
+ [ { opacity: [ 1, 0 ], transformPerspective: [ 2000, 2000 ], transformOriginX: [ "100%", "100%" ], transformOriginY: [ 0, 0 ], rotateY: [ 0, 180 ] } ]
+ ],
+ reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%" }
+ },
+ /* Magic.css */
+ /* Support: Loses rotation in IE9/Android 2.3 (fades only). */
+ "transition.perspectiveRightOut": {
+ defaultDuration: 950,
+ calls: [
+ [ { opacity: [ 0, 1 ], transformPerspective: [ 2000, 2000 ], transformOriginX: [ "100%", "100%" ], transformOriginY: [ 0, 0 ], rotateY: 180 } ]
+ ],
+ reset: { transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%", rotateY: 0 }
+ }
+ };
+
+ /* Register the packaged effects. */
+ for (var effectName in Container.Velocity.RegisterUI.packagedEffects) {
+ Container.Velocity.RegisterUI(effectName, Container.Velocity.RegisterUI.packagedEffects[effectName]);
+ }
+})();
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/3e6ab2e4/assets/less/fauxton.less
----------------------------------------------------------------------
diff --git a/assets/less/fauxton.less b/assets/less/fauxton.less
index 04eeb22..5abbc10 100644
--- a/assets/less/fauxton.less
+++ b/assets/less/fauxton.less
@@ -383,11 +383,11 @@ table.databases {
}
}
.bottom-container {
- height: 110px;
- position: fixed;
- bottom: 0;
- width: 220px;
- background: #3a2c2b;
+ height: 110px;
+ position: fixed;
+ bottom: 0;
+ width: 220px;
+ background: #3a2c2b;
.brand {
.box-sizing(content-box);
.hide-text;
@@ -413,19 +413,19 @@ table.databases {
}
}
#footer-nav-links {
- li {
- a {
- font-size: 12px;
- color: @red;
- padding: 12px;
- text-shadow: none;
- }
- &.active, &:hover{
+ li {
+ a {
+ font-size: 12px;
+ color: @red;
+ padding: 12px;
+ text-shadow: none;
+ }
+ &.active, &:hover{
a {
text-decoration: underline;
}
}
- }
+ }
}
}
nav {
@@ -899,16 +899,19 @@ div.spinner {
margin-top: 5px;
margin-bottom: 5px;
.icon {
- font-size: 11px;
+ font-size: 12px;
}
}
.api-navbar {
- .border-radius(5px);
+ .border-radius(0px);
+ display: none;
position: absolute;
right: 5px;
background-color: #333;
- padding: 5px 20px;
+ border: 1px solid black;
+ padding: 16px 20px 28px;
+ .box-shadow(@boxShadowLeft);
.input-append.input-prepend {
margin-bottom: 0px;
.copying {
@@ -918,29 +921,42 @@ div.spinner {
.add-on {
background: none;
padding: 0px;
- margin: 10px 0;
+ margin: 12px 0;
border: none;
display: block;
text-align: left;
color: #fff;
text-shadow: none;
height: auto;
+ font-size: 16px;
}
.input-xxlarge {
.border-radius(5px 0 0 5px);
border: none;
- padding: 9px;
+ padding: 8px;
font-size: 18px;
-moz-transition: background-color 100ms linear;
-webkit-transition: background-color 100ms linear;
transition: background-color 100ms linear;
+
+ // background-color: rgba(113, 121, 129, 0.2);
+ // color: #308a75;
+ border: 1px solid;
+ border-color: rgba(113, 121, 129, 0);
}
+ .input-xxlarge:focus{
+ box-shadow: none;
+ border: 1px solid rgba(218, 79, 73, 1);
+ color: rgba(85, 85, 85, 0.8);
+ }
+
.btn{
background-color: @red;
color: #333;
margin-left: -1px;
padding: 10px 10px 8px;
border: none;
+ height: 40px;
.border-radius(5px);
&:hover{
background-color: #cbcbcb;
http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/3e6ab2e4/assets/less/variables.less
----------------------------------------------------------------------
diff --git a/assets/less/variables.less b/assets/less/variables.less
index f66f257..467ec2e 100644
--- a/assets/less/variables.less
+++ b/assets/less/variables.less
@@ -76,6 +76,8 @@
@boxShadow: 2px 2px rgba(0,0,0,0.2);
@boxShadowOff: 2px 2px rgba(0,0,0,0);
+@boxShadowLeft: -4px 4px rgba(0,0,0,0.2);
+@boxShadowLeftOff: -4px 4px rgba(0,0,0,0);
@textShadow: 1px 2px rgba(0,0,0,0.2);
@textShadowOff: 1px 2px rgba(0,0,0,0);