app.nav.offscreen.less 957 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. @media (max-width: 767px) {
  2. .app{
  3. overflow-x: hidden;
  4. }
  5. .app-content{
  6. .transition-transform(0.2s ease);
  7. }
  8. .off-screen{
  9. position: absolute;
  10. top: 50px;
  11. bottom: 0;
  12. width: @off-screen-width;
  13. display: block !important;
  14. visibility: visible;
  15. overflow-x: hidden;
  16. overflow-y: auto;
  17. -webkit-overflow-scrolling: touch;
  18. z-index: 1010;
  19. + *{
  20. background-color: @body-bg;
  21. .transition-transform(0.2s ease);
  22. .backface-visibility(hidden);
  23. .translate3d(@off-screen-width, 0px, 0px);
  24. overflow: hidden;
  25. position: absolute;
  26. width: 100%;
  27. top: 0;
  28. bottom: 0;
  29. left: 0;
  30. right: 0;
  31. z-index: 1015;
  32. padding-top: 50px;
  33. .off-screen-toggle {
  34. display:block !important;
  35. position: absolute;
  36. left: 0;
  37. right: 0;
  38. top: 0;
  39. bottom: 0;
  40. z-index: 1020;
  41. }
  42. }
  43. &.pull-right{
  44. right: 0;
  45. + *{
  46. .translate3d(-@off-screen-width, 0px, 0px);
  47. }
  48. }
  49. }
  50. }