stellarskylark/tachyons-skylark
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Ensure -webkit-transition prefixes are there

Browse source
This commit is contained in:
John Otander 2017-05-19 14:42:10 -06:00
parent 3b6be6953a
commit a7cf1cbe7b
2 changed files with 21 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
css/tachyons.css
View file

@ -917,11 +917,11 @@ code, .code { font-family: Consolas, monaco, monospace; }
Docs: http://tachyons.io/docs/elements/links/
*/
.link { text-decoration: none; transition: color .15s ease-in; }
.link:link, .link:visited { transition: color .15s ease-in; }
.link:hover { transition: color .15s ease-in; }
.link:active { transition: color .15s ease-in; }
.link:focus { transition: color .15s ease-in; outline: 1px dotted currentColor; }
.link { text-decoration: none; -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
.link:link, .link:visited { -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
.link:hover { -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
.link:active { -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
.link:focus { -webkit-transition: color .15s ease-in; transition: color .15s ease-in; outline: 1px dotted currentColor; }
/*
LISTS
@ -1876,16 +1876,16 @@ code, .code { font-family: Consolas, monaco, monospace; }
Dim element on hover by adding the dim class.
*/
.dim { opacity: 1; transition: opacity .15s ease-in; }
.dim:hover, .dim:focus { opacity: .5; transition: opacity .15s ease-in; }
.dim:active { opacity: .8; transition: opacity .15s ease-out; }
.dim { opacity: 1; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; }
.dim:hover, .dim:focus { opacity: .5; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; }
.dim:active { opacity: .8; -webkit-transition: opacity .15s ease-out; transition: opacity .15s ease-out; }
/*
Animate opacity to 100% on hover by adding the glow class.
*/
.glow { transition: opacity .15s ease-in; }
.glow:hover, .glow:focus { opacity: 1; transition: opacity .15s ease-in; }
.glow { -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; }
.glow:hover, .glow:focus { opacity: 1; -webkit-transition: opacity .15s ease-in; transition: opacity .15s ease-in; }
/*
Hide child & reveal on hover:
@ -1900,15 +1900,15 @@ code, .code { font-family: Consolas, monaco, monospace; }
<div class="child"> Hidden until hover or focus </div>
</div>
*/
.hide-child .child { opacity: 0; transition: opacity .15s ease-in; }
.hide-child:hover .child, .hide-child:focus .child, .hide-child:active .child { opacity: 1; transition: opacity .15s ease-in; }
.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 ); transition: -webkit-transform .25s ease-out; transition: transform .25s ease-out; transition: transform .25s ease-out, -webkit-transform .25s ease-out; }
.grow { -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-out; transition: -webkit-transform .25s ease-out; transition: transform .25s ease-out; transition: transform .25s ease-out, -webkit-transform .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 ); 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 { -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 */
@ -1919,12 +1919,12 @@ code, .code { font-family: Consolas, monaco, monospace; }
Performant box-shadow animation pattern from
http://tobiasahlin.com/blog/how-to-animate-box-shadow/
*/
.shadow-hover { cursor: pointer; position: relative; 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; transition: opacity .5s cubic-bezier( .165, .84, .44, 1 ); }
.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. */
.bg-animate, .bg-animate:hover, .bg-animate:focus { transition: background-color .15s ease-in-out; }
.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
@ -1987,9 +1987,9 @@ code, .code { font-family: Consolas, monaco, monospace; }
.nested-copy-indent p+p { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
.nested-copy-seperator p+p { margin-top: 1.5em; }
.nested-img img { width: 100%; max-width: 100%; display: block; }
.nested-links a { color: #357edd; transition: color .15s ease-in; }
.nested-links a:hover { color: #96ccff; transition: color .15s ease-in; }
.nested-links a:focus { color: #96ccff; transition: color .15s ease-in; }
.nested-links a { color: #357edd; -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
.nested-links a:hover { color: #96ccff; -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
.nested-links a:focus { color: #96ccff; -webkit-transition: color .15s ease-in; transition: color .15s ease-in; }
/*
STYLES

2
css/tachyons.min.css vendored
View file

File diff suppressed because one or more lines are too long