artin/tachyons
1
0
Fork 0
mirror of https://github.com/tachyons-css/tachyons.git synced 2026-02-06 14:06:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Animated box-shadow on hover bug fix.

Browse Source
This commit is contained in:
mrmrs 2016-12-13 10:31:34 +00:00
parent 6058970b13
commit f9e72d24f4
3 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
css/tachyons.css
View File

@ -1903,7 +1903,8 @@ code, .code { font-family: Consolas, monaco, monospace; }
Performant box-shadow animation pattern from
http://tobiasahlin.com/blog/how-to-animate-box-shadow/
*/
.shadow-hover::after { content: ''; position: absolute; width: 100%; height: 100%; z-index: -1; box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); opacity: 0; -webkit-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }
.shadow-hover { cursor: pointer; position: relative; -webkit-transition: all .5s cubic-bezier( .165, .84, .44, 1 ); transition: all .5s cubic-bezier( .165, .84, .44, 1 ); }
.shadow-hover::after { content: ''; box-shadow: 0 0 16px 2px rgba( 0, 0, 0, .2 ); opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; -webkit-transition: opacity .5s cubic-bezier( .165, .84, .44, 1 ); transition: opacity .5s cubic-bezier( .165, .84, .44, 1 ); }
.shadow-hover:hover::after, .shadow-hover:focus::after { opacity: 1; }
/* Combine with classes in skins and skins-pseudo for
* many different transition possibilities. */

2
css/tachyons.min.css vendored
View File

File diff suppressed because one or more lines are too long

14
src/_hovers.css
View File

@ -124,15 +124,23 @@
http://tobiasahlin.com/blog/how-to-animate-box-shadow/
*/
.shadow-hover {
cursor: pointer;
position: relative;
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.shadow-hover::after {
content: '';
box-shadow: 0px 0px 16px 2px rgba( 0, 0, 0, .2 );
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, .2 );
opacity: 0;
transition: opacity .25s ease-in-out;
transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.shadow-hover:hover::after,