Added back-pulse effect

HISTORY.md

@@ -1,4 +1,13 @@
-## 2.0.0 - Jan 7, 2014
+## 2.0.2 - Jan 27, 2015
+
+- Added `back-pulse` effect
+
+## 2.0.1 - Jan 26, 2015
+
+- Added `includeClasses` option to Sass/LESS so you can now generate CSS with or without Hover.css default class names
+- Added `!default` flags to Sass variables in `_options.scss`
+
+## 2.0.0 - Jan 7, 2015
 
 - Added lots of new effects
 - Added LESS support

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "Hover.css",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "homepage": "http://ianlunn.github.io/Hover",
   "authors": [
     "Ian Lunn <[email protected]>"

css/hover.css

@@ -1,6 +1,6 @@
 /*!
  * Hover.css (http://ianlunn.github.io/Hover/)
- * Version: 2.0.1
+ * Version: 2.0.2
  * Author: Ian Lunn @IanLunn
  * Author URL: http://ianlunn.co.uk/
  * Github: https://github.com/IanLunn/Hover
@@ -1374,24 +1374,37 @@
 }
 
 /* BACKGROUND TRANSITIONS */
+/* Fade */
+.hvr-fade {
+  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;
+  overflow: hidden;
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+  -webkit-transition-property: color, background-color;
+  transition-property: color, background-color;
+}
+.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
+  background-color: #2098d1;
+  color: white;
+}
+
 /* Back Pulse */
 @-webkit-keyframes hvr-back-pulse {
-  0% {
-    -webkit-opacity: 1;
-  }
-
   50% {
-    -webkit-opacity: 0.75;
+    background-color: rgba(32, 152, 209, 0.75);
   }
 }
 
 @keyframes hvr-back-pulse {
-  0% {
-    opacity: 1;
-  }
-
   50% {
-    opacity: 0.75;
+    background-color: rgba(32, 152, 209, 0.75);
   }
 }
 
@@ -1404,8 +1417,9 @@
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
+  overflow: hidden;
+  -webkit-transition-duration: 0.5s;
+  transition-duration: 0.5s;
   -webkit-transition-property: color, background-color;
   transition-property: color, background-color;
 }
@@ -1414,31 +1428,13 @@
   animation-name: hvr-back-pulse;
   -webkit-animation-duration: 1s;
   animation-duration: 1s;
+  -webkit-animation-delay: 0.5s;
+  animation-delay: 0.5s;
   -webkit-animation-timing-function: linear;
   animation-timing-function: linear;
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
-  background-color: #2091d1;
-  color: white;
-}
-
-/* Fade */
-.hvr-fade {
-  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;
-  overflow: hidden;
-  -webkit-transition-duration: 0.3s;
-  transition-duration: 0.3s;
-  -webkit-transition-property: color, background-color;
-  transition-property: color, background-color;
-}
-.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
+  background-color: #2098d1;
   background-color: #2098d1;
   color: white;
 }

index.html

@@ -71,9 +71,9 @@ <h2>2D Transitions</h2>
 
 
 			<h2>Background Transitions</h2>
-
-            <a href="#" class="hvr-back-pulse">Back Pulse</a>
+
 			<a href="#" class="hvr-fade">Fade</a>
+			<a href="#" class="hvr-back-pulse">Back Pulse</a>
 			<a href="#" class="hvr-sweep-to-right">Sweep To Right</a>
 			<a href="#" class="hvr-sweep-to-left">Sweep To Left</a>
 			<a href="#" class="hvr-sweep-to-bottom">Sweep To Bottom</a>

less/effects/background-transitions/_back-pulse.less

@@ -0,0 +1,26 @@
+/* Back Pulse */
+.keyframes(~"@{nameSpace}-back-pulse", {
+	50% {
+		background-color: rgba(32, 152, 209, .75);
+	}
+});
+
+.back-pulse() {
+	.hacks();
+	overflow: hidden;
+	.prefixed(transition-duration, @slowDuration);
+	.prefixed(transition-property, "color, background-color");
+
+	&:hover,
+	&:focus,
+	&:active {
+		.prefixed(animation-name, ~"@{nameSpace}-back-pulse");
+		.prefixed(animation-duration, 1s);
+		.prefixed(animation-delay, @slowDuration);
+		.prefixed(animation-timing-function, linear);
+		.prefixed(animation-iteration-count, infinite);
+		background-color: @activeColor;
+		background-color: rgba(32, 152, 209, 1);
+		color: white;
+	}
+}

less/hover.less

@@ -1,6 +1,6 @@
 /*!
  * Hover.css (http://ianlunn.github.io/Hover/)
- * Version: 2.0.1
+ * Version: 2.0.2
  * Author: Ian Lunn @IanLunn
  * Author URL: http://ianlunn.co.uk/
  * Github: https://github.com/IanLunn/Hover
@@ -215,6 +215,13 @@
 	}
 }
 
+@import "effects/background-transitions/_back-pulse";
+& when(@includeClasses = true) {
+	.@{nameSpace}-back-pulse {
+		.back-pulse();
+	}
+}
+
 @import "effects/background-transitions/_sweep-to-right";
 & when(@includeClasses = true) {
 	.@{nameSpace}-sweep-to-right {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hover.css",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "author": "Ian Lunn",
   "repository": {
     "type": "git",

scss/effects/background-transitions/_back-pulse.scss

@@ -0,0 +1,26 @@
+/* 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;
+	}
+}

scss/hover.scss

@@ -1,6 +1,6 @@
 /*!
  * Hover.css (http://ianlunn.github.io/Hover/)
- * Version: 2.0.1
+ * Version: 2.0.2
  * Author: Ian Lunn @IanLunn
  * Author URL: http://ianlunn.co.uk/
  * Github: https://github.com/IanLunn/Hover
@@ -214,6 +214,13 @@
 	}
 }
 
+@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 {