mirror of https://github.com/IanLunn/Hover.git
Merge v2 with master
This commit is contained in:
IanLunn
commit
7fc7c36e6b
54
Gruntfile.js
54
Gruntfile.js
|
|
@ -3,6 +3,19 @@ module.exports = function(grunt) {
|
|||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
|
||||
version: {
|
||||
json: {
|
||||
src: ['bower.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
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
## 2.0.0 - Jan 7, 2014
|
||||
|
||||
- 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
|
||||
258
README.md
258
README.md
|
|
@ -1,152 +1,236 @@
|
|||
#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 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 and Tutorial
|
||||
[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.
|
||||
|
||||
##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.
|
||||
### 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.
|
||||
|
||||
###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.
|
||||
Assuming you want to use the Grow effect:
|
||||
|
||||
Assuming you want to use the `Grow` effect:
|
||||
1. Download Hover.css
|
||||
2. In `css/hover.css`, find the Grow CSS (each effect is named using a comment above it):
|
||||
|
||||
1. Download hover.css
|
||||
2. In hover.css, find the 'Grow' CSS (each effect is named using a comment above it):
|
||||
|
||||
```css
|
||||
/* Grow */
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.grow:hover {
|
||||
-webkit-transform: scale(1.1);
|
||||
-ms-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
```
|
||||
```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
|
||||
### 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>
|
||||
```
|
||||
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
|
||||
|
||||
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 FontAwesome with Icon Effects
|
||||
|
||||
Hover.css uses [FontAwesome](https://fortawesome.github.io/Font-Awesome/) for its icon effects. For these effects to work, a reference to the FontAwesome stylesheet must be added by placing the following in the `<head></head>` of your web page:
|
||||
|
||||
```html
|
||||
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
|
||||
```
|
||||
|
||||
Hover.css icons are added to elements via the `:before` pseudo-element. Let's take the Icon Forward effect as an example (browser prefixes and additional styles removed for brevity):
|
||||
|
||||
```css
|
||||
.hvr-icon-forward:before {
|
||||
content: "\f138";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
transform: translateZ(0);
|
||||
transition-duration: 0.1s;
|
||||
transition-property: transform;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
```
|
||||
|
||||
What's important in the above example are the `font-family` and `content` declarations. `font-family: FontAwesome` tells the browser we want to use a FontAwesome icon in this pseudo-element, and the `content` value says which one. Should you wish to change the icon, change the value of the `content` property. A [full list of the values and the icon they represent can be found here](http://astronautweb.co/snippet/font-awesome/#font-awesome-list).
|
||||
|
||||
If you'd rather not tamper with Hover.css itself, you can override the default content value simply by declaring the same declaration again (providing it be declared after the default one either in Hover.css or another stylesheet):
|
||||
|
||||
```css
|
||||
.hvr-icon-forward:before {
|
||||
content: "\f001";
|
||||
}
|
||||
```
|
||||
|
||||
The Icon Forward effect will then display a musical note that moves forward when hovered over (instead of the default arrow in a circle).
|
||||
|
||||
## What's Included?
|
||||
|
||||
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 9
|
||||
- [Transforms](http://caniuse.com/#search=transforms) - not supported below Internet Explorer 10
|
||||
- [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/). 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-sass-less-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.ess` 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.
|
||||
## 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.
|
||||
|
||||
##Support Future Development
|
||||
Retaining the author information at the top of `css/hover.css` and placing it on your credits page or humans.txt is much appreciated.
|
||||
|
||||
## Hire Ian Lunn
|
||||
|
||||
[Ian Lunn](http://ianlunn.co.uk) is a Freelance Front-end Developer and author of [CSS3 Foundations](http://css3foundations.com/).
|
||||
|
||||
Hire [Ian](http://ianlunn.co.uk) for responsive websites, WordPress websites, JavaScript, animation, and optimization.
|
||||
|
||||
## Support Future Development
|
||||
|
||||
To support the future development of Hover.css and other open source projects created by [Ian Lunn](https://github.com/IanLunn), please consider making a donation.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,16 @@
|
|||
{
|
||||
"name": "Hover.css",
|
||||
"version": "1.0.10",
|
||||
"version": "2.0.0",
|
||||
"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",
|
||||
|
|
|
|||
|
|
@ -10,26 +10,92 @@
|
|||
* Hover.css Copyright Ian Lunn 2014.
|
||||
*/
|
||||
|
||||
/**
|
||||
* 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;
|
||||
padding: 40px 20px 20px 20px;
|
||||
font-family: sans-serif;
|
||||
color: #333;
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
.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-"] {
|
||||
/*display: inline-block;*/
|
||||
/*vertical-align: middle;*/
|
||||
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);
|
||||
}
|
||||
|
||||
.aligncenter {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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,
|
||||
.tutorial:hover {
|
||||
color: #207AD1;
|
||||
}
|
||||
|
||||
.tutorial {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
font-size: .8em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tutorial:hover,
|
||||
|
|
@ -40,13 +106,13 @@ img {
|
|||
|
||||
.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,8 +121,8 @@ img {
|
|||
color: white;
|
||||
}
|
||||
|
||||
#effects {
|
||||
margin-top: 5em;
|
||||
.effects {
|
||||
margin-top: 6em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -86,16 +152,11 @@ h2 {
|
|||
|
||||
.credit {
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
.footer a:hover,
|
||||
.footer a:focus,
|
||||
.footer a:active {
|
||||
text-decoration: underline;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.social {
|
||||
margin-top: 2em;
|
||||
margin-top: 2.6em;
|
||||
}
|
||||
|
||||
.social-button {
|
||||
|
|
@ -103,17 +164,35 @@ h2 {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.twitter-follow-button {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.follow {
|
||||
margin-bottom: 20px;
|
||||
line-height: 200%;
|
||||
}
|
||||
|
||||
.author {
|
||||
margin: 6em auto 0 auto;
|
||||
text-align: center;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.author [class^="hvr-"] {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.author .logo {
|
||||
display: block;
|
||||
margin-bottom: .8em;
|
||||
}
|
||||
|
||||
#forkongithub {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#forkongithub a {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
|
|
@ -132,7 +211,7 @@ h2 {
|
|||
#forkongithub a:hover,
|
||||
#forkongithub a:focus,
|
||||
#forkongithub a:active {
|
||||
background: #060;
|
||||
background: #2098D1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
|
@ -153,7 +232,7 @@ h2 {
|
|||
top: auto;
|
||||
}
|
||||
|
||||
@media screen and (min-width:800px) {
|
||||
@media screen and (min-width: 640px) {
|
||||
#forkongithub {
|
||||
position: absolute;
|
||||
display: block;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
3854
css/hover.css
3854
css/hover.css
File diff suppressed because it is too large
Load Diff
246
index.html
246
index.html
|
|
@ -8,93 +8,172 @@
|
|||
<title>Hover.css - A collection of CSS3 powered hover effects</title>
|
||||
<link href="css/demo-page.css" rel="stylesheet" media="all">
|
||||
<link href="css/hover.css" rel="stylesheet" media="all">
|
||||
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
|
||||
</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="http://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="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>
|
||||
<h1>Hover.css <a href="https://github.com/IanLunn/Hover/releases" class="sup" title="View release history">v2</a></h1>
|
||||
|
||||
<p class="intro">A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, SASS, and LESS.</p>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="social-button">
|
||||
<a href="https://twitter.com/share" class="twitter-share-button" data-related="IanLunn" data-dnt="true">Tweet</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="effects">
|
||||
<div class="aligncenter">
|
||||
<a class="button cta hvr-float-shadow" href="https://github.com/IanLunn/Hover">Download on GitHub</a><br />
|
||||
<a class="tutorial hvr-pop" href="http://ianlunn.co.uk/articles/hover-css-tutorial-introduction/">Read Tutorial →</a>
|
||||
</div>
|
||||
|
||||
<h2>2D Transforms</h2>
|
||||
<div class="effects">
|
||||
|
||||
<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>2D Transitions</h2>
|
||||
|
||||
<a href="#" class="hvr-grow">Grow</a>
|
||||
<a href="#" class="hvr-shrink">Shrink</a>
|
||||
<a href="#" class="hvr-pulse">Pulse</a>
|
||||
<a href="#" class="hvr-pulse-grow">Pulse Grow</a>
|
||||
<a href="#" class="hvr-pulse-shrink">Pulse Shrink</a>
|
||||
<a href="#" class="hvr-push">Push</a>
|
||||
<a href="#" class="hvr-pop">Pop</a>
|
||||
<a href="#" class="hvr-bounce-in">Bounce In</a>
|
||||
<a href="#" class="hvr-bounce-out">Bounce Out</a>
|
||||
<a href="#" class="hvr-rotate">Rotate</a>
|
||||
<a href="#" class="hvr-grow-rotate">Grow Rotate</a>
|
||||
<a href="#" class="hvr-float">Float</a>
|
||||
<a href="#" class="hvr-sink">Sink</a>
|
||||
<a href="#" class="hvr-bob">Bob</a>
|
||||
<a href="#" class="hvr-hang">Hang</a>
|
||||
<a href="#" class="hvr-skew">Skew</a>
|
||||
<a href="#" class="hvr-skew-forward">Skew Forward</a>
|
||||
<a href="#" class="hvr-skew-backward">Skew Backward</a>
|
||||
<a href="#" class="hvr-wobble-horizontal">Wobble Horizontal</a>
|
||||
<a href="#" class="hvr-wobble-vertical">Wobble Vertical</a>
|
||||
<a href="#" class="hvr-wobble-to-bottom-right">Wobble To Bottom Right</a>
|
||||
<a href="#" class="hvr-wobble-to-top-right">Wobble To Top Right</a>
|
||||
<a href="#" class="hvr-wobble-top">Wobble Top</a>
|
||||
<a href="#" class="hvr-wobble-bottom">Wobble Bottom</a>
|
||||
<a href="#" class="hvr-wobble-skew">Wobble Skew</a>
|
||||
<a href="#" class="hvr-buzz">Buzz</a>
|
||||
<a href="#" class="hvr-buzz-out">Buzz Out</a>
|
||||
|
||||
|
||||
<h2>Background Transitions</h2>
|
||||
|
||||
<a href="#" class="hvr-fade">Fade</a>
|
||||
<a href="#" class="hvr-sweep-to-right">Sweep To Right</a>
|
||||
<a href="#" class="hvr-sweep-to-left">Sweep To Left</a>
|
||||
<a href="#" class="hvr-sweep-to-bottom">Sweep To Bottom</a>
|
||||
<a href="#" class="hvr-sweep-to-top">Sweep To Top</a>
|
||||
<a href="#" class="hvr-bounce-to-right">Bounce To Right</a>
|
||||
<a href="#" class="hvr-bounce-to-left">Bounce To Left</a>
|
||||
<a href="#" class="hvr-bounce-to-bottom">Bounce To Bottom</a>
|
||||
<a href="#" class="hvr-bounce-to-top">Bounce To Top</a>
|
||||
<a href="#" class="hvr-radial-out">Radial Out</a>
|
||||
<a href="#" class="hvr-radial-in">Radial In</a>
|
||||
<a href="#" class="hvr-rectangle-in">Rectangle In</a>
|
||||
<a href="#" class="hvr-rectangle-out">Rectangle Out</a>
|
||||
<a href="#" class="hvr-shutter-in-horizontal">Shutter In Horizontal</a>
|
||||
<a href="#" class="hvr-shutter-out-horizontal">Shutter Out Horizontal</a>
|
||||
<a href="#" class="hvr-shutter-in-vertical">Shutter In Vertical</a>
|
||||
<a href="#" class="hvr-shutter-out-vertical">Shutter Out Vertical</a>
|
||||
|
||||
|
||||
<h2>Icons</h2>
|
||||
|
||||
<small>Font icons courtesy of <a href="https://fortawesome.github.io/Font-Awesome/">FontAwesome</a>. <a href="https://github.com/IanLunn/Hover/#using-fontawesome-with-icon-effects">How to use FontAwesome icons</a> with Hover.css.</small>
|
||||
|
||||
<a href="#" class="hvr-icon-back">Icon Back</a>
|
||||
<a href="#" class="hvr-icon-forward">Icon Forward</a>
|
||||
<a href="#" class="hvr-icon-down">Icon Down</a>
|
||||
<a href="#" class="hvr-icon-up">Icon Up</a>
|
||||
<a href="#" class="hvr-icon-spin">Icon Spin</a>
|
||||
<a href="#" class="hvr-icon-drop">Icon Drop</a>
|
||||
<a href="#" class="hvr-icon-fade">Icon Fade</a>
|
||||
<a href="#" class="hvr-icon-float-away">Icon Float Away</a>
|
||||
<a href="#" class="hvr-icon-sink-away">Icon Sink Away</a>
|
||||
<a href="#" class="hvr-icon-grow">Icon Grow</a>
|
||||
<a href="#" class="hvr-icon-shrink">Icon Shrink</a>
|
||||
<a href="#" class="hvr-icon-pulse">Icon Pulse</a>
|
||||
<a href="#" class="hvr-icon-pulse-grow">Icon Pulse Grow</a>
|
||||
<a href="#" class="hvr-icon-pulse-shrink">Icon Pulse Shrink</a>
|
||||
<a href="#" class="hvr-icon-push">Icon Push</a>
|
||||
<a href="#" class="hvr-icon-pop">Icon Pop</a>
|
||||
<a href="#" class="hvr-icon-bounce">Icon Bounce</a>
|
||||
<a href="#" class="hvr-icon-rotate">Icon Rotate</a>
|
||||
<a href="#" class="hvr-icon-grow-rotate">Icon Grow Rotate</a>
|
||||
<a href="#" class="hvr-icon-float">Icon Float</a>
|
||||
<a href="#" class="hvr-icon-sink">Icon Sink</a>
|
||||
<a href="#" class="hvr-icon-bob">Icon Bob</a>
|
||||
<a href="#" class="hvr-icon-hang">Icon Hang</a>
|
||||
<a href="#" class="hvr-icon-wobble-horizontal">Icon Wobble Horizontal</a>
|
||||
<a href="#" class="hvr-icon-wobble-vertical">Icon Wobble Vertical</a>
|
||||
<a href="#" class="hvr-icon-buzz">Icon Buzz</a>
|
||||
<a href="#" class="hvr-icon-buzz-out">Icon Buzz Out</a>
|
||||
|
||||
|
||||
<h2>Border Transitions</h2>
|
||||
|
||||
<a href="#" class="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>
|
||||
|
||||
<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="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>
|
||||
|
||||
<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="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>
|
||||
|
||||
<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="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>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
|
@ -102,7 +181,7 @@
|
|||
<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>All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, SASS, and LESS flavours.</p>
|
||||
|
||||
<p>For best results, hover effects use a couple of "hacks" (undesirable but usually necessary lines of code). For more information on these hacks and whether you need them, <a href="https://github.com/IanLunn/Hover/wiki/Hacks-Explained">please read the FAQ</a>.</p>
|
||||
|
||||
|
|
@ -110,36 +189,39 @@
|
|||
|
||||
<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>Hover.css is open source, and made available under a <a href="http://www.opensource.org/licenses/mit-license.php">MIT License</a>. Distribute, use as-is, or modify to your liking in personal and commercial projects. Please retain the original readme and license files.
|
||||
|
||||
<p>Placing author information in your stylesheet, credits page or humans.txt is much appreciated.</p>
|
||||
</div>
|
||||
|
||||
<div class="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>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
<a class="logo" href="http://ianlunn.co.uk/" title="Visit portfolio of Ian Lunn"><img class="hvr-bob" src="logo-transparent.png" width="60" height="60" /></a>
|
||||
|
||||
<p class="follow"><a href="https://twitter.com/IanLunn" class="twitter-follow-button" data-show-count="false" data-dnt="true" data-size="large">Follow @IanLunn</a> for tweets, opinions, and links<br /> relating to CSS3, HTML5, and JavaScript</p>
|
||||
<p class="credit">Created by <a href="http://ianlunn.co.uk/" title="Visit portfolio of Ian Lunn">Ian Lunn - Front End Web Developer</a></p>
|
||||
</div>
|
||||
|
||||
</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=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
||||
|
||||
<script>
|
||||
(function(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,32 @@
|
|||
// 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
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
.improveAntiAlias() {
|
||||
// Improve aliasing on mobile/tablet devices
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.fontSmooth() {
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.forceBlockLevel() {
|
||||
// Transforms need to be block-level to work
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.hacks() {
|
||||
.forceBlockLevel();
|
||||
.hardwareAccel();
|
||||
.improveAntiAlias();
|
||||
.fontSmooth();
|
||||
}
|
||||
|
|
@ -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,40 @@
|
|||
// 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;
|
||||
|
|
@ -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 @@
|
|||
/* 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,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: 50%;
|
||||
right: 50%;
|
||||
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: 50%;
|
||||
right: 50%;
|
||||
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,28 @@
|
|||
/* Icon Back */
|
||||
.icon-back() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-left: 2.2em;
|
||||
.prefixed(transition-duration, @fastDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f137";
|
||||
position: absolute;
|
||||
left: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @fastDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, translateX(-4px));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
/* 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();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f077";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.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,35 @@
|
|||
/* Icon Bounce Out */
|
||||
.keyframes(~"@{nameSpace}-icon-bounce-out", {
|
||||
50% {
|
||||
.prefixed(transform, scale(1.5));
|
||||
}
|
||||
});
|
||||
|
||||
.icon-bounce-out() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f088";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, scale(.9));
|
||||
.prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
/* Icon Bounce */
|
||||
|
||||
.icon-bounce() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f087";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, scale(1.5));
|
||||
.prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
/* 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();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f023";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-buzz-out");
|
||||
.prefixed(animation-duration, .75s);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
.prefixed(animation-iteration-count, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
/* Icon Buzz */
|
||||
.keyframes(~"@{nameSpace}-icon-buzz", {
|
||||
50% {
|
||||
.prefixed(transform, translateX(3px) rotate(2deg));
|
||||
}
|
||||
|
||||
100% {
|
||||
.prefixed(transform, translateX(-3px) rotate(-2deg));
|
||||
}
|
||||
});
|
||||
|
||||
.icon-buzz() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f017";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-buzz");
|
||||
.prefixed(animation-duration, .15s);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
.prefixed(animation-iteration-count, infinite);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
/* Icon Down */
|
||||
.keyframes(~"@{nameSpace}-icon-down", {
|
||||
0%,
|
||||
50%,
|
||||
100% {
|
||||
.prefixed(transform, translateY(0));
|
||||
}
|
||||
25%,
|
||||
75% {
|
||||
.prefixed(transform, translateY(6px));
|
||||
}
|
||||
});
|
||||
|
||||
/* Icon Down */
|
||||
.icon-down() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
|
||||
&:before {
|
||||
content: "\f01a";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-down");
|
||||
.prefixed(animation-duration, .75s);
|
||||
.prefixed(animation-timing-function, ease-out);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
/* 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();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
|
||||
&:before {
|
||||
content: "\f041";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
opacity: 1;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
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,26 @@
|
|||
/* Icon Fade */
|
||||
.icon-fade() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
|
||||
&:before {
|
||||
content: "\f00c";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, .5s);
|
||||
.prefixed(transition-property, color);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
color: #0F9E5E;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
/* 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();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "\f055";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 0;
|
||||
.prefixed(animation-duration, @slowDuration);
|
||||
.prefixed(animation-fill-mode, forwards);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:after {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-float-away");
|
||||
.prefixed(animation-timing-function, ease-out);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
/* Icon Float */
|
||||
.icon-float() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f01b";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, translateY(-4px));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
/* Icon Forward */
|
||||
.icon-forward() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
.prefixed(transition-duration, @fastDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f138";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @fastDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, translateX(4px));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
/* Icon Grow Rotate */
|
||||
.icon-grow-rotate() {
|
||||
@duration: @mediumDuration;
|
||||
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
.prefixed(transition-duration, @duration);
|
||||
|
||||
&:before {
|
||||
content: "\f095";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @duration);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, scale(1.5) rotate(12deg));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
/* Icon Grow */
|
||||
.icon-grow() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f118";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, scale(1.3) translateZ(0));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
/* 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();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f078";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.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,37 @@
|
|||
/* Icon Pop */
|
||||
.keyframes(~"@{nameSpace}-icon-pop", {
|
||||
50% {
|
||||
.prefixed(transform, scale(1.5));
|
||||
}
|
||||
});
|
||||
|
||||
.icon-pop() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f005";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-pop");
|
||||
.prefixed(animation-duration, @mediumDuration);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
.prefixed(animation-iteration-count, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
/* Icon Pulse Grow */
|
||||
.keyframes(~"@{nameSpace}-icon-pulse-grow", {
|
||||
to {
|
||||
.prefixed(transform, scale(1.3));
|
||||
}
|
||||
});
|
||||
|
||||
.icon-pulse-grow() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
|
||||
&:before {
|
||||
content: "\f015";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.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,35 @@
|
|||
/* Icon Pulse Shrink */
|
||||
.keyframes(~"@{nameSpace}-icon-pulse-shrink", {
|
||||
to {
|
||||
.prefixed(transform, scale(.8));
|
||||
}
|
||||
});
|
||||
|
||||
.icon-pulse-shrink() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
|
||||
&:before {
|
||||
content: "\f015";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
/* Icon Pulse */
|
||||
.keyframes(~"@{nameSpace}-icon-pulse", {
|
||||
25% {
|
||||
.prefixed(transform, scale(1.3));
|
||||
}
|
||||
|
||||
75% {
|
||||
.prefixed(transform, scale(.8));
|
||||
}
|
||||
});
|
||||
|
||||
.icon-pulse() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
|
||||
&:before {
|
||||
content: "\f015";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-pulse");
|
||||
.prefixed(animation-duration, 1s);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
.prefixed(animation-iteration-count, infinite);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
/* Icon Push */
|
||||
.keyframes(~"@{nameSpace}-icon-push", {
|
||||
50% {
|
||||
.prefixed(transform, scale(.5));
|
||||
}
|
||||
});
|
||||
|
||||
.icon-push() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f006";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-push");
|
||||
.prefixed(animation-duration, @mediumDuration);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
.prefixed(animation-iteration-count, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
/* Icon Rotate */
|
||||
.icon-rotate() {
|
||||
@duration: @mediumDuration;
|
||||
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
.prefixed(transition-duration, @duration);
|
||||
|
||||
&:before {
|
||||
content: "\f0c6";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @duration);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, rotate(20deg));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
/* Icon Shrink */
|
||||
.icon-shrink() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f119";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, scale(.8));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
/* Icon Sink Away */
|
||||
.keyframes(~"@{nameSpace}-icon-sink-away", {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
.prefixed(transform, translateY(1em));
|
||||
}
|
||||
});
|
||||
|
||||
/* Icon Sink Away */
|
||||
.icon-sink-away() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "\f056";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 0;
|
||||
.prefixed(animation-duration, @slowDuration);
|
||||
.prefixed(animation-fill-mode, forwards);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:after {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-sink-away");
|
||||
.prefixed(animation-timing-function, ease-out);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
/* Icon Sink */
|
||||
.icon-sink() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: 2.2em;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
&:before {
|
||||
content: "\f01a";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
padding: 0 1px;
|
||||
font-family: FontAwesome;
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
||||
&:before {
|
||||
.prefixed(transform, translateY(4px));
|
||||
}
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue