mirror of https://github.com/IanLunn/Hover.git
Compare commits
60 Commits
Author | SHA1 | Date |
---|---|---|
Ian Lunn | eb8629df13 | |
Ian Lunn | a31ae730ed | |
Ian Lunn | b6e9a10c9a | |
IanLunn | 5c9f92d2bc | |
IanLunn | 2bb2b6d22f | |
IanLunn | a81cb21f9f | |
IanLunn | 8ca04d45a7 | |
IanLunn | 7d89804e32 | |
Ian Lunn | 9a3dd94496 | |
Machou | f346d2e8d2 | |
IanLunn | 8a32ece910 | |
IanLunn | fbe80d33f7 | |
IanLunn | a7b08adaa6 | |
IanLunn | cb79116fbf | |
Ian Lunn | 692c81dc76 | |
IanLunn | 4568b46eae | |
IanLunn | a1262ce9d4 | |
IanLunn | 577f9490a3 | |
Ian Lunn | 18f4dffa3a | |
Ian Lunn | a2ed02ae63 | |
xyzhanjiang | 2347365ed5 | |
jamesgoldswain | 3dd2d435d9 | |
MohannadNaj | 54df2a0b82 | |
IanLunn | 902b00202a | |
IanLunn | c12fb9ddac | |
Jason Marsh | 9e578d2f67 | |
Jason Marsh | 7443e9e174 | |
Jason Marsh | c1e7cd452a | |
Jason Marsh | c145e9e95b | |
Jason Marsh | 51819f900d | |
Jason Marsh | 3831bb7d8a | |
Jason Marsh | efa860af58 | |
Jason Marsh | 1d79caa794 | |
IanLunn | 60ab986e8d | |
IanLunn | 025ee5b57c | |
IanLunn | 40d9d42837 | |
IanLunn | 7b2597e011 | |
IanLunn | be0d8363f9 | |
snyk-bot | 370a39af2d | |
IanLunn | 948508aefa | |
IanLunn | fb3b1463f1 | |
IanLunn | f7c0cf2e3d | |
IanLunn | 673efca112 | |
IanLunn | d99f68df0c | |
IanLunn | 01d128f01a | |
IanLunn | 061cbfd06c | |
IanLunn | 089e01643b | |
kvnx | 8dc92c4a3a | |
IanLunn | b25fcf5f5a | |
IanLunn | 3d9e7d9d67 | |
Ian Lunn | 610aac6a2e | |
Ian Lunn | e6813f4e1a | |
Ian Lunn | 037e25c6e8 | |
The Gitter Badger | 6ff1f926bc | |
Mike Frawley | 8ba38386ec | |
Marco Biedermann | d219510ef4 | |
IanLunn | a34084566b | |
IanLunn | 19a27a405e | |
IanLunn | 03c745b277 | |
Dusan Gostimirovic | a1dce929d9 |
|
@ -0,0 +1,14 @@
|
|||
# editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
indent_size = 2
|
||||
indent_style = tab
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
|
@ -5,7 +5,7 @@ module.exports = function(grunt) {
|
|||
|
||||
version: {
|
||||
json: {
|
||||
src: ['bower.json']
|
||||
src: ['package.json']
|
||||
},
|
||||
|
||||
css: {
|
||||
|
@ -88,6 +88,8 @@ module.exports = function(grunt) {
|
|||
connect: {
|
||||
server: {
|
||||
options: {
|
||||
livereload: true,
|
||||
hostname: '0.0.0.0',
|
||||
port: 8000,
|
||||
base: './'
|
||||
}
|
||||
|
|
11
HISTORY.md
11
HISTORY.md
|
@ -1,4 +1,13 @@
|
|||
## 2.0.0 - Jan 7, 2014
|
||||
## 2.0.2 - Jan 27, 2015
|
||||
|
||||
- Added `back-pulse` effect
|
||||
|
||||
## 2.0.1 - Jan 26, 2015
|
||||
|
||||
- Added `includeClasses` option to Sass/LESS so you can now generate CSS with or without Hover.css default class names
|
||||
- Added `!default` flags to Sass variables in `_options.scss`
|
||||
|
||||
## 2.0.0 - Jan 7, 2015
|
||||
|
||||
- Added lots of new effects
|
||||
- Added LESS support
|
||||
|
|
149
README.md
149
README.md
|
@ -1,14 +1,39 @@
|
|||
# Hover.css
|
||||
|
||||
<a href="https://www.buymeacoffee.com/ianlunn" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/lato-blue.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" width="217" height="51" ></a>
|
||||
|
||||
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
|
||||
|
||||
[Demo](http://ianlunn.github.io/Hover) |
|
||||
[Tutorial](http://ianlunn.co.uk/articles/hover-css-tutorial-introduction/)
|
||||
|
||||
## Contents
|
||||
- [Download/Install](#downloadinstall)
|
||||
- [How To Use](#how-to-use)
|
||||
- [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 Icon Effects](#using-icon-effects)
|
||||
- [What's Included?](#whats-included)
|
||||
- [css](#css)
|
||||
- [scss/less](#scssless)
|
||||
- [Other](#other)
|
||||
- [Browser Support](#browser-support)
|
||||
- [Using Grunt for Development](#using-grunt-for-development)
|
||||
- [Using Sass/LESS for Development](#using-sassless-for-development)
|
||||
- [_hacks](#\_hacks)
|
||||
- [_mixins](#\_mixins)
|
||||
- [_options](#\_options)
|
||||
- [Contribute to Hover.css](#contribute-to-hovercss)
|
||||
- [Licenses](#licenses)
|
||||
- [Commercial License](#commercial-license)
|
||||
- [Open-Source License](#open-source-license)
|
||||
- [Hire Ian Lunn](#hire-ian-lunn)
|
||||
|
||||
## Download/Install
|
||||
|
||||
- NPM: `npm install --save hover.css`
|
||||
- Bower: `bower install Hover`
|
||||
- NPM: `npm install hover.css --save`
|
||||
- Bower: `bower install hover --save`
|
||||
- [Download Zip](https://github.com/IanLunn/Hover/archive/master.zip)
|
||||
|
||||
## How To Use
|
||||
|
@ -101,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?
|
||||
|
||||
|
@ -163,15 +191,15 @@ Other files of note include:
|
|||
## Browser Support
|
||||
Many Hover.css effects rely on CSS3 features such as transitions, animations, transforms and pseudo-elements, for that reason, effects may not fully work in older browsers.
|
||||
|
||||
- [Transitions](http://caniuse.com/#search=transitions) and [Animations](http://caniuse.com/#search=animations) - not supported below Internet Explorer 9
|
||||
- [Transforms](http://caniuse.com/#search=transforms) - not supported below Internet Explorer 10
|
||||
- [Transitions](http://caniuse.com/#search=transitions) and [Animations](http://caniuse.com/#search=animations) - not supported below Internet Explorer 10
|
||||
- [Transforms](http://caniuse.com/#search=transforms) - not supported below Internet Explorer 9
|
||||
- [Generated Content (pseudo-elements)](http://caniuse.com/#search=pseudo-elements) - not supported below Internet Explorer 8
|
||||
|
||||
Aside from the above mentioned browsers, Hover.css is supported across all major browsers. Please see [caniuse.com](http://caniuse.com/) for full support for many web technologies and test your webpages accordingly. It is recommended to apply fallback effects for older browsers, using CSS supported by those browsers or a feature testing library such as [Modernizr](http://modernizr.com/).
|
||||
|
||||
## Using Grunt for Development
|
||||
|
||||
Grunt is non-essential but can speed up development. With [Grunt installed](http://gruntjs.com/getting-started), run `grunt` from the command line to set up a development server accessed at [http://127.0.0.1:8000/](http://127.0.0.1:8000/). With Grunt running, Sass or LESS will be preprocessed (depending on whether you work out of the `scss` or `less` folder) and CSS files will be minified.
|
||||
Grunt is non-essential but can speed up development. With [Grunt installed](http://gruntjs.com/getting-started), run `grunt` from the command line to set up a development server accessed at [http://127.0.0.1:8000/](http://127.0.0.1:8000/) or your local IP for network testing. With Grunt running, Sass or LESS will be preprocessed (depending on whether you work out of the `scss` or `less` folder) and CSS files will be minified.
|
||||
|
||||
**Note:** Originally Grunt was set up to autoprefix CSS properties but to make the project as accessible as possible, this is no longer the case. The `prefixed(property, value)` Sass/LESS mixin should be used for browser prefixing instead. See [Using Sass/LESS for Development](#using-sassless-for-development) and [Using LESS for Development].
|
||||
|
||||
|
@ -235,30 +263,57 @@ The `$includeClasses` / `@includeClasses` option by default is set to `true` and
|
|||
|
||||
If you'd like to contribute your own effects, please see the [Contributing Guide](https://github.com/IanLunn/Hover/blob/master/CONTRIBUTING.md).
|
||||
|
||||
## License
|
||||
Hover.css is open source, and made available under a [MIT License](http://www.opensource.org/licenses/mit-license.php). Distribute, use as-is, or modify to your liking in personal and commercial projects. Please retain the original readme and license files.
|
||||
## Licenses
|
||||
|
||||
Retaining the author information at the top of `css/hover.css` and placing it on your credits page or humans.txt is much appreciated.
|
||||
Hover.css is made available under a free personal/open source or paid commercial licenses depending on your requirements. To compare licenses please visit the [Ian Lunn Design Limited Store](https://ianlunn.co.uk/store/licenses/) and [purchase a commercial license here](https://ianlunn.co.uk/store/hover-css/).
|
||||
|
||||
### Personal/Open Source
|
||||
|
||||
For personal/open source use, Hover.css is made available under a [MIT license](https://opensource.org/licenses/MIT)
|
||||
|
||||
- Use in unlimited personal applications
|
||||
- Your application can't be sold
|
||||
- Your modifications remain open-source
|
||||
- Free updates
|
||||
|
||||
[Read full license](https://ianlunn.co.uk/store/licenses/personal/)
|
||||
|
||||
### Commercial
|
||||
|
||||
For commercial use, Hover.css is made available under Commercial, Extended Commercial, and OEM Commercial licenses.
|
||||
|
||||
#### Commercial License
|
||||
|
||||
- Use in 1 application
|
||||
- Sell your application once only (e.g. a website sold to a client)
|
||||
- Your code is kept proprietary, to yourself
|
||||
- Free updates to the major version
|
||||
|
||||
[Purchase](https://ianlunn.gumroad.com/l/hover-css-extended-commercial) | [Read full license](https://ianlunn.co.uk/store/licenses/commercial/)
|
||||
|
||||
#### Extended Commercial License
|
||||
|
||||
- Use in unlimited applications
|
||||
- Sell your applications an unlimited number of times (e.g. a website template sold on a theme store)*
|
||||
- Your code is kept proprietary, to yourself
|
||||
- Free updates to the major version
|
||||
|
||||
*With the exception of applications that allow end users to produce separate applications. See the OEM Commercial License.
|
||||
|
||||
[Purchase](https://ianlunn.gumroad.com/l/hover-css-commercial) | [Read full license](https://ianlunn.co.uk/store/licenses/extended-commercial/)
|
||||
|
||||
#### OEM Commercial License
|
||||
|
||||
Should your application enable end users to produce separate applications that incorporate Ian Lunn Design Limited's software, for example, a development toolkit, library, or application builder, you must obtain an OEM Commercial License. Please [contact us](https://ianlunn.co.uk/contact/) for more information about the OEM Commercial License.
|
||||
|
||||
### MIT License (Pre v2.2.0 / 24th March 2017)
|
||||
|
||||
Hover.css was previously made available under a MIT License for both commercial and non-commercial use. Anyone that obtained a MIT license for commercial use before v2.2.0 (24th March 2017) may continue to use Hover.css versions prior to v2.2.0 under that same license.
|
||||
|
||||
If you'd like to upgrade to v2.2.0 or above, or would like to simply show your support for Hover.css (we'd much appreciate it!), please purchase an up-to-date commercial license. [Purchase a Commercial License](https://ianlunn.co.uk/store/hover-css/).
|
||||
|
||||
## Hire Ian Lunn
|
||||
|
||||
[Ian Lunn](http://ianlunn.co.uk) is a Freelance Front-end Developer and author of [CSS3 Foundations](http://css3foundations.com/).
|
||||
|
||||
Hire [Ian](http://ianlunn.co.uk) for responsive websites, WordPress websites, JavaScript, animation, and optimization.
|
||||
|
||||
## Support Future Development
|
||||
|
||||
To support the future development of Hover.css and other open source projects created by [Ian Lunn](https://github.com/IanLunn), please consider making a donation.
|
||||
|
||||
Your donation is not-for-profit (or beer!), and will allow Ian to spend a little less time on client projects and more time supporting and creating open source software.
|
||||
|
||||
Thank you.
|
||||
|
||||
**Bitcoin:**
|
||||
|
||||
Bitcoin donations may be sent to the following address:
|
||||
|
||||
<div style="text-align: center;">
|
||||
<a href="bitcoin:1KEbFvcXL8m6LogG2wjSUFz2xH6PeN6jRd?label=Hover.css%20Development"><img src="http://ianlunn.co.uk/images/btc-donate.jpg" /></a>
|
||||
<p>1KEbFvcXL8m6LogG2wjSUFz2xH6PeN6jRd</p>
|
||||
</div>
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
{
|
||||
"name": "Hover.css",
|
||||
"version": "2.0.1",
|
||||
"name": "hover",
|
||||
"homepage": "http://ianlunn.github.io/Hover",
|
||||
"authors": [
|
||||
"Ian Lunn <hello@ianlunn.co.uk>"
|
||||
|
@ -17,7 +16,7 @@
|
|||
"CSS Hover Effects",
|
||||
"CSS3 Hover Effects"
|
||||
],
|
||||
"license": "MIT",
|
||||
"license": "SEE LICENSE IN LICENSE.txt",
|
||||
"private": false,
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
|
|
|
@ -3,11 +3,7 @@
|
|||
* Author: Ian Lunn @IanLunn
|
||||
* Author URL: http://ianlunn.co.uk/
|
||||
* Github: https://github.com/IanLunn/Hover
|
||||
|
||||
* Made available under a MIT License:
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
|
||||
* Hover.css Copyright Ian Lunn 2014.
|
||||
* Hover.css Copyright Ian Lunn 2017.
|
||||
*/
|
||||
|
||||
/**
|
||||
|
@ -18,14 +14,152 @@
|
|||
@import url(http://fonts.googleapis.com/css?family=Roboto);
|
||||
|
||||
body {
|
||||
margin: 0 auto;
|
||||
max-width: 800px;
|
||||
padding: 40px 20px 20px 20px;
|
||||
margin: 0;
|
||||
padding: 40px 0 0 0;
|
||||
font-family: sans-serif;
|
||||
color: #333;
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-top: 2em;
|
||||
background-color: #ddd;
|
||||
border: none;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
|
||||
nav ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
font-size: .875em;
|
||||
font-weight: 700;
|
||||
}
|
||||
nav li {
|
||||
list-style: none;
|
||||
display: block;
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
nav li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.sep {
|
||||
color: #ddd;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
#carbonads {
|
||||
--width: 180px;
|
||||
--font-size: 14px;
|
||||
}
|
||||
|
||||
#carbonads {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20px;
|
||||
max-width: var(--width);
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
box-shadow: 0 0 0 1px hsla(0, 0%, 0%, .1);
|
||||
background-color: hsl(0, 0%, 98%);
|
||||
font-size: var(--font-size);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
#carbonads a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#carbonads a:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
#carbonads span {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.carbon-img {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
max-width: var(--width);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.carbon-img img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: var(--width) !important;
|
||||
width: var(--width);
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.carbon-text {
|
||||
display: block;
|
||||
padding: 0 1em 8px;
|
||||
}
|
||||
|
||||
.carbon-poweredby {
|
||||
display: block;
|
||||
padding: 10px var(--font-size);
|
||||
background: repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .5px;
|
||||
font-weight: 600;
|
||||
font-size: 9px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 320px) and (max-width: 759px) {
|
||||
#carbonads {
|
||||
float: none;
|
||||
margin: 0 auto;
|
||||
max-width: 330px;
|
||||
}
|
||||
#carbonads span {
|
||||
position: relative;
|
||||
}
|
||||
#carbonads > span {
|
||||
max-width: none;
|
||||
}
|
||||
.carbon-img {
|
||||
float: left;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.carbon-img img {
|
||||
max-width: 130px !important;
|
||||
}
|
||||
.carbon-text {
|
||||
float: left;
|
||||
margin-bottom: 0;
|
||||
padding: 8px 20px;
|
||||
text-align: left;
|
||||
max-width: calc(100% - 130px - 3em);
|
||||
}
|
||||
.carbon-poweredby {
|
||||
left: 130px;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.browsehappy {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
@ -51,8 +185,6 @@ p,
|
|||
}
|
||||
|
||||
[class^="hvr-"] {
|
||||
/*display: inline-block;*/
|
||||
/*vertical-align: middle;*/
|
||||
margin: .4em;
|
||||
padding: 1em;
|
||||
cursor: pointer;
|
||||
|
@ -61,6 +193,10 @@ p,
|
|||
color: #666;
|
||||
/* Prevent highlight colour when element is tapped */
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
|
||||
/* Smooth fonts */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.aligncenter {
|
||||
|
@ -88,19 +224,28 @@ a {
|
|||
}
|
||||
|
||||
.footer a:hover,
|
||||
.tutorial:hover {
|
||||
.nav:hover {
|
||||
color: #207AD1;
|
||||
}
|
||||
|
||||
.tutorial {
|
||||
.nav {
|
||||
display: inline-block;
|
||||
font-size: .8em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tutorial:hover,
|
||||
.tutorial:focus,
|
||||
.tutorial:active {
|
||||
.nav.hvr-icon-down,
|
||||
.nav.hvr-icon-forward {
|
||||
padding-right: 1.2em;
|
||||
}
|
||||
|
||||
.nav.hvr-icon-down::before,
|
||||
.nav.hvr-icon-forward::before {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.nav:hover,
|
||||
.nav:focus,
|
||||
.nav:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
@ -127,13 +272,17 @@ a {
|
|||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 4em;
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.about {
|
||||
border-top: #333 solid 2px;
|
||||
border-bottom: #333 solid 2px;
|
||||
|
@ -155,7 +304,79 @@ h2 {
|
|||
font-weight: normal;
|
||||
}
|
||||
|
||||
.social {
|
||||
.licenses {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.licenses:after {
|
||||
display: block;
|
||||
content: '';
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.license {
|
||||
display: block !important;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
border: #2098D1 solid 1px;
|
||||
}
|
||||
|
||||
.license:focus,
|
||||
.license:hover {
|
||||
border-color: #207AD1;
|
||||
}
|
||||
|
||||
.license:focus .button,
|
||||
.license:hover .button {
|
||||
background-color: #207AD1;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.license__content {
|
||||
padding: 25px 10px;
|
||||
}
|
||||
|
||||
.license__title {
|
||||
margin: 0;
|
||||
font-size: 28px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.license__title div {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.license__desc {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 0;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.license__button.cta {
|
||||
display: block;
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 568px) {
|
||||
.license {
|
||||
width: 48%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.license:nth-child(2) {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.license__content {
|
||||
padding: 40px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.download {
|
||||
margin-top: 2.6em;
|
||||
}
|
||||
|
||||
|
@ -174,19 +395,133 @@ h2 {
|
|||
line-height: 200%;
|
||||
}
|
||||
|
||||
.author {
|
||||
margin: 6em auto 0 auto;
|
||||
text-align: center;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.author [class^="hvr-"] {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.author .logo {
|
||||
.made-by {
|
||||
display: block;
|
||||
margin-bottom: .8em;
|
||||
margin-top: 3em;
|
||||
padding-top: 3em;
|
||||
padding-bottom: 1em;
|
||||
font-family: $fontFeature;
|
||||
font-size: 1.125em;
|
||||
text-align: center;
|
||||
line-height: 1.6;
|
||||
background: #181818;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.made-by svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.made-by ul,
|
||||
.made-by p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.made-by ul {
|
||||
margin-bottom: .25em;
|
||||
}
|
||||
|
||||
.made-by li {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.made-by p {
|
||||
margin-top: .4em;
|
||||
font-size: .875em;
|
||||
}
|
||||
|
||||
.made-by a {
|
||||
display: inline-block;
|
||||
padding: 0 .125em;
|
||||
color: #B1B1B1;
|
||||
transition-duration: .2s;
|
||||
transition-property: color;
|
||||
}
|
||||
|
||||
.made-by a:focus,
|
||||
.made-by a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.made-by i {
|
||||
font-size: 26px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.made-by .follow {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.made-by .follow iframe {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
.made-by small {
|
||||
display: block;
|
||||
margin-top: 3em;
|
||||
font-size: .625em;
|
||||
}
|
||||
|
||||
@-webkit-keyframes circle {
|
||||
50% {
|
||||
-webkit-transform: scale(1.26923077);
|
||||
transform: scale(1.26923077);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes circle {
|
||||
50% {
|
||||
transform: scale(1.26923077);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes initials {
|
||||
50% {
|
||||
-webkit-transform: translateY(-8px) translateZ(0);
|
||||
transform: translateY(-8px) translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes initials {
|
||||
50% {
|
||||
transform: translateY(-8px) translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
.ild-ident {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ild-ident svg {
|
||||
display: block;
|
||||
overflow: visible;
|
||||
transform: scale(1) translateZ(0);
|
||||
}
|
||||
|
||||
.ild-ident .circle-holder {
|
||||
transform: translate(-7px, -7px);
|
||||
}
|
||||
|
||||
.ild-ident .circle {
|
||||
transform: translate(7px, 7px);
|
||||
}
|
||||
|
||||
.ild-ident .active .i {
|
||||
animation: initials .4s ease-in-out;
|
||||
}
|
||||
|
||||
.ild-ident .active .l {
|
||||
animation: initials .4s .2s ease-in-out;
|
||||
}
|
||||
|
||||
.ild-ident .active .circle {
|
||||
animation: circle .5s .1s ease-in-out;
|
||||
}
|
||||
|
||||
#forkongithub {
|
||||
|
@ -232,6 +567,44 @@ h2 {
|
|||
top: auto;
|
||||
}
|
||||
|
||||
.ad {
|
||||
margin-top: 3.5em;
|
||||
padding: 3em 1.5em;
|
||||
background: #f8f8f8;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ad h2 {
|
||||
margin: 0;
|
||||
margin-bottom: 2em;
|
||||
line-height: 1.4;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.ad a {
|
||||
display: inline-block;
|
||||
margin: 0 auto 2em auto;
|
||||
}
|
||||
|
||||
.ad__preview {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.ad__preview a {
|
||||
display: block;
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.ad__preview img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 360px) {
|
||||
h1 {
|
||||
font-size: 4em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 640px) {
|
||||
#forkongithub {
|
||||
position: absolute;
|
||||
|
@ -253,4 +626,13 @@ h2 {
|
|||
transform: rotate(45deg);
|
||||
box-shadow: 4px 4px 10px rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
.ad__preview a {
|
||||
display: inline-block;
|
||||
width: 32%;
|
||||
}
|
||||
|
||||
.ad__preview .second {
|
||||
margin: 0 2%;
|
||||
}
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
1473
css/hover.css
1473
css/hover.css
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
529
index.html
529
index.html
|
@ -2,204 +2,375 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta property="og:image" content="http://ianlunn.github.io/Hover/hover.jpg" />
|
||||
<meta property="og:image" content="https://ianlunn.github.io/Hover/hover.jpg" />
|
||||
<meta property="og:site_name" content="Hover.css"/>
|
||||
<meta property="og:title" content="Hover.css - A collection of CSS3 powered hover effects" />
|
||||
<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="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!--[if lt IE 10]>
|
||||
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
|
||||
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
|
||||
<![endif]-->
|
||||
|
||||
<span id="forkongithub"><a href="https://github.com/IanLunn/Hover">Fork me on GitHub</a></span>
|
||||
<div class="main">
|
||||
<span id="forkongithub"><a href="https://github.com/IanLunn/Hover">Fork me on GitHub</a></span>
|
||||
|
||||
<h1>Hover.css <a href="https://github.com/IanLunn/Hover/releases" class="sup" title="View release history">v2</a></h1>
|
||||
<h1>Hover.css <a href="https://github.com/IanLunn/Hover/releases" class="sup" title="View release history">v2</a></h1>
|
||||
|
||||
<p class="intro">A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.</p>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#effects" title="Effects">Effects</a></li>
|
||||
<li><a href="https://github.com/IanLunn/Hover/blob/master/README.md#hovercss" title="Setup">Setup</a></li>
|
||||
<li><a href="https://ianlunn.co.uk/articles/hover-css-tutorial-introduction/" title="hover.css Tutorial and Introduction">Tutorial</a></li>
|
||||
<li><a href="#licenses" title="Licenses">Licenses</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="social aligncenter">
|
||||
<div class="social-button">
|
||||
<iframe src="http://ghbtns.com/github-btn.html?user=IanLunn&repo=Hover&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="140" height="20"></iframe>
|
||||
<p class="intro">A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.</p>
|
||||
|
||||
<div class="download aligncenter">
|
||||
<a class="button cta hvr-float-shadow" href="https://github.com/IanLunn/Hover">Download on GitHub</a>
|
||||
</div>
|
||||
|
||||
<div class="social-button">
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-related="IanLunn" data-dnt="true">Tweet</a>
|
||||
<div class="social aligncenter">
|
||||
<div class="social-button">
|
||||
<iframe src="https://ghbtns.com/github-btn.html?user=IanLunn&repo=Hover&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="social-button">
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-related="IanLunn" data-dnt="true">Tweet</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
<br />
|
||||
|
||||
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYIE23M&placement=ianlunncouk" id="_carbonads_js"></script>
|
||||
|
||||
<div id="effects" class="effects">
|
||||
|
||||
<h2>2D Transitions</h2>
|
||||
|
||||
<a href="#" class="hvr-grow">Grow</a>
|
||||
<a href="#" class="hvr-shrink">Shrink</a>
|
||||
<a href="#" class="hvr-pulse">Pulse</a>
|
||||
<a href="#" class="hvr-pulse-grow">Pulse Grow</a>
|
||||
<a href="#" class="hvr-pulse-shrink">Pulse Shrink</a>
|
||||
<a href="#" class="hvr-push">Push</a>
|
||||
<a href="#" class="hvr-pop">Pop</a>
|
||||
<a href="#" class="hvr-bounce-in">Bounce In</a>
|
||||
<a href="#" class="hvr-bounce-out">Bounce Out</a>
|
||||
<a href="#" class="hvr-rotate">Rotate</a>
|
||||
<a href="#" class="hvr-grow-rotate">Grow Rotate</a>
|
||||
<a href="#" class="hvr-float">Float</a>
|
||||
<a href="#" class="hvr-sink">Sink</a>
|
||||
<a href="#" class="hvr-bob">Bob</a>
|
||||
<a href="#" class="hvr-hang">Hang</a>
|
||||
<a href="#" class="hvr-skew">Skew</a>
|
||||
<a href="#" class="hvr-skew-forward">Skew Forward</a>
|
||||
<a href="#" class="hvr-skew-backward">Skew Backward</a>
|
||||
<a href="#" class="hvr-wobble-horizontal">Wobble Horizontal</a>
|
||||
<a href="#" class="hvr-wobble-vertical">Wobble Vertical</a>
|
||||
<a href="#" class="hvr-wobble-to-bottom-right">Wobble To Bottom Right</a>
|
||||
<a href="#" class="hvr-wobble-to-top-right">Wobble To Top Right</a>
|
||||
<a href="#" class="hvr-wobble-top">Wobble Top</a>
|
||||
<a href="#" class="hvr-wobble-bottom">Wobble Bottom</a>
|
||||
<a href="#" class="hvr-wobble-skew">Wobble Skew</a>
|
||||
<a href="#" class="hvr-buzz">Buzz</a>
|
||||
<a href="#" class="hvr-buzz-out">Buzz Out</a>
|
||||
<a href="#" class="hvr-forward">Forward</a>
|
||||
<a href="#" class="hvr-backward">Backward</a>
|
||||
|
||||
|
||||
<h2>Background Transitions</h2>
|
||||
|
||||
<a href="#" class="hvr-fade">Fade</a>
|
||||
<a href="#" class="hvr-back-pulse">Back Pulse</a>
|
||||
<a href="#" class="hvr-sweep-to-right">Sweep To Right</a>
|
||||
<a href="#" class="hvr-sweep-to-left">Sweep To Left</a>
|
||||
<a href="#" class="hvr-sweep-to-bottom">Sweep To Bottom</a>
|
||||
<a href="#" class="hvr-sweep-to-top">Sweep To Top</a>
|
||||
<a href="#" class="hvr-bounce-to-right">Bounce To Right</a>
|
||||
<a href="#" class="hvr-bounce-to-left">Bounce To Left</a>
|
||||
<a href="#" class="hvr-bounce-to-bottom">Bounce To Bottom</a>
|
||||
<a href="#" class="hvr-bounce-to-top">Bounce To Top</a>
|
||||
<a href="#" class="hvr-radial-out">Radial Out</a>
|
||||
<a href="#" class="hvr-radial-in">Radial In</a>
|
||||
<a href="#" class="hvr-rectangle-in">Rectangle In</a>
|
||||
<a href="#" class="hvr-rectangle-out">Rectangle Out</a>
|
||||
<a href="#" class="hvr-shutter-in-horizontal">Shutter In Horizontal</a>
|
||||
<a href="#" class="hvr-shutter-out-horizontal">Shutter Out Horizontal</a>
|
||||
<a href="#" class="hvr-shutter-in-vertical">Shutter In Vertical</a>
|
||||
<a href="#" class="hvr-shutter-out-vertical">Shutter Out Vertical</a>
|
||||
|
||||
|
||||
<h2>Icons</h2>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<a href="#" class="hvr-border-fade">Border Fade</a>
|
||||
<a href="#" class="hvr-hollow">Hollow</a>
|
||||
<a href="#" class="hvr-trim">Trim</a>
|
||||
<a href="#" class="hvr-ripple-out">Ripple Out</a>
|
||||
<a href="#" class="hvr-ripple-in">Ripple In</a>
|
||||
<a href="#" class="hvr-outline-out">Outline Out</a>
|
||||
<a href="#" class="hvr-outline-in">Outline In</a>
|
||||
<a href="#" class="hvr-round-corners">Round Corners</a>
|
||||
<a href="#" class="hvr-underline-from-left">Underline From Left</a>
|
||||
<a href="#" class="hvr-underline-from-center">Underline From Center</a>
|
||||
<a href="#" class="hvr-underline-from-right">Underline From Right</a>
|
||||
<a href="#" class="hvr-reveal">Reveal</a>
|
||||
<a href="#" class="hvr-underline-reveal">Underline Reveal</a>
|
||||
<a href="#" class="hvr-overline-reveal">Overline Reveal</a>
|
||||
<a href="#" class="hvr-overline-from-left">Overline From Left</a>
|
||||
<a href="#" class="hvr-overline-from-center">Overline From Center</a>
|
||||
<a href="#" class="hvr-overline-from-right">Overline From Right</a>
|
||||
|
||||
|
||||
<h2>Shadow and Glow Transitions</h2>
|
||||
|
||||
<a href="#" class="hvr-shadow">Shadow</a>
|
||||
<a href="#" class="hvr-grow-shadow">Grow Shadow</a>
|
||||
<a href="#" class="hvr-float-shadow">Float Shadow</a>
|
||||
<a href="#" class="hvr-glow">Glow</a>
|
||||
<a href="#" class="hvr-shadow-radial">Shadow Radial</a>
|
||||
<a href="#" class="hvr-box-shadow-outset">Box Shadow Outset</a>
|
||||
<a href="#" class="hvr-box-shadow-inset">Box Shadow Inset</a>
|
||||
|
||||
|
||||
<h2>Speech Bubbles</h2>
|
||||
|
||||
<a href="#" class="hvr-bubble-top">Bubble Top</a>
|
||||
<a href="#" class="hvr-bubble-right">Bubble Right</a>
|
||||
<a href="#" class="hvr-bubble-bottom">Bubble Bottom</a>
|
||||
<a href="#" class="hvr-bubble-left">Bubble Left</a>
|
||||
<a href="#" class="hvr-bubble-float-top">Bubble Float Top</a>
|
||||
<a href="#" class="hvr-bubble-float-right">Bubble Float Right</a>
|
||||
<a href="#" class="hvr-bubble-float-bottom">Bubble Float Bottom</a>
|
||||
<a href="#" class="hvr-bubble-float-left">Bubble Float Left</a>
|
||||
|
||||
|
||||
<h2>Curls</h2>
|
||||
|
||||
<a href="#" class="hvr-curl-top-left">Curl Top Left</a>
|
||||
<a href="#" class="hvr-curl-top-right">Curl Top Right</a>
|
||||
<a href="#" class="hvr-curl-bottom-right">Curl Bottom Right</a>
|
||||
<a href="#" class="hvr-curl-bottom-left">Curl Bottom Left</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="footer">
|
||||
<div class="about">
|
||||
<h2>About Hover.css</h2>
|
||||
|
||||
<p>All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, Sass, and LESS flavours.</p>
|
||||
|
||||
<p>Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place.</p>
|
||||
|
||||
<br />
|
||||
<h3 id="licenses">Licenses</h3>
|
||||
|
||||
<p>Hover.css is made available under a free personal/open source or paid commercial licenses depending on your requirements. To compare licenses please visit the <a href="https://ianlunn.co.uk/store/licenses/">Ian Lunn Design Limited Store</a> and <a href="https://ianlunn.co.uk/store/hover-css/">purchase a commercial license</a>.</p>
|
||||
|
||||
<h4 id="personal">Personal/Open Source</h4>
|
||||
|
||||
<p>For personal/open source use, Hover.css is made available under a <a href="https://opensource.org/licenses/MIT">MIT license</a>:</p>
|
||||
|
||||
<ul>
|
||||
<li>Use in unlimited personal applications</li>
|
||||
<li>Your application can't be sold</li>
|
||||
<li>Your modifications remain open-source</li>
|
||||
<li>Free updates</li>
|
||||
</ul>
|
||||
|
||||
<p><a href="https://ianlunn.co.uk/store/licenses/personal/">Read full license</a></p>
|
||||
|
||||
<h3 id="commercial-licenses">Commercial</h3>
|
||||
|
||||
<p>For commercial use, Hover.css is made available under Commercial, Extended Commercial, and OEM Commercial licenses.</p>
|
||||
|
||||
<h4 id="commercial">Commercial License</h4>
|
||||
|
||||
<ul>
|
||||
<li>Use in 1 application</li>
|
||||
<li>Sell your application once only (e.g. a website sold to a client)</li>
|
||||
<li>Your code is kept proprietary, to yourself</li>
|
||||
<li>Free updates to the major version</li>
|
||||
</ul>
|
||||
|
||||
<p><a href="https://ianlunn.gumroad.com/l/hover-css-commercial">Purchase<a/> | <a href="https://ianlunn.co.uk/store/licenses/commercial/">Read full license</a></p>
|
||||
|
||||
<h4 id="extended-commercial">Extended Commercial License</h4>
|
||||
|
||||
<ul>
|
||||
<li>Use in unlimited applications</li>
|
||||
<li>Sell your applications an unlimited number of times (e.g. a website template sold on a theme store)*</li>
|
||||
<li>Your code is kept proprietary, to yourself</li>
|
||||
<li>Free updates to the major version</li>
|
||||
</ul>
|
||||
|
||||
<p><small>*With the exception of applications that allow end users to produce separate applications. See the OEM Commercial License.</small></p>
|
||||
|
||||
<p><a href="https://ianlunn.gumroad.com/l/hover-css-extended-commercial">Purchase<a/> | <a href="https://ianlunn.co.uk/store/licenses/extended-commercial/">Read full license</a></p>
|
||||
|
||||
<div class="licenses">
|
||||
<a target="_blank" href="https://ianlunn.gumroad.com/l/hover-css-commercial" title="Commercial License" class="license hvr-float">
|
||||
<div class="license__content">
|
||||
<h5 class="license__title"><div>Hover.css</div> Commercial <div>License</div></h5>
|
||||
<p class="license__desc">For 1 Project</p>
|
||||
</div>
|
||||
<span class="license__button button cta">$14</span>
|
||||
</a>
|
||||
|
||||
<a target="_blank" href="https://ianlunn.gumroad.com/l/hover-css-extended-commercial" title="Extended Commercial License" class="license hvr-float">
|
||||
<div class="license__content">
|
||||
<h5 class="license__title"><div>Hover.css</div> Extended Commercial <div>License</div></h5>
|
||||
<p class="license__desc">For Unlimited Projects</p>
|
||||
</div>
|
||||
<span class="license__button button cta">$18</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h4 id="oem-commercial">OEM Commercial License</h4>
|
||||
|
||||
<p>Should your application enable end users to produce separate applications that incorporate Ian Lunn Design Limited's software, for example, a development toolkit, library, or application builder, you must obtain an OEM Commercial License. Please <a href="https://ianlunn.co.uk/contact/">contact us</a> for more information about the OEM Commercial License.</p>
|
||||
|
||||
<h4>MIT License (Pre v2.2.0 / 24th March 2017)</h4>
|
||||
<p>Hover.css was previously made available under a MIT License for both commercial and non-commercial use. Anyone that obtained a MIT license for commercial use before v2.2.0 (24th March 2017) may continue to use Hover.css versions prior to v2.2.0 under that same license.</p>
|
||||
|
||||
<p>If you'd like to upgrade to v2.2.0 or above, or would like to simply show your support for Hover.css (we'd much appreciate it!), please purchase an up-to-date commercial license. <a href="https://ianlunn.gumroad.com/l/hover-css-commercial" title="Commercial License">Commercial License</a>.</p>
|
||||
|
||||
<br />
|
||||
<h3>Hover.css is now available as an Eager App</h3>
|
||||
<p>Quickly and easily install <a href="https://eager.io/app/AN_LdP2tOk0f">Hover.css</a> on your WordPress site or via an embed code with <a href="https://eager.io/">Eager app</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ad">
|
||||
<h2>Like Hover.css? Try out my animation framework for sliders,<br /> presentations, and other step-based applications</h2>
|
||||
|
||||
<a class="ad__logo" href="https://www.sequencejs.com/" title="Learn more about Sequence.js">
|
||||
<img src="sequence-logo.png" alt="Sequence.js" />
|
||||
</a>
|
||||
|
||||
<div class="ad__preview">
|
||||
<a href="https://www.sequencejs.com/" title="Learn more about Sequence.js"><img src="modern-slide-in.png" /></a> <a class="second" href="https://www.sequencejs.com/" title="Learn more about Sequence.js"><img src="photo-stack.png" /></a> <a href="https://www.sequencejs.com/" title="Learn more about Sequence.js"><img src="two-up.png" /></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="aligncenter">
|
||||
<a class="button cta hvr-float-shadow" href="https://github.com/IanLunn/Hover">Download on GitHub</a><br />
|
||||
<a class="tutorial hvr-pop" href="http://ianlunn.co.uk/articles/hover-css-tutorial-introduction/">Read Tutorial →</a>
|
||||
</div>
|
||||
<div class="made-by group">
|
||||
<ul>
|
||||
<li>
|
||||
<!-- "IL" logo Copyright (c) Ian Lunn Design Limited 2017 -->
|
||||
<a cass="icon__ild" href="https://ianlunn.co.uk/" title="Ian Lunn - WordPress & Front End Developer" target="_blank" class="ild-ident">
|
||||
<svg class="" onmouseenter="el=this;el.classList.add('active');setTimeout(function(){el.classList.remove('active')},600);" xmlns="https://www.w3.org/2000/svg" width="24" height="30" viewBox="0 0 52 52">
|
||||
<g class="circle-holder">
|
||||
<path class="circle" fill="#2E96D6" d="M5.4 26c0-11.4 9.2-20.6 20.6-20.6s20.6 9.2 20.6 20.6c0 11.4-9.2 20.6-20.6 20.6s-20.6-9.2-20.6-20.6zm-5.4 0c0 14.4 11.6 26 26 26s26-11.6 26-26-11.6-26-26-26-26 11.6-26 26z"></path>
|
||||
</g>
|
||||
<path class="i" fill="#fff" d="M15 22h9v16h-9v-16z"></path>
|
||||
<path class="l" fill="#fff" d="M28 14h9v24h-9v-24z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li><a class="icon__twitter" href="https://twitter.com/IanLunn/" title="Ian Lunn on Twitter" target="_blank"><i class="fa fa-twitter"></i></a></li>
|
||||
<li><a class="icon__github" href="https://github.com/IanLunn/Hover/" title="Hover.css on GitHub" target="_blank"><i class="fa fa-github"></i></a></li>
|
||||
</ul>
|
||||
<p>Made by<br /><a href="https://ianlunn.co.uk/" title="Ian Lunn - WordPress & Front End Developer" target="_blank">Ian Lunn - WordPress & Front-end Developer</a></p>
|
||||
|
||||
<div class="effects">
|
||||
|
||||
<h2>2D Transitions</h2>
|
||||
|
||||
<a href="#" class="hvr-grow">Grow</a>
|
||||
<a href="#" class="hvr-shrink">Shrink</a>
|
||||
<a href="#" class="hvr-pulse">Pulse</a>
|
||||
<a href="#" class="hvr-pulse-grow">Pulse Grow</a>
|
||||
<a href="#" class="hvr-pulse-shrink">Pulse Shrink</a>
|
||||
<a href="#" class="hvr-push">Push</a>
|
||||
<a href="#" class="hvr-pop">Pop</a>
|
||||
<a href="#" class="hvr-bounce-in">Bounce In</a>
|
||||
<a href="#" class="hvr-bounce-out">Bounce Out</a>
|
||||
<a href="#" class="hvr-rotate">Rotate</a>
|
||||
<a href="#" class="hvr-grow-rotate">Grow Rotate</a>
|
||||
<a href="#" class="hvr-float">Float</a>
|
||||
<a href="#" class="hvr-sink">Sink</a>
|
||||
<a href="#" class="hvr-bob">Bob</a>
|
||||
<a href="#" class="hvr-hang">Hang</a>
|
||||
<a href="#" class="hvr-skew">Skew</a>
|
||||
<a href="#" class="hvr-skew-forward">Skew Forward</a>
|
||||
<a href="#" class="hvr-skew-backward">Skew Backward</a>
|
||||
<a href="#" class="hvr-wobble-horizontal">Wobble Horizontal</a>
|
||||
<a href="#" class="hvr-wobble-vertical">Wobble Vertical</a>
|
||||
<a href="#" class="hvr-wobble-to-bottom-right">Wobble To Bottom Right</a>
|
||||
<a href="#" class="hvr-wobble-to-top-right">Wobble To Top Right</a>
|
||||
<a href="#" class="hvr-wobble-top">Wobble Top</a>
|
||||
<a href="#" class="hvr-wobble-bottom">Wobble Bottom</a>
|
||||
<a href="#" class="hvr-wobble-skew">Wobble Skew</a>
|
||||
<a href="#" class="hvr-buzz">Buzz</a>
|
||||
<a href="#" class="hvr-buzz-out">Buzz Out</a>
|
||||
|
||||
|
||||
<h2>Background Transitions</h2>
|
||||
|
||||
<a href="#" class="hvr-fade">Fade</a>
|
||||
<a href="#" class="hvr-sweep-to-right">Sweep To Right</a>
|
||||
<a href="#" class="hvr-sweep-to-left">Sweep To Left</a>
|
||||
<a href="#" class="hvr-sweep-to-bottom">Sweep To Bottom</a>
|
||||
<a href="#" class="hvr-sweep-to-top">Sweep To Top</a>
|
||||
<a href="#" class="hvr-bounce-to-right">Bounce To Right</a>
|
||||
<a href="#" class="hvr-bounce-to-left">Bounce To Left</a>
|
||||
<a href="#" class="hvr-bounce-to-bottom">Bounce To Bottom</a>
|
||||
<a href="#" class="hvr-bounce-to-top">Bounce To Top</a>
|
||||
<a href="#" class="hvr-radial-out">Radial Out</a>
|
||||
<a href="#" class="hvr-radial-in">Radial In</a>
|
||||
<a href="#" class="hvr-rectangle-in">Rectangle In</a>
|
||||
<a href="#" class="hvr-rectangle-out">Rectangle Out</a>
|
||||
<a href="#" class="hvr-shutter-in-horizontal">Shutter In Horizontal</a>
|
||||
<a href="#" class="hvr-shutter-out-horizontal">Shutter Out Horizontal</a>
|
||||
<a href="#" class="hvr-shutter-in-vertical">Shutter In Vertical</a>
|
||||
<a href="#" class="hvr-shutter-out-vertical">Shutter Out Vertical</a>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<h2>Border Transitions</h2>
|
||||
|
||||
<a href="#" class="hvr-border-fade">Border Fade</a>
|
||||
<a href="#" class="hvr-hollow">Hollow</a>
|
||||
<a href="#" class="hvr-trim">Trim</a>
|
||||
<a href="#" class="hvr-ripple-out">Ripple Out</a>
|
||||
<a href="#" class="hvr-ripple-in">Ripple In</a>
|
||||
<a href="#" class="hvr-outline-out">Outline Out</a>
|
||||
<a href="#" class="hvr-outline-in">Outline In</a>
|
||||
<a href="#" class="hvr-round-corners">Round Corners</a>
|
||||
<a href="#" class="hvr-underline-from-left">Underline From Left</a>
|
||||
<a href="#" class="hvr-underline-from-center">Underline From Center</a>
|
||||
<a href="#" class="hvr-underline-from-right">Underline From Right</a>
|
||||
<a href="#" class="hvr-reveal">Reveal</a>
|
||||
<a href="#" class="hvr-underline-reveal">Underline Reveal</a>
|
||||
<a href="#" class="hvr-overline-reveal">Overline Reveal</a>
|
||||
<a href="#" class="hvr-overline-from-left">Overline From Left</a>
|
||||
<a href="#" class="hvr-overline-from-center">Overline From Center</a>
|
||||
<a href="#" class="hvr-overline-from-right">Overline From Right</a>
|
||||
|
||||
|
||||
<h2>Shadow and Glow Transitions</h2>
|
||||
|
||||
<a href="#" class="hvr-shadow">Shadow</a>
|
||||
<a href="#" class="hvr-grow-shadow">Grow Shadow</a>
|
||||
<a href="#" class="hvr-float-shadow">Float Shadow</a>
|
||||
<a href="#" class="hvr-glow">Glow</a>
|
||||
<a href="#" class="hvr-shadow-radial">Shadow Radial</a>
|
||||
<a href="#" class="hvr-box-shadow-outset">Box Shadow Outset</a>
|
||||
<a href="#" class="hvr-box-shadow-inset">Box Shadow Inset</a>
|
||||
|
||||
|
||||
<h2>Speech Bubbles</h2>
|
||||
|
||||
<a href="#" class="hvr-bubble-top">Bubble Top</a>
|
||||
<a href="#" class="hvr-bubble-right">Bubble Right</a>
|
||||
<a href="#" class="hvr-bubble-bottom">Bubble Bottom</a>
|
||||
<a href="#" class="hvr-bubble-left">Bubble Left</a>
|
||||
<a href="#" class="hvr-bubble-float-top">Bubble Float Top</a>
|
||||
<a href="#" class="hvr-bubble-float-right">Bubble Float Right</a>
|
||||
<a href="#" class="hvr-bubble-float-bottom">Bubble Float Bottom</a>
|
||||
<a href="#" class="hvr-bubble-float-left">Bubble Float Left</a>
|
||||
|
||||
|
||||
<h2>Curls</h2>
|
||||
|
||||
<a href="#" class="hvr-curl-top-left">Curl Top Left</a>
|
||||
<a href="#" class="hvr-curl-top-right">Curl Top Right</a>
|
||||
<a href="#" class="hvr-curl-bottom-right">Curl Bottom Right</a>
|
||||
<a href="#" class="hvr-curl-bottom-left">Curl Bottom Left</a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="footer">
|
||||
<div class="about">
|
||||
<h2>About Hover.css</h2>
|
||||
|
||||
<p>All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, Sass, and LESS flavours.</p>
|
||||
|
||||
<p>For best results, hover effects use a couple of "hacks" (undesirable but usually necessary lines of code). For more information on these hacks and whether you need them, <a href="https://github.com/IanLunn/Hover/wiki/Hacks-Explained">please read the FAQ</a>.</p>
|
||||
|
||||
<p>Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place.</p>
|
||||
|
||||
<h3>License</h3>
|
||||
|
||||
<p>Hover.css is open source, and made available under a <a href="http://www.opensource.org/licenses/mit-license.php">MIT License</a>. Distribute, use as-is, or modify to your liking in personal and commercial projects. Please retain the original readme and license files.
|
||||
|
||||
<p>Placing author information in your stylesheet, credits page or humans.txt is much appreciated.</p>
|
||||
</div>
|
||||
|
||||
<div class="author">
|
||||
<a class="logo" href="http://ianlunn.co.uk/" title="Visit portfolio of Ian Lunn"><img class="hvr-bob" src="logo-transparent.png" width="60" height="60" /></a>
|
||||
|
||||
<p class="follow"><a href="https://twitter.com/IanLunn" class="twitter-follow-button" data-show-count="false" data-dnt="true" data-size="large">Follow @IanLunn</a> for tweets, opinions, and links<br /> relating to CSS3, HTML5, and JavaScript</p>
|
||||
<p class="credit">Created by <a href="http://ianlunn.co.uk/" title="Visit portfolio of Ian Lunn">Ian Lunn - Front End Web Developer</a></p>
|
||||
</div>
|
||||
<p class="follow"><a href="https://twitter.com/IanLunn" class="twitter-follow-button" data-show-count="false" data-dnt="true" data-size="large">Follow @IanLunn</a> for Hover.css news, web design &<br /> development links, tips, and opinions</p>
|
||||
<small>Copyright © 2017 <a href="https://ianlunn.co.uk/" title="Ian Lunn - WordPress & Front End Developer" target="_blank">Ian Lunn Design Limited</a></small>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
@ -220,7 +391,7 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^https:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
|
|
|
@ -4,7 +4,8 @@
|
|||
|
||||
.hardwareAccel() {
|
||||
// Improve performance on mobile/tablet devices
|
||||
.prefixed(transform, translateZ(0));
|
||||
// Perspective reduces blurryness of text in Chrome
|
||||
.prefixed(transform, perspective(1px) translateZ(0));
|
||||
}
|
||||
|
||||
.improveAntiAlias() {
|
||||
|
@ -12,12 +13,6 @@
|
|||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.fontSmooth() {
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.forceBlockLevel() {
|
||||
// Transforms need to be block-level to work
|
||||
display: inline-block;
|
||||
|
@ -28,5 +23,4 @@
|
|||
.forceBlockLevel();
|
||||
.hardwareAccel();
|
||||
.improveAntiAlias();
|
||||
.fontSmooth();
|
||||
}
|
||||
|
|
|
@ -0,0 +1,12 @@
|
|||
/* Backward */
|
||||
.backward() {
|
||||
.hacks();
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(transform, translateX(-8px));
|
||||
}
|
||||
}
|
|
@ -0,0 +1,12 @@
|
|||
/* Forward */
|
||||
.forward() {
|
||||
.hacks();
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(transform, translateX(8px));
|
||||
}
|
||||
}
|
|
@ -0,0 +1,26 @@
|
|||
/* Back Pulse */
|
||||
.keyframes(~"@{nameSpace}-back-pulse", {
|
||||
50% {
|
||||
background-color: rgba(32, 152, 209, .75);
|
||||
}
|
||||
});
|
||||
|
||||
.back-pulse() {
|
||||
.hacks();
|
||||
overflow: hidden;
|
||||
.prefixed(transition-duration, @slowDuration);
|
||||
.prefixed(transition-property, "color, background-color");
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-back-pulse");
|
||||
.prefixed(animation-duration, 1s);
|
||||
.prefixed(animation-delay, @slowDuration);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
.prefixed(animation-iteration-count, infinite);
|
||||
background-color: @activeColor;
|
||||
background-color: rgba(32, 152, 209, 1);
|
||||
color: white;
|
||||
}
|
||||
}
|
|
@ -10,8 +10,8 @@
|
|||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 50%;
|
||||
right: 50%;
|
||||
left: 51%;
|
||||
right: 51%;
|
||||
top: 0;
|
||||
background: @activeColor;
|
||||
height: 4px;
|
||||
|
|
|
@ -10,8 +10,8 @@
|
|||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 50%;
|
||||
right: 50%;
|
||||
left: 51%;
|
||||
right: 51%;
|
||||
bottom: 0;
|
||||
background: @activeColor;
|
||||
height: 4px;
|
||||
|
|
|
@ -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,14 +1,11 @@
|
|||
/*!
|
||||
* Hover.css (http://ianlunn.github.io/Hover/)
|
||||
* Version: 2.0.1
|
||||
* Version: 2.3.2
|
||||
* Author: Ian Lunn @IanLunn
|
||||
* Author URL: http://ianlunn.co.uk/
|
||||
* Github: https://github.com/IanLunn/Hover
|
||||
|
||||
* Made available under a MIT License:
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
|
||||
* Hover.css Copyright Ian Lunn 2014. Generated with LESS.
|
||||
* Hover.css Copyright Ian Lunn 2017. Generated with LESS.
|
||||
*/
|
||||
|
||||
|
||||
|
@ -207,6 +204,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
@import "effects/2d-transitions/_forward";
|
||||
& when(@includeClasses = true) {
|
||||
.@{nameSpace}-forward {
|
||||
.forward();
|
||||
}
|
||||
}
|
||||
|
||||
@import "effects/2d-transitions/_backward";
|
||||
& when(@includeClasses = true) {
|
||||
.@{nameSpace}-backward {
|
||||
.backward();
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND TRANSITIONS */
|
||||
@import "effects/background-transitions/_fade";
|
||||
& when(@includeClasses = true) {
|
||||
|
@ -215,6 +226,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
@import "effects/background-transitions/_back-pulse";
|
||||
& when(@includeClasses = true) {
|
||||
.@{nameSpace}-back-pulse {
|
||||
.back-pulse();
|
||||
}
|
||||
}
|
||||
|
||||
@import "effects/background-transitions/_sweep-to-right";
|
||||
& when(@includeClasses = true) {
|
||||
.@{nameSpace}-sweep-to-right {
|
||||
|
|
43
license.txt
43
license.txt
|
@ -1,9 +1,42 @@
|
|||
The MIT License (MIT)
|
||||
# Licenses
|
||||
|
||||
Copyright (c) 2014-2015 Ian Lunn
|
||||
Hover.css is made available under a free personal/open source or paid commercial licenses depending on your requirements. To compare licenses please visit the [Ian Lunn Design Limited Store](https://ianlunn.co.uk/store/licenses/) and [purchase a commercial license here](https://ianlunn.co.uk/store/hover-css/).
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
|
||||
## Personal/Open Source
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
|
||||
For personal/open source use, Hover.css is made available under a [MIT license](https://opensource.org/licenses/MIT)
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
|
||||
- Use in unlimited personal applications
|
||||
- Your application can't be sold
|
||||
- Your modifications remain open-source
|
||||
- Free updates
|
||||
|
||||
[Read full license](https://ianlunn.co.uk/store/licenses/personal/)
|
||||
|
||||
## Commercial
|
||||
|
||||
For commercial use, Hover.css is made available under Commercial, Extended Commercial, and OEM Commercial licenses.
|
||||
|
||||
### Commercial License
|
||||
|
||||
- Use in 1 application
|
||||
- Sell your application once only (e.g. a website sold to a client)
|
||||
- Your code is kept proprietary, to yourself
|
||||
- Free updates to the major version
|
||||
|
||||
[Purchase](https://ianlunn.co.uk/store/hover-css/?attribute_pa_licenses=commercial) | [Read full license](https://ianlunn.co.uk/store/licenses/commercial/)
|
||||
|
||||
### Extended Commercial License
|
||||
|
||||
- Use in unlimited applications
|
||||
- Sell your applications an unlimited number of times (e.g. a website template sold on a theme store)*
|
||||
- Your code is kept proprietary, to yourself
|
||||
- Free updates to the major version
|
||||
|
||||
*With the exception of applications that allow end users to produce separate applications. See the OEM Commercial License.
|
||||
|
||||
[Purchase](https://ianlunn.co.uk/store/hover-css/?attribute_pa_licenses=extended-commercial) | [Read full license](https://ianlunn.co.uk/store/licenses/extended-commercial/)
|
||||
|
||||
### OEM Commercial License
|
||||
|
||||
Should your application enable end users to produce separate applications that incorporate Ian Lunn Design Limited's software, for example, a development toolkit, library, or application builder, you must obtain an OEM Commercial License. Please [contact us](https://ianlunn.co.uk/contact/) for more information about the OEM Commercial License.
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 94 KiB |
11
package.json
11
package.json
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "hover.css",
|
||||
"version": "2.0.1",
|
||||
"author": "Ian Lunn",
|
||||
"version": "2.3.2",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/IanLunn/Hover"
|
||||
|
@ -9,6 +9,9 @@
|
|||
"bugs": {
|
||||
"url": "https://github.com/IanLunn/Hover/issues"
|
||||
},
|
||||
"style": "css/hover.css",
|
||||
"sass": "scss/hover.scss",
|
||||
"main": "css/hover.css",
|
||||
"devDependencies": {
|
||||
"grunt": "~0.4.1",
|
||||
"grunt-contrib-connect": "~0.5.0",
|
||||
|
@ -16,9 +19,7 @@
|
|||
"grunt-contrib-less": "^1.0.0",
|
||||
"grunt-contrib-sass": "~0.6.0",
|
||||
"grunt-contrib-watch": "~0.5.3",
|
||||
"grunt-version": "^0.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"load-grunt-tasks": "~0.2.0"
|
||||
"grunt-version": "^0.3.0",
|
||||
"load-grunt-tasks": "~3.3.0"
|
||||
}
|
||||
}
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 276 KiB |
|
@ -4,7 +4,8 @@
|
|||
|
||||
@mixin hardwareAccel() {
|
||||
// Improve performance on mobile/tablet devices
|
||||
@include prefixed(transform, translateZ(0));
|
||||
// Perspective reduces blurryness of text in Chrome
|
||||
@include prefixed(transform, perspective(1px) translateZ(0));
|
||||
}
|
||||
|
||||
@mixin improveAntiAlias() {
|
||||
|
@ -12,12 +13,6 @@
|
|||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
@mixin fontSmooth() {
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
@mixin forceBlockLevel() {
|
||||
// Transforms need to be block-level to work
|
||||
display: inline-block;
|
||||
|
@ -28,5 +23,4 @@
|
|||
@include forceBlockLevel();
|
||||
@include hardwareAccel();
|
||||
@include improveAntiAlias();
|
||||
@include fontSmooth();
|
||||
}
|
||||
|
|
|
@ -0,0 +1,12 @@
|
|||
/* Backward */
|
||||
@mixin backward {
|
||||
@include hacks();
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@include prefixed(transform, translateX(-8px));
|
||||
}
|
||||
}
|
|
@ -0,0 +1,12 @@
|
|||
/* Forward */
|
||||
@mixin forward {
|
||||
@include hacks();
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@include prefixed(transform, translateX(8px));
|
||||
}
|
||||
}
|
|
@ -0,0 +1,26 @@
|
|||
/* Back Pulse */
|
||||
@include keyframes(#{$nameSpace}-back-pulse) {
|
||||
50% {
|
||||
background-color: rgba(32, 152, 209, .75);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin back-pulse {
|
||||
@include hacks();
|
||||
overflow: hidden;
|
||||
@include prefixed(transition-duration, $slowDuration);
|
||||
@include prefixed(transition-property, "color, background-color");
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@include prefixed(animation-name, #{$nameSpace}-back-pulse);
|
||||
@include prefixed(animation-duration, 1s);
|
||||
@include prefixed(animation-delay, $slowDuration);
|
||||
@include prefixed(animation-timing-function, linear);
|
||||
@include prefixed(animation-iteration-count, infinite);
|
||||
background-color: $activeColor;
|
||||
background-color: rgba(32, 152, 209, 1);
|
||||
color: white;
|
||||
}
|
||||
}
|
|
@ -5,13 +5,13 @@
|
|||
@include hacks();
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 50%;
|
||||
right: 50%;
|
||||
left: 51%;
|
||||
right: 51%;
|
||||
top: 0;
|
||||
background: $activeColor;
|
||||
height: 4px;
|
||||
|
|
|
@ -10,8 +10,8 @@
|
|||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 50%;
|
||||
right: 50%;
|
||||
left: 51%;
|
||||
right: 51%;
|
||||
bottom: 0;
|
||||
background: $activeColor;
|
||||
height: 4px;
|
||||
|
|
|
@ -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,14 +1,11 @@
|
|||
/*!
|
||||
* Hover.css (http://ianlunn.github.io/Hover/)
|
||||
* Version: 2.0.1
|
||||
* Version: 2.3.2
|
||||
* Author: Ian Lunn @IanLunn
|
||||
* Author URL: http://ianlunn.co.uk/
|
||||
* Github: https://github.com/IanLunn/Hover
|
||||
|
||||
* Made available under a MIT License:
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
|
||||
* Hover.css Copyright Ian Lunn 2014. Generated with Sass.
|
||||
* Hover.css Copyright Ian Lunn 2017. Generated with Sass.
|
||||
*/
|
||||
|
||||
@import "options";
|
||||
|
@ -206,6 +203,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
@import "effects/2d-transitions/forward";
|
||||
@if $includeClasses {
|
||||
.#{$nameSpace}-forward {
|
||||
@include forward();
|
||||
}
|
||||
}
|
||||
|
||||
@import "effects/2d-transitions/backward";
|
||||
@if $includeClasses {
|
||||
.#{$nameSpace}-backward {
|
||||
@include backward();
|
||||
}
|
||||
}
|
||||
|
||||
/* BACKGROUND TRANSITIONS */
|
||||
@import "effects/background-transitions/fade";
|
||||
@if $includeClasses {
|
||||
|
@ -214,6 +225,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
@import "effects/background-transitions/back-pulse";
|
||||
@if $includeClasses {
|
||||
.#{$nameSpace}-back-pulse {
|
||||
@include back-pulse();
|
||||
}
|
||||
}
|
||||
|
||||
@import "effects/background-transitions/sweep-to-right";
|
||||
@if $includeClasses {
|
||||
.#{$nameSpace}-sweep-to-right {
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
After Width: | Height: | Size: 168 KiB |
Loading…
Reference in New Issue