Animated box-shadow on hover bug fix.

tachyons-css · Dec 13, 2016 · f9e72d2 · f9e72d2
1 parent 6058970
commit f9e72d2
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/css/tachyons.css b/css/tachyons.css
@@ -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. */

diff --git a/css/tachyons.min.css b/css/tachyons.min.css
diff --git a/src/_hovers.css b/src/_hovers.css
@@ -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,