/* ==========================================================================
Post Nav ========================================================================== */
.post-nav {
position: relative; @media only screen and (max-width: $on-laptop) { height: 7em; margin: 2em 0; } &:after { clear: both; content: ''; display: table; } .post-nav-item { position: fixed; top: 50%; display: block; margin-top: -4em; overflow: hidden; border-radius: 10em; transition: none; @media only screen and (max-width: $on-laptop) { position: absolute; top: auto; margin: auto; max-width: 50%; } &:hover, &:focus { border-radius: 0; .post-nav-teaser { .post-nav-icon { border: 2px solid $brand-color-light; box-shadow: 0 0 0 25em $brand-color-light; @media only screen and (max-width: $on-laptop) { border: 2px solid $brand-color-light; box-shadow: 0 0 0 2px $brand-color-light; } } .post-nav-info { display: block; @media only screen and (max-width: $on-laptop) { display: none; } .post-nav-title { color: $grey-color-dark; } .post-nav-excerpt { color: #fff; } } } } &.post-nav-next { left: 0; text-align: left; .post-nav-icon { float: left; i { left: -0.05em; } } .post-nav-info { padding-left: 6em; } } &.post-nav-prev { right: 0; text-align: right; .post-nav-icon { float: right; i { right: -0.05em; } } .post-nav-info { padding-right: 6em; } } .post-nav-teaser { display: block; padding: 1em; transition: all ease-out 0.2s; max-width: 25em; overflow: visible; &:after { clear: both; content: ''; display: table; } .post-nav-icon { display: block; width: 5em; height: 5em; line-height: 5em; text-align: center; box-sizing: border-box; border-radius: 10em; border: 2px solid $brand-color; box-shadow: 0 0 0 0 transparent; transition: all ease-out 0.1s; background: transparent; @media only screen and (max-width: $on-palm) { width: 4em; height: 4em; line-height: 4em; } } .post-nav-info { display: none; width: 100%; box-sizing: border-box; transition: all ease-out 0.2s; .post-nav-title { display: block; max-height: 1.25em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 1.25em 0 0.25em; font-size: 1em; line-height: 1.25em; font-weight: 700; color: $grey-color-dark; } .post-nav-excerpt { display: block; max-height: 1.334em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 0; font-size: 0.75em; line-height: 1.334em; font-weight: 400; color: $grey-color-dark; } } } }
}