Lungo.layout.article.less 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. /**
  2. * Stylesheet
  3. *
  4. * @namespace LUNGO.Layout
  5. * @class Article
  6. *
  7. * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  8. */
  9. @import "mixins.less";
  10. @import "constants.less";
  11. @defaultTrasition : @easeOutSine;
  12. @header_footer_height: 40px;
  13. @header_extended_height: 75px;
  14. @footer_toolbar_height: 48px;
  15. /* @group <article> */
  16. article {
  17. position: absolute;
  18. width: 100% !important;
  19. height: auto;
  20. top: 0px;
  21. bottom: 0px;
  22. visibility: hidden;
  23. z-index: 0;
  24. &.current {
  25. visibility: visible;
  26. z-index: 1;
  27. }
  28. & .title {
  29. font-size: 1.1em;
  30. margin: 0px 0 4px;
  31. & .icon { margin-right: 4px; }
  32. }
  33. & .text {
  34. margin: 4px 0 8px;
  35. display: block;
  36. font-size: 0.9em;
  37. font-weight: normal;
  38. line-height: 1.4em;
  39. }
  40. }
  41. header:not(.extended) ~ article { top: @header-height; }
  42. header.extended ~ article { top: @header_extended_height; }
  43. footer:not(.with-labels) ~ article { bottom: @article-bottom; }
  44. footer.with-labels ~ article { bottom: @article-bottom-with-labels; }
  45. @media handheld, only screen and (min-width: 768px) {
  46. article.aside { .transform(translate3d(0px, 0, 0)); }
  47. }
  48. /* @end */