mirror of https://github.com/IanLunn/Hover.git
Merge v1 with latest development for v2
This commit is contained in:
IanLunn
commit
a4c4bb53ae
|
|
@ -0,0 +1,8 @@
|
|||
## 2.0.0 - Sept 11, 2014
|
||||
|
||||
- Prefixed all effect names with `hvr-` (can be changed in `scss/_options.scss`)
|
||||
- Moved default button styles out of library
|
||||
- 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
|
||||
40
README.md
40
README.md
|
|
@ -20,8 +20,7 @@ Assuming you want to use the `Grow` effect:
|
|||
```css
|
||||
/* Grow */
|
||||
|
||||
.grow {
|
||||
display: inline-block;
|
||||
.hvr-grow {
|
||||
-webkit-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
-webkit-transition-property: -webkit-transform;
|
||||
|
|
@ -33,7 +32,7 @@ Assuming you want to use the `Grow` effect:
|
|||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.grow:hover {
|
||||
.hvr-grow:hover {
|
||||
-webkit-transform: scale(1.1);
|
||||
-ms-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
|
|
@ -41,21 +40,23 @@ Assuming you want to use the `Grow` effect:
|
|||
```
|
||||
|
||||
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:
|
||||
|
||||
```html
|
||||
<a class="button">Add to Basket</a>
|
||||
<a href="#">Add to Basket</a>
|
||||
```
|
||||
|
||||
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
|
||||
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, this can easily be changed using the `$nameSpace` variable in `scss/_options.scss`.
|
||||
|
||||
### 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.
|
||||
|
||||
1. Download hover-min.css
|
||||
|
|
@ -68,7 +69,7 @@ If you plan on using many of hover.css' effects on your website, you may like to
|
|||
</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 `.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 `.hvr-grow` to your chosen element.
|
||||
|
||||
Example element before applying hover.css effect:
|
||||
|
||||
|
|
@ -82,7 +83,22 @@ Example element after applying hover.css effect:
|
|||
<a class="button grow">Add to Basket</a>
|
||||
```
|
||||
|
||||
##Browser Support
|
||||
## A Note on the `display` Property
|
||||
|
||||
By default, any element that has a hover.css effect applied to it will be made inline-block via the `display` property:
|
||||
|
||||
```css
|
||||
/* Make any element with a class beginning "hvr" inline-block */
|
||||
[class^=".hvr"] {
|
||||
display: inline-block;
|
||||
}
|
||||
```
|
||||
|
||||
This is to work around the fact that `inline` elements inconsistently render transitons/animations across browsers.
|
||||
|
||||
Should you wish to override this behaviour, 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.
|
||||
|
||||
## 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.
|
||||
|
||||
- [Transitions](http://caniuse.com/#search=transitions) and [Animations](http://caniuse.com/#search=animations) - not supported below Internet Explorer 9
|
||||
|
|
@ -97,7 +113,7 @@ Grunt is non-essential but can speed up development. With [Grunt installed](http
|
|||
|
||||
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).
|
||||
|
||||
##Using SASS for Development
|
||||
## Using SASS 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).
|
||||
|
||||
|
|
@ -107,7 +123,7 @@ SASS is used in the Hover.css project to separate various CSS into specific file
|
|||
Contains some hacks 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.
|
||||
Contains `prefixed(property, value)` and `keyframes(keyframe-name)` mixins that apply the necessary prefixes you specify in _options.scss to properties and keyframes.
|
||||
|
||||
`prefixed(property, value)` can be used like so:
|
||||
|
||||
|
|
@ -132,6 +148,8 @@ The `keyframes(keyframe-name)` mixin is passed the keyframe name, followed by th
|
|||
###_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).
|
||||
|
||||
As of 2.0.0, _options.scss also includes a `$nameSpace` option which allows you to change the name all classes are prefixed with. The default namespace is `hvr`.
|
||||
|
||||
##Authors
|
||||
|
||||
- [Ian Lunn](https://github.com/IanLunn)
|
||||
|
|
|
|||
|
|
@ -10,6 +10,13 @@
|
|||
* 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;
|
||||
|
|
@ -23,13 +30,40 @@ img {
|
|||
border: none;
|
||||
}
|
||||
|
||||
p,
|
||||
.effects a {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
.effects a {
|
||||
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;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #2098D1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer a:hover,
|
||||
.tutorial:hover {
|
||||
color: #207AD1;
|
||||
}
|
||||
|
||||
.tutorial {
|
||||
display: block;
|
||||
font-size: .8em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tutorial:hover,
|
||||
|
|
@ -40,7 +74,7 @@ img {
|
|||
|
||||
.intro {
|
||||
max-width: 680px;
|
||||
margin: 0 auto;
|
||||
margin: 20px auto 0 auto;
|
||||
}
|
||||
|
||||
.button.cta {
|
||||
|
|
@ -86,12 +120,7 @@ h2 {
|
|||
|
||||
.credit {
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
.footer a:hover,
|
||||
.footer a:focus,
|
||||
.footer a:active {
|
||||
text-decoration: underline;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.social {
|
||||
|
|
@ -103,6 +132,16 @@ 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;
|
||||
|
|
@ -114,6 +153,10 @@ h2 {
|
|||
margin-bottom: .8em;
|
||||
}
|
||||
|
||||
#forkongithub {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#forkongithub a {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
|
|
@ -132,7 +175,7 @@ h2 {
|
|||
#forkongithub a:hover,
|
||||
#forkongithub a:focus,
|
||||
#forkongithub a:active {
|
||||
background: #060;
|
||||
background: #2098D1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
|
@ -153,7 +196,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
713
css/hover.css
713
css/hover.css
File diff suppressed because it is too large
Load Diff
147
index.html
147
index.html
|
|
@ -11,89 +11,99 @@
|
|||
</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>
|
||||
|
||||
<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</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>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="effects">
|
||||
|
||||
<h2>2D Transforms</h2>
|
||||
|
||||
<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>
|
||||
<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-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>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-outline-outward">Outline Outward</a>
|
||||
<a href="#" class="hvr-outline-inward">Outline Inward</a>
|
||||
<a href="#" class="hvr-round-corners">Round Corners</a>
|
||||
|
||||
|
||||
|
||||
<h2>Shadow and Glow Transitions</h2>
|
||||
|
||||
<a href="#" class="button glow">Glow</a>
|
||||
<a href="#" class="button box-shadow-outset">Box Shadow Outset</a>
|
||||
<a href="#" class="button box-shadow-inset">Box Shadow Inset</a>
|
||||
<a href="#" class="button float-shadow">Float Shadow</a>
|
||||
<a href="#" class="button hover-shadow">Hover Shadow</a>
|
||||
<a href="#" class="button shadow-radial">Shadow Radial</a>
|
||||
<a href="#" class="hvr-glow">Glow</a>
|
||||
<a href="#" class="hvr-box-shadow-outset">Box Shadow Outset</a>
|
||||
<a href="#" class="hvr-box-shadow-inset">Box Shadow Inset</a>
|
||||
<a href="#" class="hvr-float-shadow">Float Shadow</a>
|
||||
<a href="#" class="hvr-shadow-radial">Shadow Radial</a>
|
||||
|
||||
|
||||
|
||||
<h2>Speech Bubbles</h2>
|
||||
|
||||
<a href="#" class="button bubble-top">Bubble Top</a>
|
||||
<a href="#" class="button bubble-right">Bubble Right</a>
|
||||
<a href="#" class="button bubble-bottom">Bubble Bottom</a>
|
||||
<a href="#" class="button bubble-left">Bubble Left</a>
|
||||
<a href="#" class="button bubble-float-top">Bubble Float Top</a>
|
||||
<a href="#" class="button bubble-float-right">Bubble Float Right</a>
|
||||
<a href="#" class="button bubble-float-bottom">Bubble Float Bottom</a>
|
||||
<a href="#" class="button bubble-float-left">Bubble Float Left</a>
|
||||
<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>
|
||||
|
||||
|
|
@ -115,31 +125,16 @@
|
|||
<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 /> reating 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>!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),
|
||||
|
|
|
|||
|
|
@ -12,7 +12,13 @@
|
|||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
@mixin hacks() {
|
||||
@include hardwareAccel();
|
||||
@include improveAntiAlias();
|
||||
@mixin webkitFontFix() {
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
@mixin hacks() {
|
||||
@include hardwareAccel();
|
||||
@include improveAntiAlias();
|
||||
@include webkitFontFix();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,3 @@
|
|||
// Default styles for the demo buttons
|
||||
@mixin button {
|
||||
margin: .4em;
|
||||
padding: 1em;
|
||||
cursor: pointer;
|
||||
background: $primaryColour;
|
||||
text-decoration: none;
|
||||
color: $secondaryColour;
|
||||
// Prevent highlight colour when element is tapped
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
// prefix declarations
|
||||
@mixin prefixed($property, $value) {
|
||||
@if $webkit == true {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
// DEFAULT OPTIONS
|
||||
|
||||
$nameSpace: 'hvr'; // What to prefix each class name with
|
||||
$defaultDuration: .3s;
|
||||
$primaryColour: #e1e1e1;
|
||||
$secondaryColour: #666;
|
||||
|
|
@ -14,10 +16,10 @@ $curlWidth: 25px;
|
|||
$curlHeight: 25px;
|
||||
|
||||
// Curl colours
|
||||
$revealAreaColour: white; // reveal area behind the curl
|
||||
$curlLineColour: #aaa; // crease line
|
||||
$curlTransitionColour: #ccc; // colour transitioning from crease line to final colour
|
||||
$curlLastColour: white; // final colour of the back of the curl
|
||||
$revealAreaColour: white; // reveal area behind the curl
|
||||
$curlLineColour: #aaa; // crease line
|
||||
$curlTransitionColour: #ccc; // colour transitioning from crease line to final colour
|
||||
$curlLastColour: white; // final colour of the back of the curl
|
||||
|
||||
// Browser Prefixes
|
||||
$webkit: true;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
/* Bob */
|
||||
@include keyframes(#{$nameSpace}-bob) {
|
||||
0% {
|
||||
@include prefixed(transform, translateY(-8px));
|
||||
}
|
||||
50% {
|
||||
@include prefixed(transform, translateY(-4px));
|
||||
}
|
||||
100% {
|
||||
@include prefixed(transform, translateY(-8px));
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(#{$nameSpace}-bob-float) {
|
||||
100% {
|
||||
@include prefixed(transform, translateY(-8px));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bob {
|
||||
@include hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@include prefixed(animation-name, "#{$nameSpace}-bob-float, #{$nameSpace}-bob");
|
||||
@include prefixed(animation-duration, ".3s, 1.5s");
|
||||
@include prefixed(animation-delay, "0s, .3s");
|
||||
@include prefixed(animation-timing-function, "ease-out, ease-in-out");
|
||||
@include prefixed(animation-iteration-count, "1, infinite");
|
||||
@include prefixed(animation-fill-mode, "forwards");
|
||||
@include prefixed(animation-direction, "normal, alternate");
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
/* Border Fade */
|
||||
@mixin border-fade {
|
||||
display: inline-block;
|
||||
$borderWidth: 4px;
|
||||
|
||||
@include prefixed(transition-duration, $defaultDuration);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* Box Shadow Inset */
|
||||
@mixin box-shadow-inset {
|
||||
display: inline-block;
|
||||
@include prefixed(transition-duration, $defaultDuration);
|
||||
@include prefixed(transition-property, box-shadow);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* Box Shadow Outset */
|
||||
@mixin box-shadow-outset {
|
||||
display: inline-block;
|
||||
@include prefixed(transition-duration, $defaultDuration);
|
||||
@include prefixed(transition-property, box-shadow);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* Bubble Bottom */
|
||||
@mixin bubble-bottom {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
@include hacks();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* Bubble Float Bottom */
|
||||
@mixin bubble-float-bottom {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
@include prefixed(transition-duration, $defaultDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* Bubble Float Left */
|
||||
@mixin bubble-float-left {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
@include prefixed(transition-duration, $defaultDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* Bubble Float Right */
|
||||
@mixin bubble-float-right {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
@include prefixed(transition-duration, $defaultDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* Bubble Float Top */
|
||||
@mixin bubble-float-top {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
@include prefixed(transition-duration, $defaultDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
|
@ -20,7 +19,6 @@
|
|||
@include prefixed(transition-property, top);
|
||||
}
|
||||
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* Bubble Left */
|
||||
@mixin bubble-left {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
@include hacks();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* Bubble Right */
|
||||
@mixin bubble-right {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
@include hacks();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* Bubble Top */
|
||||
@mixin bubble-top {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
@include hacks();
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/* Buzz Out */
|
||||
@include keyframes(buzz-out) {
|
||||
@include keyframes(#{$nameSpace}-buzz-out) {
|
||||
10% {
|
||||
@include prefixed(transform, translateX(3px) rotate(2deg));
|
||||
}
|
||||
|
|
@ -42,14 +42,12 @@
|
|||
}
|
||||
|
||||
@mixin buzz-out {
|
||||
display: inline-block;
|
||||
|
||||
@include hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@include prefixed(animation-name, buzz-out);
|
||||
@include prefixed(animation-name, #{$nameSpace}-buzz-out);
|
||||
@include prefixed(animation-duration, .75s);
|
||||
@include prefixed(animation-timing-function, linear);
|
||||
@include prefixed(animation-iteration-count, 1);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/* Buzz */
|
||||
@include keyframes(buzz) {
|
||||
@include keyframes(#{$nameSpace}-buzz) {
|
||||
50% {
|
||||
@include prefixed(transform, translateX(3px) rotate(2deg));
|
||||
}
|
||||
|
|
@ -10,14 +10,12 @@
|
|||
}
|
||||
|
||||
@mixin buzz {
|
||||
display: inline-block;
|
||||
|
||||
@include hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@include prefixed(animation-name, buzz);
|
||||
@include prefixed(animation-name, #{$nameSpace}-buzz);
|
||||
@include prefixed(animation-duration, .15s);
|
||||
@include prefixed(animation-timing-function, linear);
|
||||
@include prefixed(animation-iteration-count, infinite);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* Curl Bottom Left */
|
||||
@mixin curl-bottom-left {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
@include hacks();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* Curl Bottom Right */
|
||||
@mixin curl-bottom-right {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
@include hacks();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* Curl Top Left */
|
||||
@mixin curl-top-left {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
@include hacks();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* Curl Top Right */
|
||||
@mixin curl-top-right {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
@include hacks();
|
||||
|
|
|
|||
|
|
@ -1,15 +1,13 @@
|
|||
/* Float Shadow */
|
||||
@mixin float-shadow {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
@include prefixed(transition-duration, $defaultDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
||||
|
||||
@include hacks();
|
||||
|
||||
&:before {
|
||||
pointer-events: none;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
content: '';
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
/* Float */
|
||||
@mixin float {
|
||||
display: inline-block;
|
||||
@include prefixed(transition-duration, $defaultDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
@include prefixed(transition-timing-function, ease-out);
|
||||
|
||||
@include hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@include prefixed(transform, translateY(-5px));
|
||||
@include prefixed(transform, translateY(-6px));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* Glow */
|
||||
@mixin glow {
|
||||
display: inline-block;
|
||||
@include prefixed(transition-duration, $defaultDuration);
|
||||
@include prefixed(transition-property, box-shadow);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* Grow Rotate */
|
||||
@mixin grow-rotate {
|
||||
display: inline-block;
|
||||
@include prefixed(transition-duration, $defaultDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
||||
|
|
@ -8,7 +7,7 @@
|
|||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
&:active {
|
||||
@include prefixed(transform, scale(1.1) rotate(4deg));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* Grow */
|
||||
@mixin grow {
|
||||
display: inline-block;
|
||||
@include prefixed(transition-duration, $defaultDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,30 +1,34 @@
|
|||
/* Hang */
|
||||
@include keyframes(hang) {
|
||||
50% {
|
||||
@include prefixed(transform, translateY(3px));
|
||||
@include keyframes(#{$nameSpace}-hang) {
|
||||
0% {
|
||||
@include prefixed(transform, translateY(8px));
|
||||
}
|
||||
50% {
|
||||
@include prefixed(transform, translateY(4px));
|
||||
}
|
||||
|
||||
100% {
|
||||
@include prefixed(transform, translateY(6px));
|
||||
@include prefixed(transform, translateY(8px));
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(#{$nameSpace}-hang-sink) {
|
||||
100% {
|
||||
@include prefixed(transform, translateY(8px));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin hang {
|
||||
display: inline-block;
|
||||
@include prefixed(transition-duration, .5s);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
||||
@include hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@include prefixed(transform, translateY(6px));
|
||||
@include prefixed(animation-name, hang);
|
||||
@include prefixed(animation-duration, 1.5s);
|
||||
@include prefixed(animation-delay, $defaultDuration);
|
||||
@include prefixed(animation-timing-function, linear);
|
||||
@include prefixed(animation-iteration-count, infinite);
|
||||
@include prefixed(animation-direction, alternate);
|
||||
@include prefixed(animation-name, "#{$nameSpace}-hang-sink, #{$nameSpace}-hang");
|
||||
@include prefixed(animation-duration, ".3s, 1.5s");
|
||||
@include prefixed(animation-delay, "0s, .3s");
|
||||
@include prefixed(animation-timing-function, "ease-out, ease-in-out");
|
||||
@include prefixed(animation-iteration-count, "1, infinite");
|
||||
@include prefixed(animation-fill-mode, "forwards");
|
||||
@include prefixed(animation-direction, "normal, alternate");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* Hollow */
|
||||
@mixin hollow {
|
||||
display: inline-block;
|
||||
$borderWidth: 4px;
|
||||
@include prefixed(transition-duration, $defaultDuration);
|
||||
@include prefixed(transition-property, background);
|
||||
|
|
|
|||
|
|
@ -1,75 +0,0 @@
|
|||
/* Hover Shadow */
|
||||
@include keyframes(hover) {
|
||||
50% {
|
||||
@include prefixed(transform, translateY(-3px));
|
||||
}
|
||||
|
||||
100% {
|
||||
@include prefixed(transform, translateY(-6px));
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(hover-shadow) {
|
||||
0% {
|
||||
@include prefixed(transform, translateY(6px));
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
50% {
|
||||
@include prefixed(transform, translateY(3px));
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
100% {
|
||||
@include prefixed(transform, translateY(6px));
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin hover-shadow {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
@include prefixed(transition-duration, $defaultDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
||||
@include hacks();
|
||||
|
||||
&:before {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
content: '';
|
||||
top: 100%;
|
||||
left: 5%;
|
||||
height: 10px;
|
||||
width: 90%;
|
||||
opacity: 0;
|
||||
background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 80%); /* W3C */
|
||||
@include prefixed(transition-duration, $defaultDuration);
|
||||
@include prefixed(transition-property, "transform, opacity");
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@include prefixed(transform, translateY(-6px));
|
||||
@include prefixed(animation-name, hover);
|
||||
@include prefixed(animation-duration, 1.5s);
|
||||
@include prefixed(animation-delay, $defaultDuration);
|
||||
@include prefixed(animation-timing-function, linear);
|
||||
@include prefixed(animation-iteration-count, infinite);
|
||||
@include prefixed(animation-direction, alternate);
|
||||
|
||||
&:before {
|
||||
opacity: .4;
|
||||
@include prefixed(transform, translateY(6px));
|
||||
@include prefixed(animation-name, hover-shadow);
|
||||
@include prefixed(animation-duration, 1.5s);
|
||||
@include prefixed(animation-delay, .3s);
|
||||
@include prefixed(animation-timing-function, linear);
|
||||
@include prefixed(animation-iteration-count, infinite);
|
||||
@include prefixed(animation-direction, alternate);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
/* Hover */
|
||||
@include keyframes(hover) {
|
||||
50% {
|
||||
@include prefixed(transform, translateY(-3px));
|
||||
}
|
||||
|
||||
100% {
|
||||
@include prefixed(transform, translateY(-6px));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin hover {
|
||||
display: inline-block;
|
||||
@include prefixed(transition-duration, .5s);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
||||
@include hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@include prefixed(transform, translateY(-6px));
|
||||
@include prefixed(animation-name, hover);
|
||||
@include prefixed(animation-duration, 1.5s);
|
||||
@include prefixed(animation-delay, $defaultDuration);
|
||||
@include prefixed(animation-timing-function, linear);
|
||||
@include prefixed(animation-iteration-count, infinite);
|
||||
@include prefixed(animation-direction, alternate);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
/* Outline Inward */
|
||||
@mixin outline-inward {
|
||||
display: inline-block;
|
||||
$outerBorderWidth: 4px;
|
||||
$innerBorderWidth: 4px;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* Outline Outward */
|
||||
@mixin outline-outward {
|
||||
display: inline-block;
|
||||
$outerBorderWidth: 4px;
|
||||
$innerBorderWidth: 4px;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/* Pop */
|
||||
@include keyframes(pop) {
|
||||
@include keyframes(#{$nameSpace}-pop) {
|
||||
50% {
|
||||
@include prefixed(transform, scale(1.2));
|
||||
}
|
||||
|
|
@ -10,14 +10,12 @@
|
|||
}
|
||||
|
||||
@mixin pop {
|
||||
display: inline-block;
|
||||
|
||||
@include hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@include prefixed(animation-name, pop);
|
||||
@include prefixed(animation-name, #{$nameSpace}-pop);
|
||||
@include prefixed(animation-duration, $defaultDuration);
|
||||
@include prefixed(animation-timing-function, linear);
|
||||
@include prefixed(animation-iteration-count, 1);
|
||||
|
|
|
|||
|
|
@ -1,19 +1,17 @@
|
|||
/* Pulse Grow */
|
||||
@include keyframes(pulse-grow) {
|
||||
@include keyframes(#{$nameSpace}-pulse-grow) {
|
||||
to {
|
||||
@include prefixed(transform, scale(1.1));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin pulse-grow {
|
||||
display: inline-block;
|
||||
|
||||
@include hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@include prefixed(animation-name, pulse-grow);
|
||||
@include prefixed(animation-name, #{$nameSpace}-pulse-grow);
|
||||
@include prefixed(animation-duration, $defaultDuration);
|
||||
@include prefixed(animation-timing-function, linear);
|
||||
@include prefixed(animation-iteration-count, infinite);
|
||||
|
|
|
|||
|
|
@ -1,19 +1,17 @@
|
|||
/* Pulse Shrink */
|
||||
@include keyframes(pulse-shrink) {
|
||||
@include keyframes(#{$nameSpace}-pulse-shrink) {
|
||||
to {
|
||||
@include prefixed(transform, scale(.9));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin pulse-shrink {
|
||||
display: inline-block;
|
||||
|
||||
@include hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@include prefixed(animation-name, pulse-shrink);
|
||||
@include prefixed(animation-name, #{$nameSpace}-pulse-shrink);
|
||||
@include prefixed(animation-duration, $defaultDuration);
|
||||
@include prefixed(animation-timing-function, linear);
|
||||
@include prefixed(animation-iteration-count, infinite);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/* Pulse */
|
||||
@include keyframes(pulse) {
|
||||
@include keyframes(#{$nameSpace}-pulse) {
|
||||
25% {
|
||||
@include prefixed(transform, scale(1.1));
|
||||
}
|
||||
|
|
@ -10,14 +10,12 @@
|
|||
}
|
||||
|
||||
@mixin pulse {
|
||||
display: inline-block;
|
||||
|
||||
@include hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@include prefixed(animation-name, pulse);
|
||||
@include prefixed(animation-name, #{$nameSpace}-pulse);
|
||||
@include prefixed(animation-duration, 1s);
|
||||
@include prefixed(animation-timing-function, linear);
|
||||
@include prefixed(animation-iteration-count, infinite);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/* Push */
|
||||
@include keyframes(push) {
|
||||
@include keyframes(#{$nameSpace}-push) {
|
||||
50% {
|
||||
@include prefixed(transform, scale(.8));
|
||||
}
|
||||
|
|
@ -10,14 +10,12 @@
|
|||
}
|
||||
|
||||
@mixin push {
|
||||
display: inline-block;
|
||||
|
||||
@include hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@include prefixed(animation-name, push);
|
||||
@include prefixed(animation-name, #{$nameSpace}-push);
|
||||
@include prefixed(animation-duration, .3s);
|
||||
@include prefixed(animation-timing-function, linear);
|
||||
@include prefixed(animation-iteration-count, 1);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* Rotate */
|
||||
@mixin rotate {
|
||||
display: inline-block;
|
||||
@include prefixed(transition-duration, $defaultDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* Round Corners */
|
||||
@mixin round-corners {
|
||||
display: inline-block;
|
||||
@include prefixed(transition-duration, $defaultDuration);
|
||||
@include prefixed(transition-property, border-radius);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,33 +1,32 @@
|
|||
/* Shadow Radial */
|
||||
@mixin shadow-radial {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
@include hacks();
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-repeat: no-repeat;
|
||||
height: 5px;
|
||||
opacity: 0;
|
||||
@include prefixed(transition-duration, $defaultDuration);
|
||||
@include prefixed(transition-property, opacity);
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-repeat: no-repeat;
|
||||
height: 5px;
|
||||
opacity: 0;
|
||||
@include prefixed(transition-duration, $defaultDuration);
|
||||
@include prefixed(transition-property, opacity);
|
||||
}
|
||||
|
||||
&:before {
|
||||
bottom: 100%;
|
||||
background: radial-gradient(ellipse at 50% 150%, $shadowColour 0%, rgba(0, 0, 0, 0) 80%);
|
||||
bottom: 100%;
|
||||
background: radial-gradient(ellipse at 50% 150%, $shadowColour 0%, rgba(0, 0, 0, 0) 80%);
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: 100%;
|
||||
background: radial-gradient(ellipse at 50% -50%, $shadowColour 0%, rgba(0, 0, 0, 0) 80%);
|
||||
top: 100%;
|
||||
background: radial-gradient(ellipse at 50% -50%, $shadowColour 0%, rgba(0, 0, 0, 0) 80%);
|
||||
}
|
||||
|
||||
&:hover:before,
|
||||
|
|
@ -36,6 +35,6 @@
|
|||
&:hover:after,
|
||||
&:focus:after,
|
||||
&:active:after {
|
||||
opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* Shrink */
|
||||
@mixin shrink {
|
||||
display: inline-block;
|
||||
@include prefixed(transition-duration, $defaultDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
/* Sink */
|
||||
@mixin sink {
|
||||
display: inline-block;
|
||||
@include prefixed(transition-duration, $defaultDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
@include prefixed(transition-timing-function, ease-out);
|
||||
|
||||
@include hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@include prefixed(transform, translateY(5px));
|
||||
@include prefixed(transform, translateY(6px));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* Skew Backward */
|
||||
@mixin skew-backward {
|
||||
display: inline-block;
|
||||
@include prefixed(transition-duration, $defaultDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
@include prefixed(transform-origin, 0 100%);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* Skew Forward */
|
||||
@mixin skew-forward {
|
||||
display: inline-block;
|
||||
@include prefixed(transition-duration, $defaultDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
@include prefixed(transform-origin, 0 100%);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* Skew */
|
||||
@mixin skew {
|
||||
display: inline-block;
|
||||
@include prefixed(transition-duration, $defaultDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
/* Trim */
|
||||
@mixin trim {
|
||||
display: inline-block;
|
||||
$outerBorderWidth: 4px;
|
||||
$innerBorderWidth: 4px;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/* Wobble Bottom */
|
||||
@include keyframes(wobble-bottom) {
|
||||
@include keyframes(#{$nameSpace}-wobble-bottom) {
|
||||
16.65% {
|
||||
@include prefixed(transform, skew(-12deg));
|
||||
}
|
||||
|
|
@ -26,7 +26,6 @@
|
|||
}
|
||||
|
||||
@mixin wobble-bottom {
|
||||
display: inline-block;
|
||||
@include prefixed(transform-origin, 100% 0);
|
||||
|
||||
@include hacks();
|
||||
|
|
@ -34,7 +33,7 @@
|
|||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@include prefixed(animation-name, wobble-bottom);
|
||||
@include prefixed(animation-name, #{$nameSpace}-wobble-bottom);
|
||||
@include prefixed(animation-duration, 1s);
|
||||
@include prefixed(animation-timing-function, ease-in-out);
|
||||
@include prefixed(animation-iteration-count, 1);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/* Wobble Horizontal */
|
||||
@include keyframes(wobble-horizontal) {
|
||||
@include keyframes(#{$nameSpace}-wobble-horizontal) {
|
||||
16.65% {
|
||||
@include prefixed(transform, translateX(8px));
|
||||
}
|
||||
|
|
@ -26,14 +26,12 @@
|
|||
}
|
||||
|
||||
@mixin wobble-horizontal {
|
||||
display: inline-block;
|
||||
|
||||
@include hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@include prefixed(animation-name, wobble-horizontal);
|
||||
@include prefixed(animation-name, #{$nameSpace}-wobble-horizontal);
|
||||
@include prefixed(animation-duration, 1s);
|
||||
@include prefixed(animation-timing-function, ease-in-out);
|
||||
@include prefixed(animation-iteration-count, 1);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/* Wobble Skew */
|
||||
@include keyframes(wobble-skew) {
|
||||
@include keyframes(#{$nameSpace}-wobble-skew) {
|
||||
16.65% {
|
||||
@include prefixed(transform, skew(-12deg));
|
||||
}
|
||||
|
|
@ -26,14 +26,12 @@
|
|||
}
|
||||
|
||||
@mixin wobble-skew {
|
||||
display: inline-block;
|
||||
|
||||
@include hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@include prefixed(animation-name, wobble-skew);
|
||||
@include prefixed(animation-name, #{$nameSpace}-wobble-skew);
|
||||
@include prefixed(animation-duration, 1s);
|
||||
@include prefixed(animation-timing-function, ease-in-out);
|
||||
@include prefixed(animation-iteration-count, 1);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/* Wobble To Bottom Right */
|
||||
@include keyframes(wobble-to-bottom-right) {
|
||||
@include keyframes(#{$nameSpace}-wobble-to-bottom-right) {
|
||||
16.65% {
|
||||
@include prefixed(transform, translate(8px, 8px));
|
||||
}
|
||||
|
|
@ -26,14 +26,12 @@
|
|||
}
|
||||
|
||||
@mixin wobble-to-bottom-right {
|
||||
display: inline-block;
|
||||
|
||||
@include hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@include prefixed(animation-name, wobble-to-bottom-right);
|
||||
@include prefixed(animation-name, #{$nameSpace}-wobble-to-bottom-right);
|
||||
@include prefixed(animation-duration, 1s);
|
||||
@include prefixed(animation-timing-function, ease-in-out);
|
||||
@include prefixed(animation-iteration-count, 1);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/* Wobble To Top Right */
|
||||
@include keyframes(wobble-to-top-right) {
|
||||
@include keyframes(#{$nameSpace}-wobble-to-top-right) {
|
||||
16.65% {
|
||||
@include prefixed(transform, translate(8px, -8px));
|
||||
}
|
||||
|
|
@ -26,14 +26,12 @@
|
|||
}
|
||||
|
||||
@mixin wobble-to-top-right {
|
||||
display: inline-block;
|
||||
|
||||
@include hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@include prefixed(animation-name, wobble-to-top-right);
|
||||
@include prefixed(animation-name, #{$nameSpace}-wobble-to-top-right);
|
||||
@include prefixed(animation-duration, 1s);
|
||||
@include prefixed(animation-timing-function, ease-in-out);
|
||||
@include prefixed(animation-iteration-count, 1);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/* Wobble Top */
|
||||
@include keyframes(wobble-top) {
|
||||
@include keyframes(#{$nameSpace}-wobble-top) {
|
||||
16.65% {
|
||||
@include prefixed(transform, skew(-12deg));
|
||||
}
|
||||
|
|
@ -26,7 +26,6 @@
|
|||
}
|
||||
|
||||
@mixin wobble-top {
|
||||
display: inline-block;
|
||||
@include prefixed(transform-origin, 0 100%);
|
||||
|
||||
@include hacks();
|
||||
|
|
@ -34,7 +33,7 @@
|
|||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@include prefixed(animation-name, wobble-top);
|
||||
@include prefixed(animation-name, #{$nameSpace}-wobble-top);
|
||||
@include prefixed(animation-duration, 1s);
|
||||
@include prefixed(animation-timing-function, ease-in-out);
|
||||
@include prefixed(animation-iteration-count, 1);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/* Wobble Vertical */
|
||||
@include keyframes(wobble-vertical) {
|
||||
@include keyframes(#{$nameSpace}-wobble-vertical) {
|
||||
16.65% {
|
||||
@include prefixed(transform, translateY(8px));
|
||||
}
|
||||
|
|
@ -26,14 +26,12 @@
|
|||
}
|
||||
|
||||
@mixin wobble-vertical {
|
||||
display: inline-block;
|
||||
|
||||
@include hacks();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@include prefixed(animation-name, wobble-vertical);
|
||||
@include prefixed(animation-name, #{$nameSpace}-wobble-vertical);
|
||||
@include prefixed(animation-duration, 1s);
|
||||
@include prefixed(animation-timing-function, ease-in-out);
|
||||
@include prefixed(animation-iteration-count, 1);
|
||||
|
|
|
|||
124
scss/hover.scss
124
scss/hover.scss
|
|
@ -1,6 +1,11 @@
|
|||
/*!
|
||||
<<<<<<< HEAD
|
||||
* Hover.css (http://ianlunn.co.uk/)
|
||||
* Version: 1.0.9
|
||||
=======
|
||||
* Hover.css (http://ianlunn.github.io/Hover/)
|
||||
* Version: 2.0.0
|
||||
>>>>>>> v2
|
||||
* Author: Ian Lunn @IanLunn
|
||||
* Author URL: http://ianlunn.co.uk/
|
||||
* Github: https://github.com/IanLunn/Hover
|
||||
|
|
@ -11,269 +16,270 @@
|
|||
* Hover.css Copyright Ian Lunn 2014.
|
||||
*/
|
||||
|
||||
|
||||
@import "options";
|
||||
@import "mixins";
|
||||
@import "hacks";
|
||||
|
||||
|
||||
|
||||
/* Default styles for the demo buttons */
|
||||
.button {
|
||||
@include button();
|
||||
/**
|
||||
* Note: Transitions/animations on inline elements are inconsistent across
|
||||
* browsers, to work around this, we'll make all elements starting with
|
||||
* the .#{$nameSpace} class inline-block by default.
|
||||
*/
|
||||
[class^="#{$nameSpace}"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
/* 2D TRANSITIONS */
|
||||
@import "effects/grow";
|
||||
.grow {
|
||||
.#{$nameSpace}-grow {
|
||||
@include grow();
|
||||
}
|
||||
|
||||
@import "effects/shrink";
|
||||
.shrink {
|
||||
.#{$nameSpace}-shrink {
|
||||
@include shrink();
|
||||
}
|
||||
|
||||
@import "effects/pulse";
|
||||
.pulse {
|
||||
.#{$nameSpace}-pulse {
|
||||
@include pulse();
|
||||
}
|
||||
|
||||
@import "effects/pulse-grow";
|
||||
.pulse-grow {
|
||||
.#{$nameSpace}-pulse-grow {
|
||||
@include pulse-grow();
|
||||
}
|
||||
|
||||
@import "effects/pulse-shrink";
|
||||
.pulse-shrink {
|
||||
.#{$nameSpace}-pulse-shrink {
|
||||
@include pulse-shrink();
|
||||
}
|
||||
|
||||
@import "effects/push";
|
||||
.push {
|
||||
.#{$nameSpace}-push {
|
||||
@include push();
|
||||
}
|
||||
|
||||
@import "effects/pop";
|
||||
.pop {
|
||||
.#{$nameSpace}-pop {
|
||||
@include pop();
|
||||
}
|
||||
|
||||
@import "effects/rotate";
|
||||
.rotate {
|
||||
.#{$nameSpace}-rotate {
|
||||
@include rotate();
|
||||
}
|
||||
|
||||
@import "effects/grow-rotate";
|
||||
.grow-rotate {
|
||||
.#{$nameSpace}-grow-rotate {
|
||||
@include grow-rotate();
|
||||
}
|
||||
|
||||
@import "effects/float";
|
||||
.float {
|
||||
.#{$nameSpace}-float {
|
||||
@include float();
|
||||
}
|
||||
|
||||
@import "effects/sink";
|
||||
.sink {
|
||||
.#{$nameSpace}-sink {
|
||||
@include sink();
|
||||
}
|
||||
|
||||
@import "effects/hover";
|
||||
.hover {
|
||||
@include hover();
|
||||
@import "effects/bob";
|
||||
.#{$nameSpace}-bob {
|
||||
@include bob();
|
||||
}
|
||||
|
||||
@import "effects/hang";
|
||||
.hang {
|
||||
.#{$nameSpace}-hang {
|
||||
@include hang();
|
||||
}
|
||||
|
||||
@import "effects/skew";
|
||||
.skew {
|
||||
.#{$nameSpace}-skew {
|
||||
@include skew();
|
||||
}
|
||||
|
||||
@import "effects/skew-forward";
|
||||
.skew-forward {
|
||||
.#{$nameSpace}-skew-forward {
|
||||
@include skew-forward();
|
||||
}
|
||||
|
||||
@import "effects/skew-backward";
|
||||
.skew-backward {
|
||||
.#{$nameSpace}-skew-backward {
|
||||
@include skew-backward();
|
||||
}
|
||||
|
||||
@import "effects/wobble-vertical";
|
||||
.wobble-vertical {
|
||||
.#{$nameSpace}-wobble-vertical {
|
||||
@include wobble-vertical();
|
||||
}
|
||||
|
||||
@import "effects/wobble-horizontal";
|
||||
.wobble-horizontal {
|
||||
.#{$nameSpace}-wobble-horizontal {
|
||||
@include wobble-horizontal();
|
||||
}
|
||||
|
||||
@import "effects/wobble-to-bottom-right";
|
||||
.wobble-to-bottom-right {
|
||||
.#{$nameSpace}-wobble-to-bottom-right {
|
||||
@include wobble-to-bottom-right();
|
||||
}
|
||||
|
||||
@import "effects/wobble-to-top-right";
|
||||
.wobble-to-top-right {
|
||||
.#{$nameSpace}-wobble-to-top-right {
|
||||
@include wobble-to-top-right();
|
||||
}
|
||||
|
||||
@import "effects/wobble-top";
|
||||
.wobble-top {
|
||||
.#{$nameSpace}-wobble-top {
|
||||
@include wobble-top();
|
||||
}
|
||||
|
||||
@import "effects/wobble-bottom";
|
||||
.wobble-bottom {
|
||||
.#{$nameSpace}-wobble-bottom {
|
||||
@include wobble-bottom();
|
||||
}
|
||||
|
||||
@import "effects/wobble-skew";
|
||||
.wobble-skew {
|
||||
.#{$nameSpace}-wobble-skew {
|
||||
@include wobble-skew();
|
||||
}
|
||||
|
||||
@import "effects/buzz";
|
||||
.buzz {
|
||||
.#{$nameSpace}-buzz {
|
||||
@include buzz();
|
||||
}
|
||||
|
||||
@import "effects/buzz-out";
|
||||
.buzz-out {
|
||||
.#{$nameSpace}-buzz-out {
|
||||
@include buzz-out();
|
||||
}
|
||||
|
||||
|
||||
/* BORDER TRANSITIONS */
|
||||
@import "effects/border-fade";
|
||||
.border-fade {
|
||||
.#{$nameSpace}-border-fade {
|
||||
@include border-fade();
|
||||
}
|
||||
|
||||
@import "effects/hollow";
|
||||
.hollow {
|
||||
.#{$nameSpace}-hollow {
|
||||
@include hollow();
|
||||
}
|
||||
|
||||
@import "effects/trim";
|
||||
.trim {
|
||||
.#{$nameSpace}-trim {
|
||||
@include trim();
|
||||
}
|
||||
|
||||
@import "effects/outline-outward";
|
||||
.outline-outward {
|
||||
.#{$nameSpace}-outline-outward {
|
||||
@include outline-outward();
|
||||
}
|
||||
|
||||
@import "effects/outline-inward";
|
||||
.outline-inward {
|
||||
.#{$nameSpace}-outline-inward {
|
||||
@include outline-inward();
|
||||
}
|
||||
|
||||
@import "effects/round-corners";
|
||||
.round-corners {
|
||||
.#{$nameSpace}-round-corners {
|
||||
@include round-corners();
|
||||
}
|
||||
|
||||
|
||||
/* SHADOW/GLOW TRANSITIONS */
|
||||
@import "effects/glow";
|
||||
.glow {
|
||||
.#{$nameSpace}-glow {
|
||||
@include glow();
|
||||
}
|
||||
|
||||
@import "effects/box-shadow-outset";
|
||||
.box-shadow-outset {
|
||||
.#{$nameSpace}-box-shadow-outset {
|
||||
@include box-shadow-outset();
|
||||
}
|
||||
|
||||
@import "effects/box-shadow-inset";
|
||||
.box-shadow-inset {
|
||||
.#{$nameSpace}-box-shadow-inset {
|
||||
@include box-shadow-inset();
|
||||
}
|
||||
|
||||
@import "effects/float-shadow";
|
||||
.float-shadow {
|
||||
.#{$nameSpace}-float-shadow {
|
||||
@include float-shadow();
|
||||
}
|
||||
|
||||
@import "effects/hover-shadow";
|
||||
.hover-shadow {
|
||||
@include hover-shadow();
|
||||
@import "effects/bob-shadow";
|
||||
.#{$nameSpace}-bob-shadow {
|
||||
@include bob-shadow();
|
||||
}
|
||||
|
||||
@import "effects/shadow-radial";
|
||||
.shadow-radial {
|
||||
.#{$nameSpace}-shadow-radial {
|
||||
@include shadow-radial();
|
||||
}
|
||||
|
||||
|
||||
/* SPEECH BUBBLES */
|
||||
@import "effects/bubble-top";
|
||||
.bubble-top {
|
||||
.#{$nameSpace}-bubble-top {
|
||||
@include bubble-top();
|
||||
}
|
||||
|
||||
@import "effects/bubble-right";
|
||||
.bubble-right {
|
||||
.#{$nameSpace}-bubble-right {
|
||||
@include bubble-right();
|
||||
}
|
||||
|
||||
@import "effects/bubble-bottom";
|
||||
.bubble-bottom {
|
||||
.#{$nameSpace}-bubble-bottom {
|
||||
@include bubble-bottom();
|
||||
}
|
||||
|
||||
@import "effects/bubble-left";
|
||||
.bubble-left {
|
||||
.#{$nameSpace}-bubble-left {
|
||||
@include bubble-left();
|
||||
}
|
||||
|
||||
@import "effects/bubble-float-top";
|
||||
.bubble-float-top {
|
||||
.#{$nameSpace}-bubble-float-top {
|
||||
@include bubble-float-top();
|
||||
}
|
||||
|
||||
@import "effects/bubble-float-right";
|
||||
.bubble-float-right {
|
||||
.#{$nameSpace}-bubble-float-right {
|
||||
@include bubble-float-right();
|
||||
}
|
||||
|
||||
@import "effects/bubble-float-bottom";
|
||||
.bubble-float-bottom {
|
||||
.#{$nameSpace}-bubble-float-bottom {
|
||||
@include bubble-float-bottom();
|
||||
}
|
||||
|
||||
@import "effects/bubble-float-left";
|
||||
.bubble-float-left {
|
||||
.#{$nameSpace}-bubble-float-left {
|
||||
@include bubble-float-left();
|
||||
}
|
||||
|
||||
|
||||
/* CURLS */
|
||||
@import "effects/curl-top-left";
|
||||
.curl-top-left {
|
||||
.#{$nameSpace}-curl-top-left {
|
||||
@include curl-top-left();
|
||||
}
|
||||
|
||||
@import "effects/curl-top-right";
|
||||
.curl-top-right {
|
||||
.#{$nameSpace}-curl-top-right {
|
||||
@include curl-top-right();
|
||||
}
|
||||
|
||||
@import "effects/curl-bottom-right";
|
||||
.curl-bottom-right {
|
||||
.#{$nameSpace}-curl-bottom-right {
|
||||
@include curl-bottom-right();
|
||||
}
|
||||
|
||||
@import "effects/curl-bottom-left";
|
||||
.curl-bottom-left {
|
||||
.#{$nameSpace}-curl-bottom-left {
|
||||
@include curl-bottom-left();
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue