Lungo.layout.article.css 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. /**
  2. * Stylesheet
  3. *
  4. * @namespace Lungo.Layout
  5. * @class Article
  6. *
  7. * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  8. */
  9. article {
  10. position: absolute;
  11. top: 0;
  12. bottom: 0;
  13. width: inherit;
  14. height: auto;
  15. visibility: hidden;
  16. display: none;
  17. z-index: 0;
  18. }
  19. .show > article.active,
  20. .hide > article.active,
  21. .hiding > article.active {
  22. visibility: visible;
  23. display: block;
  24. z-index: 1;
  25. }
  26. .show > article.active.pull,
  27. .hide > article.active.pull,
  28. .hiding > article.active.pull {
  29. -webkit-transition-property: transform;
  30. -moz-transition-property: transform;
  31. transition-property: transform;
  32. -webkit-transition-duration: 350ms;
  33. -moz-transition-duration: 350ms;
  34. transition-duration: 350ms;
  35. }
  36. header:not(.extended) ~ article {
  37. top: 44px;
  38. }
  39. header.extended ~ article {
  40. top: 74px;
  41. }
  42. footer ~ article {
  43. bottom: 44px;
  44. }
  45. @media handheld, only screen and (min-width: 768px) {
  46. article.aside {
  47. -webkit-transform: translate3d(0px, 0, 0);
  48. -moz-transform: translate3d(0px, 0, 0);
  49. transform: translate3d(0px, 0, 0);
  50. }
  51. }