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 0.15s ease-in;
-o-transition: opacity 0.15s ease-in;
transition: opacity 0.15s ease-in;
}
.hide-child:hover .child,
.hide-child:focus .child,
.hide-child:active .child {
opacity: 1;
-webkit-transition: opacity 0.15s ease-in;
-o-transition: opacity 0.15s ease-in;
transition: opacity 0.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;
-o-transition: -o-transform 0.25s ease-out;
transition: transform 0.25s ease-out;
transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out, -o-transform 0.25s ease-out;
}
.grow:hover,
.grow:focus {
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
.grow:active {
-webkit-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
}
.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 0.25s ease-in-out;
transition: -webkit-transform 0.25s ease-in-out;
-o-transition: -o-transform 0.25s ease-in-out;
transition: transform 0.25s ease-in-out;
transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out, -o-transform 0.25s ease-in-out;
}
.grow-large:hover,
.grow-large:focus {
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.grow-large:active {
-webkit-transform: scale(0.95);
-o-transform: scale(0.95);
transform: scale(0.95);
}
/* Add pointer on hover */
.pointer:hover {
cursor: pointer;
}
/*
Add shadow on hover.
Performant box-shadow animation pattern from
http://tobiasahlin.com/blog/how-to-animate-box-shadow/
*/
.shadow-hover {
cursor: pointer;
position: relative;
-webkit-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.shadow-hover::after {
content: "";
-webkit-box-shadow: 0 0 16px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 16px 2px rgba(0, 0, 0, 0.2);
border-radius: inherit;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
-webkit-transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
-o-transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.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 {
-webkit-transition: background-color 0.15s ease-in-out;
-o-transition: background-color 0.15s ease-in-out;
transition: background-color 0.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.
*/
.z-0 {
z-index: 0;
}
.z-1 {
z-index: 1;
}
.z-2 {
z-index: 2;
}
.z-3 {
z-index: 3;
}
.z-4 {
z-index: 4;
}
.z-5 {
z-index: 5;
}
.z-999 {
z-index: 999;
}
.z-9999 {
z-index: 9999;
}
.z-max {
z-index: 2147483647;
}
.z-inherit {
z-index: inherit;
}
.z-initial {
z-index: initial;
}
.z-unset {
z-index: unset;
}
/* Negative z-index */
.nz-1 {
z-index: -1;
}
.nz-2 {
z-index: -2;
}
.nz-3 {
z-index: -3;
}
.nz-4 {
z-index: -4;
}
.nz-5 {
z-index: -5;
}
.fill-current-color {
fill: currentColor;
}
.stroke-current-color {
stroke: currentColor;
}
.icon-baseline {
position: relative;
top: 0.125em;
}
/*
NESTED
Tachyons module for styling nested elements
that are generated by a cms.
*/
.nested-copy-line-height p,
.nested-copy-line-height ul,
.nested-copy-line-height ol {
line-height: 1.5;
}
.nested-headline-line-height h1,
.nested-headline-line-height h2,
.nested-headline-line-height h3,
.nested-headline-line-height h4,
.nested-headline-line-height h5,
.nested-headline-line-height h6 {
line-height: 1.25;
}
.nested-list-reset ul,
.nested-list-reset ol {
padding-left: 0;
margin-left: 0;
list-style-type: none;
}
.nested-copy-indent p + p {
text-indent: 0.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;
-webkit-transition: color 0.15s ease-in;
-o-transition: color 0.15s ease-in;
transition: color 0.15s ease-in;
}
.nested-links a:hover,
.nested-links a:focus {
color: #8ed3f4;
-webkit-transition: color 0.15s ease-in;
-o-transition: color 0.15s ease-in;
transition: color 0.15s ease-in;
}
.nested-contained-copy-separator > * {
margin-top: 0;
margin-bottom: 0;
}
.nested-contained-copy-separator > * + * {
margin-top: 1.5em;
}
.nested-contained-copy-separator blockquote {
margin-bottom: 1.5em;
}
.nested-headings h1,
.nested-headings h2,
.nested-headings h3,
.nested-headings h4,
.nested-headings h5,
.nested-headings h6 {
color: #3a515f;
}
/*
STYLES
Add custom styles here.
*/
/**
* WordPress Generated Classes
* @see http://codex.wordpress.org/CSS#WordPress_Generated_Classes
*/
.comment-navigation,
.posts-navigation,
.post-navigation {
margin: 0 0 1.5em;
overflow: hidden;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
float: left;
width: 50%;
background-image: svg-load("../../svg/chevron-left.svg", fill=#3a515f);
background-repeat: no-repeat;
background-position: left 0 center;
background-size: 1rem;
padding-left: 1.5rem;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
float: right;
text-align: right;
width: 50%;
background-image: svg-load("../../svg/chevron-right.svg", fill=#3a515f);
background-repeat: no-repeat;
background-position: right 0 center;
background-size: 1rem;
padding-right: 1.5rem;
}
/**
* Alignments
*/
.aligncenter, .alignright, .alignleft {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 600px) {
.alignleft {
float: left;
margin-right: 1.5em;
}
}
@media (min-width: 600px) {
.alignright {
float: right;
margin-left: 1.5em;
}
}
/**
* Captions
*/
.wp-caption {
margin-top: 1.5em;
margin-bottom: 1.5em;
max-width: 100%;
}
.wp-caption img[class*=wp-image-] {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption .wp-caption-text {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/**
* Galleries
*/
.gallery {
margin-bottom: 1.5em;
}
.gallery-item {
display: inline-block;
text-align: center;
vertical-align: top;
width: 100%;
}
.gallery-columns-2 .gallery-item {
max-width: 50%;
}
.gallery-columns-3 .gallery-item {
max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
max-width: 25%;
}
.gallery-columns-5 .gallery-item {
max-width: 20%;
}
.gallery-columns-6 .gallery-item {
max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
max-width: 11.11%;
}
.gallery-caption {
display: block;
}
/**
* Screen reader text
*/
/**
* When the native `