Hidden until hover or focus
Hidden until hover or focus
Hidden until hover or focus
Hidden until hover or focus
*/
/*.hide-child .child { opacity: 0; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; }*/
/*.hide-child:hover .child, .hide-child:focus .child, .hide-child:active .child { opacity: 1; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; }*/
/*.underline-hover:hover, .underline-hover:focus { text-decoration: underline; }*/
/* Can combine this with overflow-hidden to make background images grow on hover
* even if you are using background-size: cover */
/*.grow { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); -webkit-transition: -webkit-transform 0.25s ease-out; transition: -webkit-transform 0.25s ease-out; transition: transform 0.25s ease-out; transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out; }*/
/*.grow:hover, .grow:focus { -webkit-transform: scale( 1.05 ); transform: scale( 1.05 ); }*/
/*.grow:active { -webkit-transform: scale( .90 ); transform: scale( .90 ); }*/
/*.grow-large { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); -webkit-transition: -webkit-transform .25s ease-in-out; transition: -webkit-transform .25s ease-in-out; transition: transform .25s ease-in-out; transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out; }*/
/*.grow-large:hover, .grow-large:focus { -webkit-transform: scale( 1.2 ); transform: scale( 1.2 ); }*/
/*.grow-large:active { -webkit-transform: scale( .95 ); transform: scale( .95 ); }*/
/* Add pointer on hover */
.noEvents { pointer-events: none; }
.pointer:hover { cursor: pointer; }
.cursorDefault:hover { cursor: default; }
/*
Add shadow on hover.
Performant box-shadow animation pattern from
http://tobiasahlin.com/blog/how-to-animate-box-shadow/
*/
/*.shadow-hover::after { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, .2 ); opacity: 0; -webkit-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; }*/
/*.shadow-hover:hover::after, .shadow-hover:focus::after { opacity: 1; }*/
/* Combine with classes in skins and skins-pseudo for
* thousands of different transition possibilities. */
/*.bg-animate, .bg-animate:hover, .bg-animate:focus { -webkit-transition: background-color .15s ease-in-out; transition: background-color .15s ease-in-out; }*/
/*
Z-INDEX
Base
z = z-index
Modifiers
-0 = literal value 0
-1 = literal value 1
-2 = literal value 2
-3 = literal value 3
-4 = literal value 4
-5 = literal value 5
-999 = literal value 999
-9999 = literal value 9999
-max = largest accepted z-index value as integer
-inherit = string value inherit
-initial = string value initial
-unset = string value unset
MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index
Spec: http://www.w3.org/TR/CSS2/zindex.html
Articles:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Tips on extending:
There might be a time worth using negative z-index values.
Or if you are using tachyons with another project, you might need to
adjust these values to suit your needs.
*/
.z0 { z-index: 0; }
.z1 { z-index: 1; }
.z2 { z-index: 2; }
.z3 { z-index: 3; }
.z4 { z-index: 4; }
.z5 { z-index: 5; }
.z999 { z-index: 999; }
.z9999 { z-index: 9999; }
.zMax { z-index: 2147483647; }
.zInherit { z-index: inherit; }
.zInitial { z-index: initial; }
.zUnset { z-index: unset; }
/* Media Queries */
/* Debugging */
/*
DEBUG CHILDREN
Docs: http://tachyons.io/docs/debug/
Just add the debug class to any element to see outlines on its
children.
*/
.debug * { outline: 1px solid gold; }
.debugWhite * { outline: 1px solid white; }
.debugBlack * { outline: 1px solid black; }