code:
/* Wobble To Bottom Right */
@include keyframes(#{$nameSpace}-wobble-to-bottom-right) {
	16.65% {
		@include prefixed(transform, translate(8px, 8px));
	}

	33.3% {
		@include prefixed(transform, translate(-6px, -6px));
	}

	49.95% {
		@include prefixed(transform, translate(4px, 4px));
	}

	66.6% {
		@include prefixed(transform, translate(-2px, -2px));
	}

	83.25% {
		@include prefixed(transform, translate(1px, 1px));
	}

	100% {
		@include prefixed(transform, translate(0, 0));
	}
}

@mixin wobble-to-bottom-right {
	@include hacks();

	&:hover,
	&:focus,
	&:active {
		@include prefixed(animation-name, #{$nameSpace}-wobble-to-bottom-right);
		@include prefixed(animation-duration, 1s);
		@include prefixed(animation-timing-function, ease-in-out);
		@include prefixed(animation-iteration-count, 1);
	}
}


code:
/* Wobble To Top Right */
@include keyframes(#{$nameSpace}-wobble-to-top-right) {
  16.65% {
    @include prefixed(transform, translate(8px, -8px));
  }

  33.3% {
    @include prefixed(transform, translate(-6px, 6px));
  }

  49.95% {
    @include prefixed(transform, translate(4px, -4px));
  }

  66.6% {
    @include prefixed(transform, translate(-2px, 2px));
  }

  83.25% {
    @include prefixed(transform, translate(1px, -1px));
  }

  100% {
    @include prefixed(transform, translate(0, 0));
  }
}

@mixin wobble-to-top-right {
	@include hacks();

	&:hover,
    &:focus,
    &:active {
        @include prefixed(animation-name, #{$nameSpace}-wobble-to-top-right);
        @include prefixed(animation-duration, 1s);
        @include prefixed(animation-timing-function, ease-in-out);
        @include prefixed(animation-iteration-count, 1);
	}
}

license: mit


code:
/* Wobble Top */
@include keyframes(#{$nameSpace}-wobble-top) {
	16.65% {
		@include prefixed(transform, skew(-12deg));
	}

	33.3% {
		@include prefixed(transform, skew(10deg));
	}

	49.95% {
		@include prefixed(transform, skew(-6deg));
	}

	66.6% {
		@include prefixed(transform, skew(4deg));
	}

	83.25% {
		@include prefixed(transform, skew(-2deg));
	}

	100% {
		@include prefixed(transform, skew(0));
	}
}

@mixin wobble-top {
	@include hacks();
	@include prefixed(transform-origin, 0 100%);

	&:hover,
	&:focus,
	&:active {
		@include prefixed(animation-name, #{$nameSpace}-wobble-top);
		@include prefixed(animation-duration, 1s);
		@include prefixed(animation-timing-function, ease-in-out);
		@include prefixed(animation-iteration-count, 1);
	}
}


code:
/* Wobble Vertical */
@include keyframes(#{$nameSpace}-wobble-vertical) {
	16.65% {
		@include prefixed(transform, translateY(8px));
	}

	33.3% {
		@include prefixed(transform, translateY(-6px));
	}

	49.95% {
		@include prefixed(transform, translateY(4px));
	}

	66.6% {
		@include prefixed(transform, translateY(-2px));
	}

	83.25% {
		@include prefixed(transform, translateY(1px));
	}

	100% {
		@include prefixed(transform, translateY(0));
	}
}

@mixin wobble-vertical {
	@include hacks();

	&:hover,
	&:focus,
	&:active {
		@include prefixed(animation-name, #{$nameSpace}-wobble-vertical);
		@include prefixed(animation-duration, 1s);
		@include prefixed(animation-timing-function, ease-in-out);
		@include prefixed(animation-iteration-count, 1);
	}
}


code:
/* Back Pulse */
@include keyframes(#{$nameSpace}-back-pulse) {
	50% {
		background-color: rgba(32, 152, 209, .75);
	}
}

@mixin back-pulse {
	@include hacks();
	overflow: hidden;
	@include prefixed(transition-duration, $slowDuration);
	@include prefixed(transition-property, "color, background-color");

	&:hover,
	&:focus,
	&:active {
		@include prefixed(animation-name, #{$nameSpace}-back-pulse);
		@include prefixed(animation-duration, 1s);
		@include prefixed(animation-delay, $slowDuration);
		@include prefixed(animation-timing-function, linear);
		@include prefixed(animation-iteration-count, infinite);
		background-color: $activeColor;
		background-color: rgba(32, 152, 209, 1);
		color: white;
	}
}


code:
/* Bounce To Bottom */
@mixin bounce-to-bottom {
	@include hacks();
	position: relative;
	@include prefixed(transition-property, color);
	@include prefixed(transition-duration, $slowDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: $activeColor;
		@include prefixed(transform, scaleY(0));
		@include prefixed(transform-origin, 50% 0);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-duration, $slowDuration);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			@include prefixed(transform, scaleY(1));
			@include prefixed(transition-timing-function, cubic-bezier(.52,1.64,.37,.66));
		}
	}
}


code:
/* Bounce To Left */
@mixin bounce-to-left {
	@include hacks();
	position: relative;
	@include prefixed(transition-property, color);
	@include prefixed(transition-duration, $slowDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: $activeColor;
		@include prefixed(transform, scaleX(0));
		@include prefixed(transform-origin, 100% 50%);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-duration, $slowDuration);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			@include prefixed(transform, scaleX(1));
			@include prefixed(transition-timing-function, cubic-bezier(.52,1.64,.37,.66));
		}
	}
}


code:
/* Bounce To Right */
@mixin bounce-to-right {
	@include hacks();
	position: relative;
	@include prefixed(transition-property, color);
	@include prefixed(transition-duration, $slowDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: $activeColor;
		@include prefixed(transform, scaleX(0));
		@include prefixed(transform-origin, 0 50%);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-duration, $slowDuration);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			@include prefixed(transform, scaleX(1));
			@include prefixed(transition-timing-function, cubic-bezier(.52,1.64,.37,.66));
		}
	}
}


code:
/* Bounce To Top */
@mixin bounce-to-top {
	@include hacks();
	position: relative;
	@include prefixed(transition-property, color);
	@include prefixed(transition-duration, $slowDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: $activeColor;
		@include prefixed(transform, scaleY(0));
		@include prefixed(transform-origin, 50% 100%);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-duration, $slowDuration);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			@include prefixed(transform, scaleY(1));
			@include prefixed(transition-timing-function, cubic-bezier(.52,1.64,.37,.66));
		}
	}
}


code:
/* Fade */
@mixin fade {
	@include hacks();
	overflow: hidden;
	@include prefixed(transition-duration, $mediumDuration);
	@include prefixed(transition-property, "color, background-color");

	&:hover,
	&:focus,
	&:active {
		background-color: $activeColor;
		color: white;
	}
}


code:
/* Radial In */
@mixin radial-in {
	@include hacks();
	position: relative;
	overflow: hidden;
	background: $activeColor;
	@include prefixed(transition-property, color);
	@include prefixed(transition-duration, $mediumDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: $primaryColor;
		border-radius: 100%;
		@include prefixed(transform, scale(2));
		@include prefixed(transition-property, transform);
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			@include prefixed(transform, scale(0));
		}
	}
}


code:
/* Radial Out */
@mixin radial-out {
	@include hacks();
	position: relative;
	overflow: hidden;
	background: $primaryColor;
	@include prefixed(transition-property, color);
	@include prefixed(transition-duration, $mediumDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: $activeColor;
		border-radius: 100%;
		@include prefixed(transform, scale(0));
		@include prefixed(transition-property, transform);
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			@include prefixed(transform, scale(2));
		}
	}
}


code:
/* Rectangle In */
@mixin rectangle-in {
	@include hacks();
	position: relative;
	background: $activeColor;
	@include prefixed(transition-property, color);
	@include prefixed(transition-duration, $mediumDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: $primaryColor;
		@include prefixed(transform, scale(1));
		@include prefixed(transition-property, transform);
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			@include prefixed(transform, scale(0));
		}
	}
}


code:
/* Rectangle Out */
@mixin rectangle-out {
	@include hacks();
	position: relative;
	background: $primaryColor;
	@include prefixed(transition-property, color);
	@include prefixed(transition-duration, $mediumDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: $activeColor;
		@include prefixed(transform, scale(0));
		@include prefixed(transition-property, transform);
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			@include prefixed(transform, scale(1));
		}
	}
}


code:
/* Shutter In Horizontal */
@mixin shutter-in-horizontal {
	@include hacks();
	position: relative;
	background: $activeColor;
	@include prefixed(transition-property, color);
	@include prefixed(transition-duration, $mediumDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: $primaryColor;
		@include prefixed(transform, scaleX(1));
		@include prefixed(transform-origin, 50%);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			@include prefixed(transform, scaleX(0));
		}
	}
}


code:
/* Shutter In Vertical */
@mixin shutter-in-vertical {
	@include hacks();
	position: relative;
	background: $activeColor;
	@include prefixed(transition-property, color);
	@include prefixed(transition-duration, $mediumDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: $primaryColor;
		@include prefixed(transform, scaleY(1));
		@include prefixed(transform-origin, 50%);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			@include prefixed(transform, scaleY(0));
		}
	}
}


code:
/* Shutter Out Horizontal */
@mixin shutter-out-horizontal {
	@include hacks();
	position: relative;
	background: $primaryColor;
	@include prefixed(transition-property, color);
	@include prefixed(transition-duration, $mediumDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: $activeColor;
		@include prefixed(transform, scaleX(0));
		@include prefixed(transform-origin, 50%);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			@include prefixed(transform, scaleX(1));
		}
	}
}


code:
/* Shutter Out Vertical */
@mixin shutter-out-vertical {
	@include hacks();
	position: relative;
	background: $primaryColor;
	@include prefixed(transition-property, color);
	@include prefixed(transition-duration, $mediumDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: $activeColor;
		@include prefixed(transform, scaleY(0));
		@include prefixed(transform-origin, 50%);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			@include prefixed(transform, scaleY(1));
		}
	}
}


code:
/* Sweep To Bottom */
@mixin sweep-to-bottom {
	@include hacks();
	position: relative;
	@include prefixed(transition-property, color);
	@include prefixed(transition-duration, $mediumDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: $activeColor;
		@include prefixed(transform, scaleY(0));
		@include prefixed(transform-origin, 50% 0);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			@include prefixed(transform, scaleY(1));
		}
	}
}


code:
/* Sweep To Left */
@mixin sweep-to-left {
	@include hacks();
	position: relative;
	@include prefixed(transition-property, color);
	@include prefixed(transition-duration, $mediumDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: $activeColor;
		@include prefixed(transform, scaleX(0));
		@include prefixed(transform-origin, 100% 50%);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			@include prefixed(transform, scaleX(1));
		}
	}
}


code:
/* Sweep To Right */
@mixin sweep-to-right {
	@include hacks();
	position: relative;
	@include prefixed(transition-property, color);
	@include prefixed(transition-duration, $mediumDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: $activeColor;
		@include prefixed(transform, scaleX(0));
		@include prefixed(transform-origin, 0 50%);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			@include prefixed(transform, scaleX(1));
		}
	}
}


code:
/* Sweep To Top */
@mixin sweep-to-top {
	@include hacks();
	position: relative;
	@include prefixed(transition-property, color);
	@include prefixed(transition-duration, $mediumDuration);

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: $activeColor;
		@include prefixed(transform, scaleY(0));
		@include prefixed(transform-origin, 50% 100%);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {
		color: white;

		&:before {
			@include prefixed(transform, scaleY(1));
		}
	}
}


code:
/* Border Fade */
@mixin border-fade {
	$borderWidth: 4px;

	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);
	@include prefixed(transition-property, box-shadow);
	box-shadow:
			inset 0 0 0 $borderWidth $primaryColor,
			0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */

	&:hover,
	&:focus,
	&:active {
		box-shadow:
			inset 0 0 0 $borderWidth $activeColor,
			0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */
	}
}


code:
/* Hollow */
@mixin hollow {
	$borderWidth: 4px;

	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);
	@include prefixed(transition-property, background);
	box-shadow:
		inset 0 0 0 $borderWidth $primaryColor,
		0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */

	&:hover,
	&:focus,
	&:active {
		background: none;
	}
}


code:
/* Outline In */
@mixin outline-in {
	$outerBorderWidth: 4px;
	$innerBorderWidth: 4px;

	@include hacks();
	position: relative;

	&:before {
		pointer-events: none;
		content: '';
		position: absolute;
		border: $primaryColor solid $outerBorderWidth;
		top: -($outerBorderWidth + $innerBorderWidth) * 2;
		right: -($outerBorderWidth + $innerBorderWidth) * 2;
		bottom: -($outerBorderWidth + $innerBorderWidth) * 2;
		left: -($outerBorderWidth + $innerBorderWidth) * 2;
		opacity: 0;
		@include prefixed(transition-duration, .3s);
		@include prefixed(transition-property, "top, right, bottom, left");
	}

	&:hover:before,
	&:focus:before,
	&:active:before {
		top: -($outerBorderWidth + $innerBorderWidth);
		right: -($outerBorderWidth + $innerBorderWidth);
		bottom: -($outerBorderWidth + $innerBorderWidth);
		left: -($outerBorderWidth + $innerBorderWidth);
		opacity: 1;
	}
}


code:
/* Outline Out */
@mixin outline-out {
	$outerBorderWidth: 4px;
	$innerBorderWidth: 4px;

	@include hacks();
	position: relative;

	&:before {
		content: '';
		position: absolute;
		border: $primaryColor solid $outerBorderWidth;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		@include prefixed(transition-duration, .3s);
		@include prefixed(transition-property, "top, right, bottom, left");
	}

	&:hover:before,
	&:focus:before,
	&:active:before {
		top: -($outerBorderWidth + $innerBorderWidth);
		right: -($outerBorderWidth + $innerBorderWidth);
		bottom: -($outerBorderWidth + $innerBorderWidth);
		left: -($outerBorderWidth + $innerBorderWidth);
	}
}


code:
/* Overline From Center */
@mixin overline-from-center {
	$duration: $mediumDuration;

	@include hacks();
	position: relative;
	overflow: hidden;

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		left: 51%;
		right: 51%;
		top: 0;
		background: $activeColor;
		height: 4px;
		@include prefixed(transition-property, "left, right");
		@include prefixed(transition-duration, $duration);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		&:before {
			left: 0;
			right: 0;
		}
	}
}


code:
/* Overline From Left */
@mixin overline-from-left {
	$duration: $mediumDuration;

	@include hacks();
	position: relative;
	overflow: hidden;

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		left: 0;
		right: 100%;
		top: 0;
		background: $activeColor;
		height: 4px;
		@include prefixed(transition-property, "right");
		@include prefixed(transition-duration, $duration);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		&:before {
			right: 0;
		}
	}
}


code:
/* Overline From Right */
@mixin overline-from-right {
	$duration: $mediumDuration;

	@include hacks();
	position: relative;
	overflow: hidden;

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		left: 100%;
		right: 0;
		top: 0;
		background: $activeColor;
		height: 4px;
		@include prefixed(transition-property, "left");
		@include prefixed(transition-duration, $duration);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		&:before {
			left: 0;
		}
	}
}


code:
/* Overline Reveal */
@mixin overline-reveal {
	$duration: $mediumDuration;

	@include hacks();
	position: relative;
	overflow: hidden;

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		top: 0;
		background: $activeColor;
		height: 4px;
		@include prefixed(transform, translateY(-4px));
		@include prefixed(transition-property, transform);
		@include prefixed(transition-duration, $duration);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		&:before {
			@include prefixed(transform, translateY(0));
		}
	}
}


code:
/* Reveal */
@mixin reveal {
	$duration: #{$fastDuration};

	@include hacks();
	position: relative;
	overflow: hidden;

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		border-color: #{$activeColor};
		border-style: solid;
		border-width: 0;
		@include prefixed(transition-property, border-width);
		@include prefixed(transition-duration, #{$duration});
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		&:before {
			@include prefixed(transform, translateY(0));
			border-width: 4px;
		}
	}
}


code:
/* Ripple In */
@include keyframes(#{$nameSpace}-ripple-in) {
	100% {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: 1;
	}
}

@mixin ripple-in {
	$outerBorderWidth: 4px;
	$innerBorderWidth: 4px;

	@include hacks();
	position: relative;

	&:before {
		content: '';
		position: absolute;
		border: $primaryColor solid $outerBorderWidth;
		top: -(6px + 6px);
		right: -(6px + 6px);
		bottom: -(6px + 6px);
		left: -(6px + 6px);
		opacity: 0;
		@include prefixed(animation-duration, 1s);
	}

	&:hover:before,
	&:focus:before,
	&:active:before {
		@include prefixed(animation-name, #{$nameSpace}-ripple-in);
	}
}


code:
/* Ripple Out */
@include keyframes(#{$nameSpace}-ripple-out) {
	100% {
		top: -(6px + 6px);
		right: -(6px + 6px);
		bottom: -(6px + 6px);
		left: -(6px + 6px);
		opacity: 0;
	}
}

@mixin ripple-out {
	$outerBorderWidth: 6px;
	$innerBorderWidth: 6px;

	@include hacks();
	position: relative;

	&:before {
		content: '';
		position: absolute;
		border: $primaryColor solid $outerBorderWidth;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		@include prefixed(animation-duration, 1s);
	}

	&:hover:before,
	&:focus:before,
	&:active:before {
		@include prefixed(animation-name, #{$nameSpace}-ripple-out);
	}
}


code:
/* Round Corners */
@mixin round-corners {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);
	@include prefixed(transition-property, border-radius);

	&:hover,
	&:focus,
	&:active {
		border-radius: 1em;
	}
}


code:
/* Trim */
@mixin trim {
	$outerBorderWidth: 4px;
	$innerBorderWidth: 4px;

	@include hacks();
	position: relative;

	&:before {
		content: '';
		position: absolute;
		border: white solid $innerBorderWidth;
		top: $outerBorderWidth;
		left: $outerBorderWidth;
		right: $outerBorderWidth;
		bottom: $outerBorderWidth;
		opacity: 0;
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-property, opacity);
	}

	&:hover:before,
	&:focus:before,
	&:active:before {
		opacity: 1;
	}
}


code:
/* Underline From Center */
@mixin underline-from-center {
	$duration: $mediumDuration;

	@include hacks();
	position: relative;
	overflow: hidden;

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		left: 51%;
		right: 51%;
		bottom: 0;
		background: $activeColor;
		height: 4px;
		@include prefixed(transition-property, "left, right");
		@include prefixed(transition-duration, $duration);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		&:before {
			left: 0;
			right: 0;
		}
	}
}


code:
/* Underline From Left */
@mixin underline-from-left {
	$duration: $mediumDuration;

	@include hacks();
	position: relative;
	overflow: hidden;

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		left: 0;
		right: 100%;
		bottom: 0;
		background: $activeColor;
		height: 4px;
		@include prefixed(transition-property, "right");
		@include prefixed(transition-duration, $duration);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		&:before {
			right: 0;
		}
	}
}


code:
/* Underline From Right */
@mixin underline-from-right {
	$duration: $mediumDuration;

	@include hacks();
	position: relative;
	overflow: hidden;

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		left: 100%;
		right: 0;
		bottom: 0;
		background: $activeColor;
		height: 4px;
		@include prefixed(transition-property, "left");
		@include prefixed(transition-duration, $duration);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		&:before {
			left: 0;
		}
	}
}


code:
/* Underline Reveal */
@mixin underline-reveal {
	$duration: $mediumDuration;

	@include hacks();
	position: relative;
	overflow: hidden;

	&:before {
		content: "";
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		background: $activeColor;
		height: 4px;
		@include prefixed(transform, translateY(4px));
		@include prefixed(transition-property, transform);
		@include prefixed(transition-duration, $duration);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		&:before {
			@include prefixed(transform, translateY(0));
		}
	}
}


code:
/* Curl Bottom Left */
@mixin curl-bottom-left {
	@include hacks();
	position: relative;

	&:before {
		pointer-events: none;
		position: absolute;
		content: '';
		height: 0;
		width: 0;
		bottom: 0;
		left: 0;
		background: $revealAreaColor; /* IE9 */
		background: linear-gradient(
			45deg,
			$revealAreaColor 45%,
			$curlLineColor 50%,
			$curlTransitionColor 56%,
			$curlLastColor 80%
		);
		box-shadow: 1px -1px 1px rgba(0, 0, 0, .4);
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-property, "width, height");
	}

	&:hover:before,
	&:focus:before,
	&:active:before {
		width: $curlWidth;
		height: $curlHeight;
	}
}


code:
/* Curl Bottom Right */
@mixin curl-bottom-right {
	@include hacks();
	position: relative;

	&:before {
		pointer-events: none;
		position: absolute;
		content: '';
		height: 0;
		width: 0;
		bottom: 0;
		right: 0;
		background: $revealAreaColor; /* IE9 */
		background: linear-gradient(
			315deg,
			$revealAreaColor 45%,
			$curlLineColor 50%,
			$curlTransitionColor 56%,
			$curlLastColor 80%
		);
		box-shadow: -1px -1px 1px rgba(0, 0, 0, .4);
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-property, "width, height");
	}

	&:hover:before,
	&:focus:before,
	&:active:before {
		width: $curlWidth;
		height: $curlHeight;
	}
}


code:
/* Curl Top Left */
@mixin curl-top-left {
	@include hacks();
	position: relative;

	&:before {
		pointer-events: none;
		position: absolute;
		content: '';
		height: 0;
		width: 0;
		top: 0;
		left: 0;
		background: $revealAreaColor; /* IE9 */
		background: linear-gradient(
			135deg,
			$revealAreaColor 45%,
			$curlLineColor 50%,
			$curlTransitionColor 56%,
			$curlLastColor 80%
		);
		filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/

		z-index: 1000;
		box-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-property, "width, height");
	}

	&:hover:before,
	&:focus:before,
	&:active:before {
		width: $curlWidth;
		height: $curlHeight;
	}
}


code:
/* Curl Top Right */
@mixin curl-top-right {
	@include hacks();
	position: relative;

	&:before {
		pointer-events: none;
		position: absolute;
		content: '';
		height: 0;
		width: 0;
		top: 0;
		right: 0;
		background: $revealAreaColor; /* IE9 */
		background: linear-gradient(
			225deg,
			$revealAreaColor 45%,
			$curlLineColor 50%,
			$curlTransitionColor 56%,
			$curlLastColor 80%
		);
		box-shadow: -1px 1px 1px rgba(0, 0, 0, .4);
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-property, "width, height");
	}

	&:hover:before,
	&:focus:before,
	&:active:before {
		width: $curlWidth;
		height: $curlHeight;
	}
}


code:
/* Icon Back */
@mixin icon-back {
	@include hacks();
	@include prefixed(transition-duration, $fastDuration);

	.hvr-icon {
		@include prefixed(transform, translateZ(0));
		@include prefixed(transition-duration, $fastDuration);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			@include prefixed(transform, translateX(-4px));
		}
	}
}


code:
/* Icon Bob */
@include keyframes(#{$nameSpace}-icon-bob) {
	0% {
		@include prefixed(transform, translateY(-6px));
	}
	50% {
		@include prefixed(transform, translateY(-2px));
	}
	100% {
		@include prefixed(transform, translateY(-6px));
	}
}

@include keyframes(#{$nameSpace}-icon-bob-float) {
	100% {
		@include prefixed(transform, translateY(-6px));
	}
}

@mixin icon-bob {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);

	.hvr-icon {
		@include prefixed(transform, translateZ(0));
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			@include prefixed(animation-name, "#{$nameSpace}-icon-bob-float, #{$nameSpace}-icon-bob");
			@include prefixed(animation-duration, ".3s, 1.5s");
			@include prefixed(animation-delay, "0s, .3s");
			@include prefixed(animation-timing-function, "ease-out, ease-in-out");
			@include prefixed(animation-iteration-count, "1, infinite");
			@include prefixed(animation-fill-mode, "forwards");
			@include prefixed(animation-direction, "normal, alternate");
		}
	}
}


code:
/* Icon Bounce Out */
@include keyframes(#{$nameSpace}-icon-bounce-out) {
	50% {
		@include prefixed(transform, scale(1.5));
	}
}

@mixin icon-bounce-out {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);

	.hvr-icon {
		@include prefixed(transform, translateZ(0));
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			@include prefixed(transform, scale(.9));
			@include prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36));
		}
	}
}


code:
/* Icon Bounce */

@mixin icon-bounce {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);

	.hvr-icon {
		@include prefixed(transform, translateZ(0));
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			@include prefixed(transform, scale(1.5));
			@include prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36));
		}
	}
}


code:
/* Icon Buzz Out */
@include keyframes(#{$nameSpace}-icon-buzz-out) {
	10% {
		@include prefixed(transform, translateX(3px) rotate(2deg));
	}

	20% {
		@include prefixed(transform, translateX(-3px) rotate(-2deg));
	}

	30% {
		@include prefixed(transform, translateX(3px) rotate(2deg));
	}

	40% {
		@include prefixed(transform, translateX(-3px) rotate(-2deg));
	}

	50% {
		@include prefixed(transform, translateX(2px) rotate(1deg));
	}

	60% {
		@include prefixed(transform, translateX(-2px) rotate(-1deg));
	}

	70% {
		@include prefixed(transform, translateX(2px) rotate(1deg));
	}

	80% {
		@include prefixed(transform, translateX(-2px) rotate(-1deg));
	}

	90% {
		@include prefixed(transform, translateX(1px) rotate(0));
	}

	100% {
		@include prefixed(transform, translateX(-1px) rotate(0));
	}
}

@mixin icon-buzz-out {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);

	.hvr-icon {
		@include prefixed(transform, translateZ(0));
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			@include prefixed(animation-name, #{$nameSpace}-icon-buzz-out);
			@include prefixed(animation-duration, .75s);
			@include prefixed(animation-timing-function, linear);
			@include prefixed(animation-iteration-count, 1);
		}
	}
}


code:
/* Icon Buzz */
@include keyframes(#{$nameSpace}-icon-buzz) {
	50% {
		@include prefixed(transform, translateX(3px) rotate(2deg));
	}

	100% {
		@include prefixed(transform, translateX(-3px) rotate(-2deg));
	}
}

@mixin icon-buzz {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);

	.hvr-icon {
		@include prefixed(transform, translateZ(0));
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			@include prefixed(animation-name, #{$nameSpace}-icon-buzz);
			@include prefixed(animation-duration, .15s);
			@include prefixed(animation-timing-function, linear);
			@include prefixed(animation-iteration-count, infinite);
		}
	}
}


code:
/* Icon Down */
@include keyframes(#{$nameSpace}-icon-down) {
	0%,
	50%,
	100% {
		@include prefixed(transform, translateY(0));
	}
	25%,
	75% {
		@include prefixed(transform, translateY(6px));
	}
}

/* Icon Down */
@mixin icon-down {
	@include hacks();

	.hvr-icon {
		@include prefixed(transform, translateZ(0));
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			@include prefixed(animation-name, #{$nameSpace}-icon-down);
			@include prefixed(animation-duration, .75s);
			@include prefixed(animation-timing-function, ease-out);
		}
	}
}


code:
/* Icon Drop */
@include keyframes(#{$nameSpace}-icon-drop) {
	0% {
		opacity: 0;

	}

	50% {
		opacity: 0;
		@include prefixed(transform, translateY(-100%));
	}

	51%,
	100% {
		opacity: 1;
	}
}

/* Icon Drop */
@mixin icon-drop {
	@include hacks();

	.hvr-icon {
		@include prefixed(transform, translateZ(0));
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			opacity: 0;
			@include prefixed(transition-duration, #{$mediumDuration});
			@include prefixed(animation-name, #{$nameSpace}-icon-drop);
			@include prefixed(animation-duration, #{$slowDuration});
			@include prefixed(animation-delay, #{$mediumDuration});
			@include prefixed(animation-fill-mode, forwards);
			@include prefixed(animation-timing-function, ease-in-out);
			@include prefixed(animation-timing-function, cubic-bezier(.52,1.64,.37,.66));
		}
	}
}


code:
/* Icon Fade */
@mixin icon-fade {
	@include hacks();

	.hvr-icon {
		@include prefixed(transform, translateZ(0));
		@include prefixed(transition-duration, .5s);
		@include prefixed(transition-property, color);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			color: #0F9E5E;
		}
	}
}


code:
/* Icon Float Away */
@include keyframes(#{$nameSpace}-icon-float-away) {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		@include prefixed(transform, translateY(-1em));
	}
}

/* Icon Float Away */
@mixin icon-float-away {
	@include hacks();

	.hvr-icon {
		@include prefixed(transform, translateZ(0));
		@include prefixed(animation-duration, #{$slowDuration});
		@include prefixed(animation-fill-mode, forwards);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			@include prefixed(animation-name, #{$nameSpace}-icon-float-away);
			@include prefixed(animation-timing-function, ease-out);
		}
	}
}


code:
/* Icon Float */
@mixin icon-float {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);

	.hvr-icon {
		@include prefixed(transform, translateZ(0));
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			@include prefixed(transform, translateY(-4px));
		}
	}
}


code:
/* Icon Forward */
@mixin icon-forward {
	@include hacks();
	@include prefixed(transition-duration, $fastDuration);

	.hvr-icon {
		@include prefixed(transform, translateZ(0));
		@include prefixed(transition-duration, $fastDuration);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			@include prefixed(transform, translateX(4px));
		}
	}
}


code:
/* Icon Grow Rotate */
@mixin icon-grow-rotate {
	$duration: $mediumDuration;

	@include hacks();
	@include prefixed(transition-duration, $duration);

	.hvr-icon {
		@include prefixed(transform, translateZ(0));
		@include prefixed(transition-duration, $duration);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			@include prefixed(transform, scale(1.5) rotate(12deg));
		}
	}
}


code:
/* Icon Grow */
@mixin icon-grow {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);

	.hvr-icon {
		@include prefixed(transform, translateZ(0));
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			@include prefixed(transform, scale(1.3) translateZ(0));
		}
	}
}


code:
/* Icon Hang */
@include keyframes(#{$nameSpace}-icon-hang) {
	0% {
		@include prefixed(transform, translateY(6px));
	}
	50% {
		@include prefixed(transform, translateY(2px));
	}
	100% {
		@include prefixed(transform, translateY(6px));
	}
}

@include keyframes(#{$nameSpace}-icon-hang-sink) {
	100% {
		@include prefixed(transform, translateY(6px));
	}
}

@mixin icon-hang {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);

	.hvr-icon {
		@include prefixed(transform, translateZ(0));
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			@include prefixed(animation-name, "#{$nameSpace}-icon-hang-sink, #{$nameSpace}-icon-hang");
			@include prefixed(animation-duration, ".3s, 1.5s");
			@include prefixed(animation-delay, "0s, .3s");
			@include prefixed(animation-timing-function, "ease-out, ease-in-out");
			@include prefixed(animation-iteration-count, "1, infinite");
			@include prefixed(animation-fill-mode, "forwards");
			@include prefixed(animation-direction, "normal, alternate");
		}
	}
}


code:
/* Icon Pop */
@include keyframes(#{$nameSpace}-icon-pop) {
	50% {
		@include prefixed(transform, scale(1.5));
	}
}

@mixin icon-pop {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);

	.hvr-icon {
		@include prefixed(transform, translateZ(0));
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			@include prefixed(animation-name, #{$nameSpace}-icon-pop);
			@include prefixed(animation-duration, $mediumDuration);
			@include prefixed(animation-timing-function, linear);
			@include prefixed(animation-iteration-count, 1);
		}
	}
}


code:
/* Icon Pulse Grow */
@include keyframes(#{$nameSpace}-icon-pulse-grow) {
	to {
		@include prefixed(transform, scale(1.3));
	}
}

@mixin icon-pulse-grow {
	@include hacks();

	.hvr-icon {
		@include prefixed(transform, translateZ(0));
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			@include prefixed(animation-name, #{$nameSpace}-icon-pulse-grow);
			@include prefixed(animation-duration, $mediumDuration);
			@include prefixed(animation-timing-function, linear);
			@include prefixed(animation-iteration-count, infinite);
			@include prefixed(animation-direction, alternate);
		}
	}
}


code:
/* Icon Pulse Shrink */
@include keyframes(#{$nameSpace}-icon-pulse-shrink) {
	to {
		@include prefixed(transform, scale(.8));
	}
}

@mixin icon-pulse-shrink {
	@include hacks();

	.hvr-icon {
		@include prefixed(transform, translateZ(0));
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			@include prefixed(animation-name, #{$nameSpace}-icon-pulse-shrink);
			@include prefixed(animation-duration, $mediumDuration);
			@include prefixed(animation-timing-function, linear);
			@include prefixed(animation-iteration-count, infinite);
			@include prefixed(animation-direction, alternate);
		}
	}
}


code:
/* Icon Pulse */
@include keyframes(#{$nameSpace}-icon-pulse) {
	25% {
		@include prefixed(transform, scale(1.3));
	}

	75% {
		@include prefixed(transform, scale(.8));
	}
}

@mixin icon-pulse {
	@include hacks();

	.hvr-icon {
		@include prefixed(transform, translateZ(0));
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			@include prefixed(animation-name, #{$nameSpace}-icon-pulse);
			@include prefixed(animation-duration, 1s);
			@include prefixed(animation-timing-function, linear);
			@include prefixed(animation-iteration-count, infinite);
		}
	}
}


code:
/* Icon Push */
@include keyframes(#{$nameSpace}-icon-push) {
	50% {
		@include prefixed(transform, scale(.5));
	}
}

@mixin icon-push {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);

	.hvr-icon {
		@include prefixed(transform, translateZ(0));
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			@include prefixed(animation-name, #{$nameSpace}-icon-push);
			@include prefixed(animation-duration, $mediumDuration);
			@include prefixed(animation-timing-function, linear);
			@include prefixed(animation-iteration-count, 1);
		}
	}
}


code:
/* Icon Rotate */
@mixin icon-rotate {
	$duration: $mediumDuration;

	@include hacks();
	@include prefixed(transition-duration, $duration);

	.hvr-icon {
		@include prefixed(transform, translateZ(0));
		@include prefixed(transition-duration, $duration);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			@include prefixed(transform, rotate(20deg));
		}
	}
}


code:
/* Icon Shrink */
@mixin icon-shrink {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);

	.hvr-icon {
		@include prefixed(transform, translateZ(0));
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			@include prefixed(transform, scale(.8));
		}
	}
}


code:
/* Icon Sink Away */
@include keyframes(#{$nameSpace}-icon-sink-away) {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		@include prefixed(transform, translateY(1em));
	}
}

/* Icon Sink Away */
@mixin icon-sink-away {
	@include hacks();

	.hvr-icon {
		@include prefixed(transform, translateZ(0));
		@include prefixed(animation-duration, #{$slowDuration});
		@include prefixed(animation-fill-mode, forwards);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			@include prefixed(animation-name, #{$nameSpace}-icon-sink-away);
			@include prefixed(animation-timing-function, ease-out);
		}
	}
}


code:
/* Icon Sink */
@mixin icon-sink {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);

	.hvr-icon {
		@include prefixed(transform, translateZ(0));
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-timing-function, ease-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			@include prefixed(transform, translateY(4px));
		}
	}
}


code:
/* Icon Spin */
@mixin icon-spin {
	@include hacks();

	.hvr-icon {
		@include prefixed(transition-duration, 1s);
		@include prefixed(transition-property, transform);
		@include prefixed(transition-timing-function, ease-in-out);
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			@include prefixed(transform, rotate(360deg));
		}
	}
}


code:
/* Icon Up */
@include keyframes(#{$nameSpace}-icon-up) {
	0%,
	50%,
	100% {
		@include prefixed(transform, translateY(0));
	}
	25%,
	75% {
		@include prefixed(transform, translateY(-6px));
	}
}

/* Icon Up */
@mixin icon-up {
	@include hacks();

	.hvr-icon {
		@include prefixed(transform, translateZ(0));
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			@include prefixed(animation-name, #{$nameSpace}-icon-up);
			@include prefixed(animation-duration, .75s);
			@include prefixed(animation-timing-function, ease-out);
		}
	}
}


code:
/* Icon Wobble Horizontal */
@include keyframes(#{$nameSpace}-icon-wobble-horizontal) {
	16.65% {
		@include prefixed(transform, translateX(6px));
	}

	33.3% {
		@include prefixed(transform, translateX(-5px));
	}

	49.95% {
		@include prefixed(transform, translateX(4px));
	}

	66.6% {
		@include prefixed(transform, translateX(-2px));
	}

	83.25% {
		@include prefixed(transform, translateX(1px));
	}

	100% {
		@include prefixed(transform, translateX(0));
	}
}

@mixin icon-wobble-horizontal {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);

	.hvr-icon {
		@include prefixed(transform, translateZ(0));
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			@include prefixed(animation-name, #{$nameSpace}-icon-wobble-horizontal);
			@include prefixed(animation-duration, 1s);
			@include prefixed(animation-timing-function, ease-in-out);
			@include prefixed(animation-iteration-count, 1);
		}
	}
}


code:
/* Icon Wobble Vertical */
@include keyframes(#{$nameSpace}-icon-wobble-vertical) {
	16.65% {
		@include prefixed(transform, translateY(6px));
	}

	33.3% {
		@include prefixed(transform, translateY(-5px));
	}

	49.95% {
		@include prefixed(transform, translateY(4px));
	}

	66.6% {
		@include prefixed(transform, translateY(-2px));
	}

	83.25% {
		@include prefixed(transform, translateY(1px));
	}

	100% {
		@include prefixed(transform, translateY(0));
	}
}

@mixin icon-wobble-vertical {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);

	.hvr-icon {
		@include prefixed(transform, translateZ(0));
	}

	&:hover,
	&:focus,
	&:active {

		.hvr-icon {
			@include prefixed(animation-name, #{$nameSpace}-icon-wobble-vertical);
			@include prefixed(animation-duration, 1s);
			@include prefixed(animation-timing-function, ease-in-out);
			@include prefixed(animation-iteration-count, 1);
		}
	}
}


code:
/* Box Shadow Inset */
@mixin box-shadow-inset {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);
	@include prefixed(transition-property, box-shadow);

	box-shadow: inset 0 0 0 $shadowColor,
		0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */

	&:hover,
	&:focus,
	&:active {
		box-shadow: inset 2px 2px 2px $shadowColor,
		0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */
	}
}


code:
/* Box Shadow Outset */
@mixin box-shadow-outset {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);
	@include prefixed(transition-property, box-shadow);

	&:hover,
	&:focus,
	&:active {
		box-shadow: 2px 2px 2px $shadowColor;
	}
}


code:
/* Float Shadow */
@mixin float-shadow {
	@include hacks();
	position: relative;
	@include prefixed(transition-duration, $mediumDuration);
	@include prefixed(transition-property, transform);

	&:before {
	  pointer-events: none;
	  position: absolute;
	  z-index: -1;
	  content: '';
	  top: 100%;
	  left: 5%;
	  height: 10px;
	  width: 90%;
	  opacity: 0;
	  background: -webkit-radial-gradient(center, ellipse, rgba(0,0,0,.35) 0%, rgba(0, 0, 0, 0) 80%);
	  background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 80%); /* W3C */
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-property, "transform, opacity");
	}

	&:hover,
	&:focus,
	&:active {
		@include prefixed(transform, translateY(-5px)); /* move the element up by 5px */

		&:before {
			opacity: 1;
			@include prefixed(transform, translateY(5px)); /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
		}
	}
}


code:
/* Glow */
@mixin glow {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);
	@include prefixed(transition-property, box-shadow);

	&:hover,
	&:focus,
	&:active {
		box-shadow: 0 0 8px $shadowColor;
	}
}


code:
/* Grow Shadow */
@mixin grow-shadow {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);
	@include prefixed(transition-property, "box-shadow, transform");

	&:hover,
	&:focus,
	&:active {
		box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
		@include prefixed(transform, scale(1.1));
	}
}


code:
/* Shadow Radial */
@mixin shadow-radial {
	@include hacks();
	position: relative;

	&:before,
	&:after {
	  pointer-events: none;
      position: absolute;
	  content: '';
      left: 0;
      width: 100%;
      box-sizing: border-box;
      background-repeat: no-repeat;
      height: 5px;
      opacity: 0;
	  @include prefixed(transition-duration, $mediumDuration);
	  @include prefixed(transition-property, opacity);
	}

	&:before {
	  bottom: 100%;
	  background: -webkit-radial-gradient(50% 150%, ellipse, $shadowColor 0%, rgba(0, 0, 0, 0) 80%);
      background: radial-gradient(ellipse at 50% 150%, $shadowColor 0%, rgba(0, 0, 0, 0) 80%);
	}

	&:after {
	  top: 100%;
	  background: -webkit-radial-gradient(50% -50%, ellipse, $shadowColor 0%, rgba(0, 0, 0, 0) 80%);
	  background: radial-gradient(ellipse at 50% -50%, $shadowColor 0%, rgba(0, 0, 0, 0) 80%);
	}

	&:hover:before,
	&:focus:before,
	&:active:before,
	&:hover:after,
	&:focus:after,
	&:active:after {
	  opacity: 1;
	}
}


code:
/* Shadow */
@mixin shadow {
	@include hacks();
	@include prefixed(transition-duration, $mediumDuration);
	@include prefixed(transition-property, box-shadow);

	&:hover,
	&:focus,
	&:active {
		box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
	}
}


code:
/* Bubble Bottom */
@mixin bubble-bottom {
	@include hacks();
	position: relative;

	&:before {
		pointer-events: none;
		position: absolute;
		z-index: -1;
		content: '';
		border-style: solid;
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-property, transform);
		left: calc(50% - #{$tipWidth});
		bottom: 0;
		border-width: $tipHeight $tipWidth 0 $tipWidth;
		border-color: $tipColor transparent transparent transparent;
	}

	&:hover:before,
	&:focus:before,
	&:active:before {
		@include prefixed(transform, translateY($tipHeight));
	}
}


code:
/* Bubble Float Bottom */
@mixin bubble-float-bottom {
	@include hacks();
	position: relative;
	@include prefixed(transition-duration, $mediumDuration);
	@include prefixed(transition-property, transform);

	&:before {
		position: absolute;
		z-index: -1;
		content: '';
		left: calc(50% - #{$tipWidth});
		bottom: 0;
		border-style: solid;
		border-width: $tipHeight $tipWidth 0 $tipWidth;
		border-color: $tipColor transparent transparent transparent;
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-property, transform);
	}

	&:hover,
	&:focus,
	&:active {
		@include prefixed(transform, translateY(-($tipHeight)));

		&:before {
			@include prefixed(transform, translateY($tipHeight));
		}
	}
}


code:
/* Bubble Float Left */
@mixin bubble-float-left {
	@include hacks();
	position: relative;
	@include prefixed(transition-duration, $mediumDuration);
	@include prefixed(transition-property, transform);

	&:before {
		position: absolute;
		z-index: -1;
		content: '';
		top: calc(50% - #{$tipHeight});
		left: 0;
		border-style: solid;
		border-width: $tipHeight $tipWidth $tipHeight 0;
		border-color: transparent $tipColor transparent transparent;
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-property, transform);
	}

	&:hover,
	&:focus,
	&:active {
		@include prefixed(transform, translateX($tipWidth));

		&:before {
			@include prefixed(transform, translateX(-($tipWidth)));
		}
	}
}


code:
/* Bubble Float Right */
@mixin bubble-float-right {
	@include hacks();
	position: relative;
	@include prefixed(transition-duration, $mediumDuration);
	@include prefixed(transition-property, transform);

	&:before {
		position: absolute;
		z-index: -1;
		top: calc(50% - #{$tipHeight});
		right: 0;
		content: '';
		border-style: solid;
		border-width: $tipHeight 0 $tipHeight $tipWidth;
		border-color: transparent transparent transparent $tipColor;
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-property, transform);
	}

	&:hover,
	&:focus,
	&:active {
		@include prefixed(transform, translateX(-($tipWidth)));

		&:before {
			@include prefixed(transform, translateX($tipWidth));
		}
	}
}


code:
/* Bubble Float Top */
@mixin bubble-float-top {
	@include hacks();
	position: relative;
	@include prefixed(transition-duration, $mediumDuration);
	@include prefixed(transition-property, transform);

	&:before {
		position: absolute;
		z-index: -1;
		content: '';
		left: calc(50% - #{$tipWidth});
		top: 0;
		border-style: solid;
		border-width: 0 $tipWidth $tipHeight $tipWidth;
		border-color: transparent transparent $tipColor transparent;
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-property, transform);
	}

	&:hover,
	&:focus,
	&:active {
		@include prefixed(transform, translateY($tipHeight));

		&:before {
			@include prefixed(transform, translateY(-($tipHeight)));
		}
	}
}


code:
/* Bubble Left */
@mixin bubble-left {
	@include hacks();
	position: relative;

	&:before {
		pointer-events: none;
		position: absolute;
		z-index: -1;
		content: '';
		border-style: solid;
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-property, transform);
		top: calc(50% - #{$tipHeight});
		left: 0;
		border-width: $tipHeight $tipWidth $tipHeight 0;
		border-color: transparent $tipColor transparent transparent;
	}

	&:hover:before,
	&:focus:before,
	&:active:before {
		@include prefixed(transform, translateX(-($tipWidth)));
	}
}


code:
/* Bubble Right */
@mixin bubble-right {
	@include hacks();
	position: relative;

	&:before {
		pointer-events: none;
		position: absolute;
		z-index: -1;
		content: '';
		border-style: solid;
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-property, transform);
		top: calc(50% - #{$tipHeight});
		right: 0;
		border-width: $tipHeight 0 $tipHeight $tipWidth;
		border-color: transparent transparent transparent $tipColor;
	}

	&:hover:before,
	&:focus:before,
	&:active:before {
		@include prefixed(transform, translateX($tipWidth));
	}
}


code:
/* Bubble Top */
@mixin bubble-top {
	@include hacks();
	position: relative;

	&:before {
		pointer-events: none;
		position: absolute;
		z-index: -1;
		content: '';
		border-style: solid;
		@include prefixed(transition-duration, $mediumDuration);
		@include prefixed(transition-property, transform);
		left: calc(50% - #{$tipWidth});
		top: 0;
		border-width: 0 $tipWidth $tipHeight $tipWidth;
		border-color: transparent transparent $tipColor transparent;
	}

	&:hover:before,
	&:focus:before,
	&:active:before {
		@include prefixed(transform, translateY(-($tipHeight)));
	}
}


code:
/*!
 * Hover.css (http://ianlunn.github.io/Hover/)
 * Version: 2.3.2
 * Author: Ian Lunn @IanLunn
 * Author URL: http://ianlunn.co.uk/
 * Github: https://github.com/IanLunn/Hover

 * Hover.css Copyright Ian Lunn 2017. Generated with Sass.
 */

@import "options";
@import "mixins";
@import "hacks";

/* 2D TRANSITIONS */
@import "effects/2d-transitions/grow";
@if $includeClasses {
	.#{$nameSpace}-grow {
		@include grow();
	}
}

@import "effects/2d-transitions/shrink";
@if $includeClasses {
	.#{$nameSpace}-shrink {
		@include shrink();
	}
}

@import "effects/2d-transitions/pulse";
@if $includeClasses {
	.#{$nameSpace}-pulse {
		@include pulse();
	}
}

@import "effects/2d-transitions/pulse-grow";
@if $includeClasses {
	.#{$nameSpace}-pulse-grow {
		@include pulse-grow();
	}
}

@import "effects/2d-transitions/pulse-shrink";
@if $includeClasses {
	.#{$nameSpace}-pulse-shrink {
		@include pulse-shrink();
	}
}

@import "effects/2d-transitions/push";
@if $includeClasses {
	.#{$nameSpace}-push {
		@include push();
	}
}

@import "effects/2d-transitions/pop";
@if $includeClasses {
	.#{$nameSpace}-pop {
		@include pop();
	}
}

@import "effects/2d-transitions/bounce-in";
@if $includeClasses {
	.#{$nameSpace}-bounce-in {
		@include bounce-in();
	}
}

@import "effects/2d-transitions/bounce-out";
@if $includeClasses {
	.#{$nameSpace}-bounce-out {
		@include bounce-out();
	}
}

@import "effects/2d-transitions/rotate";
@if $includeClasses {
	.#{$nameSpace}-rotate {
		@include rotate();
	}
}

@import "effects/2d-transitions/grow-rotate";
@if $includeClasses {
	.#{$nameSpace}-grow-rotate {
		@include grow-rotate();
	}
}

@import "effects/2d-transitions/float";
@if $includeClasses {
	.#{$nameSpace}-float {
		@include float();
	}
}

@import "effects/2d-transitions/sink";
@if $includeClasses {
	.#{$nameSpace}-sink {
		@include sink();
	}
}

@import "effects/2d-transitions/bob";
@if $includeClasses {
	.#{$nameSpace}-bob {
		@include bob();
	}
}

@import "effects/2d-transitions/hang";
@if $includeClasses {
	.#{$nameSpace}-hang {
		@include hang();
	}
}

@import "effects/2d-transitions/skew";
@if $includeClasses {
	.#{$nameSpace}-skew {
		@include skew();
	}
}

@import "effects/2d-transitions/skew-forward";
@if $includeClasses {
	.#{$nameSpace}-skew-forward {
		@include skew-forward();
	}
}

@import "effects/2d-transitions/skew-backward";
@if $includeClasses {
	.#{$nameSpace}-skew-backward {
	    @include skew-backward();
	}
}

@import "effects/2d-transitions/wobble-vertical";
@if $includeClasses {
	.#{$nameSpace}-wobble-vertical {
		@include wobble-vertical();
	}
}

@import "effects/2d-transitions/wobble-horizontal";
@if $includeClasses {
	.#{$nameSpace}-wobble-horizontal {
		@include wobble-horizontal();
	}
}

@import "effects/2d-transitions/wobble-to-bottom-right";
@if $includeClasses {
	.#{$nameSpace}-wobble-to-bottom-right {
	    @include wobble-to-bottom-right();
	}
}

@import "effects/2d-transitions/wobble-to-top-right";
@if $includeClasses {
	.#{$nameSpace}-wobble-to-top-right {
	    @include wobble-to-top-right();
	}
}

@import "effects/2d-transitions/wobble-top";
@if $includeClasses {
	.#{$nameSpace}-wobble-top {
		@include wobble-top();
	}
}

@import "effects/2d-transitions/wobble-bottom";
@if $includeClasses {
	.#{$nameSpace}-wobble-bottom {
		@include wobble-bottom();
	}
}

@import "effects/2d-transitions/wobble-skew";
@if $includeClasses {
	.#{$nameSpace}-wobble-skew {
	    @include wobble-skew();
	}
}

@import "effects/2d-transitions/buzz";
@if $includeClasses {
	.#{$nameSpace}-buzz {
	    @include buzz();
	}
}

@import "effects/2d-transitions/buzz-out";
@if $includeClasses {
	.#{$nameSpace}-buzz-out {
	    @include buzz-out();
	}
}

@import "effects/2d-transitions/forward";
@if $includeClasses {
	.#{$nameSpace}-forward {
		@include forward();
	}
}

@import "effects/2d-transitions/backward";
@if $includeClasses {
	.#{$nameSpace}-backward {
		@include backward();
	}
}

/* BACKGROUND TRANSITIONS */
@import "effects/background-transitions/fade";
@if $includeClasses {
	.#{$nameSpace}-fade {
		@include fade();
	}
}

@import "effects/background-transitions/back-pulse";
@if $includeClasses {
	.#{$nameSpace}-back-pulse {
		@include back-pulse();
	}
}

@import "effects/background-transitions/sweep-to-right";
@if $includeClasses {
	.#{$nameSpace}-sweep-to-right {
		@include sweep-to-right();
	}
}

@import "effects/background-transitions/sweep-to-left";
@if $includeClasses {
	.#{$nameSpace}-sweep-to-left {
		@include sweep-to-left();
	}
}

@import "effects/background-transitions/sweep-to-bottom";
@if $includeClasses {
	.#{$nameSpace}-sweep-to-bottom {
		@include sweep-to-bottom();
	}
}

@import "effects/background-transitions/sweep-to-top";
@if $includeClasses {
	.#{$nameSpace}-sweep-to-top {
		@include sweep-to-top();
	}
}

@import "effects/background-transitions/bounce-to-right";
@if $includeClasses {
	.#{$nameSpace}-bounce-to-right {
		@include bounce-to-right();
	}
}

@import "effects/background-transitions/bounce-to-left";
@if $includeClasses {
	.#{$nameSpace}-bounce-to-left {
		@include bounce-to-left();
	}
}

@import "effects/background-transitions/bounce-to-bottom";
@if $includeClasses {
	.#{$nameSpace}-bounce-to-bottom {
		@include bounce-to-bottom();
	}
}

@import "effects/background-transitions/bounce-to-top";
@if $includeClasses {
	.#{$nameSpace}-bounce-to-top {
		@include bounce-to-top();
	}
}

@import "effects/background-transitions/radial-out";
@if $includeClasses {
	.#{$nameSpace}-radial-out {
		@include radial-out();
	}
}

@import "effects/background-transitions/radial-in";
@if $includeClasses {
	.#{$nameSpace}-radial-in {
		@include radial-in();
	}
}

@import "effects/background-transitions/rectangle-in";
@if $includeClasses {
	.#{$nameSpace}-rectangle-in {
		@include rectangle-in();
	}
}

@import "effects/background-transitions/rectangle-out";
@if $includeClasses {
	.#{$nameSpace}-rectangle-out {
		@include rectangle-out();
	}
}

@import "effects/background-transitions/shutter-in-horizontal";
@if $includeClasses {
	.#{$nameSpace}-shutter-in-horizontal {
		@include shutter-in-horizontal();
	}
}

@import "effects/background-transitions/shutter-out-horizontal";
@if $includeClasses {
	.#{$nameSpace}-shutter-out-horizontal {
		@include shutter-out-horizontal();
	}
}

@import "effects/background-transitions/shutter-in-vertical";
@if $includeClasses {
	.#{$nameSpace}-shutter-in-vertical {
		@include shutter-in-vertical();
	}
}

@import "effects/background-transitions/shutter-out-vertical";
@if $includeClasses {
	.#{$nameSpace}-shutter-out-vertical {
		@include shutter-out-vertical();
	}
}

/* BORDER TRANSITIONS */
@import "effects/border-transitions/border-fade";
@if $includeClasses {
	.#{$nameSpace}-border-fade {
		@include border-fade();
	}
}

@import "effects/border-transitions/hollow";
@if $includeClasses {
	.#{$nameSpace}-hollow {
		@include hollow();
	}
}

@import "effects/border-transitions/trim";
@if $includeClasses {
	.#{$nameSpace}-trim {
		@include trim();
	}
}

@import "effects/border-transitions/ripple-out";
@if $includeClasses {
	.#{$nameSpace}-ripple-out {
		@include ripple-out();
	}
}

@import "effects/border-transitions/ripple-in";
@if $includeClasses {
	.#{$nameSpace}-ripple-in {
		@include ripple-in();
	}
}

@import "effects/border-transitions/outline-out";
@if $includeClasses {
	.#{$nameSpace}-outline-out {
		@include outline-out();
	}
}

@import "effects/border-transitions/outline-in";
@if $includeClasses {
	.#{$nameSpace}-outline-in {
		@include outline-in();
	}
}

@import "effects/border-transitions/round-corners";
@if $includeClasses {
	.#{$nameSpace}-round-corners {
		@include round-corners();
	}
}

@import "effects/border-transitions/underline-from-left";
@if $includeClasses {
	.#{$nameSpace}-underline-from-left {
		@include underline-from-left();
	}
}

@import "effects/border-transitions/underline-from-center";
@if $includeClasses {
	.#{$nameSpace}-underline-from-center {
		@include underline-from-center();
	}
}

@import "effects/border-transitions/underline-from-right";
@if $includeClasses {
	.#{$nameSpace}-underline-from-right {
		@include underline-from-right();
	}
}

@import "effects/border-transitions/overline-from-left";
@if $includeClasses {
	.#{$nameSpace}-overline-from-left {
		@include overline-from-left();
	}
}

@import "effects/border-transitions/overline-from-center";
@if $includeClasses {
	.#{$nameSpace}-overline-from-center {
		@include overline-from-center();
	}
}

@import "effects/border-transitions/overline-from-right";
@if $includeClasses {
	.#{$nameSpace}-overline-from-right {
		@include overline-from-right();
	}
}

@import "effects/border-transitions/reveal";
@if $includeClasses {
	.#{$nameSpace}-reveal {
		@include reveal();
	}
}

@import "effects/border-transitions/underline-reveal";
@if $includeClasses {
	.#{$nameSpace}-underline-reveal {
		@include underline-reveal();
	}
}

@import "effects/border-transitions/overline-reveal";
@if $includeClasses {
	.#{$nameSpace}-overline-reveal {
		@include overline-reveal();
	}
}

/* SHADOW/GLOW TRANSITIONS */
@import "effects/shadow-and-glow-transitions/glow";
@if $includeClasses {
	.#{$nameSpace}-glow {
		@include glow();
	}
}

@import "effects/shadow-and-glow-transitions/shadow";
@if $includeClasses {
	.#{$nameSpace}-shadow {
		@include shadow();
	}
}

@import "effects/shadow-and-glow-transitions/grow-shadow";
@if $includeClasses {
	.#{$nameSpace}-grow-shadow {
		@include grow-shadow();
	}
}

@import "effects/shadow-and-glow-transitions/box-shadow-outset";
@if $includeClasses {
	.#{$nameSpace}-box-shadow-outset {
		@include box-shadow-outset();
	}
}

@import "effects/shadow-and-glow-transitions/box-shadow-inset";
@if $includeClasses {
	.#{$nameSpace}-box-shadow-inset {
		@include box-shadow-inset();
	}
}

@import "effects/shadow-and-glow-transitions/float-shadow";
@if $includeClasses {
	.#{$nameSpace}-float-shadow {
		@include float-shadow();
	}
}

@import "effects/shadow-and-glow-transitions/shadow-radial";
@if $includeClasses {
	.#{$nameSpace}-shadow-radial {
		@include shadow-radial();
	}
}

/* SPEECH BUBBLES */
@import "effects/speech-bubbles/bubble-top";
@if $includeClasses {
	.#{$nameSpace}-bubble-top {
		@include bubble-top();
	}
}

@import "effects/speech-bubbles/bubble-right";
@if $includeClasses {
	.#{$nameSpace}-bubble-right {
		@include bubble-right();
	}
}

@import "effects/speech-bubbles/bubble-bottom";
@if $includeClasses {
	.#{$nameSpace}-bubble-bottom {
		@include bubble-bottom();
	}
}

@import "effects/speech-bubbles/bubble-left";
@if $includeClasses {
	.#{$nameSpace}-bubble-left {
		@include bubble-left();
	}
}

@import "effects/speech-bubbles/bubble-float-top";
@if $includeClasses {
	.#{$nameSpace}-bubble-float-top {
		@include bubble-float-top();
	}
}

@import "effects/speech-bubbles/bubble-float-right";
@if $includeClasses {
	.#{$nameSpace}-bubble-float-right {
		@include bubble-float-right();
	}
}

@import "effects/speech-bubbles/bubble-float-bottom";
@if $includeClasses {
	.#{$nameSpace}-bubble-float-bottom {
		@include bubble-float-bottom();
	}
}

@import "effects/speech-bubbles/bubble-float-left";
@if $includeClasses {
	.#{$nameSpace}-bubble-float-left {
		@include bubble-float-left();
	}
}

/* ICONS */
@import "effects/icons/icon-back";
@if $includeClasses {
	.#{$nameSpace}-icon-back {
		@include icon-back();
	}
}

@import "effects/icons/icon-forward";
@if $includeClasses {
	.#{$nameSpace}-icon-forward {
		@include icon-forward();
	}
}

@import "effects/icons/icon-down";
@if $includeClasses {
	.#{$nameSpace}-icon-down {
		@include icon-down();
	}
}

@import "effects/icons/icon-up";
@if $includeClasses {
	.#{$nameSpace}-icon-up {
		@include icon-up();
	}
}

@import "effects/icons/icon-spin";
@if $includeClasses {
	.#{$nameSpace}-icon-spin {
		@include icon-spin();
	}
}

@import "effects/icons/icon-drop";
@if $includeClasses {
	.#{$nameSpace}-icon-drop {
		@include icon-drop();
	}
}

@import "effects/icons/icon-fade";
@if $includeClasses {
	.#{$nameSpace}-icon-fade {
		@include icon-fade();
	}
}

@import "effects/icons/icon-float-away";
@if $includeClasses {
	.#{$nameSpace}-icon-float-away {
		@include icon-float-away();
	}
}

@import "effects/icons/icon-sink-away";
@if $includeClasses {
	.#{$nameSpace}-icon-sink-away {
		@include icon-sink-away();
	}
}

@import "effects/icons/icon-grow";
@if $includeClasses {
	.#{$nameSpace}-icon-grow {
		@include icon-grow();
	}
}

@import "effects/icons/icon-shrink";
@if $includeClasses {
	.#{$nameSpace}-icon-shrink {
		@include icon-shrink();
	}
}

@import "effects/icons/icon-pulse";
@if $includeClasses {
	.#{$nameSpace}-icon-pulse {
		@include icon-pulse();
	}
}

@import "effects/icons/icon-pulse-grow";
@if $includeClasses {
	.#{$nameSpace}-icon-pulse-grow {
		@include icon-pulse-grow();
	}
}

@import "effects/icons/icon-pulse-shrink";
@if $includeClasses {
	.#{$nameSpace}-icon-pulse-shrink {
		@include icon-pulse-shrink();
	}
}

@import "effects/icons/icon-push";
@if $includeClasses {
	.#{$nameSpace}-icon-push {
		@include icon-push();
	}
}

@import "effects/icons/icon-pop";
@if $includeClasses {
	.#{$nameSpace}-icon-pop {
		@include icon-pop();
	}
}

@import "effects/icons/icon-bounce";
@if $includeClasses {
	.#{$nameSpace}-icon-bounce {
		@include icon-bounce();
	}
}

@import "effects/icons/icon-rotate";
@if $includeClasses {
	.#{$nameSpace}-icon-rotate {
		@include icon-rotate();
	}
}

@import "effects/icons/icon-grow-rotate";
@if $includeClasses {
	.#{$nameSpace}-icon-grow-rotate {
		@include icon-grow-rotate();
	}
}

@import "effects/icons/icon-float";
@if $includeClasses {
	.#{$nameSpace}-icon-float {
		@include icon-float();
	}
}

@import "effects/icons/icon-sink";
@if $includeClasses {
	.#{$nameSpace}-icon-sink {
		@include icon-sink();
	}
}

@import "effects/icons/icon-bob";
@if $includeClasses {
	.#{$nameSpace}-icon-bob {
		@include icon-bob();
	}
}

@import "effects/icons/icon-hang";
@if $includeClasses {
	.#{$nameSpace}-icon-hang {
		@include icon-hang();
	}
}

@import "effects/icons/icon-wobble-horizontal";
@if $includeClasses {
	.#{$nameSpace}-icon-wobble-horizontal {
		@include icon-wobble-horizontal();
	}
}

@import "effects/icons/icon-wobble-vertical";
@if $includeClasses {
	.#{$nameSpace}-icon-wobble-vertical {
		@include icon-wobble-vertical();
	}
}

@import "effects/icons/icon-buzz";
@if $includeClasses {
	.#{$nameSpace}-icon-buzz {
		@include icon-buzz();
	}
}

@import "effects/icons/icon-buzz-out";
@if $includeClasses {
	.#{$nameSpace}-icon-buzz-out {
		@include icon-buzz-out();
	}
}

/* CURLS */
@import "effects/curls/curl-top-left";
@if $includeClasses {
	.#{$nameSpace}-curl-top-left {
		@include curl-top-left();
	}
}

@import "effects/curls/curl-top-right";
@if $includeClasses {
	.#{$nameSpace}-curl-top-right {
		@include curl-top-right();
	}
}

@import "effects/curls/curl-bottom-right";
@if $includeClasses {
	.#{$nameSpace}-curl-bottom-right {
		@include curl-bottom-right();
	}
}

@import "effects/curls/curl-bottom-left";
@if $includeClasses {
	.#{$nameSpace}-curl-bottom-left {
		@include curl-bottom-left();
	}
}


code:
--- /dev/null
+++ .gitignore
@@ -0,0 +1,2 @@
+node_modules/
+npm-debug.log


code:
mkdirp
======

Like `mkdir -p`, but in node.js!

example
=======

pow.js
------
    var mkdirp = require('mkdirp');

    mkdirp('/tmp/foo/bar/baz', function (err) {
        if (err) console.error(err)
        else console.log('pow!')
    });

Output
    pow!

And now /tmp/foo/bar/baz exists, huzzah!

methods
=======

var mkdirp = require('mkdirp');

mkdirp(dir, mode, cb)
---------------------

Create a new directory and any necessary subdirectories at `dir` with octal
permission string `mode`.

If `mode` isn't specified, it defaults to `0777 & (~process.umask())`.

mkdirp.sync(dir, mode)
----------------------

Synchronously create a new directory and any necessary subdirectories at `dir`
with octal permission string `mode`.

If `mode` isn't specified, it defaults to `0777 & (~process.umask())`.

install
=======

With [npm](http://npmjs.org) do:

    npm install mkdirp

license
=======

MIT/X11


code:
var mkdirp = require('mkdirp');

mkdirp('/tmp/foo/bar/baz', function (err) {
    if (err) console.error(err)
    else console.log('pow!')
});


code:
var mkdirp = require('mkdirp');

mkdirp('/tmp/foo/bar/baz', 0755, function (err) {
    if (err) console.error(err)
    else console.log('pow!')
});


code:
--- examples/pow.js
+++ examples/pow.js
@@ -1,6 +1,15 @@
-var mkdirp = require('mkdirp').mkdirp;
+var mkdirp = require('../').mkdirp,
+    mkdirpSync = require('../').mkdirpSync;

 mkdirp('/tmp/foo/bar/baz', 0755, function (err) {
     if (err) console.error(err)
     else console.log('pow!')
 });
+
+try {
+  mkdirpSync('/tmp/bar/foo/baz', 0755);
+  console.log('double pow!');
+}
+catch (ex) {
+  console.log(ex);
+}


code:
var path = require('path');
var fs = require('fs');

module.exports = mkdirP.mkdirp = mkdirP.mkdirP = mkdirP;

function mkdirP (p, mode, f) {
    if (typeof mode === 'function' || mode === undefined) {
        f = mode;
        mode = 0777 & (~process.umask());
    }

    var cb = f || function () {};
    if (typeof mode === 'string') mode = parseInt(mode, 8);
    p = path.resolve(p);

    fs.mkdir(p, mode, function (er) {
        if (!er) return cb();
        switch (er.code) {
            case 'ENOENT':
                mkdirP(path.dirname(p), mode, function (er) {
                    if (er) cb(er);
                    else mkdirP(p, mode, cb);
                });
                break;

            case 'EEXIST':
                fs.stat(p, function (er2, stat) {
                    // if the stat fails, then that's super weird.
                    // let the original EEXIST be the failure reason.
                    if (er2 || !stat.isDirectory()) cb(er)
                    else cb();
                });
                break;

            default:
                cb(er);
                break;
        }
    });
}

mkdirP.sync = function sync (p, mode) {
    if (mode === undefined) {
        mode = 0777 & (~process.umask());
    }

    if (typeof mode === 'string') mode = parseInt(mode, 8);
    p = path.resolve(p);

    try {
        fs.mkdirSync(p, mode)
    }
    catch (err0) {
        switch (err0.code) {
            case 'ENOENT' :
                var err1 = sync(path.dirname(p), mode)
                if (err1) throw err1;
                else return sync(p, mode);
                break;

            case 'EEXIST' :
                var stat;
                try {
                    stat = fs.statSync(p);
                }
                catch (err1) {
                    throw err0
                }
                if (!stat.isDirectory()) throw err0;
                else return null;
                break;
            default :
                throw err0
                break;
        }
    }

    return null;
};


mkdirp

description: Recursively mkdir, like `mkdir -p`

author: James Halliday <mail@substack.net> (http://substack.net)

main: ./index

keywords: mkdir directory

type: git

test: tap test/*.js


code:
var mkdirp = require('../').mkdirp;
var path = require('path');
var fs = require('fs');
var test = require('tap').test;

var ps = [ '', 'tmp' ];

for (var i = 0; i < 25; i++) {
    var dir = Math.floor(Math.random() * Math.pow(16,4)).toString(16);
    ps.push(dir);
}

var file = ps.join('/');

test('chmod-pre', function (t) {
    var mode = 0744
    mkdirp(file, mode, function (er) {
        t.ifError(er, 'should not error');
        fs.stat(file, function (er, stat) {
            t.ifError(er, 'should exist');
            t.ok(stat && stat.isDirectory(), 'should be directory');
            t.equal(stat && stat.mode & 0777, mode, 'should be 0744');
            t.end();
        });
    });
});

test('chmod', function (t) {
    var mode = 0755
    mkdirp(file, mode, function (er) {
        t.ifError(er, 'should not error');
        fs.stat(file, function (er, stat) {
            t.ifError(er, 'should exist');
            t.ok(stat && stat.isDirectory(), 'should be directory');
            t.end();
        });
    });
});


code:
var mkdirp = require('../').mkdirp;
var path = require('path');
var fs = require('fs');
var test = require('tap').test;

var ps = [ '', 'tmp' ];

for (var i = 0; i < 25; i++) {
    var dir = Math.floor(Math.random() * Math.pow(16,4)).toString(16);
    ps.push(dir);
}

var file = ps.join('/');

// a file in the way
var itw = ps.slice(0, 3).join('/');

test('clobber-pre', function (t) {
    console.error("about to write to "+itw)
    fs.writeFileSync(itw, 'I AM IN THE WAY, THE TRUTH, AND THE LIGHT.');

    fs.stat(itw, function (er, stat) {
        t.ifError(er)
        t.ok(stat && stat.isFile(), 'should be file')
        t.end()
    })
})

test('clobber', function (t) {
    t.plan(2);
    mkdirp(file, 0755, function (err) {
        t.ok(err);
        t.equal(err.code, 'ENOTDIR');
        t.end();
    });
});


code:
var mkdirp = require('../');
var path = require('path');
var fs = require('fs');
var test = require('tap').test;

test('woo', function (t) {
    t.plan(2);
    var x = Math.floor(Math.random() * Math.pow(16,4)).toString(16);
    var y = Math.floor(Math.random() * Math.pow(16,4)).toString(16);
    var z = Math.floor(Math.random() * Math.pow(16,4)).toString(16);

    var file = '/tmp/' + [x,y,z].join('/');

    mkdirp(file, 0755, function (err) {
        if (err) t.fail(err);
        else path.exists(file, function (ex) {
            if (!ex) t.fail('file not created')
            else fs.stat(file, function (err, stat) {
                if (err) t.fail(err)
                else {
                    t.equal(stat.mode & 0777, 0755);
                    t.ok(stat.isDirectory(), 'target not a directory');
                    t.end();
                }
            })
        })
    });
});


code:
var mkdirp = require('../');
var path = require('path');
var fs = require('fs');
var test = require('tap').test;

test('async perm', function (t) {
    t.plan(2);
    var file = '/tmp/' + (Math.random() * (1<<30)).toString(16);

    mkdirp(file, 0755, function (err) {
        if (err) t.fail(err);
        else path.exists(file, function (ex) {
            if (!ex) t.fail('file not created')
            else fs.stat(file, function (err, stat) {
                if (err) t.fail(err)
                else {
                    t.equal(stat.mode & 0777, 0755);
                    t.ok(stat.isDirectory(), 'target not a directory');
                    t.end();
                }
            })
        })
    });
});

test('async root perm', function (t) {
    mkdirp('/tmp', 0755, function (err) {
        if (err) t.fail(err);
        t.end();
    });
    t.end();
});


code:
var mkdirp = require('../');
var path = require('path');
var fs = require('fs');
var test = require('tap').test;

test('sync perm', function (t) {
    t.plan(2);
    var file = '/tmp/' + (Math.random() * (1<<30)).toString(16) + '.json';

    mkdirp.sync(file, 0755);
    path.exists(file, function (ex) {
        if (!ex) t.fail('file not created')
        else fs.stat(file, function (err, stat) {
            if (err) t.fail(err)
            else {
                t.equal(stat.mode & 0777, 0755);
                t.ok(stat.isDirectory(), 'target not a directory');
                t.end();
            }
        })
    });
});

test('sync root perm', function (t) {
    t.plan(1);

    var file = '/tmp';
    mkdirp.sync(file, 0755);
    path.exists(file, function (ex) {
        if (!ex) t.fail('file not created')
        else fs.stat(file, function (err, stat) {
            if (err) t.fail(err)
            else {
                t.ok(stat.isDirectory(), 'target not a directory');
                t.end();
            }
        })
    });
});


code:
var mkdirp = require('../').mkdirp;
var path = require('path');
var fs = require('fs');
var test = require('tap').test;

test('race', function (t) {
    t.plan(4);
    var ps = [ '', 'tmp' ];

    for (var i = 0; i < 25; i++) {
        var dir = Math.floor(Math.random() * Math.pow(16,4)).toString(16);
        ps.push(dir);
    }
    var file = ps.join('/');

    var res = 2;
    mk(file, function () {
        if (--res === 0) t.end();
    });

    mk(file, function () {
        if (--res === 0) t.end();
    });

    function mk (file, cb) {
        mkdirp(file, 0755, function (err) {
            if (err) t.fail(err);
            else path.exists(file, function (ex) {
                if (!ex) t.fail('file not created')
                else fs.stat(file, function (err, stat) {
                    if (err) t.fail(err)
                    else {
                        t.equal(stat.mode & 0777, 0755);
                        t.ok(stat.isDirectory(), 'target not a directory');
                        if (cb) cb();
                    }
                })
            })
        });
    }
});


code:
var mkdirp = require('../');
var path = require('path');
var fs = require('fs');
var test = require('tap').test;

test('rel', function (t) {
    t.plan(2);
    var x = Math.floor(Math.random() * Math.pow(16,4)).toString(16);
    var y = Math.floor(Math.random() * Math.pow(16,4)).toString(16);
    var z = Math.floor(Math.random() * Math.pow(16,4)).toString(16);

    var cwd = process.cwd();
    process.chdir('/tmp');

    var file = [x,y,z].join('/');

    mkdirp(file, 0755, function (err) {
        if (err) t.fail(err);
        else path.exists(file, function (ex) {
            if (!ex) t.fail('file not created')
            else fs.stat(file, function (err, stat) {
                if (err) t.fail(err)
                else {
                    process.chdir(cwd);
                    t.equal(stat.mode & 0777, 0755);
                    t.ok(stat.isDirectory(), 'target not a directory');
                    t.end();
                }
            })
        })
    });
});


code:
var mkdirp = require('../');
var path = require('path');
var fs = require('fs');
var test = require('tap').test;

test('sync', function (t) {
    t.plan(2);
    var x = Math.floor(Math.random() * Math.pow(16,4)).toString(16);
    var y = Math.floor(Math.random() * Math.pow(16,4)).toString(16);
    var z = Math.floor(Math.random() * Math.pow(16,4)).toString(16);

    var file = '/tmp/' + [x,y,z].join('/');

    var err = mkdirp.sync(file, 0755);
    if (err) t.fail(err);
    else path.exists(file, function (ex) {
        if (!ex) t.fail('file not created')
        else fs.stat(file, function (err, stat) {
            if (err) t.fail(err)
            else {
                t.equal(stat.mode & 0777, 0755);
                t.ok(stat.isDirectory(), 'target not a directory');
                t.end();
            }
        })
    })
});


code:
var mkdirp = require('../');
var path = require('path');
var fs = require('fs');
var test = require('tap').test;

test('implicit mode from umask', function (t) {
    t.plan(2);
    var x = Math.floor(Math.random() * Math.pow(16,4)).toString(16);
    var y = Math.floor(Math.random() * Math.pow(16,4)).toString(16);
    var z = Math.floor(Math.random() * Math.pow(16,4)).toString(16);

    var file = '/tmp/' + [x,y,z].join('/');

    mkdirp(file, function (err) {
        if (err) t.fail(err);
        else path.exists(file, function (ex) {
            if (!ex) t.fail('file not created')
            else fs.stat(file, function (err, stat) {
                if (err) t.fail(err)
                else {
                    t.equal(stat.mode & 0777, 0777 & (~process.umask()));
                    t.ok(stat.isDirectory(), 'target not a directory');
                    t.end();
                }
            })
        })
    });
});


code:
var mkdirp = require('../');
var path = require('path');
var fs = require('fs');
var test = require('tap').test;

test('umask sync modes', function (t) {
    t.plan(2);
    var x = Math.floor(Math.random() * Math.pow(16,4)).toString(16);
    var y = Math.floor(Math.random() * Math.pow(16,4)).toString(16);
    var z = Math.floor(Math.random() * Math.pow(16,4)).toString(16);

    var file = '/tmp/' + [x,y,z].join('/');

    var err = mkdirp.sync(file);
    if (err) t.fail(err);
    else path.exists(file, function (ex) {
        if (!ex) t.fail('file not created')
        else fs.stat(file, function (err, stat) {
            if (err) t.fail(err)
            else {
                t.equal(stat.mode & 0777, (0777 & (~process.umask())));
                t.ok(stat.isDirectory(), 'target not a directory');
                t.end();
            }
        })
    })
});


code:
If you want to write an option parser, and have it be good, there are
two ways to do it.  The Right Way, and the Wrong Way.

The Wrong Way is to sit down and write an option parser.  We've all done
that.

The Right Way is to write some complex configurable program with so many
options that you go half-insane just trying to manage them all, and put
it off with duct-tape solutions until you see exactly to the core of the
problem, and finally snap and write an awesome option parser.

If you want to write an option parser, don't write an option parser.
Write a package manager, or a source control system, or a service
restarter, or an operating system.  You probably won't end up with a
good one of those, but if you don't give up, and you are relentless and
diligent enough in your procrastination, you may just end up with a very
nice option parser.

## USAGE

    // my-program.js
    var nopt = require("nopt")
      , Stream = require("stream").Stream
      , path = require("path")
      , knownOpts = { "foo" : [String, null]
                    , "bar" : [Stream, Number]
                    , "baz" : path
                    , "bloo" : [ "big", "medium", "small" ]
                    , "flag" : Boolean
                    , "pick" : Boolean
                    , "many" : [String, Array]
                    }
      , shortHands = { "foofoo" : ["--foo", "Mr. Foo"]
                     , "b7" : ["--bar", "7"]
                     , "m" : ["--bloo", "medium"]
                     , "p" : ["--pick"]
                     , "f" : ["--flag"]
                     }
                 // everything is optional.
                 // knownOpts and shorthands default to {}
                 // arg list defaults to process.argv
                 // slice defaults to 2
      , parsed = nopt(knownOpts, shortHands, process.argv, 2)
    console.log(parsed)

This would give you support for any of the following:

```bash
$ node my-program.js --foo "blerp" --no-flag
{ "foo" : "blerp", "flag" : false }

$ node my-program.js ---bar 7 --foo "Mr. Hand" --flag
{ bar: 7, foo: "Mr. Hand", flag: true }

$ node my-program.js --foo "blerp" -f -----p
{ foo: "blerp", flag: true, pick: true }

$ node my-program.js -fp --foofoo
{ foo: "Mr. Foo", flag: true, pick: true }

$ node my-program.js --foofoo -- -fp  # -- stops the flag parsing.
{ foo: "Mr. Foo", argv: { remain: ["-fp"] } }

$ node my-program.js --blatzk 1000 -fp # unknown opts are ok.
{ blatzk: 1000, flag: true, pick: true }

$ node my-program.js --blatzk true -fp # but they need a value
{ blatzk: true, flag: true, pick: true }

$ node my-program.js --no-blatzk -fp # unless they start with "no-"
{ blatzk: false, flag: true, pick: true }

$ node my-program.js --baz b/a/z # known paths are resolved.
{ baz: "/Users/isaacs/b/a/z" }

# if Array is one of the types, then it can take many
# values, and will always be an array.  The other types provided
# specify what types are allowed in the list.

$ node my-program.js --many 1 --many null --many foo
{ many: ["1", "null", "foo"] }

$ node my-program.js --many foo
{ many: ["foo"] }
```

Read the tests at the bottom of `lib/nopt.js` for more examples of
what this puppy can do.

## Types

The following types are supported, and defined on `nopt.typeDefs`

* String: A normal string.  No parsing is done.
* path: A file system path.  Gets resolved against cwd if not absolute.
* url: A url.  If it doesn't parse, it isn't accepted.
* Number: Must be numeric.
* Date: Must parse as a date. If it does, and `Date` is one of the options,
  then it will return a Date object, not a string.
* Boolean: Must be either `true` or `false`.  If an option is a boolean,
  then it does not need a value, and its presence will imply `true` as
  the value.  To negate boolean flags, do `--no-whatever` or `--whatever
  false`
* NaN: Means that the option is strictly not allowed.  Any value will
  fail.
* Stream: An object matching the "Stream" class in node.  Valuable
  for use when validating programmatically.  (npm uses this to let you
  supply any WriteStream on the `outfd` and `logfd` config options.)
* Array: If `Array` is specified as one of the types, then the value
  will be parsed as a list of options.  This means that multiple values
  can be specified, and that the value will always be an array.

If a type is an array of values not on this list, then those are
considered valid values.  For instance, in the example above, the
`--bloo` option can only be one of `"big"`, `"medium"`, or `"small"`,
and any other value will be rejected.

When parsing unknown fields, `"true"`, `"false"`, and `"null"` will be
interpreted as their JavaScript equivalents, and numeric values will be
interpreted as a number.

You can also mix types and values, or multiple types, in a list.  For
instance `{ blah: [Number, null] }` would allow a value to be set to
either a Number or null.

To define a new type, add it to `nopt.typeDefs`.  Each item in that
hash is an object with a `type` member and a `validate` method.  The
`type` member is an object that matches what goes in the type list.  The
`validate` method is a function that gets called with `validate(data,
key, val)`.  Validate methods should assign `data[key]` to the valid
value of `val` if it can be handled properly, or return boolean
`false` if it cannot.

You can also call `nopt.clean(data, types, typeDefs)` to clean up a
config object and remove its invalid properties.

## Error Handling

By default, nopt outputs a warning to standard error when invalid
options are found.  You can change this behavior by assigning a method
to `nopt.invalidHandler`.  This method will be called with
the offending `nopt.invalidHandler(key, val, types)`.

If no `nopt.invalidHandler` is assigned, then it will console.error
its whining.  If it is assigned to boolean `false` then the warning is
suppressed.

## Abbreviations

Yes, they are supported.  If you define options like this:

```javascript
{ "foolhardyelephants" : Boolean
, "pileofmonkeys" : Boolean }
```

Then this will work:

```bash
node program.js --foolhar --pil
node program.js --no-f --pileofmon
# etc.
```

## Shorthands

Shorthands are a hash of shorter option names to a snippet of args that
they expand to.

If multiple one-character shorthands are all combined, and the
combination does not unambiguously match any other option or shorthand,
then they will be broken up into their constituent parts.  For example:

```json
{ "s" : ["--loglevel", "silent"]
, "g" : "--global"
, "f" : "--force"
, "p" : "--parseable"
, "l" : "--long"
}
```

```bash
npm ls -sgflp
# just like doing this:
npm ls --loglevel silent --global --force --long --parseable
```

## The Rest of the args

The config object returned by nopt is given a special member called
`argv`, which is an object with the following fields:

* `remain`: The remaining args after all the parsing has occurred.
* `original`: The args as they originally appeared.
* `cooked`: The args after flags and shorthands are expanded.

## Slicing

Node programs are called with more or less the exact argv as it appears
in C land, after the v8 and node-specific options have been plucked off.
As such, `argv[0]` is always `node` and `argv[1]` is always the
JavaScript program being run.

That's usually not very useful to you.  So they're sliced off by
default.  If you want them, then you can pass in `0` as the last
argument, or any other number that you'd like to slice off the start of
the list.


code:
#!/usr/bin/env node
var nopt = require("../lib/nopt")
  , types = { num: Number
            , bool: Boolean
            , help: Boolean
            , list: Array
            , "num-list": [Number, Array]
            , "str-list": [String, Array]
            , "bool-list": [Boolean, Array]
            , str: String }
  , shorthands = { s: [ "--str", "astring" ]
                 , b: [ "--bool" ]
                 , nb: [ "--no-bool" ]
                 , tft: [ "--bool-list", "--no-bool-list", "--bool-list", "true" ]
                 , "?": ["--help"]
                 , h: ["--help"]
                 , H: ["--help"]
                 , n: [ "--num", "125" ] }
  , parsed = nopt( types
                 , shorthands
                 , process.argv
                 , 2 )

console.log("parsed", parsed)

if (parsed.help) {
  console.log("")
  console.log("nopt cli tester")
  console.log("")
  console.log("types")
  console.log(Object.keys(types).map(function M (t) {
    var type = types[t]
    if (Array.isArray(type)) {
      return [t, type.map(function (type) { return type.name })]
    }
    return [t, type && type.name]
  }).reduce(function (s, i) {
    s[i[0]] = i[1]
    return s
  }, {}))
  console.log("")
  console.log("shorthands")
  console.log(shorthands)
}


code:
#!/usr/bin/env node

//process.env.DEBUG_NOPT = 1

// my-program.js
var nopt = require("../lib/nopt")
  , Stream = require("stream").Stream
  , path = require("path")
  , knownOpts = { "foo" : [String, null]
                , "bar" : [Stream, Number]
                , "baz" : path
                , "bloo" : [ "big", "medium", "small" ]
                , "flag" : Boolean
                , "pick" : Boolean
                }
  , shortHands = { "foofoo" : ["--foo", "Mr. Foo"]
                 , "b7" : ["--bar", "7"]
                 , "m" : ["--bloo", "medium"]
                 , "p" : ["--pick"]
                 , "f" : ["--flag", "true"]
                 , "g" : ["--flag"]
                 , "s" : "--flag"
                 }
             // everything is optional.
             // knownOpts and shorthands default to {}
             // arg list defaults to process.argv
             // slice defaults to 2
  , parsed = nopt(knownOpts, shortHands, process.argv, 2)

console.log("parsed =\n"+ require("util").inspect(parsed))


nopt

description: Option parsing for Node, supporting types, shorthands, etc. Used by npm.

author: Isaac Z. Schlueter <i@izs.me> (http://blog.izs.me/)

test: node lib/nopt.js

type: MIT


code:
# Change Log
All changes will be listed here (since version v.1.4.0)
Project uses [Semantic Versioning](http://semver.org/).

## [Unreleased]
### Added
- Animations for disappearing elements (fade-out + slide away).

## [1.4.0] - 2016-04-5
### Added
- CHANGELOG.md file.
- Animations for appearing elements (fade-in + slide in).

### Changed
  - Demo page has now three sections to better present animations.


code:
# Repaintless.css - making animations fast

Repaintless.css in a lightweight animation library that consists only of animations that don't cause reflows and repaints of a website when used correctly. The idea for a library came after seeing the talk by [Paul Lewis](https://twitter.com/aerotwist) on animations and FLIP technique. Basic idea is to remove transition from element, not to apply it while animating. It saves user a tiny lag before animation starts and feels super smooth. To understand the concept better you can read [a blog post on that](https://aerotwist.com/blog/flip-your-animations/) or at least this quote from the post:

> The reason you can afford to do this relatively expensive precalculation is because there is a window of 100ms after someone interacts with your site where you’re able to do work without them noticing. If you’re inside that window users will feel like the site responded instantly! It’s only when things are moving that you need to maintain 60fps.

## Demo

[There is a demo page for the library.](http://szynszyliszys.github.io/repaintless/)

## Download

Download repaintless.css file from repaintless-css directory and include in website's head section:

```html
<head>
  <link href="path-to-css-directory/repaintless.css" rel="stylesheet"></link>
</head>
```

You can also get it by npm:

```sh
$ npm install repaintless
```

Or by Bower:

```sh
$ bower install repaintless
```

## How to use

All you need to do is add class "element-animated" and the second class with chosen animation name, eg.:

```html
<div class="element-animated tremble"> I tremble! </div>
```

Default timing of an animation is one second. You can have an animation that has 0.5s by adding class "short" or 2s animation by adding class "long". Also, you can make it infinite by adding "infinite" class. See how these work:

```html
<div class="element-animated slide-from-top short"> I am quick! </div>

<div class="element-animated slide-from-top long"> I am slooow... </div>

<div class="element-animated slide-from-top infinite"> I will do that forever to drive you crazy! </div>
```

## Customization

For now there is no gulp task for that. To get few out of all animations you need to edit [repaintless.scss](https://github.com/szynszyliszys/repaintless/blob/master/app/scss/repaintless.scss) file and leave there @import declarations for wanted animations only. After that use gulp build task to create css file.

You can also easily change the offset value for animated elements. Each animation has its own scss  variable in the same file, right at the top. Names always follow the key $animation-name-offset: value;

## List of animations

All possible animations are listed here. Some of them are looped by default and it is always mentioned next to the name. Hopefully the list of animations will get longer and longer.

- slide-from-top
- slide-from-bottom
- slide-from-left
- slide-from-right
- slide-from-right-bottom
- slide-from-right-top
- slide-from-left-bottom
- slide-from-left-top
- slide-top-bottom (looped)
- slide-left-right (looped)
- tremble (looped)
- fade-in
- fade-out
- pulsate (looped)
- rotate
- rotate-slide-from-right
- rotate-slide-from-left
- rotate-slide-from-top
- rotate-slide-from-bottom

## License

The library is licensed under [The MIT License (MIT)](http://choosealicense.com/licenses/mit/).

Go to [Lunar Logic website](http://www.lunarlogic.io/) to learn more [about us](http://www.lunarlogic.io/company) and [our work](http://www.lunarlogic.io/portfolio).


repaintless

description: Repaintless is a library of CSS animations, which don't cause costly repaints and recalculations in our browser. Animations are smooth and simple.

keywords: css sass scss animations performance FLIP

license: MIT


code:
var gulp = require('gulp');
var del = require('del');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var cssnano = require('gulp-cssnano');
var runSequence = require('run-sequence');

gulp.task('sass-demo', function() {
  return gulp.src('demo/scss/styles.scss')
  .pipe(sass({outputStyle: 'expanded'}))
  .pipe(autoprefixer('last 2 versions'))
  .pipe(gulp.dest('demo/css'));
});

gulp.task('sass-build', function() {
  return gulp.src('repaintless-scss/repaintless.scss')
  .pipe(sass({outputStyle: 'expanded'}))
  .pipe(autoprefixer('last 2 versions'))
  .pipe(gulp.dest('repaintless-css'))
  .pipe(gulp.dest('demo/css'))
  .pipe(cssnano())
  .pipe(rename("repaintless.min.css"))
  .pipe(gulp.dest('repaintless-css'));
});

gulp.task('clean:repaintless-css', function() {
  return del.sync('repaintless-css');
});

gulp.task('watch-animations', function() {
  gulp.watch('repaintless-scss/**/*.scss', ['sass-build']);
});

gulp.task('default', function(callback) {
  runSequence(['sass-build', 'watch-animations'],
    callback
  );
});

gulp.task('build', function(callback) {
  runSequence('clean:repaintless-css', 'sass-build', callback);
});

gulp.task('watch-demo', function() {
  gulp.watch('demo/scss/**/*.scss', ['sass-demo']);
});

gulp.task('demo', ['watch-animations'], function(callback) {
  runSequence(['sass-demo', 'watch-demo'],
    callback
  );
});


author: Anna Migas <amjmigas@gmail.com>