Lungo.layout.article.less 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. /**
  2. * Stylesheet
  3. *
  4. * @namespace Lungo.Layout
  5. * @class Article
  6. *
  7. * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  8. */
  9. @import "constants.less";
  10. article {
  11. position: absolute;
  12. width: inherit;
  13. height: auto;
  14. // width: 100%;
  15. // eight: 100%;
  16. top: 0;
  17. bottom: 0;
  18. display: none;
  19. visibility: hidden;
  20. z-index: 0;
  21. &.current, &:first-child {
  22. visibility: visible;
  23. display: block;
  24. z-index: 1;
  25. }
  26. &.pull {
  27. -webkit-transition-property: -webkit-transform;
  28. -moz-transition-property: -moz-transform;
  29. -ms-transition-property: -ms-transform;
  30. -o-transition-property: -o-transform;
  31. transition-property: transform;
  32. .transition-duration(300ms);
  33. }
  34. & .text {
  35. margin: 4px 0 8px;
  36. display: block;
  37. font-size: 0.9em;
  38. font-weight: normal;
  39. line-height: 1.4em;
  40. }
  41. }
  42. header:not(.extended) ~ article { top: @header-footer-height; }
  43. header.extended ~ article { top: @article_with_header_extended; }
  44. footer ~ article { bottom: @header-footer-height; }
  45. @media handheld, only screen and (min-width: 768px) {
  46. article.aside { .transform(translate3d(0px, 0, 0)); }
  47. }