mirror of https://github.com/IanLunn/Hover.git
Better solution for using icons
This commit is contained in:
kvnx
parent
b25fcf5f5a
commit
8dc92c4a3a
31
README.md
31
README.md
|
|
@ -111,33 +111,16 @@ Hover.css uses [FontAwesome](https://fortawesome.github.io/Font-Awesome/) for it
|
|||
<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):
|
||||
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;
|
||||
}
|
||||
```
|
||||
<a href="#" class="hvr-icon-spin"><i class="fa fa-refresh"></i> My Text</a>
|
||||
```
|
||||
OR
|
||||
```
|
||||
<a href="#" class="hvr-icon-spin"><span class="glyphicon glyphicon-search hover-icon"></span> My Text</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).
|
||||
|
||||
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?
|
||||
|
||||
|
|
|
|||
331
css/hover.css
331
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;
|
||||
|
|
|
|||
56
index.html
56
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>
|
||||
|
||||
|
|
@ -100,33 +100,33 @@
|
|||
|
||||
<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>
|
||||
|
||||
<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"></i> Icon Back</a>
|
||||
<a href="#" class="hvr-icon-forward"><i class="fa fa-chevron-circle-right"></i> Icon Forward</a>
|
||||
<a href="#" class="hvr-icon-down"><i class="fa fa-arrow-circle-o-down"></i> Icon Down</a>
|
||||
<a href="#" class="hvr-icon-up"><i class="fa fa-arrow-circle-o-up"></i> Icon Up</a>
|
||||
<a href="#" class="hvr-icon-spin"><i class="fa fa-refresh"></i> Icon Spin</a>
|
||||
<a href="#" class="hvr-icon-drop"><i class="fa fa-tint"></i> Icon Drop</a>
|
||||
<a href="#" class="hvr-icon-fade"><i class="fa fa-check"></i> Icon Fade</a>
|
||||
<a href="#" class="hvr-icon-float-away"><i class="fa fa-plus-circle"></i> Icon Float Away</a>
|
||||
<a href="#" class="hvr-icon-sink-away"><i class="fa fa-minus-circle"></i> Icon Sink Away</a>
|
||||
<a href="#" class="hvr-icon-grow"><i class="fa fa-smile-o"></i> Icon Grow</a>
|
||||
<a href="#" class="hvr-icon-shrink"><i class="fa fa-frown-o"></i> Icon Shrink</a>
|
||||
<a href="#" class="hvr-icon-pulse"><i class="fa fa-home"></i> Icon Pulse</a>
|
||||
<a href="#" class="hvr-icon-pulse-grow"><i class="fa fa-home"></i> Icon Pulse Grow</a>
|
||||
<a href="#" class="hvr-icon-pulse-shrink"><i class="fa fa-home"></i> Icon Pulse Shrink</a>
|
||||
<a href="#" class="hvr-icon-push"><i class="fa fa-star-o"></i> Icon Push</a>
|
||||
<a href="#" class="hvr-icon-pop"><i class="fa fa-star"></i> Icon Pop</a>
|
||||
<a href="#" class="hvr-icon-bounce"><i class="fa fa-thumbs-o-up"></i> Icon Bounce</a>
|
||||
<a href="#" class="hvr-icon-rotate"><i class="fa fa-paperclip"></i> Icon Rotate</a>
|
||||
<a href="#" class="hvr-icon-grow-rotate"><i class="fa fa-phone"></i> Icon Grow Rotate</a>
|
||||
<a href="#" class="hvr-icon-float"><i class="fa fa-arrow-circle-o-up"></i> Icon Float</a>
|
||||
<a href="#" class="hvr-icon-sink"><i class="fa fa-arrow-circle-o-down"></i> Icon Sink</a>
|
||||
<a href="#" class="hvr-icon-bob"><i class="fa fa-chevron-up"></i> Icon Bob</a>
|
||||
<a href="#" class="hvr-icon-hang"><i class="fa fa-chevron-down"></i> Icon Hang</a>
|
||||
<a href="#" class="hvr-icon-wobble-horizontal"><i class="fa fa-arrow-right"></i> Icon Wobble Horizontal</a>
|
||||
<a href="#" class="hvr-icon-wobble-vertical"><i class="fa fa-arrow-up"></i> Icon Wobble Vertical</a>
|
||||
<a href="#" class="hvr-icon-buzz"><i class="fa fa-clock-o"></i> Icon Buzz</a>
|
||||
<a href="#" class="hvr-icon-buzz-out"><i class="fa fa-lock"></i> Icon Buzz Out</a>
|
||||
|
||||
|
||||
<h2>Border Transitions</h2>
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue