| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576 |
- /**
- * Stylesheet
- *
- * @namespace Lungo.Layout
- * @class Article
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
- @import "constants.styl"
- /* ========================================================================= */
- /* ============================= HEADER/FOOTER ============================= */
- /* ========================================================================= */
- header, footer
- height: HEADER_FOOTER_HEIGHT
- line-height: HEADER_FOOTER_HEIGHT
- // display-box()
- // box-pack(justify)
- // box-orient(horizontal)
- // overflow: hidden
- & > nav
- box-flex(0)
- & > .title
- margin: 0 4px
- float: left
- z-index: -1
- font-size: (FONT_SIZE_BIG * 1.2)
- z-index: 0
- box-flex(1)
- &.centered
- position: absolute
- left: 32px
- right: 32px
- text-align: center
- display: inline-block
- & img.title
- PAD = 18px
- height: (HEADER_FOOTER_HEIGHT - PAD)
- margin: (PAD / 2) auto
- /* ========================================================================= */
- /* ================================ ARTICLE ================================ */
- /* ========================================================================= */
- article
- visibility: hidden
- display: none
- .show > &.active, .hide > &.active, .hiding > &.active
- visibility: visible
- display: block
- z-index: 1
- &.pull
- transition-property(transform)
- transition-duration(TRANSITION_TIME)
- header
- &:not(.extended) ~ article
- top: HEADER_FOOTER_HEIGHT
- &.extended ~ article
- top: ARTICLE_WITH_HEADER_EXTENDED
- footer ~ article
- bottom: HEADER_FOOTER_HEIGHT
- @media handheld, only screen and (min-width: 768px)
- article.aside
- transform(translate3d(0px, 0, 0))
|
