From 2b170512e2d91c93eecd88f8016e25e58ae62d82 Mon Sep 17 00:00:00 2001
From: watermelonpizza <watermelonpizza@outlook.com>
Date: Mon, 16 Mar 2015 23:13:49 +1100
Subject: [PATCH] Added Hover Icon: icon-fade-away, transitions scale: 1x-2x

---
 css/hover.css                           | 59 +++++++++++++++++++++++++
 index.html                              |  1 +
 less/effects/icons/_icon-fade-away.less | 44 ++++++++++++++++++
 less/hover.less                         |  7 +++
 scss/effects/icons/_icon-fade-away.scss | 44 ++++++++++++++++++
 scss/hover.scss                         |  7 +++
 6 files changed, 162 insertions(+)
 create mode 100644 less/effects/icons/_icon-fade-away.less
 create mode 100644 scss/effects/icons/_icon-fade-away.scss

diff --git a/css/hover.css b/css/hover.css
index 8d0a16d..a50081f 100644
--- a/css/hover.css
+++ b/css/hover.css
@@ -3526,6 +3526,65 @@
   color: #0F9E5E;
 }
 
+/* Icon Fade Away */
+@-webkit-keyframes hvr-icon-fade-away {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(2);
+    transform: scale(2);
+  }
+}
+
+@keyframes hvr-icon-fade-away {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(2);
+    transform: scale(2);
+  }
+}
+
+/* Icon Fade Away */
+.hvr-icon-fade-away {
+  display: inline-block;
+  vertical-align: middle;
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -moz-osx-font-smoothing: grayscale;
+  position: relative;
+  padding-right: 2.2em;
+}
+.hvr-icon-fade-away:before, .hvr-icon-fade-away:after {
+  content: "\f00c";
+  position: absolute;
+  right: 1em;
+  padding: 0 1px;
+  font-family: FontAwesome;
+}
+.hvr-icon-fade-away:after {
+  opacity: 0;
+  -webkit-animation-duration: 0.5s;
+  animation-duration: 0.5s;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+}
+.hvr-icon-fade-away:hover:after, .hvr-icon-fade-away:focus:after, .hvr-icon-fade-away:active:after {
+  -webkit-animation-name: hvr-icon-fade-away;
+  animation-name: hvr-icon-fade-away;
+  -webkit-animation-timing-function: ease-out;
+  animation-timing-function: ease-out;
+}
+
 /* Icon Float Away */
 @-webkit-keyframes hvr-icon-float-away {
   0% {
diff --git a/index.html b/index.html
index 20e0e37..36bfe28 100644
--- a/index.html
+++ b/index.html
@@ -107,6 +107,7 @@ <h2>Icons</h2>
 			<a href="#" class="hvr-icon-spin">Icon Spin</a>
 			<a href="#" class="hvr-icon-drop">Icon Drop</a>
 			<a href="#" class="hvr-icon-fade">Icon Fade</a>
+			<a href="#" class="hvr-icon-fade-away">Icon Fade Away</a>
 			<a href="#" class="hvr-icon-float-away">Icon Float Away</a>
 			<a href="#" class="hvr-icon-sink-away">Icon Sink Away</a>
 			<a href="#" class="hvr-icon-grow">Icon Grow</a>
diff --git a/less/effects/icons/_icon-fade-away.less b/less/effects/icons/_icon-fade-away.less
new file mode 100644
index 0000000..55a11a1
--- /dev/null
+++ b/less/effects/icons/_icon-fade-away.less
@@ -0,0 +1,44 @@
+/* Icon Fade Away */
+.keyframes(~"@{nameSpace}-icon-fade-away", {
+	0% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0;
+		.prefixed(transform, scale(2));
+	}
+});
+
+/* Icon Fade Away */
+.icon-fade-away() {
+	.hacks();
+	position: relative;
+	padding-right: @spaceBetweenTextAndArrows;
+
+	&:before,
+	&:after {
+		content: "\f00c";
+		position: absolute;
+		right: 1em;
+		padding: 0 1px;
+		font-family: FontAwesome;
+		.prefixed(transform, scale(1));
+	}
+
+	&:after {
+		opacity: 0;
+		.prefixed(animation-duration, @slowDuration);
+		.prefixed(animation-fill-mode, forwards);
+	}
+
+	&:hover,
+	&:focus,
+	&:active {
+
+		&:after {
+			.prefixed(animation-name, ~"@{nameSpace}-icon-fade-away");
+			.prefixed(animation-timing-function, ease-out);
+		}
+	}
+}
diff --git a/less/hover.less b/less/hover.less
index 7f8471b..87f6986 100644
--- a/less/hover.less
+++ b/less/hover.less
@@ -613,6 +613,13 @@
 	}
 }
 
+@import "effects/icons/_icon-fade-away";
+& when(@includeClasses = true) {
+	.@{nameSpace}-icon-fade-away {
+		.icon-fade-away();
+	}
+}
+
 @import "effects/icons/_icon-float-away";
 & when(@includeClasses = true) {
 	.@{nameSpace}-icon-float-away {
diff --git a/scss/effects/icons/_icon-fade-away.scss b/scss/effects/icons/_icon-fade-away.scss
new file mode 100644
index 0000000..4b10583
--- /dev/null
+++ b/scss/effects/icons/_icon-fade-away.scss
@@ -0,0 +1,44 @@
+/* Icon Fade Away */
+@include keyframes(#{$nameSpace}-icon-fade-away) {
+	0% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0;
+		@include prefixed(transform, scale(2));
+	}
+}
+
+/* Icon Fade Away */
+@mixin icon-fade-away {
+	@include hacks();
+	position: relative;
+	padding-right: #{$spaceBetweenTextAndArrows};
+
+	&:before,
+	&:after {
+		content: "\f00c";
+		position: absolute;
+		right: 1em;
+		padding: 0 1px;
+		font-family: FontAwesome;
+		@include prefixed(transform, scale(1));
+	}
+
+	&:after {
+		opacity: 0;
+		@include prefixed(animation-duration, #{$slowDuration});
+		@include prefixed(animation-fill-mode, forwards);
+	}
+
+	&:hover,
+	&:focus,
+	&:active {
+
+		&:after {
+			@include prefixed(animation-name, #{$nameSpace}-icon-fade-away);
+			@include prefixed(animation-timing-function, ease-out);
+		}
+	}
+}
diff --git a/scss/hover.scss b/scss/hover.scss
index ba971fb..21788b8 100644
--- a/scss/hover.scss
+++ b/scss/hover.scss
@@ -612,6 +612,13 @@
 	}
 }
 
+@import "effects/icons/icon-fade-away";
+@if $includeClasses {
+	.#{$nameSpace}-icon-fade-away {
+		@include icon-fade-away();
+	}
+}
+
 @import "effects/icons/icon-float-away";
 @if $includeClasses {
 	.#{$nameSpace}-icon-float-away {