From 8dc92c4a3a8b182dbae36117848f2dd3c41d7773 Mon Sep 17 00:00:00 2001 From: kvnx Date: Sun, 26 Apr 2015 05:18:25 +0200 Subject: [PATCH] Better solution for using icons --- README.md | 31 +- css/hover.css | 331 ++++++------------ index.html | 56 +-- less/effects/icons/_icon-back.less | 11 +- less/effects/icons/_icon-bob.less | 11 +- less/effects/icons/_icon-bounce-out.less | 9 +- less/effects/icons/_icon-bounce.less | 9 +- less/effects/icons/_icon-buzz-out.less | 11 +- less/effects/icons/_icon-buzz.less | 11 +- less/effects/icons/_icon-down.less | 9 +- less/effects/icons/_icon-drop.less | 10 +- less/effects/icons/_icon-fade.less | 9 +- less/effects/icons/_icon-float-away.less | 13 +- less/effects/icons/_icon-float.less | 11 +- less/effects/icons/_icon-forward.less | 11 +- less/effects/icons/_icon-grow-rotate.less | 9 +- less/effects/icons/_icon-grow.less | 9 +- less/effects/icons/_icon-hang.less | 11 +- less/effects/icons/_icon-pop.less | 9 +- less/effects/icons/_icon-pulse-grow.less | 9 +- less/effects/icons/_icon-pulse-shrink.less | 9 +- less/effects/icons/_icon-pulse.less | 9 +- less/effects/icons/_icon-push.less | 9 +- less/effects/icons/_icon-rotate.less | 9 +- less/effects/icons/_icon-shrink.less | 9 +- less/effects/icons/_icon-sink-away.less | 15 +- less/effects/icons/_icon-sink.less | 11 +- less/effects/icons/_icon-spin.less | 11 +- less/effects/icons/_icon-up.less | 11 +- .../icons/_icon-wobble-horizontal.less | 11 +- less/effects/icons/_icon-wobble-vertical.less | 11 +- scss/effects/icons/_icon-back.scss | 11 +- scss/effects/icons/_icon-bob.scss | 11 +- scss/effects/icons/_icon-bounce-out.scss | 9 +- scss/effects/icons/_icon-bounce.scss | 9 +- scss/effects/icons/_icon-buzz-out.scss | 11 +- scss/effects/icons/_icon-buzz.scss | 11 +- scss/effects/icons/_icon-down.scss | 9 +- scss/effects/icons/_icon-drop.scss | 10 +- scss/effects/icons/_icon-fade.scss | 9 +- scss/effects/icons/_icon-float-away.scss | 13 +- scss/effects/icons/_icon-float.scss | 11 +- scss/effects/icons/_icon-forward.scss | 11 +- scss/effects/icons/_icon-grow-rotate.scss | 9 +- scss/effects/icons/_icon-grow.scss | 9 +- scss/effects/icons/_icon-hang.scss | 11 +- scss/effects/icons/_icon-pop.scss | 9 +- scss/effects/icons/_icon-pulse-grow.scss | 9 +- scss/effects/icons/_icon-pulse-shrink.scss | 9 +- scss/effects/icons/_icon-pulse.scss | 9 +- scss/effects/icons/_icon-push.scss | 9 +- scss/effects/icons/_icon-rotate.scss | 9 +- scss/effects/icons/_icon-shrink.scss | 9 +- scss/effects/icons/_icon-sink-away.scss | 13 +- scss/effects/icons/_icon-sink.scss | 11 +- scss/effects/icons/_icon-spin.scss | 11 +- scss/effects/icons/_icon-up.scss | 11 +- .../icons/_icon-wobble-horizontal.scss | 11 +- scss/effects/icons/_icon-wobble-vertical.scss | 11 +- 59 files changed, 280 insertions(+), 710 deletions(-) diff --git a/README.md b/README.md index 84c5914..ea8eaba 100644 --- a/README.md +++ b/README.md @@ -111,33 +111,16 @@ Hover.css uses [FontAwesome](https://fortawesome.github.io/Font-Awesome/) for it ``` -Hover.css icons are added to elements via the `:before` pseudo-element. Let's take the Icon Forward effect as an example (browser prefixes and additional styles removed for brevity): +Hover.css icons are added to elements via the classes .fa or .hover-icon: -```css -.hvr-icon-forward:before { - content: "\f138"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; - transform: translateZ(0); - transition-duration: 0.1s; - transition-property: transform; - transition-timing-function: ease-out; -} +``` + My Text +``` +OR +``` + My Text ``` -What's important in the above example are the `font-family` and `content` declarations. `font-family: FontAwesome` tells the browser we want to use a FontAwesome icon in this pseudo-element, and the `content` value says which one. Should you wish to change the icon, change the value of the `content` property. A [full list of the values and the icon they represent can be found here](http://astronautweb.co/snippet/font-awesome/#font-awesome-list). - -If you'd rather not tamper with Hover.css itself, you can override the default content value simply by declaring the same declaration again (providing it be declared after the default one either in Hover.css or another stylesheet): - -```css -.hvr-icon-forward:before { - content: "\f001"; -} -``` - -The Icon Forward effect will then display a musical note that moves forward when hovered over (instead of the default arrow in a circle). ## What's Included? diff --git a/css/hover.css b/css/hover.css index 8d0a16d..8d50150 100644 --- a/css/hover.css +++ b/css/hover.css @@ -3206,16 +3206,10 @@ backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; - padding-left: 2.2em; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; } -.hvr-icon-back:before { - content: "\f137"; - position: absolute; - left: 1em; - padding: 0 1px; - font-family: FontAwesome; +.hvr-icon-back .fa, .hvr-icon-back .hover-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.1s; @@ -3225,7 +3219,9 @@ -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } -.hvr-icon-back:hover:before, .hvr-icon-back:focus:before, .hvr-icon-back:active:before { +.hvr-icon-back:hover .fa, .hvr-icon-back:hover .hover-icon, +.hvr-icon-back:focus .fa, .hvr-icon-back:focus .hover-icon, +.hvr-icon-back:active .fa, .hvr-icon-back:active .hover-icon { -webkit-transform: translateX(-4px); transform: translateX(-4px); } @@ -3241,16 +3237,10 @@ backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; - padding-right: 2.2em; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; } -.hvr-icon-forward:before { - content: "\f138"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; +.hvr-icon-forward .fa, .hvr-icon-forward .hover-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.1s; @@ -3260,7 +3250,9 @@ -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } -.hvr-icon-forward:hover:before, .hvr-icon-forward:focus:before, .hvr-icon-forward:active:before { +.hvr-icon-forward:hover .fa, .hvr-icon-forward:hover .hover-icon, +.hvr-icon-forward:focus .fa, .hvr-icon-forward:focus .hover-icon, +.hvr-icon-forward:active .fa, .hvr-icon-forward:active .hover-icon { -webkit-transform: translateX(4px); transform: translateX(4px); } @@ -3307,18 +3299,14 @@ backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; - padding-right: 2.2em; } -.hvr-icon-down:before { - content: "\f01a"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; +.hvr-icon-down .fa, .hvr-icon-down .hover-icon { -webkit-transform: translateZ(0); transform: translateZ(0); } -.hvr-icon-down:hover:before, .hvr-icon-down:focus:before, .hvr-icon-down:active:before { +.hvr-icon-down:hover .fa, .hvr-icon-down:hover .hover-icon, +.hvr-icon-down:focus .fa, .hvr-icon-down:focus .hover-icon, +.hvr-icon-down:active .fa, .hvr-icon-down:active .hover-icon { -webkit-animation-name: hvr-icon-down; animation-name: hvr-icon-down; -webkit-animation-duration: 0.75s; @@ -3369,18 +3357,14 @@ backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; - padding-right: 2.2em; } -.hvr-icon-up:before { - content: "\f01b"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; +.hvr-icon-up .fa, .hvr-icon-up .hover-icon { -webkit-transform: translateZ(0); transform: translateZ(0); } -.hvr-icon-up:hover:before, .hvr-icon-up:focus:before, .hvr-icon-up:active:before { +.hvr-icon-up:hover .fa, .hvr-icon-up:hover .hover-icon, +.hvr-icon-up:focus .fa, .hvr-icon-up:focus .hover-icon, +.hvr-icon-up:active .fa, .hvr-icon-up:active .hover-icon { -webkit-animation-name: hvr-icon-up; animation-name: hvr-icon-up; -webkit-animation-duration: 0.75s; @@ -3400,14 +3384,8 @@ backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; - padding-right: 2.2em; } -.hvr-icon-spin:before { - content: "\f021"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; +.hvr-icon-spin .fa, .hvr-icon-spin .hover-icon { -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-property: transform; @@ -3415,7 +3393,9 @@ -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } -.hvr-icon-spin:hover:before, .hvr-icon-spin:focus:before, .hvr-icon-spin:active:before { +.hvr-icon-spin:hover .fa, .hvr-icon-spin:hover .hover-icon, +.hvr-icon-spin:focus .fa, .hvr-icon-spin:focus .hover-icon, +.hvr-icon-spin:active .fa, .hvr-icon-spin:active .hover-icon { -webkit-transform: rotate(360deg); transform: rotate(360deg); } @@ -3466,19 +3446,14 @@ backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; - padding-right: 2.2em; } -.hvr-icon-drop:before { - content: "\f041"; - position: absolute; - right: 1em; - opacity: 1; - padding: 0 1px; - font-family: FontAwesome; +.hvr-icon-drop .fa, .hvr-icon-drop .hover-icon { -webkit-transform: translateZ(0); transform: translateZ(0); } -.hvr-icon-drop:hover:before, .hvr-icon-drop:focus:before, .hvr-icon-drop:active:before { +.hvr-icon-drop:hover .fa, .hvr-icon-drop:hover .hover-icon, +.hvr-icon-drop:focus .fa, .hvr-icon-drop:focus .hover-icon, +.hvr-icon-drop:active .fa, .hvr-icon-drop:active .hover-icon { opacity: 0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; @@ -3507,14 +3482,8 @@ backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; - padding-right: 2.2em; } -.hvr-icon-fade:before { - content: "\f00c"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; +.hvr-icon-fade .fa, .hvr-icon-fade .hover-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.5s; @@ -3522,7 +3491,9 @@ -webkit-transition-property: color; transition-property: color; } -.hvr-icon-fade:hover:before, .hvr-icon-fade:focus:before, .hvr-icon-fade:active:before { +.hvr-icon-fade:hover .fa, .hvr-icon-fade:hover .hover-icon, +.hvr-icon-fade:focus .fa, .hvr-icon-fade:focus .hover-icon, +.hvr-icon-fade:active .fa, .hvr-icon-fade:active .hover-icon { color: #0F9E5E; } @@ -3562,23 +3533,16 @@ backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; - padding-right: 2.2em; } -.hvr-icon-float-away:before, .hvr-icon-float-away:after { - content: "\f055"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; -} -.hvr-icon-float-away:after { - opacity: 0; +.hvr-icon-float-away .fa, .hvr-icon-float-away .hover-icon { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } -.hvr-icon-float-away:hover:after, .hvr-icon-float-away:focus:after, .hvr-icon-float-away:active:after { +.hvr-icon-float-away:hover .fa, .hvr-icon-float-away:hover .hover-icon, +.hvr-icon-float-away:focus .fa, .hvr-icon-float-away:focus .hover-icon, +.hvr-icon-float-away:active .fa, .hvr-icon-float-away:active .hover-icon { -webkit-animation-name: hvr-icon-float-away; animation-name: hvr-icon-float-away; -webkit-animation-timing-function: ease-out; @@ -3621,25 +3585,18 @@ backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; - padding-right: 2.2em; } -.hvr-icon-sink-away:before, .hvr-icon-sink-away:after { - content: "\f056"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; +.hvr-icon-sink-away .fa, .hvr-icon-sink-away .hover-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -} -.hvr-icon-sink-away:after { - opacity: 0; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } -.hvr-icon-sink-away:hover:after, .hvr-icon-sink-away:focus:after, .hvr-icon-sink-away:active:after { +.hvr-icon-sink-away:hover .fa, .hvr-icon-sink-away:hover .hover-icon, +.hvr-icon-sink-away:focus .fa, .hvr-icon-sink-away:focus .hover-icon, +.hvr-icon-sink-away:active .fa, .hvr-icon-sink-away:active .hover-icon { -webkit-animation-name: hvr-icon-sink-away; animation-name: hvr-icon-sink-away; -webkit-animation-timing-function: ease-out; @@ -3657,16 +3614,10 @@ backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; - padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } -.hvr-icon-grow:before { - content: "\f118"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; +.hvr-icon-grow .fa, .hvr-icon-grow .hover-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; @@ -3676,7 +3627,9 @@ -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } -.hvr-icon-grow:hover:before, .hvr-icon-grow:focus:before, .hvr-icon-grow:active:before { +.hvr-icon-grow:hover .fa, .hvr-icon-grow:hover .hover-icon, +.hvr-icon-grow:focus .fa, .hvr-icon-grow:focus .hover-icon, +.hvr-icon-grow:active .fa, .hvr-icon-grow:active .hover-icon { -webkit-transform: scale(1.3) translateZ(0); transform: scale(1.3) translateZ(0); } @@ -3692,16 +3645,10 @@ backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; - padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } -.hvr-icon-shrink:before { - content: "\f119"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; +.hvr-icon-shrink .fa, .hvr-icon-shrink .hover-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; @@ -3711,7 +3658,9 @@ -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } -.hvr-icon-shrink:hover:before, .hvr-icon-shrink:focus:before, .hvr-icon-shrink:active:before { +.hvr-icon-shrink:hover .fa, .hvr-icon-shrink:hover .hover-icon, +.hvr-icon-shrink:focus .fa, .hvr-icon-shrink:focus .hover-icon, +.hvr-icon-shrink:active .fa, .hvr-icon-shrink:active .hover-icon { -webkit-transform: scale(0.8); transform: scale(0.8); } @@ -3751,20 +3700,16 @@ backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; - padding-right: 2.2em; } -.hvr-icon-pulse:before { - content: "\f015"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; +.hvr-icon-pulse .fa, .hvr-icon-pulse .hover-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } -.hvr-icon-pulse:hover:before, .hvr-icon-pulse:focus:before, .hvr-icon-pulse:active:before { +.hvr-icon-pulse:hover .fa, .hvr-icon-pulse:hover .hover-icon, +.hvr-icon-pulse:focus .fa, .hvr-icon-pulse:focus .hover-icon, +.hvr-icon-pulse:active .fa, .hvr-icon-pulse:active .hover-icon { -webkit-animation-name: hvr-icon-pulse; animation-name: hvr-icon-pulse; -webkit-animation-duration: 1s; @@ -3800,20 +3745,16 @@ backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; - padding-right: 2.2em; } -.hvr-icon-pulse-grow:before { - content: "\f015"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; +.hvr-icon-pulse-grow .fa, .hvr-icon-pulse-grow .hover-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } -.hvr-icon-pulse-grow:hover:before, .hvr-icon-pulse-grow:focus:before, .hvr-icon-pulse-grow:active:before { +.hvr-icon-pulse-grow:hover .fa, .hvr-icon-pulse-grow:hover .hover-icon, +.hvr-icon-pulse-grow:focus .fa, .hvr-icon-pulse-grow:focus .hover-icon, +.hvr-icon-pulse-grow:active .fa, .hvr-icon-pulse-grow:active .hover-icon { -webkit-animation-name: hvr-icon-pulse-grow; animation-name: hvr-icon-pulse-grow; -webkit-animation-duration: 0.3s; @@ -3851,20 +3792,16 @@ backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; - padding-right: 2.2em; } -.hvr-icon-pulse-shrink:before { - content: "\f015"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; +.hvr-icon-pulse-shrink .fa, .hvr-icon-pulse-shrink .hover-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } -.hvr-icon-pulse-shrink:hover:before, .hvr-icon-pulse-shrink:focus:before, .hvr-icon-pulse-shrink:active:before { +.hvr-icon-pulse-shrink:hover .fa, .hvr-icon-pulse-shrink:hover .hover-icon, +.hvr-icon-pulse-shrink:focus .fa, .hvr-icon-pulse-shrink:focus .hover-icon, +.hvr-icon-pulse-shrink:active .fa, .hvr-icon-pulse-shrink:active .hover-icon { -webkit-animation-name: hvr-icon-pulse-shrink; animation-name: hvr-icon-pulse-shrink; -webkit-animation-duration: 0.3s; @@ -3902,16 +3839,10 @@ backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; - padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } -.hvr-icon-push:before { - content: "\f006"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; +.hvr-icon-push .fa, .hvr-icon-push .hover-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; @@ -3921,7 +3852,9 @@ -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } -.hvr-icon-push:hover:before, .hvr-icon-push:focus:before, .hvr-icon-push:active:before { +.hvr-icon-push:hover .fa, .hvr-icon-push:hover .hover-icon, +.hvr-icon-push:focus .fa, .hvr-icon-push:focus .hover-icon, +.hvr-icon-push:active .fa, .hvr-icon-push:active .hover-icon { -webkit-animation-name: hvr-icon-push; animation-name: hvr-icon-push; -webkit-animation-duration: 0.3s; @@ -3957,16 +3890,10 @@ backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; - padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } -.hvr-icon-pop:before { - content: "\f005"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; +.hvr-icon-pop .fa, .hvr-icon-pop .hover-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; @@ -3976,7 +3903,9 @@ -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } -.hvr-icon-pop:hover:before, .hvr-icon-pop:focus:before, .hvr-icon-pop:active:before { +.hvr-icon-pop:hover .fa, .hvr-icon-pop:hover .hover-icon, +.hvr-icon-pop:focus .fa, .hvr-icon-pop:focus .hover-icon, +.hvr-icon-pop:active .fa, .hvr-icon-pop:active .hover-icon { -webkit-animation-name: hvr-icon-pop; animation-name: hvr-icon-pop; -webkit-animation-duration: 0.3s; @@ -3998,16 +3927,10 @@ backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; - padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } -.hvr-icon-bounce:before { - content: "\f087"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; +.hvr-icon-bounce .fa, .hvr-icon-bounce .hover-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; @@ -4017,7 +3940,9 @@ -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } -.hvr-icon-bounce:hover:before, .hvr-icon-bounce:focus:before, .hvr-icon-bounce:active:before { +.hvr-icon-bounce:hover .fa, .hvr-icon-bounce:hover .hover-icon, +.hvr-icon-bounce:focus .fa, .hvr-icon-bounce:focus .hover-icon, +.hvr-icon-bounce:active .fa, .hvr-icon-bounce:active .hover-icon { -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); @@ -4035,16 +3960,10 @@ backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; - padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } -.hvr-icon-rotate:before { - content: "\f0c6"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; +.hvr-icon-rotate .fa, .hvr-icon-rotate .hover-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; @@ -4054,7 +3973,9 @@ -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } -.hvr-icon-rotate:hover:before, .hvr-icon-rotate:focus:before, .hvr-icon-rotate:active:before { +.hvr-icon-rotate:hover .fa, .hvr-icon-rotate:hover .hover-icon, +.hvr-icon-rotate:focus .fa, .hvr-icon-rotate:focus .hover-icon, +.hvr-icon-rotate:active .fa, .hvr-icon-rotate:active .hover-icon { -webkit-transform: rotate(20deg); transform: rotate(20deg); } @@ -4070,16 +3991,10 @@ backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; - padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } -.hvr-icon-grow-rotate:before { - content: "\f095"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; +.hvr-icon-grow-rotate .fa, .hvr-icon-grow-rotate .hover-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; @@ -4089,7 +4004,9 @@ -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } -.hvr-icon-grow-rotate:hover:before, .hvr-icon-grow-rotate:focus:before, .hvr-icon-grow-rotate:active:before { +.hvr-icon-grow-rotate:hover .fa, .hvr-icon-grow-rotate:hover .hover-icon, +.hvr-icon-grow-rotate:focus .fa, .hvr-icon-grow-rotate:focus .hover-icon, +.hvr-icon-grow-rotate:active .fa, .hvr-icon-grow-rotate:active .hover-icon { -webkit-transform: scale(1.5) rotate(12deg); transform: scale(1.5) rotate(12deg); } @@ -4105,16 +4022,10 @@ backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; - padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } -.hvr-icon-float:before { - content: "\f01b"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; +.hvr-icon-float .fa, .hvr-icon-float .hover-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; @@ -4124,7 +4035,9 @@ -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } -.hvr-icon-float:hover:before, .hvr-icon-float:focus:before, .hvr-icon-float:active:before { +.hvr-icon-float:hover .fa, .hvr-icon-float:hover .hover-icon, +.hvr-icon-float:focus .fa, .hvr-icon-float:focus .hover-icon, +.hvr-icon-float:active .fa, .hvr-icon-float:active .hover-icon { -webkit-transform: translateY(-4px); transform: translateY(-4px); } @@ -4140,16 +4053,10 @@ backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; - padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } -.hvr-icon-sink:before { - content: "\f01a"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; +.hvr-icon-sink .fa, .hvr-icon-sink .hover-icon { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; @@ -4159,7 +4066,9 @@ -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } -.hvr-icon-sink:hover:before, .hvr-icon-sink:focus:before, .hvr-icon-sink:active:before { +.hvr-icon-sink:hover .fa, .hvr-icon-sink:hover .hover-icon, +.hvr-icon-sink:focus .fa, .hvr-icon-sink:focus .hover-icon, +.hvr-icon-sink:active .fa, .hvr-icon-sink:active .hover-icon { -webkit-transform: translateY(4px); transform: translateY(4px); } @@ -4223,20 +4132,16 @@ backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; - padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } -.hvr-icon-bob:before { - content: "\f077"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; +.hvr-icon-bob .fa, .hvr-icon-bob .hover-icon { -webkit-transform: translateZ(0); transform: translateZ(0); } -.hvr-icon-bob:hover:before, .hvr-icon-bob:focus:before, .hvr-icon-bob:active:before { +.hvr-icon-bob:hover .fa, .hvr-icon-bob:hover .hover-icon, +.hvr-icon-bob:focus .fa, .hvr-icon-bob:focus .hover-icon, +.hvr-icon-bob:active .fa, .hvr-icon-bob:active .hover-icon { -webkit-animation-name: hvr-icon-bob-float, hvr-icon-bob; animation-name: hvr-icon-bob-float, hvr-icon-bob; -webkit-animation-duration: .3s, 1.5s; @@ -4312,20 +4217,16 @@ backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; - padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } -.hvr-icon-hang:before { - content: "\f078"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; +.hvr-icon-hang .fa, .hvr-icon-hang .hover-icon { -webkit-transform: translateZ(0); transform: translateZ(0); } -.hvr-icon-hang:hover:before, .hvr-icon-hang:focus:before, .hvr-icon-hang:active:before { +.hvr-icon-hang:hover .fa, .hvr-icon-hang:hover .hover-icon, +.hvr-icon-hang:focus .fa, .hvr-icon-hang:focus .hover-icon, +.hvr-icon-hang:active .fa, .hvr-icon-hang:active .hover-icon { -webkit-animation-name: hvr-icon-hang-sink, hvr-icon-hang; animation-name: hvr-icon-hang-sink, hvr-icon-hang; -webkit-animation-duration: .3s, 1.5s; @@ -4417,20 +4318,16 @@ backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; - padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } -.hvr-icon-wobble-horizontal:before { - content: "\f061"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; +.hvr-icon-wobble-horizontal .fa, .hvr-icon-wobble-horizontal .hover-icon { -webkit-transform: translateZ(0); transform: translateZ(0); } -.hvr-icon-wobble-horizontal:hover:before, .hvr-icon-wobble-horizontal:focus:before, .hvr-icon-wobble-horizontal:active:before { +.hvr-icon-wobble-horizontal:hover .fa, .hvr-icon-wobble-horizontal:hover .hover-icon, +.hvr-icon-wobble-horizontal:focus .fa, .hvr-icon-wobble-horizontal:focus .hover-icon, +.hvr-icon-wobble-horizontal:active .fa, .hvr-icon-wobble-horizontal:active .hover-icon { -webkit-animation-name: hvr-icon-wobble-horizontal; animation-name: hvr-icon-wobble-horizontal; -webkit-animation-duration: 1s; @@ -4516,20 +4413,16 @@ backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; - padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } -.hvr-icon-wobble-vertical:before { - content: "\f062"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; +.hvr-icon-wobble-vertical .fa, .hvr-icon-wobble-vertical .hover-icon { -webkit-transform: translateZ(0); transform: translateZ(0); } -.hvr-icon-wobble-vertical:hover:before, .hvr-icon-wobble-vertical:focus:before, .hvr-icon-wobble-vertical:active:before { +.hvr-icon-wobble-vertical:hover .fa, .hvr-icon-wobble-vertical:hover .hover-icon, +.hvr-icon-wobble-vertical:focus .fa, .hvr-icon-wobble-vertical:focus .hover-icon, +.hvr-icon-wobble-vertical:active .fa, .hvr-icon-wobble-vertical:active .hover-icon { -webkit-animation-name: hvr-icon-wobble-vertical; animation-name: hvr-icon-wobble-vertical; -webkit-animation-duration: 1s; @@ -4575,20 +4468,16 @@ backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; - padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } -.hvr-icon-buzz:before { - content: "\f017"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; +.hvr-icon-buzz .fa, .hvr-icon-buzz .hover-icon { -webkit-transform: translateZ(0); transform: translateZ(0); } -.hvr-icon-buzz:hover:before, .hvr-icon-buzz:focus:before, .hvr-icon-buzz:active:before { +.hvr-icon-buzz:hover .fa, .hvr-icon-buzz:hover .hover-icon, +.hvr-icon-buzz:focus .fa, .hvr-icon-buzz:focus .hover-icon, +.hvr-icon-buzz:active .fa, .hvr-icon-buzz:active .hover-icon { -webkit-animation-name: hvr-icon-buzz; animation-name: hvr-icon-buzz; -webkit-animation-duration: 0.15s; @@ -4714,20 +4603,16 @@ backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; - padding-right: 2.2em; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } -.hvr-icon-buzz-out:before { - content: "\f023"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; +.hvr-icon-buzz-out .fa, .hvr-icon-buzz-out .hover-icon { -webkit-transform: translateZ(0); transform: translateZ(0); } -.hvr-icon-buzz-out:hover:before, .hvr-icon-buzz-out:focus:before, .hvr-icon-buzz-out:active:before { +.hvr-icon-buzz-out:hover .fa, .hvr-icon-buzz-out:hover .hover-icon, +.hvr-icon-buzz-out:focus .fa, .hvr-icon-buzz-out:focus .hover-icon, +.hvr-icon-buzz-out:active .fa, .hvr-icon-buzz-out:active .hover-icon { -webkit-animation-name: hvr-icon-buzz-out; animation-name: hvr-icon-buzz-out; -webkit-animation-duration: 0.75s; diff --git a/index.html b/index.html index 20e0e37..ab4634f 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ Hover.css - A collection of CSS3 powered hover effects - + @@ -100,33 +100,33 @@ Font icons courtesy of FontAwesome. How to use FontAwesome icons with Hover.css. - Icon Back - Icon Forward - Icon Down - Icon Up - Icon Spin - Icon Drop - Icon Fade - Icon Float Away - Icon Sink Away - Icon Grow - Icon Shrink - Icon Pulse - Icon Pulse Grow - Icon Pulse Shrink - Icon Push - Icon Pop - Icon Bounce - Icon Rotate - Icon Grow Rotate - Icon Float - Icon Sink - Icon Bob - Icon Hang - Icon Wobble Horizontal - Icon Wobble Vertical - Icon Buzz - Icon Buzz Out + Icon Back + Icon Forward + Icon Down + Icon Up + Icon Spin + Icon Drop + Icon Fade + Icon Float Away + Icon Sink Away + Icon Grow + Icon Shrink + Icon Pulse + Icon Pulse Grow + Icon Pulse Shrink + Icon Push + Icon Pop + Icon Bounce + Icon Rotate + Icon Grow Rotate + Icon Float + Icon Sink + Icon Bob + Icon Hang + Icon Wobble Horizontal + Icon Wobble Vertical + Icon Buzz + Icon Buzz Out

Border Transitions

diff --git a/less/effects/icons/_icon-back.less b/less/effects/icons/_icon-back.less index 99137fc..9183b77 100644 --- a/less/effects/icons/_icon-back.less +++ b/less/effects/icons/_icon-back.less @@ -2,15 +2,10 @@ .icon-back() { .hacks(); position: relative; - padding-left: 2.2em; + padding-left: 0; .prefixed(transition-duration, @fastDuration); - &:before { - content: "\f137"; - position: absolute; - left: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { .prefixed(transform, translateZ(0)); .prefixed(transition-duration, @fastDuration); .prefixed(transition-property, transform); @@ -21,7 +16,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { .prefixed(transform, translateX(-4px)); } } diff --git a/less/effects/icons/_icon-bob.less b/less/effects/icons/_icon-bob.less index 11ea5ea..d05dd4d 100644 --- a/less/effects/icons/_icon-bob.less +++ b/less/effects/icons/_icon-bob.less @@ -20,15 +20,10 @@ .icon-bob() { .hacks(); position: relative; - padding-right: 2.2em; + padding-right: 0; .prefixed(transition-duration, @mediumDuration); - &:before { - content: "\f077"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { .prefixed(transform, translateZ(0)); } @@ -36,7 +31,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { .prefixed(animation-name, ~"@{nameSpace}-icon-bob-float, @{nameSpace}-icon-bob"); .prefixed(animation-duration, ~".3s, 1.5s"); .prefixed(animation-delay, ~"0s, .3s"); diff --git a/less/effects/icons/_icon-bounce-out.less b/less/effects/icons/_icon-bounce-out.less index 324f4d0..1056925 100644 --- a/less/effects/icons/_icon-bounce-out.less +++ b/less/effects/icons/_icon-bounce-out.less @@ -11,12 +11,7 @@ padding-right: @spaceBetweenTextAndArrows; .prefixed(transition-duration, @mediumDuration); - &:before { - content: "\f088"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { .prefixed(transform, translateZ(0)); .prefixed(transition-duration, @mediumDuration); .prefixed(transition-property, transform); @@ -27,7 +22,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { .prefixed(transform, scale(.9)); .prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36)); } diff --git a/less/effects/icons/_icon-bounce.less b/less/effects/icons/_icon-bounce.less index 6d76247..5f587bd 100644 --- a/less/effects/icons/_icon-bounce.less +++ b/less/effects/icons/_icon-bounce.less @@ -6,12 +6,7 @@ padding-right: @spaceBetweenTextAndArrows; .prefixed(transition-duration, @mediumDuration); - &:before { - content: "\f087"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { .prefixed(transform, translateZ(0)); .prefixed(transition-duration, @mediumDuration); .prefixed(transition-property, transform); @@ -22,7 +17,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { .prefixed(transform, scale(1.5)); .prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36)); } diff --git a/less/effects/icons/_icon-buzz-out.less b/less/effects/icons/_icon-buzz-out.less index be8a55a..6bb75ef 100644 --- a/less/effects/icons/_icon-buzz-out.less +++ b/less/effects/icons/_icon-buzz-out.less @@ -44,15 +44,10 @@ .icon-buzz-out() { .hacks(); position: relative; - padding-right: 2.2em; + padding-right: 0; .prefixed(transition-duration, @mediumDuration); - &:before { - content: "\f023"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { .prefixed(transform, translateZ(0)); } @@ -60,7 +55,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { .prefixed(animation-name, ~"@{nameSpace}-icon-buzz-out"); .prefixed(animation-duration, .75s); .prefixed(animation-timing-function, linear); diff --git a/less/effects/icons/_icon-buzz.less b/less/effects/icons/_icon-buzz.less index fa1dfb5..8d23a09 100644 --- a/less/effects/icons/_icon-buzz.less +++ b/less/effects/icons/_icon-buzz.less @@ -12,15 +12,10 @@ .icon-buzz() { .hacks(); position: relative; - padding-right: 2.2em; + padding-right: 0; .prefixed(transition-duration, @mediumDuration); - &:before { - content: "\f017"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { .prefixed(transform, translateZ(0)); } @@ -28,7 +23,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { .prefixed(animation-name, ~"@{nameSpace}-icon-buzz"); .prefixed(animation-duration, .15s); .prefixed(animation-timing-function, linear); diff --git a/less/effects/icons/_icon-down.less b/less/effects/icons/_icon-down.less index 3119e2b..d166efb 100644 --- a/less/effects/icons/_icon-down.less +++ b/less/effects/icons/_icon-down.less @@ -17,12 +17,7 @@ position: relative; padding-right: @spaceBetweenTextAndArrows; - &:before { - content: "\f01a"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { .prefixed(transform, translateZ(0)); } @@ -30,7 +25,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { .prefixed(animation-name, ~"@{nameSpace}-icon-down"); .prefixed(animation-duration, .75s); .prefixed(animation-timing-function, ease-out); diff --git a/less/effects/icons/_icon-drop.less b/less/effects/icons/_icon-drop.less index 44f21b2..3d3b120 100644 --- a/less/effects/icons/_icon-drop.less +++ b/less/effects/icons/_icon-drop.less @@ -22,13 +22,7 @@ position: relative; padding-right: @spaceBetweenTextAndArrows; - &:before { - content: "\f041"; - position: absolute; - right: 1em; - opacity: 1; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { .prefixed(transform, translateZ(0)); } @@ -36,7 +30,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { opacity: 0; .prefixed(transition-duration, @mediumDuration); .prefixed(animation-name, ~"@{nameSpace}-icon-drop"); diff --git a/less/effects/icons/_icon-fade.less b/less/effects/icons/_icon-fade.less index 8b0f82a..3944e61 100644 --- a/less/effects/icons/_icon-fade.less +++ b/less/effects/icons/_icon-fade.less @@ -4,12 +4,7 @@ position: relative; padding-right: @spaceBetweenTextAndArrows; - &:before { - content: "\f00c"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { .prefixed(transform, translateZ(0)); .prefixed(transition-duration, .5s); .prefixed(transition-property, color); @@ -19,7 +14,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { color: #0F9E5E; } } diff --git a/less/effects/icons/_icon-float-away.less b/less/effects/icons/_icon-float-away.less index dc95bc8..6da8122 100644 --- a/less/effects/icons/_icon-float-away.less +++ b/less/effects/icons/_icon-float-away.less @@ -16,16 +16,7 @@ position: relative; padding-right: @spaceBetweenTextAndArrows; - &:before, - &:after { - content: "\f055"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; - } - - &:after { + .fa, .hover-icon { opacity: 0; .prefixed(animation-duration, @slowDuration); .prefixed(animation-fill-mode, forwards); @@ -35,7 +26,7 @@ &:focus, &:active { - &:after { + .fa, .hover-icon { .prefixed(animation-name, ~"@{nameSpace}-icon-float-away"); .prefixed(animation-timing-function, ease-out); } diff --git a/less/effects/icons/_icon-float.less b/less/effects/icons/_icon-float.less index 754600a..ab37d82 100644 --- a/less/effects/icons/_icon-float.less +++ b/less/effects/icons/_icon-float.less @@ -2,15 +2,10 @@ .icon-float() { .hacks(); position: relative; - padding-right: 2.2em; + padding-right: 0; .prefixed(transition-duration, @mediumDuration); - &:before { - content: "\f01b"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { .prefixed(transform, translateZ(0)); .prefixed(transition-duration, @mediumDuration); .prefixed(transition-property, transform); @@ -21,7 +16,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { .prefixed(transform, translateY(-4px)); } } diff --git a/less/effects/icons/_icon-forward.less b/less/effects/icons/_icon-forward.less index bc1c956..d039b3b 100644 --- a/less/effects/icons/_icon-forward.less +++ b/less/effects/icons/_icon-forward.less @@ -2,15 +2,10 @@ .icon-forward() { .hacks(); position: relative; - padding-right: 2.2em; + padding-right: 0; .prefixed(transition-duration, @fastDuration); - &:before { - content: "\f138"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { .prefixed(transform, translateZ(0)); .prefixed(transition-duration, @fastDuration); .prefixed(transition-property, transform); @@ -21,7 +16,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { .prefixed(transform, translateX(4px)); } } diff --git a/less/effects/icons/_icon-grow-rotate.less b/less/effects/icons/_icon-grow-rotate.less index a7842ba..928b383 100644 --- a/less/effects/icons/_icon-grow-rotate.less +++ b/less/effects/icons/_icon-grow-rotate.less @@ -7,12 +7,7 @@ padding-right: @spaceBetweenTextAndArrows; .prefixed(transition-duration, @duration); - &:before { - content: "\f095"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { .prefixed(transform, translateZ(0)); .prefixed(transition-duration, @duration); .prefixed(transition-property, transform); @@ -23,7 +18,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { .prefixed(transform, scale(1.5) rotate(12deg)); } } diff --git a/less/effects/icons/_icon-grow.less b/less/effects/icons/_icon-grow.less index 4e04d65..5197167 100644 --- a/less/effects/icons/_icon-grow.less +++ b/less/effects/icons/_icon-grow.less @@ -5,12 +5,7 @@ padding-right: @spaceBetweenTextAndArrows; .prefixed(transition-duration, @mediumDuration); - &:before { - content: "\f118"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { .prefixed(transform, translateZ(0)); .prefixed(transition-duration, @mediumDuration); .prefixed(transition-property, transform); @@ -21,7 +16,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { .prefixed(transform, scale(1.3) translateZ(0)); } } diff --git a/less/effects/icons/_icon-hang.less b/less/effects/icons/_icon-hang.less index b797ac4..55bee9b 100644 --- a/less/effects/icons/_icon-hang.less +++ b/less/effects/icons/_icon-hang.less @@ -20,15 +20,10 @@ .icon-hang() { .hacks(); position: relative; - padding-right: 2.2em; + padding-right: 0; .prefixed(transition-duration, @mediumDuration); - &:before { - content: "\f078"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { .prefixed(transform, translateZ(0)); } @@ -36,7 +31,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { .prefixed(animation-name, ~"@{nameSpace}-icon-hang-sink, @{nameSpace}-icon-hang"); .prefixed(animation-duration, ~".3s, 1.5s"); .prefixed(animation-delay, ~"0s, .3s"); diff --git a/less/effects/icons/_icon-pop.less b/less/effects/icons/_icon-pop.less index 052a881..4328c3f 100644 --- a/less/effects/icons/_icon-pop.less +++ b/less/effects/icons/_icon-pop.less @@ -11,12 +11,7 @@ padding-right: @spaceBetweenTextAndArrows; .prefixed(transition-duration, @mediumDuration); - &:before { - content: "\f005"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { .prefixed(transform, translateZ(0)); .prefixed(transition-duration, @mediumDuration); .prefixed(transition-property, transform); @@ -27,7 +22,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { .prefixed(animation-name, ~"@{nameSpace}-icon-pop"); .prefixed(animation-duration, @mediumDuration); .prefixed(animation-timing-function, linear); diff --git a/less/effects/icons/_icon-pulse-grow.less b/less/effects/icons/_icon-pulse-grow.less index fedcca6..d8f6973 100644 --- a/less/effects/icons/_icon-pulse-grow.less +++ b/less/effects/icons/_icon-pulse-grow.less @@ -10,12 +10,7 @@ position: relative; padding-right: @spaceBetweenTextAndArrows; - &:before { - content: "\f015"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { .prefixed(transform, translateZ(0)); .prefixed(transition-timing-function, ease-out); } @@ -24,7 +19,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { .prefixed(animation-name, ~"@{nameSpace}-icon-pulse-grow"); .prefixed(animation-duration, @mediumDuration); .prefixed(animation-timing-function, linear); diff --git a/less/effects/icons/_icon-pulse-shrink.less b/less/effects/icons/_icon-pulse-shrink.less index 8ea9090..9a9eb08 100644 --- a/less/effects/icons/_icon-pulse-shrink.less +++ b/less/effects/icons/_icon-pulse-shrink.less @@ -10,12 +10,7 @@ position: relative; padding-right: @spaceBetweenTextAndArrows; - &:before { - content: "\f015"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { .prefixed(transform, translateZ(0)); .prefixed(transition-timing-function, ease-out); } @@ -24,7 +19,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { .prefixed(animation-name, ~"@{nameSpace}-icon-pulse-shrink"); .prefixed(animation-duration, @mediumDuration); .prefixed(animation-timing-function, linear); diff --git a/less/effects/icons/_icon-pulse.less b/less/effects/icons/_icon-pulse.less index 32cd1c1..9d9fc11 100644 --- a/less/effects/icons/_icon-pulse.less +++ b/less/effects/icons/_icon-pulse.less @@ -14,12 +14,7 @@ position: relative; padding-right: @spaceBetweenTextAndArrows; - &:before { - content: "\f015"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { .prefixed(transform, translateZ(0)); .prefixed(transition-timing-function, ease-out); } @@ -28,7 +23,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { .prefixed(animation-name, ~"@{nameSpace}-icon-pulse"); .prefixed(animation-duration, 1s); .prefixed(animation-timing-function, linear); diff --git a/less/effects/icons/_icon-push.less b/less/effects/icons/_icon-push.less index 0c07c88..9ead960 100644 --- a/less/effects/icons/_icon-push.less +++ b/less/effects/icons/_icon-push.less @@ -11,12 +11,7 @@ padding-right: @spaceBetweenTextAndArrows; .prefixed(transition-duration, @mediumDuration); - &:before { - content: "\f006"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { .prefixed(transform, translateZ(0)); .prefixed(transition-duration, @mediumDuration); .prefixed(transition-property, transform); @@ -27,7 +22,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { .prefixed(animation-name, ~"@{nameSpace}-icon-push"); .prefixed(animation-duration, @mediumDuration); .prefixed(animation-timing-function, linear); diff --git a/less/effects/icons/_icon-rotate.less b/less/effects/icons/_icon-rotate.less index 9a90f3a..aa93895 100644 --- a/less/effects/icons/_icon-rotate.less +++ b/less/effects/icons/_icon-rotate.less @@ -7,12 +7,7 @@ padding-right: @spaceBetweenTextAndArrows; .prefixed(transition-duration, @duration); - &:before { - content: "\f0c6"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { .prefixed(transform, translateZ(0)); .prefixed(transition-duration, @duration); .prefixed(transition-property, transform); @@ -23,7 +18,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { .prefixed(transform, rotate(20deg)); } } diff --git a/less/effects/icons/_icon-shrink.less b/less/effects/icons/_icon-shrink.less index f01f5bf..af2b3d1 100644 --- a/less/effects/icons/_icon-shrink.less +++ b/less/effects/icons/_icon-shrink.less @@ -5,12 +5,7 @@ padding-right: @spaceBetweenTextAndArrows; .prefixed(transition-duration, @mediumDuration); - &:before { - content: "\f119"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { .prefixed(transform, translateZ(0)); .prefixed(transition-duration, @mediumDuration); .prefixed(transition-property, transform); @@ -21,7 +16,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { .prefixed(transform, scale(.8)); } } diff --git a/less/effects/icons/_icon-sink-away.less b/less/effects/icons/_icon-sink-away.less index 34c8edd..f419b58 100644 --- a/less/effects/icons/_icon-sink-away.less +++ b/less/effects/icons/_icon-sink-away.less @@ -16,18 +16,9 @@ position: relative; padding-right: @spaceBetweenTextAndArrows; - &:before, - &:after { - content: "\f056"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; - .prefixed(transform, translateZ(0)); - } - - &:after { + .fa, .hover-icon { opacity: 0; + .prefixed(transform, translateZ(0)); .prefixed(animation-duration, @slowDuration); .prefixed(animation-fill-mode, forwards); } @@ -36,7 +27,7 @@ &:focus, &:active { - &:after { + .fa, .hover-icon { .prefixed(animation-name, ~"@{nameSpace}-icon-sink-away"); .prefixed(animation-timing-function, ease-out); } diff --git a/less/effects/icons/_icon-sink.less b/less/effects/icons/_icon-sink.less index 22c6aa8..d82a4b1 100644 --- a/less/effects/icons/_icon-sink.less +++ b/less/effects/icons/_icon-sink.less @@ -2,15 +2,10 @@ .icon-sink() { .hacks(); position: relative; - padding-right: 2.2em; + padding-right: 0; .prefixed(transition-duration, @mediumDuration); - &:before { - content: "\f01a"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { .prefixed(transform, translateZ(0)); .prefixed(transition-duration, @mediumDuration); .prefixed(transition-property, transform); @@ -21,7 +16,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { .prefixed(transform, translateY(4px)); } } diff --git a/less/effects/icons/_icon-spin.less b/less/effects/icons/_icon-spin.less index d8ec24a..502f61c 100644 --- a/less/effects/icons/_icon-spin.less +++ b/less/effects/icons/_icon-spin.less @@ -2,14 +2,9 @@ .icon-spin() { .hacks(); position: relative; - padding-right: 2.2em; + padding-right: 0; - &:before { - content: "\f021"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { .prefixed(transition-duration, 1s); .prefixed(transition-property, transform); .prefixed(transition-timing-function, ease-in-out); @@ -19,7 +14,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { .prefixed(transform, rotate(360deg)); } } diff --git a/less/effects/icons/_icon-up.less b/less/effects/icons/_icon-up.less index 6db42a2..adf8698 100644 --- a/less/effects/icons/_icon-up.less +++ b/less/effects/icons/_icon-up.less @@ -15,14 +15,9 @@ .icon-up() { .hacks(); position: relative; - padding-right: 2.2em; + padding-right: 0; - &:before { - content: "\f01b"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { .prefixed(transform, translateZ(0)); } @@ -30,7 +25,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { .prefixed(animation-name, ~"@{nameSpace}-icon-up"); .prefixed(animation-duration, .75s); .prefixed(animation-timing-function, ease-out); diff --git a/less/effects/icons/_icon-wobble-horizontal.less b/less/effects/icons/_icon-wobble-horizontal.less index 8ab16fc..f6e45c6 100644 --- a/less/effects/icons/_icon-wobble-horizontal.less +++ b/less/effects/icons/_icon-wobble-horizontal.less @@ -28,15 +28,10 @@ .icon-wobble-horizontal() { .hacks(); position: relative; - padding-right: 2.2em; + padding-right: 0; .prefixed(transition-duration, @mediumDuration); - &:before { - content: "\f061"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { .prefixed(transform, translateZ(0)); } @@ -44,7 +39,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { .prefixed(animation-name, ~"@{nameSpace}-icon-wobble-horizontal"); .prefixed(animation-duration, 1s); .prefixed(animation-timing-function, ease-in-out); diff --git a/less/effects/icons/_icon-wobble-vertical.less b/less/effects/icons/_icon-wobble-vertical.less index 71615ab..8374184 100644 --- a/less/effects/icons/_icon-wobble-vertical.less +++ b/less/effects/icons/_icon-wobble-vertical.less @@ -28,15 +28,10 @@ .icon-wobble-vertical() { .hacks(); position: relative; - padding-right: 2.2em; + padding-right: 0; .prefixed(transition-duration, @mediumDuration); - &:before { - content: "\f062"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { .prefixed(transform, translateZ(0)); } @@ -44,7 +39,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { .prefixed(animation-name, ~"@{nameSpace}-icon-wobble-vertical"); .prefixed(animation-duration, 1s); .prefixed(animation-timing-function, ease-in-out); diff --git a/scss/effects/icons/_icon-back.scss b/scss/effects/icons/_icon-back.scss index 421d0d5..c0808a8 100644 --- a/scss/effects/icons/_icon-back.scss +++ b/scss/effects/icons/_icon-back.scss @@ -2,15 +2,10 @@ @mixin icon-back { @include hacks(); position: relative; - padding-left: 2.2em; + padding-left: 0; @include prefixed(transition-duration, $fastDuration); - &:before { - content: "\f137"; - position: absolute; - left: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { @include prefixed(transform, translateZ(0)); @include prefixed(transition-duration, $fastDuration); @include prefixed(transition-property, transform); @@ -21,7 +16,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { @include prefixed(transform, translateX(-4px)); } } diff --git a/scss/effects/icons/_icon-bob.scss b/scss/effects/icons/_icon-bob.scss index f6f64fe..c9e9b69 100644 --- a/scss/effects/icons/_icon-bob.scss +++ b/scss/effects/icons/_icon-bob.scss @@ -20,15 +20,10 @@ @mixin icon-bob { @include hacks(); position: relative; - padding-right: 2.2em; + padding-right: 0; @include prefixed(transition-duration, $mediumDuration); - &:before { - content: "\f077"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { @include prefixed(transform, translateZ(0)); } @@ -36,7 +31,7 @@ &:focus, &:active { - &:before { + .fa, .hover-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"); diff --git a/scss/effects/icons/_icon-bounce-out.scss b/scss/effects/icons/_icon-bounce-out.scss index 9be92cf..90dd189 100644 --- a/scss/effects/icons/_icon-bounce-out.scss +++ b/scss/effects/icons/_icon-bounce-out.scss @@ -11,12 +11,7 @@ padding-right: #{$spaceBetweenTextAndArrows}; @include prefixed(transition-duration, $mediumDuration); - &:before { - content: "\f088"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { @include prefixed(transform, translateZ(0)); @include prefixed(transition-duration, $mediumDuration); @include prefixed(transition-property, transform); @@ -27,7 +22,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { @include prefixed(transform, scale(.9)); @include prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36)); } diff --git a/scss/effects/icons/_icon-bounce.scss b/scss/effects/icons/_icon-bounce.scss index 63e51fa..b91a840 100644 --- a/scss/effects/icons/_icon-bounce.scss +++ b/scss/effects/icons/_icon-bounce.scss @@ -6,12 +6,7 @@ padding-right: #{$spaceBetweenTextAndArrows}; @include prefixed(transition-duration, $mediumDuration); - &:before { - content: "\f087"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { @include prefixed(transform, translateZ(0)); @include prefixed(transition-duration, $mediumDuration); @include prefixed(transition-property, transform); @@ -22,7 +17,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { @include prefixed(transform, scale(1.5)); @include prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36)); } diff --git a/scss/effects/icons/_icon-buzz-out.scss b/scss/effects/icons/_icon-buzz-out.scss index 6437ecc..0e55fe6 100644 --- a/scss/effects/icons/_icon-buzz-out.scss +++ b/scss/effects/icons/_icon-buzz-out.scss @@ -44,15 +44,10 @@ @mixin icon-buzz-out { @include hacks(); position: relative; - padding-right: 2.2em; + padding-right: 0; @include prefixed(transition-duration, $mediumDuration); - &:before { - content: "\f023"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { @include prefixed(transform, translateZ(0)); } @@ -60,7 +55,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { @include prefixed(animation-name, #{$nameSpace}-icon-buzz-out); @include prefixed(animation-duration, .75s); @include prefixed(animation-timing-function, linear); diff --git a/scss/effects/icons/_icon-buzz.scss b/scss/effects/icons/_icon-buzz.scss index d434fb0..3d97b9b 100644 --- a/scss/effects/icons/_icon-buzz.scss +++ b/scss/effects/icons/_icon-buzz.scss @@ -12,15 +12,10 @@ @mixin icon-buzz { @include hacks(); position: relative; - padding-right: 2.2em; + padding-right: 0; @include prefixed(transition-duration, $mediumDuration); - &:before { - content: "\f017"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { @include prefixed(transform, translateZ(0)); } @@ -28,7 +23,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { @include prefixed(animation-name, #{$nameSpace}-icon-buzz); @include prefixed(animation-duration, .15s); @include prefixed(animation-timing-function, linear); diff --git a/scss/effects/icons/_icon-down.scss b/scss/effects/icons/_icon-down.scss index 9fbb8c4..13ad81c 100644 --- a/scss/effects/icons/_icon-down.scss +++ b/scss/effects/icons/_icon-down.scss @@ -17,12 +17,7 @@ position: relative; padding-right: #{$spaceBetweenTextAndArrows}; - &:before { - content: "\f01a"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { @include prefixed(transform, translateZ(0)); } @@ -30,7 +25,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { @include prefixed(animation-name, #{$nameSpace}-icon-down); @include prefixed(animation-duration, .75s); @include prefixed(animation-timing-function, ease-out); diff --git a/scss/effects/icons/_icon-drop.scss b/scss/effects/icons/_icon-drop.scss index 4b5e6a8..aa5ece7 100644 --- a/scss/effects/icons/_icon-drop.scss +++ b/scss/effects/icons/_icon-drop.scss @@ -22,13 +22,7 @@ position: relative; padding-right: #{$spaceBetweenTextAndArrows}; - &:before { - content: "\f041"; - position: absolute; - right: 1em; - opacity: 1; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { @include prefixed(transform, translateZ(0)); } @@ -36,7 +30,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { opacity: 0; @include prefixed(transition-duration, #{$mediumDuration}); @include prefixed(animation-name, #{$nameSpace}-icon-drop); diff --git a/scss/effects/icons/_icon-fade.scss b/scss/effects/icons/_icon-fade.scss index 7037dcc..90743d1 100644 --- a/scss/effects/icons/_icon-fade.scss +++ b/scss/effects/icons/_icon-fade.scss @@ -4,12 +4,7 @@ position: relative; padding-right: #{$spaceBetweenTextAndArrows}; - &:before { - content: "\f00c"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { @include prefixed(transform, translateZ(0)); @include prefixed(transition-duration, .5s); @include prefixed(transition-property, color); @@ -19,7 +14,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { color: #0F9E5E; } } diff --git a/scss/effects/icons/_icon-float-away.scss b/scss/effects/icons/_icon-float-away.scss index 5bbc0cd..33d97b4 100644 --- a/scss/effects/icons/_icon-float-away.scss +++ b/scss/effects/icons/_icon-float-away.scss @@ -16,16 +16,7 @@ position: relative; padding-right: #{$spaceBetweenTextAndArrows}; - &:before, - &:after { - content: "\f055"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; - } - - &:after { + .fa, .hover-icon { opacity: 0; @include prefixed(animation-duration, #{$slowDuration}); @include prefixed(animation-fill-mode, forwards); @@ -35,7 +26,7 @@ &:focus, &:active { - &:after { + .fa, .hover-icon { @include prefixed(animation-name, #{$nameSpace}-icon-float-away); @include prefixed(animation-timing-function, ease-out); } diff --git a/scss/effects/icons/_icon-float.scss b/scss/effects/icons/_icon-float.scss index 41e53dd..2de2721 100644 --- a/scss/effects/icons/_icon-float.scss +++ b/scss/effects/icons/_icon-float.scss @@ -2,15 +2,10 @@ @mixin icon-float { @include hacks(); position: relative; - padding-right: 2.2em; + padding-right: 0; @include prefixed(transition-duration, $mediumDuration); - &:before { - content: "\f01b"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { @include prefixed(transform, translateZ(0)); @include prefixed(transition-duration, $mediumDuration); @include prefixed(transition-property, transform); @@ -21,7 +16,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { @include prefixed(transform, translateY(-4px)); } } diff --git a/scss/effects/icons/_icon-forward.scss b/scss/effects/icons/_icon-forward.scss index 5248d43..69c5d3c 100644 --- a/scss/effects/icons/_icon-forward.scss +++ b/scss/effects/icons/_icon-forward.scss @@ -2,15 +2,10 @@ @mixin icon-forward { @include hacks(); position: relative; - padding-right: 2.2em; + padding-right: 0; @include prefixed(transition-duration, $fastDuration); - &:before { - content: "\f138"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { @include prefixed(transform, translateZ(0)); @include prefixed(transition-duration, $fastDuration); @include prefixed(transition-property, transform); @@ -21,7 +16,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { @include prefixed(transform, translateX(4px)); } } diff --git a/scss/effects/icons/_icon-grow-rotate.scss b/scss/effects/icons/_icon-grow-rotate.scss index 86086c9..3fde176 100644 --- a/scss/effects/icons/_icon-grow-rotate.scss +++ b/scss/effects/icons/_icon-grow-rotate.scss @@ -7,12 +7,7 @@ padding-right: #{$spaceBetweenTextAndArrows}; @include prefixed(transition-duration, $duration); - &:before { - content: "\f095"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { @include prefixed(transform, translateZ(0)); @include prefixed(transition-duration, $duration); @include prefixed(transition-property, transform); @@ -23,7 +18,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { @include prefixed(transform, scale(1.5) rotate(12deg)); } } diff --git a/scss/effects/icons/_icon-grow.scss b/scss/effects/icons/_icon-grow.scss index 0a053a5..6ccaacf 100644 --- a/scss/effects/icons/_icon-grow.scss +++ b/scss/effects/icons/_icon-grow.scss @@ -5,12 +5,7 @@ padding-right: #{$spaceBetweenTextAndArrows}; @include prefixed(transition-duration, $mediumDuration); - &:before { - content: "\f118"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { @include prefixed(transform, translateZ(0)); @include prefixed(transition-duration, $mediumDuration); @include prefixed(transition-property, transform); @@ -21,7 +16,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { @include prefixed(transform, scale(1.3) translateZ(0)); } } diff --git a/scss/effects/icons/_icon-hang.scss b/scss/effects/icons/_icon-hang.scss index f72680b..28825ac 100644 --- a/scss/effects/icons/_icon-hang.scss +++ b/scss/effects/icons/_icon-hang.scss @@ -20,15 +20,10 @@ @mixin icon-hang { @include hacks(); position: relative; - padding-right: 2.2em; + padding-right: 0; @include prefixed(transition-duration, $mediumDuration); - &:before { - content: "\f078"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { @include prefixed(transform, translateZ(0)); } @@ -36,7 +31,7 @@ &:focus, &:active { - &:before { + .fa, .hover-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"); diff --git a/scss/effects/icons/_icon-pop.scss b/scss/effects/icons/_icon-pop.scss index 7864e44..1c48821 100644 --- a/scss/effects/icons/_icon-pop.scss +++ b/scss/effects/icons/_icon-pop.scss @@ -11,12 +11,7 @@ padding-right: #{$spaceBetweenTextAndArrows}; @include prefixed(transition-duration, $mediumDuration); - &:before { - content: "\f005"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { @include prefixed(transform, translateZ(0)); @include prefixed(transition-duration, $mediumDuration); @include prefixed(transition-property, transform); @@ -27,7 +22,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { @include prefixed(animation-name, #{$nameSpace}-icon-pop); @include prefixed(animation-duration, $mediumDuration); @include prefixed(animation-timing-function, linear); diff --git a/scss/effects/icons/_icon-pulse-grow.scss b/scss/effects/icons/_icon-pulse-grow.scss index fb76440..d468074 100644 --- a/scss/effects/icons/_icon-pulse-grow.scss +++ b/scss/effects/icons/_icon-pulse-grow.scss @@ -10,12 +10,7 @@ position: relative; padding-right: #{$spaceBetweenTextAndArrows}; - &:before { - content: "\f015"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { @include prefixed(transform, translateZ(0)); @include prefixed(transition-timing-function, ease-out); } @@ -24,7 +19,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { @include prefixed(animation-name, #{$nameSpace}-icon-pulse-grow); @include prefixed(animation-duration, $mediumDuration); @include prefixed(animation-timing-function, linear); diff --git a/scss/effects/icons/_icon-pulse-shrink.scss b/scss/effects/icons/_icon-pulse-shrink.scss index 7d8f90b..d828bc4 100644 --- a/scss/effects/icons/_icon-pulse-shrink.scss +++ b/scss/effects/icons/_icon-pulse-shrink.scss @@ -10,12 +10,7 @@ position: relative; padding-right: #{$spaceBetweenTextAndArrows}; - &:before { - content: "\f015"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { @include prefixed(transform, translateZ(0)); @include prefixed(transition-timing-function, ease-out); } @@ -24,7 +19,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { @include prefixed(animation-name, #{$nameSpace}-icon-pulse-shrink); @include prefixed(animation-duration, $mediumDuration); @include prefixed(animation-timing-function, linear); diff --git a/scss/effects/icons/_icon-pulse.scss b/scss/effects/icons/_icon-pulse.scss index 7f20ee6..a2a8a3b 100644 --- a/scss/effects/icons/_icon-pulse.scss +++ b/scss/effects/icons/_icon-pulse.scss @@ -14,12 +14,7 @@ position: relative; padding-right: #{$spaceBetweenTextAndArrows}; - &:before { - content: "\f015"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { @include prefixed(transform, translateZ(0)); @include prefixed(transition-timing-function, ease-out); } @@ -28,7 +23,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { @include prefixed(animation-name, #{$nameSpace}-icon-pulse); @include prefixed(animation-duration, 1s); @include prefixed(animation-timing-function, linear); diff --git a/scss/effects/icons/_icon-push.scss b/scss/effects/icons/_icon-push.scss index ce1f6af..1f99612 100644 --- a/scss/effects/icons/_icon-push.scss +++ b/scss/effects/icons/_icon-push.scss @@ -11,12 +11,7 @@ padding-right: #{$spaceBetweenTextAndArrows}; @include prefixed(transition-duration, $mediumDuration); - &:before { - content: "\f006"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { @include prefixed(transform, translateZ(0)); @include prefixed(transition-duration, $mediumDuration); @include prefixed(transition-property, transform); @@ -27,7 +22,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { @include prefixed(animation-name, #{$nameSpace}-icon-push); @include prefixed(animation-duration, $mediumDuration); @include prefixed(animation-timing-function, linear); diff --git a/scss/effects/icons/_icon-rotate.scss b/scss/effects/icons/_icon-rotate.scss index bdea1eb..3ba3c82 100644 --- a/scss/effects/icons/_icon-rotate.scss +++ b/scss/effects/icons/_icon-rotate.scss @@ -7,12 +7,7 @@ padding-right: #{$spaceBetweenTextAndArrows}; @include prefixed(transition-duration, $duration); - &:before { - content: "\f0c6"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { @include prefixed(transform, translateZ(0)); @include prefixed(transition-duration, $duration); @include prefixed(transition-property, transform); @@ -23,7 +18,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { @include prefixed(transform, rotate(20deg)); } } diff --git a/scss/effects/icons/_icon-shrink.scss b/scss/effects/icons/_icon-shrink.scss index d611456..374d0cf 100644 --- a/scss/effects/icons/_icon-shrink.scss +++ b/scss/effects/icons/_icon-shrink.scss @@ -5,12 +5,7 @@ padding-right: #{$spaceBetweenTextAndArrows}; @include prefixed(transition-duration, $mediumDuration); - &:before { - content: "\f119"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { @include prefixed(transform, translateZ(0)); @include prefixed(transition-duration, $mediumDuration); @include prefixed(transition-property, transform); @@ -21,7 +16,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { @include prefixed(transform, scale(.8)); } } diff --git a/scss/effects/icons/_icon-sink-away.scss b/scss/effects/icons/_icon-sink-away.scss index a1378df..85e4081 100644 --- a/scss/effects/icons/_icon-sink-away.scss +++ b/scss/effects/icons/_icon-sink-away.scss @@ -16,17 +16,8 @@ position: relative; padding-right: #{$spaceBetweenTextAndArrows}; - &:before, - &:after { - content: "\f056"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { @include prefixed(transform, translateZ(0)); - } - - &:after { opacity: 0; @include prefixed(animation-duration, #{$slowDuration}); @include prefixed(animation-fill-mode, forwards); @@ -36,7 +27,7 @@ &:focus, &:active { - &:after { + .fa, .hover-icon { @include prefixed(animation-name, #{$nameSpace}-icon-sink-away); @include prefixed(animation-timing-function, ease-out); } diff --git a/scss/effects/icons/_icon-sink.scss b/scss/effects/icons/_icon-sink.scss index 5087f72..4fcd3bf 100644 --- a/scss/effects/icons/_icon-sink.scss +++ b/scss/effects/icons/_icon-sink.scss @@ -2,15 +2,10 @@ @mixin icon-sink { @include hacks(); position: relative; - padding-right: 2.2em; + padding-right: 0; @include prefixed(transition-duration, $mediumDuration); - &:before { - content: "\f01a"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { @include prefixed(transform, translateZ(0)); @include prefixed(transition-duration, $mediumDuration); @include prefixed(transition-property, transform); @@ -21,7 +16,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { @include prefixed(transform, translateY(4px)); } } diff --git a/scss/effects/icons/_icon-spin.scss b/scss/effects/icons/_icon-spin.scss index 2b5d9d5..fb6959b 100644 --- a/scss/effects/icons/_icon-spin.scss +++ b/scss/effects/icons/_icon-spin.scss @@ -2,14 +2,9 @@ @mixin icon-spin { @include hacks(); position: relative; - padding-right: 2.2em; + padding-right: 0; - &:before { - content: "\f021"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { @include prefixed(transition-duration, 1s); @include prefixed(transition-property, transform); @include prefixed(transition-timing-function, ease-in-out); @@ -19,7 +14,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { @include prefixed(transform, rotate(360deg)); } } diff --git a/scss/effects/icons/_icon-up.scss b/scss/effects/icons/_icon-up.scss index 4220889..6592a45 100644 --- a/scss/effects/icons/_icon-up.scss +++ b/scss/effects/icons/_icon-up.scss @@ -15,14 +15,9 @@ @mixin icon-up { @include hacks(); position: relative; - padding-right: 2.2em; + padding-right: 0; - &:before { - content: "\f01b"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { @include prefixed(transform, translateZ(0)); } @@ -30,7 +25,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { @include prefixed(animation-name, #{$nameSpace}-icon-up); @include prefixed(animation-duration, .75s); @include prefixed(animation-timing-function, ease-out); diff --git a/scss/effects/icons/_icon-wobble-horizontal.scss b/scss/effects/icons/_icon-wobble-horizontal.scss index 94f850e..fbb6d87 100644 --- a/scss/effects/icons/_icon-wobble-horizontal.scss +++ b/scss/effects/icons/_icon-wobble-horizontal.scss @@ -28,15 +28,10 @@ @mixin icon-wobble-horizontal { @include hacks(); position: relative; - padding-right: 2.2em; + padding-right: 0; @include prefixed(transition-duration, $mediumDuration); - &:before { - content: "\f061"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { @include prefixed(transform, translateZ(0)); } @@ -44,7 +39,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { @include prefixed(animation-name, #{$nameSpace}-icon-wobble-horizontal); @include prefixed(animation-duration, 1s); @include prefixed(animation-timing-function, ease-in-out); diff --git a/scss/effects/icons/_icon-wobble-vertical.scss b/scss/effects/icons/_icon-wobble-vertical.scss index 49d12e0..8591888 100644 --- a/scss/effects/icons/_icon-wobble-vertical.scss +++ b/scss/effects/icons/_icon-wobble-vertical.scss @@ -28,15 +28,10 @@ @mixin icon-wobble-vertical { @include hacks(); position: relative; - padding-right: 2.2em; + padding-right: 0; @include prefixed(transition-duration, $mediumDuration); - &:before { - content: "\f062"; - position: absolute; - right: 1em; - padding: 0 1px; - font-family: FontAwesome; + .fa, .hover-icon { @include prefixed(transform, translateZ(0)); } @@ -44,7 +39,7 @@ &:focus, &:active { - &:before { + .fa, .hover-icon { @include prefixed(animation-name, #{$nameSpace}-icon-wobble-vertical); @include prefixed(animation-duration, 1s); @include prefixed(animation-timing-function, ease-in-out);