mirror of https://github.com/IanLunn/Hover.git
Merge kvnxdev-master
This commit is contained in:
IanLunn
commit
fbe80d33f7
49
README.md
49
README.md
|
|
@ -13,7 +13,7 @@ A collection of CSS3 powered hover effects to be applied to links, buttons, logo
|
|||
- [A. Copy and Paste an Effect](#a-copy-and-paste-an-effect)
|
||||
- [B. Reference Hover.css](#b-reference-hovercss)
|
||||
- [A Note on the display property](#a-note-on-the-display-property)
|
||||
- [Using FontAwesome with Icon Effects](#using-fontawesome-with-icon-effects)
|
||||
- [Using Icon Effects](#using-icon-effects)
|
||||
- [What's Included?](#whats-included)
|
||||
- [css](#css)
|
||||
- [scss/less](#scssless)
|
||||
|
|
@ -126,41 +126,44 @@ Should you wish to override this behavior, either remove the above CSS from Hove
|
|||
|
||||
For more information about Transformable elements, see the [CSS Transforms Module](http://www.w3.org/TR/css3-transforms/#transformable-element).
|
||||
|
||||
### Using FontAwesome with Icon Effects
|
||||
### Using Icon Effects
|
||||
|
||||
Hover.css uses [FontAwesome](https://fortawesome.github.io/Font-Awesome/) for its icon effects. For these effects to work, a reference to the FontAwesome stylesheet must be added by placing the following in the `<head></head>` of your web page:
|
||||
To add a Hover.css icon, place the icon HTML inside the element that a Hover.css effect is applied to. For example:
|
||||
|
||||
```
|
||||
<a href="#" class="hvr-icon-forward">
|
||||
Icon Forward
|
||||
<i class="fa fa-chevron-circle-right hvr-icon"></i>
|
||||
</a>
|
||||
```
|
||||
|
||||
In the above code, we have given a link element a class of `hvr-icon-forward` which will make an icon move forward when the link is hovered over. The icon itself is given a class of `hvr-icon` to let Hover.css know that this is the icon we want to animate. In this example, our icon is from FontAwesome, which we've loaded into the `<head></head>` of our web page as per FontAwesome's instructions, like so:
|
||||
|
||||
```html
|
||||
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
|
||||
```
|
||||
|
||||
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):
|
||||
Note: As of Hover.css v2.3.0 you can use any method you like for adding icons (previously, only FontAwesome was supported out-of-the-box.) For example, you could use another icon library or instead, use an image like so:
|
||||
|
||||
```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;
|
||||
}
|
||||
```
|
||||
<a href="#" class="hvr-icon-spin">
|
||||
Icon Spin
|
||||
<img src="myicon.svg" class="hvr-icon" />
|
||||
</a>
|
||||
```
|
||||
|
||||
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).
|
||||
Here, the image will act as the icon because it has the `hvr-icon` class applied to it, and when hovered over, the icon will spin as defined by the `hvr-icon-spin` class on the parent element.
|
||||
|
||||
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):
|
||||
Position of the icon is entirely in your control. You could place it before the text, like so:
|
||||
|
||||
```css
|
||||
.hvr-icon-forward:before {
|
||||
content: "\f001";
|
||||
}
|
||||
```
|
||||
<a href="#" class="hvr-icon-spin">
|
||||
<img src="myicon.svg" class="hvr-icon" />
|
||||
Icon Spin
|
||||
</a>
|
||||
```
|
||||
|
||||
The Icon Forward effect will then display a musical note that moves forward when hovered over (instead of the default arrow in a circle).
|
||||
Or use custom CSS to position the icon as you see fit.
|
||||
|
||||
## What's Included?
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
308
css/hover.css
308
css/hover.css
|
|
@ -1,6 +1,6 @@
|
|||
/*!
|
||||
* Hover.css (http://ianlunn.github.io/Hover/)
|
||||
* Version: 2.2.2
|
||||
* Version: 2.3.0
|
||||
* Author: Ian Lunn @IanLunn
|
||||
* Author URL: http://ianlunn.co.uk/
|
||||
* Github: https://github.com/IanLunn/Hover
|
||||
|
|
@ -2858,17 +2858,10 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
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 .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.1s;
|
||||
|
|
@ -2878,7 +2871,7 @@
|
|||
-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 .hvr-icon, .hvr-icon-back:focus .hvr-icon, .hvr-icon-back:active .hvr-icon {
|
||||
-webkit-transform: translateX(-4px);
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
|
|
@ -2890,17 +2883,10 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
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 .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.1s;
|
||||
|
|
@ -2910,7 +2896,7 @@
|
|||
-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 .hvr-icon, .hvr-icon-forward:focus .hvr-icon, .hvr-icon-forward:active .hvr-icon {
|
||||
-webkit-transform: translateX(4px);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
|
@ -2949,19 +2935,12 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
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 .hvr-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 .hvr-icon, .hvr-icon-down:focus .hvr-icon, .hvr-icon-down:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-down;
|
||||
animation-name: hvr-icon-down;
|
||||
-webkit-animation-duration: 0.75s;
|
||||
|
|
@ -3004,19 +2983,12 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
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 .hvr-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 .hvr-icon, .hvr-icon-up:focus .hvr-icon, .hvr-icon-up:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-up;
|
||||
animation-name: hvr-icon-up;
|
||||
-webkit-animation-duration: 0.75s;
|
||||
|
|
@ -3032,15 +3004,8 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
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 .hvr-icon {
|
||||
-webkit-transition-duration: 1s;
|
||||
transition-duration: 1s;
|
||||
-webkit-transition-property: transform;
|
||||
|
|
@ -3048,7 +3013,7 @@
|
|||
-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 .hvr-icon, .hvr-icon-spin:focus .hvr-icon, .hvr-icon-spin:active .hvr-icon {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
|
@ -3089,20 +3054,12 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
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 .hvr-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 .hvr-icon, .hvr-icon-drop:focus .hvr-icon, .hvr-icon-drop:active .hvr-icon {
|
||||
opacity: 0;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
|
|
@ -3127,15 +3084,8 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
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 .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.5s;
|
||||
|
|
@ -3143,7 +3093,7 @@
|
|||
-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 .hvr-icon, .hvr-icon-fade:focus .hvr-icon, .hvr-icon-fade:active .hvr-icon {
|
||||
color: #0F9E5E;
|
||||
}
|
||||
|
||||
|
|
@ -3175,24 +3125,16 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
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 .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-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 .hvr-icon, .hvr-icon-float-away:focus .hvr-icon, .hvr-icon-float-away:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-float-away;
|
||||
animation-name: hvr-icon-float-away;
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
|
|
@ -3227,26 +3169,16 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
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 .hvr-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 .hvr-icon, .hvr-icon-sink-away:focus .hvr-icon, .hvr-icon-sink-away:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-sink-away;
|
||||
animation-name: hvr-icon-sink-away;
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
|
|
@ -3260,17 +3192,10 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
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 .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -3280,7 +3205,7 @@
|
|||
-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 .hvr-icon, .hvr-icon-grow:focus .hvr-icon, .hvr-icon-grow:active .hvr-icon {
|
||||
-webkit-transform: scale(1.3) translateZ(0);
|
||||
transform: scale(1.3) translateZ(0);
|
||||
}
|
||||
|
|
@ -3292,17 +3217,10 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
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 .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -3312,7 +3230,7 @@
|
|||
-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 .hvr-icon, .hvr-icon-shrink:focus .hvr-icon, .hvr-icon-shrink:active .hvr-icon {
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
|
@ -3344,21 +3262,14 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
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 .hvr-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 .hvr-icon, .hvr-icon-pulse:focus .hvr-icon, .hvr-icon-pulse:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-pulse;
|
||||
animation-name: hvr-icon-pulse;
|
||||
-webkit-animation-duration: 1s;
|
||||
|
|
@ -3388,21 +3299,14 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
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 .hvr-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 .hvr-icon, .hvr-icon-pulse-grow:focus .hvr-icon, .hvr-icon-pulse-grow:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-pulse-grow;
|
||||
animation-name: hvr-icon-pulse-grow;
|
||||
-webkit-animation-duration: 0.3s;
|
||||
|
|
@ -3434,21 +3338,14 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
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 .hvr-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 .hvr-icon, .hvr-icon-pulse-shrink:focus .hvr-icon, .hvr-icon-pulse-shrink:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-pulse-shrink;
|
||||
animation-name: hvr-icon-pulse-shrink;
|
||||
-webkit-animation-duration: 0.3s;
|
||||
|
|
@ -3480,17 +3377,10 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
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 .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -3500,7 +3390,7 @@
|
|||
-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 .hvr-icon, .hvr-icon-push:focus .hvr-icon, .hvr-icon-push:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-push;
|
||||
animation-name: hvr-icon-push;
|
||||
-webkit-animation-duration: 0.3s;
|
||||
|
|
@ -3530,17 +3420,10 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
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 .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -3550,7 +3433,7 @@
|
|||
-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 .hvr-icon, .hvr-icon-pop:focus .hvr-icon, .hvr-icon-pop:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-pop;
|
||||
animation-name: hvr-icon-pop;
|
||||
-webkit-animation-duration: 0.3s;
|
||||
|
|
@ -3568,17 +3451,10 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
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 .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -3588,7 +3464,7 @@
|
|||
-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 .hvr-icon, .hvr-icon-bounce:focus .hvr-icon, .hvr-icon-bounce:active .hvr-icon {
|
||||
-webkit-transform: scale(1.5);
|
||||
transform: scale(1.5);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
|
||||
|
|
@ -3602,17 +3478,10 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
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 .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -3622,7 +3491,7 @@
|
|||
-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 .hvr-icon, .hvr-icon-rotate:focus .hvr-icon, .hvr-icon-rotate:active .hvr-icon {
|
||||
-webkit-transform: rotate(20deg);
|
||||
transform: rotate(20deg);
|
||||
}
|
||||
|
|
@ -3634,17 +3503,10 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
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 .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -3654,7 +3516,7 @@
|
|||
-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 .hvr-icon, .hvr-icon-grow-rotate:focus .hvr-icon, .hvr-icon-grow-rotate:active .hvr-icon {
|
||||
-webkit-transform: scale(1.5) rotate(12deg);
|
||||
transform: scale(1.5) rotate(12deg);
|
||||
}
|
||||
|
|
@ -3666,17 +3528,10 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
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 .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -3686,7 +3541,7 @@
|
|||
-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 .hvr-icon, .hvr-icon-float:focus .hvr-icon, .hvr-icon-float:active .hvr-icon {
|
||||
-webkit-transform: translateY(-4px);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
|
@ -3698,17 +3553,10 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
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 .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -3718,7 +3566,7 @@
|
|||
-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 .hvr-icon, .hvr-icon-sink:focus .hvr-icon, .hvr-icon-sink:active .hvr-icon {
|
||||
-webkit-transform: translateY(4px);
|
||||
transform: translateY(4px);
|
||||
}
|
||||
|
|
@ -3770,21 +3618,14 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
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 .hvr-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 .hvr-icon, .hvr-icon-bob:focus .hvr-icon, .hvr-icon-bob:active .hvr-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;
|
||||
|
|
@ -3848,21 +3689,14 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
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 .hvr-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 .hvr-icon, .hvr-icon-hang:focus .hvr-icon, .hvr-icon-hang:active .hvr-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;
|
||||
|
|
@ -3938,21 +3772,14 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
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 .hvr-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 .hvr-icon, .hvr-icon-wobble-horizontal:focus .hvr-icon, .hvr-icon-wobble-horizontal:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-wobble-horizontal;
|
||||
animation-name: hvr-icon-wobble-horizontal;
|
||||
-webkit-animation-duration: 1s;
|
||||
|
|
@ -4022,21 +3849,14 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
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 .hvr-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 .hvr-icon, .hvr-icon-wobble-vertical:focus .hvr-icon, .hvr-icon-wobble-vertical:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-wobble-vertical;
|
||||
animation-name: hvr-icon-wobble-vertical;
|
||||
-webkit-animation-duration: 1s;
|
||||
|
|
@ -4074,21 +3894,14 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
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 .hvr-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 .hvr-icon, .hvr-icon-buzz:focus .hvr-icon, .hvr-icon-buzz:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-buzz;
|
||||
animation-name: hvr-icon-buzz;
|
||||
-webkit-animation-duration: 0.15s;
|
||||
|
|
@ -4190,21 +4003,14 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
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 .hvr-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 .hvr-icon, .hvr-icon-buzz-out:focus .hvr-icon, .hvr-icon-buzz-out:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-buzz-out;
|
||||
animation-name: hvr-icon-buzz-out;
|
||||
-webkit-animation-duration: 0.75s;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
113
index.html
113
index.html
|
|
@ -8,7 +8,7 @@
|
|||
<title>Hover.css - A collection of CSS3 powered hover effects</title>
|
||||
<link href="css/demo-page.css" rel="stylesheet" media="all">
|
||||
<link href="css/hover.css" rel="stylesheet" media="all">
|
||||
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
|
||||
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -113,35 +113,90 @@
|
|||
|
||||
<h2>Icons</h2>
|
||||
|
||||
<small>Font icons courtesy of <a href="https://fortawesome.github.io/Font-Awesome/">FontAwesome</a>. <a href="https://github.com/IanLunn/Hover/#using-fontawesome-with-icon-effects">How to use FontAwesome icons</a> with Hover.css.</small>
|
||||
<small>Demo font icons courtesy of <a href="https://fortawesome.github.io/Font-Awesome/">FontAwesome</a>. <a href="https://github.com/IanLunn/Hover/#using-icon-effects">How to use icons</a> with Hover.css.</small>
|
||||
|
||||
<a href="#" class="hvr-icon-back">Icon Back</a>
|
||||
<a href="#" class="hvr-icon-forward">Icon Forward</a>
|
||||
<a href="#" class="hvr-icon-down">Icon Down</a>
|
||||
<a href="#" class="hvr-icon-up">Icon Up</a>
|
||||
<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-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>
|
||||
<a href="#" class="hvr-icon-shrink">Icon Shrink</a>
|
||||
<a href="#" class="hvr-icon-pulse">Icon Pulse</a>
|
||||
<a href="#" class="hvr-icon-pulse-grow">Icon Pulse Grow</a>
|
||||
<a href="#" class="hvr-icon-pulse-shrink">Icon Pulse Shrink</a>
|
||||
<a href="#" class="hvr-icon-push">Icon Push</a>
|
||||
<a href="#" class="hvr-icon-pop">Icon Pop</a>
|
||||
<a href="#" class="hvr-icon-bounce">Icon Bounce</a>
|
||||
<a href="#" class="hvr-icon-rotate">Icon Rotate</a>
|
||||
<a href="#" class="hvr-icon-grow-rotate">Icon Grow Rotate</a>
|
||||
<a href="#" class="hvr-icon-float">Icon Float</a>
|
||||
<a href="#" class="hvr-icon-sink">Icon Sink</a>
|
||||
<a href="#" class="hvr-icon-bob">Icon Bob</a>
|
||||
<a href="#" class="hvr-icon-hang">Icon Hang</a>
|
||||
<a href="#" class="hvr-icon-wobble-horizontal">Icon Wobble Horizontal</a>
|
||||
<a href="#" class="hvr-icon-wobble-vertical">Icon Wobble Vertical</a>
|
||||
<a href="#" class="hvr-icon-buzz">Icon Buzz</a>
|
||||
<a href="#" class="hvr-icon-buzz-out">Icon Buzz Out</a>
|
||||
<a href="#" class="hvr-icon-back">
|
||||
<i class="fa fa-chevron-circle-left hvr-icon"></i> Icon Back
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-forward">
|
||||
Icon Forward
|
||||
<i class="fa fa-chevron-circle-right hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-down">
|
||||
Icon Down <i class="fa fa-arrow-circle-o-down hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-up">
|
||||
Icon Up <i class="fa fa-arrow-circle-o-up hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-spin">
|
||||
Icon Spin <i class="fa fa-refresh hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-drop">
|
||||
Icon Drop <i class="fa fa-tint hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-fade">
|
||||
Icon Fade <i class="fa fa-check hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-float-away">
|
||||
Icon Float Away <i class="fa fa-plus-circle hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-sink-away">
|
||||
Icon Sink Away <i class="fa fa-minus-circle hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-grow">
|
||||
Icon Grow <i class="fa fa-smile-o hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-shrink">
|
||||
Icon Shrink <i class="fa fa-frown-o hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-pulse">
|
||||
Icon Pulse <i class="fa fa-home hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-pulse-grow">
|
||||
Icon Pulse Grow <i class="fa fa-home hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-pulse-shrink">
|
||||
Icon Pulse Shrink <i class="fa fa-home hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-push">
|
||||
Icon Push <i class="fa fa-star-o hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-pop">
|
||||
Icon Pop <i class="fa fa-star hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-bounce">
|
||||
Icon Bounce <i class="fa fa-thumbs-o-up hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-rotate">
|
||||
Icon Rotate <i class="fa fa-paperclip hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-grow-rotate">
|
||||
Icon Grow Rotate <i class="fa fa-phone hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-float">
|
||||
Icon Float <i class="fa fa-arrow-circle-o-up hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-sink">
|
||||
Icon Sink <i class="fa fa-arrow-circle-o-down hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-bob">
|
||||
Icon Bob <i class="fa fa-chevron-up hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-hang">
|
||||
Icon Hang <i class="fa fa-chevron-down hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-wobble-horizontal">
|
||||
Icon Wobble Horizontal <i class="fa fa-arrow-right hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-wobble-vertical">
|
||||
Icon Wobble Vertical <i class="fa fa-arrow-up hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-buzz">
|
||||
Icon Buzz <i class="fa fa-clock-o hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-buzz-out">
|
||||
Icon Buzz Out <i class="fa fa-lock hvr-icon"></i>
|
||||
</a>
|
||||
|
||||
|
||||
<h2>Border Transitions</h2>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,9 @@
|
|||
/* Icon Back */
|
||||
.icon-back() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-left: 2.2em;
|
||||
.prefixed(transition-duration, @fastDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f137";
|
||||
position: absolute;
|
||||
left: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @fastDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
|
@ -21,7 +14,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateX(-4px));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,16 +19,9 @@
|
|||
|
||||
.icon-bob() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f077";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -36,7 +29,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-bob-float, @{nameSpace}-icon-bob");
|
||||
.prefixed(animation-duration, ~".3s, 1.5s");
|
||||
.prefixed(animation-delay, ~"0s, .3s");
|
||||
|
|
|
|||
|
|
@ -7,16 +7,9 @@
|
|||
|
||||
.icon-bounce-out() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f088";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
|
@ -27,7 +20,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, scale(.9));
|
||||
.prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,16 +2,9 @@
|
|||
|
||||
.icon-bounce() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f087";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
|
@ -22,7 +15,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, scale(1.5));
|
||||
.prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,16 +43,9 @@
|
|||
|
||||
.icon-buzz-out() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f023";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -60,7 +53,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-buzz-out");
|
||||
.prefixed(animation-duration, .75s);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
|
|
|
|||
|
|
@ -11,16 +11,9 @@
|
|||
|
||||
.icon-buzz() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f017";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -28,7 +21,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-buzz");
|
||||
.prefixed(animation-duration, .15s);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
|
|
|
|||
|
|
@ -14,15 +14,8 @@
|
|||
/* Icon Down */
|
||||
.icon-down() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
|
||||
&:before {
|
||||
content: "\f01a";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -30,7 +23,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-down");
|
||||
.prefixed(animation-duration, .75s);
|
||||
.prefixed(animation-timing-function, ease-out);
|
||||
|
|
|
|||
|
|
@ -19,16 +19,8 @@
|
|||
/* Icon Drop */
|
||||
.icon-drop() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
|
||||
&:before {
|
||||
content: "\f041";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
opacity: 1;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -36,7 +28,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
opacity: 0;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-drop");
|
||||
|
|
|
|||
|
|
@ -1,15 +1,8 @@
|
|||
/* Icon Fade */
|
||||
.icon-fade() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
|
||||
&:before {
|
||||
content: "\f00c";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, .5s);
|
||||
.prefixed(transition-property, color);
|
||||
|
|
@ -19,7 +12,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
color: #0F9E5E;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,20 +13,9 @@
|
|||
/* Icon Float Away */
|
||||
.icon-float-away() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "\f055";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 0;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(animation-duration, @slowDuration);
|
||||
.prefixed(animation-fill-mode, forwards);
|
||||
}
|
||||
|
|
@ -35,7 +24,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:after {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-float-away");
|
||||
.prefixed(animation-timing-function, ease-out);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,9 @@
|
|||
/* Icon Float */
|
||||
.icon-float() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f01b";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
|
@ -21,7 +14,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateY(-4px));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,9 @@
|
|||
/* Icon Forward */
|
||||
.icon-forward() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
.prefixed(transition-duration, @fastDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f138";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @fastDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
|
@ -21,7 +14,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateX(4px));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,16 +3,9 @@
|
|||
@duration: @mediumDuration;
|
||||
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
.prefixed(transition-duration, @duration);
|
||||
|
||||
&:before {
|
||||
content: "\f095";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @duration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
|
@ -23,7 +16,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, scale(1.5) rotate(12deg));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,9 @@
|
|||
/* Icon Grow */
|
||||
.icon-grow() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f118";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
|
@ -21,7 +14,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, scale(1.3) translateZ(0));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,16 +19,9 @@
|
|||
|
||||
.icon-hang() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f078";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -36,7 +29,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-hang-sink, @{nameSpace}-icon-hang");
|
||||
.prefixed(animation-duration, ~".3s, 1.5s");
|
||||
.prefixed(animation-delay, ~"0s, .3s");
|
||||
|
|
|
|||
|
|
@ -7,16 +7,9 @@
|
|||
|
||||
.icon-pop() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f005";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
|
@ -27,7 +20,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-pop");
|
||||
.prefixed(animation-duration, @mediumDuration);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
|
|
|
|||
|
|
@ -7,15 +7,8 @@
|
|||
|
||||
.icon-pulse-grow() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
|
||||
&:before {
|
||||
content: "\f015";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
|
@ -24,7 +17,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-pulse-grow");
|
||||
.prefixed(animation-duration, @mediumDuration);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
|
|
|
|||
|
|
@ -7,15 +7,8 @@
|
|||
|
||||
.icon-pulse-shrink() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
|
||||
&:before {
|
||||
content: "\f015";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
|
@ -24,7 +17,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-pulse-shrink");
|
||||
.prefixed(animation-duration, @mediumDuration);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
|
|
|
|||
|
|
@ -11,15 +11,8 @@
|
|||
|
||||
.icon-pulse() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
|
||||
&:before {
|
||||
content: "\f015";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
|
@ -28,7 +21,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-pulse");
|
||||
.prefixed(animation-duration, 1s);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
|
|
|
|||
|
|
@ -7,16 +7,9 @@
|
|||
|
||||
.icon-push() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f006";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
|
@ -27,7 +20,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-push");
|
||||
.prefixed(animation-duration, @mediumDuration);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
|
|
|
|||
|
|
@ -3,16 +3,9 @@
|
|||
@duration: @mediumDuration;
|
||||
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
.prefixed(transition-duration, @duration);
|
||||
|
||||
&:before {
|
||||
content: "\f0c6";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @duration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
|
@ -23,7 +16,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, rotate(20deg));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,9 @@
|
|||
/* Icon Shrink */
|
||||
.icon-shrink() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f119";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
|
@ -21,7 +14,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, scale(.8));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,21 +13,9 @@
|
|||
/* Icon Sink Away */
|
||||
.icon-sink-away() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "\f056";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 0;
|
||||
.prefixed(animation-duration, @slowDuration);
|
||||
.prefixed(animation-fill-mode, forwards);
|
||||
}
|
||||
|
|
@ -36,7 +24,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:after {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-sink-away");
|
||||
.prefixed(animation-timing-function, ease-out);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,9 @@
|
|||
/* Icon Sink */
|
||||
.icon-sink() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f01a";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
|
@ -21,7 +14,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateY(4px));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,8 @@
|
|||
/* Icon Spin */
|
||||
.icon-spin() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
|
||||
&:before {
|
||||
content: "\f021";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
.prefixed(transition-duration, 1s);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-timing-function, ease-in-out);
|
||||
|
|
@ -19,7 +12,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, rotate(360deg));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,15 +14,8 @@
|
|||
/* Icon Up */
|
||||
.icon-up() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
|
||||
&:before {
|
||||
content: "\f01b";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -30,7 +23,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-up");
|
||||
.prefixed(animation-duration, .75s);
|
||||
.prefixed(animation-timing-function, ease-out);
|
||||
|
|
|
|||
|
|
@ -27,16 +27,9 @@
|
|||
|
||||
.icon-wobble-horizontal() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f061";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -44,7 +37,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-wobble-horizontal");
|
||||
.prefixed(animation-duration, 1s);
|
||||
.prefixed(animation-timing-function, ease-in-out);
|
||||
|
|
|
|||
|
|
@ -27,16 +27,9 @@
|
|||
|
||||
.icon-wobble-vertical() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f062";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -44,7 +37,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-wobble-vertical");
|
||||
.prefixed(animation-duration, 1s);
|
||||
.prefixed(animation-timing-function, ease-in-out);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/*!
|
||||
* Hover.css (http://ianlunn.github.io/Hover/)
|
||||
* Version: 2.2.2
|
||||
* Version: 2.3.0
|
||||
* Author: Ian Lunn @IanLunn
|
||||
* Author URL: http://ianlunn.co.uk/
|
||||
* Github: https://github.com/IanLunn/Hover
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "hover.css",
|
||||
"author": "Ian Lunn",
|
||||
"version": "2.2.2",
|
||||
"version": "2.3.0",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/IanLunn/Hover"
|
||||
|
|
|
|||
|
|
@ -1,16 +1,9 @@
|
|||
/* Icon Back */
|
||||
@mixin icon-back {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-left: 2.2em;
|
||||
@include prefixed(transition-duration, $fastDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f137";
|
||||
position: absolute;
|
||||
left: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-duration, $fastDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
|
@ -21,7 +14,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateX(-4px));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,16 +19,9 @@
|
|||
|
||||
@mixin icon-bob {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f077";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -36,7 +29,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.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");
|
||||
|
|
|
|||
|
|
@ -7,16 +7,9 @@
|
|||
|
||||
@mixin icon-bounce-out {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f088";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
|
@ -27,7 +20,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, scale(.9));
|
||||
@include prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,16 +2,9 @@
|
|||
|
||||
@mixin icon-bounce {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f087";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
|
@ -22,7 +15,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, scale(1.5));
|
||||
@include prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,16 +43,9 @@
|
|||
|
||||
@mixin icon-buzz-out {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f023";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -60,7 +53,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
@include prefixed(animation-name, #{$nameSpace}-icon-buzz-out);
|
||||
@include prefixed(animation-duration, .75s);
|
||||
@include prefixed(animation-timing-function, linear);
|
||||
|
|
|
|||
|
|
@ -11,16 +11,9 @@
|
|||
|
||||
@mixin icon-buzz {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f017";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -28,7 +21,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
@include prefixed(animation-name, #{$nameSpace}-icon-buzz);
|
||||
@include prefixed(animation-duration, .15s);
|
||||
@include prefixed(animation-timing-function, linear);
|
||||
|
|
|
|||
|
|
@ -14,15 +14,8 @@
|
|||
/* Icon Down */
|
||||
@mixin icon-down {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
|
||||
&:before {
|
||||
content: "\f01a";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -30,7 +23,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
@include prefixed(animation-name, #{$nameSpace}-icon-down);
|
||||
@include prefixed(animation-duration, .75s);
|
||||
@include prefixed(animation-timing-function, ease-out);
|
||||
|
|
|
|||
|
|
@ -19,16 +19,8 @@
|
|||
/* Icon Drop */
|
||||
@mixin icon-drop {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
|
||||
&:before {
|
||||
content: "\f041";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
opacity: 1;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -36,7 +28,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
opacity: 0;
|
||||
@include prefixed(transition-duration, #{$mediumDuration});
|
||||
@include prefixed(animation-name, #{$nameSpace}-icon-drop);
|
||||
|
|
|
|||
|
|
@ -1,15 +1,8 @@
|
|||
/* Icon Fade */
|
||||
@mixin icon-fade {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
|
||||
&:before {
|
||||
content: "\f00c";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-duration, .5s);
|
||||
@include prefixed(transition-property, color);
|
||||
|
|
@ -19,7 +12,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
color: #0F9E5E;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,20 +13,9 @@
|
|||
/* Icon Float Away */
|
||||
@mixin icon-float-away {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "\f055";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 0;
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(animation-duration, #{$slowDuration});
|
||||
@include prefixed(animation-fill-mode, forwards);
|
||||
}
|
||||
|
|
@ -35,7 +24,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:after {
|
||||
.hvr-icon {
|
||||
@include prefixed(animation-name, #{$nameSpace}-icon-float-away);
|
||||
@include prefixed(animation-timing-function, ease-out);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,9 @@
|
|||
/* Icon Float */
|
||||
@mixin icon-float {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f01b";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
|
@ -21,7 +14,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateY(-4px));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,9 @@
|
|||
/* Icon Forward */
|
||||
@mixin icon-forward {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
@include prefixed(transition-duration, $fastDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f138";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-duration, $fastDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
|
@ -21,7 +14,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateX(4px));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,16 +3,9 @@
|
|||
$duration: $mediumDuration;
|
||||
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
@include prefixed(transition-duration, $duration);
|
||||
|
||||
&:before {
|
||||
content: "\f095";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-duration, $duration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
|
@ -23,7 +16,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, scale(1.5) rotate(12deg));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,9 @@
|
|||
/* Icon Grow */
|
||||
@mixin icon-grow {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f118";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
|
@ -21,7 +14,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, scale(1.3) translateZ(0));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,16 +19,9 @@
|
|||
|
||||
@mixin icon-hang {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f078";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -36,7 +29,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.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");
|
||||
|
|
|
|||
|
|
@ -7,16 +7,9 @@
|
|||
|
||||
@mixin icon-pop {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f005";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
|
@ -27,7 +20,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
@include prefixed(animation-name, #{$nameSpace}-icon-pop);
|
||||
@include prefixed(animation-duration, $mediumDuration);
|
||||
@include prefixed(animation-timing-function, linear);
|
||||
|
|
|
|||
|
|
@ -7,15 +7,8 @@
|
|||
|
||||
@mixin icon-pulse-grow {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
|
||||
&:before {
|
||||
content: "\f015";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
|
@ -24,7 +17,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
@include prefixed(animation-name, #{$nameSpace}-icon-pulse-grow);
|
||||
@include prefixed(animation-duration, $mediumDuration);
|
||||
@include prefixed(animation-timing-function, linear);
|
||||
|
|
|
|||
|
|
@ -7,15 +7,8 @@
|
|||
|
||||
@mixin icon-pulse-shrink {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
|
||||
&:before {
|
||||
content: "\f015";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
|
@ -24,7 +17,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
@include prefixed(animation-name, #{$nameSpace}-icon-pulse-shrink);
|
||||
@include prefixed(animation-duration, $mediumDuration);
|
||||
@include prefixed(animation-timing-function, linear);
|
||||
|
|
|
|||
|
|
@ -11,15 +11,8 @@
|
|||
|
||||
@mixin icon-pulse {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
|
||||
&:before {
|
||||
content: "\f015";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
|
@ -28,7 +21,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
@include prefixed(animation-name, #{$nameSpace}-icon-pulse);
|
||||
@include prefixed(animation-duration, 1s);
|
||||
@include prefixed(animation-timing-function, linear);
|
||||
|
|
|
|||
|
|
@ -7,16 +7,9 @@
|
|||
|
||||
@mixin icon-push {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f006";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
|
@ -27,7 +20,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
@include prefixed(animation-name, #{$nameSpace}-icon-push);
|
||||
@include prefixed(animation-duration, $mediumDuration);
|
||||
@include prefixed(animation-timing-function, linear);
|
||||
|
|
|
|||
|
|
@ -3,16 +3,9 @@
|
|||
$duration: $mediumDuration;
|
||||
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
@include prefixed(transition-duration, $duration);
|
||||
|
||||
&:before {
|
||||
content: "\f0c6";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-duration, $duration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
|
@ -23,7 +16,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, rotate(20deg));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,9 @@
|
|||
/* Icon Shrink */
|
||||
@mixin icon-shrink {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f119";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
|
@ -21,7 +14,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, scale(.8));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,21 +13,9 @@
|
|||
/* Icon Sink Away */
|
||||
@mixin icon-sink-away {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "\f056";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 0;
|
||||
@include prefixed(animation-duration, #{$slowDuration});
|
||||
@include prefixed(animation-fill-mode, forwards);
|
||||
}
|
||||
|
|
@ -36,7 +24,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:after {
|
||||
.hvr-icon {
|
||||
@include prefixed(animation-name, #{$nameSpace}-icon-sink-away);
|
||||
@include prefixed(animation-timing-function, ease-out);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,9 @@
|
|||
/* Icon Sink */
|
||||
@mixin icon-sink {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f01a";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
|
@ -21,7 +14,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateY(4px));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,8 @@
|
|||
/* Icon Spin */
|
||||
@mixin icon-spin {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
|
||||
&:before {
|
||||
content: "\f021";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
@include prefixed(transition-duration, 1s);
|
||||
@include prefixed(transition-property, transform);
|
||||
@include prefixed(transition-timing-function, ease-in-out);
|
||||
|
|
@ -19,7 +12,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, rotate(360deg));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,15 +14,8 @@
|
|||
/* Icon Up */
|
||||
@mixin icon-up {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
|
||||
&:before {
|
||||
content: "\f01b";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -30,7 +23,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
@include prefixed(animation-name, #{$nameSpace}-icon-up);
|
||||
@include prefixed(animation-duration, .75s);
|
||||
@include prefixed(animation-timing-function, ease-out);
|
||||
|
|
|
|||
|
|
@ -27,16 +27,9 @@
|
|||
|
||||
@mixin icon-wobble-horizontal {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f061";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -44,7 +37,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
@include prefixed(animation-name, #{$nameSpace}-icon-wobble-horizontal);
|
||||
@include prefixed(animation-duration, 1s);
|
||||
@include prefixed(animation-timing-function, ease-in-out);
|
||||
|
|
|
|||
|
|
@ -27,16 +27,9 @@
|
|||
|
||||
@mixin icon-wobble-vertical {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f062";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -44,7 +37,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.hvr-icon {
|
||||
@include prefixed(animation-name, #{$nameSpace}-icon-wobble-vertical);
|
||||
@include prefixed(animation-duration, 1s);
|
||||
@include prefixed(animation-timing-function, ease-in-out);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/*!
|
||||
* Hover.css (http://ianlunn.github.io/Hover/)
|
||||
* Version: 2.2.2
|
||||
* Version: 2.3.0
|
||||
* Author: Ian Lunn @IanLunn
|
||||
* Author URL: http://ianlunn.co.uk/
|
||||
* Github: https://github.com/IanLunn/Hover
|
||||
|
|
|
|||
Loading…
Reference in New Issue