mirror of https://github.com/IanLunn/Hover.git
Compare commits
93 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 | |
IanLunn | 5df767b499 | |
IanLunn | be667b228c | |
Ian Lunn | bddc8f65d9 | |
José Luis Cruz | 94e088df23 | |
Dusan Gostimirovic | a1dce929d9 | |
IanLunn | 2f38685915 | |
Jasper Koers | 20cd280bbb | |
Ian Lunn | c723bd38f5 | |
Jasper Koers | 1b40726c32 | |
Jasper Koers | 27ebf79214 | |
Jasper Koers | 36ae2b0190 | |
Willson Mock | 67fe937cb6 | |
IanLunn | 6ee701f051 | |
IanLunn | f0f1b5dc83 | |
Stu Robson | 9b6aad4068 | |
Stu Robson | 39bfb86a5f | |
IanLunn | a818354b75 | |
IanLunn | 022c7c8977 | |
IanLunn | b5a08d3ce9 | |
IanLunn | a45090b9f4 | |
IanLunn | 7fc7c36e6b | |
IanLunn | b92ba38672 | |
IanLunn | a7e6b3b344 | |
IanLunn | 27e33d1d28 | |
IanLunn | 91484b935c | |
IanLunn | 7f00c871e4 | |
IanLunn | fa87de6c32 | |
IanLunn | 99dbc092ce | |
IanLunn | 6ad9a457da | |
IanLunn | a4c4bb53ae | |
IanLunn | 2ed195b452 | |
IanLunn | 89cb20ca6f | |
Colby Fayock | 2b13b984ce | |
Colby Fayock | 3c428ab754 |
|
@ -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
|
|
@ -0,0 +1,23 @@
|
|||
# Contributing to Hover.css
|
||||
|
||||
Thanks for considering to contribute to Hover.css. To improve your chances of having your hard work merged into Hover.css, here's a quick guide.
|
||||
|
||||
## Guidelines for Effects
|
||||
|
||||
1. Effects should work with only one HTML element. This way, developers only need add a class to their element for your fancy effect to work on their page. CSS pseudo-elements are perfectly acceptable as they don't require additional changes to HTML.
|
||||
|
||||
2. Aim to provide subtle effects that enhance user experience.
|
||||
|
||||
3. Hover.css is available in Sass, LESS, and CSS formats. If you can, please submit your effects in as many of these formats as possible. Don't worry if you're unfamiliar with any though, we'll convert them for you.
|
||||
|
||||
4. Try not to use transitions and animations together on the same effect, [we've found this is buggy in Webkit/Blink browsers](https://github.com/IanLunn/Hover/issues/24).
|
||||
|
||||
5. Consider submitting an effect that is paired with an opposite, for example: `Bounce In`/`Bounce Out`, `Float`/`Sink`, `Icon Back`/`Icon Forward`.
|
||||
|
||||
## Browser Testing Effects
|
||||
|
||||
The Hover.css project attempts to deliver effects that work in the latest versions of modern browsers (Firefox, Chrome, Safari, Opera, Internet Explorer 10+), as well as providing simple CSS fixes for older browsers where possible (a fallback color when `rgba()` is used for example).
|
||||
|
||||
Fallbacks for older browsers are the responsibility of the developer adding Hover.css to their page, as described in the README's [Browser Support section](https://github.com/IanLunn/Hover#browser-support).
|
||||
|
||||
Please be certain any effects you submit at least work in the latest versions of modern browsers, and advise us accordingly if that is not the case.
|
56
Gruntfile.js
56
Gruntfile.js
|
@ -3,6 +3,19 @@ module.exports = function(grunt) {
|
|||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
|
||||
version: {
|
||||
json: {
|
||||
src: ['package.json']
|
||||
},
|
||||
|
||||
css: {
|
||||
options: {
|
||||
prefix: 'Version[:=]\\s*'
|
||||
},
|
||||
src: ['css/hover.css', 'scss/hover.scss', 'less/hover.less']
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
sass: {
|
||||
dist: {
|
||||
|
@ -15,6 +28,17 @@ module.exports = function(grunt) {
|
|||
}
|
||||
},
|
||||
|
||||
less: {
|
||||
dist: {
|
||||
options: {
|
||||
style: 'expanded'
|
||||
},
|
||||
files: {
|
||||
'css/hover.css': 'less/hover.less'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
cssmin: {
|
||||
combine: {
|
||||
files: {
|
||||
|
@ -28,11 +52,35 @@ module.exports = function(grunt) {
|
|||
options: {
|
||||
livereload: true,
|
||||
},
|
||||
css: {
|
||||
files: ['scss/**/*.scss', 'css/*.css', '*.html'],
|
||||
|
||||
reload: {
|
||||
files: ['*.html', 'css/*.css'],
|
||||
options: {
|
||||
spawn: false
|
||||
}
|
||||
},
|
||||
|
||||
scss: {
|
||||
files: ['scss/**/*.scss'],
|
||||
tasks: ['sass', 'cssmin'],
|
||||
options: {
|
||||
spawn: false,
|
||||
spawn: false
|
||||
}
|
||||
},
|
||||
|
||||
less: {
|
||||
files: ['less/**/*.less'],
|
||||
tasks: ['less', 'cssmin'],
|
||||
options: {
|
||||
spawn: false
|
||||
}
|
||||
},
|
||||
|
||||
version: {
|
||||
files: ['package.json'],
|
||||
tasks: ['version'],
|
||||
options: {
|
||||
spawn: false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -40,6 +88,8 @@ module.exports = function(grunt) {
|
|||
connect: {
|
||||
server: {
|
||||
options: {
|
||||
livereload: true,
|
||||
hostname: '0.0.0.0',
|
||||
port: 8000,
|
||||
base: './'
|
||||
}
|
||||
|
|
|
@ -0,0 +1,24 @@
|
|||
## 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
|
||||
- Prefixed all effect names with `hvr-` (can be changed in `scss/_options.scss`)
|
||||
- Updated some effects for better performance and/or browser support
|
||||
- Moved default button styles out of library
|
||||
- Moved all effects into sub folders with the name of the category they belong to
|
||||
- Renamed `hover` and `hover shadow` effects to `bob` and `bob shadow`
|
||||
- Removed `hover shadow` effect due to browser inconsistencies courtesy of [this Webkit/Blink bug](https://github.com/IanLunn/Hover/issues/24) which can't be worked around
|
||||
- Updated `bob` (formerly `hover`) and `hang` effects to work around [this WebKit/Blink bug](https://github.com/IanLunn/Hover/issues/24)
|
||||
- Change default `animation-timing-function` and `transition-timing-function` values for various effects
|
||||
- Changed all instances of 'colour' to 'color'
|
||||
- Added small amount of JS to demo page to prevent `<a href="#"></a>` elements from navigating (not required for hover.css to work)
|
||||
- Added "What's Included?" section to README.md
|
345
README.md
345
README.md
|
@ -1,164 +1,319 @@
|
|||
#hover.css
|
||||
# Hover.css
|
||||
|
||||
A collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS and SASS.
|
||||
<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>
|
||||
|
||||
##Demo and Tutorial
|
||||
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/)
|
||||
[Demo](http://ianlunn.github.io/Hover) |
|
||||
[Tutorial](http://ianlunn.co.uk/articles/hover-css-tutorial-introduction/)
|
||||
|
||||
##How To Use
|
||||
hover.css can be used in a number of ways; either copy and paste the effect you'd like to use in your own stylesheet or reference the stylesheet. Then just add the class name of the effect to the element you'd like it applied to.
|
||||
## 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)
|
||||
|
||||
###Copy and Paste an Effect
|
||||
If you plan on only using one or several effects, it's better practice to copy and paste an effect into your own stylesheet, so a user doesn't have to download hover.css in its entirety.
|
||||
## Download/Install
|
||||
|
||||
Assuming you want to use the `Grow` effect:
|
||||
- NPM: `npm install hover.css --save`
|
||||
- Bower: `bower install hover --save`
|
||||
- [Download Zip](https://github.com/IanLunn/Hover/archive/master.zip)
|
||||
|
||||
1. Download hover.css
|
||||
2. In hover.css, find the 'Grow' CSS (each effect is named using a comment above it):
|
||||
## How To Use
|
||||
Hover.css can be used in a number of ways; either copy and paste the effect you'd like to use in your own stylesheet or reference the stylesheet. Then just add the class name of the effect to the element you'd like it applied to.
|
||||
|
||||
```css
|
||||
/* Grow */
|
||||
### A. Copy and Paste an Effect
|
||||
If you plan on only using one or several effects, it's better practice to copy and paste an effect into your own stylesheet, so a user doesn't have to download `css/hover.css` in its entirety.
|
||||
|
||||
.grow {
|
||||
display: inline-block;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
-webkit-transition-property: -webkit-transform;
|
||||
transition-property: transform;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
}
|
||||
Assuming you want to use the Grow effect:
|
||||
|
||||
.grow:hover {
|
||||
-webkit-transform: scale(1.1);
|
||||
-ms-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
```
|
||||
1. Download Hover.css
|
||||
2. In `css/hover.css`, find the Grow CSS (each effect is named using a comment above it):
|
||||
|
||||
```css
|
||||
/* Grow */
|
||||
.hvr-grow {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
transform: translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
backface-visibility: hidden;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
transition-duration: 0.3s;
|
||||
transition-property: transform;
|
||||
}
|
||||
|
||||
.hvr-grow:hover,
|
||||
.hvr-grow:focus,
|
||||
.hvr-grow:active {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
```
|
||||
3. Copy this effect and then paste it into your own stylesheet.
|
||||
4. In the HTML file which you'd like the effect to appear, add the class of `.grow` to your chosen element.
|
||||
4. In the HTML file which you'd like the effect to appear, add the class of `.hvr-grow` to your chosen element.
|
||||
|
||||
Example element before applying hover.css effect:
|
||||
Example element before applying Hover.css effect:
|
||||
|
||||
```html
|
||||
<a class="button">Add to Basket</a>
|
||||
<a href="#">Add to Basket</a>
|
||||
```
|
||||
|
||||
Example element after applying hover.css effect:
|
||||
Example element after applying Hover.css effect:
|
||||
|
||||
```html
|
||||
<a class="button grow">Add to Basket</a>
|
||||
<a href="#" class="hvr-grow">Add to Basket</a>
|
||||
```
|
||||
|
||||
###Reference hover.css
|
||||
If you plan on using many of hover.css' effects on your website, you may like to reference the entire hover.css stylesheet.
|
||||
**Note**: As of `2.0.0` all Hover.css class names are prefixed with `hvr-` to prevent conflicts with other libraries/stylesheets. If using Sass/LESS, this can easily be changed using the `$nameSpace`/`@nameSpace` variable in `scss/_options.scss` or `less/_options.less`.
|
||||
|
||||
1. Download hover-min.css
|
||||
### B. Reference Hover.css
|
||||
|
||||
If you plan on using many Hover.css effects, you may like to reference the entire Hover.css stylesheet.
|
||||
|
||||
1. Download `hover-min.css`
|
||||
2. Add `hover-min.css` to your websites files, in a directory named `css` for example
|
||||
3. Reference hover-min.css in `<head>` of the HTML page you'd like to add hover.css effects to:
|
||||
|
||||
3. Reference `hover-min.css` in `<head>` of the HTML page you'd like to add Hover.css effects to:
|
||||
```html
|
||||
<head>
|
||||
<link href="css/hover-min.css" rel="stylesheet">
|
||||
</head>
|
||||
```
|
||||
Alternatively you can add a reference into an existing stylesheet like so (this may be useful to WordPress users who are unable to edit HTML):
|
||||
```css
|
||||
@import url("hover-min.css");
|
||||
```
|
||||
4. Assuming you want to use the Grow effect, in the HTML file you'd like to use this effect, add the class of `.hvr-grow` to your chosen element.
|
||||
|
||||
4. Assuming you want to use the 'Grow' effect, in the HTML file you'd like to use this effect, add the class of `.grow` to your chosen element.
|
||||
|
||||
Example element before applying hover.css effect:
|
||||
Example element before applying Hover.css effect:
|
||||
|
||||
```html
|
||||
<a class="button">Add to Basket</a>
|
||||
<a href="#" class="button">Add to Basket</a>
|
||||
```
|
||||
|
||||
Example element after applying hover.css effect:
|
||||
Example element after applying Hover.css effect:
|
||||
|
||||
```html
|
||||
<a class="button grow">Add to Basket</a>
|
||||
<a href="#" class="button hvr-grow">Add to Basket</a>
|
||||
```
|
||||
|
||||
##Browser Support
|
||||
Many of 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.
|
||||
### A Note on the `display` Property
|
||||
|
||||
- [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
|
||||
To make an element "transformable", Hover.css gives the following to all elements it is applied to:
|
||||
|
||||
```css
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
```
|
||||
|
||||
Should you wish to override this behavior, either remove the above CSS from Hover.css or change the `display` property for the element. Be sure to declare the override after the Hover.css declarations so the CSS cascade will take effect. Alternatively, if you are using the Sass/LESS version of Hover.css, you can remove/comment out the `forceBlockLevel()` mixin found in `scss/_hacks.scss` or `less/_hacks.less`.
|
||||
|
||||
For more information about Transformable elements, see the [CSS Transforms Module](http://www.w3.org/TR/css3-transforms/#transformable-element).
|
||||
|
||||
### Using Icon Effects
|
||||
|
||||
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">
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||
```
|
||||
<a href="#" class="hvr-icon-spin">
|
||||
Icon Spin
|
||||
<img src="myicon.svg" class="hvr-icon" />
|
||||
</a>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
Position of the icon is entirely in your control. You could place it before the text, like so:
|
||||
|
||||
```
|
||||
<a href="#" class="hvr-icon-spin">
|
||||
<img src="myicon.svg" class="hvr-icon" />
|
||||
Icon Spin
|
||||
</a>
|
||||
```
|
||||
|
||||
Or use custom CSS to position the icon as you see fit.
|
||||
|
||||
## What's Included?
|
||||
|
||||
The project consists of the following folders and files:
|
||||
|
||||
### css
|
||||
|
||||
- **demo-page.css** - Contains styles to demonstrate Hover. Not required in your projects
|
||||
- **hover-min.css** - The minified/production version of Hover.css
|
||||
- **hover.css** - The development version of Hover.css
|
||||
|
||||
### scss/less
|
||||
|
||||
- **effects** - Contains each individual effect sorted into categorized folders
|
||||
- **_hacks.scss/_hacks.less, _mixins.scss/_mixins.less, _options.scss/_options.less** - Sass/LESS Utilities
|
||||
- **hover.scss/hover.less** - Development version of Hover.css in Sass and LESS flavours
|
||||
|
||||
### Other
|
||||
|
||||
Other files of note include:
|
||||
|
||||
- **index.html** - Demonstrates all Hover.css effects
|
||||
- **Gruntfile.js** - Used for [development of Hover.css via Grunt](#using-grunt-for-development).
|
||||
|
||||
## 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 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.
|
||||
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
|
||||
## 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 will be preprocessed 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 that 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 mixin should be used for browser prefixing instead. See [Using SASS for Development](#using-sass-for-development).
|
||||
**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].
|
||||
|
||||
##Using SASS for Development
|
||||
## Using Sass/LESS for Development
|
||||
|
||||
SASS is non-essential but can speed up development. Preprocess SASS with your favourite software or the environment provided via [Grunt](#using-grunt-for-development).
|
||||
Sass/LESS are non-essential but can speed up development. Preprocess Sass/LESS with your favourite software or the environment provided via [Grunt](#using-grunt-for-development).
|
||||
|
||||
SASS is used in the Hover.css project to separate various CSS into specific files. Each effect is within its own file in the `effects` directory. Hover.css also uses the following `.scss` files:
|
||||
Sass/LESS is used in the Hover.css project to separate various CSS into specific files. Each effect is within its own file in the `effects` directory. Hover.css also uses the following `.scss` and `.less` files:
|
||||
|
||||
###_hacks.scss
|
||||
Contains some hacks applied to certain effects. [Hacks explained here](https://github.com/IanLunn/Hover/wiki/Hacks-Explained).
|
||||
### _hacks
|
||||
Contains hacks (undesirable but usually necessary lines of code) applied to certain effects. [Hacks explained here](https://github.com/IanLunn/Hover/wiki/Hacks-Explained).
|
||||
|
||||
###_mixins.scss
|
||||
Contains the default button style used on the example page, and `prefixed(property, value)` and `keyframes(keyframe-name)` mixins that apply the necessary prefixes you specify in _options.scss to properties and keyframes.
|
||||
### _mixins
|
||||
Contains `prefixed` and `keyframes` mixins that apply the necessary prefixes you specify in `_options.scss` / `_options.less` to properties and keyframes.
|
||||
|
||||
`prefixed(property, value)` can be used like so:
|
||||
Properties can be prefixed like so:
|
||||
|
||||
```
|
||||
- Sass:
|
||||
```css
|
||||
@include prefixed(transition-duration, .3s);
|
||||
```
|
||||
|
||||
The `prefixed(property, value)` mixin is passed the property you want to prefix, followed by its value.
|
||||
|
||||
`keyframes(keyframe-name)` can be used like so:
|
||||
|
||||
- LESS:
|
||||
```css
|
||||
.prefixed(transition-duration, .3s);
|
||||
```
|
||||
|
||||
The `prefixed` mixin is passed the property you want to prefix, followed by its value.
|
||||
|
||||
Keyframes can be prefixed like so:
|
||||
|
||||
- Sass:
|
||||
```css
|
||||
@include keyframes(my-animation) {
|
||||
to {
|
||||
color: red;
|
||||
}
|
||||
to {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
```
|
||||
The `keyframes` mixin is passed the keyframe name, followed by the content using the @content directive.
|
||||
|
||||
The `keyframes(keyframe-name)` mixin is passed the keyframe name, followed by the content of your keyframe within parenthesis `{}`.
|
||||
|
||||
###_options.scss
|
||||
Contains default options, various effect options and the browser prefixes you'd like to use with the `prefixed()` mixin. By default, only the `-webkit-` prefix is set to `true` (due to most browsers not requiring prefixes now).
|
||||
- LESS:
|
||||
```css
|
||||
.keyframes(my-animation, {
|
||||
to {
|
||||
color: red;
|
||||
}
|
||||
});
|
||||
```
|
||||
The `keyframes` mixin is passed the keyframe name, followed by the content, both as arguments.
|
||||
|
||||
##Authors
|
||||
|
||||
- [Ian Lunn](https://github.com/IanLunn)
|
||||
- [Matthew Davis](https://github.com/mdavis1982)
|
||||
- [benbayard](https://github.com/benbayard)
|
||||
- [Zach Latta](https://github.com/zachlatta)
|
||||
- [Leandro D'Onofrio](https://github.com/dzignus)
|
||||
- [curtisk](https://github.com/curtisk)
|
||||
### _options
|
||||
Contains default options, various effect options and the browser prefixes you'd like to use with the `prefixed` mixin. By default, only the `-webkit-` prefix is set to `true` (due to most browsers not requiring prefixes now).
|
||||
|
||||
##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.
|
||||
As of `2.0.0`, `_options` also includes a `$nameSpace` / `@nameSpace` option which allows you to change the name all classes are prefixed with. The default namespace is `hvr`.
|
||||
|
||||
Placing author information in your stylesheet, credits page or humans.txt is much appreciated.
|
||||
The `$includeClasses` / `@includeClasses` option by default is set to `true` and will generate all Hover.css effects under their own class names, `hvr-grow` for example. Should you wish to add the properties that make up Hover.css effects to your own class names, set this option to `false`.
|
||||
|
||||
##Support Future Development
|
||||
## Contribute to Hover.css
|
||||
|
||||
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.
|
||||
If you'd like to contribute your own effects, please see the [Contributing Guide](https://github.com/IanLunn/Hover/blob/master/CONTRIBUTING.md).
|
||||
|
||||
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.
|
||||
## Licenses
|
||||
|
||||
Thank you.
|
||||
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/).
|
||||
|
||||
**Bitcoin:**
|
||||
### Personal/Open Source
|
||||
|
||||
Bitcoin donations may be sent to the following address:
|
||||
For personal/open source use, Hover.css is made available under a [MIT license](https://opensource.org/licenses/MIT)
|
||||
|
||||
<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>
|
||||
- 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.
|
||||
|
|
|
@ -1,22 +1,22 @@
|
|||
{
|
||||
"name": "Hover.css",
|
||||
"version": "1.0.8",
|
||||
"name": "hover",
|
||||
"homepage": "http://ianlunn.github.io/Hover",
|
||||
"authors": [
|
||||
"Ian Lunn <hello@ianlunn.co.uk>"
|
||||
],
|
||||
"description": "A collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS and SASS.",
|
||||
"description": "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.",
|
||||
"main": "css/hover.css",
|
||||
"keywords": [
|
||||
"Hover",
|
||||
"hover",
|
||||
"hover.css",
|
||||
"Hover Effects",
|
||||
"CSS Effects",
|
||||
"CSS3 Effects",
|
||||
"CSS Hover Effects",
|
||||
"CSS3 Hover Effects"
|
||||
],
|
||||
"license": "MIT",
|
||||
"license": "SEE LICENSE IN LICENSE.txt",
|
||||
"private": false,
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
|
|
|
@ -3,50 +3,261 @@
|
|||
* 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.
|
||||
*/
|
||||
|
||||
/**
|
||||
* The following are default styles for the demo page,
|
||||
* you don't need to include these on your own site.
|
||||
*/
|
||||
|
||||
@import url(http://fonts.googleapis.com/css?family=Roboto);
|
||||
|
||||
body {
|
||||
margin: 0 auto;
|
||||
max-width: 800px;
|
||||
padding: 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;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding: 1em;
|
||||
background: black;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
p,
|
||||
[class^="hvr-"] {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
[class^="hvr-"] {
|
||||
margin: .4em;
|
||||
padding: 1em;
|
||||
cursor: pointer;
|
||||
background: #e1e1e1;
|
||||
text-decoration: none;
|
||||
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 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tutorial {
|
||||
display: block;
|
||||
.sup {
|
||||
vertical-align: super;
|
||||
margin-left: -1em;
|
||||
padding: .21875em;
|
||||
line-height: 100%;
|
||||
font-size: .21875em;
|
||||
border: #eee solid 1px;
|
||||
border-radius: 4px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.sup:hover {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #2098D1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer a:hover,
|
||||
.nav:hover {
|
||||
color: #207AD1;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: inline-block;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.intro {
|
||||
max-width: 680px;
|
||||
margin: 0 auto;
|
||||
margin: 20px auto 0 auto;
|
||||
}
|
||||
|
||||
.button.cta {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: 2em 0 1em 0;
|
||||
margin: 1.2em 0 1em 0;
|
||||
padding: 1em;
|
||||
background: #2098D1;
|
||||
border: none;
|
||||
|
@ -55,19 +266,23 @@ img {
|
|||
color: white;
|
||||
}
|
||||
|
||||
#effects {
|
||||
margin-top: 5em;
|
||||
.effects {
|
||||
margin-top: 6em;
|
||||
}
|
||||
|
||||
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;
|
||||
|
@ -86,16 +301,83 @@ h2 {
|
|||
|
||||
.credit {
|
||||
font-size: .8em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.footer a:hover,
|
||||
.footer a:focus,
|
||||
.footer a:active {
|
||||
text-decoration: underline;
|
||||
.licenses {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.social {
|
||||
margin-top: 2em;
|
||||
.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;
|
||||
}
|
||||
|
||||
.social-button {
|
||||
|
@ -103,15 +385,147 @@ h2 {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.author {
|
||||
margin: 6em auto 0 auto;
|
||||
text-align: center;
|
||||
font-weight: 900;
|
||||
.twitter-follow-button {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.author .logo {
|
||||
.follow {
|
||||
margin-bottom: 20px;
|
||||
line-height: 200%;
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#forkongithub a {
|
||||
|
@ -132,7 +546,7 @@ h2 {
|
|||
#forkongithub a:hover,
|
||||
#forkongithub a:focus,
|
||||
#forkongithub a:active {
|
||||
background: #060;
|
||||
background: #2098D1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
@ -153,7 +567,45 @@ h2 {
|
|||
top: auto;
|
||||
}
|
||||
|
||||
@media screen and (min-width:800px) {
|
||||
.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;
|
||||
display: block;
|
||||
|
@ -174,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
3573
css/hover.css
3573
css/hover.css
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
467
index.html
467
index.html
|
@ -2,144 +2,397 @@
|
|||
<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="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Hover.css</h1>
|
||||
<p class="intro">A collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS and SASS.<p>
|
||||
<!--[if lt IE 10]>
|
||||
<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>
|
||||
|
||||
<div class="aligncenter">
|
||||
<a class="button cta hover-shadow" href="https://github.com/IanLunn/Hover">Download on GitHub</a>
|
||||
<a class="tutorial" href="http://ianlunn.co.uk/articles/hover-css-tutorial-introduction/">Read Tutorial</a>
|
||||
</div>
|
||||
<h1>Hover.css <a href="https://github.com/IanLunn/Hover/releases" class="sup" title="View release history">v2</a></h1>
|
||||
|
||||
<div id="effects">
|
||||
<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>
|
||||
|
||||
<h2>2D Transforms</h2>
|
||||
<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>
|
||||
|
||||
<a href="#" class="button grow">Grow</a>
|
||||
<a href="#" class="button shrink">Shrink</a>
|
||||
<a href="#" class="button pulse">Pulse</a>
|
||||
<a href="#" class="button pulse-grow">Pulse Grow</a>
|
||||
<a href="#" class="button pulse-shrink">Pulse Shrink</a>
|
||||
<a href="#" class="button push">Push</a>
|
||||
<a href="#" class="button pop">Pop</a>
|
||||
<a href="#" class="button rotate">Rotate</a>
|
||||
<a href="#" class="button grow-rotate">Grow Rotate</a>
|
||||
<a href="#" class="button float">Float</a>
|
||||
<a href="#" class="button sink">Sink</a>
|
||||
<a href="#" class="button hover">Hover</a>
|
||||
<a href="#" class="button hang">Hang</a>
|
||||
<a href="#" class="button skew">Skew</a>
|
||||
<a href="#" class="button skew-forward">Skew Forward</a>
|
||||
<a href="#" class="button skew-backward">Skew Backward</a>
|
||||
<a href="#" class="button wobble-horizontal">Wobble Horizontal</a>
|
||||
<a href="#" class="button wobble-vertical">Wobble Vertical</a>
|
||||
<a href="#" class="button wobble-to-bottom-right">Wobble To Bottom Right</a>
|
||||
<a href="#" class="button wobble-to-top-right">Wobble To Top Right</a>
|
||||
<a href="#" class="button wobble-top">Wobble Top</a>
|
||||
<a href="#" class="button wobble-bottom">Wobble Bottom</a>
|
||||
<a href="#" class="button wobble-skew">Wobble Skew</a>
|
||||
<a href="#" class="button buzz">Buzz</a>
|
||||
<a href="#" class="button buzz-out">Buzz Out</a>
|
||||
|
||||
|
||||
|
||||
<h2>Border Transitions</h2>
|
||||
|
||||
<a href="#" class="button border-fade">Border Fade</a>
|
||||
<a href="#" class="button hollow">Hollow</a>
|
||||
<a href="#" class="button trim">Trim</a>
|
||||
<a href="#" class="button outline-outward">Outline Outward</a>
|
||||
<a href="#" class="button outline-inward">Outline Inward</a>
|
||||
<a href="#" class="button round-corners">Round Corners</a>
|
||||
|
||||
|
||||
|
||||
<h2>Shadow and Glow Transitions</h2>
|
||||
|
||||
<a href="#" class="button glow">Glow</a>
|
||||
<a href="#" class="button box-shadow-outset">Box Shadow Outset</a>
|
||||
<a href="#" class="button box-shadow-inset">Box Shadow Inset</a>
|
||||
<a href="#" class="button float-shadow">Float Shadow</a>
|
||||
<a href="#" class="button hover-shadow">Hover Shadow</a>
|
||||
<a href="#" class="button shadow-radial">Shadow Radial</a>
|
||||
|
||||
|
||||
|
||||
<h2>Speech Bubbles</h2>
|
||||
|
||||
<a href="#" class="button bubble-top">Bubble Top</a>
|
||||
<a href="#" class="button bubble-right">Bubble Right</a>
|
||||
<a href="#" class="button bubble-bottom">Bubble Bottom</a>
|
||||
<a href="#" class="button bubble-left">Bubble Left</a>
|
||||
<a href="#" class="button bubble-float-top">Bubble Float Top</a>
|
||||
<a href="#" class="button bubble-float-right">Bubble Float Right</a>
|
||||
<a href="#" class="button bubble-float-bottom">Bubble Float Bottom</a>
|
||||
<a href="#" class="button bubble-float-left">Bubble Float Left</a>
|
||||
|
||||
|
||||
|
||||
<h2>Curls</h2>
|
||||
|
||||
<a href="#" class="button curl-top-left">Curl Top Left</a>
|
||||
<a href="#" class="button curl-top-right">Curl Top Right</a>
|
||||
<a href="#" class="button curl-bottom-right">Curl Bottom Right</a>
|
||||
<a href="#" class="button 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 and SASS 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 class="download aligncenter">
|
||||
<a class="button cta hvr-float-shadow" href="https://github.com/IanLunn/Hover">Download on GitHub</a>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="author">
|
||||
<a class="logo" href="http://ianlunn.co.uk/" title="Visit portfolio of Ian Lunn"><img class="hover" src="logo-transparent.png" width="60" height="60" /></a>
|
||||
<hr />
|
||||
<br />
|
||||
|
||||
<div class="social-button">
|
||||
<a href="https://twitter.com/IanLunn" class="twitter-follow-button" data-show-count="false" data-dnt="true" data-size="large">Follow @IanLunn</a>
|
||||
<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 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>
|
||||
<p>I tweet about web technologies such as CSS3, HTML5 and JavaScript</p>
|
||||
<p class="credit">Created by <a href="http://ianlunn.co.uk/" title="Visit portfolio of Ian Lunn">Ian Lunn</a> - Front End Web Developer</p>
|
||||
</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="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>
|
||||
|
||||
<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>
|
||||
/**
|
||||
* Used to demonstrate Hover.css only. Not required when adding
|
||||
* Hover.css to your own pages. Prevents a link from being
|
||||
* navigated and gaining focus.
|
||||
*/
|
||||
var effects = document.querySelectorAll('.effects')[0];
|
||||
|
||||
effects.addEventListener('click', function(e) {
|
||||
|
||||
if (e.target.className.indexOf('hvr') > -1) {
|
||||
e.preventDefault();
|
||||
e.target.blur();
|
||||
|
||||
}
|
||||
});
|
||||
</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(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
|
|
|
@ -0,0 +1,26 @@
|
|||
// As is often the case, some devices/browsers need additional code to get CSS to work
|
||||
// in the most desired way. These mixins are used to quickly drop in hacks for each element
|
||||
// Find out more here: https://github.com/IanLunn/Hover/wiki/Hacks-Explained
|
||||
|
||||
.hardwareAccel() {
|
||||
// Improve performance on mobile/tablet devices
|
||||
// Perspective reduces blurryness of text in Chrome
|
||||
.prefixed(transform, perspective(1px) translateZ(0));
|
||||
}
|
||||
|
||||
.improveAntiAlias() {
|
||||
// Improve aliasing on mobile/tablet devices
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.forceBlockLevel() {
|
||||
// Transforms need to be block-level to work
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.hacks() {
|
||||
.forceBlockLevel();
|
||||
.hardwareAccel();
|
||||
.improveAntiAlias();
|
||||
}
|
|
@ -0,0 +1,51 @@
|
|||
// prefix declarations
|
||||
.prefixed(@property, @value) {
|
||||
& when (@webkit = true) {
|
||||
-webkit-@{property}: @value;
|
||||
}
|
||||
|
||||
& when (@moz = true) {
|
||||
-moz-@{property}: @value;
|
||||
}
|
||||
|
||||
& when (@ms = true) {
|
||||
-ms-@{property}: @value;
|
||||
}
|
||||
|
||||
& when (@o = true) {
|
||||
-o-@{property}: @value;
|
||||
}
|
||||
|
||||
@{property}: @value;
|
||||
}
|
||||
|
||||
// prefix keyframes
|
||||
.keyframes(@name; @content) {
|
||||
& when (@webkit = true) {
|
||||
@-webkit-keyframes @name {
|
||||
@content();
|
||||
}
|
||||
}
|
||||
|
||||
& when (@moz = true) {
|
||||
@-moz-keyframes @name {
|
||||
@content();
|
||||
}
|
||||
}
|
||||
|
||||
& when (@ms = true) {
|
||||
@-ms-keyframes @name {
|
||||
@content();
|
||||
}
|
||||
}
|
||||
|
||||
& when (@o = true) {
|
||||
@-o-keyframes @name {
|
||||
@content();
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes @name {
|
||||
@content();
|
||||
}
|
||||
}
|
|
@ -0,0 +1,43 @@
|
|||
// DEFAULT OPTIONS
|
||||
|
||||
// Prefix for Hover class names
|
||||
@nameSpace: hvr;
|
||||
|
||||
// Durations
|
||||
@fastDuration: .1s;
|
||||
@mediumDuration: .3s;
|
||||
@slowDuration: .5s;
|
||||
|
||||
// Colors
|
||||
@primaryColor: #e1e1e1;
|
||||
@secondaryColor: #666;
|
||||
@highlightColor: #ccc;
|
||||
@activeColor: #2098D1;
|
||||
@shadowColor: rgba(0, 0, 0, .6);
|
||||
|
||||
// Speech bubbles options
|
||||
@tipWidth: 10px; //the width of the speech bubble tip
|
||||
@tipHeight: 10px; //the height of the speech bubble tip
|
||||
@tipColor: @primaryColor;
|
||||
|
||||
// Arrows options
|
||||
@spaceBetweenTextAndArrows: 2.2em;
|
||||
|
||||
// Curl dimensions
|
||||
@curlWidth: 25px;
|
||||
@curlHeight: 25px;
|
||||
|
||||
// Curl colors
|
||||
@revealAreaColor: white; // reveal area behind the curl
|
||||
@curlLineColor: #aaa; // crease line
|
||||
@curlTransitionColor: #ccc; // color transitioning from crease line to final color
|
||||
@curlLastColor: white; // final color of the back of the curl
|
||||
|
||||
// Browser Prefixes - Which CSS prefixes should be used?
|
||||
@webkit: true;
|
||||
@moz: false;
|
||||
@ms: false;
|
||||
@o: false;
|
||||
|
||||
// Compile with or without classes
|
||||
@includeClasses: true;
|
|
@ -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,34 @@
|
|||
/* Bob */
|
||||
.keyframes(~"@{nameSpace}-bob", {
|
||||
0% {
|
||||
.prefixed(transform, translateY(-8px));
|
||||
}
|
||||
50% {
|
||||
.prefixed(transform, translateY(-4px));
|
||||
}
|
||||
100% {
|
||||
.prefixed(transform, translateY(-8px));
|
||||
}
|
||||
});
|
||||
|
||||
.keyframes(~"@{nameSpace}-bob-float", {
|
||||
100% {
|
||||
.prefixed(transform, translateY(-8px));
|
||||
}
|
||||
});
|
||||
|
||||
.bob() {
|
||||
.hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-bob-float, @{nameSpace}-bob");
|
||||
.prefixed(animation-duration, ~".3s, 1.5s");
|
||||
.prefixed(animation-delay, ~"0s, .3s");
|
||||
.prefixed(animation-timing-function, ~"ease-out, ease-in-out");
|
||||
.prefixed(animation-iteration-count, ~"1, infinite");
|
||||
.prefixed(animation-fill-mode, ~"forwards");
|
||||
.prefixed(animation-direction, ~"normal, alternate");
|
||||
}
|
||||
}
|
|
@ -0,0 +1,12 @@
|
|||
/* Bounce In */
|
||||
.bounce-in() {
|
||||
.hacks();
|
||||
.prefixed(transition-duration, @slowDuration);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(transform, scale(1.2));
|
||||
.prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36));
|
||||
}
|
||||
}
|
|
@ -0,0 +1,12 @@
|
|||
/* Bounce Out */
|
||||
.bounce-out() {
|
||||
.hacks();
|
||||
.prefixed(transition-duration, @slowDuration);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(transform, scale(.8));
|
||||
.prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36));
|
||||
}
|
||||
}
|
|
@ -0,0 +1,55 @@
|
|||
/* Buzz Out */
|
||||
.keyframes(~"@{nameSpace}-buzz-out", {
|
||||
10% {
|
||||
.prefixed(transform, translateX(3px) rotate(2deg));
|
||||
}
|
||||
|
||||
20% {
|
||||
.prefixed(transform, translateX(-3px) rotate(-2deg));
|
||||
}
|
||||
|
||||
30% {
|
||||
.prefixed(transform, translateX(3px) rotate(2deg));
|
||||
}
|
||||
|
||||
40% {
|
||||
.prefixed(transform, translateX(-3px) rotate(-2deg));
|
||||
}
|
||||
|
||||
50% {
|
||||
.prefixed(transform, translateX(2px) rotate(1deg));
|
||||
}
|
||||
|
||||
60% {
|
||||
.prefixed(transform, translateX(-2px) rotate(-1deg));
|
||||
}
|
||||
|
||||
70% {
|
||||
.prefixed(transform, translateX(2px) rotate(1deg));
|
||||
}
|
||||
|
||||
80% {
|
||||
.prefixed(transform, translateX(-2px) rotate(-1deg));
|
||||
}
|
||||
|
||||
90% {
|
||||
.prefixed(transform, translateX(1px) rotate(0));
|
||||
}
|
||||
|
||||
100% {
|
||||
.prefixed(transform, translateX(-1px) rotate(0));
|
||||
}
|
||||
});
|
||||
|
||||
.buzz-out() {
|
||||
.hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-buzz-out");
|
||||
.prefixed(animation-duration, .75s);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
.prefixed(animation-iteration-count, 1);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,23 @@
|
|||
/* Buzz */
|
||||
.keyframes(~"@{nameSpace}-buzz", {
|
||||
50% {
|
||||
.prefixed(transform, translateX(3px) rotate(2deg));
|
||||
}
|
||||
|
||||
100% {
|
||||
.prefixed(transform, translateX(-3px) rotate(-2deg));
|
||||
}
|
||||
});
|
||||
|
||||
.buzz() {
|
||||
.hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-buzz");
|
||||
.prefixed(animation-duration, .15s);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
.prefixed(animation-iteration-count, infinite);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,13 @@
|
|||
/* Float */
|
||||
.float() {
|
||||
.hacks();
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(transform, translateY(-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,12 @@
|
|||
/* Grow Rotate */
|
||||
.grow-rotate() {
|
||||
.hacks();
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(transform, scale(1.1) rotate(4deg));
|
||||
}
|
||||
}
|
|
@ -0,0 +1,12 @@
|
|||
/* Grow */
|
||||
.grow() {
|
||||
.hacks();
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(transform, scale(1.1));
|
||||
}
|
||||
}
|
|
@ -0,0 +1,34 @@
|
|||
/* Hang */
|
||||
.keyframes(~"@{nameSpace}-hang", {
|
||||
0% {
|
||||
.prefixed(transform, translateY(8px));
|
||||
}
|
||||
50% {
|
||||
.prefixed(transform, translateY(4px));
|
||||
}
|
||||
100% {
|
||||
.prefixed(transform, translateY(8px));
|
||||
}
|
||||
});
|
||||
|
||||
.keyframes(~"@{nameSpace}-hang-sink", {
|
||||
100% {
|
||||
.prefixed(transform, translateY(8px));
|
||||
}
|
||||
});
|
||||
|
||||
.hang() {
|
||||
.hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-hang-sink, @{nameSpace}-hang");
|
||||
.prefixed(animation-duration, ~".3s, 1.5s");
|
||||
.prefixed(animation-delay, ~"0s, .3s");
|
||||
.prefixed(animation-timing-function, ~"ease-out, ease-in-out");
|
||||
.prefixed(animation-iteration-count, ~"1, infinite");
|
||||
.prefixed(animation-fill-mode, ~"forwards");
|
||||
.prefixed(animation-direction, ~"normal, alternate");
|
||||
}
|
||||
}
|
|
@ -0,0 +1,19 @@
|
|||
/* Pop */
|
||||
.keyframes(~"@{nameSpace}-pop", {
|
||||
50% {
|
||||
.prefixed(transform, scale(1.2));
|
||||
}
|
||||
});
|
||||
|
||||
.pop() {
|
||||
.hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-pop");
|
||||
.prefixed(animation-duration, @mediumDuration);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
.prefixed(animation-iteration-count, 1);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,20 @@
|
|||
/* Pulse Grow */
|
||||
.keyframes(~"@{nameSpace}-pulse-grow", {
|
||||
to {
|
||||
.prefixed(transform, scale(1.1));
|
||||
}
|
||||
});
|
||||
|
||||
.pulse-grow() {
|
||||
.hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-pulse-grow");
|
||||
.prefixed(animation-duration, @mediumDuration);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
.prefixed(animation-iteration-count, infinite);
|
||||
.prefixed(animation-direction, alternate);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,20 @@
|
|||
/* Pulse Shrink */
|
||||
.keyframes(~"@{nameSpace}-pulse-shrink", {
|
||||
to {
|
||||
.prefixed(transform, scale(.9));
|
||||
}
|
||||
});
|
||||
|
||||
.pulse-shrink() {
|
||||
.hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-pulse-shrink");
|
||||
.prefixed(animation-duration, @mediumDuration);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
.prefixed(animation-iteration-count, infinite);
|
||||
.prefixed(animation-direction, alternate);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,23 @@
|
|||
/* Pulse */
|
||||
.keyframes(~"@{nameSpace}-pulse", {
|
||||
25% {
|
||||
.prefixed(transform, scale(1.1));
|
||||
}
|
||||
|
||||
75% {
|
||||
.prefixed(transform, scale(.9));
|
||||
}
|
||||
});
|
||||
|
||||
.pulse() {
|
||||
.hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-pulse");
|
||||
.prefixed(animation-duration, 1s);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
.prefixed(animation-iteration-count, infinite);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,23 @@
|
|||
/* Push */
|
||||
.keyframes(~"@{nameSpace}-push", {
|
||||
50% {
|
||||
.prefixed(transform, scale(.8));
|
||||
}
|
||||
|
||||
100% {
|
||||
.prefixed(transform, scale(1));
|
||||
}
|
||||
});
|
||||
|
||||
.push() {
|
||||
.hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-push");
|
||||
.prefixed(animation-duration, .3s);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
.prefixed(animation-iteration-count, 1);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,12 @@
|
|||
/* Rotate */
|
||||
.rotate() {
|
||||
.hacks();
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(transform, rotate(4deg));
|
||||
}
|
||||
}
|
|
@ -0,0 +1,12 @@
|
|||
/* Shrink */
|
||||
.shrink() {
|
||||
.hacks();
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(transform, scale(.9));
|
||||
}
|
||||
}
|
|
@ -0,0 +1,13 @@
|
|||
/* Sink */
|
||||
.sink() {
|
||||
.hacks();
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(transform, translateY(8px));
|
||||
}
|
||||
}
|
|
@ -0,0 +1,13 @@
|
|||
/* Skew Backward */
|
||||
.skew-backward() {
|
||||
.hacks();
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transform-origin, 0 100%);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(transform, skew(10deg));
|
||||
}
|
||||
}
|
|
@ -0,0 +1,13 @@
|
|||
/* Skew Forward */
|
||||
.skew-forward() {
|
||||
.hacks();
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transform-origin, 0 100%);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(transform, skew(-10deg));
|
||||
}
|
||||
}
|
|
@ -0,0 +1,12 @@
|
|||
/* Skew */
|
||||
.skew() {
|
||||
.hacks();
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(transform, skew(-10deg));
|
||||
}
|
||||
}
|
|
@ -0,0 +1,40 @@
|
|||
/* Wobble Bottom */
|
||||
.keyframes(~"@{nameSpace}-wobble-bottom", {
|
||||
16.65% {
|
||||
.prefixed(transform, skew(-12deg));
|
||||
}
|
||||
|
||||
33.3% {
|
||||
.prefixed(transform, skew(10deg));
|
||||
}
|
||||
|
||||
49.95% {
|
||||
.prefixed(transform, skew(-6deg));
|
||||
}
|
||||
|
||||
66.6% {
|
||||
.prefixed(transform, skew(4deg));
|
||||
}
|
||||
|
||||
83.25% {
|
||||
.prefixed(transform, skew(-2deg));
|
||||
}
|
||||
|
||||
100% {
|
||||
.prefixed(transform, skew(0));
|
||||
}
|
||||
});
|
||||
|
||||
.wobble-bottom() {
|
||||
.hacks();
|
||||
.prefixed(transform-origin, 100% 0);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-wobble-bottom");
|
||||
.prefixed(animation-duration, 1s);
|
||||
.prefixed(animation-timing-function, ease-in-out);
|
||||
.prefixed(animation-iteration-count, 1);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,39 @@
|
|||
/* Wobble Horizontal */
|
||||
.keyframes(~"@{nameSpace}-wobble-horizontal", {
|
||||
16.65% {
|
||||
.prefixed(transform, translateX(8px));
|
||||
}
|
||||
|
||||
33.3% {
|
||||
.prefixed(transform, translateX(-6px));
|
||||
}
|
||||
|
||||
49.95% {
|
||||
.prefixed(transform, translateX(4px));
|
||||
}
|
||||
|
||||
66.6% {
|
||||
.prefixed(transform, translateX(-2px));
|
||||
}
|
||||
|
||||
83.25% {
|
||||
.prefixed(transform, translateX(1px));
|
||||
}
|
||||
|
||||
100% {
|
||||
.prefixed(transform, translateX(0));
|
||||
}
|
||||
});
|
||||
|
||||
.wobble-horizontal() {
|
||||
.hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-wobble-horizontal");
|
||||
.prefixed(animation-duration, 1s);
|
||||
.prefixed(animation-timing-function, ease-in-out);
|
||||
.prefixed(animation-iteration-count, 1);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,39 @@
|
|||
/* Wobble Skew */
|
||||
.keyframes(~"@{nameSpace}-wobble-skew", {
|
||||
16.65% {
|
||||
.prefixed(transform, skew(-12deg));
|
||||
}
|
||||
|
||||
33.3% {
|
||||
.prefixed(transform, skew(10deg));
|
||||
}
|
||||
|
||||
49.95% {
|
||||
.prefixed(transform, skew(-6deg));
|
||||
}
|
||||
|
||||
66.6% {
|
||||
.prefixed(transform, skew(4deg));
|
||||
}
|
||||
|
||||
83.25% {
|
||||
.prefixed(transform, skew(-2deg));
|
||||
}
|
||||
|
||||
100% {
|
||||
.prefixed(transform, skew(0));
|
||||
}
|
||||
});
|
||||
|
||||
.wobble-skew() {
|
||||
.hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-wobble-skew");
|
||||
.prefixed(animation-duration, 1s);
|
||||
.prefixed(animation-timing-function, ease-in-out);
|
||||
.prefixed(animation-iteration-count, 1);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,39 @@
|
|||
/* Wobble To Bottom Right */
|
||||
.keyframes(~"@{nameSpace}-wobble-to-bottom-right", {
|
||||
16.65% {
|
||||
.prefixed(transform, translate(8px, 8px));
|
||||
}
|
||||
|
||||
33.3% {
|
||||
.prefixed(transform, translate(-6px, -6px));
|
||||
}
|
||||
|
||||
49.95% {
|
||||
.prefixed(transform, translate(4px, 4px));
|
||||
}
|
||||
|
||||
66.6% {
|
||||
.prefixed(transform, translate(-2px, -2px));
|
||||
}
|
||||
|
||||
83.25% {
|
||||
.prefixed(transform, translate(1px, 1px));
|
||||
}
|
||||
|
||||
100% {
|
||||
.prefixed(transform, translate(0, 0));
|
||||
}
|
||||
});
|
||||
|
||||
.wobble-to-bottom-right() {
|
||||
.hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-wobble-to-bottom-right");
|
||||
.prefixed(animation-duration, 1s);
|
||||
.prefixed(animation-timing-function, ease-in-out);
|
||||
.prefixed(animation-iteration-count, 1);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,39 @@
|
|||
/* Wobble To Top Right */
|
||||
.keyframes(~"@{nameSpace}-wobble-to-top-right", {
|
||||
16.65% {
|
||||
.prefixed(transform, translate(8px, -8px));
|
||||
}
|
||||
|
||||
33.3% {
|
||||
.prefixed(transform, translate(-6px, 6px));
|
||||
}
|
||||
|
||||
49.95% {
|
||||
.prefixed(transform, translate(4px, -4px));
|
||||
}
|
||||
|
||||
66.6% {
|
||||
.prefixed(transform, translate(-2px, 2px));
|
||||
}
|
||||
|
||||
83.25% {
|
||||
.prefixed(transform, translate(1px, -1px));
|
||||
}
|
||||
|
||||
100% {
|
||||
.prefixed(transform, translate(0, 0));
|
||||
}
|
||||
});
|
||||
|
||||
.wobble-to-top-right() {
|
||||
.hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-wobble-to-top-right");
|
||||
.prefixed(animation-duration, 1s);
|
||||
.prefixed(animation-timing-function, ease-in-out);
|
||||
.prefixed(animation-iteration-count, 1);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,40 @@
|
|||
/* Wobble Top */
|
||||
.keyframes(~"@{nameSpace}-wobble-top", {
|
||||
16.65% {
|
||||
.prefixed(transform, skew(-12deg));
|
||||
}
|
||||
|
||||
33.3% {
|
||||
.prefixed(transform, skew(10deg));
|
||||
}
|
||||
|
||||
49.95% {
|
||||
.prefixed(transform, skew(-6deg));
|
||||
}
|
||||
|
||||
66.6% {
|
||||
.prefixed(transform, skew(4deg));
|
||||
}
|
||||
|
||||
83.25% {
|
||||
.prefixed(transform, skew(-2deg));
|
||||
}
|
||||
|
||||
100% {
|
||||
.prefixed(transform, skew(0));
|
||||
}
|
||||
});
|
||||
|
||||
.wobble-top() {
|
||||
.hacks();
|
||||
.prefixed(transform-origin, 0 100%);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-wobble-top");
|
||||
.prefixed(animation-duration, 1s);
|
||||
.prefixed(animation-timing-function, ease-in-out);
|
||||
.prefixed(animation-iteration-count, 1);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,39 @@
|
|||
/* Wobble Vertical */
|
||||
.keyframes(~"@{nameSpace}-wobble-vertical", {
|
||||
16.65% {
|
||||
.prefixed(transform, translateY(8px));
|
||||
}
|
||||
|
||||
33.3% {
|
||||
.prefixed(transform, translateY(-6px));
|
||||
}
|
||||
|
||||
49.95% {
|
||||
.prefixed(transform, translateY(4px));
|
||||
}
|
||||
|
||||
66.6% {
|
||||
.prefixed(transform, translateY(-2px));
|
||||
}
|
||||
|
||||
83.25% {
|
||||
.prefixed(transform, translateY(1px));
|
||||
}
|
||||
|
||||
100% {
|
||||
.prefixed(transform, translateY(0));
|
||||
}
|
||||
});
|
||||
|
||||
.wobble-vertical() {
|
||||
.hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-wobble-vertical");
|
||||
.prefixed(animation-duration, 1s);
|
||||
.prefixed(animation-timing-function, ease-in-out);
|
||||
.prefixed(animation-iteration-count, 1);
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,34 @@
|
|||
/* Bounce To Bottom */
|
||||
.bounce-to-bottom() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
.prefixed(transition-property, color);
|
||||
.prefixed(transition-duration, @slowDuration);
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: @activeColor;
|
||||
.prefixed(transform, scaleY(0));
|
||||
.prefixed(transform-origin, 50% 0);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-duration, @slowDuration);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: white;
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, scaleY(1));
|
||||
.prefixed(transition-timing-function, cubic-bezier(.52,1.64,.37,.66));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,34 @@
|
|||
/* Bounce To Left */
|
||||
.bounce-to-left() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
.prefixed(transition-property, color);
|
||||
.prefixed(transition-duration, @slowDuration);
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: @activeColor;
|
||||
.prefixed(transform, scaleX(0));
|
||||
.prefixed(transform-origin, 100% 50%);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-duration, @slowDuration);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: white;
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, scaleX(1));
|
||||
.prefixed(transition-timing-function, cubic-bezier(.52,1.64,.37,.66));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,34 @@
|
|||
/* Bounce To Right */
|
||||
.bounce-to-right() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
.prefixed(transition-property, color);
|
||||
.prefixed(transition-duration, @slowDuration);
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: @activeColor;
|
||||
.prefixed(transform, scaleX(0));
|
||||
.prefixed(transform-origin, 0 50%);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-duration, @slowDuration);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: white;
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, scaleX(1));
|
||||
.prefixed(transition-timing-function, cubic-bezier(.52,1.64,.37,.66));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,34 @@
|
|||
/* Bounce To Top */
|
||||
.bounce-to-top() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
.prefixed(transition-property, color);
|
||||
.prefixed(transition-duration, @slowDuration);
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: @activeColor;
|
||||
.prefixed(transform, scaleY(0));
|
||||
.prefixed(transform-origin, 50% 100%);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-duration, @slowDuration);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: white;
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, scaleY(1));
|
||||
.prefixed(transition-timing-function, cubic-bezier(.52,1.64,.37,.66));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,14 @@
|
|||
/* Fade */
|
||||
.fade() {
|
||||
.hacks();
|
||||
overflow: hidden;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, ~"color, background-color");
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: @activeColor;
|
||||
color: white;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,35 @@
|
|||
/* Radial In */
|
||||
.radial-in() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: @activeColor;
|
||||
.prefixed(transition-property, color);
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: @primaryColor;
|
||||
border-radius: 100%;
|
||||
.prefixed(transform, scale(2));
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: white;
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, scale(0));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,35 @@
|
|||
/* Radial Out */
|
||||
.radial-out() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: @primaryColor;
|
||||
.prefixed(transition-property, color);
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: @activeColor;
|
||||
border-radius: 100%;
|
||||
.prefixed(transform, scale(0));
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: white;
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, scale(2));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,33 @@
|
|||
/* Rectangle In */
|
||||
.rectangle-in() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
background: @activeColor;
|
||||
.prefixed(transition-property, color);
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: @primaryColor;
|
||||
.prefixed(transform, scale(1));
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: white;
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, scale(0));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,33 @@
|
|||
/* Rectangle Out */
|
||||
.rectangle-out() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
background: @primaryColor;
|
||||
.prefixed(transition-property, color);
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: @activeColor;
|
||||
.prefixed(transform, scale(0));
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: white;
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, scale(1));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,34 @@
|
|||
/* Shutter In Horizontal */
|
||||
.shutter-in-horizontal() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
background: @activeColor;
|
||||
.prefixed(transition-property, color);
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: @primaryColor;
|
||||
.prefixed(transform, scaleX(1));
|
||||
.prefixed(transform-origin, 50%);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: white;
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, scaleX(0));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,34 @@
|
|||
/* Shutter In Vertical */
|
||||
.shutter-in-vertical() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
background: @activeColor;
|
||||
.prefixed(transition-property, color);
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: @primaryColor;
|
||||
.prefixed(transform, scaleY(1));
|
||||
.prefixed(transform-origin, 50%);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: white;
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, scaleY(0));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,34 @@
|
|||
/* Shutter Out Horizontal */
|
||||
.shutter-out-horizontal() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
background: @primaryColor;
|
||||
.prefixed(transition-property, color);
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: @activeColor;
|
||||
.prefixed(transform, scaleX(0));
|
||||
.prefixed(transform-origin, 50%);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: white;
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, scaleX(1));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,34 @@
|
|||
/* Shutter Out Vertical */
|
||||
.shutter-out-vertical() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
background: @primaryColor;
|
||||
.prefixed(transition-property, color);
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: @activeColor;
|
||||
.prefixed(transform, scaleY(0));
|
||||
.prefixed(transform-origin, 50%);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: white;
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, scaleY(1));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,33 @@
|
|||
/* Sweep To Bottom */
|
||||
.sweep-to-bottom() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
.prefixed(transition-property, color);
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: @activeColor;
|
||||
.prefixed(transform, scaleY(0));
|
||||
.prefixed(transform-origin, 50% 0);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: white;
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, scaleY(1));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,33 @@
|
|||
/* Sweep To Left */
|
||||
.sweep-to-left() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
.prefixed(transition-property, color);
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: @activeColor;
|
||||
.prefixed(transform, scaleX(0));
|
||||
.prefixed(transform-origin, 100% 50%);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: white;
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, scaleX(1));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,33 @@
|
|||
/* Sweep To Right */
|
||||
.sweep-to-right() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
.prefixed(transition-property, color);
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: @activeColor;
|
||||
.prefixed(transform, scaleX(0));
|
||||
.prefixed(transform-origin, 0 50%);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: white;
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, scaleX(1));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,33 @@
|
|||
/* Sweep To Top */
|
||||
.sweep-to-top() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
.prefixed(transition-property, color);
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: @activeColor;
|
||||
.prefixed(transform, scaleY(0));
|
||||
.prefixed(transform-origin, 50% 100%);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: white;
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, scaleY(1));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,19 @@
|
|||
/* Border Fade */
|
||||
.border-fade() {
|
||||
@borderWidth: 4px;
|
||||
|
||||
.hacks();
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, box-shadow);
|
||||
box-shadow:
|
||||
inset 0 0 0 @borderWidth @primaryColor,
|
||||
0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
box-shadow:
|
||||
inset 0 0 0 @borderWidth @activeColor,
|
||||
0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */
|
||||
}
|
||||
}
|
|
@ -0,0 +1,17 @@
|
|||
/* Hollow */
|
||||
.hollow() {
|
||||
@borderWidth: 4px;
|
||||
|
||||
.hacks();
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, background);
|
||||
box-shadow:
|
||||
inset 0 0 0 @borderWidth @primaryColor,
|
||||
0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: none;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,32 @@
|
|||
/* Outline In */
|
||||
.outline-in() {
|
||||
@outerBorderWidth: 4px;
|
||||
@innerBorderWidth: 4px;
|
||||
|
||||
.hacks();
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
position: absolute;
|
||||
border: @primaryColor solid @outerBorderWidth;
|
||||
top: -(@outerBorderWidth + @innerBorderWidth) * 2;
|
||||
right: -(@outerBorderWidth + @innerBorderWidth) * 2;
|
||||
bottom: -(@outerBorderWidth + @innerBorderWidth) * 2;
|
||||
left: -(@outerBorderWidth + @innerBorderWidth) * 2;
|
||||
opacity: 0;
|
||||
.prefixed(transition-duration, .3s);
|
||||
.prefixed(transition-property, "top, right, bottom, left");
|
||||
}
|
||||
|
||||
&:hover:before,
|
||||
&:focus:before,
|
||||
&:active:before {
|
||||
top: -(@outerBorderWidth + @innerBorderWidth);
|
||||
right: -(@outerBorderWidth + @innerBorderWidth);
|
||||
bottom: -(@outerBorderWidth + @innerBorderWidth);
|
||||
left: -(@outerBorderWidth + @innerBorderWidth);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,29 @@
|
|||
/* Outline Out */
|
||||
.outline-out() {
|
||||
@outerBorderWidth: 4px;
|
||||
@innerBorderWidth: 4px;
|
||||
|
||||
.hacks();
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border: @primaryColor solid @outerBorderWidth;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
.prefixed(transition-duration, .3s);
|
||||
.prefixed(transition-property, "top, right, bottom, left");
|
||||
}
|
||||
|
||||
&:hover:before,
|
||||
&:focus:before,
|
||||
&:active:before {
|
||||
top: -(@outerBorderWidth + @innerBorderWidth);
|
||||
right: -(@outerBorderWidth + @innerBorderWidth);
|
||||
bottom: -(@outerBorderWidth + @innerBorderWidth);
|
||||
left: -(@outerBorderWidth + @innerBorderWidth);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,32 @@
|
|||
/* Overline From Center */
|
||||
.overline-from-center() {
|
||||
@duration: @mediumDuration;
|
||||
|
||||
.hacks();
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 51%;
|
||||
right: 51%;
|
||||
top: 0;
|
||||
background: @activeColor;
|
||||
height: 4px;
|
||||
.prefixed(transition-property, "left, right");
|
||||
.prefixed(transition-duration, @duration);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,31 @@
|
|||
/* Overline From Left */
|
||||
.overline-from-left() {
|
||||
@duration: @mediumDuration;
|
||||
|
||||
.hacks();
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
right: 100%;
|
||||
top: 0;
|
||||
background: @activeColor;
|
||||
height: 4px;
|
||||
.prefixed(transition-property, "right");
|
||||
.prefixed(transition-duration, @duration);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,31 @@
|
|||
/* Overline From Right */
|
||||
.overline-from-right() {
|
||||
@duration: @mediumDuration;
|
||||
|
||||
.hacks();
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background: @activeColor;
|
||||
height: 4px;
|
||||
.prefixed(transition-property, "left");
|
||||
.prefixed(transition-duration, @duration);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,32 @@
|
|||
/* Overline Reveal */
|
||||
.overline-reveal() {
|
||||
@duration: @mediumDuration;
|
||||
|
||||
.hacks();
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background: @activeColor;
|
||||
height: 4px;
|
||||
.prefixed(transform, translateY(-4px));
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-duration, @duration);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, translateY(0));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,34 @@
|
|||
/* Reveal */
|
||||
.reveal() {
|
||||
@duration: @fastDuration;
|
||||
|
||||
.hacks();
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-color: @activeColor;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
.prefixed(transition-property, border-width);
|
||||
.prefixed(transition-duration, @duration);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, translateY(0));
|
||||
border-width: 4px;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,36 @@
|
|||
/* Ripple In */
|
||||
.keyframes(~"@{nameSpace}-ripple-in", {
|
||||
100% {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
});
|
||||
|
||||
.ripple-in() {
|
||||
@outerBorderWidth: 4px;
|
||||
@innerBorderWidth: 4px;
|
||||
|
||||
.hacks();
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border: @primaryColor solid @outerBorderWidth;
|
||||
top: -(6px + 6px);
|
||||
right: -(6px + 6px);
|
||||
bottom: -(6px + 6px);
|
||||
left: -(6px + 6px);
|
||||
opacity: 0;
|
||||
.prefixed(animation-duration, 1s);
|
||||
}
|
||||
|
||||
&:hover:before,
|
||||
&:focus:before,
|
||||
&:active:before {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-ripple-in");
|
||||
}
|
||||
}
|
|
@ -0,0 +1,35 @@
|
|||
/* Ripple Out */
|
||||
.keyframes(~"@{nameSpace}-ripple-out", {
|
||||
100% {
|
||||
top: -(6px + 6px);
|
||||
right: -(6px + 6px);
|
||||
bottom: -(6px + 6px);
|
||||
left: -(6px + 6px);
|
||||
opacity: 0;
|
||||
}
|
||||
});
|
||||
|
||||
.ripple-out() {
|
||||
@outerBorderWidth: 6px;
|
||||
@innerBorderWidth: 6px;
|
||||
|
||||
.hacks();
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border: @primaryColor solid @outerBorderWidth;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
.prefixed(animation-duration, 1s);
|
||||
}
|
||||
|
||||
&:hover:before,
|
||||
&:focus:before,
|
||||
&:active:before {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-ripple-out");
|
||||
}
|
||||
}
|
|
@ -0,0 +1,12 @@
|
|||
/* Round Corners */
|
||||
.round-corners() {
|
||||
.hacks();
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, border-radius);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
border-radius: 1em;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,27 @@
|
|||
/* Trim */
|
||||
.trim() {
|
||||
@outerBorderWidth: 4px;
|
||||
@innerBorderWidth: 4px;
|
||||
|
||||
.hacks();
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border: white solid @innerBorderWidth;
|
||||
top: @outerBorderWidth;
|
||||
left: @outerBorderWidth;
|
||||
right: @outerBorderWidth;
|
||||
bottom: @outerBorderWidth;
|
||||
opacity: 0;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, opacity);
|
||||
}
|
||||
|
||||
&:hover:before,
|
||||
&:focus:before,
|
||||
&:active:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,32 @@
|
|||
/* Underline From Center */
|
||||
.underline-from-center() {
|
||||
@duration: @mediumDuration;
|
||||
|
||||
.hacks();
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 51%;
|
||||
right: 51%;
|
||||
bottom: 0;
|
||||
background: @activeColor;
|
||||
height: 4px;
|
||||
.prefixed(transition-property, "left, right");
|
||||
.prefixed(transition-duration, @duration);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,31 @@
|
|||
/* Underline From Left */
|
||||
.underline-from-left() {
|
||||
@duration: @mediumDuration;
|
||||
|
||||
.hacks();
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
right: 100%;
|
||||
bottom: 0;
|
||||
background: @activeColor;
|
||||
height: 4px;
|
||||
.prefixed(transition-property, "right");
|
||||
.prefixed(transition-duration, @duration);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,31 @@
|
|||
/* Underline From Right */
|
||||
.underline-from-right() {
|
||||
@duration: @mediumDuration;
|
||||
|
||||
.hacks();
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 100%;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: @activeColor;
|
||||
height: 4px;
|
||||
.prefixed(transition-property, "left");
|
||||
.prefixed(transition-duration, @duration);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,32 @@
|
|||
/* Underline Reveal */
|
||||
.underline-reveal() {
|
||||
@duration: @mediumDuration;
|
||||
|
||||
.hacks();
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: @activeColor;
|
||||
height: 4px;
|
||||
.prefixed(transform, translateY(4px));
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-duration, @duration);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, translateY(0));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,33 @@
|
|||
/* Curl Bottom Left */
|
||||
.curl-bottom-left() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 0;
|
||||
width: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: @revealAreaColor; /* IE9 */
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
@revealAreaColor 45%,
|
||||
@curlLineColor 50%,
|
||||
@curlTransitionColor 56%,
|
||||
@curlLastColor 80%
|
||||
);
|
||||
box-shadow: 1px -1px 1px rgba(0, 0, 0, .4);
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, ~"width, height");
|
||||
}
|
||||
|
||||
&:hover:before,
|
||||
&:focus:before,
|
||||
&:active:before {
|
||||
width: @curlWidth;
|
||||
height: @curlHeight;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,33 @@
|
|||
/* Curl Bottom Right */
|
||||
.curl-bottom-right() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 0;
|
||||
width: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: @revealAreaColor; /* IE9 */
|
||||
background: linear-gradient(
|
||||
315deg,
|
||||
@revealAreaColor 45%,
|
||||
@curlLineColor 50%,
|
||||
@curlTransitionColor 56%,
|
||||
@curlLastColor 80%
|
||||
);
|
||||
box-shadow: -1px -1px 1px rgba(0, 0, 0, .4);
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, ~"width, height");
|
||||
}
|
||||
|
||||
&:hover:before,
|
||||
&:focus:before,
|
||||
&:active:before {
|
||||
width: @curlWidth;
|
||||
height: @curlHeight;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,36 @@
|
|||
/* Curl Top Left */
|
||||
.curl-top-left() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 0;
|
||||
width: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: @revealAreaColor; /* IE9 */
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
@revealAreaColor 45%,
|
||||
@curlLineColor 50%,
|
||||
@curlTransitionColor 56%,
|
||||
@curlLastColor 80%
|
||||
);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/
|
||||
|
||||
z-index: 1000;
|
||||
box-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, ~"width, height");
|
||||
}
|
||||
|
||||
&:hover:before,
|
||||
&:focus:before,
|
||||
&:active:before {
|
||||
width: @curlWidth;
|
||||
height: @curlHeight;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,33 @@
|
|||
/* Curl Top Right */
|
||||
.curl-top-right() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 0;
|
||||
width: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: @revealAreaColor; /* IE9 */
|
||||
background: linear-gradient(
|
||||
225deg,
|
||||
@revealAreaColor 45%,
|
||||
@curlLineColor 50%,
|
||||
@curlTransitionColor 56%,
|
||||
@curlLastColor 80%
|
||||
);
|
||||
box-shadow: -1px 1px 1px rgba(0, 0, 0, .4);
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, ~"width, height");
|
||||
}
|
||||
|
||||
&:hover:before,
|
||||
&:focus:before,
|
||||
&:active:before {
|
||||
width: @curlWidth;
|
||||
height: @curlHeight;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,21 @@
|
|||
/* Icon Back */
|
||||
.icon-back() {
|
||||
.hacks();
|
||||
.prefixed(transition-duration, @fastDuration);
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @fastDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateX(-4px));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,42 @@
|
|||
/* Icon Bob */
|
||||
.keyframes(~"@{nameSpace}-icon-bob", {
|
||||
0% {
|
||||
.prefixed(transform, translateY(-6px));
|
||||
}
|
||||
50% {
|
||||
.prefixed(transform, translateY(-2px));
|
||||
}
|
||||
100% {
|
||||
.prefixed(transform, translateY(-6px));
|
||||
}
|
||||
});
|
||||
|
||||
.keyframes(~"@{nameSpace}-icon-bob-float", {
|
||||
100% {
|
||||
.prefixed(transform, translateY(-6px));
|
||||
}
|
||||
});
|
||||
|
||||
.icon-bob() {
|
||||
.hacks();
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-bob-float, @{nameSpace}-icon-bob");
|
||||
.prefixed(animation-duration, ~".3s, 1.5s");
|
||||
.prefixed(animation-delay, ~"0s, .3s");
|
||||
.prefixed(animation-timing-function, ~"ease-out, ease-in-out");
|
||||
.prefixed(animation-iteration-count, ~"1, infinite");
|
||||
.prefixed(animation-fill-mode, ~"forwards");
|
||||
.prefixed(animation-direction, ~"normal, alternate");
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,28 @@
|
|||
/* Icon Bounce Out */
|
||||
.keyframes(~"@{nameSpace}-icon-bounce-out", {
|
||||
50% {
|
||||
.prefixed(transform, scale(1.5));
|
||||
}
|
||||
});
|
||||
|
||||
.icon-bounce-out() {
|
||||
.hacks();
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(transform, scale(.9));
|
||||
.prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,23 @@
|
|||
/* Icon Bounce */
|
||||
|
||||
.icon-bounce() {
|
||||
.hacks();
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(transform, scale(1.5));
|
||||
.prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,63 @@
|
|||
/* Icon Buzz Out */
|
||||
.keyframes(~"@{nameSpace}-icon-buzz-out", {
|
||||
10% {
|
||||
.prefixed(transform, translateX(3px) rotate(2deg));
|
||||
}
|
||||
|
||||
20% {
|
||||
.prefixed(transform, translateX(-3px) rotate(-2deg));
|
||||
}
|
||||
|
||||
30% {
|
||||
.prefixed(transform, translateX(3px) rotate(2deg));
|
||||
}
|
||||
|
||||
40% {
|
||||
.prefixed(transform, translateX(-3px) rotate(-2deg));
|
||||
}
|
||||
|
||||
50% {
|
||||
.prefixed(transform, translateX(2px) rotate(1deg));
|
||||
}
|
||||
|
||||
60% {
|
||||
.prefixed(transform, translateX(-2px) rotate(-1deg));
|
||||
}
|
||||
|
||||
70% {
|
||||
.prefixed(transform, translateX(2px) rotate(1deg));
|
||||
}
|
||||
|
||||
80% {
|
||||
.prefixed(transform, translateX(-2px) rotate(-1deg));
|
||||
}
|
||||
|
||||
90% {
|
||||
.prefixed(transform, translateX(1px) rotate(0));
|
||||
}
|
||||
|
||||
100% {
|
||||
.prefixed(transform, translateX(-1px) rotate(0));
|
||||
}
|
||||
});
|
||||
|
||||
.icon-buzz-out() {
|
||||
.hacks();
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-buzz-out");
|
||||
.prefixed(animation-duration, .75s);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
.prefixed(animation-iteration-count, 1);
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,31 @@
|
|||
/* Icon Buzz */
|
||||
.keyframes(~"@{nameSpace}-icon-buzz", {
|
||||
50% {
|
||||
.prefixed(transform, translateX(3px) rotate(2deg));
|
||||
}
|
||||
|
||||
100% {
|
||||
.prefixed(transform, translateX(-3px) rotate(-2deg));
|
||||
}
|
||||
});
|
||||
|
||||
.icon-buzz() {
|
||||
.hacks();
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-buzz");
|
||||
.prefixed(animation-duration, .15s);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
.prefixed(animation-iteration-count, infinite);
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,32 @@
|
|||
/* Icon Down */
|
||||
.keyframes(~"@{nameSpace}-icon-down", {
|
||||
0%,
|
||||
50%,
|
||||
100% {
|
||||
.prefixed(transform, translateY(0));
|
||||
}
|
||||
25%,
|
||||
75% {
|
||||
.prefixed(transform, translateY(6px));
|
||||
}
|
||||
});
|
||||
|
||||
/* Icon Down */
|
||||
.icon-down() {
|
||||
.hacks();
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-down");
|
||||
.prefixed(animation-duration, .75s);
|
||||
.prefixed(animation-timing-function, ease-out);
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,42 @@
|
|||
/* Icon Drop */
|
||||
.keyframes(~"@{nameSpace}-icon-drop", {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0;
|
||||
.prefixed(transform, translateY(-100%));
|
||||
}
|
||||
|
||||
51%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
});
|
||||
|
||||
/* Icon Drop */
|
||||
.icon-drop() {
|
||||
.hacks();
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
.hvr-icon {
|
||||
opacity: 0;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-drop");
|
||||
.prefixed(animation-duration, @slowDuration);
|
||||
.prefixed(animation-delay, @mediumDuration);
|
||||
.prefixed(animation-fill-mode, forwards);
|
||||
.prefixed(animation-timing-function, ease-in-out);
|
||||
.prefixed(animation-timing-function, cubic-bezier(.52,1.64,.37,.66));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,19 @@
|
|||
/* Icon Fade */
|
||||
.icon-fade() {
|
||||
.hacks();
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, .5s);
|
||||
.prefixed(transition-property, color);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
.hvr-icon {
|
||||
color: #0F9E5E;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,32 @@
|
|||
/* Icon Float Away */
|
||||
.keyframes(~"@{nameSpace}-icon-float-away", {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
.prefixed(transform, translateY(-1em));
|
||||
}
|
||||
});
|
||||
|
||||
/* Icon Float Away */
|
||||
.icon-float-away() {
|
||||
.hacks();
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(animation-duration, @slowDuration);
|
||||
.prefixed(animation-fill-mode, forwards);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-float-away");
|
||||
.prefixed(animation-timing-function, ease-out);
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,21 @@
|
|||
/* Icon Float */
|
||||
.icon-float() {
|
||||
.hacks();
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateY(-4px));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,21 @@
|
|||
/* Icon Forward */
|
||||
.icon-forward() {
|
||||
.hacks();
|
||||
.prefixed(transition-duration, @fastDuration);
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @fastDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateX(4px));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,23 @@
|
|||
/* Icon Grow Rotate */
|
||||
.icon-grow-rotate() {
|
||||
@duration: @mediumDuration;
|
||||
|
||||
.hacks();
|
||||
.prefixed(transition-duration, @duration);
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @duration);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(transform, scale(1.5) rotate(12deg));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,21 @@
|
|||
/* Icon Grow */
|
||||
.icon-grow() {
|
||||
.hacks();
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(transform, scale(1.3) translateZ(0));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,42 @@
|
|||
/* Icon Hang */
|
||||
.keyframes(~"@{nameSpace}-icon-hang", {
|
||||
0% {
|
||||
.prefixed(transform, translateY(6px));
|
||||
}
|
||||
50% {
|
||||
.prefixed(transform, translateY(2px));
|
||||
}
|
||||
100% {
|
||||
.prefixed(transform, translateY(6px));
|
||||
}
|
||||
});
|
||||
|
||||
.keyframes(~"@{nameSpace}-icon-hang-sink", {
|
||||
100% {
|
||||
.prefixed(transform, translateY(6px));
|
||||
}
|
||||
});
|
||||
|
||||
.icon-hang() {
|
||||
.hacks();
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-hang-sink, @{nameSpace}-icon-hang");
|
||||
.prefixed(animation-duration, ~".3s, 1.5s");
|
||||
.prefixed(animation-delay, ~"0s, .3s");
|
||||
.prefixed(animation-timing-function, ~"ease-out, ease-in-out");
|
||||
.prefixed(animation-iteration-count, ~"1, infinite");
|
||||
.prefixed(animation-fill-mode, ~"forwards");
|
||||
.prefixed(animation-direction, ~"normal, alternate");
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,30 @@
|
|||
/* Icon Pop */
|
||||
.keyframes(~"@{nameSpace}-icon-pop", {
|
||||
50% {
|
||||
.prefixed(transform, scale(1.5));
|
||||
}
|
||||
});
|
||||
|
||||
.icon-pop() {
|
||||
.hacks();
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-pop");
|
||||
.prefixed(animation-duration, @mediumDuration);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
.prefixed(animation-iteration-count, 1);
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,28 @@
|
|||
/* Icon Pulse Grow */
|
||||
.keyframes(~"@{nameSpace}-icon-pulse-grow", {
|
||||
to {
|
||||
.prefixed(transform, scale(1.3));
|
||||
}
|
||||
});
|
||||
|
||||
.icon-pulse-grow() {
|
||||
.hacks();
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-pulse-grow");
|
||||
.prefixed(animation-duration, @mediumDuration);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
.prefixed(animation-iteration-count, infinite);
|
||||
.prefixed(animation-direction, alternate);
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,28 @@
|
|||
/* Icon Pulse Shrink */
|
||||
.keyframes(~"@{nameSpace}-icon-pulse-shrink", {
|
||||
to {
|
||||
.prefixed(transform, scale(.8));
|
||||
}
|
||||
});
|
||||
|
||||
.icon-pulse-shrink() {
|
||||
.hacks();
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-pulse-shrink");
|
||||
.prefixed(animation-duration, @mediumDuration);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
.prefixed(animation-iteration-count, infinite);
|
||||
.prefixed(animation-direction, alternate);
|
||||
}
|
||||
}
|
||||
}
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue