/** * Stylesheet * * @namespace Lungo * @class Layout * * @author Javier Jimenez Villar || @soyjavi */ body[data-position="absolute"] > section { position: absolute; } body[data-position="fixed"] > section { position: fixed; } body[data-position="fixed"] > section[data-transition] { display: block !important; -webkit-transition-property: opacity z-index transform; -moz-transition-property: opacity z-index transform; transition-property: opacity z-index transform; -webkit-transition-duration: 350ms; -moz-transition-duration: 350ms; transition-duration: 350ms; -webkit-transition-timing-function: easeOutSine; -moz-transition-timing-function: easeOutSine; transition-timing-function: easeOutSine; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } section { top: 0; left: 0; width: 100%; height: 100%; z-index: 1; display: none; /* Transition: POP */ /* Transition: SLIDE */ /* Transition: COVER */ /* Transition: FADE */ } section.show { z-index: 2; display: block; } section[data-transition="pop"] { opacity: 0; -webkit-transform: scale(1.15); -moz-transform: scale(1.15); transform: scale(1.15); } section[data-transition="pop"].show { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); opacity: 1; } section[data-transition="pop"].hide { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); transform: scale(0.9); opacity: 0; } section[data-transition="slide"] { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); visibility: visible !important; } section[data-transition="slide"].show { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); transform: translateX(0%); } section[data-transition="slide"].hide { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translateX(-100%); } section[data-transition="cover"] { -webkit-transform: translateY(110%); -moz-transform: translateY(110%); transform: translateY(110%); } section[data-transition="cover"].show, section[data-transition="cover"].hide { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); transform: translateY(0%); } section[data-transition="fade"] { opacity: 0; } section[data-transition="fade"]:first-child, section[data-transition="fade"].show { opacity: 1; } section[data-transition="fade"]:hide { opacity: 0; } header, footer { position: absolute; left: 0; width: 100%; display: block; z-index: 2; } header { top: 0; height: 44px; line-height: 44px; } header .title { margin-left: 4px; float: left; z-index: -1; font-size: 1.44em; } header .title img { height: 24px; } header .title.centered { position: absolute; left: 32px; right: 32px; text-align: center; display: inline-block; } footer { bottom: 0; height: 44px; }